@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/table/parts/TablePagination.d.ts

@@ -0,0 +1,135 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { PaginationProps } from '../../pagination/Pagination.js';
+export declare const tablePagination: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+type PageSizeOption = {
+    value: string;
+    label: string;
+};
+export interface TablePaginationProps extends PropsWithChildren<VariantProps<typeof tablePagination>> {
+    /**
+     * The total number of pages to display
+     */
+    pageCount: number;
+    /**
+     * Represents the total number of rows that are available or being counted.
+     * This variable typically holds a numeric value to indicate the total count of rows
+     * relevant for a specific process, dataset, or operation.
+     */
+    rowCount: number;
+    /**
+     * The number of rows per page
+     */
+    rowsPerPage: number;
+    /**
+     * Represents the current page being viewed or processed in a paginated dataset.
+     * This variable may be optional depending on the application logic and usage context,
+     * and can hold either a numeric value indicating the current page or remain undefined
+     * if not explicitly set.
+     */
+    currentPage?: number;
+    /**
+     * The initial page to display when in uncontrolled mode
+     */
+    defaultPage?: number;
+    /**
+     * Represents the default number of items to display per page in a paginated view.
+     * The value is expected to correspond to one of the selectable options available via `PageSizeOption`.
+     * This property is optional and can be left undefined, in which case a default behavior may apply.
+     */
+    defaultPageSize?: PageSizeOption['value'];
+    /**
+     * A callback function that is triggered when a page is hovered over in the pagination component.
+     *
+     * This function is intended for handling hover events on individual pagination controls or elements.
+     * It is derived from the `onPageHover` property in the `Pagination` component.
+     */
+    onPageHover?: PaginationProps['onPageHover'];
+    /**
+     * Callback fired when the page changes
+     * @param page - The new page number
+     * @param previous - The previous page number
+     * @param direction - The direction of navigation (1 for forward, -1 for backward)
+     */
+    onPageChange?: PaginationProps['onPageChange'];
+    /**
+     * Optional callback for next button press
+     */
+    onNextPress?: PaginationProps['onNextPress'];
+    /**
+     * Optional callback for previous button press
+     */
+    onPreviousPress?: PaginationProps['onPreviousPress'];
+    /**
+     * The options for the number of rows per page selection dropdown.
+     * If not provided, the default options will be used.
+     * @default [
+     *   { value: '10', label: '10' },
+     *   { value: '50', label: '50' },
+     *   { value: '100', label: '100' },
+     *   { value: '200', label: '200' },
+     * ]
+     */
+    pageSizeOptions?: PageSizeOption[];
+    /**
+     * Callback fired when the number of rows per page changes
+     * @param pageSize - The new number of rows per page
+     */
+    onPageSizeChange?: (pageSize: number) => void;
+    /**
+     * The label name that each row in the table represents
+     * @default 'unity:component:table:pagination:item'
+     */
+    itemLabel?: string;
+}
+/**
+ * The `TablePagination` component provides pagination controls for tables with large datasets.
+ * It displays the current range of items being shown, pagination controls, and a dropdown to change the number of rows per page.
+ * @note This is a **stateless** component, meaning that it does not manage its own state, and you have to provide the necessary callbacks to handle page changes and row count changes.
+ * @param {TablePaginationProps} props - The props for the `TablePagination` component
+ * @param {number} props.pageCount - The total number of pages
+ * @param {number} props.rowCount - The total number of rows in the dataset
+ * @param {number} props.rowsPerPage - The number of rows per page
+ * @param {number} [props.currentPage] - The current page (for controlled pagination)
+ * @param {number} [props.defaultPage] - The initial page (for uncontrolled pagination)
+ * @param {PageSizeOption[]} [props.pageSizeOptions] - Options for the number of rows per page dropdown
+ * @param {string} [props.defaultPageSize] - The default number of rows per page
+ * @param {Function} [props.onPageChange] - Callback when the page changes
+ * @param {Function} [props.onPageSizeChange] - Callback when the number of rows per page changes
+ * @param {string} [props.itemLabel] - Label for the items being paginated
+ * @example
+ * ```tsx
+ * import { TablePagination } from '@payfit/unity-components'
+ *
+ * <TablePagination
+ *   pageCount={10}
+ *   rowCount={100}
+ *   rowsPerPage={10}
+ *   currentPage={1}
+ *   onPageChange={(page) => console.log(`Page changed to ${page}`)}
+ * />
+ * ```
+ * @example
+ * ```tsx
+ * // With custom page size options
+ * import { TablePagination } from '@payfit/unity-components'
+ *
+ * <TablePagination
+ *   pageCount={5}
+ *   rowCount={50}
+ *   rowsPerPage={10}
+ *   pageSizeOptions={[
+ *     { value: '5', label: '5' },
+ *     { value: '10', label: '10' },
+ *     { value: '25', label: '25' },
+ *   ]}
+ *   onPageSizeChange={(size) => console.log(`Page size changed to ${size}`)}
+ * />
+ * ```
+ * @see {@link TablePaginationProps} for all available props
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tableheader--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TablePagination: import('react').ForwardRefExoticComponent<TablePaginationProps & import('react').RefAttributes<HTMLDivElement>>;
+export { TablePagination };

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

@@ -0,0 +1,139 @@
+import { jsxs as b, jsx as e } from "react/jsx-runtime";
+import { forwardRef as x, useState as I } from "react";
+import { useId as j } from "react-aria";
+import { useIntl as L } from "react-intl";
+import { tv as O } from "tailwind-variants";
+import { Pagination as R } from "../../pagination/Pagination.js";
+import { SelectOption as T } from "../../select/parts/SelectOption.js";
+import { Select as C } from "../../select/Select.js";
+const E = O({
+  base: [
+    "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"
+  ]
+}), _ = [
+  { value: "10", label: "10" },
+  { value: "50", label: "50" },
+  { value: "100", label: "100" },
+  { value: "200", label: "200" }
+], k = x(
+  (y, f) => {
+    const {
+      pageCount: t,
+      rowCount: s,
+      currentPage: u,
+      rowsPerPage: n = 10,
+      defaultPage: p,
+      pageSizeOptions: h = _,
+      defaultPageSize: P = n,
+      onPageChange: v,
+      onNextPress: N,
+      onPreviousPress: w,
+      onPageSizeChange: o,
+      itemLabel: c = "unity:component:table:pagination:item",
+      ...M
+    } = y, a = j(), l = L(), [$, z] = I(P), S = {
+      pageCount: t,
+      defaultPage: p,
+      currentPage: u,
+      onPageChange: v,
+      onNextPress: N,
+      onPreviousPress: w
+    }, r = Math.max(((u ?? p ?? 1) - 1) * n + 1, 1), m = Math.min(r + n - 1, s), g = {
+      singular: l.formatMessage(
+        {
+          id: c,
+          defaultMessage: "items"
+        },
+        { count: 1 }
+      ),
+      plural: l.formatMessage(
+        {
+          id: c,
+          defaultMessage: "items"
+        },
+        { count: 2 }
+      )
+    };
+    return /* @__PURE__ */ b(
+      "div",
+      {
+        "data-dd-privacy": "allow",
+        ...M,
+        ref: f,
+        className: E(),
+        "data-unity-slot": "table-pagination",
+        children: [
+          /* @__PURE__ */ e("div", { className: "uy-justify-self-start", children: /* @__PURE__ */ e(
+            "span",
+            {
+              id: `table-pagination-${a}-label`,
+              className: "uy-typography-body uy-text-content-neutral",
+              children: l.formatMessage(
+                {
+                  id: "unity:component:table:pagination:label",
+                  defaultMessage: `${r}-${m} out of ${s * t} items`
+                },
+                {
+                  pageCount: t,
+                  startRow: r,
+                  endRow: m,
+                  totalRows: s * t,
+                  itemLabel: g.plural
+                }
+              )
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "uy-justify-self-center", children: t > 1 && /* @__PURE__ */ e(
+            R,
+            {
+              ...S,
+              "aria-labelledby": `table-pagination-${a}-label`
+            }
+          ) }),
+          /* @__PURE__ */ e("div", { className: "uy-justify-self-end", children: /* @__PURE__ */ b("form", { className: "uy-flex uy-gap-100 uy-items-center", children: [
+            /* @__PURE__ */ e(
+              "label",
+              {
+                className: "uy-shrink-0",
+                id: `table-pagination-${a}-pagesize-label`,
+                htmlFor: `table-pagination-${a}-pagesize-select`,
+                children: l.formatMessage(
+                  {
+                    id: "unity:component:table:pagination:page-size-control-label",
+                    defaultMessage: "Items per page"
+                  },
+                  {
+                    itemLabel: g.plural
+                  }
+                )
+              }
+            ),
+            /* @__PURE__ */ e("div", { className: "uy-grow-0 uy-w-1000", children: /* @__PURE__ */ e(
+              C,
+              {
+                id: `table-pagination-${a}-pagesize-select`,
+                items: h,
+                placeholder: "",
+                value: `${$}`,
+                onChange: (i) => {
+                  const d = parseInt(i, 10);
+                  o == null || o(d), z(d);
+                },
+                "aria-labelledby": `table-pagination-${a}-pagesize-label`,
+                children: (i) => /* @__PURE__ */ e(T, { id: i.value, children: i.label })
+              }
+            ) })
+          ] }) })
+        ]
+      }
+    );
+  }
+);
+k.displayName = "TablePagination";
+export {
+  k as TablePagination,
+  E as tablePagination
+};

