@payfit/unity-components 2.5.7 → 2.6.0

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupActions.js

@@ -0,0 +1,158 @@
+import { jsxs as c, Fragment as y, jsx as i } from "react/jsx-runtime";
+import { useContext as E, useMemo as G } from "react";
+import { uyTv as S } from "@payfit/unity-themes";
+import { useStore as A } from "@tanstack/react-form";
+import { useIntl as B } from "react-intl";
+import { useFormContext as j } from "../../../hooks/tanstack-form-context.js";
+import { useBreakpointListener as k } from "../../../hooks/use-breakpoint-listener.js";
+import { Button as n } from "../../button/Button.js";
+import { InlineFieldGroupContext as V } from "../InlineFieldGroup.context.js";
+const O = S({
+  slots: {
+    container: "",
+    button: ""
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        container: "uy:flex uy:gap-100 uy:items-center"
+      },
+      vertical: {
+        container: "uy:flex uy:flex-col uy:gap-100 uy:w-full",
+        button: "uy:w-full"
+      }
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+function R({
+  orientation: b = "horizontal",
+  customActions: g
+}) {
+  const o = B(), m = E(V), f = k(), p = f === "xs" || f === "sm";
+  if (!m)
+    throw new Error(
+      "InlineFieldGroupActions must be used within InlineFieldGroup"
+    );
+  const {
+    mode: v,
+    enterEditMode: x,
+    exitEditMode: s,
+    editViewId: h,
+    isLoading: e,
+    editButtonRef: M,
+    editLabel: P,
+    saveLabel: z,
+    cancelLabel: D,
+    onEditPress: I,
+    onSavePress: r,
+    onCancelPress: a
+  } = m, L = j(), { isDirty: l } = A(L.store, (C) => ({
+    isDirty: C.isDirty
+  })), { container: F, button: t } = O({ orientation: b }), N = P || o.formatMessage({
+    id: "unity:component:inline-field-group:edit",
+    defaultMessage: "Edit"
+  }), d = z || o.formatMessage({
+    id: "unity:component:inline-field-group:save",
+    defaultMessage: "Save"
+  }), u = D || o.formatMessage({
+    id: "unity:component:inline-field-group:cancel",
+    defaultMessage: "Cancel"
+  }), w = G(() => p ? /* @__PURE__ */ c(y, { children: [
+    /* @__PURE__ */ i(
+      n,
+      {
+        variant: "primary",
+        size: "default",
+        isDisabled: !l || e,
+        isLoading: e,
+        type: "submit",
+        onPress: () => {
+          r?.();
+        },
+        className: t(),
+        children: d
+      }
+    ),
+    /* @__PURE__ */ i(
+      n,
+      {
+        variant: "secondary",
+        size: "default",
+        onPress: () => {
+          a?.(), s();
+        },
+        isDisabled: e,
+        type: "button",
+        className: t(),
+        children: u
+      }
+    )
+  ] }) : /* @__PURE__ */ c(y, { children: [
+    /* @__PURE__ */ i(
+      n,
+      {
+        variant: "secondary",
+        size: "default",
+        onPress: () => {
+          a?.(), s();
+        },
+        isDisabled: e,
+        type: "button",
+        className: t(),
+        children: u
+      }
+    ),
+    /* @__PURE__ */ i(
+      n,
+      {
+        variant: "primary",
+        size: "default",
+        isDisabled: !l || e,
+        isLoading: e,
+        type: "submit",
+        onPress: () => {
+          r?.();
+        },
+        className: t(),
+        children: d
+      }
+    )
+  ] }), [
+    t,
+    u,
+    d,
+    s,
+    l,
+    e,
+    p,
+    a,
+    r
+  ]);
+  return /* @__PURE__ */ c("div", { className: F(), role: "group", children: [
+    g,
+    v === "read" ? /* @__PURE__ */ i(
+      n,
+      {
+        ref: M,
+        variant: "secondary",
+        size: "default",
+        onPress: () => {
+          I?.(), x();
+        },
+        isDisabled: e,
+        prefixIcon: "PencilSimpleOutlined",
+        "aria-expanded": !1,
+        "aria-controls": h,
+        className: t(),
+        children: N
+      }
+    ) : w
+  ] });
+}
+R.displayName = "InlineFieldGroupActions";
+export {
+  R as InlineFieldGroupActions
+};

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupHeader.d.ts

@@ -6,42 +6,14 @@ export interface InlineFieldGroupHeaderProps {
      */
     title: ReactNode;
     /**
-     * Custom label for the edit button.
-     * @default "Edit" (translated)
+     * Optional subtitle to display below the title.
      */
-    editLabel?: string;
-    /**
-     * Custom label for the save button.
-     * @default "Save" (translated)
-     */
-    saveLabel?: string;
-    /**
-     * Custom label for the cancel button.
-     * @default "Cancel" (translated)
-     */
-    cancelLabel?: string;
+    subtitle?: ReactNode;
     /**
      * Additional custom actions to render alongside the default buttons.
      * These will be displayed between the title and the edit/save/cancel buttons.
      */
     customActions?: ReactNode;
-    /**
-     * Optional callback fired when the edit button is clicked.
-     * This is called before entering edit mode and is useful for analytics or side effects.
-     */
-    onEditPress?: () => void;
-    /**
-     * Optional callback fired when the save button is clicked.
-     * This is called before form submission and is useful for analytics or side effects.
-     * Note: Form submission is handled via the form's onSubmit configuration.
-     */
-    onSavePress?: () => void;
-    /**
-     * Optional callback fired when the cancel button is clicked.
-     * This is called before canceling and is useful for analytics or side effects.
-     * The form will be reset and edit mode exited automatically.
-     */
-    onCancelPress?: () => void;
 }
 /**
  * InlineFieldGroupHeader renders the title and contextual action buttons for an InlineFieldGroup.
@@ -69,14 +41,18 @@ export interface InlineFieldGroupHeaderProps {
  * ```
  * @example Custom button labels and actions
  * ```tsx
- * <form.InlineFieldGroupHeader
- *   title="Contact Information"
+ * <form.InlineFieldGroup
  *   editLabel="Modify"
  *   saveLabel="Confirm"
  *   cancelLabel="Discard"
- *   customActions={<Button onPress={handleDelete}>Delete</Button>}
  *   onSavePress={() => trackAnalytics('save_clicked')}
- * />
+ * >
+ *   <form.InlineFieldGroupHeader
+ *     title="Contact Information"
+ *     customActions={<Button onPress={handleDelete}>Delete</Button>}
+ *   />
+ *   ...
+ * </form.InlineFieldGroup>
  * ```
  * @remarks
  * - Must be used as a child of InlineFieldGroup
@@ -89,7 +65,7 @@ export interface InlineFieldGroupHeaderProps {
  * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/inline-field-group GitHub}
  * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/forms-reference-inlinefieldgroup--docs unity-components.payfit.io}
  */
-export declare function InlineFieldGroupHeader({ title, editLabel, saveLabel, cancelLabel, customActions, onEditPress, onSavePress, onCancelPress, }: InlineFieldGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function InlineFieldGroupHeader({ title, subtitle, customActions, }: InlineFieldGroupHeaderProps): import("react/jsx-runtime").JSX.Element;
 export declare namespace InlineFieldGroupHeader {
     var displayName: string;
 }

package/dist/esm/components/inline-field-group/parts/InlineFieldGroupHeader.js

@@ -1,106 +1,39 @@
-import { jsxs as n, jsx as e, Fragment as N } from "react/jsx-runtime";
-import { useContext as L } from "react";
-import { uyTv as P } from "@payfit/unity-themes";
-import { useStore as S } from "@tanstack/react-form";
-import { useIntl as j } from "react-intl";
-import { useFormContext as z } from "../../../hooks/tanstack-form-context.js";
-import { Button as o } from "../../button/Button.js";
-import { Text as H } from "../../text/Text.js";
-import { InlineFieldGroupContext as B } from "../InlineFieldGroup.context.js";
-const T = P({
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import { useContext as d } from "react";
+import { uyTv as m } from "@payfit/unity-themes";
+import { useBreakpointListener as f } from "../../../hooks/use-breakpoint-listener.js";
+import { Text as i } from "../../text/Text.js";
+import { InlineFieldGroupContext as y } from "../InlineFieldGroup.context.js";
+import { InlineFieldGroupActions as h } from "./InlineFieldGroupActions.js";
+const x = m({
   slots: {
-    base: "uy:flex uy:items-center uy:justify-between uy:w-full",
-    titleContainer: "uy:flex uy:flex-col uy:gap-0 uy:flex-1",
-    actions: "uy:flex uy:gap-100 uy:items-center"
+    base: "uy:flex uy:items-center uy:justify-between uy:w-full uy:gap-300",
+    titleContainer: "uy:flex uy:flex-col uy:gap-100 uy:flex-1"
   }
 });
-function A({
-  title: a,
-  editLabel: s,
-  saveLabel: l,
-  cancelLabel: d,
-  customActions: u,
-  onEditPress: c,
-  onSavePress: m,
-  onCancelPress: f
+function I({
+  title: l,
+  subtitle: t,
+  customActions: s
 }) {
-  const i = j(), r = L(B);
-  if (!r)
+  const o = d(y), n = f(), a = n !== "xs" && n !== "sm";
+  if (!o)
     throw new Error(
       "InlineFieldGroupHeader must be used within InlineFieldGroup"
     );
-  const {
-    mode: p,
-    enterEditMode: y,
-    exitEditMode: x,
-    headerId: g,
-    editViewId: h,
-    isLoading: t,
-    editButtonRef: b
-  } = r, v = z(), { isDirty: I } = S(v.store, (G) => ({
-    isDirty: G.isDirty
-  })), { base: C, titleContainer: M, actions: F } = T(), w = s || i.formatMessage({
-    id: "unity:component:inline-field-group:edit",
-    defaultMessage: "Edit"
-  }), D = l || i.formatMessage({
-    id: "unity:component:inline-field-group:save",
-    defaultMessage: "Save"
-  }), E = d || i.formatMessage({
-    id: "unity:component:inline-field-group:cancel",
-    defaultMessage: "Cancel"
-  });
-  return /* @__PURE__ */ n("header", { className: C(), children: [
-    /* @__PURE__ */ e("div", { className: M(), children: /* @__PURE__ */ e(H, { id: g, variant: "h3", color: "content.neutral", children: a }) }),
-    /* @__PURE__ */ n("div", { className: F(), role: "group", children: [
-      u,
-      p === "read" ? /* @__PURE__ */ e(
-        o,
-        {
-          ref: b,
-          variant: "secondary",
-          size: "default",
-          onPress: () => {
-            c?.(), y();
-          },
-          isDisabled: t,
-          prefixIcon: "PencilSimpleOutlined",
-          "aria-expanded": !1,
-          "aria-controls": h,
-          children: w
-        }
-      ) : /* @__PURE__ */ n(N, { children: [
-        /* @__PURE__ */ e(
-          o,
-          {
-            variant: "secondary",
-            size: "default",
-            onPress: () => {
-              f?.(), x();
-            },
-            isDisabled: t,
-            type: "button",
-            children: E
-          }
-        ),
-        /* @__PURE__ */ e(
-          o,
-          {
-            variant: "primary",
-            size: "default",
-            isDisabled: !I || t,
-            isLoading: t,
-            type: "submit",
-            onPress: () => {
-              m?.();
-            },
-            children: D
-          }
-        )
-      ] })
+  const { headerId: u } = o, { base: c, titleContainer: p } = x();
+  return /* @__PURE__ */ e("header", { className: c(), children: [
+    /* @__PURE__ */ e("hgroup", { className: p(), children: [
+      /* @__PURE__ */ r(i, { id: u, variant: "h3", color: "content.neutral", children: l }),
+      t && /* @__PURE__ */ r(i, { variant: "subtitle", color: "content.neutral", children: t })
+    ] }),
+    /* @__PURE__ */ e("div", { className: "uy:flex uy:gap-100 uy:items-center", role: "group", children: [
+      s,
+      a && /* @__PURE__ */ r(h, { orientation: "horizontal" })
     ] })
   ] });
 }
-A.displayName = "InlineFieldGroupHeader";
+I.displayName = "InlineFieldGroupHeader";
 export {
-  A as InlineFieldGroupHeader
+  I as InlineFieldGroupHeader
 };

package/dist/esm/index.d.ts

@@ -57,6 +57,16 @@ export * from './components/promo-dialog/parts/PromoDialogSubtitle.js';
 export * from './components/promo-dialog/parts/PromoDialogContent.js';
 export * from './components/promo-dialog/parts/PromoDialogActions.js';
 export * from './components/promo-dialog/parts/PromoDialogTitle.js';
+export * from './components/empty-state/EmptyState.js';
+export * from './components/empty-state/parts/EmptyStateIcon.js';
+export * from './components/empty-state/parts/EmptyStateContent.js';
+export * from './components/empty-state/parts/EmptyStateActions.js';
+export * from './components/empty-state/presets/EmptyStateGetStarted.js';
+export * from './components/empty-state/presets/EmptyStateWaitingForData.js';
+export * from './components/empty-state/presets/EmptyStateGoodJob.js';
+export * from './components/empty-state/presets/EmptyStateUpgradeRequired.js';
+export * from './components/empty-state/presets/EmptyStateNoSearchResults.js';
+export * from './components/empty-state/presets/EmptyStateUseDesktop.js';
 export * from './components/error-state/ErrorState.js';
 export * from './components/fieldset/Fieldset.js';
 export * from './components/fieldset/parts/FieldGroup.js';