@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/error-state/ErrorState.d.ts

@@ -0,0 +1,208 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { UnityIllustrationAsset } from '@payfit/unity-illustrations';
+import { ReactNode } from 'react';
+export declare const errorState: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            h1?: import('tailwind-merge').ClassNameValue;
+            h2?: import('tailwind-merge').ClassNameValue;
+            h3?: import('tailwind-merge').ClassNameValue;
+            h4?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            illustration?: import('tailwind-merge').ClassNameValue;
+            informationContainer?: import('tailwind-merge').ClassNameValue;
+            information?: import('tailwind-merge').ClassNameValue;
+            informationComponent?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            h1?: import('tailwind-merge').ClassNameValue;
+            h2?: import('tailwind-merge').ClassNameValue;
+            h3?: import('tailwind-merge').ClassNameValue;
+            h4?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            illustration?: import('tailwind-merge').ClassNameValue;
+            informationContainer?: import('tailwind-merge').ClassNameValue;
+            information?: import('tailwind-merge').ClassNameValue;
+            informationComponent?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
+    wrapper: string[];
+    base: string[];
+    illustration: string[];
+    icon: string[];
+    informationContainer: string[];
+    information: string[];
+    informationComponent: string[];
+    h1: string[];
+    h2: string[];
+    h3: string[];
+    h4: string[];
+    description: string[];
+}, undefined, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            h1?: import('tailwind-merge').ClassNameValue;
+            h2?: import('tailwind-merge').ClassNameValue;
+            h3?: import('tailwind-merge').ClassNameValue;
+            h4?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            base?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+            illustration?: import('tailwind-merge').ClassNameValue;
+            informationContainer?: import('tailwind-merge').ClassNameValue;
+            information?: import('tailwind-merge').ClassNameValue;
+            informationComponent?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
+    wrapper: string[];
+    base: string[];
+    illustration: string[];
+    icon: string[];
+    informationContainer: string[];
+    information: string[];
+    informationComponent: string[];
+    h1: string[];
+    h2: string[];
+    h3: string[];
+    h4: string[];
+    description: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    container: string[];
+    wrapper: string[];
+    base: string[];
+    illustration: string[];
+    icon: string[];
+    informationContainer: string[];
+    information: string[];
+    informationComponent: string[];
+    h1: string[];
+    h2: string[];
+    h3: string[];
+    h4: string[];
+    description: string[];
+}, undefined, unknown, unknown, undefined>>;
+interface ErrorStateBaseProps {
+    /**
+     * Callback function triggered when the main action button is pressed.
+     */
+    onButtonPress: () => void;
+    /**
+     * Custom label for the main action button. If not provided, uses default label from configuration.
+     * @default: Go to dashboard
+     */
+    buttonLabel?: string;
+    /**
+     * Custom main title for the error state. If not provided, uses default title from configuration.
+     * @default: Something went wrong
+     */
+    mainTitle?: ReactNode;
+    /**
+     * Custom main description for the error state. If not provided, uses default description from configuration.
+     */
+    mainDescription?: ReactNode;
+    /**
+     * Custom main description specifically for component-level display. If not provided, uses default from configuration.
+     * @default: Please refresh the page or check your connection. We’ve been notified of the issue and are working to resolve it as quickly as possible.
+     */
+    mainDescriptionComponent?: ReactNode;
+    /**
+     * Custom illustration to display. If not provided, uses default illustration from configuration.
+     * @default: Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible.
+     */
+    illustration?: UnityIllustrationAsset;
+    /**
+     * Custom icon to display. If not provided, uses default icon from configuration.
+     */
+    icon?: UnityIcon;
+    /**
+     * ARIA role for the error state container.
+     * @default "status"
+     */
+    role?: string;
+}
+interface KnownErrorStateProps extends ErrorStateBaseProps {
+    /**
+     * The error object containing the error message to display.
+     */
+    error: Error;
+    /**
+     * Additional description text to display alongside the error details.
+     * @default: Here's the technical error detail. If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:
+     */
+    detailDescription?: ReactNode;
+    /**
+     * Type identifier for known errors.
+     */
+    type: 'generic';
+}
+interface UnknownErrorStateProps extends ErrorStateBaseProps {
+    /**
+     * Custom label for the back button. If not provided, uses default label from configuration.
+     * @default: Back to dashboard
+     */
+    backButtonLabel?: ReactNode;
+    /**
+     * Must be undefined for unknown error states.
+     */
+    error: undefined;
+    /**
+     * Type identifier for unknown errors.
+     */
+    type: 'generic';
+}
+interface _404ErrorStateProps extends ErrorStateBaseProps {
+    /**
+     * Type identifier for 404 errors.
+     */
+    type: '404';
+    /**
+     * No error object needed for 404 states.
+     */
+    error?: never;
+}
+export type ErrorStateProps = KnownErrorStateProps | UnknownErrorStateProps | _404ErrorStateProps;
+/**
+ * The `ErrorState` component displays error information with contextual messaging and actions.
+ * It provides a consistent way to handle different types of errors (generic, 404) with appropriate visual feedback and user actions.
+ * The component adapts its layout based on container size and error type, supporting multiple breakpoints for optimal user experience.
+ * @param {ErrorStateProps} props - The props for the `ErrorState` component
+ * @see {@link ErrorStateProps} for all available props
+ * @example
+ * ```tsx
+ * import { ErrorState } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ErrorState
+ *       type="generic"
+ *       error={new Error('Something went wrong')}
+ *       onButtonPress={() => window.location.reload()}
+ *       buttonLabel="Retry"
+ *       mainTitle="Oops! Something went wrong"
+ *       mainDescription="We encountered an unexpected error. Please try again."
+ *     />
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/feedback-errorstate--docs) • [Design docs](https://www.payfit.design/)
+ */
+declare const ErrorState: import('react').ForwardRefExoticComponent<ErrorStateProps & import('react').RefAttributes<HTMLDivElement>>;
+export { ErrorState };

