@payfit/unity-components 2.47.5 → 2.47.7

package/dist/esm/components/radio-button-group/TanstackRadioButtonGroup.js

@@ -1,43 +1,33 @@
-import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as p } from "react";
-import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
-import { useFieldA11yContext as B } from "../form-field/TanstackFormField.context.js";
-import { RadioButtonGroup as b } from "./RadioButtonGroup.js";
-function h({
-  onChange: d,
-  onBlur: n,
-  isDisabled: r,
-  isReadOnly: l,
-  children: s,
-  ...u
-}, c) {
-  const a = f(), t = B(), e = a.state.meta.isTouched && !a.state.meta.isValid, i = [t.helperTextId, t.feedbackTextId].filter(Boolean).join(" ");
-  return /* @__PURE__ */ m(
-    b,
-    {
-      ...u,
-      ref: c,
-      id: t.inputId,
-      value: a.state.value,
-      onChange: (o) => {
-        a.handleChange(o), d?.(o);
-      },
-      onBlur: (o) => {
-        a.handleBlur(), n?.(o);
-      },
-      isDisabled: r,
-      isReadOnly: l,
-      "aria-labelledby": t.labelId,
-      "aria-describedby": i.length > 0 ? i : void 0,
-      "aria-details": t.contextualLinkId,
-      "aria-invalid": e || void 0,
-      "data-invalid": e || void 0,
-      children: s
-    }
-  );
+import { RadioButtonGroup as e } from "./RadioButtonGroup.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/radio-button-group/TanstackRadioButtonGroup.tsx
+function a({ onChange: r, onBlur: a, isDisabled: o, isReadOnly: s, children: c, ...l }, u) {
+	let d = t(), f = n(), p = d.state.meta.isTouched && !d.state.meta.isValid, m = [f.helperTextId, f.feedbackTextId].filter(Boolean).join(" ");
+	return /* @__PURE__ */ i(e, {
+		...l,
+		ref: u,
+		id: f.inputId,
+		value: d.state.value,
+		onChange: (e) => {
+			d.handleChange(e), r?.(e);
+		},
+		onBlur: (e) => {
+			d.handleBlur(), a?.(e);
+		},
+		isDisabled: o,
+		isReadOnly: s,
+		"aria-labelledby": f.labelId,
+		"aria-describedby": m.length > 0 ? m : void 0,
+		"aria-details": f.contextualLinkId,
+		"aria-invalid": p || void 0,
+		"data-invalid": p || void 0,
+		children: c
+	});
 }
-const v = p(h);
-v.displayName = "TanstackRadioButtonGroup";
-export {
-  v as TanstackRadioButtonGroup
-};
+var o = r(a);
+o.displayName = "TanstackRadioButtonGroup";
+//#endregion
+export { o as TanstackRadioButtonGroup };

package/dist/esm/components/radio-button-group/parts/RadioButton.js

@@ -1,66 +1,61 @@
-import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { forwardRef as f, useContext as x } from "react";
-import { uyTv as g, useUnityTheme as h } from "@payfit/unity-themes";
-import { RadioGroupStateContext as R, RadioField as w, RadioButton as B } from "react-aria-components/RadioGroup";
-import { Flex as N } from "../../flex/Flex.js";
-import { Text as v } from "../../text/Text.js";
-import { RadioButtonHelper as S } from "./RadioButtonHelper.js";
-import { RadioIndicator as j } from "./RadioIndicator.js";
-const C = g({
-  slots: {
-    container: [
-      "uy:group uy:inline-flex uy:flex-col uy:gap-50",
-      "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:focus-within:outline-2 uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-2",
-      "uy:has-data-[disabled=true]:border-border-neutral-disabled",
-      "uy:has-data-[readonly=true]:border-border-neutral-disabled"
-    ],
-    base: [
-      "uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-start uy:cursor-pointer",
-      "uy:data-[disabled=true]:cursor-not-allowed",
-      "uy:data-[readonly=true]:cursor-not-allowed"
-    ],
-    radio: ["uy:mt-25 uy:sm:mt-px"],
-    label: [
-      "uy:text-content-neutral",
-      "uy:group-data-[disabled=true]:text-content-neutral-disabled",
-      "uy:group-data-[readonly=true]:text-content-neutral uy:group-data-[readonly]:cursor-text"
-    ]
-  }
-}), F = f(
-  ({ children: u, value: d, isDisabled: e, helperText: r, ...n }, i) => {
-    const { base: l, label: s, container: y, radio: c } = C(), o = x(R), { theme: m } = h(), p = o?.isReadOnly ? "readonly" : o?.isDisabled || e ? "disabled" : o?.isInvalid ? "invalid" : "enabled";
-    return /* @__PURE__ */ a(N, { direction: "col", gap: "50", className: y(), children: [
-      /* @__PURE__ */ t(
-        w,
-        {
-          ...n,
-          value: d,
-          isDisabled: e,
-          className: "uy:contents",
-          children: ({ isSelected: b }) => /* @__PURE__ */ a(B, { ref: i, className: () => l(), children: [
-            /* @__PURE__ */ t(
-              j,
-              {
-                isSelected: b,
-                state: p,
-                theme: m,
-                className: c()
-              }
-            ),
-            /* @__PURE__ */ t(v, { variant: "body", className: s(), children: u })
-          ] })
-        }
-      ),
-      r ? /* @__PURE__ */ t(S, { children: r }) : null
-    ] });
-  }
-);
-F.displayName = "RadioButton";
-export {
-  F as RadioButton,
-  j as RadioIndicator,
-  C as radioButton
-};
+import { Text as e } from "../../text/Text.js";
+import { Flex as t } from "../../flex/Flex.js";
+import { RadioButtonHelper as n } from "./RadioButtonHelper.js";
+import { RadioIndicator as r } from "./RadioIndicator.js";
+import { forwardRef as i, useContext as a } from "react";
+import { useUnityTheme as o, uyTv as s } from "@payfit/unity-themes";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { RadioButton as u, RadioField as d, RadioGroupStateContext as f } from "react-aria-components/RadioGroup";
+//#region src/components/radio-button-group/parts/RadioButton.tsx
+var p = s({ slots: {
+	container: [
+		"uy:group uy:inline-flex uy:flex-col uy:gap-50",
+		"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:focus-within:outline-2 uy:focus-within:outline-utility-focus-ring uy:focus-within:outline-offset-2",
+		"uy:has-data-[disabled=true]:border-border-neutral-disabled",
+		"uy:has-data-[readonly=true]:border-border-neutral-disabled"
+	],
+	base: [
+		"uy:group uy:flex uy:gap-100 uy:rounded-50 uy:items-start uy:cursor-pointer",
+		"uy:data-[disabled=true]:cursor-not-allowed",
+		"uy:data-[readonly=true]:cursor-not-allowed"
+	],
+	radio: ["uy:mt-25 uy:sm:mt-px"],
+	label: [
+		"uy:text-content-neutral",
+		"uy:group-data-[disabled=true]:text-content-neutral-disabled",
+		"uy:group-data-[readonly=true]:text-content-neutral uy:group-data-[readonly]:cursor-text"
+	]
+} }), m = i(({ children: i, value: s, isDisabled: m, helperText: h, ...g }, _) => {
+	let { base: v, label: y, container: b, radio: x } = p(), S = a(f), { theme: C } = o(), w = S?.isReadOnly ? "readonly" : S?.isDisabled || m ? "disabled" : S?.isInvalid ? "invalid" : "enabled";
+	return /* @__PURE__ */ l(t, {
+		direction: "col",
+		gap: "50",
+		className: b(),
+		children: [/* @__PURE__ */ c(d, {
+			...g,
+			value: s,
+			isDisabled: m,
+			className: "uy:contents",
+			children: ({ isSelected: t }) => /* @__PURE__ */ l(u, {
+				ref: _,
+				className: () => v(),
+				children: [/* @__PURE__ */ c(r, {
+					isSelected: t,
+					state: w,
+					theme: C,
+					className: x()
+				}), /* @__PURE__ */ c(e, {
+					variant: "body",
+					className: y(),
+					children: i
+				})]
+			})
+		}), h ? /* @__PURE__ */ c(n, { children: h }) : null]
+	});
+});
+m.displayName = "RadioButton";
+//#endregion
+export { m as RadioButton, p as radioButton };

package/dist/esm/components/radio-button-group/parts/RadioButtonHelper.js

@@ -1,19 +1,14 @@
-import { jsx as t } from "react/jsx-runtime";
-import { forwardRef as e } from "react";
-import { Text as a } from "../../text/Text.js";
-const l = e(
-  ({ children: o }, r) => /* @__PURE__ */ t(
-    a,
-    {
-      color: "content.neutral.low",
-      variant: "bodySmall",
-      className: "uy:ml-[28px]",
-      ref: r,
-      children: o
-    }
-  )
-);
-l.displayName = "RadioButtonHelper";
-export {
-  l as RadioButtonHelper
-};
+import { Text as e } from "../../text/Text.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/radio-button-group/parts/RadioButtonHelper.tsx
+var r = t(({ children: t }, r) => /* @__PURE__ */ n(e, {
+	color: "content.neutral.low",
+	variant: "bodySmall",
+	className: "uy:ml-[28px]",
+	ref: r,
+	children: t
+}));
+r.displayName = "RadioButtonHelper";
+//#endregion
+export { r as RadioButtonHelper };

package/dist/esm/components/radio-button-group/parts/RadioIndicator.js

@@ -1,131 +1,109 @@
-import { jsx as e, jsxs as l } from "react/jsx-runtime";
-const c = {
-  unselected: {
-    enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
-    valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
-    invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
-    disabled: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    },
-    readonly: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    }
-  },
-  selected: {
-    enabled: {
-      "--radio-bg-color": "var(--uy-color-surface-form-active)",
-      "--radio-border-color": "var(--uy-color-surface-form-active)",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-content-inverted)"
-    },
-    valid: {
-      "--radio-bg-color": "var(--uy-color-surface-form-active)",
-      "--radio-border-color": "var(--uy-color-surface-form-active)",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-content-inverted)"
-    },
-    invalid: {
-      "--radio-bg-color": "var(--uy-color-surface-danger)",
-      "--radio-border-color": "transparent",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-content-inverted)"
-    },
-    disabled: {
-      "--radio-bg-color": "var(--uy-color-surface-form-disabled)",
-      "--radio-border-color": "var(--uy-color-border-form-disabled)",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-content-form-disabled)"
-    },
-    readonly: {
-      "--radio-bg-color": "var(--uy-color-surface-form-read-only)",
-      "--radio-border-color": "transparent",
-      "--radio-dot-size": "3px",
-      "--radio-dot-color": "var(--uy-color-surface-neutral-disabled)"
-    }
-  }
-}, i = {
-  unselected: {
-    enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
-    valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
-    invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
-    disabled: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    },
-    readonly: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)"
-    }
-  },
-  selected: {
-    enabled: {
-      "--radio-border-color": "var(--uy-color-border-form-active)",
-      "--radio-dot-color": "var(--uy-color-surface-primary-active)"
-    },
-    valid: {
-      "--radio-border-color": "var(--uy-color-border-form-active)",
-      "--radio-dot-color": "var(--uy-color-surface-primary-active)"
-    },
-    invalid: {
-      "--radio-border-color": "var(--uy-color-border-form-error)",
-      "--radio-dot-color": "var(--uy-color-content-form-invalid)"
-    },
-    disabled: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)",
-      "--radio-dot-color": "var(--uy-color-border-form-disabled)"
-    },
-    readonly: {
-      "--radio-border-color": "var(--uy-color-border-form-disabled)",
-      "--radio-dot-color": "var(--uy-color-border-form-read-only)"
-    }
-  }
+import { jsx as e, jsxs as t } from "react/jsx-runtime";
+//#region src/components/radio-button-group/parts/RadioIndicator.tsx
+var n = {
+	unselected: {
+		enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+		valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+		invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
+		disabled: { "--radio-border-color": "var(--uy-color-border-form-disabled)" },
+		readonly: { "--radio-border-color": "var(--uy-color-border-form-disabled)" }
+	},
+	selected: {
+		enabled: {
+			"--radio-bg-color": "var(--uy-color-surface-form-active)",
+			"--radio-border-color": "var(--uy-color-surface-form-active)",
+			"--radio-dot-size": "3px",
+			"--radio-dot-color": "var(--uy-color-content-inverted)"
+		},
+		valid: {
+			"--radio-bg-color": "var(--uy-color-surface-form-active)",
+			"--radio-border-color": "var(--uy-color-surface-form-active)",
+			"--radio-dot-size": "3px",
+			"--radio-dot-color": "var(--uy-color-content-inverted)"
+		},
+		invalid: {
+			"--radio-bg-color": "var(--uy-color-surface-danger)",
+			"--radio-border-color": "transparent",
+			"--radio-dot-size": "3px",
+			"--radio-dot-color": "var(--uy-color-content-inverted)"
+		},
+		disabled: {
+			"--radio-bg-color": "var(--uy-color-surface-form-disabled)",
+			"--radio-border-color": "var(--uy-color-border-form-disabled)",
+			"--radio-dot-size": "3px",
+			"--radio-dot-color": "var(--uy-color-content-form-disabled)"
+		},
+		readonly: {
+			"--radio-bg-color": "var(--uy-color-surface-form-read-only)",
+			"--radio-border-color": "transparent",
+			"--radio-dot-size": "3px",
+			"--radio-dot-color": "var(--uy-color-surface-neutral-disabled)"
+		}
+	}
+}, r = {
+	unselected: {
+		enabled: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+		valid: { "--radio-border-color": "var(--uy-color-border-form-enabled)" },
+		invalid: { "--radio-border-color": "var(--uy-color-border-form-error)" },
+		disabled: { "--radio-border-color": "var(--uy-color-border-form-disabled)" },
+		readonly: { "--radio-border-color": "var(--uy-color-border-form-disabled)" }
+	},
+	selected: {
+		enabled: {
+			"--radio-border-color": "var(--uy-color-border-form-active)",
+			"--radio-dot-color": "var(--uy-color-surface-primary-active)"
+		},
+		valid: {
+			"--radio-border-color": "var(--uy-color-border-form-active)",
+			"--radio-dot-color": "var(--uy-color-surface-primary-active)"
+		},
+		invalid: {
+			"--radio-border-color": "var(--uy-color-border-form-error)",
+			"--radio-dot-color": "var(--uy-color-content-form-invalid)"
+		},
+		disabled: {
+			"--radio-border-color": "var(--uy-color-border-form-disabled)",
+			"--radio-dot-color": "var(--uy-color-border-form-disabled)"
+		},
+		readonly: {
+			"--radio-border-color": "var(--uy-color-border-form-disabled)",
+			"--radio-dot-color": "var(--uy-color-border-form-read-only)"
+		}
+	}
 };
