@payfit/unity-components 2.19.2 → 2.20.0

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

@@ -1,138 +1,76 @@
-import { default as React, ReactNode } from 'react';
-import { ActionBarActionProps } from './parts/ActionBarAction.js';
-export declare const actionBar: import('tailwind-variants').TVReturnType<{
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            selectionArea?: import('tailwind-merge').ClassNameValue;
-            actionArea?: import('tailwind-merge').ClassNameValue;
-            selectionCountText?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {
-    [x: string]: {
-        [x: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            selectionArea?: import('tailwind-merge').ClassNameValue;
-            actionArea?: import('tailwind-merge').ClassNameValue;
-            selectionCountText?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    selectionArea: string[];
-    actionArea: string[];
-    selectionCountText: string[];
-}, undefined, {
-    [key: string]: {
-        [key: string]: import('tailwind-merge').ClassNameValue | {
-            base?: import('tailwind-merge').ClassNameValue;
-            selectionArea?: import('tailwind-merge').ClassNameValue;
-            actionArea?: import('tailwind-merge').ClassNameValue;
-            selectionCountText?: import('tailwind-merge').ClassNameValue;
-        };
-    };
-} | {}, {
-    base: string[];
-    selectionArea: string[];
-    actionArea: string[];
-    selectionCountText: string[];
-}, import('tailwind-variants').TVReturnType<unknown, {
-    base: string[];
-    selectionArea: string[];
-    actionArea: string[];
-    selectionCountText: string[];
-}, undefined, unknown, unknown, undefined>>;
+import { ActionBarProps } from './ActionBar.types.js';
+export type { ActionBarActionItem, ActionBarActionItemBase, ActionBarBaseProps, ActionBarButtonActionItem, ActionBarButtonMeta, ActionBarDynamicProps, ActionBarIconButtonActionItem, ActionBarIconButtonMeta, ActionBarProps, ActionBarStaticProps, } from './ActionBar.types.js';
 /**
- * Action item interface for dynamic API
- * Extends ActionBarActionProps but uses onClick instead of onPress and requires id
- */
-export interface ActionBarActionItem extends Omit<ActionBarActionProps, 'children'> {
-    /** The unique identifier for the action */
-    id: string;
-    /** The label for the action */
-    label: string;
-}
-interface ActionBarBaseProps {
-    /** Unique identifier for the action bar (required for skip links integration) */
-    id?: string;
-    /** Number of selected items */
-    selectionCount: number;
-    /** Callback when selection is cleared */
-    onClearSelection: () => void;
-    /**
-     * Custom text for selection count (optional)
-     */
-    renderSelectionText?: (count: number) => string;
-    /** 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?: () => void;
-    /** Callback when the action bar is blurred */
-    onBlur?: () => void;
-}
-interface ActionBarStaticProps extends ActionBarBaseProps {
-    /** Static ActionBarAction 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;
-/**
- * The ActionBar component provides contextual bulk actions when table rows are selected.
+ * The ActionBar component provides a generic floating toolbar with action buttons.
  * It supports both static (declarative) and dynamic (render prop) APIs for maximum flexibility.
- * @param {ActionBarProps} props - Props for ActionBar including id, selectionCount and onClearSelection
- * @example
+ *
+ * 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, ActionBarAction, ActionBarRoot } from '@payfit/unity-components'
+ * import { ActionBar, ActionBarButton, ActionBarRoot } from '@payfit/unity-components'
  *
- * // Static API with ActionBarAction components
+ * // Static API with ActionBarButton components
  * function StaticExample() {
  *   return (
  *     <ActionBarRoot>
- *       <ActionBar id="table-actions" selectionCount={2} onClearSelection={handleClear}>
- *         <ActionBarAction onPress={handleArchive}>Archive</ActionBarAction>
- *         <ActionBarAction variant="primary" onPress={handleDelete}>Delete</ActionBarAction>
+ *       <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', onPress: handleArchive, label: 'Archive' },
- *     { id: 'delete', onPress: handleDelete, variant: 'primary', label: 'Delete' }
+ *     { 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" selectionCount={2} onClearSelection={handleClear} actions={actions}>
- *         {(action, index) => (
- *           <ActionBarAction key={action.id} {...action}>
- *             {action.label}
- *           </ActionBarAction>
- *         )}
+ *       <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>
  *   )
@@ -140,14 +78,17 @@ export type ActionBarProps = ActionBarStaticProps | ActionBarDynamicProps;
  * ```
  * @remarks
  * - Must be wrapped in ActionBarRoot for proper positioning
- * - Only renders when selectionCount > 0
- * - Static API: pass ActionBarAction components as children
+ * - 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: React.ForwardRefExoticComponent<ActionBarProps & React.RefAttributes<HTMLDivElement>>;
+declare const ActionBar: import('react').ForwardRefExoticComponent<ActionBarProps & import('react').RefAttributes<HTMLDivElement>>;
 export { ActionBar };

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

@@ -1,161 +1,59 @@
-import { jsxs as n, jsx as t } from "react/jsx-runtime";
-import P, { forwardRef as T, useCallback as R, isValidElement as j } from "react";
-import { uyTv as z } from "@payfit/unity-themes";
-import { Toolbar as D, Group as y } from "react-aria-components";
-import { useIntl as S, FormattedMessage as l } from "react-intl";
-import { Button as _ } from "../button/Button.js";
-import { IconButton as E } from "../icon-button/IconButton.js";
-import { Icon as F } from "../icon/Icon.js";
-import { Menu as G } from "../menu/Menu.js";
-import { MenuContent as K } from "../menu/parts/MenuContent.js";
-import { MenuTrigger as L } from "../menu/parts/MenuTrigger.js";
-import { RawMenuItem as O } from "../menu/parts/RawMenuItem.js";
-import { ActionBarAction as U } from "./parts/ActionBarAction.js";
-const V = z({
-  slots: {
-    base: [
-      "uy:bg-surface-inverted uy:text-content-inverted",
-      "uy:rounded-100 uy:shadow-300",
-      "uy:flex uy:items-center uy:gap-100 uy:md:gap-200 uy:py-50 uy:pl-50 uy:md:pl-200 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"
-    ],
-    selectionArea: ["uy:flex uy:items-center uy:gap-100"],
-    actionArea: ["uy:flex uy:items-center uy:gap-100"],
-    selectionCountText: [
-      "uy:typography-body uy:whitespace-nowrap!",
-      "uy:sr-only",
-      "uy:md:not-sr-only"
-    ]
-  }
-}), q = T(
+import { jsxs as e, jsx as i } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { Toolbar as y, Group as M } from "react-aria-components";
+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: d,
-    selectionCount: u,
-    onClearSelection: f,
-    children: r,
-    actions: a,
-    renderSelectionText: c,
-    "aria-label": p,
-    onFocus: b,
-    onBlur: h,
-    ...i
-  }, v) => {
-    const { base: g, selectionArea: x, selectionCountText: A, actionArea: M } = V(), m = S(), s = a !== void 0 && typeof r == "function", k = i["aria-keyshortcuts"] !== void 0, B = p ?? m.formatMessage({
+    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: "Bulk actions toolbar"
-    }), I = R(() => {
-      if (s) {
-        const e = r;
-        return a.map((o, N) => e(o, N));
-      }
-      return r;
-    }, [r, a, s]), w = !!r || "actions" in i && i.actions.length > 0, C = s ? a.filter((e) => e.variant !== "primary") : P.Children.map(r, (e) => {
-      if (!j(e) || e.type !== U)
-        return null;
-      const o = e.props;
-      return o.variant === "primary" ? null : {
-        ...o,
-        id: e.key ?? o.id,
-        onPress: o.onPress,
-        label: o.children,
-        variant: o.variant,
-        prefixIcon: o.prefixIcon
-      };
-    })?.filter(Boolean);
-    return /* @__PURE__ */ n(
-      D,
+      defaultMessage: "Actions toolbar"
+    });
+    return /* @__PURE__ */ e(
+      y,
       {
-        ...i,
-        id: d,
-        ref: v,
-        className: g(),
+        ...a,
+        id: n,
+        ref: u,
+        className: A(),
         "aria-label": B,
         orientation: "horizontal",
         tabIndex: -1,
-        onFocus: b,
-        onBlur: h,
+        onFocus: m,
+        onBlur: f,
         children: [
-          /* @__PURE__ */ n(
-            y,
-            {
-              className: x(),
-              "aria-label": m.formatMessage({
-                id: "unity:component:action-bar:group:label",
-                defaultMessage: "Selection information"
-              }),
-              children: [
-                /* @__PURE__ */ n(
-                  "div",
-                  {
-                    className: A(),
-                    role: "status",
-                    "aria-live": "polite",
-                    "aria-atomic": "true",
-                    children: [
-                      c ? c(u) : /* @__PURE__ */ t(
-                        l,
-                        {
-                          id: "unity:component:action-bar:selection-count-text",
-                          defaultMessage: "{selectionCount, plural, =0 {no items} one {item} other {items}} selected",
-                          values: { selectionCount: u }
-                        }
-                      ),
-                      k && /* @__PURE__ */ t("span", { className: "uy:sr-only", children: /* @__PURE__ */ t(
-                        l,
-                        {
-                          id: "unity:component:action-bar:key-shortcuts-text",
-                          defaultMessage: "Use {keyShortcuts} to focus the action bar",
-                          values: {
-                            keyShortcuts: i["aria-keyshortcuts"]
-                          }
-                        }
-                      ) })
-                    ]
-                  }
-                ),
-                /* @__PURE__ */ t(_, { color: "inverted", variant: "ghost", onPress: f, children: /* @__PURE__ */ t(
-                  l,
-                  {
-                    id: "unity:component:action-bar:clear-selection-button",
-                    defaultMessage: "Clear selection"
-                  }
-                ) })
-              ]
-            }
-          ),
-          w && /* @__PURE__ */ n(
-            y,
+          o && /* @__PURE__ */ i(j, { ariaKeyshortcuts: a["aria-keyshortcuts"], children: o }),
+          h && /* @__PURE__ */ e(
+            M,
             {
-              className: M(),
+              className: d(),
               role: "group",
-              "aria-label": "Available actions",
+              "aria-label": r.formatMessage({
+                id: "unity:component:action-bar:actions:label",
+                defaultMessage: "Available actions"
+              }),
               children: [
-                I(),
-                /* @__PURE__ */ t("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ n(G, { children: [
-                  /* @__PURE__ */ t(L, { asChild: !0, children: /* @__PURE__ */ t(
-                    E,
-                    {
-                      icon: "DotsThreeOutlined",
-                      label: "More actions",
-                      variant: "ghost",
-                      color: "inverted"
-                    }
-                  ) }),
-                  /* @__PURE__ */ t(K, { children: C.map((e) => /* @__PURE__ */ t(
-                    O,
-                    {
-                      onAction: () => {
-                        e.onPress?.({});
-                      },
-                      prefix: e.prefixIcon ? /* @__PURE__ */ t(F, { src: e.prefixIcon, size: 20 }) : void 0,
-                      children: e.label
-                    },
-                    e.id
-                  )) })
-                ] }) })
+                p(),
+                t.length > 0 && /* @__PURE__ */ i(N, { actions: t })
               ]
             }
           )
@@ -164,8 +62,7 @@ const V = z({
     );
   }
 );
-q.displayName = "ActionBar";
+I.displayName = "ActionBar";
 export {
-  q as ActionBar,
-  V as actionBar
+  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
+};