package/dist/esm/components/error-state/ErrorState.js

@@ -0,0 +1,240 @@
+import { jsx as e, jsxs as u } from "react/jsx-runtime";
+import { forwardRef as J, useRef as K, useCallback as O } from "react";
+import { Illustration as U } from "@payfit/unity-illustrations";
+import { useIntl as V } from "react-intl";
+import { tv as W } from "tailwind-variants";
+import { useContainerQueryLevel as X } from "../../hooks/use-container-query-level.js";
+import { Button as h } from "../button/Button.js";
+import { Code as Y } from "../code/Code.js";
+import { Icon as Z } from "../icon/Icon.js";
+import { Text as r } from "../text/Text.js";
+import { initConfig as _ } from "./initConfig.js";
+import { Collapsible as $ } from "./parts/Collapsible.js";
+const ee = W({
+  slots: {
+    container: [
+      "uy:@container uy:w-full uy:h-full uy:content-center uy:flex-1"
+    ],
+    wrapper: [
+      "uy:border-solid uy:border-border-neutral uy:border uy:rounded-200 uy:p-300",
+      "uy:@section:py-600 uy:@section:px-auto",
+      "uy:@page:border-0 uy:@page:py-auto uy:@page:px-auto",
+      "uy:@app:border-0 uy:@app:py-auto uy:@app:px-auto"
+    ],
+    base: [
+      "uy:max-w-[704px] uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-250 uy:w-full uy:justify-self-center"
+    ],
+    illustration: [
+      "uy:@section:block",
+      //common but start from section level
+      "uy:hidden",
+      //component
+      "uy:@page:w-[200px]",
+      // page
+      "uy:@section:w-[200px]",
+      //section
+      "uy:@app:w-[240px]"
+      //app
+    ],
+    icon: [
+      "uy:bg-surface-neutral-lowest uy:rounded-125 uy:p-100",
+      //component
+      "uy:@section:hidden"
+      // others
+    ],
+    informationContainer: [
+      "uy:flex uy:flex-col uy:items-center uy:justify-center uy:gap-150 uy:text-center uy"
+    ],
+    information: [
+      "uy:hidden",
+      //component
+      "",
+      //page
+      "uy:@section:block"
+      //section
+    ],
+    informationComponent: [
+      "uy:block",
+      //component
+      "uy:@section:hidden"
+      // others
+    ],
+    h1: ["uy:hidden uy:@app:block"],
+    // only on app
+    h2: ["uy:hidden uy:@page:@max-app:block"],
+    // only on page
+    h3: ["uy:hidden uy:@section:@max-page:block"],
+    // only on section
+    h4: ["uy:block uy:@section:hidden"],
+    // only on component
+    description: ["uy:hidden uy:@section:block uy:@section:w-full"]
+  }
+}), ne = (t, n) => {
+  const a = t.detailDescription ?? n?.detailDescription;
+  return /* @__PURE__ */ u($, { children: [
+    /* @__PURE__ */ e("div", { className: "uy:mb-200", children: a }),
+    /* @__PURE__ */ e(Y, { children: t.error.message })
+  ] });
+}, te = (t, n) => {
+  const a = t.backButtonLabel ?? n?.backButtonLabel;
+  return /* @__PURE__ */ e("div", { className: "uy:mt-200 uy:@section:block uy:hidden", children: /* @__PURE__ */ e(
+    h,
+    {
+      onClick: () => {
+        window.history.go(-1);
+      },
+      color: "primary",
+      variant: "ghost",
+      children: a
+    }
+  ) });
+}, oe = J((t, n) => {
+  const {
+    icon: a,
+    illustration: b,
+    onButtonPress: v,
+    buttonLabel: g,
+    mainTitle: x,
+    mainDescription: k,
+    mainDescriptionComponent: w,
+    type: m,
+    error: C,
+    role: N = "status"
+  } = t, {
+    base: D,
+    container: E,
+    wrapper: B,
+    illustration: L,
+    icon: M,
+    informationContainer: j,
+    information: I,
+    informationComponent: T,
+    description: R,
+    h1: S,
+    h2: P,
+    h3: z,
+    h4: Q
+  } = ee(), c = V(), q = _(c), y = K(null), { level: d } = X({ ref: y }), A = O(
+    (s) => {
+      y.current = s, n && (typeof n == "function" ? n(s) : n.current = s);
+    },
+    [n]
+  );
+  let i = m === "404" ? "404" : "unknown";
+  m === "generic" && C && (i = "known");
+  const o = q.get(i), p = b ?? o?.illustration, f = a ?? o?.icon, F = g ?? o?.buttonLabel, l = x ?? o?.mainTitle, G = k ?? o?.mainDescription, H = w ?? o?.mainDescriptionComponent;
+  return /* @__PURE__ */ e(
+    "div",
+    {
+      role: N,
+      className: E(),
+      ref: A,
+      "data-container-level": d,
+      children: /* @__PURE__ */ e("div", { className: B(), children: /* @__PURE__ */ u("div", { className: D(), children: [
+        p && /* @__PURE__ */ e(
+          U,
+          {
+            src: p,
+            variant: "picture",
+            alt: c.formatMessage({
+              id: "unity:component:error-state:common:illustration:alt",
+              defaultMessage: "Error states"
+            }),
+            className: L(),
+            isDecorative: !0
+          }
+        ),
+        f && /* @__PURE__ */ e(
+          Z,
+          {
+            src: f,
+            size: 24,
+            color: "content.neutral.low",
+            alt: c.formatMessage({
+              id: "unity:component:error-state:common:icon:alt",
+              defaultMessage: "Error states"
+            }),
+            className: M()
+          }
+        ),
+        /* @__PURE__ */ u("div", { className: j(), children: [
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "h1",
+              variant: "h1",
+              color: "content.neutral",
+              className: S(),
+              children: l
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "h2",
+              variant: "h2",
+              color: "content.neutral",
+              className: P(),
+              children: l
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "h3",
+              variant: "h3",
+              color: "content.neutral",
+              className: z(),
+              children: l
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "h4",
+              variant: "h4",
+              color: "content.neutral",
+              className: Q(),
+              children: l
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "p",
+              variant: "body",
+              color: "content.neutral.low",
+              className: I(),
+              children: G
+            }
+          ),
+          /* @__PURE__ */ e(
+            r,
+            {
+              asElement: "p",
+              variant: "body",
+              color: "content.neutral.low",
+              className: T(),
+              children: H
+            }
+          )
+        ] }),
+        /* @__PURE__ */ e(
+          h,
+          {
+            variant: d === "component" ? "ghost" : "primary",
+            onPress: v,
+            children: F
+          }
+        ),
+        i === "unknown" && te(t, o),
+        i === "known" && /* @__PURE__ */ e("div", { className: R(), children: ne(t, o) })
+      ] }) })
+    }
+  );
+});
+oe.displayName = "ErrorState";
+export {
+  oe as ErrorState,
+  ee as errorState
+};

