@payfit/unity-components 2.46.13 → 2.46.14

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

@@ -0,0 +1,35 @@
+import { jsx as c } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { useFieldContext as f } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as x } from "../form-field/TanstackFormField.context.js";
+import { TextArea as p } from "./TextArea.js";
+const T = u(
+  ({ onChange: i, onBlur: o, isReadOnly: l, isDisabled: d, ...n }, s) => {
+    const e = f(), a = x(), m = e.state.meta.isTouched && !e.state.meta.isValid, r = [a.helperTextId, a.feedbackTextId].filter(Boolean).join(" ");
+    return /* @__PURE__ */ c(
+      p,
+      {
+        ...n,
+        ref: s,
+        id: a.inputId,
+        value: e.state.value,
+        onChange: (t) => {
+          e.handleChange(t.target.value), i?.(t);
+        },
+        onBlur: (t) => {
+          e.handleBlur(), o?.(t);
+        },
+        isReadOnly: l,
+        isDisabled: d,
+        isInvalid: m,
+        "aria-labelledby": a.labelId,
+        "aria-describedby": r.length > 0 ? r : void 0,
+        "aria-details": a.contextualLinkId
+      }
+    );
+  }
+);
+T.displayName = "TanstackTextArea";
+export {
+  T as TanstackTextArea
+};

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

