@payfit/unity-components 3.1.13 → 3.1.15

package/dist/esm/ai-kit.js

@@ -2,4 +2,6 @@ import { aiGradientEffect as e, aiGradientSurfaceEffect as t } from "./modules/a
 import { AIButton as n } from "./modules/ai-kit/components/ai-button/AIButton.js";
 import { PayfitAIBrand as r } from "./modules/ai-kit/components/payfit-ai-brand/PayfitAIBrand.js";
 import { AITriggerButton as i } from "./modules/ai-kit/components/ai-trigger-button/AITriggerButton.js";
-export { n as AIButton, i as AITriggerButton, r as PayfitAIBrand, e as aiGradientEffect, t as aiGradientSurfaceEffect };
+import { AIComposerAttachment as a } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAttachment.js";
+import { AIComposerAttachmentsGroup as o } from "./modules/ai-kit/components/ai-composer/parts/AIComposerAttachmentsGroup.js";
+export { n as AIButton, a as AIComposerAttachment, o as AIComposerAttachmentsGroup, i as AITriggerButton, r as PayfitAIBrand, e as aiGradientEffect, t as aiGradientSurfaceEffect };

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

@@ -0,0 +1,98 @@
+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
+ * - Uses `role="toolbar"` to expose the toolbar semantics to assistive technologies
+ * - Groups related actions with `role="group"` inside the toolbar
+ * - Provide a concise `aria-label` when the default "Actions toolbar" label is not specific enough
+ * - Supports keyboard navigation between actions with Tab and the left and right arrow keys
+ * @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/core/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/core/components/action-bar/ActionBar.js

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

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

@@ -0,0 +1,19 @@
+import { uyTv as e } from "@payfit/unity-themes";
+//#region src/core/components/action-bar/ActionBar.variants.ts
+var t = e({
+	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",
+			"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" } } }
+});
+//#endregion
+export { t as actionBar };

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

@@ -0,0 +1,32 @@
+import { isMobileBreakpoint as e, useBreakpointListener as t } from "../../../hooks/use-breakpoint-listener.js";
+import { extractMobileActionsFromArray as n, extractMobileActionsFromChildren as r } from "../utils/action-bar-helpers.js";
+import i, { isValidElement as a, useCallback as o, useMemo as s } from "react";
+//#region src/core/components/action-bar/hooks/use-action-bar-state.ts
+var c = ({ actions: c, children: l, forceExpandMobile: u = !1 }) => {
+	let d = e(t()), f = c !== void 0 && typeof l == "function";
+	return {
+		isDynamicApi: f,
+		hasActions: f ? c.length > 0 : !!l,
+		renderActions: o(() => {
+			if (f) {
+				let e = l;
+				return (d && !u ? c.filter((e) => e.variant === "primary") : c).map((t, n) => e(t, n));
+			}
+			return d && !u ? i.Children.toArray(l).filter((e) => a(e) && e.props.variant === "primary") : l;
+		}, [
+			f,
+			d,
+			u,
+			l,
+			c
+		]),
+		mobileOverflowActions: s(() => u ? [] : f ? n(c) : r(l), [
+			f,
+			u,
+			c,
+			l
+		])
+	};
+};
+//#endregion
+export { c as useActionBarState };

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

@@ -0,0 +1,44 @@
+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';
+};
+/**
+ * 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/core/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, "color" | "size" | "type" | "variant"> & {
+    /**
+     * The visual variant of the button.
+     * @default 'secondary'
+     */
+    variant?: "primary" | "secondary";
+} & import('react').RefAttributes<HTMLButtonElement>>;
+export { ActionBarButton };

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

@@ -0,0 +1,28 @@
+import { Button as e } from "../../button/Button.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/action-bar/parts/ActionBarButton.tsx
+var r = t(({ variant: t = "secondary", children: r, onPress: i, ...a }, o) => {
+	let s = {
+		primary: {
+			variant: "primary",
+			color: "inverted"
+		},
+		secondary: {
+			variant: "ghost",
+			color: "inverted"
+		}
+	}[t];
+	return /* @__PURE__ */ n(e, {
+		ref: o,
+		variant: s.variant,
+		color: s.color,
+		onPress: i,
+		size: "default",
+		...a,
+		children: r
+	});
+});
+r.displayName = "ActionBarButton";
+//#endregion
+export { r as ActionBarButton };