-function t({
-  isSelected: r,
-  state: o,
-  theme: d
-}) {
-  return (d === "rebrand" ? c : i)[r ? "selected" : "unselected"][o];
+function i({ isSelected: e, state: t, theme: i }) {
+	return (i === "rebrand" ? n : r)[e ? "selected" : "unselected"][t];
 }
-const n = ({
-  isSelected: r,
-  state: o,
-  theme: d,
-  className: a
-}) => /* @__PURE__ */ e(
-  "svg",
-  {
-    width: "20",
-    height: "20",
-    viewBox: "0 0 20 20",
-    fill: "none",
-    xmlns: "http://www.w3.org/2000/svg",
-    style: t({ isSelected: r, state: o, theme: d }),
-    className: a,
-    children: /* @__PURE__ */ l("g", { id: "Radio input", children: [
-      /* @__PURE__ */ e(
-        "circle",
-        {
-          id: "Background",
-          cx: "10",
-          cy: "10",
-          r: "7",
-          fill: "var(--radio-bg-color, white)",
-          stroke: "var(--radio-border-color, #0157B2)",
-          strokeWidth: "1.25"
-        }
-      ),
-      /* @__PURE__ */ e(
-        "circle",
-        {
-          id: "Dot",
-          cx: "10",
-          cy: "10",
-          style: { r: "var(--radio-dot-size, 5px)" },
-          fill: "var(--radio-dot-color, transparent)"
-        }
-      )
-    ] })
-  }
-);
-export {
-  n as RadioIndicator
-};
+var a = ({ isSelected: n, state: r, theme: a, className: o }) => /* @__PURE__ */ e("svg", {
+	width: "20",
+	height: "20",
+	viewBox: "0 0 20 20",
+	fill: "none",
+	xmlns: "http://www.w3.org/2000/svg",
+	style: i({
+		isSelected: n,
+		state: r,
+		theme: a
+	}),
+	className: o,
+	children: /* @__PURE__ */ t("g", {
+		id: "Radio input",
+		children: [/* @__PURE__ */ e("circle", {
+			id: "Background",
+			cx: "10",
+			cy: "10",
+			r: "7",
+			fill: "var(--radio-bg-color, white)",
+			stroke: "var(--radio-border-color, #0157B2)",
+			strokeWidth: "1.25"
+		}), /* @__PURE__ */ e("circle", {
+			id: "Dot",
+			cx: "10",
+			cy: "10",
+			style: { r: "var(--radio-dot-size, 5px)" },
+			fill: "var(--radio-dot-color, transparent)"
+		})]
+	})
+});
+//#endregion
+export { a as RadioIndicator };

package/dist/esm/components/radio-button-group-field/RadioButtonGroupField.js

@@ -1,52 +1,37 @@
-import { jsxs as r, jsx as o } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { useFormContext as F } from "react-hook-form";
-import { FormField as x } from "../form-field/FormField.js";
-import { FormControl as h } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as y } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as R } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as B } from "../form-field/parts/FormLabel.js";
-import { RadioButtonGroup as G } from "../radio-button-group/RadioButtonGroup.js";
-const N = u(
-  ({
-    children: m,
-    label: e,
-    isReadOnly: t,
-    isDisabled: i,
-    isInvalid: l,
-    isRequired: p,
-    name: n,
-    requiredVariant: c,
-    feedbackText: d,
-    helperText: a
-  }, s) => {
-    const { control: f } = F();
-    return /* @__PURE__ */ r(
-      x,
-      {
-        control: f,
-        name: n,
-        ...{
-          isRequired: p,
-          isInvalid: l,
-          isDisabled: i,
-          isReadOnly: t
-        },
-        ref: s,
-        className: "uy:gap-150",
-        children: [
-          /* @__PURE__ */ r("div", { className: "uy:flex uy:flex-col uy:gap-50", children: [
-            /* @__PURE__ */ o(B, { requiredVariant: c, children: e }),
-            /* @__PURE__ */ o(R, { children: a }),
-            /* @__PURE__ */ o(y, { children: d })
-          ] }),
-          /* @__PURE__ */ o(h, { children: /* @__PURE__ */ o(G, { children: m }) })
-        ]
-      }
-    );
-  }
-);
-N.displayName = "RadioButtonGroupField";
-export {
-  N as RadioButtonGroupField
-};
+import { RadioButtonGroup as e } from "../radio-button-group/RadioButtonGroup.js";
+import { FormHelperText as t } from "../form-field/parts/FormHelperText.js";
+import { FormField as n } from "../form-field/FormField.js";
+import { FormControl as r } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as i } from "../form-field/parts/FormFeedbackText.js";
+import { FormLabel as a } from "../form-field/parts/FormLabel.js";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+import { useFormContext as l } from "react-hook-form";
+//#region src/components/radio-button-group-field/RadioButtonGroupField.tsx
+var u = o(({ children: o, label: u, isReadOnly: d, isDisabled: f, isInvalid: p, isRequired: m, name: h, requiredVariant: g, feedbackText: _, helperText: v }, y) => {
+	let { control: b } = l();
+	return /* @__PURE__ */ c(n, {
+		control: b,
+		name: h,
+		isRequired: m,
+		isInvalid: p,
+		isDisabled: f,
+		isReadOnly: d,
+		ref: y,
+		className: "uy:gap-150",
+		children: [/* @__PURE__ */ c("div", {
+			className: "uy:flex uy:flex-col uy:gap-50",
+			children: [
+				/* @__PURE__ */ s(a, {
+					requiredVariant: g,
+					children: u
+				}),
+				/* @__PURE__ */ s(t, { children: v }),
+				/* @__PURE__ */ s(i, { children: _ })
+			]
+		}), /* @__PURE__ */ s(r, { children: /* @__PURE__ */ s(e, { children: o }) })]
+	});
+});
+u.displayName = "RadioButtonGroupField";
+//#endregion
+export { u as RadioButtonGroupField };