@payfit/unity-components 2.5.7 → 2.7.0

package/dist/esm/components/empty-state/EmptyState.d.ts

@@ -0,0 +1,48 @@
+import { PropsWithChildren } from 'react';
+export interface EmptyStateProps extends PropsWithChildren {
+    /**
+     * The ARIA role for the empty state container.
+     * @default 'status'
+     */
+    role?: string;
+    /**
+     * Additional CSS class names.
+     */
+    className?: string;
+}
+/**
+ * EmptyState communicates the absence of data or content to users while providing clear guidance on next steps.
+ * Use this component when there's no data to display, when filters return no results, when a feature requires prerequisites, or when celebrating task completion.
+ * The component provides a flexible composition system through its parts (`EmptyStateIcon`, `EmptyStateContent`, `EmptyStateActions`) for creating custom empty states, as well as preset components for common scenarios.
+ * @param {EmptyStateProps} props - The component props including optional `role` and `className`.
+ * @example
+ * ```tsx
+ * import { EmptyState, EmptyStateIcon, EmptyStateContent, EmptyStateActions, Button } from '@payfit/unity-components'
+ *
+ * function DocumentList() {
+ *   return (
+ *     <EmptyState>
+ *       <EmptyStateIcon icon="DocumentOutlined" variant="neutral" />
+ *       <EmptyStateContent
+ *         title="No documents yet"
+ *         description="Create your first document to get started."
+ *       />
+ *       <EmptyStateActions>
+ *         <Button variant="ghost">Create document</Button>
+ *       </EmptyStateActions>
+ *     </EmptyState>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component is composable through its part components for maximum flexibility
+ * - For common use cases, use preset components like `EmptyStateGetStarted`, `EmptyStateNoSearchResults`, etc.
+ * - The component uses `role="status"` by default for accessibility, announcing changes to screen readers
+ * - All empty state presets include built-in internationalization support
+ * @see {@link EmptyStateProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/empty-state GitHub}
+ * @see Design specs in {@link https://www.figma.com/design/poaMyU7abAgL9VRhx4ygyy/Unity-DS-%3E-Components-Library?node-id=16600-5334 Figma}
+ * @see Developer docs in {@link https://unity-components.payfit.io/?path=/docs/component-reference-emptystate--docs unity-components.payfit.io}
+ */
+declare const EmptyState: import('react').ForwardRefExoticComponent<EmptyStateProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyState };

package/dist/esm/components/empty-state/EmptyState.js

@@ -0,0 +1,25 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { emptyState as s } from "./EmptyState.variants.js";
+const d = p(
+  ({ children: t, role: a = "status", className: r, ...e }, o) => {
+    const { base: m } = s();
+    return /* @__PURE__ */ i(
+      "div",
+      {
+        "data-dd-privacy": "allow",
+        ref: o,
+        role: a,
+        className: m({ className: r }),
+        "aria-live": "polite",
+        "aria-atomic": "true",
+        ...e,
+        children: t
+      }
+    );
+  }
+);
+d.displayName = "EmptyState";
+export {
+  d as EmptyState
+};

package/dist/esm/components/empty-state/EmptyState.variants.d.ts

@@ -0,0 +1,59 @@
+export declare const emptyState: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            iconContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            iconContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    iconContainer: string;
+    content: string;
+    actions: string;
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            actions?: import('tailwind-merge').ClassNameValue;
+            iconContainer?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    base: string;
+    iconContainer: string;
+    content: string;
+    actions: string;
+}, import('tailwind-variants').TVReturnType<unknown, {
+    base: string;
+    iconContainer: string;
+    content: string;
+    actions: string;
+}, undefined, unknown, unknown, undefined>>;
+export declare const emptyStateIcon: import('tailwind-variants').TVReturnType<{
+    variant: {
+        neutral: string;
+        success: string;
+    };
+}, undefined, "uy:flex uy:items-center uy:justify-center uy:rounded-125 uy:p-100", {
+    variant: {
+        neutral: string;
+        success: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        neutral: string;
+        success: string;
+    };
+}, undefined, "uy:flex uy:items-center uy:justify-center uy:rounded-125 uy:p-100", unknown, unknown, undefined>>;

package/dist/esm/components/empty-state/EmptyState.variants.js

