@payfit/unity-components 0.0.0-alpha.11

package/dist/esm/components/date-picker-field/DatePickerField.js

@@ -0,0 +1,73 @@
+import { jsxs as D, jsx as e } from "react/jsx-runtime";
+import { forwardRef as C } from "react";
+import { useFormContext as b } from "react-hook-form";
+import { tv as B } from "tailwind-variants";
+import { DatePicker as j } from "../date-picker/DatePicker.js";
+import { FormField as I } from "../form-field/FormField.js";
+import { FormControl as N } from "../form-field/parts/FormControl.js";
+import { FormFeedbackText as T } from "../form-field/parts/FormFeedbackText.js";
+import { FormHelperText as V } from "../form-field/parts/FormHelperText.js";
+import { FormLabel as g } from "../form-field/parts/FormLabel.js";
+const v = B({
+  base: "uy-flex uy-flex-col uy-gap-100"
+});
+function w({
+  name: r,
+  label: o,
+  defaultValue: t,
+  helperText: i,
+  feedbackText: m,
+  contextualLink: n,
+  isRequired: s,
+  isInvalid: a,
+  isLoading: c,
+  isDisabled: d,
+  isReadOnly: f,
+  requiredVariant: p,
+  ...l
+}, u) {
+  const { control: F, resetField: k, setValue: P } = b(), h = {
+    isRequired: s,
+    isInvalid: a,
+    isLoading: c,
+    isDisabled: d,
+    isReadOnly: f
+  }, x = () => {
+    k(r, {
+      keepTouched: !1,
+      keepDirty: !1,
+      keepError: !1
+    }), P(r, null, { shouldValidate: !1 });
+  }, y = l.onClearButtonPress ?? x;
+  return /* @__PURE__ */ D(
+    I,
+    {
+      control: F,
+      name: r,
+      className: v(),
+      ...h,
+      children: [
+        /* @__PURE__ */ e(g, { requiredVariant: p, children: o }),
+        i && /* @__PURE__ */ e(V, { children: i }),
+        /* @__PURE__ */ e(N, { children: /* @__PURE__ */ e(
+          j,
+          {
+            ref: u,
+            defaultValue: t,
+            onClearButtonPress: y,
+            ...l
+          }
+        ) }),
+        /* @__PURE__ */ e(T, { children: m }),
+        n
+      ]
+    }
+  );
+}
+const E = C(function(o, t) {
+  return w(o, t);
+});
+E.displayName = "DatePickerField";
+export {
+  E as DatePickerField
+};

package/dist/esm/components/dialog/Dialog.d.ts

@@ -0,0 +1,117 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+import { DialogTrigger } from 'react-aria-components';
+export declare const dialog: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    overlay: string[];
+    wrapper: string[];
+    content: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            content?: import('tailwind-merge').ClassNameValue;
+            overlay?: import('tailwind-merge').ClassNameValue;
+            wrapper?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+interface DialogProps extends PropsWithChildren<VariantProps<typeof dialog>> {
+    /** aria-label has to be defined if the dialog does not have a visible label*/
+    'aria-label'?: string;
+    /** (optional) modal opened by default or not **If it is set to true, the closing should be handled from outside** /*/
+    isOpen?: boolean;
+    /** it is used for controlled mode (need to be used with isOpen property) */
+    onOpenChange?: (isOpen: boolean) => void;
+    /** if false it does not allow to close the modal when click outside, default: true*/
+    isDismissable?: boolean;
+}
+/**
+ * The Dialog component provides a modal interface for displaying important information and gathering user input
+ * without requiring navigation to a different page. It maintains context and focus while demanding attention.
+ *
+ * Use Dialog when you need to capture user attention, gather critical input, or display important information
+ * that requires acknowledgment before proceeding.
+ *
+ * The Dialog consists of several parts that work together:
+ * - `DialogTitle`: Displays the title of the dialog
+ * - `DialogContent`: Contains the main content of the dialog (required)
+ * - `DialogActions`: Contains action buttons for user interaction
+ * - `DialogButton`: Handles specific actions (close, confirm, or danger)
+ * @param props - The props for the Dialog component
+ * @see {@link DialogProps} for all available props
+ * @example
+ * ```tsx
+ * import {
+ *   Dialog,
+ *   DialogTrigger,
+ *   DialogTitle,
+ *   DialogContent,
+ *   DialogActions,
+ *   DialogButton
+ * } from '@payfit/unity-components'
+ *
+ * function BasicExample() {
+ *   return (
+ *     <DialogTrigger>
+ *       <Button>Open dialog</Button>
+ *       <Dialog>
+ *         <DialogTitle>Important information</DialogTitle>
+ *         <DialogContent>
+ *           This content requires your attention before proceeding.
+ *         </DialogContent>
+ *         <DialogActions>
+ *           <DialogButton variant="close">Cancel</DialogButton>
+ *           <DialogButton variant="confirm">Confirm</DialogButton>
+ *         </DialogActions>
+ *       </Dialog>
+ *     </DialogTrigger>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API Docs](https://unity-components.payfit.io/?path=/docs/feedback-dialog--docs) • [Design Docs](https://www.payfit.design/24f360409/p/01f5dc-dialog)
+ */
+export declare function Dialog({ children, isOpen, onOpenChange, isDismissable, ...rest }: DialogProps): import("react/jsx-runtime").JSX.Element;
+export declare namespace Dialog {
+    var displayName: string;
+}
+export { DialogTrigger };

