@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/adapters/standardSchemaAdapter.d.ts

@@ -0,0 +1,7 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { StandardSchema, StandardSchemaField } from '../types/schema.js';
+export declare class StandardSchemaAdapter implements StandardSchema {
+    private standardSchema;
+    constructor(standardSchema: StandardSchemaV1);
+    getField(path: string): StandardSchemaField | null;
+}

package/dist/esm/adapters/standardSchemaAdapter.js

@@ -0,0 +1,20 @@
+class r {
+  constructor(t) {
+    this.standardSchema = t;
+  }
+  getField(t) {
+    try {
+      return this.standardSchema ? {
+        isOptional: !1,
+        // Default to required - can be enhanced with actual validation logic
+        type: "unknown",
+        shape: void 0
+      } : null;
+    } catch {
+      return null;
+    }
+  }
+}
+export {
+  r as StandardSchemaAdapter
+};

package/dist/esm/adapters/zodAdapter.d.ts

@@ -0,0 +1,13 @@
+import { StandardSchema, StandardSchemaField } from '../types/schema.js';
+import { z as z3 } from 'zod/v3';
+import { z as z4 } from 'zod/v4';
+export declare class ZodV3SchemaAdapter implements StandardSchema {
+    private zodSchema;
+    constructor(zodSchema: z3.ZodObject<z3.ZodRawShape>);
+    getField(path: string): StandardSchemaField | null;
+}
+export declare class ZodV4SchemaAdapter implements StandardSchema {
+    private zodSchema;
+    constructor(zodSchema: z4.ZodObject<z4.ZodRawShape>);
+    getField(path: string): StandardSchemaField | null;
+}

package/dist/esm/adapters/zodAdapter.js

@@ -0,0 +1,74 @@
+import { z as c } from "zod/v3";
+import { z as p } from "zod/v4";
+class u {
+  constructor(n) {
+    this.zodSchema = n;
+  }
+  getField(n) {
+    try {
+      if (!this.zodSchema) return null;
+      const a = n.split(".");
+      let r = this.zodSchema.shape, e;
+      for (let t = 0; t < a.length; t++) {
+        const l = a[t];
+        if (e = r[l], !e) return null;
+        if (t < a.length - 1) {
+          const i = e instanceof c.ZodOptional ? e._def.innerType.shape : e.shape;
+          if (!i) return null;
+          r = i;
+        }
+      }
+      const s = e instanceof c.ZodOptional, o = s ? e._def.innerType : e;
+      return {
+        isOptional: s,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        type: o._def?.typeName || "unknown",
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        shape: o instanceof c.ZodObject ? (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          o.shape
+        ) : void 0
+      };
+    } catch {
+      return null;
+    }
+  }
+}
+class m {
+  constructor(n) {
+    this.zodSchema = n;
+  }
+  getField(n) {
+    try {
+      if (!this.zodSchema) return null;
+      const a = n.split(".");
+      let r = this.zodSchema.shape, e;
+      for (let t = 0; t < a.length; t++) {
+        const l = a[t];
+        if (e = r[l], !e) return null;
+        if (t < a.length - 1) {
+          const i = e instanceof p.ZodOptional ? e.def.innerType.shape : e.shape;
+          if (!i) return null;
+          r = i;
+        }
+      }
+      const s = e instanceof p.ZodOptional, o = s ? e.def.innerType : e;
+      return {
+        isOptional: s,
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment, @typescript-eslint/no-explicit-any, @typescript-eslint/no-unsafe-member-access
+        type: o.def?.typeName || "unknown",
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        shape: o instanceof p.ZodObject ? (
+          // eslint-disable-next-line @typescript-eslint/no-explicit-any
+          o.shape
+        ) : void 0
+      };
+    } catch {
+      return null;
+    }
+  }
+}
+export {
+  u as ZodV3SchemaAdapter,
+  m as ZodV4SchemaAdapter
+};

package/dist/esm/components/action-bar/ActionBar.d.ts

