@payfit/unity-components 2.0.0 → 2.1.4

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.js

@@ -1,4 +1,4 @@
-import { jsxs as t, jsx as e } from "react/jsx-runtime";
+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";
@@ -6,10 +6,10 @@ 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 D = h({
+const N = h({
   slots: {
-    base: "uy:flex uy:border uy:border-solid uy: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-100 uy:pb-100 uy:pl-150 uy:pr-150 uy:rounded-75",
+    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"
@@ -56,24 +56,24 @@ const D = h({
     isDisabled: !1,
     isReadOnly: !1
   }
-}), N = x(
+}), W = x(
   ({
-    isInvalid: n,
+    isInvalid: o,
     isLoading: s,
-    isDisabled: a,
-    isReadOnly: r,
+    isDisabled: r,
+    isReadOnly: t,
     isResizable: i = !1,
     ...d
   }, f) => {
-    const o = w(), { containerRef: l, handleResizeStart: y } = M({
-      isDisabled: !i || a || r
-    }), { base: b, inputWrapper: m, input: c, state: p, resizeHandle: g } = D({
-      isInvalid: n,
-      isDisabled: a,
-      isReadOnly: r
+    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__ */ t("div", { ref: l, className: b(), children: [
-      /* @__PURE__ */ t("div", { className: m(), children: [
+    return /* @__PURE__ */ a("div", { ref: l, className: m(), children: [
+      /* @__PURE__ */ a("div", { className: b(), children: [
         /* @__PURE__ */ e(
           v,
           {
@@ -82,27 +82,29 @@ const D = h({
             ref: f,
             className: c(),
             "aria-busy": s,
-            readOnly: r
+            "aria-invalid": o,
+            readOnly: t,
+            disabled: r
           }
         ),
-        /* @__PURE__ */ t("div", { className: p(), children: [
+        /* @__PURE__ */ a("div", { className: p(), children: [
           s && /* @__PURE__ */ e(
             L,
             {
               color: "inherit",
               size: "small",
-              label: o.formatMessage({
+              label: u.formatMessage({
                 id: "unity:component:form-field:form-input:spinner:label",
                 defaultMessage: "Loading"
               })
             }
           ),
-          n && /* @__PURE__ */ e(
+          o && /* @__PURE__ */ e(
             z,
             {
               src: "WarningCircleOutlined",
               color: "content.form.invalid",
-              alt: o.formatMessage({
+              alt: u.formatMessage({
                 id: "unity:component:form-field:form-input:error:alt",
                 defaultMessage: "Error"
               })
@@ -110,21 +112,21 @@ const D = h({
           )
         ] })
       ] }),
-      i && !a && !r && /* @__PURE__ */ e(
+      i && !r && !t && /* @__PURE__ */ e(
         "div",
         {
           className: g(),
           onMouseDown: y,
           role: "button",
           tabIndex: 0,
-          "aria-label": o.formatMessage({
+          "aria-label": u.formatMessage({
             id: "unity:component:form-field:textarea:resize-handle:label",
             defaultMessage: "Resize textarea"
           }),
-          onKeyDown: (u) => {
-            (u.key === "Enter" || u.key === " ") && (u.preventDefault(), l.current?.querySelector("textarea")?.focus());
+          onKeyDown: (n) => {
+            (n.key === "Enter" || n.key === " ") && (n.preventDefault(), l.current?.querySelector("textarea")?.focus());
           },
-          children: /* @__PURE__ */ t(
+          children: /* @__PURE__ */ a(
             "svg",
             {
               role: "presentation",
@@ -155,8 +157,8 @@ const D = h({
     ] });
   }
 );
-N.displayName = "TextArea";
+W.displayName = "TextArea";
 export {
-  N as TextArea,
-  D as textArea
+  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

@@ -58,6 +58,8 @@ type TextFieldComponent = (<TSchema extends Schema>(props: TextFieldProps<Standa
  * }
  * ```
  * @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/toast/UnityToast.js

@@ -6,9 +6,9 @@ import { IconButton as b } from "../icon-button/IconButton.js";
 import { Icon as g } from "../icon/Icon.js";
 import { ToastTitle as x } from "./parts/ToastTitle.js";
 import { ToastProvider as T } from "./Toast.context.js";
-const h = p({
+const v = p({
   slots: {
-    base: "uy:sm:w-[416px] uy:border uy:border-solid uy:rounded-150 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-floating uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral-high",
+    base: "uy:sm:w-[416px] uy:border uy:border-solid uy:rounded-150 uy:text-content-neutral uy:bg-surface-neutral uy:shadow-floating uy:p-100 uy:flex uy:gap-125 uy:border-border-neutral",
     contentWrapper: "uy:flex uy:grow uy:ml-125",
     divider: "uy:border-l-[1px] uy:border-solid uy:border-border-neutral uy:self-stretch"
   },
@@ -26,7 +26,7 @@ const h = p({
       }
     }
   }
-}), v = (e) => {
+}), h = (e) => {
   const s = l(e) && e.type === d ? e.props.children : e;
   if (m.toArray(s).filter(
     (r) => l(r) && r.type === x
@@ -40,8 +40,8 @@ const h = p({
   ...i
 }) => {
   const a = f();
-  v(e);
-  const { base: u, contentWrapper: c, divider: y } = h({
+  h(e);
+  const { base: u, contentWrapper: c, divider: y } = v({
     variant: t,
     isInline: r
   });

package/dist/esm/components/toast/test-utils.d.ts

@@ -0,0 +1,36 @@
+import { IntlShape } from 'react-intl';
+import { PlayCtx } from '../../types/testing.js';
+import { UnityToastProps } from './UnityToast.js';
+/**
+ * Factory function returning a set of helpers to test Unity Toast components.
+ * It wires Storybook's `Play` context with convenient utilities to query,
+ * assert, and interact with toasts rendered on the canvas.
+ * @param context The Storybook play context used to group steps and actions.
+ * @returns An object of helpers: `getToast`, `closeToast`, `checkIfTextExistsInToast`, and `triggerToastAction`.
+ */
+export declare const getTestingUtilsToast: (context: PlayCtx, globalIntl: IntlShape) => {
+    findToast: (variant: UnityToastProps["variant"]) => Promise<HTMLElement>;
+    findAllToasts: (variant?: UnityToastProps["variant"]) => Promise<HTMLElement[]>;
+    getToastContainer: () => HTMLElement;
+    closeAllToasts: () => Promise<void>;
+    closeToast: ({ variant, toast, }: {
+        variant: UnityToastProps["variant"];
+        toast?: HTMLElement;
+    }) => Promise<void>;
+    triggerToastAction: ({ variant, action, closeAtEnd, }: {
+        variant: UnityToastProps["variant"];
+        action: string;
+        closeAtEnd?: boolean;
+    }) => Promise<void>;
+    assertTextExistsInToast: ({ variant, content, title, closeAtEnd, }: {
+        variant: UnityToastProps["variant"];
+        title?: string;
+        content?: string;
+        closeAtEnd?: boolean;
+    }) => Promise<void>;
+    assertToastNotInDocument: ({ variant, title, content, }: {
+        variant: UnityToastProps["variant"];
+        title?: string;
+        content?: string;
+    }) => Promise<void>;
+};

package/dist/esm/components/toast/test-utils.js

@@ -0,0 +1,118 @@
+import { within as n, expect as w, userEvent as y } from "storybook/test";
+const x = (r, h) => {
+  const g = () => (
+    // eslint-disable-next-line @typescript-eslint/non-nullable-type-assertion-style
+    r.canvasElement.querySelector("#_rht_toaster")
+  ), p = async (t, e, { timeoutMs: s = 2e3, pollMs: o = 50 } = {}) => {
+    let a = await t();
+    const i = Math.min(
+      200,
+      Math.max(1, Math.ceil(s / Math.max(1, o)))
+    ), c = () => new Promise((f) => {
+      let d = !1;
+      const T = () => {
+        d || (d = !0, f());
+      };
+      setTimeout(T, o), typeof window < "u" && typeof window.requestAnimationFrame == "function" && window.requestAnimationFrame(T), typeof setImmediate == "function" && setImmediate(T);
+    });
+    for (let f = 0; f < i && !e(a); f++)
+      await c(), a = await t();
+    return a;
+  }, l = async (t) => {
+    const e = g();
+    if (!e)
+      throw new Error("No toast container found on the page");
+    const { errorToasts: s, statusToasts: o } = await p(
+      () => {
+        const a = n(e).queryAllByRole("alert").filter((c) => c.getAttribute("aria-live") === "assertive"), i = n(e).queryAllByRole("status").filter((c) => c.getAttribute("aria-live") === "polite");
+        return { errorToasts: a, statusToasts: i };
+      },
+      (a) => t ? t === "error" ? a.errorToasts.length > 0 : a.statusToasts.length > 0 : a.errorToasts.length > 0 || a.statusToasts.length > 0
+    );
+    return t ? t === "error" ? s : o : [...s, ...o];
+  }, u = async (t) => {
+    const s = (await l(t)).at(0);
+    if (!s)
+      throw new Error(`Toast with variant: ${t} not found in the page`);
+    return s;
+  }, B = async () => {
+    const t = await l();
+    await Promise.all(
+      t.map(
+        (e) => y.click(
+          n(e).getByRole("button", {
+            name: h.formatMessage({
+              id: "unity:component:common:close:label"
+            })
+          })
+        )
+      )
+    );
+  }, m = async ({
+    variant: t,
+    toast: e
+  }) => {
+    await r.step("Close toast", async () => {
+      const s = e ?? await u(t);
+      await y.click(
+        n(s).getByRole("button", {
+          name: h.formatMessage({
+            id: "unity:component:common:close:label"
+          })
+        }),
+        { delay: 100 }
+      );
+    });
+  };
+  return {
+    findToast: u,
+    findAllToasts: l,
+    getToastContainer: g,
+    closeAllToasts: B,
+    closeToast: m,
+    triggerToastAction: async ({
+      variant: t,
+      action: e,
+      closeAtEnd: s = !1
+    }) => {
+      const o = await u(t);
+      await r.step("Trigger the action of the toast", async () => {
+        await y.click(n(o).getByRole("button", { name: e }));
+      }), s && await m({ variant: t });
+    },
+    assertTextExistsInToast: async ({
+      variant: t,
+      content: e,
+      title: s,
+      closeAtEnd: o = !1
+    }) => {
+      const a = await u(t);
+      s && await r.step(`Check if "${s}" is in the toast`, async () => {
+        await w(
+          n(a).getByRole("heading", { name: s })
+        ).toBeInTheDocument();
+      }), e && await r.step(`Check if "${e}" is in the toast`, async () => {
+        await w(n(a).getByText(e)).toBeInTheDocument();
+      }), o && await m({ variant: t });
+    },
+    assertToastNotInDocument: async ({
+      variant: t,
+      title: e,
+      content: s
+    }) => {
+      const o = (await l(t)).filter(
+        (a) => e && n(a).queryByText(e) && s && n(a).queryByText(s)
+      );
+      for (const a of o) {
+        let i = `Toast with variant: ${t}`;
+        e && (i += ` and title: ${e}`), s && (i += ` and content: ${s}`), await w(
+          a,
+          `${i} not in the document`
+        ).not.toBeInTheDocument();
+      }
+    }
+  };
+};
+export {
+  x as getTestingUtilsToast
+};

package/dist/esm/components/toggle-switch/TanstackToggleSwitch.d.ts

@@ -0,0 +1,46 @@
+import { ToggleSwitch } from './ToggleSwitch.js';
+type BaseToggleSwitchProps = React.ComponentProps<typeof ToggleSwitch>;
+export type TanstackToggleSwitchProps = Omit<BaseToggleSwitchProps, 'isSelected' | 'defaultSelected'>;
+/**
+ * TanStack‑controlled toggle switch.
+ *
+ * `TanstackToggleSwitch` is the Unity `ToggleSwitch` wired to the TanStack Form
+ * field context. Its selected state (`isSelected`) is fully controlled by the
+ * form and updates through `field.handleChange` on user interaction.
+ *
+ * Accessibility:
+ * - Automatically links to the enclosing `TanstackFormField` feedback text via
+ *   `aria-describedby`.
+ * - Use a plain string `label` (or `isLabelSrOnly` for visually hidden labels)
+ *   to keep the control accessible.
+ *
+ * Usage:
+ * - Must be rendered inside `<form.AppField name="…">` from
+ *   `useTanstackUnityForm`.
+ * - Do not pass `isSelected`/`defaultSelected`; use form default values instead.
+ * @example
+ * ```tsx
+ * import { useTanstackUnityForm } from '@/hooks/use-tanstack-form'
+ * import { TanstackToggleSwitch } from '@/components/toggle-switch/TanstackToggleSwitch'
+ * import * as z from 'zod'
+ *
+ * const schema = z.object({ newsletter: z.boolean().optional() })
+ *
+ * export function Example() {
+ *   const form = useTanstackUnityForm({ validators: { onBlur: schema } })
+ *   return (
+ *     <form.AppForm>
+ *       <form.Form>
+ *         <form.AppField name="newsletter">
+ *           {() => (
+ *             <TanstackToggleSwitch label="Subscribe to newsletter" />
+ *           )}
+ *         </form.AppField>
+ *       </form.Form>
+ *     </form.AppForm>
+ *   )
+ * }
+ * ```
+ */
+declare const TanstackToggleSwitch: import('react').ForwardRefExoticComponent<Omit<TanstackToggleSwitchProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
+export { TanstackToggleSwitch };

package/dist/esm/components/toggle-switch/TanstackToggleSwitch.js

@@ -0,0 +1,25 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as c } from "react";
+import { useFieldContext as d } from "../../hooks/tanstack-form-context.js";
+import { useFieldA11yContext as l } from "../form-field/TanstackFormField.context.js";
+import { ToggleSwitch as m } from "./ToggleSwitch.js";
+const f = c(({ onChange: i, isDisabled: r, ...a }, n) => {
+  const e = d(), o = [l().feedbackTextId].filter(Boolean).join(" ");
+  return /* @__PURE__ */ s(
+    m,
+    {
+      ...a,
+      ref: n,
+      isDisabled: r,
+      isSelected: e.state.value,
+      onChange: (t) => {
+        e.handleChange(t), i?.(t);
+      },
+      "aria-describedby": o.length > 0 ? o : void 0
+    }
+  );
+});
+f.displayName = "TanstackToggleSwitch";
+export {
+  f as TanstackToggleSwitch
+};

package/dist/esm/components/toggle-switch/ToggleSwitch.d.ts

@@ -7,12 +7,14 @@ export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
             knob: string;
         };
         true: {
+            label: string;
             indicator: string;
             knob: string;
         };
     };
 }, {
     container: string[];
+    mobileContainer: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
@@ -25,12 +27,14 @@ export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
             knob: string;
         };
         true: {
+            label: string;
             indicator: string;
             knob: string;
         };
     };
 }, {
     container: string[];
+    mobileContainer: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
@@ -43,19 +47,21 @@ export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
             knob: string;
         };
         true: {
+            label: string;
             indicator: string;
             knob: string;
         };
     };
 }, {
     container: string[];
+    mobileContainer: string[];
     textWrapper: string[];
     label: string[];
     hintText: string[];
     indicator: string[];
     knob: string[];
 }, undefined, unknown, unknown, undefined>>;
-interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children' | 'className' | 'style'>, VariantProps<typeof toggleSwitch> {
+export interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children' | 'className' | 'style'>, VariantProps<typeof toggleSwitch> {
     /** The label for the toggle switch. */
     label: string;
     /** Whether the label is visually hidden and accessible only to screen readers. */
@@ -64,15 +70,22 @@ interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children' | 'classNam
     helperText?: string;
 }
 /**
- * The `ToggleSwitch` component provides a binary choice input that allows users to toggle between two states.c
- * The component includes a sliding knob animation and supports various states like disabled, selected, and pressed.
- * It can be used standalone or within a form context using the ToggleSwitchField component.
- * @param {ToggleSwitchProps} props - Props for the ToggleSwitch component
+ * Binary toggle input with Unity styles and animation.
+ *
+ * The `ToggleSwitch` lets users toggle between two states. It provides a sliding
+ * knob animation and supports disabled, readonly and pressed states. Use it as a
+ * standalone input, or within a composed field such as `ToggleSwitchField`.
+ *
+ * Accessibility:
+ * - Renders with the ARIA `switch` role.
+ * - Always requires a visible label unless `isLabelSrOnly` is set, in which case
+ *   the label is visually hidden but remains available to assistive tech.
+ * @param props Props for the ToggleSwitch component.
  * @example
  * ```tsx
  * import { ToggleSwitch } from '@payfit/unity-components'
  *
- * function Example() {
+ * export function Example() {
  *   return (
  *     <ToggleSwitch
  *       label="Enable notifications"
@@ -81,9 +94,8 @@ interface ToggleSwitchProps extends Omit<AriaSwitchProps, 'children' | 'classNam
  *   )
  * }
  * ```
- * @see {@link ToggleSwitchProps} for all available props
+ * @see {@link ToggleSwitchProps}
  * @remarks
- * [API](/?path=/docs/inputs-toggleswitch--docs) • [Demo](/?path=/story/inputs-toggleswitch--primary)
+ * Docs: /?path=/docs/inputs-toggleswitch--docs • Story: /?path=/story/inputs-toggleswitch--primary
  */
 export declare const ToggleSwitch: import('react').ForwardRefExoticComponent<ToggleSwitchProps & import('react').RefAttributes<HTMLLabelElement>>;
-export {};