package/dist/esm/components/table/parts/TableRow.d.ts

@@ -0,0 +1,40 @@
+import { default as React } from 'react';
+export interface TableRowProps extends React.HTMLAttributes<HTMLTableRowElement> {
+    rowIndex?: number;
+    isSelected?: boolean;
+}
+export declare const tableRow: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], import('tailwind-variants/dist/config.js').TVConfig<unknown, {} | {}>, unknown, unknown, undefined>>;
+/**
+ * The `TableRow` component renders a row in the table, containing cells of data.
+ * It automatically processes its children to add row and column indices and handles selection state.
+ * @param {TableRowProps} props - The props for the `TableRow` component
+ * @param {ReactNode} props.children - The cells to render (typically TableCell components)
+ * @param {number} [props.rowIndex=0] - The index of the row (automatically set by TableBody)
+ * @param {boolean} [props.isSelected] - Whether the row is selected
+ * @example
+ * ```tsx
+ * import { TableRow, TableCell } from '@payfit/unity-components'
+ *
+ * <TableRow>
+ *   <TableCell isRowHeader>John Doe</TableCell>
+ *   <TableCell>john.doe@example.com</TableCell>
+ *   <TableCell>Engineering</TableCell>
+ * </TableRow>
+ * ```
+ * @example
+ * ```tsx
+ * // With selection
+ * import { TableRow, TableCell } from '@payfit/unity-components'
+ *
+ * <TableRow isSelected={true}>
+ *   <TableCell>Selected row content</TableCell>
+ * </TableRow>
+ * ```
+ * @see {@link TableRowProps} for all available props
+ * @see {@link TableCell} for the cell component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table-tablerow--docs|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const TableRow: React.ForwardRefExoticComponent<TableRowProps & React.RefAttributes<HTMLTableRowElement>>;
+export { TableRow };

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

@@ -0,0 +1,46 @@
+import { jsx as d } from "react/jsx-runtime";
+import b, { forwardRef as n, Children as c, cloneElement as f } from "react";
+import { tv as y } from "tailwind-variants";
+const m = y({
+  base: [
+    "uy-group uy-h-500",
+    "uy-bg-surface-neutral uy-border-b uy-border-solid uy-border-b-border-neutral-enabled",
+    "uy-transition-colors uy-duration-200 uy-ease-in-out",
+    "hover:uy-border-b-border-neutral-hover hover:uy-bg-surface-neutral-low-hover",
+    "aria-[selected=true]:uy-bg-surface-neutral-selected aria-[selected=true]:uy-border-b-border-neutral-selected",
+    "focus-visible:uy-outline-2 focus-visible:-uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring"
+  ]
+}), p = n(
+  ({ children: u, rowIndex: o = 0, onKeyDown: r, isSelected: t, ...a }, l) => {
+    const s = c.map(u, (e, i) => b.isValidElement(e) ? f(
+      e,
+      {
+        rowIndex: o,
+        colIndex: i,
+        ...e.props
+      }
+    ) : e);
+    return /* @__PURE__ */ d(
+      "tr",
+      {
+        ref: l,
+        role: "row",
+        className: m(),
+        "aria-rowindex": o + 1,
+        "aria-selected": t,
+        onKeyDown: (e) => {
+          r == null || r(e);
+        },
+        "data-dd-privacy": "mask",
+        "data-selectable": t !== void 0,
+        ...a,
+        children: s
+      }
+    );
+  }
+);
+p.displayName = "TableRow";
+export {
+  p as TableRow,
+  m as tableRow
+};

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