package/dist/esm/components/dialog/Dialog.js

@@ -0,0 +1,72 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Children as i, isValidElement as t } from "react";
+import { useId as s } from "react-aria";
+import { ModalOverlay as g, Modal as p, DialogContext as f, Dialog as c, DialogTrigger as b } from "react-aria-components";
+import { DialogTrigger as E } from "react-aria-components";
+import { tv as x } from "tailwind-variants";
+import { DialogActions as D } from "./parts/DialogActions.js";
+import { DialogButton as v } from "./parts/DialogActions/DialogButton.js";
+const w = x({
+  slots: {
+    overlay: [
+      "uy-fixed uy-inset-0 uy-z-10 uy-overflow-y-auto",
+      "uy-flex uy-min-h-full uy-items-center uy-justify-center uy-text-center",
+      "uy-backdrop-blur-sm uy-bg-utility-backdrop/65"
+    ],
+    wrapper: [
+      "uy-w-full md:uy-max-w-[640px]",
+      "uy-m-400 md:uy-m-0",
+      "uy-overflow-hidden uy-rounded-200 uy-bg-white uy-p-300 md:uy-p-400",
+      "uy-text-left uy-align-middle uy-shadow-floating",
+      "uy-bg-surface-neutral"
+    ],
+    content: [
+      "uy-outline-none uy-relative uy-flex uy-flex-col uy-gap-300 md:uy-gap-400"
+    ]
+  }
+}), h = (e) => {
+  const a = i.toArray(e).find(
+    (r) => t(r) && r.type === D
+  );
+  return t(a) ? i.toArray(a.props.children).some(
+    (r) => t(
+      r
+    ) && r.type === v && r.props.variant === "danger"
+  ) : !1;
+};
+function N({
+  children: e,
+  isOpen: a,
+  onOpenChange: r,
+  isDismissable: u = !0,
+  ...y
+}) {
+  const l = s(), { overlay: n, wrapper: d, content: m } = w();
+  return /* @__PURE__ */ o(
+    g,
+    {
+      isDismissable: u,
+      isOpen: a,
+      onOpenChange: r,
+      className: n(),
+      children: /* @__PURE__ */ o(p, { className: d(), "data-unity-dialog": !0, "data-dd-privacy": "allow", children: /* @__PURE__ */ o(f.Provider, { value: { "aria-describedby": l }, children: /* @__PURE__ */ o(
+        c,
+        {
+          role: h(e) ? "alertdialog" : "dialog",
+          "aria-modal": "true",
+          className: m(),
+          "aria-label": y["aria-label"],
+          "aria-describedby": l,
+          children: e
+        }
+      ) }) })
+    }
+  );
+}
+N.displayName = "Dialog";
+b.displayName = "DialogTrigger";
+export {
+  N as Dialog,
+  E as DialogTrigger,
+  w as dialog
+};

package/dist/esm/components/dialog/parts/DialogActions/DialogButton.d.ts

