@payfit/unity-components 0.0.0-alpha.11

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

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

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

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

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

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

@@ -0,0 +1,8 @@
+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/Toast.context.js

@@ -0,0 +1,22 @@
+import { jsx as r } from "react/jsx-runtime";
+import { createContext as n, useContext as s } from "react";
+const o = n({
+  inline: !0
+});
+function a({
+  inline: t,
+  children: e
+}) {
+  return /* @__PURE__ */ r(o.Provider, { value: { inline: t }, children: e });
+}
+function x() {
+  const t = s(o);
+  if (!t)
+    throw new Error("useToastContext must be used within an ToastProvider");
+  return t;
+}
+export {
+  o as ToastContext,
+  a as ToastProvider,
+  x as useToastContext
+};

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

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

@@ -0,0 +1,21 @@
+import { jsx as t } from "react/jsx-runtime";
+import { Toaster as o } from "react-hot-toast";
+const s = {
+  error: {
+    duration: 1 / 0
+  },
+  success: {
+    duration: 5e3
+  }
+}, i = () => /* @__PURE__ */ t(
+  o,
+  {
+    position: "top-right",
+    gutter: 8,
+    toastOptions: { removeDelay: 0 }
+  }
+);
+export {
+  s as TOAST_CONFIG,
+  i as ToastManager
+};