@payfit/unity-components 0.0.0-alpha.8 → 1.0.0

package/dist/esm/components/text/Text.variants.mjs

@@ -1,108 +0,0 @@
-import { tv as t } from "tailwind-variants";
-const n = t({
-  base: "",
-  variants: {
-    variant: {
-      inherit: "",
-      h1: "uy-typography-h1",
-      h2: "uy-typography-h2",
-      h3: "uy-typography-h3",
-      h4: "uy-typography-h4",
-      overline: "uy-typography-overline",
-      subtitle: "uy-typography-subtitle",
-      displayTitle: "uy-typography-display-title",
-      displayBody: "uy-typography-display-body",
-      body: "uy-typography-body",
-      bodyStrong: "uy-typography-body-strong",
-      bodySmall: "uy-typography-body-small",
-      bodySmallStrong: "uy-typography-body-small-strong",
-      bodyLarge: "uy-typography-body-large",
-      bodyLargeStrong: "uy-typography-body-large-strong",
-      action: "uy-typography-action",
-      actionLarge: "uy-typography-body-large",
-      actionSmall: "uy-typography-body-small"
-    },
-    color: {
-      inherit: "uy-text-inherit",
-      "content.primary": "uy-text-content-primary",
-      "content.primary.enabled": "uy-text-content-primary-enabled",
-      "content.primary.hover": "uy-text-content-primary-hover",
-      "content.primary.pressed": "uy-text-content-primary-pressed",
-      "content.primary.focus": "uy-text-content-primary-focus",
-      "content.primary.active": "uy-text-content-primary-active",
-      "content.primary.disabled": "uy-text-content-primary-disabled",
-      "content.neutral": "uy-text-content-neutral",
-      "content.neutral.enabled": "uy-text-content-neutral-enabled",
-      "content.neutral.hover": "uy-text-content-neutral-hover",
-      "content.neutral.pressed": "uy-text-content-neutral-pressed",
-      "content.neutral.focus": "uy-text-content-neutral-focus",
-      "content.neutral.active": "uy-text-content-neutral-active",
-      "content.neutral.disabled": "uy-text-content-neutral-disabled",
-      "content.neutral.low": "uy-text-content-neutral-low",
-      "content.neutral.lowest": "uy-text-content-neutral-lowest",
-      "content.neutral.lowest.enabled": "uy-text-content-neutral-lowest-enabled",
-      "content.neutral.lowest.hover": "uy-text-content-neutral-lowest-hover",
-      "content.neutral.lowest.pressed": "uy-text-content-neutral-lowest-pressed",
-      "content.neutral.lowest.focus": "uy-text-content-neutral-lowest-focus",
-      "content.neutral.lowest.active": "uy-text-content-neutral-lowest-active",
-      "content.neutral.lowest.disabled": "uy-text-content-neutral-lowest-disabled",
-      "content.danger": "uy-text-content-danger",
-      "content.danger.enabled": "uy-text-content-danger-enabled",
-      "content.danger.hover": "uy-text-content-danger-hover",
-      "content.danger.pressed": "uy-text-content-danger-pressed",
-      "content.danger.focus": "uy-text-content-danger-focus",
-      "content.danger.active": "uy-text-content-danger-active",
-      "content.danger.disabled": "uy-text-content-danger-disabled",
-      "content.warning": "uy-text-content-warning",
-      "content.warning.enabled": "uy-text-content-warning-enabled",
-      "content.warning.hover": "uy-text-content-warning-hover",
-      "content.warning.pressed": "uy-text-content-warning-pressed",
-      "content.warning.focus": "uy-text-content-warning-focus",
-      "content.warning.active": "uy-text-content-warning-active",
-      "content.warning.disabled": "uy-text-content-warning-disabled",
-      "content.success": "uy-text-content-success",
-      "content.success.enabled": "uy-text-content-success-enabled",
-      "content.success.hover": "uy-text-content-success-hover",
-      "content.success.pressed": "uy-text-content-success-pressed",
-      "content.success.focus": "uy-text-content-success-focus",
-      "content.success.active": "uy-text-content-success-active",
-      "content.success.disabled": "uy-text-content-success-disabled",
-      "content.info": "uy-text-content-info",
-      "content.info.enabled": "uy-text-content-info-enabled",
-      "content.info.hover": "uy-text-content-info-hover",
-      "content.info.pressed": "uy-text-content-info-pressed",
-      "content.info.focus": "uy-text-content-info-focus",
-      "content.info.active": "uy-text-content-info-active",
-      "content.info.disabled": "uy-text-content-info-disabled",
-      "content.promo": "uy-text-content-promo",
-      "content.form.enabled": "uy-text-content-form",
-      "content.form.hover": "uy-text-content-form-hover",
-      "content.form.pressed": "uy-text-content-form-pressed",
-      "content.form.focus": "uy-text-content-form-focus",
-      "content.form.active": "uy-text-content-form-active",
-      "content.form.disabled": "uy-text-content-form-disabled",
-      "content.form.read-only": "uy-text-content-form-read-only",
-      "content.form.invalid": "uy-text-content-form-invalid",
-      "content.inverted": "uy-text-content-inverted",
-      "content.inverted.enabled": "uy-text-content-inverted-enabled",
-      "content.inverted.hover": "uy-text-content-inverted-hover",
-      "content.inverted.pressed": "uy-text-content-inverted-pressed",
-      "content.inverted.focus": "uy-text-content-inverted-focus",
-      "content.inverted.active": "uy-text-content-inverted-active",
-      "content.inverted.disabled": "uy-text-content-inverted-disabled"
-    },
-    isTruncated: {
-      true: "uy-block uy-truncate"
-    },
-    isLineClamped: {
-      true: "uy-line-clamp-[var(--uy-text-line-clamp)]"
-    }
-  },
-  defaultVariants: {
-    variant: "body",
-    isTruncated: !1
-  }
-});
-export {
-  n as text
-};

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