package/dist/esm/core/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/core/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 };

package/dist/esm/core/components/action-bar/parts/ActionBarIconButton.js

@@ -0,0 +1,29 @@
+import { IconButton as e } from "../../icon-button/IconButton.js";
+import { forwardRef as t } from "react";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/action-bar/parts/ActionBarIconButton.tsx
+var r = t(({ icon: t, label: r, variant: i = "secondary", onPress: a, isDisabled: o = !1, isLoading: s = !1 }, c) => {
+	let l = {
+		primary: {
+			variant: "primary",
+			color: "inverted"
+		},
+		secondary: {
+			variant: "ghost",
+			color: "inverted"
+		}
+	}[i];
+	return /* @__PURE__ */ n(e, {
+		ref: c,
+		icon: t,
+		label: r,
+		variant: l.variant,
+		color: l.color,
+		onPress: a,
+		isDisabled: o,
+		isLoading: s
+	});
+});
+r.displayName = "ActionBarIconButton";
+//#endregion
+export { r as ActionBarIconButton };

package/dist/esm/core/components/action-bar/parts/ActionBarOverflowMenu.js

@@ -0,0 +1,39 @@
+import { Icon as e } from "../../icon/Icon.js";
+import { IconButton as t } from "../../icon-button/IconButton.js";
+import { Menu as n } from "../../menu/Menu.js";
+import { MenuContent as r } from "../../menu/parts/MenuContent.js";
+import { MenuTrigger as i } from "../../menu/parts/MenuTrigger.js";
+import { RawMenuItem as a } from "../../menu/parts/RawMenuItem.js";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+import { useIntl as c } from "react-intl";
+//#region src/core/components/action-bar/parts/ActionBarOverflowMenu.tsx
+var l = ({ actions: l }) => /* @__PURE__ */ o("div", {
+	className: "uy:block uy:md:hidden",
+	children: /* @__PURE__ */ s(n, { children: [/* @__PURE__ */ o(i, {
+		asChild: !0,
+		children: /* @__PURE__ */ o(t, {
+			icon: "DotsThreeOutlined",
+			label: c().formatMessage({
+				id: "unity:component:action-bar:actions:more-actions",
+				defaultMessage: "More actions"
+			}),
+			variant: "ghost",
+			color: "inverted"
+		})
+	}), /* @__PURE__ */ o(r, { children: l.map((t) => {
+		let n = t.meta;
+		return /* @__PURE__ */ o(a, {
+			isDisabled: n?.isDisabled,
+			onAction: () => {
+				n?.onPress?.({});
+			},
+			prefix: n?.prefixIcon ? /* @__PURE__ */ o(e, {
+				src: n.prefixIcon,
+				size: 20
+			}) : void 0,
+			children: t.label
+		}, t.id);
+	}) })] })
+});
+//#endregion
+export { l as ActionBarOverflowMenu };

package/dist/esm/core/components/action-bar/parts/ActionBarPrefixArea.js

@@ -0,0 +1,24 @@
+import { actionBar as e } from "../ActionBar.variants.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { Group as r } from "react-aria-components/Group";
+import { useIntl as i } from "react-intl";
+//#region src/core/components/action-bar/parts/ActionBarPrefixArea.tsx
+var a = ({ children: a, ariaKeyshortcuts: o }) => {
+	let s = i(), { prefixArea: c } = e();
+	return /* @__PURE__ */ n(r, {
+		className: c(),
+		"aria-label": s.formatMessage({
+			id: "unity:component:action-bar:group:label",
+			defaultMessage: "Toolbar information"
+		}),
+		children: [a, o && /* @__PURE__ */ t("span", {
+			className: "uy:sr-only",
+			children: s.formatMessage({
+				id: "unity:component:action-bar:key-shortcuts-text",
+				defaultMessage: "Use {keyShortcuts} to focus the action bar"
+			}, { keyShortcuts: o })
+		})]
+	});
+};
+//#endregion
+export { a as ActionBarPrefixArea };

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