@@ -0,0 +1,24 @@
+import { uyTv as e } from "@payfit/unity-themes";
+const u = e({
+  slots: {
+    base: "uy:flex uy:flex-col uy:items-center uy:justify-center uy:w-full uy:min-h-30 uy:gap-250 uy:py-400",
+    iconContainer: "",
+    content: "uy:flex uy:flex-col uy:items-center uy:gap-100 uy:max-w-60",
+    actions: "uy:flex uy:flex-col uy:items-center uy:gap-100"
+  }
+}), y = e({
+  base: "uy:flex uy:items-center uy:justify-center uy:rounded-125 uy:p-100",
+  variants: {
+    variant: {
+      neutral: "uy:bg-surface-neutral-lowest uy:text-content-neutral-low",
+      success: "uy:bg-surface-success-lowest uy:text-content-success"
+    }
+  },
+  defaultVariants: {
+    variant: "neutral"
+  }
+});
+export {
+  u as emptyState,
+  y as emptyStateIcon
+};

package/dist/esm/components/empty-state/parts/EmptyStateActions.d.ts

@@ -0,0 +1,39 @@
+import { PropsWithChildren } from 'react';
+export type EmptyStateActionsProps = PropsWithChildren;
+/**
+ * EmptyStateActions provides an actionable path forward by containing buttons, links, or other interactive elements.
+ * Use this component to help users resolve the empty state by offering clear next steps or alternative actions.
+ * The component arranges action elements vertically with consistent spacing. Place buttons or links as children to guide users toward resolving the empty state. This will display them in a centered, stacked layout.
+ * @param {EmptyStateActionsProps} props - The component children containing action elements.
+ * @example
+ * ```tsx
+ * import { EmptyState, EmptyStateContent, EmptyStateActions, Button } from '@payfit/unity-components'
+ *
+ * function NoDocuments() {
+ *   return (
+ *     <EmptyState>
+ *       <EmptyStateContent
+ *         title="No documents yet"
+ *         description="Upload your first document to get started."
+ *       />
+ *       <EmptyStateActions>
+ *         <Button variant="ghost" onPress={handleUpload}>
+ *           Upload document
+ *         </Button>
+ *       </EmptyStateActions>
+ *     </EmptyState>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The component returns null if no children are provided
+ * - Multiple actions are stacked vertically for clarity
+ * - Limit to 1-2 primary actions to avoid overwhelming users
+ * - Use ghost or secondary button variants to maintain visual hierarchy
+ * @see {@link EmptyStateActionsProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/empty-state GitHub}
+ */
+declare const EmptyStateActions: import('react').ForwardRefExoticComponent<{
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyStateActions };

package/dist/esm/components/empty-state/parts/EmptyStateActions.js

@@ -0,0 +1,17 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+const a = m(
+  ({ children: t, ...e }, r) => t ? /* @__PURE__ */ o(
+    "div",
+    {
+      ref: r,
+      className: "uy:flex uy:flex-col uy:items-center uy:gap-100",
+      ...e,
+      children: t
+    }
+  ) : null
+);
+a.displayName = "EmptyStateActions";
+export {
+  a as EmptyStateActions
+};

package/dist/esm/components/empty-state/parts/EmptyStateContent.d.ts

@@ -0,0 +1,40 @@
+export interface EmptyStateContentProps {
+    /**
+     * The main title text for the empty state.
+     */
+    title?: string;
+    /**
+     * Additional descriptive text providing context about the empty state.
+     */
+    description?: string;
+}
+/**
+ * EmptyStateContent communicates the reason for the empty state through a title and optional description.
+ * Use this component to provide clear messaging about why content is absent and guide users on what they can do next.
+ * The component displays a heading for the primary message and an optional description for additional context. Set the `title` prop to provide the main message, and use the `description` prop to add supportive details, suggestions, or next steps.
+ * @param {EmptyStateContentProps} props - The component props including optional `title` and `description`.
+ * @example
+ * ```tsx
+ * import { EmptyState, EmptyStateContent } from '@payfit/unity-components'
+ *
+ * function SearchResults() {
+ *   return (
+ *     <EmptyState>
+ *       <EmptyStateContent
+ *         title="No results found"
+ *         description="Try adjusting your search or filters to find what you're looking for."
+ *       />
+ *     </EmptyState>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The content is automatically centered and constrained to optimal reading width
+ * - The component returns null if both title and description are empty
+ * - Keep titles concise (2-5 words) and descriptions under 2 sentences for best readability
+ * - Use positive, actionable language to guide users forward
+ * @see {@link EmptyStateContentProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/empty-state GitHub}
+ */
+declare const EmptyStateContent: import('react').ForwardRefExoticComponent<EmptyStateContentProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyStateContent };

