@payfit/unity-components 1.2.0 → 2.1.4

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

@@ -1,14 +1,14 @@
 import { jsxs as d, jsx as e } from "react/jsx-runtime";
-import { forwardRef as I, useState as j } from "react";
-import { uyTv as C } from "@payfit/unity-themes";
+import { forwardRef as C, useState as I } from "react";
+import { uyTv as j } from "@payfit/unity-themes";
 import { useId as L } from "react-aria";
 import { useIntl as T } from "react-intl";
-import { Pagination as O } from "../../pagination/Pagination.js";
+import { ClientSidePagination as O } from "../../client-side-pagination/ClientSidePagination.js";
 import { SelectOption as R } from "../../select/parts/SelectOption.js";
 import { Select as E } from "../../select/Select.js";
-const _ = C({
+const _ = j({
   base: [
-    "uy:bg-surface-neutral-lowest",
+    "uy:bg-surface-neutral-low",
     "uy:sticky uy:bottom-0",
     "uy:grid uy:grid-cols-3 uy:items-center",
     "uy:ps-200 uy:py-100 uy:pe-100"
@@ -18,7 +18,7 @@ const _ = C({
   { value: "50", label: "50" },
   { value: "100", label: "100" },
   { value: "200", label: "200" }
-], A = I(
+], A = C(
   (b, y) => {
     const {
       pageCount: i,
@@ -31,18 +31,18 @@ const _ = C({
       onPageChange: P,
       onNextPress: v,
       onPreviousPress: N,
-      onPageSizeChange: z,
-      onPageHover: S,
+      onPageSizeChange: S,
+      onPageHover: z,
       itemLabel: g = "unity:component:table:pagination:item",
       ...w
-    } = b, a = L(), t = T(), [M, $] = j(h), x = {
+    } = b, a = L(), t = T(), [M, $] = I(h), x = {
       pageCount: i,
       defaultPage: u,
       currentPage: r,
       onPageChange: P,
       onNextPress: v,
       onPreviousPress: N,
-      onPageHover: S
+      onPageHover: z
     }, o = Math.max(((r ?? u ?? 1) - 1) * s + 1, 1), p = Math.min(o + s - 1, n), c = {
       singular: t.formatMessage(
         {
@@ -122,7 +122,7 @@ const _ = C({
                 value: `${M}`,
                 onChange: (l) => {
                   const m = parseInt(l, 10);
-                  z?.(m), $(m);
+                  S?.(m), $(m);
                 },
                 "aria-labelledby": `table-pagination-${a}-pagesize-label`,
                 children: (l) => /* @__PURE__ */ e(R, { id: l.value, children: l.label })

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

@@ -1,7 +1,7 @@
-import { jsx as b } from "react/jsx-runtime";
-import d, { memo as y, forwardRef as c, useMemo as f, Children as m, cloneElement as p } from "react";
-import { uyTv as v } from "@payfit/unity-themes";
-const w = v({
+import { jsx as y } from "react/jsx-runtime";
+import c, { memo as f, forwardRef as m, useMemo as a, Children as p, cloneElement as v } from "react";
+import { uyTv as w } from "@payfit/unity-themes";
+const R = w({
   base: [
     "uy:group uy:h-500",
     "uy:bg-surface-neutral uy:border-b uy:border-solid uy:border-b-border-neutral-enabled",
@@ -10,32 +10,36 @@ const w = v({
     "uy:aria-[selected=true]:bg-surface-neutral-selected uy:aria-[selected=true]:border-b-border-neutral-selected",
     "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-[-2px] uy:focus-visible:outline-utility-focus-ring"
   ]
-}), g = y(
-  c(
-    ({ children: o, className: t, rowIndex: r = 0, onKeyDown: a, isSelected: u, ...s }, l) => {
-      const i = f(() => m.map(o, (e, n) => d.isValidElement(e) ? p(
+}), g = f(
+  m(
+    ({ children: o, className: u, rowIndex: r = 0, onKeyDown: s, isSelected: t, ...l }, i) => {
+      const n = a(
+        () => R({ className: u }),
+        [u]
+      ), b = a(() => p.map(o, (e, d) => c.isValidElement(e) ? v(
         e,
         {
           rowIndex: r,
-          colIndex: n,
+          colIndex: d,
           ...e.props
         }
       ) : e), [o, r]);
-      return /* @__PURE__ */ b(
+      return /* @__PURE__ */ y(
         "tr",
         {
-          ref: l,
+          ref: i,
           role: "row",
-          className: w({ className: t }),
+          className: n,
           "aria-rowindex": r + 1,
-          "aria-selected": u,
+          "data-index": r + 1,
+          "aria-selected": t,
           onKeyDown: (e) => {
-            a?.(e);
+            s?.(e);
           },
           "data-dd-privacy": "mask",
-          "data-selectable": u !== void 0,
-          ...s,
-          children: i
+          "data-selectable": t !== void 0,
+          ...l,
+          children: b
         }
       );
     }
@@ -44,5 +48,5 @@ const w = v({
 g.displayName = "TableRow";
 export {
   g as TableRow,
-  w as tableRow
+  R as tableRow
 };

package/dist/esm/components/tabs/Tabs.variant.d.ts

@@ -10,12 +10,10 @@ export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
     scrollable: {
         true: {
             tabList: string;
-            scroller: string;
         };
         false: {
             base: string;
             scroller: string;
-            tabList: string;
         };
     };
 }, {
@@ -35,12 +33,10 @@ export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
     scrollable: {
         true: {
             tabList: string;
-            scroller: string;
         };
         false: {
             base: string;
             scroller: string;
-            tabList: string;
         };
     };
 }, {
@@ -60,12 +56,10 @@ export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
     scrollable: {
         true: {
             tabList: string;
-            scroller: string;
         };
         false: {
             base: string;
             scroller: string;
-            tabList: string;
         };
     };
 }, {

package/dist/esm/components/tabs/Tabs.variant.js

@@ -1,38 +1,37 @@
-import { uyTv as e } from "@payfit/unity-themes";
-const a = e({
+import { uyTv as t } from "@payfit/unity-themes";
+const e = t({
   slots: {
     base: "uy:w-full",
-    tabList: "uy:flex",
+    tabList: "uy:flex uy:gap-250 uy:mb-25",
     scroller: "uy:overflow-x-auto uy:overflow-y-hidden [scrollbar-width:thin]",
     tab: [
-      "uy:flex uy:relative uy:shrink-0 uy:gap-100 uy:whitespace-nowrap uy:min-w-[3ch] uy:text-center uy:typography-action uy:text-content-neutral-lowest-enabled uy:pt-150 uy:pb-150 uy:pl-200 uy:pr-200 uy:rounded-25 uy:cursor-pointer",
-      'uy:data-[selected]:text-content-form-enabled uy:data-[selected]:after:content:" " uy:data-[selected]:after:w-full uy:data-[selected]:after:h-[4px] uy:data-[selected]:after:absolute uy:data-[selected]:after:bottom-[-1px] uy:data-[selected]:after:left-0 uy:data-[selected]:after:right-0 uy:data-[selected]:text-content-form-active',
+      "uy:flex uy:relative uy:shrink-0 uy:gap-100 uy:whitespace-nowrap uy:min-w-[3ch] uy:text-center uy:typography-action uy:text-content-neutral-lowest-enabled uy:py-125 uy:rounded-75 uy:cursor-pointer",
+      'uy:data-[selected]:text-content-form-enabled uy:data-[selected]:after:block uy:data-[selected]:after:content:" " uy:data-[selected]:after:w-full uy:data-[selected]:after:h-25 uy:data-[selected]:after:absolute uy:data-[selected]:after:bottom-0 uy:data-[selected]:after:left-0 uy:data-[selected]:after:right-0 uy:data-[selected]:after:rounded-pill',
+      'uy:data-[status=active]:text-content-form-enabled uy:data-[status=active]:after:block uy:data-[status=active]:after:content:" " uy:data-[status=active]:after:w-full uy:data-[status=active]:after:h-25 uy:data-[status=active]:after:absolute uy:data-[status=active]:after:bottom-0 uy:data-[status=active]:after:left-0 uy:data-[status=active]:after:right-0 uy:data-[status=active]:after:rounded-pill',
       "uy:hover:cursor-pointer uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-[4px]"
     ]
   },
   variants: {
     variant: {
       primary: {
-        tab: "uy:data-[selected]:after:bg-border-neutral-active"
+        tab: "uy:data-[selected]:after:bg-border-neutral-active uy:data-[status=active]:after:bg-border-neutral-active"
       },
       neutral: {
-        tab: "uy:data-[selected]:after:bg-content-neutral"
+        tab: "uy:data-[selected]:after:bg-content-neutral uy:data-[status=active]:after:bg-content-neutral"
       }
     },
     scrollable: {
       true: {
-        tabList: "",
-        scroller: "uy:border-b-[1.25px] uy:border-solid uy:border-border-neutral-enabled"
+        tabList: ""
       },
       false: {
         base: "",
-        scroller: "",
-        tabList: "uy:border-b-[1.25px] uy:border-solid uy:border-border-neutral-enabled"
+        scroller: ""
       }
     }
   },
   defaultVariants: { variant: "primary", scrollable: !1 }
 });
 export {
-  a as tabsVariant
+  e as tabsVariant
 };

package/dist/esm/components/tabs/parts/{Tab.d.ts → RawTab.d.ts}

@@ -4,7 +4,7 @@ export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className'
     id: Key | undefined;
     suffix?: ReactNode;
 }
-declare const Tab: import('react').ForwardRefExoticComponent<TabProps & {
+declare const RawTab: import('react').ForwardRefExoticComponent<TabProps & {
     children?: ReactNode | undefined;
 } & import('react').RefAttributes<HTMLDivElement>>;
-export { Tab };
+export { RawTab };

package/dist/esm/components/tabs/parts/{Tab.js → RawTab.js}

@@ -1,18 +1,18 @@
 import { jsxs as i, jsx as l } from "react/jsx-runtime";
-import { forwardRef as b } from "react";
-import { Tab as p } from "react-aria-components";
+import { forwardRef as p } from "react";
+import { Tab as b } from "react-aria-components";
 import { useTabsContext as c } from "../Tabs.context.js";
 import { tabsVariant as f } from "../Tabs.variant.js";
-const T = b(
+const d = p(
   ({ children: a, suffix: r, id: o, ...t }, s) => {
     const { variant: m, scrollable: n } = c(), { tab: e } = f({ variant: m, scrollable: n });
-    return /* @__PURE__ */ i(p, { ref: s, id: o, ...t, className: e(), children: [
+    return /* @__PURE__ */ i(b, { ...t, ref: s, id: o, className: e(), children: [
       a,
       r ? /* @__PURE__ */ l("span", { children: r }) : null
     ] });
   }
 );
-T.displayName = "Tab";
+d.displayName = "RawTab";
 export {
-  T as Tab
+  d as RawTab
 };

package/dist/esm/components/task-menu/TaskMenu.d.ts

@@ -38,14 +38,14 @@ export interface TaskMenuProps extends PropsWithChildren<VariantProps<typeof tas
  * import { TaskMenu, Task, TaskGroup, SubTask } from '@payfit/unity-components'
  *
  * <TaskMenu>
- *  <Task
+ *  <RawTask
  *    uniqueId="task1"
  *    label="Complete Profile"
  *    taskNumber={1}
  *    taskStatus="completed"
  *    href="/profile"
  *   />
- *  <Task
+ *  <RawTask
  *    uniqueId="task2"
  *    label="Upload Documents"
  *    taskNumber={2}
@@ -58,13 +58,13 @@ export interface TaskMenuProps extends PropsWithChildren<VariantProps<typeof tas
  *    taskNumber={3}
  *    taskStatus="uncompleted"
  *  >
- *    <SubTask
+ *    <RawSubTask
  *      uniqueId="step1"
  *      label="Welcome Video"
  *      href="/onboarding/welcome"
  *      taskStatus="completed"
  *    />
- *    <SubTask
+ *    <RawSubTask
  *      uniqueId="step2"
  *      label="Company Policies"
  *      href="/onboarding/policies"

package/dist/esm/components/task-menu/parts/{SubTask.d.ts → RawSubTask.d.ts}

@@ -1,5 +1,5 @@
-import { TaskProps } from './Task.js';
-export declare const subTask: import('tailwind-variants').TVReturnType<{
+import { TaskProps } from './RawTask.js';
+export declare const rawSubTask: import('tailwind-variants').TVReturnType<{
     taskStatus: {
         uncompleted: {
             dot: string[];
@@ -138,7 +138,7 @@ export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
  *
  * ```tsx
  * // Link-based subtask for navigation within a task group
- * <SubTask
+ * <RawSubTask
  *   uniqueId="profile-setup"
  *   label="Complete Profile Information"
  *   taskStatus="uncompleted"
@@ -146,7 +146,7 @@ export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
  * />
  *
  * // Button-based subtask for custom interactions
- * <SubTask
+ * <RawSubTask
  *   uniqueId="validate-email"
  *   label="Validate Email Address"
  *   taskStatus="completed"
@@ -154,7 +154,7 @@ export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
  * />
  *
  * // Locked subtask that cannot be interacted with
- * <SubTask
+ * <RawSubTask
  *   uniqueId="final-approval"
  *   label="Manager Approval"
  *   taskStatus="locked"
@@ -162,5 +162,5 @@ export interface SubTaskProps extends Omit<TaskProps, 'taskNumber'> {
  * ```
  * @see {@link SubTaskProps} for all available props
  */
-declare const SubTask: import('react').ForwardRefExoticComponent<SubTaskProps & import('react').RefAttributes<HTMLLIElement>>;
-export { SubTask };
+declare const RawSubTask: import('react').ForwardRefExoticComponent<SubTaskProps & import('react').RefAttributes<HTMLLIElement>>;
+export { RawSubTask };

package/dist/esm/components/task-menu/parts/{SubTask.js → RawSubTask.js}

@@ -1,15 +1,15 @@
-import { jsxs as a, jsx as e, Fragment as d } from "react/jsx-runtime";
-import { forwardRef as L, useEffect as j } from "react";
-import { uyTv as O } from "@payfit/unity-themes";
-import { Link as z, Button as E } from "react-aria-components";
-import { useIntl as F, FormattedMessage as i } from "react-intl";
-import { useRouter as P } from "../../../providers/router/RouterProvider.js";
+import { jsxs as n, jsx as e, Fragment as m } from "react/jsx-runtime";
+import { forwardRef as L, useEffect as R } from "react";
+import { uyTv as j } from "@payfit/unity-themes";
+import { Link as O, Button as z } from "react-aria-components";
+import { useIntl as E, FormattedMessage as i } from "react-intl";
+import { useRouter as F } from "../../../providers/router/RouterProvider.js";
 import { Icon as p } from "../../icon/Icon.js";
-import { Text as R } from "../../text/Text.js";
+import { Text as P } from "../../text/Text.js";
 import { useTaskMenuContext as A } from "../TaskMenu.context.js";
 import D from "./dot.svg.js";
 import { commonTask as I } from "./task.variants.js";
-const V = O({
+const V = j({
   extend: I,
   slots: {
     base: ["uy:gap-300 uy:py-100", "uy:md:py-50"],
@@ -57,7 +57,7 @@ const V = O({
       taskStatus: "uncompleted",
       className: {
         text: [
-          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
         ]
       }
     },
@@ -66,19 +66,19 @@ const V = O({
       taskStatus: "locked",
       className: {
         text: [
-          "uy:group-hover/element:bg-surface-neutral-hover uy:group-hover/element:text-content-neutral-hover"
+          'uy:group-data-[hovered="true"]/element:bg-surface-neutral-hover uy:group-data-[hovered="true"]/element:text-content-neutral-hover'
         ]
       }
     }
   ]
-}), B = (t, o, n) => {
+}), B = (t, o, r) => {
   switch (t) {
     case "completed":
-      return /* @__PURE__ */ a(d, { children: [
+      return /* @__PURE__ */ n(m, { children: [
         /* @__PURE__ */ e(
           p,
           {
-            className: n?.completed,
+            className: r?.completed,
             src: "CheckCircleOutlined",
             size: 20,
             color: "content.success",
@@ -97,12 +97,12 @@ const V = O({
         ) })
       ] });
     case "locked":
-      return /* @__PURE__ */ a(d, { children: [
+      return /* @__PURE__ */ n(m, { children: [
         /* @__PURE__ */ e(
           p,
           {
             "aria-hidden": "true",
-            className: n?.locked,
+            className: r?.locked,
             src: "LockOutlined",
             size: 20,
             color: "content.neutral.lowest",
@@ -127,59 +127,59 @@ const V = O({
   ({
     href: t,
     label: o,
-    taskStatus: n = "uncompleted",
-    isExact: l,
+    taskStatus: r = "uncompleted",
+    isExact: u,
     isDisabled: y,
     onPress: f,
-    uniqueId: r,
+    uniqueId: s,
     ...c
   }, g) => {
-    const k = F(), u = P(), { currentTask: b, setCurrentTask: m, state: h } = A();
-    j(() => {
-      t && u?.isActive(t.toString(), l) && m?.({ uniqueId: r, label: o });
-    }, [t, l, u, r, o]);
-    const s = b?.uniqueId === r, { base: v, element: S, text: x, dot: N, lock: M } = V({
-      isSelected: s,
-      taskStatus: n
-    }), T = Object.assign(
+    const k = E(), d = F(), { currentTask: b, setCurrentTask: l, state: h } = A();
+    R(() => {
+      t && d?.isActive(t.toString(), u) && l?.({ uniqueId: s, label: o });
+    }, [t, u, d, s, o, l]);
+    const a = b?.uniqueId === s, { base: v, element: S, text: x, dot: N, lock: w } = V({
+      isSelected: a,
+      taskStatus: r
+    }), M = Object.assign(
       {},
-      s !== void 0 && {
-        "data-current": s,
-        "aria-current": s ? "page" : void 0
+      a !== void 0 && {
+        "data-current": a,
+        "aria-current": a ? "page" : void 0
       }
-    ), w = t ? z : E;
-    return /* @__PURE__ */ a(
+    ), T = t ? O : z;
+    return /* @__PURE__ */ n(
       "li",
       {
         ref: g,
         className: v(),
-        ...s ? { "data-current": !0 } : {},
+        ...a ? { "data-current": !0 } : {},
         ...c,
         children: [
           /* @__PURE__ */ e(D, { width: 8, height: 8, className: N(), role: "presentation" }),
-          /* @__PURE__ */ a(
-            w,
+          /* @__PURE__ */ n(
+            T,
             {
               className: S(),
               href: t,
               onPress: (C) => {
-                m?.({ uniqueId: r, label: o }), h?.toggle(), f?.(C);
+                l?.({ uniqueId: s, label: o }), h?.toggle(), f?.(C);
               },
               isDisabled: y,
-              ...T,
+              ...M,
               ...c,
               children: [
                 /* @__PURE__ */ e(
-                  R,
+                  P,
                   {
                     asElement: "span",
                     className: x(),
-                    variant: s ? "bodyStrong" : "body",
+                    variant: a ? "bodyStrong" : "body",
                     children: o
                   }
                 ),
-                B(n, k, {
-                  locked: M(),
+                B(r, k, {
+                  locked: w(),
                   completed: "uy:self-center"
                 })
               ]
@@ -190,8 +190,8 @@ const V = O({
     );
   }
 );
-G.displayName = "SubTask";
+G.displayName = "RawSubTask";
 export {
-  G as SubTask,
-  V as subTask
+  G as RawSubTask,
+  V as rawSubTask
 };

package/dist/esm/components/task-menu/parts/{Task.d.ts → RawTask.d.ts}

@@ -1,7 +1,7 @@
 import { VariantProps } from '@payfit/unity-themes';
 import { PropsWithChildren } from 'react';
 import { AriaButtonProps } from 'react-aria';
-export declare const task: import('tailwind-variants').TVReturnType<{
+export declare const rawTask: import('tailwind-variants').TVReturnType<{
     isSelected: {
         false: string;
         true: string;
@@ -117,7 +117,7 @@ export declare const task: import('tailwind-variants').TVReturnType<{
  * Props for the Task component, defining the configuration options for individual task items.
  * Supports both link-based navigation and button-based interactions with various visual states.
  */
-export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof task>, 'isSelected'>> {
+export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof rawTask>, 'isSelected'>> {
     /**
      * Unique identifier for the task, used for state management and accessibility.
      * This ID is used to track the current selected task and manage focus states.
@@ -148,7 +148,7 @@ export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof ta
  *
  * ```tsx
  * // Link-based task for navigation
- * <Task
+ * <RawTask
  *   uniqueId="setup-profile"
  *   label="Complete Profile Setup"
  *   taskNumber={1}
@@ -157,7 +157,7 @@ export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof ta
  * />
  *
  * // Button-based task for custom interactions
- * <Task
+ * <RawTask
  *   uniqueId="validate-data"
  *   label="Validate Information"
  *   taskNumber={2}
@@ -166,7 +166,7 @@ export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof ta
  * />
  *
  * // Locked task that cannot be interacted with
- * <Task
+ * <RawTask
  *   uniqueId="final-review"
  *   label="Final Review"
  *   taskNumber={3}
@@ -175,5 +175,5 @@ export interface TaskProps extends PropsWithChildren<Omit<VariantProps<typeof ta
  * ```
  * @see {@link TaskProps} for all available props
  */
-declare const Task: import('react').ForwardRefExoticComponent<TaskProps & import('react').RefAttributes<HTMLLIElement>>;
-export { Task };
+declare const RawTask: import('react').ForwardRefExoticComponent<TaskProps & import('react').RefAttributes<HTMLLIElement>>;
+export { RawTask };