@payfit/unity-components 2.47.5 → 2.47.7

package/dist/esm/components/text-field/TanstackTextField.js

@@ -1,60 +1,40 @@
-import { jsxs as k, jsx as o } from "react/jsx-runtime";
-import { forwardRef as F } from "react";
-import { TanstackFormFeedbackText as x } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormHelperText as u } from "../form-field/parts/TanstackFormHelperText.js";
-import { TanstackFormLabel as C } from "../form-field/parts/TanstackFormLabel.js";
-import { TanstackFormField as P } from "../form-field/TanstackFormField.js";
-import { TanstackInput as b } from "../input/TanstackInput.js";
-import { TanstackTextArea as B } from "../text-area/TanstackTextArea.js";
-function h({
-  label: m,
-  helperText: t,
-  contextualLink: s,
-  multiline: a,
-  isRequired: c,
-  isLoading: i,
-  isDisabled: l,
-  isReadOnly: p,
-  requiredVariant: T,
-  ...r
-}, n) {
-  const e = {
-    isLoading: i,
-    isDisabled: l,
-    isReadOnly: p
-  }, d = !a, { onClearButtonPress: f } = d ? r : {};
-  return /* @__PURE__ */ k(P, { children: [
-    /* @__PURE__ */ o(
-      C,
-      {
-        requiredVariant: T,
-        isRequired: c,
-        children: m
-      }
-    ),
-    t && /* @__PURE__ */ o(u, { children: t }),
-    a ? /* @__PURE__ */ o(
-      B,
-      {
-        ref: n,
-        ...e,
-        ...r
-      }
-    ) : /* @__PURE__ */ o(
-      b,
-      {
-        ref: n,
-        onClearButtonPress: f,
-        ...e,
-        ...r
-      }
-    ),
-    /* @__PURE__ */ o(x, {}),
-    s
-  ] });
+import { TanstackFormFeedbackText as e } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormField as t } from "../form-field/TanstackFormField.js";
+import { TanstackFormHelperText as n } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as r } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackInput as i } from "../input/TanstackInput.js";
+import { TanstackTextArea as a } from "../text-area/TanstackTextArea.js";
+import { forwardRef as o } from "react";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
+//#region src/components/text-field/TanstackTextField.tsx
+function l({ label: o, helperText: l, contextualLink: u, multiline: d, isRequired: f, isLoading: p, isDisabled: m, isReadOnly: h, requiredVariant: g, ..._ }, v) {
+	let y = {
+		isLoading: p,
+		isDisabled: m,
+		isReadOnly: h
+	}, { onClearButtonPress: b } = d ? {} : _;
+	return /* @__PURE__ */ c(t, { children: [
+		/* @__PURE__ */ s(r, {
+			requiredVariant: g,
+			isRequired: f,
+			children: o
+		}),
+		l && /* @__PURE__ */ s(n, { children: l }),
+		d ? /* @__PURE__ */ s(a, {
+			ref: v,
+			...y,
+			..._
+		}) : /* @__PURE__ */ s(i, {
+			ref: v,
+			onClearButtonPress: b,
+			...y,
+			..._
+		}),
+		/* @__PURE__ */ s(e, {}),
+		u
+	] });
 }
-const j = F(h);
-j.displayName = "TanstackTextField";
-export {
-  j as TanstackTextField
-};
+var u = o(l);
+u.displayName = "TanstackTextField";
+//#endregion
+export { u as TanstackTextField };

package/dist/esm/components/text-field/TextField.js

