@payfit/unity-components 2.0.0 → 2.1.4

package/dist/esm/components/filter/hooks/useFilterValue.js

@@ -0,0 +1,31 @@
+import { useMemo as l } from "react";
+import { isIterable as s } from "../utils/value-formatters.js";
+function d(t, e, r) {
+  return l(() => {
+    if (t == null || t === "")
+      return {
+        valuesCount: 0,
+        shouldShowBadge: !1,
+        formattedValue: null
+      };
+    let o;
+    if (s(t)) {
+      if (o = Array.from(t).length, o === 0)
+        return {
+          valuesCount: 0,
+          shouldShowBadge: !1,
+          formattedValue: null
+        };
+    } else
+      o = 1;
+    const u = !isNaN(e) && o > e, n = u ? null : r(t);
+    return {
+      valuesCount: o,
+      shouldShowBadge: u,
+      formattedValue: n
+    };
+  }, [t, e, r]);
+}
+export {
+  d as useFilterValue
+};

package/dist/esm/components/filter/parts/FilterButton.d.ts

@@ -0,0 +1,75 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { ReactNode } from 'react';
+/**
+ * Tailwind variants for the FilterButton component.
+ * @internal
+ */
+export declare const filterButton: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            prefix?: import('tailwind-merge').ClassNameValue;
+            button?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            prefix?: import('tailwind-merge').ClassNameValue;
+            button?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    prefix: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            prefix?: import('tailwind-merge').ClassNameValue;
+            button?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    button: string[];
+    prefix: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    button: string[];
+    prefix: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Props for the FilterButton component.
+ * @internal
+ */
+export interface FilterButtonProps {
+    /**
+     * The ID of the label element that labels this button.
+     */
+    labelId: string;
+    /**
+     * Optional icon to display before the label.
+     */
+    prefixIcon?: UnityIcon;
+    /**
+     * Whether the button is disabled.
+     */
+    isDisabled: boolean;
+    /**
+     * The label content to display inside the button.
+     */
+    children: ReactNode;
+}
+/**
+ * Internal component that renders the main filter trigger button.
+ * This component wraps the filter label in an interactive button that opens
+ * the filter popover when pressed. It supports an optional prefix icon and
+ * maintains proper accessibility attributes.
+ * The button uses the Actionable component from Unity for consistent
+ * interaction states (hover, pressed, focus, disabled).
+ * @param props - The FilterButton props
+ * @param props.labelId - The ID of the label element that labels this button.
+ * @param props.prefixIcon - Optional icon to display before the label.
+ * @param props.isDisabled - Whether the button is disabled.
+ * @param props.children - The label content to display inside the button.
+ * @returns The rendered button element
+ * @internal
+ */
+export declare function FilterButton({ labelId, prefixIcon, isDisabled, children, }: FilterButtonProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/filter/parts/FilterButton.js

@@ -0,0 +1,55 @@
+import { jsxs as u, jsx as e } from "react/jsx-runtime";
+import { Icon as l } from "@payfit/unity-icons";
+import { uyTv as s } from "@payfit/unity-themes";
+import { Actionable as p } from "../../actionable/Actionable.js";
+const y = s({
+  slots: {
+    button: [
+      "uy:flex uy:gap-0.5 uy:items-center",
+      "uy:focus-visible:outline-none",
+      // spacing based on children
+      "uy:py-1",
+      "uy:pl-1.5 uy:has-data-[unity-slot=prefix]:pl-1",
+      "uy:pr-0"
+    ],
+    prefix: [
+      "uy:p-0.25",
+      "uy:text-content-neutral-low",
+      "uy:group-data-[status=active]:text-content-primary-enabled",
+      "uy:group-aria-[disabled=true]:text-content-neutral-disabled"
+    ]
+  }
+});
+function x({
+  labelId: o,
+  prefixIcon: t,
+  isDisabled: r,
+  children: a
+}) {
+  const { button: i, prefix: n } = y();
+  return /* @__PURE__ */ u(
+    p,
+    {
+      className: i(),
+      "aria-labelledby": o,
+      isDisabled: r,
+      "aria-haspopup": "dialog",
+      children: [
+        t && /* @__PURE__ */ e("span", { "data-unity-slot": "prefix", className: n(), children: /* @__PURE__ */ e(
+          l,
+          {
+            src: t,
+            size: 20,
+            role: "presentation",
+            color: "inherit"
+          }
+        ) }),
+        a
+      ]
+    }
+  );
+}
+export {
+  x as FilterButton,
+  y as filterButton
+};

package/dist/esm/components/filter/parts/FilterLabel.d.ts

@@ -0,0 +1,96 @@
+/**
+ * Tailwind variants for the FilterLabel component.
+ * @internal
+ */
+export declare const filterLabel: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            value?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            value?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
+    value: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            container?: import('tailwind-merge').ClassNameValue;
+            value?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
+    value: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    container: string[];
+    value: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Props for the FilterLabel component.
+ * @internal
+ */
+export interface FilterLabelProps {
+    /**
+     * The ID for the label element (for accessibility).
+     */
+    labelId: string;
+    /**
+     * The ID for the value element (for accessibility).
+     */
+    valueId: string;
+    /**
+     * The label text to display.
+     */
+    label: string;
+    /**
+     * The current filter value.
+     */
+    value: unknown;
+    /**
+     * The number of selected values.
+     */
+    valuesCount: number;
+    /**
+     * Whether to show a badge with the count instead of the formatted value.
+     */
+    shouldShowBadge: boolean;
+    /**
+     * The formatted string representation of the value.
+     */
+    formattedValue: string | null;
+    /**
+     * Maximum number of values to display before showing a badge.
+     */
+    maxVisibleValues: number;
+    /**
+     * Whether the filter is disabled.
+     */
+    isDisabled: boolean;
+}
+/**
+ * Internal component that renders the filter's label and value display.
+ * This component handles the display logic for showing either:
+ * - The formatted value (when count is within threshold)
+ * - A badge with the count (when count exceeds threshold)
+ * The label text is always visible and marked with `data-dd-privacy="allow"`,
+ * while the value is masked with `data-dd-privacy="mask"` for data privacy.
+ * @param props - The FilterLabel props
+ * @param props.labelId - The ID for the label element (for accessibility).
+ * @param props.valueId - The ID for the value element (for accessibility).
+ * @param props.label - The label text to display.
+ * @param props.valuesCount - The number of selected values.
+ * @param props.formattedValue - The formatted string representation of the value.
+ * @param props.maxVisibleValues - Maximum number of values to display before showing a badge.
+ * @param props.isDisabled - Whether the filter is disabled.
+ * @returns The rendered label element
+ * @internal
+ */
+export declare function FilterLabel({ labelId, valueId, label, valuesCount, formattedValue, maxVisibleValues, isDisabled, }: FilterLabelProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/filter/parts/FilterLabel.js

@@ -0,0 +1,57 @@
+import { jsxs as a, jsx as s } from "react/jsx-runtime";
+import { uyTv as p } from "@payfit/unity-themes";
+import { FormattedMessage as y } from "react-intl";
+import { Badge as m } from "../../badge/Badge.js";
+const h = p({
+  slots: {
+    container: [
+      "uy:typography-action",
+      "uy:flex uy:gap-0.25 uy:items-baseline"
+    ],
+    value: [
+      "uy:whitespace-nowrap uy:overflow-hidden uy:max-w-[20ch] uy:text-ellipsis"
+    ]
+  }
+});
+function g({
+  labelId: n,
+  valueId: t,
+  label: o,
+  valuesCount: e,
+  formattedValue: l,
+  maxVisibleValues: r,
+  isDisabled: i
+}) {
+  const { container: c, value: d } = h(), u = e > 0 && e <= r && l;
+  return /* @__PURE__ */ a("div", { id: n, className: c(), children: [
+    /* @__PURE__ */ a("span", { "data-dd-privacy": "allow", children: [
+      o,
+      u && /* @__PURE__ */ a("span", { "data-dd-privacy": "mask", className: d(), id: t, children: [
+        ": ",
+        l
+      ] })
+    ] }),
+    !isNaN(r) && e > r && /* @__PURE__ */ a(
+      m,
+      {
+        variant: i ? "neutral" : "numeric",
+        className: "uy:h-300",
+        children: [
+          e,
+          /* @__PURE__ */ s("span", { className: "uy:sr-only", id: t, children: /* @__PURE__ */ s(
+            y,
+            {
+              id: "unity:component:filter:label:values-count",
+              defaultMessage: "{count, plural, =0 {no values} one {value} other {values}} selected",
+              values: { count: e }
+            }
+          ) })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  g as FilterLabel,
+  h as filterLabel
+};

package/dist/esm/components/filter/parts/FilterPopover.d.ts

@@ -0,0 +1,95 @@
+import { ReactNode } from 'react';
+/**
+ * Tailwind variants for the FilterPopover component.
+ * @internal
+ */
+export declare const filterPopover: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            dialog?: import('tailwind-merge').ClassNameValue;
+            footer?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            popover?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            dialog?: import('tailwind-merge').ClassNameValue;
+            footer?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            popover?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    popover: string[];
+    dialog: string[];
+    content: string[];
+    footer: string[];
+    separator: string[];
+    actions: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            dialog?: import('tailwind-merge').ClassNameValue;
+            footer?: import('tailwind-merge').ClassNameValue;
+            separator?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            popover?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    popover: string[];
+    dialog: string[];
+    content: string[];
+    footer: string[];
+    separator: string[];
+    actions: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    popover: string[];
+    dialog: string[];
+    content: string[];
+    footer: string[];
+    separator: string[];
+    actions: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * Props for the FilterPopover component.
+ * @internal
+ */
+export interface FilterPopoverProps {
+    /**
+     * The content to render inside the popover (the filter control).
+     */
+    children: ReactNode;
+    /**
+     * Callback invoked when the "Apply" button is pressed.
+     */
+    onConfirm: () => void;
+    /**
+     * Callback invoked when the "Clear" button is pressed.
+     */
+    onClear: () => void;
+}
+/**
+ * Internal component that renders the filter's popover dialog.
+ * This component provides the popover container that appears when the filter
+ * button is clicked. It includes:
+ * - A content area for the custom filter control (passed as children)
+ * - A footer with two action buttons: "Clear" (danger) and "Apply" (primary)
+ * - Smooth animations for opening/closing
+ * - Proper positioning relative to the trigger
+ * The popover is controlled by React Aria's DialogTrigger in the parent component.
+ * @param props - The FilterPopover props
+ * @param props.children - The content to render inside the popover (the filter control).
+ * @param props.onConfirm - Callback invoked when the "Apply" button is pressed.
+ * @param props.onClear - Callback invoked when the "Clear" button is pressed.
+ * @returns The rendered popover element
+ * @internal
+ */
+export declare function FilterPopover({ children, onConfirm, onClear, }: FilterPopoverProps): import("react/jsx-runtime").JSX.Element;

package/dist/esm/components/filter/parts/FilterPopover.js

@@ -0,0 +1,79 @@
+import { jsx as t, jsxs as a } from "react/jsx-runtime";
+import { uyTv as m } from "@payfit/unity-themes";
+import { Popover as c, Dialog as g, Separator as f } from "react-aria-components";
+import { FormattedMessage as e } from "react-intl";
+import { Button as r } from "../../button/Button.js";
+const x = m({
+  slots: {
+    popover: [
+      "uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-sm uy:shadow-floating uy:min-w-[320px] uy:max-w-[800px] uy:relative uy:isolate uy:overflow-hidden",
+      "uy:transition-all uy:duration-200 uy:linear uy:data-[entering]:opacity-100 uy:data-[exiting]:opacity-0",
+      'uy:data-[entering]:data-[placement="bottom"]:-translate-y-100 uy:data-[entering]:data-[placement="bottom"]:translate-x-0 uy:data-[exiting]:data-[placement="bottom"]:translate-y-0',
+      'uy:data-[entering]:data-[placement="top"]:translate-y-100 uy:data-[entering]:data-[placement="top"]:translate-x-0 uy:data-[exiting]:data-[placement="top"]:translate-y-0',
+      'uy:data-[entering]:data-[placement="left"]:translate-x-100 uy:data-[entering]:data-[placement="left"]:translate-y-0 uy:data-[exiting]:data-[placement="left"]:translate-x-0',
+      'uy:data-[entering]:data-[placement="right"]:-translate-x-100 uy:data-[entering]:data-[placement="right"]:translate-y-0 uy:data-[exiting]:data-[placement="right"]:translate-y-0'
+    ],
+    dialog: ["uy:flex uy:flex-col uy:gap-0"],
+    content: ["uy:flex-1 uy:max-h-[500px] uy:overflow-y-auto"],
+    footer: [
+      "uy:mx-100 uy:mb-100",
+      "uy:sticky uy:bottom-0 uy:z-2",
+      "uy:flex-0",
+      "uy:bg-surface-neutral"
+    ],
+    separator: ["uy:mb-100 uy:bg-border-neutral uy:h-px"],
+    actions: ["uy:flex uy:justify-between uy:gap-100"]
+  }
+});
+function P({
+  children: n,
+  onConfirm: o,
+  onClear: l
+}) {
+  const { popover: i, dialog: u, content: y, footer: s, separator: d, actions: p } = x();
+  return /* @__PURE__ */ t(c, { className: i(), placement: "bottom left", children: /* @__PURE__ */ a(g, { className: u(), children: [
+    /* @__PURE__ */ t("div", { className: y(), children: n }),
+    /* @__PURE__ */ a("footer", { className: s(), children: [
+      /* @__PURE__ */ t(f, { className: d() }),
+      /* @__PURE__ */ a("div", { className: p(), children: [
+        /* @__PURE__ */ t(
+          r,
+          {
+            variant: "ghost",
+            color: "danger",
+            size: "full",
+            prefixIcon: "TrashOutlined",
+            onPress: l,
+            children: /* @__PURE__ */ t(
+              e,
+              {
+                id: "unity:component:common:clear:title",
+                defaultMessage: "Clear"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          r,
+          {
+            variant: "ghost",
+            color: "primary",
+            size: "full",
+            onPress: o,
+            children: /* @__PURE__ */ t(
+              e,
+              {
+                id: "unity:component:filter:action:apply",
+                defaultMessage: "Apply"
+              }
+            )
+          }
+        )
+      ] })
+    ] })
+  ] }) });
+}
+export {
+  P as FilterPopover,
+  x as filterPopover
+};

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

@@ -0,0 +1,62 @@
+/**
+ * Type guard to check if a value is a composite (non-null object).
+ * This utility determines whether a value is an object type that can contain
+ * properties or be iterable, excluding primitive types and null.
+ * @param value - The value to check
+ * @returns `true` if the value is a non-null object, `false` otherwise
+ * @example
+ * ```ts
+ * isCompositeValue({}) // true
+ * isCompositeValue([]) // true
+ * isCompositeValue(null) // false
+ * isCompositeValue("string") // false
+ * isCompositeValue(123) // false
+ * ```
+ * @internal
+ */
+export declare function isCompositeValue<TType>(value: TType): value is TType & object;
+/**
+ * Type guard to check if a value implements the Iterable protocol.
+ * This utility determines whether a value can be iterated over using
+ * `for...of` loops or spread operators. Common iterable types include
+ * arrays, Maps, Sets, and strings.
+ * @param value - The value to check
+ * @returns `true` if the value is iterable, `false` otherwise
+ * @example
+ * ```ts
+ * isIterable([1, 2, 3]) // true
+ * isIterable(new Set([1, 2])) // true
+ * isIterable(new Map()) // true
+ * isIterable("hello") // true
+ * isIterable({}) // false
+ * isIterable(123) // false
+ * ```
+ * @internal
+ */
+export declare function isIterable<TType>(value: TType): value is TType & Iterable<unknown>;
+/**
+ * Default renderer for filter values that converts any value to a string representation.
+ * This utility provides a sensible default for displaying filter values in the UI.
+ * For primitive values, it returns their string representation. For iterable values
+ * (arrays, Sets, Maps, etc.), it joins all items with a comma and space.
+ * @param value - The value to render as a string
+ * @returns A string representation of the value
+ * @example
+ * ```ts
+ * // Primitive values
+ * defaultRenderLabel("active") // "active"
+ * defaultRenderLabel(42) // "42"
+ * defaultRenderLabel(true) // "true"
+ *
+ * // Iterable values
+ * defaultRenderLabel(["apple", "banana"]) // "apple, banana"
+ * defaultRenderLabel(new Set([1, 2, 3])) // "1, 2, 3"
+ *
+ * // Edge cases
+ * defaultRenderLabel(null) // "null"
+ * defaultRenderLabel(undefined) // "undefined"
+ * defaultRenderLabel([]) // ""
+ * ```
+ * @internal
+ */
+export declare function defaultRenderLabel(value: unknown): string;

package/dist/esm/components/filter/utils/value-formatters.js

@@ -0,0 +1,14 @@
+function t(r) {
+  return r !== null && typeof r == "object";
+}
+function n(r) {
+  return t(r) && Symbol.iterator in r;
+}
+function i(r) {
+  return !t(r) || !n(r) ? String(r) : Array.from(r).join(", ");
+}
+export {
+  i as defaultRenderLabel,
+  t as isCompositeValue,
+  n as isIterable
+};

package/dist/esm/components/filter-toolbar/FilterToolbar.d.ts

@@ -0,0 +1,110 @@
+import { FilterToolbarProps } from './FilterToolbar.types.js';
+/**
+ * Tailwind variants for the FilterToolbar component styling.
+ * Defines layout slots for the toolbar container, filters area, and action buttons.
+ * @internal
+ */
+export declare const filterToolbar: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            filters?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            filters?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    filters: string[];
+    actions: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            filters?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string[];
+    filters: string[];
+    actions: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string[];
+    filters: string[];
+    actions: string[];
+}, undefined, unknown, unknown, undefined>>;
+/**
+ * The FilterToolbar component manages a dynamic collection of filters in a toolbar layout, enabling users to build complex filtering UIs.
+ * The FilterToolbar provides a data-driven approach to filter management where filters can be added, configured,
+ * and removed on demand. Each filter maintains its own state while the toolbar orchestrates the overall filtering experience.
+ * @param {FilterToolbarProps} props - Configuration for the filter toolbar including filter definitions and event handlers
+ * @example
+ * ```tsx
+ * import { FilterToolbar } from '@payfit/unity-components'
+ * import { useState } from 'react'
+ *
+ * function Example() {
+ *   const [filters, setFilters] = useState([])
+ *
+ *   const filterDefs = [
+ *     {
+ *       id: 'status',
+ *       label: 'Status',
+ *       renderControl: (value, onChange) => (
+ *         <Select value={value} onChange={onChange}>
+ *           <Option value="active">Active</Option>
+ *           <Option value="inactive">Inactive</Option>
+ *         </Select>
+ *       ),
+ *       renderLabel: (value) => value
+ *     },
+ *     {
+ *       id: 'department',
+ *       label: 'Department',
+ *       renderControl: (value, onChange) => (
+ *         <Select value={value} onChange={onChange}>
+ *           <Option value="engineering">Engineering</Option>
+ *           <Option value="sales">Sales</Option>
+ *         </Select>
+ *       ),
+ *       renderLabel: (value) => value
+ *     }
+ *   ]
+ *
+ *   return (
+ *     <FilterToolbar
+ *       filterDefs={filterDefs}
+ *       onChange={(appliedFilters) => {
+ *         setFilters(appliedFilters)
+ *       }}
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The toolbar manages filter state internally, providing serializable filter values through the `onChange` callback
+ * - Filters can be prepopulated using the `initialValue` prop with an array of `AppliedFilter` objects
+ * - Each filter definition must include a unique `id`, `label`, and `renderControl` function to render the filter UI
+ * - The `renderLabel` function customizes how selected values appear in the filter button
+ * - Newly added filters automatically open their popover to guide users through configuration
+ * - All filters can be cleared at once using the "Clear filters" button
+ * - The component is uncontrolled by default but notifies parent components of state changes via callbacks
+ * @see {@link FilterToolbarProps} for all available props
+ * @see {@link FilterDef} for filter definition structure
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/filter-toolbar GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=8976-10418 Figma}
+ * @see Design docs in {@link https://www.payfit.design/24f360409/p/998c5f-filter Payfit.design}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/data-filtertoolbar--docs unity-components.payfit.io}
+ */
+declare const FilterToolbar: import('react').ForwardRefExoticComponent<FilterToolbarProps & import('react').RefAttributes<HTMLDivElement>>;
+export { FilterToolbar };
+export * from './utils/filter-adapters.js';
+export type * from './FilterToolbar.types.js';