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

package/dist/esm/components/date-picker/DatePicker.js

@@ -1,15 +1,15 @@
-import { jsxs as c, jsx as a } from "react/jsx-runtime";
-import { forwardRef as W } from "react";
-import { uyTv as m } from "@payfit/unity-themes";
-import { DatePicker as I, Group as P, Button as U, Popover as j, Dialog as E } from "react-aria-components";
-import { useIntl as M } from "react-intl";
-import { DateCalendar as O } from "../date-calendar/DateCalendar.js";
-import { Icon as R } from "../icon/Icon.js";
-import { DateInput as G } from "./parts/DateInput.js";
-const T = m({
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { forwardRef as V } from "react";
+import { uyTv as b } from "@payfit/unity-themes";
+import { DatePicker as N, Group as O, Button as W, Popover as I, Dialog as U } from "react-aria-components";
+import { useIntl as B } from "react-intl";
+import { DateCalendar as j } from "../date-calendar/DateCalendar.js";
+import { Icon as E } from "../icon/Icon.js";
+import { DateInput as M } from "./parts/DateInput.js";
+const R = b({
   slots: {
     base: [
-      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-100",
+      "uy:group uy:flex uy:h-500 uy:border uy:border-solid uy:rounded-75",
       "uy:active:border-border-form-active uy:data-[focus-visible]:border-border-form-active"
     ],
     inputWrapper: [
@@ -20,7 +20,7 @@ const T = m({
       "uy:group-[:has(button:focus)]:data-[focus-within]:outline-none uy:group-[:has(button:focus)]:data-[focus-within]:outline-offset-0 uy:group-[:has(button:focus)]:data-[focus-within]:outline-transparent"
     ],
     suffix: [
-      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-100 uy:text-content-neutral-low",
+      "uy:flex-grow-0 uy:content-center uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:border-l uy:border-solid uy:rounded-r-75 uy:text-content-neutral-low",
       "uy:hover:bg-surface-neutral-hover uy:active:bg-surface-neutral-pressed uy:active:border-border-form-active uy:data-[pressed]:bg-surface-neutral-pressed uy:data-[pressed]:border-border-form-active",
       "uy:focus-visible:outline-2 uy:focus-visible:outline-utility-focus-ring uy:focus-visible:outline-offset-[3px]"
     ]
@@ -58,7 +58,7 @@ const T = m({
       }
     }
   ]
-}), $ = m({
+}), G = b({
   base: "uy:overflow-auto uy:shadow-floating uy:border uy:border-solid uy:border-border-neutral uy:bg-surface-neutral uy:rounded-75",
   variants: {
     isEntering: {
@@ -68,68 +68,68 @@ const T = m({
       true: "uy:animate-out uy:fade-out uy:data-[placement-bottom]:slide-out-to-top-1 uy:data-[placement-top]:slide-out-to-bottom-1 uy:duration-150 uy:ease-in"
     }
   }
-}), q = W(
+}), T = V(
   ({
-    value: f,
-    defaultValue: n,
-    isInvalid: b,
-    isLoading: p,
-    isDisabled: t,
-    isReadOnly: u,
-    onClearButtonPress: d,
-    onBlur: o,
-    onFocus: i,
-    onChange: s,
-    onOpenChange: l,
-    id: v,
+    value: u,
+    defaultValue: i,
+    isInvalid: n,
+    isLoading: y,
+    isDisabled: o,
+    isReadOnly: t,
+    onClearButtonPress: c,
+    onBlur: s,
+    onFocus: d,
+    onChange: m,
+    onOpenChange: p,
+    id: g,
     ...e
-  }, z) => {
-    const g = M(), { base: x, inputWrapper: h, suffix: D } = T({
-      isInvalid: !!b,
-      isReadOnly: !!u,
-      isDisabled: !!t
-    }), y = (r) => {
-      s == null || s(r);
+  }, $) => {
+    const h = B(), { base: v, inputWrapper: x, suffix: D } = R({
+      isInvalid: !!n,
+      isReadOnly: !!t,
+      isDisabled: !!o
+    }), l = (r) => {
+      m?.(r);
     }, w = (r) => {
-      l == null || l(r), r ? i == null || i() : o == null || o();
-    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, V = () => {
-      d == null || d();
+      p?.(r), r ? d?.() : s?.();
+    }, k = (r) => e.isDateUnavailable ? e.isDateUnavailable(r) : !1, C = () => {
+      c?.();
     };
-    return /* @__PURE__ */ c(
-      I,
+    return /* @__PURE__ */ f(
+      N,
       {
         "data-dd-privacy": "mask",
         ...e,
-        className: x(),
-        value: f,
-        defaultValue: n,
+        className: v(),
+        value: u,
+        defaultValue: i,
         minValue: e.minValue,
         maxValue: e.maxValue,
-        isReadOnly: !!u,
-        isDisabled: !!t,
-        onChange: y,
-        onFocus: i,
-        onBlur: o,
+        isReadOnly: !!t,
+        isDisabled: !!o,
+        onChange: l,
+        onFocus: d,
+        onBlur: s,
         onOpenChange: w,
         isDateUnavailable: k,
         children: [
-          /* @__PURE__ */ c(P, { className: h(), id: v, children: [
+          /* @__PURE__ */ f(O, { className: x(), id: g, children: [
             /* @__PURE__ */ a(
-              G,
+              M,
               {
-                isLoading: p,
-                isDisabled: t,
-                isReadOnly: u,
-                isInvalid: b,
-                onClearButtonPress: V
+                isLoading: y,
+                isDisabled: o,
+                isReadOnly: t,
+                isInvalid: n,
+                onClearButtonPress: C
               }
             ),
-            /* @__PURE__ */ a(U, { className: D(), isDisabled: u || t, children: /* @__PURE__ */ a(
-              R,
+            /* @__PURE__ */ a(W, { className: D(), isDisabled: t || o, children: /* @__PURE__ */ a(
+              E,
               {
                 src: "CalendarBlankOutlined",
                 color: "inherit",
-                alt: g.formatMessage({
+                alt: h.formatMessage({
                   id: "unity:component:form-field:date-picker:calendar-button",
                   defaultMessage: "Open Calendar"
                 })
@@ -137,17 +137,17 @@ const T = m({
             ) })
           ] }),
           /* @__PURE__ */ a(
-            j,
+            I,
             {
-              className: ({ isEntering: r, isExiting: N }) => $({ isEntering: r, isExiting: N }),
-              children: /* @__PURE__ */ a(E, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
-                O,
+              className: ({ isEntering: r, isExiting: P }) => G({ isEntering: r, isExiting: P }),
+              children: /* @__PURE__ */ a(U, { className: "uy:p-150", "data-dd-privacy": "mask", children: /* @__PURE__ */ a(
+                j,
                 {
-                  value: f,
-                  defaultValue: n,
+                  value: u,
+                  defaultValue: i,
                   minValue: e.minValue,
                   maxValue: e.maxValue,
-                  onChange: y,
+                  onChange: l,
                   firstDayOfWeek: e.firstDayOfWeek
                 }
               ) })
@@ -158,7 +158,7 @@ const T = m({
     );
   }
 );
-q.displayName = "DatePicker";
+T.displayName = "DatePicker";
 export {
-  q as DatePicker
+  T as DatePicker
 };

package/dist/esm/components/date-picker/parts/DateInput.js

@@ -1,12 +1,12 @@
-import { jsxs as i, jsx as e } from "react/jsx-runtime";
+import { jsxs as l, jsx as e } from "react/jsx-runtime";
 import { useContext as b } from "react";
-import { uyTv as d } from "@payfit/unity-themes";
+import { uyTv as i } from "@payfit/unity-themes";
 import { DatePickerStateContext as g, DateInput as x, DateSegment as v } from "react-aria-components";
 import { useIntl as I } from "react-intl";
 import { CircularIconButton as h } from "../../icon-button/CircularIconButton.js";
 import { Icon as D } from "../../icon/Icon.js";
-import { Spinner as M } from "../../spinner/Spinner.js";
-const N = d({
+import { Spinner as C } from "../../spinner/Spinner.js";
+const M = i({
   base: "uy:group uy:box-content uy:rounded-25 uy:px-25 uy:text-end uy:tabular-nums! uy:outline-none uy:typography-body uy:focus:bg-surface-form-active uy:focus:rounded-25 uy:focus:text-content-inverted uy:data-[disabled]:text-content-form-disabled",
   variants: {
     isPlaceholder: {
@@ -18,7 +18,7 @@ const N = d({
       false: ""
     }
   }
-}), w = d({
+}), N = i({
   slots: {
     base: "uy:flex uy:gap-50 uy:flex-grow uy:pt-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100",
     input: "uy:flex uy:gap-25 uy:w-fit uy:grow",
@@ -54,47 +54,47 @@ const N = d({
     }
   ]
 });
-function O({
-  isLoading: n,
-  isInvalid: u,
-  isReadOnly: s,
-  isDisabled: l,
-  onClearButtonPress: a
+function P({
+  isLoading: r,
+  isInvalid: o,
+  isReadOnly: n,
+  isDisabled: s,
+  onClearButtonPress: d
 }) {
-  const o = I(), t = b(g), { dateValue: c } = t, { base: m, input: y, state: f } = w({
-    isInvalid: !!u,
-    isReadOnly: !!s,
-    isDisabled: !!l
-  }), p = c && !n && !s && !l;
-  return /* @__PURE__ */ i("div", { className: m(), children: [
-    /* @__PURE__ */ e(x, { className: y(), children: (r) => /* @__PURE__ */ e(
+  const t = I(), u = b(g), { dateValue: c } = u, { base: m, input: y, state: f } = N({
+    isInvalid: !!o,
+    isReadOnly: !!n,
+    isDisabled: !!s
+  }), p = c && !r && !n && !s;
+  return /* @__PURE__ */ l("div", { className: m(), children: [
+    /* @__PURE__ */ e(x, { className: y(), children: (a) => /* @__PURE__ */ e(
       v,
       {
-        segment: r,
-        className: N({
-          isPlaceholder: r.isPlaceholder,
-          isLiteral: r.type === "literal"
+        segment: a,
+        className: M({
+          isPlaceholder: a.isPlaceholder,
+          isLiteral: a.type === "literal"
         })
       }
     ) }),
-    /* @__PURE__ */ i("div", { className: f(), children: [
-      n && /* @__PURE__ */ e(
-        M,
+    /* @__PURE__ */ l("div", { className: f(), children: [
+      r && /* @__PURE__ */ e(
+        C,
         {
           color: "inherit",
           size: "small",
-          label: o.formatMessage({
+          label: t.formatMessage({
             id: "unity:component:common:loading:label",
             defaultMessage: "Loading..."
           })
         }
       ),
-      u && /* @__PURE__ */ e(
+      o && /* @__PURE__ */ e(
         D,
         {
           src: "WarningCircleOutlined",
           color: "content.form.invalid",
-          alt: o.formatMessage({
+          alt: t.formatMessage({
             id: "unity:component:form-field:form-input:error:alt",
             defaultMessage: "Error"
           })
@@ -104,21 +104,21 @@ function O({
         h,
         {
           slot: null,
-          title: o.formatMessage({
+          title: t.formatMessage({
             id: "unity:component:common:clear:title",
             defaultMessage: "Clear"
           }),
           icon: "CloseOutlined",
           onPress: () => {
-            t == null || t.setValue(null), a == null || a();
+            u?.setValue(null), d?.();
           }
         }
       )
     ] })
   ] });
 }
-O.displayName = "DateInput";
+P.displayName = "DateInput";
 export {
-  O as DateInput,
-  w as dateInput
+  P as DateInput,
+  N as dateInput
 };

package/dist/esm/components/date-picker-field/DatePickerField.d.ts

@@ -1,7 +1,7 @@
 import { CalendarDate } from '@internationalized/date';
+import { StandardSchemaV1 } from '@standard-schema/spec';
 import { ForwardedRef, ReactNode } from 'react';
 import { FieldPath, FieldValues } from 'react-hook-form';
-import { infer as ZodInfer } from 'zod';
 import { Schema } from '../../hooks/use-form.types.js';
 import { DatePickerProps } from '../date-picker/DatePicker.js';
 import { LabelProps } from '../label/Label.js';
@@ -45,7 +45,7 @@ export type TypedDatePickerFieldProps<TFieldValues extends FieldValues = FieldVa
     name: TName;
 };
 type DatePickerFieldComponent = {
-    <TSchema extends Schema>(props: TypedDatePickerFieldProps<ZodInfer<TSchema>> & {
+    <TSchema extends Schema>(props: TypedDatePickerFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
         ref?: ForwardedRef<HTMLDivElement>;
     }): React.JSX.Element;
     displayName?: string;

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,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 };