package/dist/esm/components/empty-state/parts/EmptyStateContent.js

@@ -0,0 +1,21 @@
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { Text as n } from "../../text/Text.js";
+const c = m(
+  ({ title: t, description: r, ...o }, a) => !t && !r ? null : /* @__PURE__ */ l(
+    "div",
+    {
+      ref: a,
+      className: "uy:flex uy:flex-col uy:items-center uy:gap-100 uy:text-center",
+      ...o,
+      children: [
+        t && /* @__PURE__ */ e(n, { variant: "h4", color: "inherit", children: t }),
+        r && /* @__PURE__ */ e(n, { variant: "body", color: "content.neutral.low", children: r })
+      ]
+    }
+  )
+);
+c.displayName = "EmptyStateContent";
+export {
+  c as EmptyStateContent
+};

package/dist/esm/components/empty-state/parts/EmptyStateIcon.d.ts

@@ -0,0 +1,41 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { VariantProps } from '@payfit/unity-themes';
+import { emptyStateIcon } from '../EmptyState.variants.js';
+export interface EmptyStateIconProps extends VariantProps<typeof emptyStateIcon> {
+    /**
+     * The Unity icon to display.
+     */
+    icon: UnityIcon;
+    /**
+     * The visual style of the icon container.
+     * @default 'neutral'
+     */
+    variant?: 'neutral' | 'success';
+}
+/**
+ * EmptyStateIcon provides visual representation for empty states through an icon in a styled container.
+ * Use this component to reinforce the message of your empty state with appropriate iconography.
+ * The component displays Unity icons in a circular container with background color based on the variant. Use the `neutral` variant for standard empty states and informational messages, and the `success` variant to celebrate completed tasks or positive outcomes.
+ * @param {EmptyStateIconProps} props - The component props including the `icon` name and optional `variant`.
+ * @example
+ * ```tsx
+ * import { EmptyState, EmptyStateIcon, EmptyStateContent } from '@payfit/unity-components'
+ *
+ * function NoDocuments() {
+ *   return (
+ *     <EmptyState>
+ *       <EmptyStateIcon icon="DocumentOutlined" variant="neutral" />
+ *       <EmptyStateContent title="No documents found" />
+ *     </EmptyState>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * - The icon is automatically sized to 24px for consistency across empty states
+ * - The icon has `aria-hidden="true"` as it's decorative and shouldn't be announced by screen readers
+ * - Choose icons that clearly represent the empty state context
+ * @see {@link EmptyStateIconProps} for all available props
+ * @see Source code in {@link https://github.com/PayFit/hr-apps/tree/master/libs/shared/unity/components/src/components/empty-state GitHub}
+ */
+declare const EmptyStateIcon: import('react').ForwardRefExoticComponent<EmptyStateIconProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyStateIcon };

package/dist/esm/components/empty-state/parts/EmptyStateIcon.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { Icon as n } from "../../icon/Icon.js";
+import { emptyStateIcon as c } from "../EmptyState.variants.js";
+const s = a(
+  ({ icon: r, variant: o = "neutral", ...e }, m) => {
+    const i = c({ variant: o });
+    return /* @__PURE__ */ t("div", { ref: m, className: i, ...e, children: /* @__PURE__ */ t(n, { src: r, size: 24, color: "inherit", "aria-hidden": "true" }) });
+  }
+);
+s.displayName = "EmptyStateIcon";
+export {
+  s as EmptyStateIcon
+};

package/dist/esm/components/empty-state/presets/EmptyStateGetStarted.d.ts