@@ -0,0 +1,67 @@
+import { PropsWithChildren } from 'react';
+export declare const actionBarRoot: import('tailwind-variants').TVReturnType<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+    position: {
+        absolute: string[];
+        fixed: string[];
+    };
+}, undefined, string[], {
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+    position: {
+        absolute: string[];
+        fixed: string[];
+    };
+}, undefined, import('tailwind-variants').TVReturnTypeLike<{
+    isVisible: {
+        true: string[];
+        false: string[];
+    };
+    position: {
+        absolute: string[];
+        fixed: string[];
+    };
+}, undefined>>;
+export interface ActionBarRootProps extends PropsWithChildren {
+    /** Offset from the bottom of the table. It uses Unity's standard spacing tokens. */
+    offsetBottom?: '$25' | '$50' | '$75' | '$100' | '$125' | '$200' | '$300' | '$400' | '$500' | '$600' | '$800' | '$1000' | number;
+    /**
+     * Control the visibility of the Action bar root, which will in turn hide and show the action bar
+     * @default false
+     */
+    isVisible?: boolean;
+    /**
+     * The positioning mode to use:
+     * - `absolute` will place the root at the bottom-center of the closest parent with `position: relative`
+     * - `fixed` will place the root at the bottom-center of the viewport
+     * @default "absolute"
+     */
+    position?: 'absolute' | 'fixed';
+}
+/**
+ * The ActionBarRoot component provides positioning context for ActionBar components.
+ * It positions the ActionBar absolutely within a table container.
+ * @param {ActionBarRootProps} props - The props for the ActionBarRoot component
+ * @example
+ * ```tsx
+ * import { ActionBarRoot, ActionBar } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ActionBarRoot>
+ *       <ActionBar selectionCount={2} onClearSelection={handleClear}>
+ *       </ActionBar>
+ *     </ActionBarRoot>
+ *   )
+ * }
+ * ```
+ * @see {@link ActionBarRootProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/action-bar GitHub}
+ */
+declare const ActionBarRoot: import('react').ForwardRefExoticComponent<ActionBarRootProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ActionBarRoot };

package/dist/esm/core/components/action-bar/parts/ActionBarRoot.js

@@ -0,0 +1,44 @@
+import { forwardRef as e } from "react";
+import { uyTv as t } from "@payfit/unity-themes";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/core/components/action-bar/parts/ActionBarRoot.tsx
+var r = t({
+	base: [
+		"uy:left-1/2 uy:-translate-x-1/2 uy:z-10",
+		"uy:duration-200 uy:ease-out",
+		"uy:bottom-[calc(var(--uy-spacing-200)+var(--uy-spacing-offset-bottom))]",
+		"uy:starting:opacity-0"
+	],
+	variants: {
+		isVisible: {
+			true: ["uy:animate-slide-up-fade-in"],
+			false: [
+				"uy:animate-slide-down-fade-out",
+				"uy:pointer-events-none",
+				"uy:opacity-0",
+				"uy:translate-y-10"
+			]
+		},
+		position: {
+			absolute: ["uy:absolute"],
+			fixed: ["uy:fixed"]
+		}
+	}
+}), i = e(({ children: e, offsetBottom: t = 0, isVisible: i = !1, position: a = "absolute", ...o }, s) => {
+	let c = typeof t == "number" ? t : t.replace("$", ""), l = typeof t == "number" ? `calc(var(--uy-spacing)*${c})` : `var(--uy-spacing-${c})`;
+	return /* @__PURE__ */ n("div", {
+		ref: s,
+		className: r({
+			isVisible: i,
+			position: a
+		}),
+		...o,
+		style: { "--uy-spacing-offset-bottom": l },
+		tabIndex: -1,
+		inert: i ? void 0 : "",
+		children: e
+	});
+});
+i.displayName = "ActionBarRoot";
+//#endregion
+export { i as ActionBarRoot, r as actionBarRoot };

