@payfit/unity-components 1.1.1-beta.1 → 2.0.0

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.js

@@ -1,17 +1,17 @@
-import { jsxs as n, jsx as o } from "react/jsx-runtime";
-import T, { forwardRef as j, useCallback as z, isValidElement as D } from "react";
-import { uyTv as R } from "@payfit/unity-themes";
-import { Toolbar as S, Group as d } from "react-aria-components";
-import { useIntl as _, FormattedMessage as l } from "react-intl";
-import { Button as E } from "../button/Button.js";
-import { IconButton as F } from "../icon-button/IconButton.js";
-import { Icon as G } from "../icon/Icon.js";
-import { Menu as K } from "../menu/Menu.js";
-import { MenuContent as L } from "../menu/parts/MenuContent.js";
-import { MenuItem as O } from "../menu/parts/MenuItem.js";
-import { MenuTrigger as U } from "../menu/parts/MenuTrigger.js";
-import { ActionBarAction as V } from "./parts/ActionBarAction.js";
-const q = R({
+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",
@@ -30,59 +30,58 @@ const q = R({
       "uy:md:not-sr-only"
     ]
   }
-}), H = j(
+}), q = T(
   ({
-    id: f,
+    id: d,
     selectionCount: u,
-    onClearSelection: p,
+    onClearSelection: f,
     children: r,
     actions: a,
     renderSelectionText: c,
-    "aria-label": b,
-    onFocus: h,
-    onBlur: v,
+    "aria-label": p,
+    onFocus: b,
+    onBlur: h,
     ...i
-  }, g) => {
-    var y;
-    const { base: x, selectionArea: A, selectionCountText: M, actionArea: k } = q(), m = _(), s = a !== void 0 && typeof r == "function", B = i["aria-keyshortcuts"] !== void 0, I = b ?? m.formatMessage({
+  }, 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: "unity:component:action-bar:toolbar-label",
       defaultMessage: "Bulk actions toolbar"
-    }), C = z(() => {
+    }), I = R(() => {
       if (s) {
         const e = r;
-        return a.map((t, P) => e(t, P));
+        return a.map((o, N) => e(o, N));
       }
       return r;
-    }, [r, a, s]), w = !!r || "actions" in i && i.actions.length > 0, N = s ? a.filter((e) => e.variant !== "primary") : (y = T.Children.map(r, (e) => {
-      if (!D(e) || e.type !== V)
+    }, [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 t = e.props;
-      return t.variant === "primary" ? null : {
-        ...t,
-        id: e.key ?? t.id,
-        onPress: t.onPress,
-        label: t.children,
-        variant: t.variant,
-        prefixIcon: t.prefixIcon
+      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
       };
-    })) == null ? void 0 : y.filter(Boolean);
+    })?.filter(Boolean);
     return /* @__PURE__ */ n(
-      S,
+      D,
       {
         ...i,
-        id: f,
-        ref: g,
-        className: x(),
-        "aria-label": I,
+        id: d,
+        ref: v,
+        className: g(),
+        "aria-label": B,
         orientation: "horizontal",
         tabIndex: -1,
-        onFocus: h,
-        onBlur: v,
+        onFocus: b,
+        onBlur: h,
         children: [
           /* @__PURE__ */ n(
-            d,
+            y,
             {
-              className: A(),
+              className: x(),
               "aria-label": m.formatMessage({
                 id: "unity:component:action-bar:group:label",
                 defaultMessage: "Selection information"
@@ -91,12 +90,12 @@ const q = R({
                 /* @__PURE__ */ n(
                   "div",
                   {
-                    className: M(),
+                    className: A(),
                     role: "status",
                     "aria-live": "polite",
                     "aria-atomic": "true",
                     children: [
-                      c ? c(u) : /* @__PURE__ */ o(
+                      c ? c(u) : /* @__PURE__ */ t(
                         l,
                         {
                           id: "unity:component:action-bar:selection-count-text",
@@ -104,7 +103,7 @@ const q = R({
                           values: { selectionCount: u }
                         }
                       ),
-                      B && /* @__PURE__ */ o("span", { className: "uy:sr-only", children: /* @__PURE__ */ o(
+                      k && /* @__PURE__ */ t("span", { className: "uy:sr-only", children: /* @__PURE__ */ t(
                         l,
                         {
                           id: "unity:component:action-bar:key-shortcuts-text",
@@ -117,7 +116,7 @@ const q = R({
                     ]
                   }
                 ),
-                /* @__PURE__ */ o(E, { color: "inverted", variant: "ghost", onPress: p, children: /* @__PURE__ */ o(
+                /* @__PURE__ */ t(_, { color: "inverted", variant: "ghost", onPress: f, children: /* @__PURE__ */ t(
                   l,
                   {
                     id: "unity:component:action-bar:clear-selection-button",
@@ -128,16 +127,16 @@ const q = R({
             }
           ),
           w && /* @__PURE__ */ n(
-            d,
+            y,
             {
-              className: k(),
+              className: M(),
               role: "group",
               "aria-label": "Available actions",
               children: [
-                C(),
-                /* @__PURE__ */ o("div", { className: "uy:block uy:md:hidden", children: /* @__PURE__ */ n(K, { children: [
-                  /* @__PURE__ */ o(U, { asChild: !0, children: /* @__PURE__ */ o(
-                    F,
+                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",
@@ -145,14 +144,13 @@ const q = R({
                       color: "inverted"
                     }
                   ) }),
-                  /* @__PURE__ */ o(L, { children: N.map((e) => /* @__PURE__ */ o(
+                  /* @__PURE__ */ t(K, { children: C.map((e) => /* @__PURE__ */ t(
                     O,
                     {
                       onAction: () => {
-                        var t;
-                        (t = e.onPress) == null || t.call(e, {});
+                        e.onPress?.({});
                       },
-                      prefix: e.prefixIcon ? /* @__PURE__ */ o(G, { src: e.prefixIcon, size: 20 }) : void 0,
+                      prefix: e.prefixIcon ? /* @__PURE__ */ t(F, { src: e.prefixIcon, size: 20 }) : void 0,
                       children: e.label
                     },
                     e.id
@@ -166,8 +164,8 @@ const q = R({
     );
   }
 );
-H.displayName = "ActionBar";
+q.displayName = "ActionBar";
 export {
-  H as ActionBar,
-  q as actionBar
+  q as ActionBar,
+  V as actionBar
 };

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

@@ -5,10 +5,57 @@ export interface ActionableProps extends AriaButtonProps {
     /** set to true to remove the Actionable's base styles */
     isUnstyled?: boolean;
     /** The HTML element to render the actionable as. */
-    asElement?: 'span' | 'div';
+    asElement?: 'span' | 'div' | 'button';
 }
 /**
- * The Actionable primitive is a component that helps you build interactive surfaces of any kind.
+ * 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
+ * @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/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<HTMLDivElement>>;
+declare const Actionable: import('react').ForwardRefExoticComponent<ActionableProps & import('react').RefAttributes<HTMLButtonElement | HTMLDivElement | HTMLSpanElement>>;
 export { Actionable };

package/dist/esm/components/actionable/Actionable.js

@@ -1,71 +1,84 @@
-import { jsx as D } from "react/jsx-runtime";
-import { forwardRef as H, useState as k } from "react";
-import { uyTv as F } from "@payfit/unity-themes";
-import { useFocusVisible as E, useHover as x, useFocus as N } from "@react-aria/interactions";
-import { useObjectRef as S, mergeProps as c } from "@react-aria/utils";
-import { useButton as U } from "react-aria";
-const V = F({
-  base: "uy:group uy:cursor-pointer",
+import { jsx as H } from "react/jsx-runtime";
+import { forwardRef as k, useState as F, useMemo as E } from "react";
+import { uyTv as N } from "@payfit/unity-themes";
+import { useFocusVisible as x, useHover as S, useFocus as U } from "@react-aria/interactions";
+import { useObjectRef as V, mergeProps as f } from "@react-aria/utils";
+import { useButton as j } from "react-aria";
+const w = N({
+  base: "uy:group",
   variants: {
     isUnstyled: {
       true: "",
-      false: "uy:aria-disabled:cursor-not-allowed uy:aria-disabled:text-content-neutral-disabled"
+      false: [
+        "uy:cursor-pointer",
+        "uy:aria-disabled:cursor-not-allowed",
+        "uy:aria-disabled:text-content-neutral-disabled"
+      ]
     }
   },
   defaultVariants: {
     isUnstyled: !1
   }
-}), j = H((d, s) => {
+}), A = k((v, e) => {
   const {
-    asElement: i = "div",
-    isUnstyled: u = !1,
-    className: p,
+    asElement: l = "div",
+    isUnstyled: d = !1,
+    className: c,
     children: o,
-    ...e
-  } = d;
-  s = S(s);
-  const { isFocusVisible: m } = E(), { isHovered: f, hoverProps: n } = x({
-    onHoverStart: e.onHoverStart,
-    onHoverEnd: e.onHoverEnd,
-    onHoverChange: e.onHoverChange,
-    isDisabled: e.isDisabled
-  }), [b, v] = k(!1), { focusProps: r } = N({
-    onFocusChange: v,
-    isDisabled: e.isDisabled
-  }), { buttonProps: a, isPressed: y } = U(
+    ...s
+  } = v;
+  e = V(e);
+  const { isFocusVisible: i } = x(), { isHovered: a, hoverProps: u } = S({
+    onHoverStart: s.onHoverStart,
+    onHoverEnd: s.onHoverEnd,
+    onHoverChange: s.onHoverChange,
+    isDisabled: s.isDisabled
+  }), [t, D] = F(!1), { focusProps: b } = U({
+    onFocusChange: D,
+    isDisabled: s.isDisabled
+  }), { buttonProps: m, isPressed: n } = j(
     {
-      ...e,
-      elementType: i
+      ...s,
+      isDisabled: s.isDisabled,
+      elementType: l
     },
-    s
-  ), g = i, P = (t) => {
-    if (e.isDisabled) {
-      t.preventDefault(), t.stopPropagation();
+    e
+  ), y = E(
+    () => w({ isUnstyled: d, className: c }),
+    [c, d]
+  ), g = l, C = (r) => {
+    if (s.isDisabled) {
+      r.preventDefault(), r.stopPropagation();
       return;
     }
-    const l = c(a, n, r);
-    l.onClick && l.onClick(t);
-  }, C = c(a, n, r), { onClick: w, ...h } = C;
-  return /* @__PURE__ */ D(
+    const p = f(m, u, b);
+    p.onClick && p.onClick(r);
+  }, P = f(m, u, b), { onClick: M, ...h } = P;
+  return /* @__PURE__ */ H(
     g,
     {
       ...h,
-      onClick: P,
-      className: V({ isUnstyled: u, className: p }),
-      ref: s,
+      onClick: C,
+      className: y,
+      ...n && { "data-pressed": n },
+      ...t && { "data-focused": t },
+      ...a && { "data-hovered": a },
+      ...s.isDisabled && { "data-disabled": s.isDisabled },
+      ...i && { "data-focus-visible": i },
+      ref: e,
       children: typeof o == "function" ? o({
-        isHovered: f,
-        isPressed: y,
-        isFocused: b,
-        isDisabled: !!e.isDisabled,
-        isFocusVisible: m,
+        isHovered: a,
+        isPressed: n,
+        isFocused: t,
+        isDisabled: !!s.isDisabled,
+        isFocusVisible: i,
         isPending: !1,
         defaultChildren: null
       }) : o
     }
   );
 });
-j.displayName = "Actionable";
+A.displayName = "Actionable";
 export {
-  j as Actionable
+  A as Actionable
 };

package/dist/esm/components/app-layout/AppLayout.js

@@ -37,36 +37,36 @@ const w = x({
   }
 });
 function R({
-  children: y,
-  menu: l,
-  header: a,
+  children: l,
+  menu: a,
+  header: r,
   footer: u,
-  withoutContentPadding: n = !1
+  withoutContentPadding: p = !1
 }) {
-  const r = v(null), { height: o = 0 } = g({
-    ref: r,
+  const o = v(null), { height: y = 0 } = g({
+    ref: o,
     box: "border-box"
-  }), { body: p, header: s, menu: d, layoutWrapper: i, contentWrapper: c, content: f, footer: h } = w({
-    withoutContentPadding: n
+  }), { body: s, header: n, menu: d, layoutWrapper: i, contentWrapper: c, content: f, footer: h } = w({
+    withoutContentPadding: p
   }), m = {
-    "--uy-app-layout-menu-height": `calc(100dvh - ${o}px)`,
-    "--uy-app-layout-header-sticky-offset": `${o}px`
+    "--uy-app-layout-menu-height": `calc(100dvh - ${y}px)`,
+    "--uy-app-layout-header-sticky-offset": `${y}px`
   };
-  return /* @__PURE__ */ t("div", { className: p(), style: m, children: [
-    a && /* @__PURE__ */ e(
+  return /* @__PURE__ */ t("div", { className: s(), style: m, children: [
+    r && /* @__PURE__ */ e(
       "div",
       {
-        ref: r,
-        className: s(),
+        ref: o,
+        className: n(),
         role: "alert",
         "aria-live": "assertive",
-        children: a
+        children: r
       }
     ),
     /* @__PURE__ */ t("div", { className: i(), children: [
-      /* @__PURE__ */ e("div", { className: d(), children: l }),
+      a && /* @__PURE__ */ e("div", { className: d(), children: a }),
       /* @__PURE__ */ t("div", { className: c(), children: [
-        /* @__PURE__ */ e("div", { className: f(), children: y }),
+        /* @__PURE__ */ e("div", { className: f(), children: l }),
         u && /* @__PURE__ */ e("footer", { className: h(), children: u })
       ] })
     ] })