@@ -0,0 +1,94 @@
+import { ActionBarProps } from './ActionBar.types.js';
+export type { ActionBarActionItem, ActionBarActionItemBase, ActionBarBaseProps, ActionBarButtonActionItem, ActionBarButtonMeta, ActionBarDynamicProps, ActionBarIconButtonActionItem, ActionBarIconButtonMeta, ActionBarProps, ActionBarStaticProps, } from './ActionBar.types.js';
+/**
+ * The ActionBar component provides a generic floating toolbar with action buttons.
+ * It supports both static (declarative) and dynamic (render prop) APIs for maximum flexibility.
+ *
+ * The component can render both regular buttons (`ActionBarButton`) and icon-only buttons
+ * (`ActionBarIconButton`) based on the `type` discriminator in action items.
+ * @param {ActionBarProps} props - Props for ActionBar
+ * @example Static API
+ * ```tsx
+ * import { ActionBar, ActionBarButton, ActionBarRoot } from '@payfit/unity-components'
+ *
+ * // Static API with ActionBarButton components
+ * function StaticExample() {
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar id="toolbar">
+ *         <ActionBarButton onPress={handleArchive}>Archive</ActionBarButton>
+ *         <ActionBarButton variant="primary" onPress={handleDelete}>Delete</ActionBarButton>
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ * ```
+ * @example Static API with prefix content
+ * ```tsx
+ * // Static API with prefixContent
+ * function WithPrefixContent() {
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar
+ *         id="table-actions"
+ *         prefixContent={<SelectionInfo count={2} onClear={handleClear} />}
+ *       >
+ *         <ActionBarButton onPress={handleArchive}>Archive</ActionBarButton>
+ *         <ActionBarButton variant="primary" onPress={handleDelete}>Delete</ActionBarButton>
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ * ```
+ * @example Dynamic API
+ * ```tsx
+ * // Dynamic API with actions array and render function
+ * function DynamicExample() {
+ *   const actions = [
+ *     { id: 'archive', label: 'Archive', meta: { onPress: handleArchive } },
+ *     { id: 'delete', label: 'Delete', variant: 'primary', meta: { onPress: handleDelete } },
+ *     { id: 'settings', label: 'Settings', type: 'icon-button', meta: { icon: 'GearOutlined', onPress: handleSettings } },
+ *   ]
+ *
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar id="table-actions" actions={actions}>
+ *         {(action) => {
+ *           if (action.type === 'icon-button') {
+ *             return (
+ *               <ActionBarIconButton
+ *                 key={action.id}
+ *                 icon={action.meta.icon}
+ *                 label={action.label}
+ *                 variant={action.variant}
+ *                 onPress={action.meta.onPress}
+ *               />
+ *             )
+ *           }
+ *           return (
+ *             <ActionBarButton key={action.id} variant={action.variant} {...action.meta}>
+ *               {action.label}
+ *             </ActionBarButton>
+ *           )
+ *         }}
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Must be wrapped in ActionBarRoot for proper positioning
+ * - Use `prefixContent` to render custom content on the left side (e.g., selection info)
+ * - Static API: pass ActionBarButton/ActionBarIconButton components as children
+ * - Dynamic API: provide actions array and render function as children
+ * - Actions support `type: 'button'` (default) or `type: 'icon-button'` for icon-only buttons
+ * - All action-specific props (onPress, prefixIcon, icon, isDisabled, isLoading) go in the `meta` object
+ * - Includes proper ARIA labels and live regions for accessibility
+ * @see {@link ActionBarProps} for all available props
+ * @see {@link ActionBarActionItem} for action item structure
+ * @see Source code in [Github](https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar)
+ * @see Design specs [Figma](https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library)
+ * @see Design docs in [Payfit.design](https://www.payfit.design/)
+ */
+declare const ActionBar: import('react').ForwardRefExoticComponent<ActionBarProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ActionBar };

package/dist/esm/components/action-bar/ActionBar.js