package/dist/esm/core/components/action-bar/utils/action-bar-helpers.js

@@ -0,0 +1,24 @@
+import { ActionBarButton as e } from "../parts/ActionBarButton.js";
+import { ActionBarIconButton as t } from "../parts/ActionBarIconButton.js";
+import n, { isValidElement as r } from "react";
+//#region src/core/components/action-bar/utils/action-bar-helpers.ts
+var i = (e) => e.filter((e) => e.variant !== "primary"), a = (i) => {
+	let a = [];
+	return n.Children.toArray(i).forEach((n) => {
+		if (!r(n) || n.type !== e && n.type !== t) return;
+		let i = n.props;
+		if (i.variant === "primary") return;
+		let o = n.type === t ? i.label : i.children, s = n.type === t ? i.icon : i.prefixIcon;
+		a.push({
+			id: n.key ?? i.id,
+			label: o,
+			variant: i.variant,
+			meta: {
+				onPress: i.onPress,
+				prefixIcon: s
+			}
+		});
+	}), a;
+};
+//#endregion
+export { i as extractMobileActionsFromArray, a as extractMobileActionsFromChildren };

package/dist/esm/core/components/actionable/Actionable.d.ts

@@ -0,0 +1,65 @@
+import { ButtonProps as AriaButtonProps } from 'react-aria-components/Button';
+export interface ActionableProps extends AriaButtonProps {
+    /** Additional class names to apply to the actionable */
+    className?: string;
+    /** set to true to remove the Actionable's base styles */
+    isUnstyled?: boolean;
+    /** The HTML element to render the actionable as. */
+    asElement?: 'span' | 'div' | 'button';
+}
+/**
+ * Actionable primitive creates interactive surfaces that behave like buttons while allowing complete control over appearance and content.
+ * Use this component when you need to build complex interactive elements that require custom styling or dynamic content based on interaction states, and when standard Unity button components are insufficient for your use case.
+ * @param {ActionableProps} props - Button behavior props from React Aria, plus styling and element configuration
+ * @example
+ * ```tsx
+ * // Basic usage with custom styling
+ * import { Actionable } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Actionable
+ *       className="uy:p-100 uy:rounded-100 uy:border uy:border-border-neutral uy:hover:bg-surface-neutral-hover"
+ *       onPress={() => console.log('Pressed!')}
+ *     >
+ *       Click me
+ *     </Actionable>
+ *   )
+ * }
+ * ```
+ * @example
+ * ```tsx
+ * // Dynamic content based on interaction state
+ * import { Actionable, Icon } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Actionable asElement="button" className="uy:p-100 uy:flex uy:items-center uy:gap-100">
+ *       {({ isHovered, isPressed }) => (
+ *         <>
+ *           <Icon src={isHovered || isPressed ? 'CakeFilled' : 'CakeOutlined'} />
+ *           <span>Interactive content</span>
+ *         </>
+ *       )}
+ *     </Actionable>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - Provides button-like interaction behavior using React Aria hooks for accessibility
+ * - Supports rendering as `div`, `span`, or `button` elements via the `asElement` prop
+ * - Includes built-in state management for hover, focus, and press interactions
+ * - Automatically applies appropriate ARIA attributes and keyboard navigation
+ * - Supports both static children and render prop pattern for dynamic content
+ * - Use data attributes (`data-hovered`, `data-pressed`, `data-focused`, `data-disabled`, `data-focus-visible`) for styling non-button elements
+ * - Marked as `uy:group` for styling child elements based on parent state
+ * - Provide an accessible name for every actionable surface
+ * - Use `aria-labelledby` when a visible label already exists, and `aria-describedby` when extra context describes the action
+ * - Use `aria-label`, `aria-description`, or `aria-details` when no visible label or description is available
+ * - Add relationship attributes such as `aria-controls`, `aria-expanded`, or `aria-haspopup` when the actionable surface controls another element
+ * @see {@link ActionableProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/core/components/actionable GitHub}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/primitives-actionable--docs unity-components.payfit.io}
+ */
+declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement | HTMLSpanElement>>;
+export { Actionable };