@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/skip-links/SkipLinks.js

@@ -0,0 +1,87 @@
+import { jsxs as y, jsx as t } from "react/jsx-runtime";
+import { forwardRef as l, useId as p } from "react";
+import { uyTv as f } from "@payfit/unity-themes";
+import { Link as m } from "react-aria-components/Link";
+import { FormattedMessage as b } from "react-intl";
+import { link as k } from "../link/RawLink.js";
+const h = f({
+  slots: {
+    base: [
+      "uy:sr-only",
+      "uy:focus-within:p-200",
+      "uy:focus-within:bg-surface-neutral",
+      "uy:focus-within:border-border-neutral uy:focus-within:border-solid uy:focus-within:border-1",
+      "uy:focus-within:shadow-raising",
+      "uy:focus-within:rounded-100",
+      "uy:focus-within:not-sr-only",
+      "uy:focus-within:absolute",
+      "uy:focus-within:top-100",
+      "uy:focus-within:left-100",
+      "uy:focus-within:z-50"
+    ],
+    label: "uy:typography-h4",
+    list: "uy:mt-1 uy:space-y-1 uy:list-none"
+  }
+}), w = l(
+  ({ label: s, className: n, children: e, ...o }, a) => {
+    const r = `skip-links-label-${p()}`;
+    if (!e)
+      return null;
+    const { base: u, label: c, list: d } = h();
+    return /* @__PURE__ */ y(
+      "nav",
+      {
+        "data-dd-privacy": "allow",
+        ...o,
+        ref: a,
+        className: u({ className: n }),
+        role: "navigation",
+        "aria-labelledby": r,
+        "data-unity-component": "SkipLinks",
+        children: [
+          /* @__PURE__ */ t("span", { id: r, className: c(), children: s || /* @__PURE__ */ t(
+            b,
+            {
+              id: "unity:component:skip-links:label",
+              defaultMessage: "Skip to:"
+            }
+          ) }),
+          /* @__PURE__ */ t("ol", { className: d(), children: e })
+        ]
+      }
+    );
+  }
+), g = l(
+  ({ targetId: s, children: n, ...e }, o) => {
+    const { base: a } = k({
+      size: "small",
+      color: "primary",
+      variant: "standalone"
+    });
+    return /* @__PURE__ */ t("li", { children: /* @__PURE__ */ t(
+      m,
+      {
+        ...e,
+        ref: o,
+        className: a(),
+        onPress: () => {
+          const i = document.getElementById(s);
+          i && (i.focus(), i.hasAttribute("tabindex") || (i.setAttribute("tabindex", "-1"), i.addEventListener(
+            "blur",
+            () => {
+              i.removeAttribute("tabindex");
+            },
+            { once: !0 }
+          )));
+        },
+        children: n
+      }
+    ) });
+  }
+);
+w.displayName = "SkipLinks";
+g.displayName = "SkipLink";
+export {
+  g as SkipLink,
+  w as SkipLinks
+};

package/dist/esm/components/spinner/Spinner.d.ts

@@ -0,0 +1,17 @@
+import { HTMLAttributes } from 'react';
+export type SpinnerProps = Pick<HTMLAttributes<HTMLDivElement>, 'aria-hidden' | 'role'> & {
+    /** The label text for the spinner */
+    label: string;
+    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
+    size: 'small' | 'medium';
+    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
+    color?: 'primary' | 'inverted' | 'inherit';
+};
+export declare const Spinner: import('react').ForwardRefExoticComponent<Pick<HTMLAttributes<HTMLDivElement>, "role" | "aria-hidden"> & {
+    /** The label text for the spinner */
+    label: string;
+    /** The size of the spinner, can be 'small' for 16px size or 'medium' for 24px size */
+    size: "small" | "medium";
+    /** Te spinner's color, can be 'primary', 'inverted', or 'inherit', which will make it take the element's `currentColor` */
+    color?: "primary" | "inverted" | "inherit";
+} & import('react').RefAttributes<HTMLDivElement>>;

package/dist/esm/components/spinner/Spinner.js