@@ -1,78 +1,55 @@
-import { jsxs as B, jsx as o } from "react/jsx-runtime";
-import { forwardRef as I } from "react";
-import { uyTv as g } from "@payfit/unity-themes";
-import { useFormContext as j } from "react-hook-form";
-import { FormField as k } from "../form-field/FormField.js";
-import { FormControl as L } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as P } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as v } from "../form-field/parts/FormLabel.js";
-import { Input as w } from "../input/Input.js";
-import { TextArea as A } from "../text-area/TextArea.js";
-const H = g({
-  base: "uy:flex uy:flex-col uy:gap-100"
-});
-function R({
-  name: t,
-  label: e,
-  defaultValue: r,
-  helperText: m,
-  feedbackText: l,
-  contextualLink: c,
-  multiline: i,
-  isRequired: p,
-  isInvalid: a,
-  isLoading: f,
-  isDisabled: d,
-  isReadOnly: u,
-  requiredVariant: x,
-  ...n
-}, s) {
-  const { control: F, setValue: C } = j(), T = {
-    isRequired: p,
-    isInvalid: a,
-    isLoading: f,
-    isDisabled: d,
-    isReadOnly: u
-  }, y = !i, { onClearButtonPress: h } = y ? n : {}, b = h ?? (() => {
-    C(t, "");
-  });
-  return /* @__PURE__ */ B(
-    k,
-    {
-      control: F,
-      name: t,
-      className: H(),
-      ...T,
-      children: [
-        /* @__PURE__ */ o(v, { requiredVariant: x, children: e }),
-        m && /* @__PURE__ */ o(P, { children: m }),
-        /* @__PURE__ */ o(L, { children: i ? /* @__PURE__ */ o(
-          A,
-          {
-            ref: s,
-            defaultValue: r,
-            ...n
-          }
-        ) : /* @__PURE__ */ o(
-          w,
-          {
-            ref: s,
-            defaultValue: r,
-            onClearButtonPress: b,
-            ...n
-          }
-        ) }),
-        /* @__PURE__ */ o(N, { children: l }),
-        c
-      ]
-    }
-  );
+import { Input as e } from "../input/Input.js";
+import { TextArea as t } from "../text-area/TextArea.js";
+import { FormHelperText as n } from "../form-field/parts/FormHelperText.js";
+import { FormField as r } from "../form-field/FormField.js";
+import { FormControl as i } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as a } from "../form-field/parts/FormFeedbackText.js";
+import { FormLabel as o } from "../form-field/parts/FormLabel.js";
+import { forwardRef as s } from "react";
+import { uyTv as c } from "@payfit/unity-themes";
+import { jsx as l, jsxs as u } from "react/jsx-runtime";
+import { useFormContext as d } from "react-hook-form";
+//#region src/components/text-field/TextField.tsx
+var f = c({ base: "uy:flex uy:flex-col uy:gap-100" });
+function p({ name: s, label: c, defaultValue: p, helperText: m, feedbackText: h, contextualLink: g, multiline: _, isRequired: v, isInvalid: y, isLoading: b, isDisabled: x, isReadOnly: S, requiredVariant: C, ...w }, T) {
+	let { control: E, setValue: D } = d(), O = {
+		isRequired: v,
+		isInvalid: y,
+		isLoading: b,
+		isDisabled: x,
+		isReadOnly: S
+	}, { onClearButtonPress: k } = _ ? {} : w, A = k ?? (() => {
+		D(s, "");
+	});
+	return /* @__PURE__ */ u(r, {
+		control: E,
+		name: s,
+		className: f(),
+		...O,
+		children: [
+			/* @__PURE__ */ l(o, {
+				requiredVariant: C,
+				children: c
+			}),
+			m && /* @__PURE__ */ l(n, { children: m }),
+			/* @__PURE__ */ l(i, { children: _ ? /* @__PURE__ */ l(t, {
+				ref: T,
+				defaultValue: p,
+				...w
+			}) : /* @__PURE__ */ l(e, {
+				ref: T,
+				defaultValue: p,
+				onClearButtonPress: A,
+				...w
+			}) }),
+			/* @__PURE__ */ l(a, { children: h }),
+			g
+		]
+	});
 }
