@payfit/unity-components 1.2.0 → 2.1.4

package/dist/esm/components/filter-toolbar/hooks/use-filter-toolbar-state.js

@@ -0,0 +1,132 @@
+import { useMemo as u, useReducer as g, useCallback as c } from "react";
+import { normalizeFilterValue as M } from "../utils/normalize-filter-value.js";
+function v(E) {
+  return (r, d) => {
+    switch (d.type) {
+      case "ADD_FILTERS": {
+        const t = new Set(r.appliedFilters);
+        let s = !1;
+        for (const a of d.payload)
+          E.has(a) && !t.has(a) && (t.add(a), s = !0);
+        return s ? { appliedFilters: t, filterValues: r.filterValues } : r;
+      }
+      case "REMOVE_FILTERS": {
+        const t = new Set(r.appliedFilters), s = new Map(r.filterValues);
+        let a = !1;
+        for (const F of d.payload)
+          t.delete(F) && (s.delete(F), a = !0);
+        return a ? { appliedFilters: t, filterValues: s } : r;
+      }
+      case "CLEAR_FILTERS":
+        return { appliedFilters: /* @__PURE__ */ new Set(), filterValues: /* @__PURE__ */ new Map() };
+      case "SET_FILTER_VALUE": {
+        const { filterId: t, value: s } = d.payload;
+        if (!r.appliedFilters.has(t))
+          return r;
+        const a = new Map(r.filterValues);
+        if (s == null) {
+          if (!a.has(t))
+            return r;
+          a.delete(t);
+        } else {
+          if (a.get(t) === s)
+            return r;
+          a.set(t, s);
+        }
+        return {
+          appliedFilters: r.appliedFilters,
+          filterValues: a
+        };
+      }
+      default:
+        return r;
+    }
+  };
+}
+function D(E) {
+  const { filterDefs: r, initialValue: d, onChange: t } = E, s = u(
+    () => new Set(r.map((e) => e.id)),
+    [r]
+  ), a = u(() => {
+    const e = /* @__PURE__ */ new Set(), i = /* @__PURE__ */ new Map();
+    if (d)
+      for (const n of d) {
+        const o = n.id, p = n.value;
+        s.has(o) && (e.add(o), p != null && i.set(o, p));
+      }
+    return { appliedFilters: e, filterValues: i };
+  }, [d, s]), F = u(() => v(s), [s]), [l, V] = g(F, a), S = u(
+    () => Array.from(l.appliedFilters),
+    [l.appliedFilters]
+  ), y = u(() => Array.from(s).filter(
+    (e) => !l.appliedFilters.has(e)
+  ), [s, l.appliedFilters]), L = u(() => {
+    const e = [];
+    for (const i of r)
+      l.appliedFilters.has(i.id) || e.push(i);
+    return e;
+  }, [r, l.appliedFilters]), R = u(() => {
+    const e = l.appliedFilters.size, i = s.size;
+    return e === 0 ? "EMPTY" : i > 0 && e === i ? "WITH_ALL_FILTERS_APPLIED" : "WITH_SOME_FILTERS_APPLIED";
+  }, [l.appliedFilters.size, s.size]), f = c(
+    (e, i) => Array.from(e).map((n) => ({
+      id: n,
+      value: M(i.get(n))
+    })),
+    []
+  ), T = c(
+    (e) => {
+      const i = Array.isArray(e) ? e : [e], n = new Set(l.appliedFilters);
+      let o = !1;
+      for (const p of i)
+        s.has(p) && !n.has(p) && (n.add(p), o = !0);
+      o && (V({ type: "ADD_FILTERS", payload: i }), t && t(f(n, l.filterValues)));
+    },
+    [
+      t,
+      l.appliedFilters,
+      l.filterValues,
+      s,
+      f
+    ]
+  ), m = c(
+    (e) => {
+      const i = Array.isArray(e) ? e : [e], n = new Set(l.appliedFilters);
+      let o = !1;
+      for (const p of i)
+        n.delete(p) && (o = !0);
+      if (o && (V({ type: "REMOVE_FILTERS", payload: i }), t)) {
+        const p = new Map(l.filterValues);
+        for (const A of i)
+          p.delete(A);
+        t(f(n, p));
+      }
+    },
+    [t, l.appliedFilters, l.filterValues, f]
+  ), w = c(() => {
+    l.appliedFilters.size > 0 && (V({ type: "CLEAR_FILTERS" }), t && t([]));
+  }, [t, l.appliedFilters.size]), _ = c(
+    (e, i) => {
+      const n = l.filterValues.get(e), o = i == null, p = l.filterValues.has(e);
+      if (l.appliedFilters.has(e) && (o ? p : n !== i) && (V({ type: "SET_FILTER_VALUE", payload: { filterId: e, value: i } }), t)) {
+        const h = new Map(l.filterValues);
+        o ? h.delete(e) : h.set(e, i), t(f(l.appliedFilters, h));
+      }
+    },
+    [t, l.appliedFilters, l.filterValues, f]
+  );
+  return {
+    status: R,
+    appliedFilters: S,
+    remainingFilters: y,
+    availableFilterDefs: L,
+    filterValues: l.filterValues,
+    addFilter: T,
+    removeFilter: m,
+    clearFilters: w,
+    setFilterValue: _
+  };
+}
+export {
+  D as useFilterToolbarState
+};

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

