@payfit/unity-components 2.46.16 → 2.46.17

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@payfit/unity-components",
-  "version": "2.46.16",
+  "version": "2.46.17",
   "module": "./dist/esm/index.js",
   "type": "module",
   "sideEffects": false,
@@ -92,7 +92,7 @@
     "tailwind-variants": "3.2.2",
     "usehooks-ts": "3.1.1",
     "zod": "4.4.3",
-    "@payfit/unity-illustrations": "2.46.16"
+    "@payfit/unity-illustrations": "2.46.17"
   },
   "peerDependencies": {
     "@hookform/devtools": "^4",
@@ -104,8 +104,8 @@
     "react-hook-form": "^7",
     "react-router-dom": "^5",
     "zod": "^3 || ^4",
-    "@payfit/unity-icons": "2.46.16",
-    "@payfit/unity-themes": "2.46.16"
+    "@payfit/unity-icons": "2.46.17",
+    "@payfit/unity-themes": "2.46.17"
   },
   "devDependencies": {
     "@figma/code-connect": "1.4.3",
@@ -154,9 +154,9 @@
     "@payfit/hr-apps-tsconfigs": "0.0.0-use.local",
     "@payfit/storybook-addon-console-errors": "0.0.0-use.local",
     "@payfit/storybook-config": "0.0.0-use.local",
-    "@payfit/unity-icons": "2.46.16",
-    "@payfit/unity-illustrations": "2.46.16",
-    "@payfit/unity-themes": "2.46.16",
+    "@payfit/unity-icons": "2.46.17",
+    "@payfit/unity-illustrations": "2.46.17",
+    "@payfit/unity-themes": "2.46.17",
     "@payfit/vite-configs": "0.0.0-use.local"
   },
   "peerDependenciesMeta": {

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,35 +0,0 @@
-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
-};