package/dist/esm/components/error-state/initConfig.d.ts

@@ -0,0 +1,16 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { UnityIllustrationAsset } from '@payfit/unity-illustrations';
+import { ReactNode } from 'react';
+import { IntlShape } from 'react-intl';
+export type ErrorStateVariant = 'known' | 'unknown' | '404';
+export interface ErrorStateConfig {
+    illustration: UnityIllustrationAsset;
+    icon: UnityIcon;
+    mainTitle: ReactNode;
+    mainDescription: ReactNode;
+    mainDescriptionComponent?: ReactNode;
+    buttonLabel: ReactNode;
+    detailDescription?: ReactNode;
+    backButtonLabel?: ReactNode;
+}
+export declare const initConfig: (intl: IntlShape) => Map<ErrorStateVariant, ErrorStateConfig>;

package/dist/esm/components/error-state/initConfig.js

@@ -0,0 +1,149 @@
+import { jsx as r } from "react/jsx-runtime";
+import t from "@payfit/unity-illustrations/assets/EmptyStateIncidentPanel";
+import a from "@payfit/unity-illustrations/assets/EmptyStateResearch";
+import { RawLink as n } from "../link/RawLink.js";
+const c = (e) => /* @__PURE__ */ new Map([
+  [
+    "known",
+    {
+      illustration: t,
+      icon: "WarningCircleOutlined",
+      mainTitle: e.formatMessage(
+        {
+          id: "unity:component:error-state:common:main-title",
+          defaultMessage: "Something went wrong"
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      ),
+      mainDescription: e.formatMessage(
+        {
+          id: "unity:component:error-state:known:main-description",
+          defaultMessage: "Please refresh the page or check your connection.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible."
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      ),
+      mainDescriptionComponent: e.formatMessage(
+        {
+          id: "unity:component:error-state:common:main-description-component",
+          defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      ),
+      buttonLabel: e.formatMessage(
+        {
+          id: "unity:component:error-state:button:label",
+          defaultMessage: "Go to dashboard"
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      ),
+      detailDescription: e.formatMessage(
+        {
+          id: "unity:component:error-state:detail-description",
+          defaultMessage: "Here's the technical error detail.<br></br> <br></br>If the problem continues, you can send it to <Link>our customer support</Link> so we can help unblock you:"
+        },
+        {
+          br: () => /* @__PURE__ */ r("br", {}),
+          Link: (o) => /* @__PURE__ */ r(
+            n,
+            {
+              variant: "inline",
+              isExternal: !0,
+              color: "primary",
+              href: e.formatMessage({
+                id: "unity:component:common:customer-support:url"
+              }),
+              children: o
+            }
+          )
+        }
+      )
+    }
+  ],
+  [
+    "unknown",
+    {
+      illustration: t,
+      icon: "WarningCircleOutlined",
+      mainTitle: e.formatMessage(
+        {
+          id: "unity:component:error-state:common:main-title",
+          defaultMessage: "Something went wrong"
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      ),
+      mainDescription: e.formatMessage(
+        {
+          id: "unity:component:error-state:unknown:main-description",
+          defaultMessage: "Please refresh the page or try signing in again.<br></br>We’ve been notified of the issue and are working to resolve it as quickly as possible.<br></br>If the problem continues, please contact <Link>our customer support</Link>."
+        },
+        {
+          br: () => /* @__PURE__ */ r("br", {}),
+          Link: (o) => /* @__PURE__ */ r(
+            n,
+            {
+              variant: "inline",
+              isExternal: !0,
+              color: "primary",
+              href: e.formatMessage({
+                id: "unity:component:common:customer-support:url"
+              }),
+              children: o
+            }
+          )
+        }
+      ),
+      mainDescriptionComponent: e.formatMessage(
+        {
+          id: "unity:component:error-state:common:main-description-component",
+          defaultMessage: "Please refresh the page or try signing in again. We’ve been notified of the issue and are working to resolve it as quickly as possible."
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      ),
+      buttonLabel: e.formatMessage(
+        {
+          id: "unity:component:error-state:button:label",
+          defaultMessage: "Go to dashboard"
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      ),
+      backButtonLabel: e.formatMessage(
+        {
+          id: "unity:component:error-state:unknown:back-link:label",
+          defaultMessage: "Back to dashboard"
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      )
+    }
+  ],
+  [
+    "404",
+    {
+      illustration: a,
+      icon: "WarningCircleOutlined",
+      mainTitle: e.formatMessage(
+        {
+          id: "unity:component:error-state:404:main-title",
+          defaultMessage: "Sorry, we couldn’t find what you’re looking for"
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      ),
+      mainDescription: e.formatMessage(
+        {
+          id: "unity:component:error-state:404:main-description",
+          defaultMessage: "This item may have been moved or deleted.<br></br>You can try searching for it manually or start again from your dashboard."
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      ),
+      buttonLabel: e.formatMessage(
+        {
+          id: "unity:component:error-state:button:label",
+          defaultMessage: "Go to dashboard"
+        },
+        { br: () => /* @__PURE__ */ r("br", {}) }
+      )
+    }
+  ]
+]);
+export {
+  c as initConfig
+};

package/dist/esm/components/error-state/parts/Collapsible.d.ts

@@ -0,0 +1,59 @@
+import { PropsWithChildren, ReactNode } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const collapsible: import('tailwind-variants').TVReturnType<{
+    isExpanded: {
+        true: {
+            icon: string;
+        };
+        false: {
+            icon: string;
+        };
+    };
+}, {
+    base: string[];
+    heading: string;
+    button: string[];
+    title: string;
+    icon: string;
+    content: string;
+}, undefined, {
+    isExpanded: {
+        true: {
+            icon: string;
+        };
+        false: {
+            icon: string;
+        };
+    };
+}, {
+    base: string[];
+    heading: string;
+    button: string[];
+    title: string;
+    icon: string;
+    content: string;
+}, import('tailwind-variants').TVReturnType<{
+    isExpanded: {
+        true: {
+            icon: string;
+        };
+        false: {
+            icon: string;
+        };
+    };
+}, {
+    base: string[];
+    heading: string;
+    button: string[];
+    title: string;
+    icon: string;
+    content: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface CollapsibleProps extends PropsWithChildren<VariantProps<typeof collapsible>> {
+    children: ReactNode;
+}
+declare const Collapsible: {
+    ({ children, ...props }: CollapsibleProps): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { Collapsible };