@@ -0,0 +1,108 @@
+import { jsxs as t, jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+import f from "../../hooks/use-id.js";
+const h = m({
+  slots: {
+    base: "uy:flex uy:flex-col uy:items-center uy:gap-200",
+    indicator: "",
+    label: "uy:typography-body uy:text-left uy:truncate"
+  },
+  variants: {
+    size: {
+      small: {
+        indicator: "uy:w-200 uy:h-200",
+        label: "uy:hidden"
+      },
+      medium: {
+        indicator: "uy:w-300 uy:h-300"
+      }
+    },
+    color: {
+      primary: {
+        indicator: "uy:text-content-primary"
+      },
+      inverted: {
+        indicator: "uy:text-content-inverted",
+        label: "uy:text-content-inverted"
+      },
+      inherit: {
+        indicator: ""
+      }
+    }
+  },
+  defaultVariants: {
+    size: "small",
+    color: "primary"
+  }
+});
+function n({ label: l, color: o, size: e, role: r = "status", ...s }, c) {
+  const a = `spinner-label-${f()}`, {
+    base: d,
+    indicator: y,
+    label: u
+  } = h({
+    size: e,
+    color: o
+  });
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      ...s,
+      ref: c,
+      role: r,
+      className: d(),
+      "aria-labelledby": r === "status" ? a : void 0,
+      "aria-live": "polite",
+      "data-dd-privacy": "allow",
+      children: [
+        /* @__PURE__ */ t(
+          "svg",
+          {
+            viewBox: "0 0 100 100",
+            "aria-hidden": "true",
+            className: y(),
+            children: [
+              /* @__PURE__ */ i("title", { children: "Loading" }),
+              /* @__PURE__ */ i(
+                "circle",
+                {
+                  cx: "50",
+                  cy: "50",
+                  r: "45",
+                  fill: "none",
+                  stroke: "currentColor",
+                  style: {
+                    "--r": "45px",
+                    "--1deg": "calc(2 * pi * var(--r) / 360)",
+                    strokeWidth: "9.6px",
+                    shapeRendering: "geometricPrecision",
+                    strokeDasharray: "calc(40 * var(--1deg)) calc(80 * var(--1deg))",
+                    transformOrigin: "50% 50%",
+                    animation: "arc-shrink 1.4s ease-in-out infinite, spin 2s linear infinite"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ i(
+          "span",
+          {
+            id: a,
+            className: u(),
+            "aria-hidden": e !== "small",
+            children: l
+          }
+        )
+      ]
+    }
+  );
+}
+n.displayName = "Spinner";
+const S = p(
+  n
+);
+export {
+  S as Spinner
+};

package/dist/esm/components/spinner/dynamic-content.d.ts

@@ -0,0 +1,2 @@
+declare const DynamicContent: () => import("react/jsx-runtime").JSX.Element;
+export default DynamicContent;

package/dist/esm/components/spinner/figma/Spinner.figma.d.ts

@@ -0,0 +1,7 @@
+import { default as figma } from 'figma';
+declare const _default: {
+    example: figma.TemplateStringResult;
+    imports: string[];
+    id: string;
+};
+export default _default;

package/dist/esm/components/stepper/Stepper.context.d.ts

@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+interface StepperContextValue {
+    currentStep: number;
+}
+export declare const StepperContext: import('react').Context<StepperContextValue>;
+export declare function StepperProvider({ children, currentStep, }: PropsWithChildren<StepperContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useStepperContext(): StepperContextValue;
+export {};

package/dist/esm/components/stepper/Stepper.d.ts

@@ -0,0 +1,45 @@
+import { HTMLAttributes } from 'react';
+export interface StepperProps extends Pick<HTMLAttributes<HTMLOListElement>, 'aria-label'> {
+    /**
+     * The current step number, it comes from the `useStepper` hook
+     */
+    currentStep: number;
+}
+/**
+ * Use the `Stepper` component to navigate between a discrete number of steps in a linear fashion.
+ *
+ * The `Stepper` defines its list of steps as children using the `Step` component.
+ *
+ * The `Stepper` component is a controlled component by default. You can manage its state using the `useStepper` hook as a companion for this component.
+ *
+ * The type signature for this hook is the following:
+ *
+ * ```ts
+ * interface StepperState {
+ *   currentStep: number
+ *   goNext: () => void
+ *   goPrevious: () => void
+ *   isLastStep: boolean
+ *   isFirstStep: boolean
+ * }
+ * type useStepper = ({initialStep: number, totalSteps: number}) => StepperState
+ * ```
+ *
+ * Where:
+ * - `totalSteps`is the total number of steps in the stepper
+ * - `initialStep` is the index of the step that should be shown on first render
+ *
+ * The returned state provides:
+ * - `currentStep`: The currently active step.
+ * - `goNext`: a callback to trigger navigation to the next step
+ * - `goPrevious`: a callback to go to the previous step
+ * - `isLastStep`: a boolean flag indicating if the current step is the last one
+ * - `isFirstStep`: a boolean flag indicating if the current step is the first one
+ *
+ * Use these state variables to determine the `currenStep` property of the `Stepper` component.
+ *
+ */
+declare const Stepper: import('react').ForwardRefExoticComponent<StepperProps & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLOListElement>>;
+export { Stepper };

package/dist/esm/components/stepper/hooks/useStepper.d.ts

@@ -0,0 +1,12 @@
+export interface StepperState {
+    currentStep: number;
+    goNext: () => void;
+    goPrevious: () => void;
+    isLastStep: boolean;
+    isFirstStep: boolean;
+}
+declare const useStepper: ({ initialStep, totalSteps, }: {
+    initialStep: number;
+    totalSteps: number;
+}) => StepperState;
+export { useStepper };

package/dist/esm/components/stepper/parts/Step.d.ts

@@ -0,0 +1,16 @@
+interface StepProps {
+    /**
+     * The label of the step, displayed under the indicator bar.
+     * It is automatically prefixed with the step number (e.g. `1. Reviewers`).
+     */
+    label: string;
+    /**
+     * The step number used to identify the step among the step list
+     */
+    stepNumber: number;
+}
+/**
+ * The `Step` component is used to display a step belonging to a `Stepper`.
+ */
+declare const Step: import('react').ForwardRefExoticComponent<StepProps & import('react').RefAttributes<HTMLLIElement>>;
+export { Step };

package/dist/esm/components/table/Table.context.d.ts

@@ -0,0 +1,64 @@
+import { default as React, PropsWithChildren } from 'react';
+import { Virtualizer } from '@tanstack/react-virtual';
+import { CellPosition } from './hooks/useTableKeyboardNavigation.js';
+interface TableKeyboardNavigationContextValue {
+    /** The currently focused cell position */
+    focusedCell: CellPosition;
+    /** Check if a specific cell is currently focused */
+    isCellFocused: (rowIndex: number, colIndex: number) => boolean;
+    /** Handle keyboard events on table cells */
+    handleCellKeyDown: (e: React.KeyboardEvent<HTMLTableCellElement>) => void;
+    /** Handle keyboard events on the table element */
+    handleTableKeyDown: (e: React.KeyboardEvent<HTMLTableElement>) => void;
+    /** Handle focus events on the table element */
+    handleTableFocus: (e: React.FocusEvent<HTMLTableElement>) => void;
+    /** Handle focus events on table cells */
+    handleCellFocus: (e: React.FocusEvent<HTMLTableCellElement>) => void;
+    /** Reference to the table element */
+    tableRef: React.RefObject<HTMLTableElement>;
+    /** Focus a specific cell by its row and column indices */
+    focusCell: (rowIndex: number, colIndex: number) => void;
+    /** Focus a specific row by its index */
+    focusRow: (rowIndex: number) => void;
+}
+interface TableContextValue {
+    /** The total number of rows in the table */
+    rowCount: number;
+    /** The total number of columns in the table */
+    columnCount: number;
+    /** Keyboard navigation functionality */
+    keyboardNavigation: TableKeyboardNavigationContextValue;
+    /** Virtualization functionality */
+    virtualizer?: Virtualizer<HTMLDivElement, Element>;
+    /** Enable virtualization */
+    enableVirtualization: boolean;
+}
+/**
+ * React context for the table component.
+ */
+export declare const TableContext: React.Context<TableContextValue>;
+/**
+ * Hook to access the table context.
+ * @example
+ * ```tsx
+ * const { rowCount, columnCount, keyboardNavigation } = useTableContext()
+ * ```
+ */
+export declare function useTableContext(): TableContextValue;
+/**
+ * Provider component for the table context.
+ * This component initializes the keyboard navigation and provides it to all table components.
+ * @param props - The TableContext props
+ * @param props.rowCount - The total number of rows in the table
+ * @param props.columnCount - The total number of columns in the table
+ * @param props.children - The children to render
+ * @see {@link TableContextValue} for available props
+ * @example
+ * ```tsx
+ * <TableContextProvider rowCount={10} columnCount={5}>
+ *   <Table>...</Table>
+ * </TableContextProvider>
+ * ```
+ */
+export declare function TableContextProvider({ children, ...props }: PropsWithChildren<Omit<TableContextValue, 'keyboardNavigation'>>): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/esm/components/table/Table.context.js

@@ -0,0 +1,43 @@
+import { jsx as l } from "react/jsx-runtime";
+import { createContext as i, useContext as r } from "react";
+import { useTableKeyboardNavigation as u } from "./hooks/useTableKeyboardNavigation.js";
+const d = {
+  focusedCell: { rowIndex: 0, colIndex: 0 },
+  isCellFocused: () => !1,
+  handleCellKeyDown: () => {
+  },
+  handleTableKeyDown: () => {
+  },
+  handleTableFocus: () => {
+  },
+  handleCellFocus: () => {
+  },
+  tableRef: { current: null },
+  focusCell: () => {
+  },
+  focusRow: () => {
+  }
+}, c = {
+  rowCount: 0,
+  columnCount: 0,
+  keyboardNavigation: d,
+  enableVirtualization: !1
+}, e = i(c);
+function C() {
+  return r(e);
+}
+function b({
+  children: o,
+  ...t
+}) {
+  const n = u(), a = {
+    ...t,
+    keyboardNavigation: n
+  };
+  return /* @__PURE__ */ l(e.Provider, { value: a, children: o });
+}
+export {
+  e as TableContext,
+  b as TableContextProvider,
+  C as useTableContext
+};

package/dist/esm/components/table/Table.d.ts

@@ -0,0 +1,191 @@
+import { default as React, PropsWithChildren } from 'react';
+import { VariantProps } from '@payfit/unity-themes';
+export interface TableRootProps extends PropsWithChildren {
+    /**
+     * The minimum number of rows to display, affecting the minimum height
+     */
+    minRows?: number;
+    /**
+     * The maximum number of rows to display, affecting the maximum height
+     */
+    maxRows?: number;
+}
+/**
+ * @component
+ * The `TableRoot` component serves as the container for the table and its pagination controls.
+ * It provides styling and layout for the table, including min and max height constraints.
+ * The pagination remains fixed while the table content can scroll horizontally if needed.
+ * @param {TableRootProps} props - The props for the `TableRoot` component
+ * @param {number} [props.minRows=10] - The minimum number of rows to display, affecting the minimum height
+ * @param {number} [props.maxRows=50] - The maximum number of rows to display, affecting the maximum height
+ * @param {ReactNode} props.children - The table and pagination components
+ * @example
+ * ```tsx
+ * import { TableRoot, Table } from '@payfit/unity-components'
+ *
+ * <TableRoot minRows={5} maxRows={20}>
+ *   <Table>
+ *     <TableHeader>...</TableHeader>
+ *     <TableBody>...</TableBody>
+ *   </Table>
+ *   <TablePagination pageCount={5} rowCount={100} rowsPerPage={20} currentPage={1} />
+ * </TableRoot>
+ * ```
+ * @see {@link TableRootProps} for all available props
+ * @see {@link Table} for the table component
+ * @see {@link TablePagination} for the pagination component
+ */
+declare const TableRoot: React.ForwardRefExoticComponent<TableRootProps & React.RefAttributes<HTMLDivElement>>;
+declare const tableVariant: import('tailwind-variants').TVReturnType<{
+    horizontalScroll: {
+        true: {
+            table: string;
+        };
+        false: {
+            wrapper: string;
+            table: string;
+        };
+    };
+    layout: {
+        fixed: {
+            wrapper: string;
+            table: string;
+        };
+        auto: {
+            table: string;
+        };
+    };
+}, {
+    wrapper: string[];
+    table: string[];
+}, undefined, {
+    horizontalScroll: {
+        true: {
+            table: string;
+        };
+        false: {
+            wrapper: string;
+            table: string;
+        };
+    };
+    layout: {
+        fixed: {
+            wrapper: string;
+            table: string;
+        };
+        auto: {
+            table: string;
+        };
+    };
+}, {
+    wrapper: string[];
+    table: string[];
+}, import('tailwind-variants').TVReturnType<{
+    horizontalScroll: {
+        true: {
+            table: string;
+        };
+        false: {
+            wrapper: string;
+            table: string;
+        };
+    };
+    layout: {
+        fixed: {
+            wrapper: string;
+            table: string;
+        };
+        auto: {
+            table: string;
+        };
+    };
+}, {
+    wrapper: string[];
+    table: string[];
+}, undefined, unknown, unknown, undefined>>;
+export interface TableProps extends React.HTMLAttributes<HTMLTableElement> {
+    /**
+     * The label for the table. This is used for accessibility purposes.
+     */
+    label?: string;
+    /**
+     * The description for the table. This is used for accessibility purposes.
+     * ```
+     */
+    description?: string;
+    /**
+     * Enables horizontal scrolling if the table overflows its container. Enabled by default.
+     */
+    isHorizontalScrollEnabled?: boolean;
+    /**
+     * Enable internal scroll virtualization
+     * @default false
+     */
+    enableVirtualization?: boolean;
+    /**
+     * Estimated row height in pixels used by the virtualizer. Default ~40 (uy:h-500)
+     * @default 40
+     */
+    estimatedRowHeight?: number;
+    /**
+     * Number of extra rows rendered above/below the viewport
+     * @default 5
+     */
+    overscan?: number;
+    /**
+     * Controls the table layout algorithm:
+     * - `'auto'` (default): Columns adapt to content. Enables horizontal scrolling. Best for flexible, content-driven tables.
+     * - `'fixed'`: Columns use explicit widths from headers. Disables horizontal scrolling. Best for predictable layouts that fit the container.
+     * @default 'auto'
+     */
+    layout?: VariantProps<typeof tableVariant>['layout'];
+}
+export interface TableImperativeHandler {
+    /**
+     * Scrolls the table contents to the top.
+     */
+    scrollToTop: () => void;
+}
+/**
+ * The `Table` component provides a fully accessible, keyboard-navigable data table with support for row and column headers,
+ * pagination, and empty states. It follows WAI-ARIA grid pattern for accessibility.
+ * The component supports two layout modes:
+ * - **Auto layout** (default): Columns adapt to content with horizontal scrolling enabled
+ * - **Fixed layout**: Explicit column widths that fit the container without horizontal scrolling
+ * @param {TableProps} props - The props for the `Table` component
+ * @example
+ * ```tsx
+ * import { Table, TableRoot, TableHeader, TableBody, TableRow, TableCell, TableColumnHeader } from '@payfit/unity-components'
+ *
+ * <TableRoot>
+ *   <Table label="Employee data" description="List of employees with their details">
+ *     <TableHeader>
+ *       <TableColumnHeader>Name</TableColumnHeader>
+ *       <TableColumnHeader>Position</TableColumnHeader>
+ *       <TableColumnHeader>Department</TableColumnHeader>
+ *     </TableHeader>
+ *     <TableBody>
+ *       <TableRow>
+ *         <TableCell isRowHeader>John Doe</TableCell>
+ *         <TableCell>Developer</TableCell>
+ *         <TableCell>Engineering</TableCell>
+ *       </TableRow>
+ *     </TableBody>
+ *   </Table>
+ * </TableRoot>
+ * ```
+ * @see {@link TableProps} for all available props
+ * @see {@link TableRoot} for the container component
+ * @see {@link TableHeader} for the header component
+ * @see {@link TableBody} for the body component
+ * @see {@link TableRow} for the row component
+ * @see {@link TableCell} for the cell component
+ * @see {@link TableColumnHeader} for the column header component
+ * @see {@link TablePagination} for the pagination component
+ * @see {@link TableEmptyState} for the empty state component
+ * @remarks
+ * {@link https://unity-components.payfit.io/?path=/story/data-table--default|API and Demos} •
+ * {@link https://payfit.design|Design docs}
+ */
+declare const Table: React.ForwardRefExoticComponent<TableProps & React.RefAttributes<TableImperativeHandler>>;
+export { Table, TableRoot };