@payfit/unity-components
Version:
64 lines (63 loc) • 1.75 kB
JavaScript
import { forwardRef as e } from "react";
import { uyTv as t } from "@payfit/unity-themes";
import { jsx as n, jsxs as r } from "react/jsx-runtime";
import { useId as i } from "react-aria/useId";
//#region src/components/fieldset/Fieldset.tsx
var a = t({
slots: {
base: "uy:p-0 uy:m-0 uy:[&+&]:mt-500 uy:[&:last-of-type]:mb-500",
legend: "uy:typography-h3 uy:text-content-neutral",
description: "uy:block uy:typography-body uy:mt-100 uy:text-content-neutral",
fieldsContainer: "uy:flex uy:flex-col uy:gap-250"
},
variants: {
isLegendHidden: {
true: {
legend: "uy:sr-only",
description: "uy:sr-only",
fieldsContainer: "uy:mt-0"
},
false: {
legend: "uy:block",
description: "uy:block",
fieldsContainer: "uy:mt-300"
}
},
disableEndMargin: { true: { base: "uy:[&:last-of-type]:mb-0" } }
},
defaultVariants: {
isLegendHidden: !1,
disableEndMargin: !1
}
}), o = e(({ children: e, ...t }, o) => {
let s = i(), { legend: c, description: l, isLegendHidden: u, disableEndMargin: d, ...f } = t, { base: p, legend: m, description: h, fieldsContainer: g } = a({
isLegendHidden: u,
disableEndMargin: d
}), _ = l ? `${s}-fieldset-description` : void 0;
return /* @__PURE__ */ r("fieldset", {
"data-dd-privacy": "allow",
...f,
ref: o,
className: p(),
"aria-describedby": _,
children: [
/* @__PURE__ */ n("legend", {
className: m(),
children: c
}),
l && /* @__PURE__ */ n("span", {
id: `${s}-fieldset-description`,
"data-fieldset-slot": "description",
className: h(),
children: l
}),
/* @__PURE__ */ n("div", {
className: g(),
children: e
})
]
});
});
o.displayName = "Fieldset";
//#endregion
export { o as Fieldset, a as fieldset };