@@ -0,0 +1,41 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { EmptyState } from '../EmptyState.js';
+export interface EmptyStateGetStartedProps extends Omit<ComponentPropsWithoutRef<typeof EmptyState>, 'children'> {
+    /**
+     * Custom title text. If not provided, uses the default i18n message.
+     */
+    title?: string;
+    /**
+     * Description text providing context about getting started.
+     * Defaults to placeholder text if not provided.
+     */
+    description?: string;
+    /**
+     * Optional action elements (buttons, links) to display.
+     * Pass Button or Link components as children.
+     */
+    actions?: ReactNode;
+}
+/**
+ * EmptyStateGetStarted is a preset for encouraging users to create their first item.
+ * It displays a puzzle piece icon and provides an optional actions slot for buttons or links.
+ * @param {EmptyStateGetStartedProps} props - The component props
+ * @example
+ * ```tsx
+ * import { EmptyStateGetStarted, Button } from '@payfit/unity-components'
+ *
+ * <EmptyStateGetStarted
+ *   description="Create your first project to get started with the platform."
+ *   actions={
+ *     <>
+ *       <Button variant="ghost" onPress={() => console.log('Create')}>
+ *         Create item
+ *       </Button>
+ *       <Link href="/help">Learn more</Link>
+ *     </>
+ *   }
+ * />
+ * ```
+ */
+declare const EmptyStateGetStarted: import('react').ForwardRefExoticComponent<EmptyStateGetStartedProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyStateGetStarted };

package/dist/esm/components/empty-state/presets/EmptyStateGetStarted.js

@@ -0,0 +1,28 @@
+import { jsxs as n, jsx as t } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { useIntl as s } from "react-intl";
+import { EmptyState as l } from "../EmptyState.js";
+import { EmptyStateActions as d } from "../parts/EmptyStateActions.js";
+import { EmptyStateContent as f } from "../parts/EmptyStateContent.js";
+import { EmptyStateIcon as c } from "../parts/EmptyStateIcon.js";
+const y = p(({ title: r, description: o, actions: e, ...m }, a) => {
+  const i = s().formatMessage({
+    id: "unity:component:empty-state:get-started:title",
+    defaultMessage: "Get started"
+  });
+  return /* @__PURE__ */ n(l, { ref: a, ...m, children: [
+    /* @__PURE__ */ t(c, { icon: "PuzzlePieceOutlined", variant: "neutral" }),
+    /* @__PURE__ */ t(
+      f,
+      {
+        title: r || i,
+        description: o
+      }
+    ),
+    e && /* @__PURE__ */ t(d, { children: e })
+  ] });
+});
+y.displayName = "EmptyStateGetStarted";
+export {
+  y as EmptyStateGetStarted
+};

package/dist/esm/components/empty-state/presets/EmptyStateGoodJob.d.ts

@@ -0,0 +1,29 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { EmptyState } from '../EmptyState.js';
+export interface EmptyStateGoodJobProps extends Omit<ComponentPropsWithoutRef<typeof EmptyState>, 'children'> {
+    /**
+     * Custom title text. If not provided, uses the default i18n message.
+     */
+    title?: string;
+    /**
+     * Description text providing context about the completion.
+     * Defaults to placeholder text if not provided.
+     */
+    description?: string;
+}
+/**
+ * EmptyStateGoodJob is a preset for celebrating task completion.
+ * It features a success icon with a decorative grid background that fades at the edges.
+ * The background is not customizable to maintain consistent celebration aesthetics.
+ * @param {EmptyStateGoodJobProps} props - The component props
+ * @example
+ * ```tsx
+ * import { EmptyStateGoodJob } from '@payfit/unity-components'
+ *
+ * <EmptyStateGoodJob
+ *   description="You've completed all tasks in this section."
+ * />
+ * ```
+ */
+declare const EmptyStateGoodJob: import('react').ForwardRefExoticComponent<EmptyStateGoodJobProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyStateGoodJob };

package/dist/esm/components/empty-state/presets/EmptyStateGoodJob.js

