@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.13

package/dist/esm/components/table/parts/TableCell.js

@@ -1,10 +1,10 @@
-import { jsx as x } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
+import { jsx as h } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
 import { tv as g } from "tailwind-variants";
 import { useTableContext as v } from "../Table.context.js";
 const C = g({
   base: [
-    "uy-px-200 uy-py-150 uy-w-max uy-text-content-neutral uy-typography-body",
+    "uy-px-200 uy-py-150 uy-text-content-neutral uy-typography-body",
     "focus-visible:uy-outline-2 focus-visible:-uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"
   ],
   variants: {
@@ -14,7 +14,7 @@ const C = g({
       right: "uy-text-right"
     }
   }
-}), T = h(
+}), T = x(
   ({
     children: i,
     colIndex: a = 0,
@@ -29,7 +29,7 @@ const C = g({
     const { keyboardNavigation: c } = v(), { isCellFocused: f, handleCellKeyDown: b, handleCellFocus: d } = c, m = f(o, a), p = (e) => {
       e.key !== "Tab" && (b(e), t == null || t(e));
     };
-    return /* @__PURE__ */ x(
+    return /* @__PURE__ */ h(
       r ? "th" : "td",
       {
         ref: y,

package/dist/esm/components/tabs/parts/NavigationButton.js

@@ -11,14 +11,14 @@ const s = n({
   variants: {
     direction: {
       left: {
-        base: "uy-top-0 uy-left-0 uy-z-10 uy-bg-gradient-to-r uy-from-surface-inverted/0 uy-from-surface-inverted/100 uy-pl-50 uy-pr-200"
+        base: "uy-top-0 uy-left-0 uy-z-10 uy-bg-gradient-to-r uy-from-surface-inverted/100 uy-to-surface-inverted/0 uy-pl-50 uy-pr-200"
       },
       right: {
-        base: "uy-right-0 uy-top-0 uy-z-10 uy-bg-gradient-to-l uy-from-surface-inverted/100 uy-from-surface-inverted/0 uy-pl-200 uy-pr-50"
+        base: "uy-right-0 uy-top-0 uy-z-10 uy-bg-gradient-to-l uy-from-surface-inverted/100 uy-to-surface-inverted/0 uy-pl-200 uy-pr-50"
       }
     }
   }
-}), m = ({ direction: t, onPress: u }) => {
+}), v = ({ direction: t, onPress: u }) => {
   const { base: o, button: r, icon: l } = s({ direction: t });
   return /* @__PURE__ */ e("div", { className: o(), children: /* @__PURE__ */ e(
     i,
@@ -39,5 +39,5 @@ const s = n({
   ) });
 };
 export {
-  m as NavigationButton
+  v as NavigationButton
 };

package/dist/esm/components/tabs/parts/TabList.js

@@ -1,47 +1,56 @@
-import { jsxs as N, jsx as c } from "react/jsx-runtime";
-import { forwardRef as T, useRef as w, useState as h } from "react";
-import { TabList as m } from "react-aria-components";
-import { useTabsContext as A } from "../Tabs.context.js";
-import { tabsVariant as B } from "../Tabs.variant.js";
-import { NavigationButton as L } from "./NavigationButton.js";
-const C = T(
-  ({ children: f }, b) => {
-    const r = w(null), [g, y] = h(!1), [p, v] = h(!0), { variant: S, scrollable: u } = A(), { tabList: d } = B({ variant: S, scrollable: u }), R = (t) => {
-      const { scrollLeft: o, scrollWidth: s, clientWidth: e } = t.currentTarget;
-      y(o > 0), v(o + e < s);
-    }, W = () => {
-      var e;
-      const t = (e = r.current) == null ? void 0 : e.querySelectorAll("div[role=tab]");
+import { jsxs as w, jsx as c } from "react/jsx-runtime";
+import { forwardRef as A, useRef as C, useState as L, useCallback as B } from "react";
+import { TabList as y } from "react-aria-components";
+import { useResizeObserver as j } from "usehooks-ts";
+import { useTabsContext as q } from "../Tabs.context.js";
+import { tabsVariant as z } from "../Tabs.variant.js";
+import { NavigationButton as p } from "./NavigationButton.js";
+const P = A(
+  ({ children: f }, u) => {
+    const r = C(null), [g, S] = L(!1), [v, R] = L(!1), { variant: W, scrollable: b } = q(), { tabList: d } = z({ variant: W, scrollable: b }), m = B(() => {
+      if (!r.current) return;
+      const { scrollLeft: t, scrollWidth: s, clientWidth: e } = r.current;
+      S(t > 0), R(t + e < s);
+    }, []);
+    j({
+      ref: r,
+      onResize: m
+    });
+    const x = (t) => {
+      m();
+    }, N = () => {
+      var l;
+      const t = (l = r.current) == null ? void 0 : l.querySelectorAll("[role=tab]");
       if (!r.current || !t) return 0;
-      const { scrollLeft: o } = r.current, s = Array.from(t);
-      for (let l = s.length - 1; l >= 0; l--) {
-        const n = s[l];
-        if (n.offsetLeft < o)
+      const { scrollLeft: s } = r.current, e = Array.from(t);
+      for (let o = e.length - 1; o >= 0; o--) {
+        const n = e[o];
+        if (n.offsetLeft < s)
           return -n.offsetWidth;
       }
       return 0;
-    }, x = () => {
+    }, T = () => {
       var n;
-      const t = (n = r.current) == null ? void 0 : n.querySelectorAll("div[role=tab]");
+      const t = (n = r.current) == null ? void 0 : n.querySelectorAll("[role=tab]");
       if (!r.current || !t) return 0;
-      const { scrollLeft: o, clientWidth: s } = r.current, e = Array.from(t), l = o + s;
-      for (let a = 0; a < e.length - 1; a++) {
-        const i = e[a];
-        if (i.offsetLeft + i.offsetWidth > l)
+      const { scrollLeft: s, clientWidth: e } = r.current, l = Array.from(t), o = s + e;
+      for (let a = 0; a < l.length - 1; a++) {
+        const i = l[a], h = i.offsetLeft + i.offsetWidth;
+        if (h > o || h < o)
           return i.offsetWidth;
       }
       return 0;
     };
-    return u ? /* @__PURE__ */ N("div", { className: "uy-relative", children: [
+    return b ? /* @__PURE__ */ w("div", { className: "uy-relative", children: [
       g && /* @__PURE__ */ c(
-        L,
+        p,
         {
           direction: "left",
           onPress: () => {
             var t;
             (t = r.current) == null || t.scrollBy({
               behavior: "smooth",
-              left: W()
+              left: N()
             });
           }
         }
@@ -52,27 +61,27 @@ const C = T(
           ref: r,
           "data-testid": "scrollable-tab-list",
           className: "uy-overflow-x-auto uy-overflow-y-hidden uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled",
-          onScroll: R,
-          children: /* @__PURE__ */ c(m, { ref: b, className: d(), children: f })
+          onScroll: x,
+          children: /* @__PURE__ */ c(y, { ref: u, className: d(), children: f })
         }
       ),
-      p && /* @__PURE__ */ c(
-        L,
+      v && /* @__PURE__ */ c(
+        p,
         {
           direction: "right",
           onPress: () => {
             var t;
             (t = r.current) == null || t.scrollBy({
               behavior: "smooth",
-              left: x()
+              left: T()
             });
           }
         }
       )
-    ] }) : /* @__PURE__ */ c(m, { ref: b, className: d(), children: f });
+    ] }) : /* @__PURE__ */ c(y, { ref: u, className: d(), children: f });
   }
 );
-C.displayName = "TabList";
+P.displayName = "TabList";
 export {
-  C as TabList
+  P as TabList
 };

package/dist/esm/components/text/Text.d.ts

@@ -1,7 +1,7 @@
 import { HTMLAttributes, PropsWithChildren } from 'react';
 import { VariantProps } from 'tailwind-variants';
 import { text } from './Text.variants.js';
-type ValidTextElements = 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
+export type ValidTextElements = 'p' | 'span' | 'div' | 'abbr' | 'dfn' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'em' | 'strong' | 'small';
 export type TextProps = PropsWithChildren<HTMLAttributes<HTMLSpanElement> & {
     /**
      * The HTML element to render the text as. Defaults to a recommended element based on the variant.

package/dist/esm/components/text/Text.js

@@ -19,27 +19,28 @@ const y = {
   bodyLargeStrong: "strong",
   action: "span",
   actionLarge: "span",
-  actionSmall: "span"
+  actionSmall: "span",
+  actionInfo: "span"
 }, g = c(
   ({
     children: e,
     variant: o,
-    color: s,
+    color: n,
     isTruncated: a,
     lineClamp: t,
-    asElement: n,
+    asElement: s,
     className: r,
     ...l
   }, i) => {
     const m = h({
       variant: o,
-      color: s,
+      color: n,
       isTruncated: a,
       isLineClamped: t !== void 0,
       className: r
     }), p = y[o ?? "inherit"];
     return /* @__PURE__ */ d(
-      n ?? p,
+      s ?? p,
       {
         "data-dd-privacy": "mask",
         ...l,

package/dist/esm/components/text/Text.variants.d.ts

@@ -18,6 +18,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -114,6 +115,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -210,6 +212,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -306,6 +309,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -402,6 +406,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -498,6 +503,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;
@@ -594,6 +600,7 @@ export declare const text: import('tailwind-variants').TVReturnType<{
         action: string;
         actionLarge: string;
         actionSmall: string;
+        actionInfo: string;
     };
     color: {
         inherit: string;

package/dist/esm/components/text/Text.variants.js

@@ -20,7 +20,8 @@ const n = t({
       bodyLargeStrong: "uy-typography-body-large-strong",
       action: "uy-typography-action",
       actionLarge: "uy-typography-body-large",
-      actionSmall: "uy-typography-body-small"
+      actionSmall: "uy-typography-body-small",
+      actionInfo: "uy-typography-action uy-underline uy-decoration-dotted uy-decoration-[10%] uy-underline-offset-[25%]"
     },
     color: {
       inherit: "uy-text-inherit",

package/dist/esm/components/toggle-switch/ToggleSwitch.d.ts

@@ -1,82 +1,104 @@
 import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
 import { VariantProps } from 'tailwind-variants';
 export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
         };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}, {
+}, {
     container: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}>, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+}, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}, {
+}>, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
     container: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
+}, import('tailwind-variants').TVReturnType<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
     container: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            indicator?: import('tailwind-merge').ClassNameValue;
-            label?: import('tailwind-merge').ClassNameValue;
-            container?: import('tailwind-merge').ClassNameValue;
-            textWrapper?: import('tailwind-merge').ClassNameValue;
-            hintText?: import('tailwind-merge').ClassNameValue;
-            knob?: import('tailwind-merge').ClassNameValue;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
+        };
+    };
+}, {
+    isDisabled: {
+        false: {
+            indicator: string;
+            knob: string;
+        };
+        true: {
+            indicator: string;
+            knob: string;
         };
     };
-} | {}>, unknown, unknown, undefined>>;
+}>, unknown, unknown, undefined>>;
 interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children' | 'className' | 'style'>, VariantProps<typeof toggleSwitch> {
     /** The label for the toggle switch. */
     label: string;

package/dist/esm/components/toggle-switch/ToggleSwitch.js

@@ -1,8 +1,8 @@
-import { jsxs as a, jsx as e } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
+import { jsxs as o, jsx as e } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
 import { Switch as g } from "react-aria-components";
-import { tv as f } from "tailwind-variants";
-const m = f({
+import { tv as m } from "tailwind-variants";
+const v = m({
   slots: {
     container: ["uy-flex uy-gap-100 uy-group"],
     textWrapper: ["uy-flex uy-flex-col uy-gap-50"],
@@ -14,7 +14,6 @@ const m = f({
       "uy-border uy-border-solid uy-border-border-form-disabled uy-bg-surface-form-disabled",
       "uy-cursor-pointer uy-transition-colors uy-duration-200 uy-ease-in-out",
       "group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed",
-      'group-data-[selected="true"]:uy-bg-surface-form-active group-data-[selected="true"]:uy-border-border-form-active group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-active group-data-[selected="true"]:group-data-[pressed]:uy-border-border-form-active',
       "group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled group-data-[disabled]:uy-cursor-not-allowed",
       "group-data-[focus-visible]:uy-outline-2 group-data-[focus-visible]:uy-outline group-data-[focus-visible]:uy-outline-offset-2 group-data-[focus-visible]:uy-outline-utility-focus-ring"
     ],
@@ -22,39 +21,61 @@ const m = f({
       "uy-w-200 uy-h-200 uy-rounded-circle",
       "uy-border uy-border-solid uy-border-border-form-enabled uy-bg-surface-form-enabled",
       "uy-transition-all uy-duration-200 uy-ease-in-out",
+      'group-data-[selected="true"]:uy-translate-x-[90%]',
       "group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed",
-      'group-data-[selected="true"]:uy-translate-x-[90%] group-data-[selected="true"]:uy-border-border-inverted-enabled group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-pressed group-data-[selected="true"]:group-data-[pressed]:uy-border-border-inverted-pressed',
       "group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled"
     ]
+  },
+  variants: {
+    isDisabled: {
+      false: {
+        indicator: 'group-data-[selected="true"]:uy-bg-surface-form-active group-data-[selected="true"]:uy-border-border-form-active group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-active group-data-[selected="true"]:group-data-[pressed]:uy-border-border-form-active',
+        knob: 'group-data-[selected="true"]:uy-border-border-inverted-enabled group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-pressed group-data-[selected="true"]:group-data-[pressed]:uy-border-border-inverted-pressed'
+      },
+      true: {
+        indicator: "",
+        knob: ""
+      }
+    }
   }
-}), h = n(
+}), h = f(
   ({
-    label: o,
+    label: d,
     helperText: r,
-    isLabelSrOnly: d = !1,
-    ...u
-  }, t) => {
-    const { container: s, indicator: l, knob: i, textWrapper: y, label: p, hintText: c } = m(), b = { ...u, role: "switch" };
-    return /* @__PURE__ */ a(g, { ...b, ref: t, className: s(), children: [
-      /* @__PURE__ */ e("div", { className: l(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: i() }) }),
-      /* @__PURE__ */ a(
-        "div",
-        {
-          className: y({
-            className: d ? "uy-sr-only" : ""
-          }),
-          "data-dd-privacy": "allow",
-          children: [
-            /* @__PURE__ */ e("span", { className: p(), children: o }),
-            r && /* @__PURE__ */ e("span", { className: c(), children: r })
-          ]
-        }
-      )
-    ] });
+    isLabelSrOnly: u = !1,
+    isDisabled: a,
+    ...t
+  }, s) => {
+    const { container: l, indicator: i, knob: y, textWrapper: c, label: p, hintText: b } = v({ isDisabled: a }), n = { ...t, role: "switch" };
+    return /* @__PURE__ */ o(
+      g,
+      {
+        ...n,
+        ref: s,
+        className: l(),
+        isDisabled: a,
+        children: [
+          /* @__PURE__ */ e("div", { className: i(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: y() }) }),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: c({
+                className: u ? "uy-sr-only" : ""
+              }),
+              "data-dd-privacy": "allow",
+              children: [
+                /* @__PURE__ */ e("span", { className: p(), children: d }),
+                r && /* @__PURE__ */ e("span", { className: b(), children: r })
+              ]
+            }
+          )
+        ]
+      }
+    );
   }
 );
 h.displayName = "ToggleSwitch";
 export {
   h as ToggleSwitch,
-  m as toggleSwitch
+  v as toggleSwitch
 };

package/dist/esm/components/toggle-switch-field/ToggleSwitchField.d.ts

@@ -1,19 +1,14 @@
-import { ForwardedRef, JSX, ReactNode } from 'react';
+import { ForwardedRef, JSX } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
 import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
-import { LabelProps } from '../label/Label.js';
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
     /** The name of the field, which should match the form schema. */
     name: TName;
     /** The label for the toggle switch. */
     label: string;
-    /** Helper text to display below form field. */
-    helperText?: ReactNode;
     /** Helper text to display below the toggle switch. */
     switchHelperText?: string;
-    /** A contextual link to display below the toggle switch. */
-    contextualLink?: ReactNode;
     /** The default selected value of the toggle switch. */
     defaultSelected?: boolean;
     /** Whether the toggle switch is disabled. */