@@ -0,0 +1,11 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { tabsVariant } from './Tabs.variant.js';
+interface TabsContextValue {
+    variant: VariantProps<typeof tabsVariant>['variant'];
+    scrollable: boolean;
+}
+export declare const TabsContext: import('react').Context<TabsContextValue>;
+export declare function TabsProvider({ children, variant, scrollable, }: PropsWithChildren<TabsContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useTabsContext(): TabsContextValue;
+export {};

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

@@ -0,0 +1,24 @@
+import { jsx as n } from "react/jsx-runtime";
+import { createContext as s, useContext as a } from "react";
+const r = s({
+  variant: "primary",
+  scrollable: !1
+});
+function x({
+  children: t,
+  variant: e,
+  scrollable: o
+}) {
+  return /* @__PURE__ */ n(r.Provider, { value: { variant: e, scrollable: o }, children: t });
+}
+function b() {
+  const t = a(r);
+  if (!t)
+    throw new Error("useTabsContext must be used within an TabsProvider");
+  return t;
+}
+export {
+  r as TabsContext,
+  x as TabsProvider,
+  b as useTabsContext
+};

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

@@ -0,0 +1,12 @@
+import { TabsProps as AriaTabsProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+import { tabsVariant } from './Tabs.variant.js';
+export interface TabsProps extends Omit<AriaTabsProps, 'isDisabled' | 'orientation' | 'className' | 'style' | 'disabledKeys' | 'keyboardActivation' | 'slot'>, VariantProps<typeof tabsVariant> {
+    /** set to true to make the tabs scrollable */
+    scrollable?: boolean;
+}
+/**
+ * Tabs allow users to explore and switch between different views.
+ */
+declare const Tabs: import('react').ForwardRefExoticComponent<TabsProps & import('react').RefAttributes<HTMLDivElement>>;
+export { Tabs };

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

@@ -0,0 +1,24 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as e } from "react";
+import { Tabs as f } from "react-aria-components";
+import { TabsProvider as p } from "./Tabs.context.js";
+import { tabsVariant as d } from "./Tabs.variant.js";
+const b = e(
+  ({ children: s, variant: r, scrollable: a = !1, ...m }, t) => {
+    const { base: i } = d({ variant: r, scrollable: a });
+    return /* @__PURE__ */ o(p, { variant: r, scrollable: a, children: /* @__PURE__ */ o(
+      f,
+      {
+        "data-dd-privacy": "allow",
+        ref: t,
+        className: i(),
+        ...m,
+        children: s
+      }
+    ) });
+  }
+);
+b.displayName = "Tabs";
+export {
+  b as Tabs
+};

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

@@ -0,0 +1,139 @@
+export declare const tabsVariant: import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}>, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    base: string;
+    tabList: string;
+    tab: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}, {
+    variant: {
+        primary: {
+            tab: string;
+        };
+        neutral: {
+            tab: string;
+        };
+    };
+    scrollable: {
+        true: {
+            tabList: string;
+        };
+        false: {
+            base: string;
+            tabList: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;

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

@@ -0,0 +1,35 @@
+import { tv as e } from "tailwind-variants";
+const a = e({
+  slots: {
+    base: "uy-w-full",
+    tabList: "uy-flex",
+    tab: [
+      "uy-flex uy-relative uy-shrink-0 uy-gap-100 uy-whitespace-nowrap uy-min-w-[3ch] uy-text-center uy-text-content-form-enabled uy-text-action uy-pt-150 uy-pb-150 uy-pl-200 uy-pr-200 uy-rounded-25 uy-cursor-pointer",
+      'data-[selected]:after:uy-content:" " data-[selected]:after:uy-w-full data-[selected]:after:uy-h-[4px] data-[selected]:after:uy-absolute data-[selected]:after:uy-bottom-[-1px] data-[selected]:after:uy-left-0 data-[selected]:after:uy-right-0',
+      "hover:uy-cursor-pointer focus-visible:uy-outline-2 focus-visible:uy-outline-utility-focus-ring focus-visible:uy-outline-offset-[4px]"
+    ]
+  },
+  variants: {
+    variant: {
+      primary: {
+        tab: "data-[selected]:after:uy-bg-border-form-active"
+      },
+      neutral: {
+        tab: "data-[selected]:after:uy-bg-content-neutral"
+      }
+    },
+    scrollable: {
+      true: {
+        tabList: ""
+      },
+      false: {
+        base: "",
+        tabList: "uy-border-b-[1.25px] uy-border-solid uy-border-b-border-form-enabled"
+      }
+    }
+  },
+  defaultVariants: { variant: "primary", scrollable: !1 }
+});
+export {
+  a as tabsVariant
+};

package/dist/esm/components/tabs/parts/NavigationButton.d.ts

@@ -0,0 +1,7 @@
+import { ButtonProps } from 'react-aria-components';
+type Direction = 'left' | 'right';
+interface NavigationButtonProps extends Pick<ButtonProps, 'onPress'> {
+    direction: Direction;
+}
+declare const NavigationButton: ({ direction, onPress }: NavigationButtonProps) => import("react/jsx-runtime").JSX.Element;
+export { NavigationButton };

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

@@ -0,0 +1,43 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Button as i } from "react-aria-components";
+import { tv as n } from "tailwind-variants";
+import { Icon as a } from "../../icon/Icon.js";
+const s = n({
+  slots: {
+    base: "uy-absolute uy-pt-150 uy-pb-150",
+    button: "uy-rounded-circle hover:uy-text-content-neutral-hover focus-visible:uy-outline-2 focus-visible:uy-outline-offset-2 focus-visible:uy-outline-utility-focus-ring",
+    icon: "uy-text-content-neutral-enabled"
+  },
+  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"
+      },
+      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"
+      }
+    }
+  }
+}), m = ({ direction: t, onPress: u }) => {
+  const { base: o, button: r, icon: l } = s({ direction: t });
+  return /* @__PURE__ */ e("div", { className: o(), children: /* @__PURE__ */ e(
+    i,
+    {
+      id: `scroll-${t}`,
+      className: r(),
+      "aria-label": `Scroll ${t}`,
+      onPress: u,
+      children: /* @__PURE__ */ e(
+        a,
+        {
+          className: l(),
+          "aria-labelledby": `scroll-${t}`,
+          src: t === "left" ? "CaretLeftOutlined" : "CaretRightOutlined"
+        }
+      )
+    }
+  ) });
+};
+export {
+  m as NavigationButton
+};

package/dist/esm/components/tabs/parts/Tab.d.ts

@@ -0,0 +1,9 @@
+import { ReactNode } from 'react';
+import { TabProps as AriaTabProps } from 'react-aria-components';
+export interface TabProps extends Omit<AriaTabProps, 'isDisabled' | 'className' | 'style' | 'download' | 'ping' | 'routerOptions'> {
+    suffix?: ReactNode;
+}
+declare const Tab: import('react').ForwardRefExoticComponent<TabProps & {
+    children?: ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { Tab };