@payfit/unity-components 2.47.4 → 2.47.6

package/dist/esm/components/form-field/TanstackFormField.js

@@ -1,46 +1,45 @@
-import { jsx as f } from "react/jsx-runtime";
-import { useId as I, useRef as k, useState as u, useLayoutEffect as _, useMemo as T } from "react";
-import { uyTv as F } from "@payfit/unity-themes";
-import { useFieldContext as $ } from "../../hooks/tanstack-form-context.js";
-import { FieldA11yContext as b } from "./TanstackFormField.context.js";
-const h = F({
-  base: ["uy:group/field", "uy:flex uy:flex-col uy:gap-100"]
-});
-function v({ children: l, className: c }) {
-  const m = I(), r = k(null), o = $(), n = o.form.formId || m, a = o.name.replace(/[^\w-]/g, "-"), [i, p] = u(!1), [s, x] = u(!1);
-  _(() => {
-    const e = r.current;
-    if (!e) return;
-    const t = e.querySelector(
-      '[data-unity-slot="form-field-helper-text"]'
-    ), y = e.querySelector(
-      '[data-unity-slot="form-field-contextual-link"]'
-    );
-    p(!!t), x(!!y);
-  }, [l]);
-  const d = T(() => {
-    const e = `form-${n}-field-${a}`, t = {
-      fieldGroupId: e,
-      labelId: `${e}__label`,
-      inputId: `${e}__input`,
-      feedbackTextId: `${e}__feedback-text`
-    };
-    return i && (t.helperTextId = `${e}__helper-text`), s && (t.contextualLinkId = `${e}__contextual-link`), t;
-  }, [n, a, i, s]);
-  return /* @__PURE__ */ f(b.Provider, { value: d, children: /* @__PURE__ */ f(
-    "div",
-    {
-      ref: r,
-      id: d.fieldGroupId,
-      role: "group",
-      className: h({ className: c }),
-      "data-unity-slot": "form-field",
-      "data-invalid": !o.state.meta.isValid,
-      children: l
-    }
-  ) });
+import { useFieldContext as e } from "../../hooks/tanstack-form-context.js";
+import { FieldA11yContext as t } from "./TanstackFormField.context.js";
+import { useId as n, useLayoutEffect as r, useMemo as i, useRef as a, useState as o } from "react";
+import { uyTv as s } from "@payfit/unity-themes";
+import { jsx as c } from "react/jsx-runtime";
+//#region src/components/form-field/TanstackFormField.tsx
+var l = s({ base: ["uy:group/field", "uy:flex uy:flex-col uy:gap-100"] });
+function u({ children: s, className: u }) {
+	let d = n(), f = a(null), p = e(), m = p.form.formId || d, h = p.name.replace(/[^\w-]/g, "-"), [g, _] = o(!1), [v, y] = o(!1);
+	r(() => {
+		let e = f.current;
+		if (!e) return;
+		let t = e.querySelector("[data-unity-slot=\"form-field-helper-text\"]"), n = e.querySelector("[data-unity-slot=\"form-field-contextual-link\"]");
+		_(!!t), y(!!n);
+	}, [s]);
+	let b = i(() => {
+		let e = `form-${m}-field-${h}`, t = {
+			fieldGroupId: e,
+			labelId: `${e}__label`,
+			inputId: `${e}__input`,
+			feedbackTextId: `${e}__feedback-text`
+		};
+		return g && (t.helperTextId = `${e}__helper-text`), v && (t.contextualLinkId = `${e}__contextual-link`), t;
+	}, [
+		m,
+		h,
+		g,
+		v
+	]);
+	return /* @__PURE__ */ c(t.Provider, {
+		value: b,
+		children: /* @__PURE__ */ c("div", {
+			ref: f,
+			id: b.fieldGroupId,
+			role: "group",
+			className: l({ className: u }),
+			"data-unity-slot": "form-field",
+			"data-invalid": !p.state.meta.isValid,
+			children: s
+		})
+	});
 }
-v.displayName = "TanstackFormField";
-export {
-  v as TanstackFormField
-};
+u.displayName = "TanstackFormField";
+//#endregion
+export { u as TanstackFormField };

package/dist/esm/components/form-field/parts/FormControl.js

@@ -1,53 +1,42 @@
-import { jsx as I } from "react/jsx-runtime";
-import { useMemo as g } from "react";
-import { Slot as x } from "@radix-ui/react-slot";
-import { mergeProps as C } from "react-aria/mergeProps";
-import { useFormContext as D, useController as F } from "react-hook-form";
-import { useFormField as L } from "../FormField.context.js";
-function O({ ...d }) {
-  const {
-    name: t,
-    hasHelperText: r,
-    hasContextualLink: l,
-    fieldState: o,
-    formLabelId: n,
-    formItemId: m,
-    formDescriptionId: a,
-    formMessageId: e,
-    formContextualLinkId: f
-  } = L(), { control: p } = D(), {
-    field: { ref: c, ...b },
-    fieldState: { invalid: y, error: s }
-  } = F({ name: t, control: p }), u = g(() => [
-    s ? e : void 0,
-    r ? a : void 0
-  ].filter(Boolean).join(" "), [s, r, a, e]), i = {
-    isInvalid: y,
-    isDisabled: o.isDisabled,
-    isLoading: o.isLoading,
-    isReadOnly: o.isReadOnly
-  }, v = C(d, i, b);
-  return /* @__PURE__ */ I(
-    x,
-    {
-      ...v,
-      ref: c,
-      "data-slot": "form-control",
-      id: m,
-      "aria-labelledby": n,
-      "aria-describedby": u,
-      "aria-details": l ? f : void 0,
-      "aria-invalid": i.isInvalid,
-      "data-invalid": i.isInvalid,
-      "aria-disabled": i.isDisabled,
-      "data-disabled": i.isDisabled,
-      "aria-readonly": i.isReadOnly,
-      "data-readonly": i.isReadOnly,
-      "aria-busy": i.isLoading
-    }
-  );
+import { useFormField as e } from "../FormField.context.js";
+import { useMemo as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+import { Slot as r } from "@radix-ui/react-slot";
+import { mergeProps as i } from "react-aria/mergeProps";
+import { useController as a, useFormContext as o } from "react-hook-form";
+//#region src/components/form-field/parts/FormControl.tsx
+function s({ ...s }) {
+	let { name: c, hasHelperText: l, hasContextualLink: u, fieldState: d, formLabelId: f, formItemId: p, formDescriptionId: m, formMessageId: h, formContextualLinkId: g } = e(), { control: _ } = o(), { field: { ref: v, ...y }, fieldState: { invalid: b, error: x } } = a({
+		name: c,
+		control: _
+	}), S = t(() => [x ? h : void 0, l ? m : void 0].filter(Boolean).join(" "), [
+		x,
+		l,
+		m,
+		h
+	]), C = {
+		isInvalid: b,
+		isDisabled: d.isDisabled,
+		isLoading: d.isLoading,
+		isReadOnly: d.isReadOnly
+	};
+	return /* @__PURE__ */ n(r, {
+		...i(s, C, y),
+		ref: v,
+		"data-slot": "form-control",
+		id: p,
+		"aria-labelledby": f,
+		"aria-describedby": S,
+		"aria-details": u ? g : void 0,
+		"aria-invalid": C.isInvalid,
+		"data-invalid": C.isInvalid,
+		"aria-disabled": C.isDisabled,
+		"data-disabled": C.isDisabled,
+		"aria-readonly": C.isReadOnly,
+		"data-readonly": C.isReadOnly,
+		"aria-busy": C.isLoading
+	});
 }
-O.displayName = "FormControl";
-export {
-  O as FormControl
-};
+s.displayName = "FormControl";
+//#endregion
+export { s as FormControl };

package/dist/esm/components/form-field/parts/FormFeedbackText.js

@@ -1,26 +1,24 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as c } from "react";
-import { useFormContext as f, useController as p } from "react-hook-form";
-import { Text as u } from "../../text/Text.js";
-import { useFormField as y } from "../FormField.context.js";
-const x = c(
-  ({ children: e, ...n }, a) => {
-    const { name: m, formMessageId: s } = y(), d = f(), o = p({ name: m, control: d.control }), t = o.fieldState.error, i = o.fieldState.invalid, r = t ? String(t.message) : e;
-    return !i || !r ? null : /* @__PURE__ */ l(
-      u,
-      {
-        ...n,
-        id: s,
-        ref: a,
-        "data-unity-slot": "form-feedback-text",
-        className: "uy:typography-body-small-strong uy:text-content-form-invalid",
-        "data-dd-privacy": "allow",
-        children: r
-      }
-    );
-  }
-);
-x.displayName = "FormFeedbackText";
-export {
-  x as FormFeedbackText
-};
+import { Text as e } from "../../text/Text.js";
+import { useFormField as t } from "../FormField.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { useController as i, useFormContext as a } from "react-hook-form";
+//#region src/components/form-field/parts/FormFeedbackText.tsx
+var o = n(({ children: n, ...o }, s) => {
+	let { name: c, formMessageId: l } = t(), u = i({
+		name: c,
+		control: a().control
+	}), d = u.fieldState.error, f = u.fieldState.invalid, p = d ? String(d.message) : n;
+	return !f || !p ? null : /* @__PURE__ */ r(e, {
+		...o,
+		id: l,
+		ref: s,
+		"data-unity-slot": "form-feedback-text",
+		className: "uy:typography-body-small-strong uy:text-content-form-invalid",
+		"data-dd-privacy": "allow",
+		children: p
+	});
+});
+o.displayName = "FormFeedbackText";
+//#endregion
+export { o as FormFeedbackText };

package/dist/esm/components/form-field/parts/FormHelperText.js

@@ -1,26 +1,21 @@
-import { jsx as a } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Text as m } from "../../text/Text.js";
-import { useFormField as i } from "../FormField.context.js";
-const p = l(
-  ({ children: r, ...o }, t) => {
-    const { formDescriptionId: e } = i();
-    return /* @__PURE__ */ a(
-      m,
-      {
-        ...o,
-        id: e,
-        "data-unity-slot": "helper-text",
-        variant: "bodySmall",
-        color: "content.neutral.low",
-        ref: t,
-        "data-dd-privacy": "allow",
-        children: r
-      }
-    );
-  }
-);
-p.displayName = "HelperText";
-export {
-  p as FormHelperText
-};
+import { Text as e } from "../../text/Text.js";
+import { useFormField as t } from "../FormField.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/form-field/parts/FormHelperText.tsx
+var i = n(({ children: n, ...i }, a) => {
+	let { formDescriptionId: o } = t();
+	return /* @__PURE__ */ r(e, {
+		...i,
+		id: o,
+		"data-unity-slot": "helper-text",
+		variant: "bodySmall",
+		color: "content.neutral.low",
+		ref: a,
+		"data-dd-privacy": "allow",
+		children: n
+	});
+});
+i.displayName = "HelperText";
+//#endregion
+export { i as FormHelperText };

package/dist/esm/components/form-field/parts/FormLabel.js

@@ -1,30 +1,21 @@
-import { jsx as d } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Label as f } from "../../label/Label.js";
-import { useFormField as s } from "../FormField.context.js";
-const n = l(
-  ({ children: e, ...r }, o) => {
-    const { requiredVariant: m } = r, {
-      formLabelId: t,
-      formItemId: a,
-      fieldState: { isRequired: i }
-    } = s();
-    return /* @__PURE__ */ d(
-      f,
-      {
-        ref: o,
-        id: t,
-        isRequired: i,
-        requiredVariant: m,
-        htmlFor: a,
-        className: "uy:leading-[1]!",
-        ...r,
-        children: e
-      }
-    );
-  }
-);
-n.displayName = "Label";
-export {
-  n as FormLabel
-};
+import { Label as e } from "../../label/Label.js";
+import { useFormField as t } from "../FormField.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/form-field/parts/FormLabel.tsx
+var i = n(({ children: n, ...i }, a) => {
+	let { requiredVariant: o } = i, { formLabelId: s, formItemId: c, fieldState: { isRequired: l } } = t();
+	return /* @__PURE__ */ r(e, {
+		ref: a,
+		id: s,
+		isRequired: l,
+		requiredVariant: o,
+		htmlFor: c,
+		className: "uy:leading-[1]!",
+		...i,
+		children: n
+	});
+});
+i.displayName = "Label";
+//#endregion
+export { i as FormLabel };