@@ -0,0 +1,63 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { Selection } from 'react-aria-components';
+import { FilterDef } from '../FilterToolbar.types.js';
+export interface AddFilterProps extends VariantProps<typeof addFilter> {
+    /** Available filter definitions that can be added */
+    availableFilterDefs: FilterDef[];
+    /** Callback invoked when user selects filters to add */
+    onSelectionChange?: (selection: Selection) => void;
+    /** Whether the add filter button is disabled */
+    isDisabled?: boolean;
+}
+declare const addFilter: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
+            listbox?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
+            listbox?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    icon: string[];
+    listbox: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            button?: import('tailwind-merge').ClassNameValue;
+            listbox?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    icon: string[];
+    listbox: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    button: string[];
+    icon: string[];
+    listbox: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Internal component that renders the "Add filter" button and popover menu.
+ * Displays a list of available filters that users can add to the toolbar.
+ * The popover closes automatically when a filter is selected.
+ * @param props - AddFilter component props
+ * @param props.availableFilterDefs - Available filter definitions that can be added
+ * @param props.onSelectionChange - Callback invoked when user selects filters to add
+ * @param props.isDisabled - Whether the add filter button is disabled
+ * @internal
+ */
+declare const AddFilter: {
+    ({ availableFilterDefs, onSelectionChange, isDisabled, ...rest }: AddFilterProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { AddFilter };

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

@@ -0,0 +1,107 @@
+import { jsxs as s, Fragment as y, jsx as e } from "react/jsx-runtime";
+import { useState as g, useRef as h } from "react";
+import { Icon as v } from "@payfit/unity-icons";
+import { uyTv as x } from "@payfit/unity-themes";
+import { Button as F, Popover as N, Dialog as M, ListBox as A } from "react-aria-components";
+import { useIntl as O, FormattedMessage as P } from "react-intl";
+import { filterPopover as w } from "../../filter/parts/FilterPopover.js";
+import { AddFilterItem as I } from "./AddFilterItem.js";
+const S = x({
+  slots: {
+    button: [
+      "uy:flex uy:group uy:items-center",
+      "uy:rounded-sm",
+      "uy:border uy:border-solid",
+      "uy:cursor-pointer uy:data-[disabled=true]:cursor-not-allowed",
+      "uy:w-fit uy:p-100 uy:pl-100 uy:pr-150",
+      "uy:typography-action",
+      "uy:border-border-form-enabled uy:bg-surface-form-enabled uy:text-content-form-enabled",
+      "uy:hover:border-border-form-hover uy:hover:bg-surface-form-hover",
+      "uy:data-[pressed=true]:border-border-form-pressed uy:data-[pressed=true]:bg-surface-form-pressed",
+      "uy:data-[disabled=true]:border-border-form-disabled uy:data-[disabled=true]:bg-surface-form-disabled uy:data-[disabled=true]:text-content-form-disabled",
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    ],
+    icon: [
+      "uy:p-0.25",
+      "uy:text-content-neutral-low",
+      "uy:group-data-[status=active]:text-content-primary-enabled",
+      "uy:group-data-[disabled=true]:text-content-neutral-disabled"
+    ],
+    listbox: ["uy:p-100"]
+  }
+}), j = ({
+  availableFilterDefs: a,
+  onSelectionChange: l,
+  isDisabled: d = !1,
+  ...i
+}) => {
+  const u = O(), [n, r] = g(!1), o = h(null), { popover: c, dialog: f } = w(), { icon: m, button: b, listbox: p } = S();
+  return /* @__PURE__ */ s(y, { children: [
+    /* @__PURE__ */ s(
+      F,
+      {
+        className: b(),
+        ref: o,
+        onPress: () => {
+          r(!0);
+        },
+        isDisabled: d,
+        ...i,
+        children: [
+          /* @__PURE__ */ e(
+            v,
+            {
+              src: "PlusOutlined",
+              role: "presentation",
+              size: 20,
+              className: m()
+            }
+          ),
+          /* @__PURE__ */ e(
+            P,
+            {
+              id: "unity:component:filter-toolbar:add-filter:label",
+              defaultMessage: "Add filter"
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ e(
+      N,
+      {
+        className: c(),
+        triggerRef: o,
+        isOpen: n,
+        onOpenChange: r,
+        placement: "bottom start",
+        children: /* @__PURE__ */ e(
+          M,
+          {
+            className: f(),
+            "aria-label": u.formatMessage({
+              id: "unity:component:filter-toolbar:add-filter:popover:label",
+              defaultMessage: "Select a filter to add"
+            }),
+            children: /* @__PURE__ */ e(
+              A,
+              {
+                className: p(),
+                selectionMode: "single",
+                items: a,
+                onSelectionChange: (t) => {
+                  l?.(t), r(!1);
+                },
+                children: (t) => /* @__PURE__ */ e(I, { id: t.id, children: t.label })
+              }
+            )
+          }
+        )
+      }
+    )
+  ] });
+};
+j.displayName = "AddFilter";
+export {
+  j as AddFilter
+};

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

@@ -0,0 +1,18 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { ListBoxItemProps } from 'react-aria-components';
+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

@@ -0,0 +1,18 @@
+import { jsx as r } from "react/jsx-runtime";
+import { uyTv as o } from "@payfit/unity-themes";
+import { ListBoxItem as i } from "react-aria-components";
+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

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

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

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

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

@@ -1,42 +1,57 @@
-import { jsx as N } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import { flex as k } from "./Flex.variants.js";
-const e = j(
+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: o = "div",
-    children: r,
-    className: t,
-    inline: s,
-    direction: m,
-    isReversed: a,
-    wrap: l,
-    gap: f,
-    gapX: c,
-    gapY: i,
-    justify: n,
-    align: p,
-    alignContent: x,
-    ...d
-  }, y) => {
-    const F = k({
-      inline: s,
-      direction: m,
-      isReversed: a,
-      wrap: l,
-      gap: f,
-      gapX: c,
-      gapY: i,
-      justify: n,
-      align: p,
-      alignContent: x,
-      className: t
-    });
-    return /* @__PURE__ */ N(o, { ref: y, className: F, ...d, children: r });
+    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 });
   }
 );
-e.displayName = "Flex";
-const E = e;
+N.displayName = "Flex";
+const v = N;
 export {
-  e as Flex,
-  E as Stack
+  N as Flex,
+  v as Stack
 };

package/dist/esm/components/form/Form.d.ts

@@ -36,6 +36,8 @@ type FormComponent = {
  * ```bash
  * $ yarn add zod react-hook-form
  * ```
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
  */
 declare const Form: FormComponent;
 export { Form };