@@ -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').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').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.mjs

@@ -1,161 +0,0 @@
-import { jsxs as r, 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.mjs";
-import { Icon as D } from "../icon/Icon.mjs";
-import { Spinner as N } from "../spinner/Spinner.mjs";
-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
-  }
-}), A = v(
-  ({
-    isInvalid: n,
-    isLoading: s,
-    isDisabled: t,
-    isReadOnly: o,
-    isResizable: i = !1,
-    ...y
-  }, b) => {
-    const a = M(), { containerRef: l, handleResizeStart: m } = L({
-      isDisabled: !i || t || o
-    }), { base: c, inputWrapper: p, input: g, state: x, resizeHandle: h } = W({
-      isInvalid: n,
-      isDisabled: t,
-      isReadOnly: o
-    });
-    return /* @__PURE__ */ r("div", { ref: l, className: c(), children: [
-      /* @__PURE__ */ r("div", { className: p(), children: [
-        /* @__PURE__ */ e(
-          w,
-          {
-            ...y,
-            ref: b,
-            className: g(),
-            "aria-busy": s
-          }
-        ),
-        /* @__PURE__ */ r("div", { className: x(), children: [
-          s && /* @__PURE__ */ e(
-            N,
-            {
-              color: "inherit",
-              size: "small",
-              label: a.formatMessage({
-                id: "unity:component:form-field:form-input:spinner:label",
-                defaultMessage: "Loading"
-              })
-            }
-          ),
-          n && /* @__PURE__ */ e(
-            D,
-            {
-              src: "WarningCircleOutlined",
-              color: "content.form.invalid",
-              alt: a.formatMessage({
-                id: "unity:component:form-field:form-input:error:alt",
-                defaultMessage: "Error"
-              })
-            }
-          )
-        ] })
-      ] }),
-      i && !t && !o && /* @__PURE__ */ e(
-        "div",
-        {
-          className: h(),
-          onMouseDown: m,
-          role: "button",
-          tabIndex: 0,
-          "aria-label": a.formatMessage({
-            id: "unity:component:form-field:textarea:resize-handle:label",
-            defaultMessage: "Resize textarea"
-          }),
-          onKeyDown: (u) => {
-            var f, d;
-            (u.key === "Enter" || u.key === " ") && (u.preventDefault(), (d = (f = l.current) == null ? void 0 : f.querySelector("textarea")) == null || d.focus());
-          },
-          children: /* @__PURE__ */ r(
-            "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"
-                  }
-                )
-              ]
-            }
-          )
-        }
-      )
-    ] });
-  }
-);
-A.displayName = "TextArea";
-export {
-  A as TextArea,
-  W as textArea
-};

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

@@ -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.mjs';
-import { InputProps } from '../input/Input.mjs';
-import { LabelProps } from '../label/Label.mjs';
-import { TextAreaProps } from '../text-area/TextArea.mjs';
-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.mjs

@@ -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.mjs";
-import { FormControl as L } from "../form-field/parts/FormControl.mjs";
-import { FormFeedbackText as N } from "../form-field/parts/FormFeedbackText.mjs";
-import { FormHelperText as P } from "../form-field/parts/FormHelperText.mjs";
-import { FormLabel as v } from "../form-field/parts/FormLabel.mjs";
-import { Input as w } from "../input/Input.mjs";
-import { TextArea as A } from "../text-area/TextArea.mjs";
-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.mts

@@ -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.mts

@@ -1,7 +0,0 @@
-import { UnityToastProps } from './UnityToast.mjs';
-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 };