@payfit/unity-components 0.0.0-alpha.11 → 0.0.0-alpha.6

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

@@ -1,73 +0,0 @@
-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

@@ -1,117 +0,0 @@
-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

@@ -1,72 +0,0 @@
-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

@@ -1,22 +0,0 @@
-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

@@ -1,59 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,13 +0,0 @@
-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.js

@@ -1,22 +0,0 @@
-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

@@ -1,6 +0,0 @@
-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

@@ -1,7 +0,0 @@
-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

@@ -1,150 +0,0 @@
-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

@@ -1,66 +0,0 @@
-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

@@ -1,27 +0,0 @@
-/**
- * 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

@@ -1,18 +0,0 @@
-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
-};