package/dist/esm/components/form-field/parts/RawFormContextualLink.js

@@ -1,39 +1,33 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { Button as m } from "react-aria-components/Button";
-import { RawLink as s } from "../../link/RawLink.js";
-import { useFormField as u } from "../FormField.context.js";
-const c = d((l, o) => {
-  const { children: t, href: a, onPress: e, ...r } = l, { formContextualLinkId: n } = u();
-  return a ? /* @__PURE__ */ i(
-    s,
-    {
-      id: n,
-      size: "small",
-      color: "secondary",
-      variant: "standalone",
-      "data-unity-slot": "contextual-link",
-      href: a,
-      ref: o,
-      "data-dd-privacy": "allow",
-      ...r,
-      children: t
-    }
-  ) : /* @__PURE__ */ i(
-    m,
-    {
-      id: n,
-      onPress: e,
-      "data-unity-slot": "contextual-link",
-      className: "uy:typography-body-small uy:w-fit",
-      ref: o,
-      "data-dd-privacy": "allow",
-      ...r,
-      children: t
-    }
-  );
+import { RawLink as e } from "../../link/RawLink.js";
+import { useFormField as t } from "../FormField.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+import { Button as i } from "react-aria-components/Button";
+//#region src/components/form-field/parts/RawFormContextualLink.tsx
+var a = n((n, a) => {
+	let { children: o, href: s, onPress: c, ...l } = n, { formContextualLinkId: u } = t();
+	return s ? /* @__PURE__ */ r(e, {
+		id: u,
+		size: "small",
+		color: "secondary",
+		variant: "standalone",
+		"data-unity-slot": "contextual-link",
+		href: s,
+		ref: a,
+		"data-dd-privacy": "allow",
+		...l,
+		children: o
+	}) : /* @__PURE__ */ r(i, {
+		id: u,
+		onPress: c,
+		"data-unity-slot": "contextual-link",
+		className: "uy:typography-body-small uy:w-fit",
+		ref: a,
+		"data-dd-privacy": "allow",
+		...l,
+		children: o
+	});
 });
-c.displayName = "RawFormContextualLink";
-export {
-  c as RawFormContextualLink
-};
+a.displayName = "RawFormContextualLink";
+//#endregion
+export { a as RawFormContextualLink };

package/dist/esm/components/form-field/parts/TanstackFormFeedbackText.js

@@ -1,32 +1,29 @@
-import { jsx as n } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { useSelector as l } from "@tanstack/react-store";
-import { useFieldContext as c } from "../../../hooks/tanstack-form-context.js";
-import { Text as f } from "../../text/Text.js";
-import { useFieldA11yContext as u } from "../TanstackFormField.context.js";
-const p = s((r, t) => {
-  const a = c(), i = u(), { errors: e, invalid: d, isTouched: m } = l(a.store, (o) => ({
-    errors: o.meta.errors,
-    invalid: !o.meta.isValid,
-    isTouched: o.meta.isTouched
-  }));
-  return !m || !d || e.length === 0 ? null : /* @__PURE__ */ n(
-    f,
-    {
-      "data-dd-privacy": "allow",
-      ...r,
-      ref: t,
-      id: i.feedbackTextId || r.id,
-      role: "alert",
-      "data-unity-slot": "form-feedback-text",
-      variant: "bodySmallStrong",
-      color: "content.form.invalid",
-      asElement: "span",
-      children: typeof e[0] == "object" && "message" in e[0] ? e[0].message : e[0]
-    }
-  );
+import { Text as e } from "../../text/Text.js";
+import { useFieldContext as t } from "../../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as n } from "../TanstackFormField.context.js";
+import { forwardRef as r } from "react";
+import { jsx as i } from "react/jsx-runtime";
+import { useSelector as a } from "@tanstack/react-store";
+//#region src/components/form-field/parts/TanstackFormFeedbackText.tsx
+var o = r((r, o) => {
+	let s = t(), c = n(), { errors: l, invalid: u, isTouched: d } = a(s.store, (e) => ({
+		errors: e.meta.errors,
+		invalid: !e.meta.isValid,
+		isTouched: e.meta.isTouched
+	}));
+	return !d || !u || l.length === 0 ? null : /* @__PURE__ */ i(e, {
+		"data-dd-privacy": "allow",
+		...r,
+		ref: o,
+		id: c.feedbackTextId || r.id,
+		role: "alert",
+		"data-unity-slot": "form-feedback-text",
+		variant: "bodySmallStrong",
+		color: "content.form.invalid",
+		asElement: "span",
+		children: typeof l[0] == "object" && "message" in l[0] ? l[0].message : l[0]
+	});
 });
-p.displayName = "TanstackFormFeedbackText";
-export {
-  p as TanstackFormFeedbackText
-};
+o.displayName = "TanstackFormFeedbackText";
+//#endregion
+export { o as TanstackFormFeedbackText };

package/dist/esm/components/form-field/parts/TanstackFormHelperText.js

@@ -1,26 +1,23 @@
-import { jsx as o } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Text as n } from "../../text/Text.js";
-import { useFieldA11yContext as m } from "../TanstackFormField.context.js";
-const d = l(({ children: e, ...t }, a) => {
-  const r = m();
-  return /* @__PURE__ */ o(
-    n,
-    {
-      "data-dd-privacy": "allow",
-      ...t,
-      id: r.helperTextId || t.id,
-      "data-unity-slot": "form-field-helper-text",
-      variant: "bodySmall",
-      asElement: "span",
-      color: "content.neutral.low",
-      className: "uy:[&>a]:text-content-neutral-enabled",
-      ref: a,
-      children: e
-    }
-  );
+import { Text as e } from "../../text/Text.js";
+import { useFieldA11yContext as t } from "../TanstackFormField.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/form-field/parts/TanstackFormHelperText.tsx
+var i = n(({ children: n, ...i }, a) => {
+	let o = t();
+	return /* @__PURE__ */ r(e, {
+		"data-dd-privacy": "allow",
+		...i,
+		id: o.helperTextId || i.id,
+		"data-unity-slot": "form-field-helper-text",
+		variant: "bodySmall",
+		asElement: "span",
+		color: "content.neutral.low",
+		className: "uy:[&>a]:text-content-neutral-enabled",
+		ref: a,
+		children: n
+	});
 });
-d.displayName = "TanstackFormHelperText";
-export {
-  d as TanstackFormHelperText
-};
+i.displayName = "TanstackFormHelperText";
+//#endregion
+export { i as TanstackFormHelperText };

package/dist/esm/components/form-field/parts/TanstackFormLabel.js

@@ -1,26 +1,21 @@
-import { jsx as i } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { Label as n } from "../../label/Label.js";
-import { useFieldA11yContext as d } from "../TanstackFormField.context.js";
-const s = l(
-  ({ children: e, isRequired: o, ...r }, t) => {
-    const { requiredVariant: m } = r, a = d();
-    return /* @__PURE__ */ i(
-      n,
-      {
-        ref: t,
-        htmlFor: a.inputId,
-        id: a.labelId,
-        isRequired: o,
-        requiredVariant: m,
-        className: "uy:leading-[1]!",
-        ...r,
-        children: e
-      }
-    );
-  }
-);
-s.displayName = "Label";
-export {
-  s as TanstackFormLabel
-};
+import { Label as e } from "../../label/Label.js";
+import { useFieldA11yContext as t } from "../TanstackFormField.context.js";
+import { forwardRef as n } from "react";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/components/form-field/parts/TanstackFormLabel.tsx
+var i = n(({ children: n, isRequired: i, ...a }, o) => {
+	let { requiredVariant: s } = a, c = t();
+	return /* @__PURE__ */ r(e, {
+		ref: o,
+		htmlFor: c.inputId,
+		id: c.labelId,
+		isRequired: i,
+		requiredVariant: s,
+		className: "uy:leading-[1]!",
+		...a,
+		children: n
+	});
+});
+i.displayName = "Label";
+//#endregion
+export { i as TanstackFormLabel };