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

package/dist/esm/components/text-area/TextArea.d.ts

@@ -1,220 +0,0 @@
-import { TextAreaProps as AriaTextAreaProps } from 'react-aria-components';
-export declare const textArea: import('tailwind-variants').TVReturnType<{
-    isInvalid: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-            state: string;
-        };
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-}, {
-    base: string;
-    inputWrapper: string;
-    input: string;
-    state: string;
-    resizeHandle: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    isInvalid: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-            state: string;
-        };
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-}, {
-    isInvalid: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-            state: string;
-        };
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-}>, {
-    isInvalid: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-            state: string;
-        };
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-}, {
-    base: string;
-    inputWrapper: string;
-    input: string;
-    state: string;
-    resizeHandle: string;
-}, import('tailwind-variants').TVReturnType<{
-    isInvalid: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-            state: string;
-        };
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-}, {
-    base: string;
-    inputWrapper: string;
-    input: string;
-    state: string;
-    resizeHandle: string;
-}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
-    isInvalid: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-            state: string;
-        };
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-}, {
-    isInvalid: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-            state: string;
-        };
-    };
-    isReadOnly: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-    isDisabled: {
-        true: {
-            base: string;
-            inputWrapper: string;
-            input: string;
-        };
-    };
-}>, unknown, unknown, undefined>>;
-export interface TextAreaProps extends AriaTextAreaProps {
-    /** Whether the field is in an invalid state */
-    isInvalid?: boolean;
-    /** Whether the field is in a loading state */
-    isLoading?: boolean;
-    /** Whether the field is disabled */
-    isDisabled?: boolean;
-    /** Whether the field is read-only */
-    isReadOnly?: boolean;
-    /** Whether the textarea is resizable */
-    isResizable?: boolean;
-}
-/**
- * The `TextArea` component displays a styled, single HTML `<textarea>` field that follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control.
- * @param {TextAreaProps} props - Regular props from the `<textarea>` HTML element, plus state-related props
- * @see {@link TextAreaProps} for all available props
- * @example
- * ```tsx
- * import { Input } from '@payfit/unity-components'
- *
- * function Example() {
- *   const [value, setValue] = useState()
- *
- *   const handleTextChange = (e) => {
- *     setValue(e.target.value)
- *   }
- *
- *   return (
- *    <TextArea
- *      id="my-text-area"
- *      isResizable cols={50} rows={5} onChange={handleTextChange}
- *    >
- *      {value}
- *    </TextArea>
- * }
- * ```
- */
-declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
-export { TextArea };

package/dist/esm/components/text-area/TextArea.js

