@frontify/fondue
Version:
Design system of Frontify
130 lines (129 loc) • 3.65 kB
JavaScript
import { jsxs as d, jsx as s } from "react/jsx-runtime";
import { cloneElement as g, isValidElement as V } from "react";
import { InputLabel as p } from "../InputLabel/InputLabel.es.js";
import { merge as u } from "../../utilities/merge.es.js";
import { Validation as c } from "../../utilities/validation.es.js";
var l = /* @__PURE__ */ ((t) => (t.Primary = "Primary", t.Positive = "Positive", t.Danger = "Danger", t))(l || {});
const N = {
Primary: c.Default,
Positive: c.Success,
Danger: c.Error
}, m = ({
text: t,
disabled: e,
style: i,
fullWidth: n = !1,
"data-test-id": a = "form-control"
}) => {
let r;
switch (!0) {
case e:
r = "tw-text-text-disabled";
break;
case i === "Danger":
r = "tw-text-text-negative";
break;
case i === "Positive":
r = "tw-text-text-positive";
break;
default:
r = "tw-text-text-weak";
break;
}
return /* @__PURE__ */ s(
"span",
{
"data-test-id": `${a}-helper-text`,
className: `tw-text-s tw-font-sans ${n ? "tw-w-full" : ""} ${r}`,
children: t
}
);
};
m.displayName = "FondueHelperText";
var P = /* @__PURE__ */ ((t) => (t.Before = "Before", t.After = "After", t))(P || {}), k = /* @__PURE__ */ ((t) => (t.Horizontal = "Horizontal", t.Vertical = "Vertical", t))(k || {});
const H = ({
label: t,
children: e,
extra: i,
name: n,
helper: a,
disabled: r,
clickable: v,
direction: o = "Vertical",
style: f = "Primary",
"data-test-id": w = "form-control"
}) => {
const x = (a == null ? void 0 : a.position) === "Before";
return /* @__PURE__ */ d(
"div",
{
"data-test-id": w,
"data-name": n,
className: u([
"tw-flex tw-items-center tw-gap-2",
o === "Horizontal" ? "tw-flex-row" : "tw-w-full tw-flex-col"
]),
children: [
((t == null ? void 0 : t.children) || i) && /* @__PURE__ */ d(
"div",
{
className: u([
"tw-flex tw-flew-row tw-items-center tw-justify-between",
o === "Vertical" && "tw-w-full"
]),
children: [
(t == null ? void 0 : t.children) && /* @__PURE__ */ s(p, { ...t, disabled: r, clickable: v }),
i && /* @__PURE__ */ s(
"span",
{
"data-test-id": `${w}-extra`,
className: "tw-pl-2 tw-text-black-80 tw-font-sans tw-text-s tw-whitespace-nowrap",
children: i
}
)
]
}
),
(a == null ? void 0 : a.text) && x && /* @__PURE__ */ s(
m,
{
style: f,
fullWidth: o === "Vertical",
text: a.text,
disabled: r,
"data-test-id": w
}
),
e && /* @__PURE__ */ s(
"div",
{
className: o === "Vertical" ? "tw-w-full tw-grid tw-grid-cols-1 tw-gap-5" : "",
children: V(e) ? g(e, {
id: (t == null ? void 0 : t.htmlFor) ?? e.props.id,
disabled: r,
validation: N[f]
}) : e
}
),
(a == null ? void 0 : a.text) && !x && /* @__PURE__ */ s(
m,
{
fullWidth: o === "Vertical",
text: a.text,
disabled: r,
style: f,
"data-test-id": w
}
)
]
}
);
};
H.displayName = "FondueFormControl";
export {
H as FormControl,
k as FormControlDirection,
l as FormControlStyle,
P as HelperPosition
};
//# sourceMappingURL=FormControl.es.js.map