@@ -0,0 +1,128 @@
+import { TextAreaProps as AriaTextAreaProps } from 'react-aria-components/TextArea';
+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, {
+    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, 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,164 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { forwardRef as x } from "react";
+import { uyTv as h } from "@payfit/unity-themes";
+import { TextArea as v } from "react-aria-components/TextArea";
+import { useIntl as w } from "react-intl";
+import { useResizable as M } from "../../hooks/use-resizable.js";
+import { Icon as z } from "../icon/Icon.js";
+import { Spinner as L } from "../spinner/Spinner.js";
+const N = h({
+  slots: {
+    base: "uy:flex uy:border uy:border-solid uy:rounded-100 uy:sm:rounded-75 uy:focus-within:outline-none uy:focus-within:ring-2 uy:focus-within:ring-utility-focus-ring uy:focus-within:ring-offset-2 uy:active:border-border-form-active uy:overflow-hidden uy:relative",
+    inputWrapper: "uy:flex uy:gap-50 uy:flex-grow uy:pt-125 uy:sm:pt-100 uy:pb-125 uy:sm:pb-100 uy:pl-150 uy:pr-150 uy:rounded-100 uy:sm:rounded-75",
+    input: "uy:flex-grow uy:flex-shrink uy:outline-none uy:typography-body uy:placeholder: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-form-disabled"
+      }
+    }
+  ],
+  defaultVariants: {
+    isInvalid: !1,
+    isDisabled: !1,
+    isReadOnly: !1
+  }
+}), W = x(
+  ({
+    isInvalid: o,
+    isLoading: n,
+    isDisabled: r,
+    isReadOnly: t,
+    isResizable: i = !1,
+    ...d
+  }, f) => {
+    const u = w(), { containerRef: l, handleResizeStart: y } = M({
+      isDisabled: !i || r || t
+    }), { base: m, inputWrapper: b, input: c, state: p, resizeHandle: g } = N({
+      isInvalid: o,
+      isDisabled: r,
+      isReadOnly: t
+    });
+    return /* @__PURE__ */ a("div", { ref: l, className: m(), children: [
+      /* @__PURE__ */ a("div", { className: b(), children: [
+        /* @__PURE__ */ e(
+          v,
+          {
+            "data-dd-privacy": "mask",
+            ...d,
+            ref: f,
+            className: c(),
+            "aria-busy": n,
+            "aria-invalid": o,
+            readOnly: t,
+            disabled: r
+          }
+        ),
+        /* @__PURE__ */ a("div", { className: p(), children: [
+          n && /* @__PURE__ */ e(
+            L,
+            {
+              color: "inherit",
+              size: "small",
+              label: u.formatMessage({
+                id: "unity:component:form-field:form-input:spinner:label",
+                defaultMessage: "Loading"
+              })
+            }
+          ),
+          o && /* @__PURE__ */ e(
+            z,
+            {
+              src: "WarningCircleOutlined",
+              color: "content.form.invalid",
+              alt: u.formatMessage({
+                id: "unity:component:form-field:form-input:error:alt",
+                defaultMessage: "Error"
+              })
+            }
+          )
+        ] })
+      ] }),
+      i && !r && !t && /* @__PURE__ */ e(
+        "div",
+        {
+          className: g(),
+          onMouseDown: y,
+          role: "button",
+          tabIndex: 0,
+          "aria-label": u.formatMessage({
+            id: "unity:component:form-field:textarea:resize-handle:label",
+            defaultMessage: "Resize textarea"
+          }),
+          onKeyDown: (s) => {
+            (s.key === "Enter" || s.key === " ") && (s.preventDefault(), l.current?.querySelector("textarea")?.focus());
+          },
+          children: /* @__PURE__ */ a(
+            "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"
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+W.displayName = "TextArea";
+export {
+  W as TextArea,
+  N as textArea
+};

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

@@ -0,0 +1,79 @@
+import { ReactNode } from 'react';
+import { TanstackInputProps } from '../input/TanstackInput.js';
+import { LabelProps } from '../label/Label.js';
+import { TanstackTextAreaProps } from '../text-area/TanstackTextArea.js';
+interface FieldProps extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The label for the text field. */
+    label: string;
+    /** If true, the text field will be a multi-line text area. */
+    multiline?: boolean;
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** A contextual link to display below the text field. */
+    contextualLink?: ReactNode;
+}
+interface TextFieldWithInputProps extends FieldProps, TanstackInputProps {
+    multiline?: false;
+    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
+}
+interface TextFieldWithTextAreaProps extends FieldProps, TanstackTextAreaProps {
+    multiline?: true;
+    type?: never;
+}
+export type TextFieldProps = TextFieldWithInputProps | TextFieldWithTextAreaProps;
+/**
+ * The `TanstackTextField` component renders a full field (label, input or textarea)
+ * wired to the TanStack Form context. It manages state and accessibility via the
+ * context provided by `useTanstackUnityForm` and `<form.AppField name="…">`.
+ *
+ * Behavior:
+ * - Single-line: renders `TanstackInput`.
+ * - Multi-line: renders `TanstackTextArea`.
+ * - Displays the label (`TanstackFormLabel`), helper text (`TanstackFormHelperText`),
+ *   feedback messages (`TanstackFormFeedbackText`), and an optional contextual link.
+ *
+ * Accessibility:
+ * - Automatically wires `aria-labelledby`, `aria-describedby` (helper/feedback), and
+ *   `aria-details` using identifiers from the `a11y` context.
+ *
+ * Key props:
+ * - `label: string` — label text.
+ * - `multiline?: boolean` — when true, renders a textarea; otherwise, an input.
+ * - `defaultValue?` — initial value passed to the native control (the field remains
+ *   controlled by the form context afterwards).
+ * - `helperText?: ReactNode` — helper text displayed below the field.
+ * - `contextualLink?: ReactNode` — optional contextual link, referenced via `aria-details`.
+ * - Inherits props from `TanstackInput` or `TanstackTextArea` depending on `multiline`.
+ * - `isRequired?`, `requiredVariant?` — control the required indicator in the label.
+ *
+ * Example:
+ * ```tsx
+ * import { TanstackTextField } from "@/components/text-field/TanstackTextField"
+ * import { useTanstackUnityForm } from "@/hooks/use-tanstack-form"
+ *
+ * function Example() {
+ *  const schema = z.object({
+ *     name: z.string(),
+ *     email: z.string().email()
+ *  })
+ *
+ *   const form = useTanstackUnityForm<{ name: string }>({ validators: {
+ *     onBlur: schema,
+ *   } })
+ *   return (
+ *     <form>
+ *       <form.AppField name="name">
+ *         {() => (
+ *           <TanstackTextField label="Name" helperText="Your full name" />
+ *         )}
+ *       </form.AppField>
+ *     </form>
+ *   )
+ * }
+ * ```
+ * @remarks Migration from `TextField` (non‑TanStack):
+ * - Do not pass a `name` prop to the field: use `<form.AppField name="…">`.
+ * - `value`, `defaultValue`, and `isInvalid` are derived from the TanStack form context.
+ */
+declare const TanstackTextField: import('react').ForwardRefExoticComponent<TextFieldProps & import('react').RefAttributes<HTMLInputElement | HTMLTextAreaElement>>;
+export { TanstackTextField };

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

@@ -0,0 +1,60 @@
+import { jsxs as k, jsx as o } from "react/jsx-runtime";
+import { forwardRef as F } from "react";
+import { TanstackFormFeedbackText as x } from "../form-field/parts/TanstackFormFeedbackText.js";
+import { TanstackFormHelperText as u } from "../form-field/parts/TanstackFormHelperText.js";
+import { TanstackFormLabel as C } from "../form-field/parts/TanstackFormLabel.js";
+import { TanstackFormField as P } from "../form-field/TanstackFormField.js";
+import { TanstackInput as b } from "../input/TanstackInput.js";
+import { TanstackTextArea as B } from "../text-area/TanstackTextArea.js";
+function h({
+  label: m,
+  helperText: t,
+  contextualLink: s,
+  multiline: a,
+  isRequired: c,
+  isLoading: i,
+  isDisabled: l,
+  isReadOnly: p,
+  requiredVariant: T,
+  ...r
+}, n) {
+  const e = {
+    isLoading: i,
+    isDisabled: l,
+    isReadOnly: p
+  }, d = !a, { onClearButtonPress: f } = d ? r : {};
+  return /* @__PURE__ */ k(P, { children: [
+    /* @__PURE__ */ o(
+      C,
+      {
+        requiredVariant: T,
+        isRequired: c,
+        children: m
+      }
+    ),
+    t && /* @__PURE__ */ o(u, { children: t }),
+    a ? /* @__PURE__ */ o(
+      B,
+      {
+        ref: n,
+        ...e,
+        ...r
+      }
+    ) : /* @__PURE__ */ o(
+      b,
+      {
+        ref: n,
+        onClearButtonPress: f,
+        ...e,
+        ...r
+      }
+    ),
+    /* @__PURE__ */ o(x, {}),
+    s
+  ] });
+}
+const j = F(h);
+j.displayName = "TanstackTextField";
+export {
+  j as TanstackTextField
+};

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

@@ -0,0 +1,65 @@
+import { StandardSchemaV1 } from '@standard-schema/spec';
+import { ForwardedRef, HTMLAttributes, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+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<StandardSchemaV1.InferOutput<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.
+ * @deprecated React Hook Form components are deprecated. Use the TanStack Form version instead.
+ * @see Storybook docs: https://unity-components.payfit.io/?path=/docs/forms-introduction-to-unity-forms--docs
+ */
+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 { uyTv as g } from "@payfit/unity-themes";
+import { useFormContext as j } from "react-hook-form";
+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 = g({
+  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 } = j(), T = {
+    isRequired: p,
+    isInvalid: a,
+    isLoading: f,
+    isDisabled: d,
+    isReadOnly: u
+  }, y = !i, { onClearButtonPress: h } = y ? n : {}, b = h ?? (() => {
+    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/timeline/Timeline.context.d.ts

@@ -0,0 +1,16 @@
+import { PropsWithChildren } from 'react';
+/**
+ * Global Timeline configuration context
+ * Provides orientation and type to all nested Timeline components (TimelineStep, TimelineMarker, etc.)
+ *
+ * Note: This context is separate from TimelineStepContentContext to maintain single responsibility:
+ * - TimelineContext: Global configuration (orientation, type) - used by all components
+ * - TimelineStepContentContext: Content-specific data (statusSlot) - used only within TimelineStepContent
+ */
+export interface TimelineContextValue {
+    orientation: 'vertical' | 'horizontal';
+    type: 'default' | 'numbered';
+}
+export declare const TimelineContext: import('react').Context<TimelineContextValue | null>;
+export declare function TimelineProvider({ children, orientation, type, }: PropsWithChildren<TimelineContextValue>): import("react/jsx-runtime").JSX.Element;
+export declare function useTimelineContext(): TimelineContextValue;

package/dist/esm/components/timeline/Timeline.context.js

@@ -0,0 +1,23 @@
+import { jsx as i } from "react/jsx-runtime";
+import { createContext as r, useContext as m } from "react";
+const t = r(null);
+function s({
+  children: e,
+  orientation: n,
+  type: o
+}) {
+  return /* @__PURE__ */ i(t.Provider, { value: { orientation: n, type: o }, children: e });
+}
+function c() {
+  const e = m(t);
+  if (!e)
+    throw new Error(
+      "useTimelineContext must be used within a Timeline component. Make sure to wrap your TimelineStep components with <Timeline>."
+    );
+  return e;
+}
+export {
+  t as TimelineContext,
+  s as TimelineProvider,
+  c as useTimelineContext
+};