@@ -1,163 +0,0 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
-import { forwardRef as v } from "react";
-import { TextArea as w } from "react-aria-components";
-import { useIntl as M } from "react-intl";
-import { tv as z } from "tailwind-variants";
-import { useResizable as L } from "../../hooks/use-resizable.js";
-import { Icon as D } from "../icon/Icon.js";
-import { Spinner as N } from "../spinner/Spinner.js";
-const W = z({
-  slots: {
-    base: "uy-flex uy-border uy-border-solid uy-rounded-100 focus-within:uy-outline-none focus-within:uy-ring-2 focus-within:uy-ring-utility-focus-ring focus-within:uy-ring-offset-2 active:uy-border-border-form-active uy-overflow-hidden uy-relative",
-    inputWrapper: "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-grow uy-flex-shrink uy-outline-none uy-typography-body placeholder:uy-text-content-neutral-lowest uy-resize-none",
-    state: "uy-flex uy-gap-50 uy-flex-shrink-0 uy-basis-250",
-    resizeHandle: "uy-absolute uy-bottom-25 uy-right-25 uy-w-100 uy-h-100 uy-cursor-se-resize uy-flex uy-items-center uy-justify-center"
-  },
-  variants: {
-    isInvalid: {
-      true: {
-        base: "uy-border-border-form-error uy-bg-surface-form-error",
-        inputWrapper: "uy-bg-surface-form-error",
-        input: "uy-bg-surface-form-error",
-        state: "uy-text-content-form-error"
-      }
-    },
-    isReadOnly: {
-      true: {
-        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
-        inputWrapper: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
-        input: "uy-bg-surface-form-disabled uy-text-content-form-readonly"
-      }
-    },
-    isDisabled: {
-      true: {
-        base: "uy-border-border-form-disabled uy-bg-surface-form-disabled",
-        inputWrapper: "uy-bg-surface-form-disabled uy-text-content-form-disabled",
-        input: "uy-bg-surface-form-disabled uy-text-content-form-disabled"
-      }
-    }
-  },
-  compoundVariants: [
-    {
-      isInvalid: !1,
-      isDisabled: !1,
-      isReadOnly: !1,
-      className: {
-        base: "uy-border-border-form-enabled uy-bg-surface-form-enabled",
-        inputWrapper: "uy-border-border-form-enabled uy-bg-surface-form-enabled",
-        input: "uy-text-content-form-enabled uy-bg-surface-form-enabled",
-        state: "uy-text-content-neutral-disabled"
-      }
-    }
-  ],
-  defaultVariants: {
-    isInvalid: !1,
-    isDisabled: !1,
-    isReadOnly: !1
-  }
-}), k = v(
-  ({
-    isInvalid: n,
-    isLoading: s,
-    isDisabled: a,
-    isReadOnly: r,
-    isResizable: i = !1,
-    ...y
-  }, b) => {
-    const o = M(), { containerRef: l, handleResizeStart: m } = L({
-      isDisabled: !i || a || r
-    }), { base: c, inputWrapper: p, input: g, state: x, resizeHandle: h } = W({
-      isInvalid: n,
-      isDisabled: a,
-      isReadOnly: r
-    });
-    return /* @__PURE__ */ t("div", { ref: l, className: c(), children: [
-      /* @__PURE__ */ t("div", { className: p(), children: [
-        /* @__PURE__ */ e(
-          w,
-          {
-            "data-dd-privacy": "mask",
-            ...y,
-            ref: b,
-            className: g(),
-            "aria-busy": s,
-            readOnly: r
-          }
-        ),
-        /* @__PURE__ */ t("div", { className: x(), children: [
-          s && /* @__PURE__ */ e(
-            N,
-            {
-              color: "inherit",
-              size: "small",
-              label: o.formatMessage({
-                id: "unity:component:form-field:form-input:spinner:label",
-                defaultMessage: "Loading"
-              })
-            }
-          ),
-          n && /* @__PURE__ */ e(
-            D,
-            {
-              src: "WarningCircleOutlined",
-              color: "content.form.invalid",
-              alt: o.formatMessage({
-                id: "unity:component:form-field:form-input:error:alt",
-                defaultMessage: "Error"
-              })
-            }
-          )
-        ] })
-      ] }),
-      i && !a && !r && /* @__PURE__ */ e(
-        "div",
-        {
-          className: h(),
-          onMouseDown: m,
-          role: "button",
-          tabIndex: 0,
-          "aria-label": o.formatMessage({
-            id: "unity:component:form-field:textarea:resize-handle:label",
-            defaultMessage: "Resize textarea"
-          }),
-          onKeyDown: (u) => {
-            var d, f;
-            (u.key === "Enter" || u.key === " ") && (u.preventDefault(), (f = (d = l.current) == null ? void 0 : d.querySelector("textarea")) == null || f.focus());
-          },
-          children: /* @__PURE__ */ t(
-            "svg",
-            {
-              role: "presentation",
-              width: "8",
-              height: "8",
-              viewBox: "0 0 8 8",
-              fill: "none",
-              children: [
-                /* @__PURE__ */ e(
-                  "path",
-                  {
-                    d: "M0.72774 8L0 7.28745L7.27226 0L8 0.712547L0.72774 8Z",
-                    fill: "#8B8D98"
-                  }
-                ),
-                /* @__PURE__ */ e(
-                  "path",
-                  {
-                    d: "M4.73172 8L4 7.27073L7.26828 4L8 4.72927L4.73172 8Z",
-                    fill: "#8B8D98"
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
-    ] });
-  }
-);
-k.displayName = "TextArea";
-export {
-  k as TextArea,
-  W as textArea
-};

package/dist/esm/components/text-field/TextField.d.ts

@@ -1,63 +0,0 @@
-import { ForwardedRef, HTMLAttributes, JSX, 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 { InputProps } from '../input/Input.js';
-import { LabelProps } from '../label/Label.js';
-import { TextAreaProps } from '../text-area/TextArea.js';
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
-    /** The name of the field, which should match the form schema. */
-    name: TName;
-    /** The label for the text field. */
-    label: string;
-    /** If true, the text field will be a multi-line text area. */
-    multiline?: boolean;
-    /** The default value of the text field. */
-    defaultValue?: HTMLAttributes<HTMLInputElement>['defaultValue'];
-    /** Helper text to display below the text field. */
-    helperText?: ReactNode;
-    /** Feedback text to display below the text field. */
-    feedbackText?: ReactNode;
-    /** A contextual link to display below the text field. */
-    contextualLink?: ReactNode;
-}
-interface TextFieldWithInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends FieldProps<TFieldValues, TName>, Omit<InputProps, 'name'> {
-    multiline?: false;
-    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
-}
-interface TextFieldWithTextAreaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends FieldProps<TFieldValues, TName>, Omit<TextAreaProps, 'name'> {
-    multiline?: true;
-    type?: never;
-}
-export type TextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TextFieldWithInputProps<TFieldValues, TName> | TextFieldWithTextAreaProps<TFieldValues, TName>;
-type TextFieldComponent = (<TSchema extends Schema>(props: TextFieldProps<ZodInfer<TSchema>> & {
-    ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
-}) => JSX.Element) & {
-    displayName?: string;
-};
-/**
- * The `TextField` component renders a full field that can accept text input, supporting single-line and multi-line text fields, and integrates with the `Form` component automatically.
- * @example
- * ```tsx
- * const schema = z.object({
- *   name: z.string(),
- *   email: z.string().email()
- * })
- *
- * function MyForm() {
- *   const { Form } = useUnityForm(schema)
- *
- *   return (
- *     <Form action={handleSubmit}>
- *       <TextField<typeof schema>
- *         name="name"  // Only "name" | "email" allowed
- *         label="Name"
- *       />
- *     </Form>
- *   )
- * }
- * ```
- * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
- */
-declare const TextField: TextFieldComponent;
-export { TextField };

package/dist/esm/components/text-field/TextField.js

@@ -1,78 +0,0 @@
-import { jsxs as B, jsx as o } from "react/jsx-runtime";
-import { forwardRef as I } from "react";
-import { useFormContext as g } from "react-hook-form";
-import { tv as j } from "tailwind-variants";
-import { FormField as k } from "../form-field/FormField.js";
-import { FormControl as L } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.js";
-import { FormHelperText as P } from "../form-field/parts/FormHelperText.js";
-import { FormLabel as v } from "../form-field/parts/FormLabel.js";
-import { Input as w } from "../input/Input.js";
-import { TextArea as A } from "../text-area/TextArea.js";
-const H = j({
-  base: "uy-flex uy-flex-col uy-gap-100"
-});
-function R({
-  name: t,
-  label: e,
-  defaultValue: r,
-  helperText: m,
-  feedbackText: l,
-  contextualLink: c,
-  multiline: i,
-  isRequired: p,
-  isInvalid: a,
-  isLoading: f,
-  isDisabled: d,
-  isReadOnly: u,
-  requiredVariant: x,
-  ...n
-}, s) {
-  const { control: F, setValue: C } = g(), T = {
-    isRequired: p,
-    isInvalid: a,
-    isLoading: f,
-    isDisabled: d,
-    isReadOnly: u
-  }, h = !i, { onClearButtonPress: y } = h ? n : {}, b = y ?? (() => {
-    C(t, "");
-  });
-  return /* @__PURE__ */ B(
-    k,
-    {
-      control: F,
-      name: t,
-      className: H(),
-      ...T,
-      children: [
-        /* @__PURE__ */ o(v, { requiredVariant: x, children: e }),
-        m && /* @__PURE__ */ o(P, { children: m }),
-        /* @__PURE__ */ o(L, { children: i ? /* @__PURE__ */ o(
-          A,
-          {
-            ref: s,
-            defaultValue: r,
-            ...n
-          }
-        ) : /* @__PURE__ */ o(
-          w,
-          {
-            ref: s,
-            defaultValue: r,
-            onClearButtonPress: b,
-            ...n
-          }
-        ) }),
-        /* @__PURE__ */ o(N, { children: l }),
-        c
-      ]
-    }
-  );
-}
-const S = I(function(e, r) {
-  return R(e, r);
-});
-S.displayName = "TextField";
-export {
-  S as TextField
-};

package/dist/esm/components/toast/Toast.context.d.ts

@@ -1,8 +0,0 @@
-import { PropsWithChildren } from 'react';
-type ToastContextValue = {
-    inline: boolean;
-};
-export declare const ToastContext: import('react').Context<ToastContextValue>;
-export declare function ToastProvider({ inline, children, }: PropsWithChildren<ToastContextValue>): import("react/jsx-runtime").JSX.Element;
-export declare function useToastContext(): ToastContextValue;
-export {};

package/dist/esm/components/toast/ToastManager.d.ts

@@ -1,7 +0,0 @@
-import { UnityToastProps } from './UnityToast.js';
-interface ToastOptions {
-    duration: number;
-}
-declare const TOAST_CONFIG: Record<UnityToastProps['variant'], ToastOptions>;
-declare const ToastManager: () => import("react/jsx-runtime").JSX.Element;
-export { ToastManager, TOAST_CONFIG };

package/dist/esm/components/toast/UnityToast.d.ts

@@ -1,55 +0,0 @@
-import { PropsWithChildren } from 'react';
-import { VariantProps } from 'tailwind-variants';
-declare const unityToast: import('tailwind-variants').TVReturnType<{
-    variant: {
-        success: string;
-        error: string;
-    };
-}, undefined, "sm:uy-w-[416px] uy-border uy-border-solid uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        success: string;
-        error: string;
-    };
-}, {
-    variant: {
-        success: string;
-        error: string;
-    };
-}>, {
-    variant: {
-        success: string;
-        error: string;
-    };
-}, undefined, import('tailwind-variants').TVReturnType<{
-    variant: {
-        success: string;
-        error: string;
-    };
-}, undefined, "sm:uy-w-[416px] uy-border uy-border-solid uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125", import('tailwind-variants/dist/config.js').TVConfig<{
-    variant: {
-        success: string;
-        error: string;
-    };
-}, {
-    variant: {
-        success: string;
-        error: string;
-    };
-}>, unknown, unknown, undefined>>;
-export interface UnityToastProps extends Required<Pick<VariantProps<typeof unityToast>, 'variant'>> {
-    /** callback to call to close the toast*/
-    onClose: () => void;
-    /** render the toast in inline mode or not (by default true) */
-    inline?: boolean;
-}
-/**
- * The `UnityToast` is the component which will contain a title, a content, and action
- * - `ToastTitle`: The title of the toast
- * - `ToastContent`(optional): The content of the toast
- * - `ToastAction`(optional): The action on the toast
- */
-declare const UnityToast: {
-    ({ children, onClose, variant, inline, ...rest }: PropsWithChildren<UnityToastProps>): import("react/jsx-runtime").JSX.Element;
-    displayName: string;
-};
-export { UnityToast };

package/dist/esm/components/toast/UnityToast.js

@@ -1,93 +0,0 @@
-import { jsx as r, jsxs as l } from "react/jsx-runtime";
-import { isValidElement as n, Fragment as c, Children as y } from "react";
-import { useIntl as m } from "react-intl";
-import { tv as d } from "tailwind-variants";
-import { IconButton as p } from "../icon-button/IconButton.js";
-import { Icon as f } from "../icon/Icon.js";
-import { ToastTitle as b } from "./parts/ToastTitle.js";
-import { ToastProvider as g } from "./Toast.context.js";
-const x = d({
-  base: "sm:uy-w-[416px] uy-border uy-border-solid uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125",
-  variants: {
-    variant: {
-      success: "uy-border-border-success",
-      error: "uy-border-border-danger"
-    }
-  }
-}), T = (e) => {
-  const s = n(e) && e.type === c ? e.props.children : e;
-  if (y.toArray(s).filter(
-    (o) => n(o) && o.type === b
-  ).length !== 1)
-    throw new Error("UnityToast must have one ToastTitle component");
-}, h = ({
-  children: e,
-  onClose: s,
-  variant: t,
-  inline: o = !0,
-  ...i
-}) => {
-  const a = m();
-  T(e);
-  const u = x({ variant: t });
-  return /* @__PURE__ */ r(g, { inline: o, children: /* @__PURE__ */ l(
-    "div",
-    {
-      "data-dd-privacy": "mask",
-      ...i,
-      tabIndex: -1,
-      role: t === "error" ? "alert" : "status",
-      "aria-atomic": "true",
-      "aria-live": t === "error" ? "assertive" : "polite",
-      className: u,
-      children: [
-        /* @__PURE__ */ l("div", { className: "uy-flex uy-flex-row uy-grow", children: [
-          /* @__PURE__ */ r(
-            f,
-            {
-              src: t === "success" ? "CheckCircleFilled" : "WarningCircleFilled",
-              color: t === "success" ? "content.success" : "content.danger",
-              className: "uy-mt-100",
-              alt: a.formatMessage({
-                id: "unity:component:toast:icon:status",
-                defaultMessage: "Status"
-              })
-            }
-          ),
-          /* @__PURE__ */ r(
-            "div",
-            {
-              className: `${o ? "uy-flex-col" : "uy-flex-row uy-justify-between"} uy-flex uy-grow uy-ml-125`,
-              children: e
-            }
-          )
-        ] }),
-        /* @__PURE__ */ r(
-          "div",
-          {
-            role: "presentation",
-            className: "uy-border-l-[1px] uy-border-solid uy-border-border-neutral uy-self-stretch"
-          }
-        ),
-        /* @__PURE__ */ r(
-          p,
-          {
-            icon: "CloseOutlined",
-            iconRole: "presentation",
-            label: a.formatMessage({
-              id: "unity:component:common:close:label",
-              defaultMessage: "Close"
-            }),
-            variant: "ghost",
-            color: "neutral",
-            onClick: s
-          }
-        )
-      ]
-    }
-  ) });
-};
-h.displayName = "UnityToast";
-export {
-  h as UnityToast
-};

package/dist/esm/components/toast/parts/ToastAction.d.ts

@@ -1,9 +0,0 @@
-import { PropsWithChildren } from 'react';
-export interface ToastActionProps {
-    onPress: () => void;
-}
-declare function ToastAction({ children, onPress, }: PropsWithChildren<ToastActionProps>): import("react/jsx-runtime").JSX.Element;
-declare namespace ToastAction {
-    var displayName: string;
-}
-export { ToastAction };