@payfit/unity-components 1.1.0 → 1.2.0

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.js

@@ -1,34 +1,34 @@
 import { jsx as n } from "react/jsx-runtime";
 import { useContext as p } from "react";
 import { OverlayTriggerStateContext as u } from "react-aria-components";
-import { Button as m } from "../../../button/Button.js";
-const l = ({
+import { Button as i } from "../../../button/Button.js";
+const x = ({
   children: e,
-  variant: s,
+  variant: f,
   onPress: r,
   isLoading: c,
   icon: o,
   ...a
 }) => {
-  const i = p(u);
-  switch (s) {
+  const s = p(u);
+  switch (f) {
     case "close":
-      const f = r;
+      const m = r;
       return /* @__PURE__ */ n(
-        m,
+        i,
         {
           ...a,
           prefixIcon: o,
           variant: "secondary",
           onPress: (t) => {
-            f && f(t), i == null || i.close();
+            m && m(t), s?.close();
           },
           children: e
         }
       );
     case "confirm":
       return /* @__PURE__ */ n(
-        m,
+        i,
         {
           ...a,
           prefixIcon: o,
@@ -42,7 +42,7 @@ const l = ({
       );
     case "danger":
       return /* @__PURE__ */ n(
-        m,
+        i,
         {
           ...a,
           variant: "primary",
@@ -57,7 +57,7 @@ const l = ({
       );
   }
 };
-l.displayName = "DialogButton";
+x.displayName = "DialogButton";
 export {
-  l as DialogButton
+  x as DialogButton
 };

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

@@ -0,0 +1,196 @@
+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;
+            base?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+            description?: 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;
+            base?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+            illustration?: import('tailwind-merge').ClassNameValue;
+            informationContainer?: import('tailwind-merge').ClassNameValue;
+            information?: import('tailwind-merge').ClassNameValue;
+            informationComponent?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    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;
+            base?: import('tailwind-merge').ClassNameValue;
+            icon?: import('tailwind-merge').ClassNameValue;
+            description?: import('tailwind-merge').ClassNameValue;
+            illustration?: import('tailwind-merge').ClassNameValue;
+            informationContainer?: import('tailwind-merge').ClassNameValue;
+            information?: import('tailwind-merge').ClassNameValue;
+            informationComponent?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    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, {
+    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,153 @@
+import { jsx as n, jsxs as c } from "react/jsx-runtime";
+import { forwardRef as q } from "react";
+import { Illustration as A } from "@payfit/unity-illustrations";
+import { useIntl as F } from "react-intl";
+import { tv as G } from "tailwind-variants";
+import { Button as y } from "../button/Button.js";
+import { Code as H } from "../code/Code.js";
+import { Icon as J } from "../icon/Icon.js";
+import { Text as o } from "../text/Text.js";
+import { initConfig as K } from "./initConfig.js";
+import { Collapsible as O } from "./parts/Collapsible.js";
+const Q = G({
+  slots: {
+    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
+      "",
+      // page
+      "uy:@section:w-[220px]",
+      //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"]
+  }
+}), U = (t, i) => {
+  const r = t.detailDescription ?? i?.detailDescription;
+  return /* @__PURE__ */ c(O, { children: [
+    /* @__PURE__ */ n("div", { className: "uy:mb-200", children: r }),
+    /* @__PURE__ */ n(H, { children: t.error.message })
+  ] });
+}, V = (t, i) => {
+  const r = t.backButtonLabel ?? i?.backButtonLabel;
+  return /* @__PURE__ */ n("div", { className: "uy:mt-200", children: /* @__PURE__ */ n(
+    y,
+    {
+      onClick: () => {
+        window.history.go(-1);
+      },
+      color: "primary",
+      variant: "ghost",
+      children: r
+    }
+  ) });
+}, W = q((t, i) => {
+  const {
+    icon: r,
+    illustration: p,
+    onButtonPress: h,
+    buttonLabel: f,
+    mainTitle: b,
+    mainDescription: v,
+    mainDescriptionComponent: g,
+    type: u,
+    error: k,
+    role: x = "status"
+  } = t, {
+    base: w,
+    illustration: N,
+    icon: C,
+    informationContainer: D,
+    information: E,
+    informationComponent: B,
+    description: L,
+    h1: M,
+    h2: j,
+    h3: I,
+    h4: T
+  } = Q(), l = F(), S = K(l);
+  let a = u === "404" ? "404" : "unknown";
+  u === "generic" && k && (a = "known");
+  const e = S.get(a), m = p ?? e?.illustration, d = r ?? e?.icon, P = f ?? e?.buttonLabel, s = b ?? e?.mainTitle, z = v ?? e?.mainDescription, R = g ?? e?.mainDescriptionComponent;
+  return /* @__PURE__ */ n("div", { role: x, ref: i, className: "uy:@container uy:w-full", children: /* @__PURE__ */ c("div", { className: w(), children: [
+    m && /* @__PURE__ */ n(
+      A,
+      {
+        src: m,
+        variant: "picture",
+        alt: l.formatMessage({
+          id: "unity:component:error-state:common:illustration:alt",
+          defaultMessage: "Error states"
+        }),
+        className: N(),
+        isDecorative: !0
+      }
+    ),
+    d && /* @__PURE__ */ n(
+      J,
+      {
+        src: d,
+        size: 24,
+        color: "content.neutral.low",
+        alt: l.formatMessage({
+          id: "unity:component:error-state:common:icon:alt",
+          defaultMessage: "Error states"
+        }),
+        className: C()
+      }
+    ),
+    /* @__PURE__ */ c("div", { className: D(), children: [
+      /* @__PURE__ */ n(o, { asElement: "h1", variant: "h1", className: M(), children: s }),
+      /* @__PURE__ */ n(o, { asElement: "h2", variant: "h2", className: j(), children: s }),
+      /* @__PURE__ */ n(o, { asElement: "h3", variant: "h3", className: I(), children: s }),
+      /* @__PURE__ */ n(o, { asElement: "h4", variant: "h4", className: T(), children: s }),
+      /* @__PURE__ */ n(o, { asElement: "p", variant: "body", className: E(), children: z }),
+      /* @__PURE__ */ n(o, { asElement: "p", variant: "body", className: B(), children: R })
+    ] }),
+    /* @__PURE__ */ n(y, { variant: "primary", onPress: h, children: P }),
+    a === "unknown" && V(t, e),
+    a === "known" && /* @__PURE__ */ n("div", { className: L(), children: U(t, e) })
+  ] }) });
+});
+W.displayName = "ErrorState";
+export {
+  W as ErrorState,
+  Q 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 { Link as n } from "../link/Link.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 };