@payfit/unity-components 2.46.11 → 2.46.13

package/dist/esm/components/filter-toolbar/parts/AddFilterItem.d.ts

@@ -1,18 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { ListBoxItemProps } from 'react-aria-components/ListBox';
-export declare const addFilterItem: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, string[], {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, string[], unknown, unknown, undefined>>;
-export interface AddFilterItemProps extends VariantProps<typeof addFilterItem>, ListBoxItemProps {
-}
-/**
- * Internal component that renders individual filter options in the add filter menu.
- * Each item represents a filter that can be added to the toolbar.
- * @param props - AddFilterItem component props
- * @param props.id - Unique identifier for the filter item
- * @param props.children - Label content to display for the filter
- * @internal
- */
-declare const AddFilterItem: {
-    ({ id, children, ...rest }: AddFilterItemProps): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { AddFilterItem };

package/dist/esm/components/filter-toolbar/parts/AddFilterItem.js

@@ -1,18 +0,0 @@
-import { jsx as r } from "react/jsx-runtime";
-import { uyTv as o } from "@payfit/unity-themes";
-import { ListBoxItem as i } from "react-aria-components/ListBox";
-const s = o({
-  base: [
-    "uy:flex uy:items-center uy:gap-100 uy:text-content-neutral uy:typography-body",
-    "uy:px-150 uy:py-100",
-    "uy:rounded-50 uy:cursor-pointer",
-    "uy:hover:bg-surface-neutral-hover",
-    "uy:active:bg-surface-neutral-pressed",
-    "uy:data-[focus-visible]:outline-2 uy:data-[focus-visible]:outline-utility-focus-ring uy:data-[focus-visible]:outline-offset-2"
-  ]
-}), y = ({ id: e, children: t, ...u }) => /* @__PURE__ */ r(i, { className: s(), id: e, ...u, children: t });
-y.displayName = "AddFilterItem";
-export {
-  y as AddFilterItem,
-  s as addFilterItem
-};

package/dist/esm/components/filter-toolbar/utils/filter-adapters.d.ts

@@ -1,93 +0,0 @@
-import { ColumnFiltersState } from '@tanstack/react-table';
-import { AppliedFilter } from '../FilterToolbar.types.js';
-/**
- * Adapters for converting FilterToolbar's AppliedFilter format to and from external formats.
- *
- * Use these adapters to integrate FilterToolbar with other libraries like Tanstack Table.
- * Each adapter provides bidirectional conversion methods.
- * @example
- * ```tsx
- * import { FilterAdapters } from '@payfit/unity-components'
- *
- * // Convert FilterToolbar filters to Tanstack Table format
- * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
- *
- * // Convert Tanstack Table filters back to FilterToolbar format
- * const appliedFilters = FilterAdapters.TanstackTable.fromColumnFilters(columnFilters)
- * ```
- */
-export declare const FilterAdapters: {
-    /**
-     * Adapter for Tanstack Table integration.
-     *
-     * Handles conversion between FilterToolbar's AppliedFilter format and
-     * Tanstack Table's ColumnFiltersState format.
-     * @example
-     * ```tsx
-     * const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([])
-     * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
-     *
-     * const table = useReactTable({
-     *   state: { columnFilters },
-     *   // ... other config
-     * })
-     *
-     * return (
-     *   <>
-     *     <FilterToolbar
-     *       filterDefs={filterDefs}
-     *       initialValue={appliedFilters}
-     *       onChange={setAppliedFilters}
-     *     />
-     *     <DataTable table={table} />
-     *   </>
-     * )
-     * ```
-     * @see {@link https://tanstack.com/table/latest/docs/guide/filters Tanstack Table Filters Documentation}
-     */
-    TanstackTable: {
-        /**
-         * Converts FilterToolbar's AppliedFilter format to Tanstack Table's ColumnFiltersState format.
-         *
-         * This method handles two key transformations:
-         * 1. Filters out empty filters (filters without values) so the table shows all results
-         * 2. Converts Set values to Arrays (React Aria uses Set, Tanstack Table uses Array)
-         * @param appliedFilters - Array of applied filters from FilterToolbar's onChange callback
-         * @returns Column filters compatible with Tanstack Table's state.columnFilters
-         * @remarks
-         * - Empty filters (undefined values or empty Sets) are excluded from the result
-         * - This ensures that adding a filter without selecting values doesn't hide all table rows
-         * - Set values are converted to Arrays for compatibility with Tanstack Table's filter functions
-         * @example
-         * ```tsx
-         * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters([
-         *   { id: 'status', value: new Set(['active', 'pending']) },
-         *   { id: 'department', value: undefined }, // Will be filtered out
-         * ])
-         * // Result: [{ id: 'status', value: ['active', 'pending'] }]
-         * ```
-         */
-        toColumnFilters(appliedFilters: AppliedFilter[]): ColumnFiltersState;
-        /**
-         * Converts Tanstack Table's ColumnFiltersState format to FilterToolbar's AppliedFilter format.
-         *
-         * This is useful when you need to initialize FilterToolbar from existing table state,
-         * URL parameters, or server-side filter state.
-         * @param columnFilters - Column filters from Tanstack Table's state
-         * @returns Array of applied filters compatible with FilterToolbar's initialValue
-         * @remarks
-         * - Array values are converted to Sets for compatibility with React Aria's SelectList
-         * - In most cases, you should make FilterToolbar the source of truth and use toColumnFilters
-         *   to derive table state instead of syncing bidirectionally
-         * @example
-         * ```tsx
-         * // Initialize FilterToolbar from URL params
-         * const urlFilters = parseUrlToColumnFilters(searchParams)
-         * const appliedFilters = FilterAdapters.TanstackTable.fromColumnFilters(urlFilters)
-         *
-         * return <FilterToolbar initialValue={appliedFilters} />
-         * ```
-         */
-        fromColumnFilters(columnFilters: ColumnFiltersState): AppliedFilter[];
-    };
-};

package/dist/esm/components/filter-toolbar/utils/filter-adapters.js

@@ -1,88 +0,0 @@
-const u = {
-  /**
-   * Adapter for Tanstack Table integration.
-   *
-   * Handles conversion between FilterToolbar's AppliedFilter format and
-   * Tanstack Table's ColumnFiltersState format.
-   * @example
-   * ```tsx
-   * const [appliedFilters, setAppliedFilters] = useState<AppliedFilter[]>([])
-   * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters(appliedFilters)
-   *
-   * const table = useReactTable({
-   *   state: { columnFilters },
-   *   // ... other config
-   * })
-   *
-   * return (
-   *   <>
-   *     <FilterToolbar
-   *       filterDefs={filterDefs}
-   *       initialValue={appliedFilters}
-   *       onChange={setAppliedFilters}
-   *     />
-   *     <DataTable table={table} />
-   *   </>
-   * )
-   * ```
-   * @see {@link https://tanstack.com/table/latest/docs/guide/filters Tanstack Table Filters Documentation}
-   */
-  TanstackTable: {
-    /**
-     * Converts FilterToolbar's AppliedFilter format to Tanstack Table's ColumnFiltersState format.
-     *
-     * This method handles two key transformations:
-     * 1. Filters out empty filters (filters without values) so the table shows all results
-     * 2. Converts Set values to Arrays (React Aria uses Set, Tanstack Table uses Array)
-     * @param appliedFilters - Array of applied filters from FilterToolbar's onChange callback
-     * @returns Column filters compatible with Tanstack Table's state.columnFilters
-     * @remarks
-     * - Empty filters (undefined values or empty Sets) are excluded from the result
-     * - This ensures that adding a filter without selecting values doesn't hide all table rows
-     * - Set values are converted to Arrays for compatibility with Tanstack Table's filter functions
-     * @example
-     * ```tsx
-     * const columnFilters = FilterAdapters.TanstackTable.toColumnFilters([
-     *   { id: 'status', value: new Set(['active', 'pending']) },
-     *   { id: 'department', value: undefined }, // Will be filtered out
-     * ])
-     * // Result: [{ id: 'status', value: ['active', 'pending'] }]
-     * ```
-     */
-    toColumnFilters(e) {
-      return e.filter((a) => a.value instanceof Set ? a.value.size > 0 : a.value !== void 0 && a.value !== null).map((a) => ({
-        id: a.id,
-        value: a.value instanceof Set ? Array.from(a.value) : a.value
-      }));
-    },
-    /**
-     * Converts Tanstack Table's ColumnFiltersState format to FilterToolbar's AppliedFilter format.
-     *
-     * This is useful when you need to initialize FilterToolbar from existing table state,
-     * URL parameters, or server-side filter state.
-     * @param columnFilters - Column filters from Tanstack Table's state
-     * @returns Array of applied filters compatible with FilterToolbar's initialValue
-     * @remarks
-     * - Array values are converted to Sets for compatibility with React Aria's SelectList
-     * - In most cases, you should make FilterToolbar the source of truth and use toColumnFilters
-     *   to derive table state instead of syncing bidirectionally
-     * @example
-     * ```tsx
-     * // Initialize FilterToolbar from URL params
-     * const urlFilters = parseUrlToColumnFilters(searchParams)
-     * const appliedFilters = FilterAdapters.TanstackTable.fromColumnFilters(urlFilters)
-     *
-     * return <FilterToolbar initialValue={appliedFilters} />
-     * ```
-     */
-    fromColumnFilters(e) {
-      return e.map((a) => ({
-        id: a.id,
-        value: Array.isArray(a.value) ? new Set(a.value) : a.value
-      }));
-    }
-  }
-};
-export {
-  u as FilterAdapters
-};

package/dist/esm/components/filter-toolbar/utils/normalize-filter-value.d.ts

@@ -1,24 +0,0 @@
-/**
- * Normalizes filter values to serializable formats (string or string array).
- * This ensures filter values can be safely serialized to URLs or JSON.
- * Handles various JavaScript types including primitives, arrays, Sets, Dates, and objects.
- * @param value - The filter value to normalize (can be any type)
- * @returns A string, string array, or undefined
- * @example
- * ```ts
- * // React Aria Selection (Set)
- * normalizeFilterValue(new Set(['apple', 'banana'])) // ['apple', 'banana']
- *
- * // Arrays
- * normalizeFilterValue(['apple', 'banana', 123]) // ['apple', 'banana', '123']
- *
- * // Primitives
- * normalizeFilterValue(42) // '42'
- * normalizeFilterValue('hello') // 'hello'
- *
- * // Objects
- * normalizeFilterValue({ key: 'value' }) // '{"key":"value"}'
- * ```
- * @internal
- */
-export declare function normalizeFilterValue(value: unknown): string | string[] | undefined;

package/dist/esm/components/filter-toolbar/utils/normalize-filter-value.js

@@ -1,19 +0,0 @@
-function i(r) {
-  if (r != null) {
-    if (Array.isArray(r))
-      return r.map((t) => String(t));
-    if (typeof r == "object" && Symbol.iterator in r)
-      return Array.from(r).map((t) => String(t));
-    if (r instanceof Date)
-      return r.toISOString();
-    if (typeof r == "object")
-      return JSON.stringify(r);
-    if (typeof r == "string")
-      return r;
-    if (typeof r == "number" || typeof r == "boolean")
-      return String(r);
-  }
-}
-export {
-  i as normalizeFilterValue
-};

package/dist/esm/components/flex/Flex.d.ts

@@ -1,64 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { flex } from './Flex.variants.js';
-export type FlexContainerVariantProps = VariantProps<typeof flex>;
-type ElementType = 'div' | 'span' | 'section' | 'nav' | 'aside' | 'header' | 'footer' | 'main' | 'article';
-export interface FlexProps {
-    /** Render the flex container as a specific HTML element */
-    asElement?: ElementType;
-    /** Create an inline flex container instead of a block-level container */
-    inline?: FlexContainerVariantProps['inline'];
-    /** Set the main axis direction. Use 'row' for horizontal or 'col' for vertical layout */
-    direction?: FlexContainerVariantProps['direction'];
-    /** Reverse the flow of items along the main axis */
-    isReversed?: FlexContainerVariantProps['isReversed'];
-    /** Control how items wrap when they exceed container size. Use 'wrap', 'wrap-reverse', or 'nowrap' */
-    wrap?: FlexContainerVariantProps['wrap'];
-    /** Add equal spacing between items in both directions */
-    gap?: FlexContainerVariantProps['gap'];
-    /** Add horizontal spacing between items */
-    gapX?: FlexContainerVariantProps['gapX'];
-    /** Add vertical spacing between items */
-    gapY?: FlexContainerVariantProps['gapY'];
-    /** Align items along the main axis. Use 'start', 'center', 'end', 'between', 'around', or 'evenly' */
-    justify?: FlexContainerVariantProps['justify'];
-    /** Align items along the cross axis. Use 'start', 'center', 'end', 'baseline', or 'stretch' */
-    align?: FlexContainerVariantProps['align'];
-    /** Align wrapped lines. Use 'start', 'center', 'end', 'between', 'around', or 'evenly' */
-    alignContent?: FlexContainerVariantProps['alignContent'];
-    /** Add custom classes to the flex container */
-    className?: string;
-    /** The content to be laid out using flexbox */
-    children?: React.ReactNode;
-}
-/**
- * The Flex component provides a powerful and intuitive way to create flexible layouts using CSS Flexbox.
- * Use it to create rows, columns, and complex layouts with precise control over item alignment and spacing.
- *
- * Key features:
- * - Create row or column layouts with the `direction` prop
- * - Control spacing with `gap`, `gapX`, and `gapY` props
- * - Align items with `justify` and `align` props
- * - Control wrapping behavior with the `wrap` prop
- * - Reverse item order with `isReversed`
- *
- * Use `FlexItem` components inside `Flex` to control individual item behavior.
- *
- * > Note: `Flex` and `FlexItem` also export the aliases `Stack` and `StackItem`. We recommend you use `Flex` and `FlexItem` for clarity.
- * @example
- * ```tsx
- * // Create a basic row layout with gap
- * <Flex gap="100">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Flex>
- *
- * // Create a column layout with items centered
- * <Flex direction="col" align="center" justify="center">
- *   <div>Item 1</div>
- *   <div>Item 2</div>
- * </Flex>
- * ```
- */
-export declare const Flex: import('react').ForwardRefExoticComponent<FlexProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexProps> & import('react').RefAttributes<HTMLDivElement>>;
-export declare const Stack: import('react').ForwardRefExoticComponent<FlexProps & Omit<import('react').HTMLAttributes<HTMLElement>, keyof FlexProps> & import('react').RefAttributes<HTMLDivElement>>;
-export {};

package/dist/esm/components/flex/Flex.js

@@ -1,57 +0,0 @@
-import { jsx as E } from "react/jsx-runtime";
-import { forwardRef as M, useMemo as S } from "react";
-import { flex as b } from "./Flex.variants.js";
-const N = M(
-  ({
-    asElement: a = "div",
-    children: d,
-    className: m,
-    inline: o,
-    direction: r,
-    isReversed: e,
-    wrap: f,
-    gap: s,
-    gapX: t,
-    gapY: x,
-    justify: l,
-    align: c,
-    alignContent: F,
-    ...k
-  }, p) => {
-    const u = S(
-      () => b({
-        inline: o,
-        direction: r,
-        isReversed: e,
-        wrap: f,
-        gap: s,
-        gapX: t,
-        gapY: x,
-        justify: l,
-        align: c,
-        alignContent: F,
-        className: m
-      }),
-      [
-        c,
-        F,
-        m,
-        r,
-        s,
-        t,
-        x,
-        o,
-        e,
-        l,
-        f
-      ]
-    );
-    return /* @__PURE__ */ E(a, { ref: p, className: u, ...k, children: d });
-  }
-);
-N.displayName = "Flex";
-const v = N;
-export {
-  N as Flex,
-  v as Stack
-};