@@ -0,0 +1,55 @@
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+import { forwardRef as s } from "react";
+import { useIntl as p } from "react-intl";
+import { EmptyState as l } from "../EmptyState.js";
+import { EmptyStateContent as m } from "../parts/EmptyStateContent.js";
+import { EmptyStateIcon as u } from "../parts/EmptyStateIcon.js";
+const y = s(
+  ({ title: a, description: r, ...o }, n) => {
+    const i = p().formatMessage({
+      id: "unity:component:empty-state:good-job:title",
+      defaultMessage: "Good job"
+    });
+    return /* @__PURE__ */ t("div", { className: "uy:relative uy:w-full uy:min-h-[200px] uy:isolate", children: [
+      /* @__PURE__ */ t(l, { ref: n, className: "uy:relative uy:z-2", ...o, children: [
+        /* @__PURE__ */ e(u, { icon: "CheckOutlined", variant: "success" }),
+        /* @__PURE__ */ e(
+          m,
+          {
+            title: a || i,
+            description: r
+          }
+        )
+      ] }),
+      /* @__PURE__ */ e(
+        "div",
+        {
+          className: "uy:absolute uy:top-0 uy:z-0 uy:left-1/2 uy:-translate-x-1/2 uy:h-full uy:pointer-events-none uy:aspect-square uy:mask-radial-at-center uy:mask-radial-from-0% uy:mask-radial-to-70%",
+          style: {
+            backgroundImage: `
+              repeating-linear-gradient(
+                0deg,
+                #e5e7eb 0px,
+                #e5e7eb 1px,
+                transparent 1px,
+                transparent 32px
+              ),
+              repeating-linear-gradient(
+                90deg,
+                #e5e7eb 0px,
+                #e5e7eb 1px,
+                transparent 1px,
+                transparent 32px
+              )
+            `
+          },
+          "aria-hidden": "true"
+        }
+      )
+    ] });
+  }
+);
+y.displayName = "EmptyStateGoodJob";
+export {
+  y as EmptyStateGoodJob
+};

package/dist/esm/components/empty-state/presets/EmptyStateNoSearchResults.d.ts

@@ -0,0 +1,38 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { EmptyState } from '../EmptyState.js';
+export interface EmptyStateNoSearchResultsProps extends Omit<ComponentPropsWithoutRef<typeof EmptyState>, 'children'> {
+    /**
+     * Custom title text. If not provided, uses the default i18n message.
+     */
+    title?: string;
+    /**
+     * Description text providing context about the lack of search results.
+     * Defaults to placeholder text if not provided.
+     */
+    description?: string;
+    /**
+     * Optional action elements (buttons, links) to display.
+     * Pass Button or Link components as children.
+     */
+    actions?: ReactNode;
+}
+/**
+ * EmptyStateNoSearchResults is a preset for informing users that their search or filter returned no results.
+ * It displays a magnifying glass icon and provides an optional actions slot.
+ * @param {EmptyStateNoSearchResultsProps} props - The component props
+ * @example
+ * ```tsx
+ * import { EmptyStateNoSearchResults, Button } from '@payfit/unity-components'
+ *
+ * <EmptyStateNoSearchResults
+ *   description="Try adjusting your search criteria or filters."
+ *   actions={
+ *     <Button variant="ghost" onPress={() => console.log('Reset')}>
+ *       Reset filters
+ *     </Button>
+ *   }
+ * />
+ * ```
+ */
+declare const EmptyStateNoSearchResults: import('react').ForwardRefExoticComponent<EmptyStateNoSearchResultsProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyStateNoSearchResults };

package/dist/esm/components/empty-state/presets/EmptyStateNoSearchResults.js

@@ -0,0 +1,28 @@
+import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { forwardRef as a } from "react";
+import { useIntl as l } from "react-intl";
+import { EmptyState as p } from "../EmptyState.js";
+import { EmptyStateActions as f } from "../parts/EmptyStateActions.js";
+import { EmptyStateContent as c } from "../parts/EmptyStateContent.js";
+import { EmptyStateIcon as d } from "../parts/EmptyStateIcon.js";
+const u = a(({ title: r, description: o, actions: e, ...n }, i) => {
+  const m = l().formatMessage({
+    id: "unity:component:empty-state:no-search-results:title",
+    defaultMessage: "We didn't find any results"
+  });
+  return /* @__PURE__ */ s(p, { ref: i, ...n, children: [
+    /* @__PURE__ */ t(d, { icon: "MagnifyingGlassOutlined", variant: "neutral" }),
+    /* @__PURE__ */ t(
+      c,
+      {
+        title: r || m,
+        description: o
+      }
+    ),
+    e && /* @__PURE__ */ t(f, { children: e })
+  ] });
+});
+u.displayName = "EmptyStateNoSearchResults";
+export {
+  u as EmptyStateNoSearchResults
+};