@@ -0,0 +1,22 @@
+import { UnityIcon } from '@payfit/unity-icons';
+import { PropsWithChildren } from 'react';
+import { ButtonProps } from '../../../button/Button.js';
+type ButtonVariant = 'close' | 'confirm' | 'danger';
+type OnPressParameters = Parameters<NonNullable<ButtonProps['onPress']>>[0];
+export type DialogButtonProps<T extends ButtonVariant> = {
+    /** the different variants for the button */
+    variant: T;
+    /** the icon, it is a discouraged practice, except for `danger` variant which has a `WarningCircleOutlined` as default */
+    icon?: UnityIcon;
+    isLoading?: T extends 'close' ? never : ButtonProps['isLoading'];
+    onPress?: T extends 'close' ? ButtonProps['onPress'] : ButtonProps['onPress'] | ((e: OnPressParameters) => Promise<OnPressParameters>);
+};
+/**
+ * A `DialogButton` is a button which has to be included into `DialogActions` container
+ *
+ */
+declare const DialogButton: {
+    <T extends ButtonVariant>({ children, variant, onPress, isLoading, icon, }: PropsWithChildren<DialogButtonProps<T>>): import("react/jsx-runtime").JSX.Element | undefined;
+    displayName: string;
+};
+export { DialogButton };

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

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

package/dist/esm/components/dialog/parts/DialogActions.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare const DialogActions: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DialogActions };

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

@@ -0,0 +1,13 @@
+import { jsx as a } from "react/jsx-runtime";
+const s = ({ children: t }) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: "uy-flex uy-justify-end uy-items-start uy-gap-100 uy-self-stretch",
+    "data-dd-privacy": "allow",
+    children: t
+  }
+);
+s.displayName = "DialogActions";
+export {
+  s as DialogActions
+};

package/dist/esm/components/dialog/parts/DialogContent.d.ts

@@ -0,0 +1,4 @@
+declare const DialogContent: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLElement>>;
+export { DialogContent };

package/dist/esm/components/dialog/parts/DialogContent.js

@@ -0,0 +1,22 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { useContextProps as n, DialogContext as d } from "react-aria-components";
+const m = i(
+  (t, o) => {
+    [t] = n(t, o, d);
+    const { children: r, ...a } = t;
+    return /* @__PURE__ */ e(
+      "div",
+      {
+        id: a["aria-describedby"],
+        "data-dd-privacy": "mask",
+        className: "uy-typography-body uy-text-content-neutral",
+        children: r
+      }
+    );
+  }
+);
+m.displayName = "DialogContent";
+export {
+  m as DialogContent
+};

