@payfit/unity-components 2.47.5 → 2.47.7

package/dist/esm/components/checkbox/Checkbox.variants.js

@@ -1,82 +1,62 @@
 import { uyTv as e } from "@payfit/unity-themes";
-const r = e({
-  slots: {
-    base: [
-      "uy:group uy:inline-flex uy:flex-col",
-      "uy:rounded-md uy:sm:rounded-25",
-      "uy:px-150 uy:sm:px-0 uy:py-125 uy:sm:py-px",
-      "uy:border uy:sm:border-none uy:border-solid uy:border-border-neutral-enabled",
-      'uy:has-data-[focus-visible="true"]:outline-2 uy:has-data-[focus-visible="true"]:outline-utility-focus-ring uy:has-data-[focus-visible="true"]:outline-offset-2',
-      "uy:has-data-[disabled=true]:border-border-neutral-disabled",
-      "uy:has-data-[readonly=true]:border-border-neutral-disabled"
-    ],
-    wrapper: [
-      "uy:group uy:sm:rounded-25 uy:leading-none uy:sm:leading-[1lh]",
-      "uy:inline-flex uy:items-center",
-      "uy:typography-body uy:text-content-form-enabled",
-      "uy:data-[disabled=true]:text-content-form-disabled uy:data-[disabled]:cursor-not-allowed",
-      "uy:data-[readonly=true]:cursor-not-allowed uy:theme-rebrand:data-[readonly=true]:text-content-form-read-only"
-    ],
-    label: "uy:ml-75 uy:leading-[1]",
-    asterisk: "uy:text-content-danger uy:ml-25",
-    optionalTag: "uy:typography-body uy:leading-1 uy:ml-25",
-    descriptionsContainer: "uy:ml-300 uy:leading-1 uy:inline-flex uy:flex-col",
-    helperText: [
-      "uy:block uy:typography-body-small uy:text-content-neutral-low uy:mt-50"
-    ],
-    feedbackText: "uy:typography-body-small-strong uy:text-content-form-invalid uy:mt-50"
-  },
-  variants: {
-    isDisabled: {
-      true: {
-        base: "uy:text-content-form-disabled!"
-      }
-    },
-    isInvalid: {
-      true: {}
-    },
-    isReadOnly: {
-      true: {
-        base: "uy:cursor-not-allowed"
-      }
-    }
-  },
-  defaultVariants: {
-    isDisabled: !1,
-    isInvalid: !1,
-    isReadOnly: !1
-  },
-  compoundVariants: [
-    {
-      isDisabled: !1,
-      isReadOnly: !1,
-      className: {
-        wrapper: "uy:cursor-pointer"
-      }
-    },
-    {
-      isDisabled: !0,
-      isReadOnly: !1,
-      className: {
-        wrapper: "uy:cursor-not-allowed"
-      }
-    },
-    {
-      isDisabled: !1,
-      isReadOnly: !0,
-      className: {
-        wrapper: "uy:cursor-not-allowed"
-      }
-    },
-    {
-      isDisabled: !0,
-      isReadOnly: !0,
-      className: {
-        wrapper: "uy:cursor-not-allowed"
-      }
-    }
-  ]
+//#region src/components/checkbox/Checkbox.variants.ts
+var t = e({
+	slots: {
+		base: [
+			"uy:group uy:inline-flex uy:flex-col",
+			"uy:rounded-md uy:sm:rounded-25",
+			"uy:px-150 uy:sm:px-0 uy:py-125 uy:sm:py-px",
+			"uy:border uy:sm:border-none uy:border-solid uy:border-border-neutral-enabled",
+			"uy:has-data-[focus-visible=\"true\"]:outline-2 uy:has-data-[focus-visible=\"true\"]:outline-utility-focus-ring uy:has-data-[focus-visible=\"true\"]:outline-offset-2",
+			"uy:has-data-[disabled=true]:border-border-neutral-disabled",
+			"uy:has-data-[readonly=true]:border-border-neutral-disabled"
+		],
+		wrapper: [
+			"uy:group uy:sm:rounded-25 uy:leading-none uy:sm:leading-[1lh]",
+			"uy:inline-flex uy:items-center",
+			"uy:typography-body uy:text-content-form-enabled",
+			"uy:data-[disabled=true]:text-content-form-disabled uy:data-[disabled]:cursor-not-allowed",
+			"uy:data-[readonly=true]:cursor-not-allowed uy:theme-rebrand:data-[readonly=true]:text-content-form-read-only"
+		],
+		label: "uy:ml-75 uy:leading-[1]",
+		asterisk: "uy:text-content-danger uy:ml-25",
+		optionalTag: "uy:typography-body uy:leading-1 uy:ml-25",
+		descriptionsContainer: "uy:ml-300 uy:leading-1 uy:inline-flex uy:flex-col",
+		helperText: ["uy:block uy:typography-body-small uy:text-content-neutral-low uy:mt-50"],
+		feedbackText: "uy:typography-body-small-strong uy:text-content-form-invalid uy:mt-50"
+	},
+	variants: {
+		isDisabled: { true: { base: "uy:text-content-form-disabled!" } },
+		isInvalid: { true: {} },
+		isReadOnly: { true: { base: "uy:cursor-not-allowed" } }
+	},
+	defaultVariants: {
+		isDisabled: !1,
+		isInvalid: !1,
+		isReadOnly: !1
+	},
+	compoundVariants: [
+		{
+			isDisabled: !1,
+			isReadOnly: !1,
+			className: { wrapper: "uy:cursor-pointer" }
+		},
+		{
+			isDisabled: !0,
+			isReadOnly: !1,
+			className: { wrapper: "uy:cursor-not-allowed" }
+		},
+		{
+			isDisabled: !1,
+			isReadOnly: !0,
+			className: { wrapper: "uy:cursor-not-allowed" }
+		},
+		{
+			isDisabled: !0,
+			isReadOnly: !0,
+			className: { wrapper: "uy:cursor-not-allowed" }
+		}
+	]
 });
-export {
-  r as checkbox
-};
+//#endregion
+export { t as checkbox };

package/dist/esm/components/checkbox/CheckboxStandalone.js

@@ -1,29 +1,34 @@
-import { jsx as e, jsxs as h, Fragment as f } from "react/jsx-runtime";
-import { forwardRef as x } from "react";
-import { CheckboxField as y, CheckboxButton as p } from "react-aria-components/Checkbox";
-import { useId as k } from "react-aria/useId";
-import { checkbox as u } from "./Checkbox.variants.js";
-import { CheckboxIndicator as C } from "./parts/CheckboxIndicator.js";
-const N = x(({ children: r, ...a }, i) => {
-  const o = k(), { isDisabled: n, isReadOnly: s, isInvalid: t } = a, { base: c, wrapper: d } = u({
-    isDisabled: n,
-    isReadOnly: s,
-    isInvalid: t
-  }), l = [a["aria-labelledby"], `${o}-label`].filter(Boolean), m = l.length > 0 ? l.join(" ") : void 0;
-  return /* @__PURE__ */ e("div", { className: c(), children: /* @__PURE__ */ e(
-    y,
-    {
-      ...a,
-      className: "uy:contents",
-      "aria-labelledby": m,
-      children: /* @__PURE__ */ e(p, { ref: i, className: d(), children: (b) => /* @__PURE__ */ h(f, { children: [
-        /* @__PURE__ */ e(C, { ...b }),
-        /* @__PURE__ */ e("span", { id: `${o}-label`, className: "uy:sr-only", children: r })
-      ] }) })
-    }
-  ) });
+import { checkbox as e } from "./Checkbox.variants.js";
+import { CheckboxIndicator as t } from "./parts/CheckboxIndicator.js";
+import { forwardRef as n } from "react";
+import { Fragment as r, jsx as i, jsxs as a } from "react/jsx-runtime";
+import { useId as o } from "react-aria/useId";
+import { CheckboxButton as s, CheckboxField as c } from "react-aria-components/Checkbox";
+//#region src/components/checkbox/CheckboxStandalone.tsx
+var l = n(({ children: n, ...l }, u) => {
+	let d = o(), { isDisabled: f, isReadOnly: p, isInvalid: m } = l, { base: h, wrapper: g } = e({
+		isDisabled: f,
+		isReadOnly: p,
+		isInvalid: m
+	}), _ = [l["aria-labelledby"], `${d}-label`].filter(Boolean), v = _.length > 0 ? _.join(" ") : void 0;
+	return /* @__PURE__ */ i("div", {
+		className: h(),
+		children: /* @__PURE__ */ i(c, {
+			...l,
+			className: "uy:contents",
+			"aria-labelledby": v,
+			children: /* @__PURE__ */ i(s, {
+				ref: u,
+				className: g(),
+				children: (e) => /* @__PURE__ */ a(r, { children: [/* @__PURE__ */ i(t, { ...e }), /* @__PURE__ */ i("span", {
+					id: `${d}-label`,
+					className: "uy:sr-only",
+					children: n
+				})] })
+			})
+		})
+	});
 });
-N.displayName = "CheckboxStandalone";
-export {
-  N as CheckboxStandalone
-};
+l.displayName = "CheckboxStandalone";
+//#endregion
+export { l as CheckboxStandalone };

package/dist/esm/components/checkbox/TanstackCheckbox.js

@@ -1,51 +1,35 @@
-import { jsx as p } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { useFieldContext as k } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as C } from "../form-field/TanstackFormField.context.js";
-import { Checkbox as y } from "./Checkbox.js";
-const I = u(
-  ({
-    children: i,
-    value: r,
-    isIndeterminate: d,
-    onBlur: n,
-    onChange: l,
-    isReadOnly: s,
-    isDisabled: c,
-    isRequired: m,
-    requiredVariant: b,
-    ...f
-  }, h) => {
-    const e = k(), a = C(), x = e.state.meta.isTouched && !e.state.meta.isValid, t = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ");
-    return /* @__PURE__ */ p(
-      y,
-      {
-        ...f,
-        id: a.inputId,
-        ref: h,
-        value: r,
-        isSelected: e.state.value,
-        isIndeterminate: d,
-        requiredVariant: b,
-        isRequired: m,
-        onChange: (o) => {
-          e.handleChange(o), l?.(o);
-        },
-        onBlur: () => {
-          e.handleBlur(), n?.();
-        },
-        isReadOnly: s,
-        isDisabled: c,
-        isInvalid: x,
-        "aria-labelledby": a.labelId,
-        "aria-describedby": t.length > 0 ? t : void 0,
-        "aria-details": a.contextualLinkId,
-        children: i
-      }
-    );
-  }
-);
-I.displayName = "TanstackCheckbox";
-export {
-  I as TanstackCheckbox
-};
+import { Checkbox as e } from "./Checkbox.js";
+import { useFieldContext as t } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../form-field/TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/checkbox/TanstackCheckbox.tsx
+var a = r(({ children: r, value: a, isIndeterminate: o, onBlur: s, onChange: c, isReadOnly: l, isDisabled: u, isRequired: d, requiredVariant: f, ...p }, m) => {
+	let h = t(), g = n(), _ = h.state.meta.isTouched && !h.state.meta.isValid, v = [g.helperTextId, g.feedbackTextId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i(e, {
+		...p,
+		id: g.inputId,
+		ref: m,
+		value: a,
+		isSelected: h.state.value,
+		isIndeterminate: o,
+		requiredVariant: f,
+		isRequired: d,
+		onChange: (e) => {
+			h.handleChange(e), c?.(e);
+		},
+		onBlur: () => {
+			h.handleBlur(), s?.();
+		},
+		isReadOnly: l,
+		isDisabled: u,
+		isInvalid: _,
+		"aria-labelledby": g.labelId,
+		"aria-describedby": v.length > 0 ? v : void 0,
+		"aria-details": g.contextualLinkId,
+		children: r
+	});
+});
+a.displayName = "TanstackCheckbox";
+//#endregion
+export { a as TanstackCheckbox };

package/dist/esm/components/checkbox/parts/CheckboxIndicator.js

@@ -1,163 +1,133 @@
-import { jsx as e } from "react/jsx-runtime";
-import { uyTv as u } from "@payfit/unity-themes";
-const b = u({
-  slots: {
-    base: [
-      "uy:flex uy:items-center uy:justify-center uy:rounded-50 uy:m-25 uy:w-200 uy:h-200 uy:text-content-inverted uy:border uy:border-solid uy:transition-all uy:duration-100"
-    ],
-    checkmark: [
-      "uy:w-[16px] uy:fill-none uy:stroke-[2px] uy:stroke-content-inverted uy:transition-all uy:duration-500"
-    ]
-  },
-  variants: {
-    isSelected: {
-      true: ""
-    },
-    isDisabled: {
-      true: ""
-    },
-    isReadOnly: {
-      true: ""
-    },
-    isInvalid: {
-      true: ""
-    }
-  },
-  defaultVariants: {
-    isSelected: !1,
-    isDisabled: !1,
-    isInvalid: !1,
-    isReadOnly: !1
-  },
-  compoundVariants: [
-    {
-      isSelected: !1,
-      isDisabled: !1,
-      isInvalid: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:group-data-[hovered=true]:border-border-form-hover uy:group-hover:border-border-form-hover uy:focus-visible:border-border-form-focus uy:group-data-[focus-visible=true]:border-border-form-focus uy:bg-surface-form-enabled"
-      }
-    },
-    {
-      isSelected: !0,
-      isDisabled: !1,
-      isInvalid: !1,
-      isReadOnly: !1,
-      className: {
-        base: [
-          "uy:bg-surface-form-active",
-          "uy:theme-legacy:border-border-form-selected uy:theme-legacy:hover:border-border-form-active",
-          "uy:theme-rebrand:border-transparent uy:theme-rebrand:hover:border-transparent"
-        ]
-      }
-    },
-    {
-      isSelected: !1,
-      isDisabled: !0,
-      className: {
-        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled",
-        checkmark: "uy:text-transparent"
-      }
-    },
-    {
-      isSelected: !0,
-      isDisabled: !0,
-      className: {
-        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled!",
-        checkmark: "uy:text-border-form-disabled"
-      }
-    },
-    {
-      isSelected: !1,
-      isInvalid: !0,
-      className: {
-        base: "uy:border-border-form-error uy:bg-surface-form-enabled",
-        checkmark: "uy:text-transparent"
-      }
-    },
-    {
-      isSelected: !0,
-      isDisabled: !1,
-      isInvalid: !0,
-      isReadOnly: !1,
-      className: {
-        base: [
-          "uy:bg-surface-danger!",
-          "uy:theme-legacy:border-border-form-error!",
-          "uy:theme-rebrand:border-transparent!"
-        ],
-        checkmark: "uy:text-content-inverted"
-      }
-    },
-    {
-      isSelected: !1,
-      isReadOnly: !0,
-      className: {
-        base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
-        checkmark: "uy:text-transparent"
-      }
-    },
-    {
-      isSelected: !0,
-      isReadOnly: !0,
-      className: {
-        base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled!",
-        checkmark: "uy:text-surface-form-read-only!"
-      }
-    }
-  ]
+import { uyTv as e } from "@payfit/unity-themes";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/components/checkbox/parts/CheckboxIndicator.tsx
+var n = e({
+	slots: {
+		base: ["uy:flex uy:items-center uy:justify-center uy:rounded-50 uy:m-25 uy:w-200 uy:h-200 uy:text-content-inverted uy:border uy:border-solid uy:transition-all uy:duration-100"],
+		checkmark: ["uy:w-[16px] uy:fill-none uy:stroke-[2px] uy:stroke-content-inverted uy:transition-all uy:duration-500"]
+	},
+	variants: {
+		isSelected: { true: "" },
+		isDisabled: { true: "" },
+		isReadOnly: { true: "" },
+		isInvalid: { true: "" }
+	},
+	defaultVariants: {
+		isSelected: !1,
+		isDisabled: !1,
+		isInvalid: !1,
+		isReadOnly: !1
+	},
+	compoundVariants: [
+		{
+			isSelected: !1,
+			isDisabled: !1,
+			isInvalid: !1,
+			isReadOnly: !1,
+			className: { base: "uy:border-border-form-enabled uy:hover:border-border-form-hover uy:group-data-[hovered=true]:border-border-form-hover uy:group-hover:border-border-form-hover uy:focus-visible:border-border-form-focus uy:group-data-[focus-visible=true]:border-border-form-focus uy:bg-surface-form-enabled" }
+		},
+		{
+			isSelected: !0,
+			isDisabled: !1,
+			isInvalid: !1,
+			isReadOnly: !1,
+			className: { base: [
+				"uy:bg-surface-form-active",
+				"uy:theme-legacy:border-border-form-selected uy:theme-legacy:hover:border-border-form-active",
+				"uy:theme-rebrand:border-transparent uy:theme-rebrand:hover:border-transparent"
+			] }
+		},
+		{
+			isSelected: !1,
+			isDisabled: !0,
+			className: {
+				base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled",
+				checkmark: "uy:text-transparent"
+			}
+		},
+		{
+			isSelected: !0,
+			isDisabled: !0,
+			className: {
+				base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled!",
+				checkmark: "uy:text-border-form-disabled"
+			}
+		},
+		{
+			isSelected: !1,
+			isInvalid: !0,
+			className: {
+				base: "uy:border-border-form-error uy:bg-surface-form-enabled",
+				checkmark: "uy:text-transparent"
+			}
+		},
+		{
+			isSelected: !0,
+			isDisabled: !1,
+			isInvalid: !0,
+			isReadOnly: !1,
+			className: {
+				base: [
+					"uy:bg-surface-danger!",
+					"uy:theme-legacy:border-border-form-error!",
+					"uy:theme-rebrand:border-transparent!"
+				],
+				checkmark: "uy:text-content-inverted"
+			}
+		},
+		{
+			isSelected: !1,
+			isReadOnly: !0,
+			className: {
+				base: "uy:border-border-form-disabled uy:bg-surface-form-disabled",
+				checkmark: "uy:text-transparent"
+			}
+		},
+		{
+			isSelected: !0,
+			isReadOnly: !0,
+			className: {
+				base: "uy:bg-surface-form-disabled! uy:border-border-form-disabled!",
+				checkmark: "uy:text-surface-form-read-only!"
+			}
+		}
+	]
 });
-function c({
-  isSelected: r,
-  isDisabled: s,
-  isIndeterminate: a,
-  isInvalid: o,
-  isReadOnly: t,
-  className: d
-}) {
-  const { base: l, checkmark: i } = b({
-    isSelected: r || a,
-    isDisabled: s,
-    isInvalid: o,
-    isReadOnly: t
-  });
-  return /* @__PURE__ */ e("div", { className: l({ className: d }), "data-dd-privacy": "mask", children: /* @__PURE__ */ e(
-    "svg",
-    {
-      fill: "none",
-      stroke: "currentColor",
-      viewBox: "0 0 16 16",
-      "aria-hidden": "true",
-      className: i(),
-      style: {
-        strokeDashoffset: r ? 44 : 66
-      },
-      children: a ? /* @__PURE__ */ e(
-        "rect",
-        {
-          x: "3",
-          y: "7",
-          width: "10",
-          height: "2",
-          rx: "0.5",
-          stroke: "none",
-          fill: "currentColor"
-        }
-      ) : /* @__PURE__ */ e(
-        "polyline",
-        {
-          points: "3.5,8 6.5,11 12.5,5",
-          stroke: "currentColor",
-          strokeDasharray: "22",
-          strokeLinecap: "butt",
-          strokeLinejoin: "bevel"
-        }
-      )
-    }
-  ) });
+function r({ isSelected: e, isDisabled: r, isIndeterminate: i, isInvalid: a, isReadOnly: o, className: s }) {
+	let { base: c, checkmark: l } = n({
+		isSelected: e || i,
+		isDisabled: r,
+		isInvalid: a,
+		isReadOnly: o
+	});
+	return /* @__PURE__ */ t("div", {
+		className: c({ className: s }),
+		"data-dd-privacy": "mask",
+		children: /* @__PURE__ */ t("svg", {
+			fill: "none",
+			stroke: "currentColor",
+			viewBox: "0 0 16 16",
+			"aria-hidden": "true",
+			className: l(),
+			style: { strokeDashoffset: e ? 44 : 66 },
+			children: i ? /* @__PURE__ */ t("rect", {
+				x: "3",
+				y: "7",
+				width: "10",
+				height: "2",
+				rx: "0.5",
+				stroke: "none",
+				fill: "currentColor"
+			}) : /* @__PURE__ */ t("polyline", {
+				points: "3.5,8 6.5,11 12.5,5",
+				stroke: "currentColor",
+				strokeDasharray: "22",
+				strokeLinecap: "butt",
+				strokeLinejoin: "bevel"
+			})
+		})
+	});
 }
-c.displayName = "CheckboxIndicator";
-export {
-  c as CheckboxIndicator
-};
+r.displayName = "CheckboxIndicator";
+//#endregion
+export { r as CheckboxIndicator };