-const S = I(function(e, r) {
-  return R(e, r);
+var m = s(function(e, t) {
+	return p(e, t);
 });
-S.displayName = "TextField";
-export {
-  S as TextField
-};
+m.displayName = "TextField";
+//#endregion
+export { m as TextField };

package/dist/esm/components/timeline/Timeline.context.js

@@ -1,23 +1,20 @@
-import { jsx as i } from "react/jsx-runtime";
-import { createContext as r, useContext as m } from "react";
-const t = r(null);
-function s({
-  children: e,
-  orientation: n,
-  type: o
-}) {
-  return /* @__PURE__ */ i(t.Provider, { value: { orientation: n, type: o }, children: e });
+import { createContext as e, useContext as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/components/timeline/Timeline.context.tsx
+var r = e(null);
+function i({ children: e, orientation: t, type: i }) {
+	return /* @__PURE__ */ n(r.Provider, {
+		value: {
+			orientation: t,
+			type: i
+		},
+		children: e
+	});
 }
-function c() {
-  const e = m(t);
-  if (!e)
-    throw new Error(
-      "useTimelineContext must be used within a Timeline component. Make sure to wrap your TimelineStep components with <Timeline>."
-    );
-  return e;
+function a() {
+	let e = t(r);
+	if (!e) throw Error("useTimelineContext must be used within a Timeline component. Make sure to wrap your TimelineStep components with <Timeline>.");
+	return e;
 }
-export {
-  t as TimelineContext,
-  s as TimelineProvider,
-  c as useTimelineContext
-};
+//#endregion
+export { i as TimelineProvider, a as useTimelineContext };

package/dist/esm/components/timeline/Timeline.js

@@ -1,37 +1,33 @@
-import { jsxs as d, jsx as a } from "react/jsx-runtime";
-import { forwardRef as f } from "react";
-import { useId as c } from "react-aria/useId";
-import { TimelineProvider as p } from "./Timeline.context.js";
-import { timeline as u } from "./Timeline.variants.js";
-const v = f(
-  ({
-    "aria-label": o,
-    customProgressLabel: i,
-    orientation: r = "vertical",
-    type: l = "default",
-    className: s,
-    children: n
-  }, e) => {
-    const m = c();
-    return /* @__PURE__ */ d(p, { orientation: r, type: l, children: [
-      i && /* @__PURE__ */ a("div", { id: m, className: "uy:sr-only", children: i }),
-      /* @__PURE__ */ a(
-        l === "numbered" ? "ol" : "ul",
-        {
-          ref: (t) => {
-            typeof e == "function" ? e(t) : e && (e.current = t);
-          },
-          className: u({ orientation: r, className: s }),
-          "aria-label": o,
-          "aria-describedby": i ? m : void 0,
-          "aria-orientation": r,
-          children: n
-        }
-      )
-    ] });
-  }
-);
-v.displayName = "Timeline";
-export {
-  v as Timeline
-};
+import { TimelineProvider as e } from "./Timeline.context.js";
+import { timeline as t } from "./Timeline.variants.js";
+import { forwardRef as n } from "react";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+import { useId as a } from "react-aria/useId";
+//#region src/components/timeline/Timeline.tsx
+var o = n(({ "aria-label": n, customProgressLabel: o, orientation: s = "vertical", type: c = "default", className: l, children: u }, d) => {
+	let f = a();
+	return /* @__PURE__ */ i(e, {
+		orientation: s,
+		type: c,
+		children: [o && /* @__PURE__ */ r("div", {
+			id: f,
+			className: "uy:sr-only",
+			children: o
+		}), /* @__PURE__ */ r(c === "numbered" ? "ol" : "ul", {
+			ref: (e) => {
+				typeof d == "function" ? d(e) : d && (d.current = e);
+			},
+			className: t({
+				orientation: s,
+				className: l
+			}),
+			"aria-label": n,
+			"aria-describedby": o ? f : void 0,
+			"aria-orientation": s,
+			children: u
+		})]
+	});
+});
+o.displayName = "Timeline";
+//#endregion
+export { o as Timeline };

package/dist/esm/components/timeline/Timeline.utils.js

@@ -1,9 +1,9 @@
-import { useBreakpointListener as e, isDesktopBreakpoint as n } from "../../hooks/use-breakpoint-listener.js";
-import { useTimelineContext as r } from "./Timeline.context.js";
-const p = () => {
-  const { orientation: o } = r(), t = e();
-  return o === "horizontal" && n(t);
-};
-export {
-  p as useIsHorizontalDesktop
+import { isDesktopBreakpoint as e, useBreakpointListener as t } from "../../hooks/use-breakpoint-listener.js";
+import { useTimelineContext as n } from "./Timeline.context.js";
+//#region src/components/timeline/Timeline.utils.ts
+var r = () => {
+	let { orientation: r } = n(), i = t();
+	return r === "horizontal" && e(i);
 };
+//#endregion
+export { r as useIsHorizontalDesktop };

package/dist/esm/components/timeline/Timeline.variants.js

@@ -1,121 +1,96 @@
 import { uyTv as e } from "@payfit/unity-themes";
-const t = e({
-  base: "uy:flex uy:list-none uy:m-0 uy:p-0",
-  variants: {
-    orientation: {
-      vertical: "uy:flex-col",
-      // Horizontal: vertical on mobile (xs/sm), horizontal on desktop (md+)
-      horizontal: "uy:flex-col uy:md:flex-row"
-    }
-  },
-  defaultVariants: {
-    orientation: "vertical"
-  }
-}), u = e({
-  base: "uy:flex uy:m-0 uy:p-0 uy:gap-200",
-  variants: {
-    orientation: {
-      vertical: "uy:flex-row uy:w-full uy:items-stretch",
-      // Horizontal: renders as vertical on mobile, horizontal on desktop
-      horizontal: "uy:flex-row uy:w-full uy:items-stretch uy:md:flex-col uy:md:flex-1 uy:md:min-w-0 uy:md:w-auto"
-    }
-  },
-  defaultVariants: {
-    orientation: "vertical"
-  }
+//#region src/components/timeline/Timeline.variants.ts
+var t = e({
+	base: "uy:flex uy:list-none uy:m-0 uy:p-0",
+	variants: { orientation: {
+		vertical: "uy:flex-col",
+		horizontal: "uy:flex-col uy:md:flex-row"
+	} },
+	defaultVariants: { orientation: "vertical" }
 }), n = e({
-  slots: {
-    container: "uy:flex uy:items-center uy:w-300",
-    ball: [
-      "uy:flex uy:items-center uy:justify-center",
-      "uy:w-250 uy:h-250 uy:rounded-full",
-      "uy:border-2 uy:border-solid",
-      "uy:flex-shrink-0"
-    ],
-    line: "uy:flex-1",
-    icon: "uy:w-250 uy:h-250",
-    number: [
-      "uy:typography-body-small-strong",
-      "uy:flex uy:items-center uy:justify-center",
-      "uy:w-full uy:h-full"
-    ]
-  },
-  variants: {
-    state: {
-      completed: {
-        ball: "uy:theme-legacy:bg-surface-primary-active uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:border-transparent uy:w-300 uy:h-300",
-        line: "uy:theme-legacy:border-border-primary uy:theme-rebrand:border-border-neutral-highest uy:border-solid",
-        icon: "uy:text-content-inverted"
-      },
-      current: {
-        ball: "uy:bg-transparent uy:theme-legacy:border-border-primary-enabled uy:theme-rebrand:border-border-neutral-highest",
-        line: "uy:border-border-neutral uy:border-dashed",
-        number: "uy:text-content-primary-active"
-      },
-      pending: {
-        ball: "uy:bg-transparent uy:border-border-neutral",
-        line: "uy:border-border-neutral uy:border-dashed",
-        number: "uy:text-content-neutral-lowest"
-      }
-    },
-    type: {
-      default: {},
-      numbered: {
-        // Numbered type always uses 24px balls (w-300 h-300) to accommodate numbers
-        ball: "uy:w-300 uy:h-300"
-      }
-    },
-    orientation: {
-      vertical: {
-        container: "uy:flex-col uy:self-stretch",
-        line: "uy:min-h-200 uy:w-0 uy:border-l-2"
-      },
-      // Horizontal: renders as vertical on mobile, horizontal on desktop
-      horizontal: {
-        container: "uy:flex-col uy:self-stretch uy:md:flex-row uy:md:w-full uy:md:h-300 uy:md:self-auto",
-        line: "uy:min-h-200 uy:w-0 uy:border-l-2 uy:md:min-h-0 uy:md:min-w-200 uy:md:h-0 uy:md:w-auto uy:md:border-l-0 uy:md:border-t-2"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      state: "current",
-      type: "numbered",
-      className: {
-        ball: "uy:theme-legacy:bg-surface-primary uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:border-transparent",
-        number: "uy:text-content-inverted-active"
-      }
-    },
-    {
-      state: "pending",
-      type: "numbered",
-      className: {
-        ball: "uy:bg-surface-neutral-lowest uy:border-border-neutral-low",
-        number: "uy:text-content-neutral"
-      }
-    }
-  ],
-  defaultVariants: {
-    state: "pending",
-    type: "default",
-    orientation: "vertical"
-  }
-}), y = e({
-  base: "uy:flex uy:flex-col uy:gap-100 uy:items-start",
-  variants: {
-    orientation: {
-      vertical: "uy:flex-1 uy:pb-300",
-      // Horizontal: renders as vertical on mobile (pb-300), horizontal on desktop (pr-400)
-      horizontal: "uy:flex-1 uy:pb-300 uy:md:pb-0 uy:md:pr-400"
-    }
-  },
-  defaultVariants: {
-    orientation: "vertical"
-  }
+	base: "uy:flex uy:m-0 uy:p-0 uy:gap-200",
+	variants: { orientation: {
+		vertical: "uy:flex-row uy:w-full uy:items-stretch",
+		horizontal: "uy:flex-row uy:w-full uy:items-stretch uy:md:flex-col uy:md:flex-1 uy:md:min-w-0 uy:md:w-auto"
+	} },
+	defaultVariants: { orientation: "vertical" }
+}), r = e({
+	slots: {
+		container: "uy:flex uy:items-center uy:w-300",
+		ball: [
+			"uy:flex uy:items-center uy:justify-center",
+			"uy:w-250 uy:h-250 uy:rounded-full",
+			"uy:border-2 uy:border-solid",
+			"uy:flex-shrink-0"
+		],
+		line: "uy:flex-1",
+		icon: "uy:w-250 uy:h-250",
+		number: [
+			"uy:typography-body-small-strong",
+			"uy:flex uy:items-center uy:justify-center",
+			"uy:w-full uy:h-full"
+		]
+	},
+	variants: {
+		state: {
+			completed: {
+				ball: "uy:theme-legacy:bg-surface-primary-active uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:border-transparent uy:w-300 uy:h-300",
+				line: "uy:theme-legacy:border-border-primary uy:theme-rebrand:border-border-neutral-highest uy:border-solid",
+				icon: "uy:text-content-inverted"
+			},
+			current: {
+				ball: "uy:bg-transparent uy:theme-legacy:border-border-primary-enabled uy:theme-rebrand:border-border-neutral-highest",
+				line: "uy:border-border-neutral uy:border-dashed",
+				number: "uy:text-content-primary-active"
+			},
+			pending: {
+				ball: "uy:bg-transparent uy:border-border-neutral",
+				line: "uy:border-border-neutral uy:border-dashed",
+				number: "uy:text-content-neutral-lowest"
+			}
+		},
+		type: {
+			default: {},
+			numbered: { ball: "uy:w-300 uy:h-300" }
+		},
+		orientation: {
+			vertical: {
+				container: "uy:flex-col uy:self-stretch",
+				line: "uy:min-h-200 uy:w-0 uy:border-l-2"
+			},
+			horizontal: {
+				container: "uy:flex-col uy:self-stretch uy:md:flex-row uy:md:w-full uy:md:h-300 uy:md:self-auto",
+				line: "uy:min-h-200 uy:w-0 uy:border-l-2 uy:md:min-h-0 uy:md:min-w-200 uy:md:h-0 uy:md:w-auto uy:md:border-l-0 uy:md:border-t-2"
+			}
+		}
+	},
+	compoundVariants: [{
+		state: "current",
+		type: "numbered",
+		className: {
+			ball: "uy:theme-legacy:bg-surface-primary uy:theme-rebrand:bg-surface-neutral-highest-enabled uy:border-transparent",
+			number: "uy:text-content-inverted-active"
+		}
+	}, {
+		state: "pending",
+		type: "numbered",
+		className: {
+			ball: "uy:bg-surface-neutral-lowest uy:border-border-neutral-low",
+			number: "uy:text-content-neutral"
+		}
+	}],
+	defaultVariants: {
+		state: "pending",
+		type: "default",
+		orientation: "vertical"
+	}
+}), i = e({
+	base: "uy:flex uy:flex-col uy:gap-100 uy:items-start",
+	variants: { orientation: {
+		vertical: "uy:flex-1 uy:pb-300",
+		horizontal: "uy:flex-1 uy:pb-300 uy:md:pb-0 uy:md:pr-400"
+	} },
+	defaultVariants: { orientation: "vertical" }
 });
-export {
-  t as timeline,
-  y as timelineContent,
-  n as timelineMarker,
-  u as timelineStep
-};
+//#endregion
+export { t as timeline, i as timelineContent, r as timelineMarker, n as timelineStep };