package/dist/esm/components/dialog/parts/DialogTitle.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare const DialogTitle: {
+    ({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { DialogTitle };

package/dist/esm/components/dialog/parts/DialogTitle.js

@@ -0,0 +1,7 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Heading as o } from "react-aria-components";
+const i = ({ children: a }) => /* @__PURE__ */ t(o, { slot: "title", className: "uy-typography-h2", "data-dd-privacy": "allow", children: a });
+i.displayName = "DialogTitle";
+export {
+  i as DialogTitle
+};

package/dist/esm/components/fieldset/Fieldset.d.ts

@@ -0,0 +1,150 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+export declare const fieldset: import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}>, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, import('tailwind-variants').TVReturnType<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    base: string;
+    legend: string;
+    description: string;
+    fieldsContainer: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}, {
+    isLegendHidden: {
+        true: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+        false: {
+            legend: string;
+            description: string;
+            fieldsContainer: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface FieldsetProps extends PropsWithChildren<VariantProps<typeof fieldset>> {
+    /**
+     * The legend of the fieldset.
+     */
+    legend: string;
+    /**
+     * An optional description of the fieldset.
+     */
+    description?: string;
+    /**
+     * Whether to hide the legend of the fieldset.
+     */
+    isLegendHidden?: boolean;
+}
+/**
+ * The `Fieldset` component groups related form fields together with an accessible structure.
+ * It provides visual organization and semantic HTML for form sections, making forms more understandable and navigable.
+ * @param {FieldsetProps} props - The props for the `Fieldset` component
+ * @see {@link FieldsetProps} for all available props
+ * @example
+ * ```tsx
+ * import { Fieldset } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Fieldset
+ *       legend="Personal Information"
+ *       description="Please provide your contact details"
+ *       isLegendHidden={false}
+ *     >
+ *       <TextField name="firstName" label="First name" />
+ *       <TextField name="lastName" label="Last name" />
+ *     </Fieldset>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
+ */
+declare const Fieldset: import('react').ForwardRefExoticComponent<FieldsetProps & import('react').RefAttributes<HTMLFieldSetElement>>;
+export { Fieldset };

package/dist/esm/components/fieldset/Fieldset.js

@@ -0,0 +1,66 @@
+import { jsxs as f, jsx as t } from "react/jsx-runtime";
+import { forwardRef as m } from "react";
+import { useId as g } from "react-aria";
+import { tv as b } from "tailwind-variants";
+const x = b({
+  slots: {
+    base: "uy-p-0 uy-m-0 [&+&]:uy-mt-500 [&:last-of-type]:uy-mb-500",
+    legend: "uy-typography-h3 uy-text-content-neutral",
+    description: "uy-block uy-typography-body uy-mt-100 uy-text-content-neutral",
+    fieldsContainer: "uy-flex uy-flex-col uy-gap-250"
+  },
+  variants: {
+    isLegendHidden: {
+      true: {
+        legend: "uy-sr-only",
+        description: "uy-sr-only",
+        fieldsContainer: "uy-mt-0"
+      },
+      false: {
+        legend: "uy-block",
+        description: "uy-block",
+        fieldsContainer: "uy-mt-300"
+      }
+    }
+  },
+  defaultVariants: {
+    isLegendHidden: !1
+  }
+}), h = m(
+  ({ children: i, ...d }, n) => {
+    const s = g(), { legend: l, description: e, isLegendHidden: o, ...r } = d, {
+      base: a,
+      legend: y,
+      description: c,
+      fieldsContainer: u
+    } = x({ isLegendHidden: o }), p = e ? `${s}-fieldset-description` : void 0;
+    return /* @__PURE__ */ f(
+      "fieldset",
+      {
+        "data-dd-privacy": "allow",
+        ...r,
+        ref: n,
+        className: a(),
+        "aria-describedby": p,
+        children: [
+          /* @__PURE__ */ t("legend", { className: y(), children: l }),
+          e && /* @__PURE__ */ t(
+            "span",
+            {
+              id: `${s}-fieldset-description`,
+              "data-fieldset-slot": "description",
+              className: c(),
+              children: e
+            }
+          ),
+          /* @__PURE__ */ t("div", { className: u(), children: i })
+        ]
+      }
+    );
+  }
+);
+h.displayName = "Fieldset";
+export {
+  h as Fieldset,
+  x as fieldset
+};

package/dist/esm/components/fieldset/parts/FieldGroup.d.ts

@@ -0,0 +1,27 @@
+/**
+ * The `FieldGroup` component arranges form fields in a responsive grid layout within a Fieldset.
+ * It optimizes space by displaying fields side-by-side on larger screens while stacking them on mobile devices.
+ * @param {PropsWithChildren<object>} props - The props for the `FieldGroup` component
+ * @example
+ * ```tsx
+ * import { Fieldset, FieldGroup } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <Fieldset legend="Personal Information">
+ *       <FieldGroup>
+ *         <TextField name="firstName" label="First name" />
+ *         <TextField name="lastName" label="Last name" />
+ *       </FieldGroup>
+ *       <TextField name="email" label="Email" />
+ *     </Fieldset>
+ *   )
+ * }
+ * ```
+ * @remarks
+ * [API](https://unity-components.payfit.io/?path=/docs/forms-fieldset-fieldgroup--docs) • [Design docs](https://www.payfit.design/24f360409/p/1151cf-form-layout)
+ */
+declare const FieldGroup: import('react').ForwardRefExoticComponent<object & {
+    children?: import('react').ReactNode | undefined;
+} & import('react').RefAttributes<HTMLDivElement>>;
+export { FieldGroup };

package/dist/esm/components/fieldset/parts/FieldGroup.js

@@ -0,0 +1,18 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+const u = p(
+  ({ children: r, ...o }, d) => /* @__PURE__ */ i(
+    "div",
+    {
+      ...o,
+      ref: d,
+      role: "group",
+      className: "uy-grid uy-grid-cols-1 uy-gap-y-250 md:uy-grid-cols-2 md:uy-gap-x-200",
+      children: r
+    }
+  )
+);
+u.displayName = "FieldGroup";
+export {
+  u as FieldGroup
+};