@@ -0,0 +1,69 @@
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { Group as y } from "react-aria-components/Group";
+import { Toolbar as M } from "react-aria-components/Toolbar";
+import { useIntl as x } from "react-intl";
+import { actionBar as v } from "./ActionBar.variants.js";
+import { useActionBarState as w } from "./hooks/use-action-bar-state.js";
+import { ActionBarOverflowMenu as N } from "./parts/ActionBarOverflowMenu.js";
+import { ActionBarPrefixArea as j } from "./parts/ActionBarPrefixArea.js";
+const I = g(
+  ({
+    id: n,
+    prefixContent: o,
+    children: s,
+    actions: l,
+    "aria-label": c,
+    onFocus: m,
+    onBlur: f,
+    forceExpandMobile: b = !1,
+    ...a
+  }, u) => {
+    const r = x(), { base: A, actionArea: d } = v({
+      hasPrefixContent: !!o
+    }), { renderActions: p, mobileOverflowActions: t, hasActions: h } = w({
+      actions: l,
+      children: s,
+      forceExpandMobile: b
+    }), B = c ?? r.formatMessage({
+      id: "unity:component:action-bar:toolbar-label",
+      defaultMessage: "Actions toolbar"
+    });
+    return /* @__PURE__ */ e(
+      M,
+      {
+        ...a,
+        id: n,
+        ref: u,
+        className: A(),
+        "aria-label": B,
+        orientation: "horizontal",
+        tabIndex: -1,
+        onFocus: m,
+        onBlur: f,
+        children: [
+          o && /* @__PURE__ */ i(j, { ariaKeyshortcuts: a["aria-keyshortcuts"], children: o }),
+          h && /* @__PURE__ */ e(
+            y,
+            {
+              className: d(),
+              role: "group",
+              "aria-label": r.formatMessage({
+                id: "unity:component:action-bar:actions:label",
+                defaultMessage: "Available actions"
+              }),
+              children: [
+                p(),
+                t.length > 0 && /* @__PURE__ */ i(N, { actions: t })
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+I.displayName = "ActionBar";
+export {
+  I as ActionBar
+};

package/dist/esm/components/action-bar/ActionBar.types.d.ts

@@ -0,0 +1,116 @@
+import { FocusEventHandler, ReactNode } from 'react';
+import { ActionBarButtonProps } from './parts/ActionBarButton.js';
+import { ActionBarIconButtonProps } from './parts/ActionBarIconButton.js';
+/**
+ * Base interface for action items shared between button and icon-button types
+ */
+export interface ActionBarActionItemBase {
+    /** The unique identifier for the action */
+    id: string;
+    /** The label for the action */
+    label: string;
+    /** The visual variant of the action */
+    variant?: 'primary' | 'secondary';
+}
+/**
+ * Meta props for button action type
+ */
+export type ActionBarButtonMeta = Omit<ActionBarButtonProps, 'variant'>;
+/**
+ * Meta props for icon-button action type
+ */
+export type ActionBarIconButtonMeta = Omit<ActionBarIconButtonProps, 'variant' | 'label'>;
+/**
+ * Action item for button type (default)
+ */
+export interface ActionBarButtonActionItem extends ActionBarActionItemBase {
+    /** Type discriminator - defaults to 'button' if omitted */
+    type?: 'button';
+    /** Meta properties for the button */
+    meta?: ActionBarButtonMeta;
+}
+/**
+ * Action item for icon-button type
+ */
+export interface ActionBarIconButtonActionItem extends ActionBarActionItemBase {
+    /** Type discriminator - required for icon-button */
+    type: 'icon-button';
+    /** Meta properties for the icon button (icon is required) */
+    meta: ActionBarIconButtonMeta;
+}
+/**
+ * Union type for action items supporting both button and icon-button types
+ * @example
+ * ```typescript
+ * // Button action (type can be omitted)
+ * const buttonAction: ActionBarActionItem = {
+ *   id: 'archive',
+ *   label: 'Archive',
+ *   variant: 'secondary',
+ *   meta: {
+ *     onPress: () => console.log('Archive'),
+ *     prefixIcon: 'FileArchiveOutlined',
+ *   }
+ * }
+ *
+ * // Icon-button action
+ * const iconButtonAction: ActionBarActionItem = {
+ *   id: 'delete',
+ *   label: 'Delete',
+ *   type: 'icon-button',
+ *   variant: 'primary',
+ *   meta: {
+ *     icon: 'TrashOutlined',
+ *     onPress: () => console.log('Delete'),
+ *   }
+ * }
+ * ```
+ */
+export type ActionBarActionItem = ActionBarButtonActionItem | ActionBarIconButtonActionItem;
+interface ActionBarBaseProps {
+    /** Unique identifier for the action bar (required for skip links integration) */
+    id?: string;
+    /**
+     * Optional content to render on the left side of the toolbar (e.g., selection info)
+     */
+    prefixContent?: ReactNode;
+    /** ARIA label for the toolbar */
+    'aria-label'?: string;
+    /** ARIA keyshortcuts for the action bar */
+    'aria-keyshortcuts'?: string;
+    /** Callback when the action bar is focused */
+    onFocus?: FocusEventHandler<HTMLDivElement>;
+    /** Callback when the action bar is blurred */
+    onBlur?: FocusEventHandler<HTMLDivElement>;
+    /**
+     * Force all actions to render in mobile view instead of collapsing them into dropdown menu
+     * @default false
+     */
+    forceExpandMobile?: boolean;
+}
+interface ActionBarStaticProps extends ActionBarBaseProps {
+    /** Static ActionBarButton components */
+    children?: ReactNode;
+    /** Actions prop is not allowed with static API */
+    actions?: never;
+}
+interface ActionBarDynamicProps extends ActionBarBaseProps {
+    /** Array of action items */
+    actions: ActionBarActionItem[];
+    /** Render function that receives action and index */
+    children: (action: ActionBarActionItem, index: number) => ReactNode;
+}
+/**
+ * Represents the props for an ActionBar component, which can be either static or dynamic.
+ *
+ * This type is a union of `ActionBarStaticProps` and `ActionBarDynamicProps`, allowing
+ * flexibility in specifying the props for the ActionBar depending on its behavior.
+ *
+ * Use `ActionBarStaticProps` when the ActionBar requires fixed, unchanging properties,
+ * and utilize `ActionBarDynamicProps` for scenarios where the properties need to be
+ * dynamic or state-dependent.
+ * @see {@link ActionBarStaticProps} for static API props
+ * @see {@link ActionBarDynamicProps} for dynamic API props
+ */
+export type ActionBarProps = ActionBarStaticProps | ActionBarDynamicProps;
+export type { ActionBarStaticProps, ActionBarDynamicProps, ActionBarBaseProps };

package/dist/esm/components/action-bar/ActionBar.variants.d.ts

@@ -0,0 +1,31 @@
+export declare const actionBar: import('tailwind-variants').TVReturnType<{
+    hasPrefixContent: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    prefixArea: string[];
+    actionArea: string[];
+}, undefined, {
+    hasPrefixContent: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    prefixArea: string[];
+    actionArea: string[];
+}, import('tailwind-variants').TVReturnType<{
+    hasPrefixContent: {
+        true: {
+            base: string;
+        };
+    };
+}, {
+    base: string[];
+    prefixArea: string[];
+    actionArea: string[];
+}, undefined, unknown, unknown, undefined>>;

package/dist/esm/components/action-bar/ActionBar.variants.js

@@ -0,0 +1,26 @@
+import { uyTv as u } from "@payfit/unity-themes";
+const t = u({
+  slots: {
+    base: [
+      "uy:bg-surface-inverted uy:text-content-inverted",
+      "uy:rounded-150 uy:md:rounded-100 uy:shadow-300",
+      "uy:flex uy:items-center uy:gap-200 uy:md:gap-200 uy:py-50 uy:pl-50 uy:pr-50",
+      "uy:transition-all uy:duration-200",
+      "uy:max-w-full uy:min-w-0 uy:w-fit",
+      // Ensure responsive behavior
+      "uy:focus-visible:outline-2 uy:focus-visible:outline-solid uy:focus-visible:outline-offset-2 uy:focus-visible:outline-utility-focus-ring"
+    ],
+    prefixArea: ["uy:flex uy:items-center uy:gap-100"],
+    actionArea: ["uy:flex uy:items-center uy:gap-100"]
+  },
+  variants: {
+    hasPrefixContent: {
+      true: {
+        base: "uy:pl-200"
+      }
+    }
+  }
+});
+export {
+  t as actionBar
+};

package/dist/esm/components/action-bar/hooks/use-action-bar-state.d.ts

@@ -0,0 +1,19 @@
+import { ReactNode } from 'react';
+import { ActionBarActionItem, ActionBarButtonActionItem } from '../ActionBar.types.js';
+interface UseActionBarStateOptions {
+    actions?: ActionBarActionItem[];
+    children?: ReactNode | ((action: ActionBarActionItem, index: number) => ReactNode);
+    forceExpandMobile?: boolean;
+}
+interface UseActionBarStateResult {
+    /** Whether using dynamic API (actions array + render function) */
+    isDynamicApi: boolean;
+    /** Whether there are any actions to render */
+    hasActions: boolean;
+    /** Render function for visible actions */
+    renderActions: () => ReactNode;
+    /** Actions to show in mobile overflow menu */
+    mobileOverflowActions: ActionBarButtonActionItem[];
+}
+export declare const useActionBarState: ({ actions, children, forceExpandMobile, }: UseActionBarStateOptions) => UseActionBarStateResult;
+export {};

package/dist/esm/components/action-bar/hooks/use-action-bar-state.js

@@ -0,0 +1,22 @@
+import A, { useCallback as l, isValidElement as y, useMemo as c } from "react";
+import { useBreakpointListener as k, isMobileBreakpoint as v } from "../../../hooks/use-breakpoint-listener.js";
+import { extractMobileActionsFromArray as B, extractMobileActionsFromChildren as b } from "../utils/action-bar-helpers.js";
+const _ = ({
+  actions: r,
+  children: t,
+  forceExpandMobile: o = !1
+}) => {
+  const a = k(), i = v(a), e = r !== void 0 && typeof t == "function", m = e ? r.length > 0 : !!t, u = l(() => {
+    if (e) {
+      const n = t;
+      return (i && !o ? r.filter((s) => s.variant === "primary") : r).map((s, f) => n(s, f));
+    }
+    return i && !o ? A.Children.toArray(t).filter(
+      (n) => y(n) && n.props.variant === "primary"
+    ) : t;
+  }, [e, i, o, t, r]), p = c(() => o ? [] : e ? B(r) : b(t), [e, o, r, t]);
+  return { isDynamicApi: e, hasActions: m, renderActions: u, mobileOverflowActions: p };
+};
+export {
+  _ as useActionBarState
+};

package/dist/esm/components/action-bar/parts/ActionBarButton.d.ts

@@ -0,0 +1,58 @@
+import { ButtonProps } from '../../button/Button.js';
+export type ActionBarButtonProps = Omit<ButtonProps, 'variant' | 'size' | 'color' | 'type'> & {
+    /**
+     * The visual variant of the button.
+     * @default 'secondary'
+     */
+    variant?: 'primary' | 'secondary';
+};
+/**
+ * @deprecated Use ActionBarButtonProps instead
+ */
+export type ActionBarActionProps = ActionBarButtonProps;
+/**
+ * The ActionBarButton component represents an individual button action within an ActionBar.
+ * It renders as a button with appropriate styling for the inverted ActionBar context.
+ * @param {ActionBarButtonProps} props - Props for the button. Identical to the `Button` component props.
+ * @example
+ * ```tsx
+ * import { ActionBarButton } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ActionBarButton
+ *       variant="primary"
+ *       onPress={() => console.log('Button clicked')}
+ *       prefixIcon="TrashOutlined"
+ *     >
+ *       Delete Items
+ *     </ActionBarButton>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically uses inverted button variants to work on dark ActionBar background
+ * - Secondary buttons use 'ghost-inverted' button variant
+ * - Primary buttons use 'inverted-primary' button variant
+ * @see {@link ActionBarButtonProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ */
+declare const ActionBarButton: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "type" | "variant"> & {
+    /**
+     * The visual variant of the button.
+     * @default 'secondary'
+     */
+    variant?: "primary" | "secondary";
+} & import('react').RefAttributes<HTMLButtonElement>>;
+/**
+ * @deprecated Use ActionBarButton instead
+ */
+declare const ActionBarAction: import('react').ForwardRefExoticComponent<Omit<ButtonProps, "size" | "color" | "type" | "variant"> & {
+    /**
+     * The visual variant of the button.
+     * @default 'secondary'
+     */
+    variant?: "primary" | "secondary";
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { ActionBarButton, ActionBarAction };

package/dist/esm/components/action-bar/parts/ActionBarButton.js

@@ -0,0 +1,35 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { Button as m } from "../../button/Button.js";
+const o = s(
+  ({ variant: r = "secondary", children: n, onPress: a, ...i }, c) => {
+    const t = {
+      primary: {
+        variant: "primary",
+        color: "inverted"
+      },
+      secondary: {
+        variant: "ghost",
+        color: "inverted"
+      }
+    }[r];
+    return /* @__PURE__ */ e(
+      m,
+      {
+        ref: c,
+        variant: t.variant,
+        color: t.color,
+        onPress: a,
+        size: "default",
+        ...i,
+        children: n
+      }
+    );
+  }
+);
+o.displayName = "ActionBarButton";
+const l = o;
+export {
+  l as ActionBarAction,
+  o as ActionBarButton
+};

package/dist/esm/components/action-bar/parts/ActionBarIconButton.d.ts

@@ -0,0 +1,61 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { IconButtonProps } from '../../icon-button/IconButton.js';
+export interface ActionBarIconButtonProps {
+    /**
+     * The icon to display inside the button.
+     */
+    icon: UnityIcon;
+    /**
+     * The label for accessibility. This is used as the aria-label and shown in a tooltip.
+     */
+    label: string;
+    /**
+     * The visual variant of the button.
+     * @default 'secondary'
+     */
+    variant?: 'primary' | 'secondary';
+    /**
+     * Callback fired when the button is pressed.
+     */
+    onPress?: IconButtonProps['onPress'];
+    /**
+     * Whether the button is disabled.
+     * @default false
+     */
+    isDisabled?: boolean;
+    /**
+     * Whether the button is in a loading state.
+     * @default false
+     */
+    isLoading?: boolean;
+}
+/**
+ * The ActionBarIconButton component represents an icon-only button action within an ActionBar.
+ * It renders as an icon button with appropriate styling for the inverted ActionBar context.
+ * @param {ActionBarIconButtonProps} props - Props for the icon button.
+ * @example
+ * ```tsx
+ * import { ActionBarIconButton } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ActionBarIconButton
+ *       icon="TrashOutlined"
+ *       label="Delete items"
+ *       variant="primary"
+ *       onPress={() => console.log('Delete clicked')}
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Automatically uses inverted icon button variants to work on dark ActionBar background
+ * - The label prop is required for accessibility and is shown in a tooltip on hover
+ * - Secondary icon buttons are hidden on mobile viewports (overflow menu handles them)
+ * - Primary icon buttons remain visible on all screen sizes
+ * @see {@link ActionBarIconButtonProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/action-bar GitHub}
+ * @see Design specs {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library Figma}
+ */
+declare const ActionBarIconButton: import('react').ForwardRefExoticComponent<ActionBarIconButtonProps & import('react').RefAttributes<HTMLButtonElement>>;
+export { ActionBarIconButton };