@payfit/unity-components 2.46.11 → 2.46.13

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

@@ -1,87 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

@@ -1,108 +0,0 @@
-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

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

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

@@ -1,7 +0,0 @@
-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

@@ -1,8 +0,0 @@
-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

@@ -1,45 +0,0 @@
-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

@@ -1,12 +0,0 @@
-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

@@ -1,16 +0,0 @@
-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

@@ -1,64 +0,0 @@
-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

@@ -1,43 +0,0 @@
-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

@@ -1,191 +0,0 @@
-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 };