@payfit/unity-components 1.0.0 → 1.1.0

package/dist/esm/components/text-area/TextArea.js

@@ -1,12 +1,12 @@
 import { jsxs as t, jsx as e } from "react/jsx-runtime";
 import { forwardRef as v } from "react";
-import { TextArea as w } from "react-aria-components";
-import { useIntl as M } from "react-intl";
-import { tv as z } from "tailwind-variants";
+import { uyTv as w } from "@payfit/unity-themes";
+import { TextArea as M } from "react-aria-components";
+import { useIntl as z } from "react-intl";
 import { useResizable as L } from "../../hooks/use-resizable.js";
 import { Icon as D } from "../icon/Icon.js";
 import { Spinner as N } from "../spinner/Spinner.js";
-const W = z({
+const W = w({
   slots: {
     base: "uy:flex uy:border uy:border-solid uy:rounded-100 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active uy:overflow-hidden uy:relative",
     inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100",
@@ -65,7 +65,7 @@ const W = z({
     isResizable: i = !1,
     ...y
   }, b) => {
-    const o = M(), { containerRef: l, handleResizeStart: m } = L({
+    const o = z(), { containerRef: l, handleResizeStart: m } = L({
       isDisabled: !i || a || r
     }), { base: c, inputWrapper: p, input: g, state: x, resizeHandle: h } = W({
       isInvalid: n,
@@ -75,7 +75,7 @@ const W = z({
     return /* @__PURE__ */ t("div", { ref: l, className: c(), children: [
       /* @__PURE__ */ t("div", { className: p(), children: [
         /* @__PURE__ */ e(
-          w,
+          M,
           {
             "data-dd-privacy": "mask",
             ...y,

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

@@ -1,7 +1,7 @@
 import { jsxs as B, jsx as o } from "react/jsx-runtime";
 import { forwardRef as I } from "react";
-import { useFormContext as g } from "react-hook-form";
-import { tv as j } from "tailwind-variants";
+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";
@@ -9,7 +9,7 @@ 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 = j({
+const H = g({
   base: "uy:flex uy:flex-col uy:gap-100"
 });
 function R({
@@ -28,13 +28,13 @@ function R({
   requiredVariant: x,
   ...n
 }, s) {
-  const { control: F, setValue: C } = g(), T = {
+  const { control: F, setValue: C } = j(), T = {
     isRequired: p,
     isInvalid: a,
     isLoading: f,
     isDisabled: d,
     isReadOnly: u
-  }, h = !i, { onClearButtonPress: y } = h ? n : {}, b = y ?? (() => {
+  }, y = !i, { onClearButtonPress: h } = y ? n : {}, b = h ?? (() => {
     C(t, "");
   });
   return /* @__PURE__ */ B(

package/dist/esm/components/toast/UnityToast.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
 declare const unityToast: import('tailwind-variants').TVReturnType<{
     variant: {
         success: string;

package/dist/esm/components/toast/UnityToast.js

@@ -1,12 +1,12 @@
 import { jsx as o, jsxs as n } from "react/jsx-runtime";
-import { isValidElement as l, Fragment as m, Children as y } from "react";
-import { useIntl as p } from "react-intl";
-import { tv as f } from "tailwind-variants";
+import { isValidElement as l, Fragment as d, Children as m } from "react";
+import { uyTv as p } from "@payfit/unity-themes";
+import { useIntl as f } from "react-intl";
 import { IconButton as b } from "../icon-button/IconButton.js";
 import { Icon as g } from "../icon/Icon.js";
 import { ToastTitle as x } from "./parts/ToastTitle.js";
-import { ToastProvider as h } from "./Toast.context.js";
-const T = f({
+import { ToastProvider as T } from "./Toast.context.js";
+const h = p({
   slots: {
     base: "uy:sm:w-[416px] uy:border uy:border-solid uy:rounded-150 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-floating uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral-high",
     contentWrapper: "uy:flex uy:grow uy:ml-125",
@@ -27,8 +27,8 @@ const T = f({
     }
   }
 }), v = (e) => {
-  const s = l(e) && e.type === m ? e.props.children : e;
-  if (y.toArray(s).filter(
+  const s = l(e) && e.type === d ? e.props.children : e;
+  if (m.toArray(s).filter(
     (r) => l(r) && r.type === x
   ).length !== 1)
     throw new Error("UnityToast must have one ToastTitle component");
@@ -39,13 +39,13 @@ const T = f({
   inline: r = !0,
   ...i
 }) => {
-  const a = p();
+  const a = f();
   v(e);
-  const { base: u, contentWrapper: c, divider: d } = T({
+  const { base: u, contentWrapper: c, divider: y } = h({
     variant: t,
     isInline: r
   });
-  return /* @__PURE__ */ o(h, { inline: r, children: /* @__PURE__ */ n(
+  return /* @__PURE__ */ o(T, { inline: r, children: /* @__PURE__ */ n(
     "div",
     {
       "data-dd-privacy": "mask",
@@ -71,7 +71,7 @@ const T = f({
           ),
           /* @__PURE__ */ o("div", { className: c(), children: e })
         ] }),
-        /* @__PURE__ */ o("div", { role: "presentation", className: d() }),
+        /* @__PURE__ */ o("div", { role: "presentation", className: y() }),
         /* @__PURE__ */ o(
           b,
           {

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

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
-import { VariantProps } from 'tailwind-variants';
 export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
     isDisabled: {
         false: {

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

@@ -1,8 +1,8 @@
 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 m } from "tailwind-variants";
-const v = m({
+import { uyTv as g } from "@payfit/unity-themes";
+import { Switch as m } from "react-aria-components";
+const v = g({
   slots: {
     container: ["uy:flex uy:gap-100 uy:group"],
     textWrapper: ["uy:flex uy:flex-col uy:gap-50"],
@@ -48,7 +48,7 @@ const v = m({
   }, 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,
+      m,
       {
         ...n,
         ref: s,

package/dist/esm/components/toggle-switch-field/ToggleSwitchField.js

@@ -1,53 +1,57 @@
-import { jsx as t } from "react/jsx-runtime";
+import { jsxs as h, jsx as t } from "react/jsx-runtime";
 import { forwardRef as u } from "react";
-import { useFormContext as F } from "react-hook-form";
-import { FormField as a } from "../form-field/FormField.js";
+import { useFormContext as a } from "react-hook-form";
+import { FormField as x } from "../form-field/FormField.js";
 import { FormControl as w } from "../form-field/parts/FormControl.js";
-import { ToggleSwitch as x } from "../toggle-switch/ToggleSwitch.js";
-function S({
+import { FormFeedbackText as T } from "../form-field/parts/FormFeedbackText.js";
+import { ToggleSwitch as S } from "../toggle-switch/ToggleSwitch.js";
+function y({
   name: o,
   label: r,
   defaultSelected: e,
   switchHelperText: i,
-  isInvalid: l,
-  isLoading: m,
+  isInvalid: m,
+  isLoading: l,
   isDisabled: c,
   isReadOnly: n,
   isLabelSrOnly: p,
-  ...f
-}, s) {
-  const { control: g, watch: d } = F(), h = d(o);
-  return /* @__PURE__ */ t(
-    a,
+  ...s
+}, f) {
+  const { control: d, watch: g } = a(), F = g(o);
+  return /* @__PURE__ */ h(
+    x,
     {
-      control: g,
+      control: d,
       name: o,
       className: "uy:flex uy:flex-col uy:gap-100",
       ...{
-        isInvalid: l,
-        isLoading: m,
+        isInvalid: m,
+        isLoading: l,
         isDisabled: c,
         isReadOnly: n
       },
-      children: /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
-        x,
-        {
-          ref: s,
-          defaultSelected: e,
-          isSelected: h,
-          label: r,
-          isLabelSrOnly: p,
-          helperText: i,
-          ...f
-        }
-      ) })
+      children: [
+        /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
+          S,
+          {
+            ref: f,
+            defaultSelected: e,
+            isSelected: F,
+            label: r,
+            isLabelSrOnly: p,
+            helperText: i,
+            ...s
+          }
+        ) }),
+        /* @__PURE__ */ t(T, {})
+      ]
     }
   );
 }
-const T = u(function(r, e) {
-  return S(r, e);
+const j = u(function(r, e) {
+  return y(r, e);
 });
-T.displayName = "ToggleSwitchField";
+j.displayName = "ToggleSwitchField";
 export {
-  T as ToggleSwitchField
+  j as ToggleSwitchField
 };

package/dist/esm/components/toggle-switch-group/ToggleSwitchGroup.d.ts

@@ -1,5 +1,5 @@
+import { VariantProps } from '@payfit/unity-themes';
 import { ReactNode } from 'react';
-import { VariantProps } from 'tailwind-variants';
 export declare const toggleSwitchGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-50", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-50", unknown, unknown, undefined>>;
 export interface ToggleSwitchGroupProps extends VariantProps<typeof toggleSwitchGroup> {
     /** The label for the group. */

package/dist/esm/components/toggle-switch-group/ToggleSwitchGroup.js

@@ -1,6 +1,6 @@
 import { jsxs as A, jsx as d } from "react/jsx-runtime";
 import { forwardRef as B, useState as H, useId as J, useRef as K, useCallback as Q, isValidElement as V, cloneElement as N, Children as U } from "react";
-import { tv as W } from "tailwind-variants";
+import { uyTv as W } from "@payfit/unity-themes";
 import { Label as X } from "../label/Label.js";
 import { Text as R } from "../text/Text.js";
 const Y = W({
@@ -25,17 +25,17 @@ const _ = B(
     value: g,
     defaultValue: M,
     onChange: a,
-    onFocus: p,
-    onBlur: u,
+    onFocus: u,
+    onBlur: p,
     onFocusChange: t,
     ...O
   }, $) => {
     const f = g !== void 0, [x, D] = H(
       M ?? []
     ), s = f ? g : x, w = J(), j = r ? `${w}-helper` : void 0, y = c && l ? `${w}-feedback` : void 0, L = [j, y].filter(Boolean).join(" ") || void 0, E = K(!1), P = (e) => {
-      E.current = !0, p == null || p(e), t == null || t(!0);
+      E.current = !0, u == null || u(e), t == null || t(!0);
     }, k = (e) => {
-      E.current = !1, u == null || u(e), t == null || t(!1);
+      E.current = !1, p == null || p(e), t == null || t(!1);
     }, q = Q(
       (e) => {
         let i;

package/dist/esm/components/toggle-switch-group-field/ToggleSwitchGroupField.js

@@ -1,54 +1,59 @@
-import { jsxs as T, jsx as i } from "react/jsx-runtime";
-import { forwardRef as a } from "react";
-import { useFormContext as x } from "react-hook-form";
-import { FormField as G } from "../form-field/FormField.js";
-import { FormControl as S } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as j } from "../form-field/parts/FormFeedbackText.js";
-import { ToggleSwitchGroup as y } from "../toggle-switch-group/ToggleSwitchGroup.js";
-function C({
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as x, useMemo as G } from "react";
+import { useFormContext as R } from "react-hook-form";
+import { FormField as q } from "../form-field/FormField.js";
+import { FormControl as y } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as P } from "../form-field/parts/FormFeedbackText.js";
+import { isFieldRequired as j } from "../form-field/utils/isFieldRequired.js";
+import { useUnityFormProvider as v } from "../form/Form.context.js";
+import { ToggleSwitchGroup as C } from "../toggle-switch-group/ToggleSwitchGroup.js";
+function U({
   name: o,
   label: r,
-  defaultValue: t,
+  defaultValue: i,
   helperText: m,
-  contextualLink: e,
-  isRequired: c,
-  isInvalid: l,
-  isLoading: n,
-  isDisabled: p,
-  isReadOnly: f,
-  requiredVariant: s,
-  children: u,
-  ...d
+  contextualLink: c,
+  isRequired: s,
+  isInvalid: p,
+  isLoading: l,
+  isDisabled: n,
+  isReadOnly: u,
+  requiredVariant: d,
+  children: f,
+  ...F
 }, g) {
-  const { control: F, watch: h } = x(), w = h(o);
-  return /* @__PURE__ */ T(G, { control: F, name: o, ...{
-    isRequired: c,
-    isInvalid: l,
-    isLoading: n,
-    isDisabled: p,
-    isReadOnly: f
+  const { control: h, watch: w } = R(), { schema: t } = v(), S = G(
+    () => j(t, o),
+    [t, o]
+  ), T = w(o);
+  return /* @__PURE__ */ a(q, { control: h, name: o, ...{
+    isInvalid: p,
+    isLoading: l,
+    isDisabled: n,
+    isReadOnly: u
   }, children: [
-    /* @__PURE__ */ i(S, { children: /* @__PURE__ */ i(
-      y,
+    /* @__PURE__ */ e(y, { children: /* @__PURE__ */ e(
+      C,
       {
         ref: g,
         label: r,
-        defaultValue: t,
-        value: w,
+        defaultValue: i,
+        value: T,
         helperText: m,
-        requiredVariant: s,
-        ...d,
-        children: u
+        requiredVariant: d,
+        ...F,
+        isRequired: S ?? s,
+        children: f
       }
     ) }),
-    /* @__PURE__ */ i(j, {}),
-    e
+    /* @__PURE__ */ e(P, {}),
+    c
   ] });
 }
-const P = a(function(r, t) {
-  return C(r, t);
+const b = x(function(r, i) {
+  return U(r, i);
 });
-P.displayName = "ToggleSwitchGroupField";
+b.displayName = "ToggleSwitchGroupField";
 export {
-  P as ToggleSwitchGroupField
+  b as ToggleSwitchGroupField
 };

package/dist/esm/components/tooltip/Tooltip.d.ts

@@ -4,5 +4,7 @@ export interface TooltipProps {
     title: string;
     /** The trigger element that displays the tooltip. */
     children: ReactElement;
+    /** The duration of delay/close delay for the tooltip. */
+    duration?: 'short' | 'standard' | 'long' | 'very-long';
 }
 export declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/esm/components/tooltip/Tooltip.js

@@ -1,22 +1,30 @@
-import { jsxs as l, jsx as e } from "react/jsx-runtime";
-import { forwardRef as y } from "react";
-import { TooltipTrigger as a, Tooltip as p, Button as u } from "react-aria-components";
-import { Button as i } from "../button/Button.js";
-const s = (o) => o.type === i || o.type === u, f = y(
-  ({ title: o, children: t }, r) => /* @__PURE__ */ l(a, { delay: 500, closeDelay: 1500, children: [
-    t,
-    /* @__PURE__ */ e(
-      p,
-      {
-        ref: r,
-        "data-dd-privacy": "allow",
-        offset: s(t) ? 6 : 8,
-        className: "uy:inline-flex uy:rounded-50 uy:pl-100 uy:pr-100 uy:pt-50 uy:pb-50 uy:bg-grayscale-l12 uy:max-w-[300px]",
-        children: /* @__PURE__ */ e("p", { className: "uy:typography-body-small uy:text-content-inverted uy:overflow-hidden uy:text-ellipsis uy:line-clamp-3", children: o })
-      }
-    )
-  ] })
+import { jsxs as y, jsx as r } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { TooltipTrigger as p, Tooltip as u, Button as i } from "react-aria-components";
+import { Button as d } from "../button/Button.js";
+const c = (o) => o.type === d || o.type === i, m = {
+  short: [100, 150],
+  standard: [150, 200],
+  long: [200, 300],
+  "very-long": [300, 400]
+}, T = n(
+  ({ title: o, children: t, duration: a = "standard" }, e) => {
+    const [l, s] = m[a];
+    return /* @__PURE__ */ y(p, { delay: l, closeDelay: s, children: [
+      t,
+      /* @__PURE__ */ r(
+        u,
+        {
+          ref: e,
+          "data-dd-privacy": "allow",
+          offset: c(t) ? 6 : 8,
+          className: "uy:inline-flex uy:rounded-50 uy:pl-100 uy:pr-100 uy:pt-50 uy:pb-50 uy:bg-grayscale-l12 uy:max-w-[300px]",
+          children: /* @__PURE__ */ r("p", { className: "uy:typography-body-small uy:text-content-inverted uy:overflow-hidden uy:text-ellipsis uy:line-clamp-3", children: o })
+        }
+      )
+    ] });
+  }
 );
 export {
-  f as Tooltip
+  T as Tooltip
 };

package/dist/esm/hooks/use-form.js

@@ -1,10 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
 import { useMemo as n } from "react";
-import { zodResolver as l } from "@hookform/resolvers/zod";
+import { standardSchemaResolver as l } from "@hookform/resolvers/standard-schema";
 import { useForm as c } from "react-hook-form";
-import { FormField as u } from "../components/form-field/FormField.js";
-import { Form as s } from "../components/form/Form.js";
-function v(m, i = {
+import { FormField as a } from "../components/form-field/FormField.js";
+import { Form as u } from "../components/form/Form.js";
+function S(m, i = {
   mode: "onTouched",
   reValidateMode: "onChange"
 }) {
@@ -12,12 +12,12 @@ function v(m, i = {
     ...i,
     resolver: l(m)
   }), d = n(() => {
-    const o = (e) => /* @__PURE__ */ t(s, { ...e, form: r, schema: m, children: e.children });
+    const o = (e) => /* @__PURE__ */ t(u, { ...e, form: r, schema: m, children: e.children });
     return o.displayName = "FormWithSchema", o;
   }, [r, m]), F = n(() => {
     const o = (e) => (
       // @ts-expect-error: REACT-18-MIGRATION
-      /* @__PURE__ */ t(u, { ...e, control: r.control, children: e.children })
+      /* @__PURE__ */ t(a, { ...e, control: r.control, children: e.children })
     );
     return o.displayName = "FormFieldWithSchema", o;
   }, [r]);
@@ -28,5 +28,5 @@ function v(m, i = {
   };
 }
 export {
-  v as useUnityForm
+  S as useUnityForm
 };

package/dist/esm/index.d.ts

@@ -35,6 +35,8 @@ export * from './components/collapsible/Collapsible.js';
 export * from './components/collapsible/parts/CollapsibleContent.js';
 export * from './components/collapsible/parts/CollapsibleTitle.js';
 export * from './components/data-table/DataTable.js';
+export * from './components/data-table/parts/DataTableRoot.js';
+export * from './components/data-table/parts/DataTableBulkActions.js';
 export * from './components/date-calendar/DateCalendar.js';
 export * from './components/date-picker-field/DatePickerField.js';
 export * from './components/date-picker/DatePicker.js';
@@ -125,6 +127,7 @@ export * from './components/side-panel/SidePanel.js';
 export * from './components/side-panel/parts/SidePanelContent.js';
 export * from './components/side-panel/parts/SidePanelFooter.js';
 export * from './components/side-panel/parts/SidePanelHeader.js';
+export * from './components/skip-links/SkipLinks.js';
 export * from './components/spinner/Spinner.js';
 export * from './components/table/Table.js';
 export * from './components/table/parts/TableBody.js';
@@ -158,4 +161,6 @@ export * from './hooks/use-breakpoint-listener.js';
 export * from './hooks/use-form.js';
 export * from './hooks/use-media-query.js';
 export * from './providers/router/RouterProvider.js';
-export * from './providers/router/integrations/UnityReactRouterV5Provider.js';
+export * from './components/action-bar/ActionBar.js';
+export * from './components/action-bar/parts/ActionBarAction.js';
+export * from './components/action-bar/parts/ActionBarRoot.js';