package/dist/esm/components/empty-state/presets/EmptyStateUpgradeRequired.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { EmptyState } from '../EmptyState.js';
+export interface EmptyStateUpgradeRequiredProps extends Omit<ComponentPropsWithoutRef<typeof EmptyState>, 'children'> {
+    /**
+     * Custom title text. If not provided, uses the default i18n message.
+     */
+    title?: string;
+    /**
+     * Description text explaining why an upgrade is required.
+     * Defaults to placeholder text if not provided.
+     */
+    description?: string;
+    /**
+     * Optional action elements (buttons, links) to display.
+     * Pass Button or Link components as children.
+     * Typically uses a primary link for the upgrade action.
+     */
+    actions?: ReactNode;
+}
+/**
+ * EmptyStateUpgradeRequired is a preset for prompting users to upgrade for feature access.
+ * It displays a lock icon and provides an optional actions slot.
+ * @param {EmptyStateUpgradeRequiredProps} props - The component props
+ * @example
+ * ```tsx
+ * import { EmptyStateUpgradeRequired } from '@payfit/unity-components'
+ *
+ * <EmptyStateUpgradeRequired
+ *   description="Unlock advanced reporting features with a premium plan."
+ *   actions={
+ *     <Link href="/upgrade">Upgrade now</Link>
+ *   }
+ * />
+ * ```
+ */
+declare const EmptyStateUpgradeRequired: import('react').ForwardRefExoticComponent<EmptyStateUpgradeRequiredProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyStateUpgradeRequired };

package/dist/esm/components/empty-state/presets/EmptyStateUpgradeRequired.js

@@ -0,0 +1,28 @@
+import { jsxs as p, jsx as t } from "react/jsx-runtime";
+import { forwardRef as n } from "react";
+import { useIntl as d } from "react-intl";
+import { EmptyState as l } from "../EmptyState.js";
+import { EmptyStateActions as s } from "../parts/EmptyStateActions.js";
+import { EmptyStateContent as f } from "../parts/EmptyStateContent.js";
+import { EmptyStateIcon as u } from "../parts/EmptyStateIcon.js";
+const c = n(({ title: r, description: o, actions: e, ...i }, m) => {
+  const a = d().formatMessage({
+    id: "unity:component:empty-state:upgrade-required:title",
+    defaultMessage: "Upgrade required"
+  });
+  return /* @__PURE__ */ p(l, { ref: m, ...i, children: [
+    /* @__PURE__ */ t(u, { icon: "LockOutlined", variant: "neutral" }),
+    /* @__PURE__ */ t(
+      f,
+      {
+        title: r || a,
+        description: o
+      }
+    ),
+    e && /* @__PURE__ */ t(s, { children: e })
+  ] });
+});
+c.displayName = "EmptyStateUpgradeRequired";
+export {
+  c as EmptyStateUpgradeRequired
+};

package/dist/esm/components/empty-state/presets/EmptyStateUseDesktop.d.ts

@@ -0,0 +1,28 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { EmptyState } from '../EmptyState.js';
+export interface EmptyStateUseDesktopProps extends Omit<ComponentPropsWithoutRef<typeof EmptyState>, 'children'> {
+    /**
+     * Custom title text. If not provided, uses the default i18n message.
+     */
+    title?: string;
+    /**
+     * Description text explaining why desktop is recommended.
+     * Defaults to placeholder text if not provided.
+     */
+    description?: string;
+}
+/**
+ * EmptyStateUseDesktop is a preset for recommending the desktop experience.
+ * It displays a devices icon and does not include any actions by default.
+ * @param {EmptyStateUseDesktopProps} props - The component props
+ * @example
+ * ```tsx
+ * import { EmptyStateUseDesktop } from '@payfit/unity-components'
+ *
+ * <EmptyStateUseDesktop
+ *   description="This feature works best on larger screens."
+ * />
+ * ```
+ */
+declare const EmptyStateUseDesktop: import('react').ForwardRefExoticComponent<EmptyStateUseDesktopProps & import('react').RefAttributes<HTMLDivElement>>;
+export { EmptyStateUseDesktop };