@payfit/unity-components 2.46.13 → 2.46.14

package/dist/esm/components/timeline/parts/TimelineStepDescription.js

@@ -0,0 +1,8 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as t } from "react";
+import { Text as i } from "../../text/Text.js";
+const n = t(({ children: r }, e) => /* @__PURE__ */ o(i, { ref: e, variant: "body", color: "content.neutral", children: r }));
+n.displayName = "TimelineStepDescription";
+export {
+  n as TimelineStepDescription
+};

package/dist/esm/components/timeline/parts/TimelineStepHeader.d.ts

@@ -0,0 +1,24 @@
+import { ReactNode } from 'react';
+import { TextProps } from '../../text/Text.js';
+export type TimelineStepHeaderProps = {
+    /**
+     * Label title
+     */
+    title: string;
+    /**
+     * Optional subtitle
+     */
+    subtitle?: ReactNode;
+    /**
+     * Optional header element type
+     * @default h3
+     */
+    asHeader?: Extract<TextProps['asElement'], 'h3' | 'h4' | 'h5' | 'h6'>;
+};
+/**
+ * TimelineStepHeader groups title and subtitle together with no gap
+ * This matches the Figma design "Label container"
+ * The statusSlot from TimelineStepContent is displayed next to the title in vertical orientation
+ * or horizontal mobile, but not in horizontal desktop (where it appears at the bottom)
+ */
+export declare const TimelineStepHeader: import('react').ForwardRefExoticComponent<TimelineStepHeaderProps & import('react').RefAttributes<HTMLDivElement>>;

package/dist/esm/components/timeline/parts/TimelineStepHeader.js

@@ -0,0 +1,37 @@
+import { jsxs as r, jsx as e } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { Text as l } from "../../text/Text.js";
+import { useIsHorizontalDesktop as d } from "../Timeline.utils.js";
+import { useTimelineStepContext as c } from "./TimelineStep.context.js";
+import { useTimelineStepContentContext as p } from "./TimelineStepContent.context.js";
+const f = u(({ title: i, subtitle: t, asHeader: n = "h3" }, s) => {
+  const { statusSlot: o } = p(), { labelId: a } = c(), m = !d() && o;
+  return /* @__PURE__ */ r(
+    "header",
+    {
+      ref: s,
+      className: "uy:flex uy:flex-col uy:gap-0 uy:items-start uy:w-full",
+      children: [
+        /* @__PURE__ */ r("div", { className: "uy:flex uy:gap-100 uy:items-start uy:w-full", children: [
+          /* @__PURE__ */ e(
+            l,
+            {
+              variant: "bodyStrong",
+              color: "content.neutral",
+              className: "uy:flex-1",
+              asElement: n,
+              id: a,
+              children: i
+            }
+          ),
+          m && /* @__PURE__ */ e("div", { "aria-hidden": "true", children: o })
+        ] }),
+        t && /* @__PURE__ */ e(l, { variant: "bodySmall", color: "content.neutral.lowest", children: t })
+      ]
+    }
+  );
+});
+f.displayName = "TimelineStepHeader";
+export {
+  f as TimelineStepHeader
+};

package/dist/esm/components/timeline/parts/check.svg.js

@@ -0,0 +1,5 @@
+import * as e from "react";
+const l = (t) => /* @__PURE__ */ e.createElement("svg", { fill: "none", height: 20, viewBox: "0 0 20 20", width: 20, xmlns: "http://www.w3.org/2000/svg", ...t }, /* @__PURE__ */ e.createElement("g", { id: "check" }, /* @__PURE__ */ e.createElement("path", { clipRule: "evenodd", d: "M16.0669 5.80806C16.311 6.05214 16.311 6.44786 16.0669 6.69194L8.56694 14.1919C8.32286 14.436 7.92714 14.436 7.68306 14.1919L4.55806 11.0669C4.31398 10.8229 4.31398 10.4271 4.55806 10.1831C4.80214 9.93898 5.19786 9.93898 5.44194 10.1831L8.125 12.8661L15.1831 5.80806C15.4271 5.56398 15.8229 5.56398 16.0669 5.80806Z", fill: "white", fillRule: "evenodd", id: "Vector" })));
+export {
+  l as default
+};

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
+};

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

@@ -0,0 +1,71 @@
+import { VariantProps } from '@payfit/unity-themes';
+import { PropsWithChildren } from 'react';
+declare const unityToast: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        error: string;
+    };
+    isInline: {
+        true: {
+            contentWrapper: string;
+        };
+        false: {
+            contentWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    contentWrapper: string;
+    divider: string;
+}, undefined, {
+    variant: {
+        success: string;
+        error: string;
+    };
+    isInline: {
+        true: {
+            contentWrapper: string;
+        };
+        false: {
+            contentWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    contentWrapper: string;
+    divider: string;
+}, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        error: string;
+    };
+    isInline: {
+        true: {
+            contentWrapper: string;
+        };
+        false: {
+            contentWrapper: string;
+        };
+    };
+}, {
+    base: string;
+    contentWrapper: string;
+    divider: string;
+}, undefined, unknown, unknown, undefined>>;
+export interface UnityToastProps extends Required<Pick<VariantProps<typeof unityToast>, 'variant'>> {
+    /** callback to call to close the toast*/
+    onClose: () => void;
+    /** render the toast in inline mode or not (by default true) */
+    inline?: boolean;
+}
+/**
+ * The `UnityToast` is the component which will contain a title, a content, and action
+ * - `ToastTitle`: The title of the toast
+ * - `ToastContent`(optional): The content of the toast
+ * - `ToastAction`(optional): The action on the toast
+ */
+declare const UnityToast: {
+    ({ children, onClose, variant, inline, ...rest }: PropsWithChildren<UnityToastProps>): import("react/jsx-runtime").JSX.Element;
+    displayName: string;
+};
+export { UnityToast };

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

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

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

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

package/dist/esm/components/toast/parts/ToastAction.js

@@ -0,0 +1,14 @@
+import { jsx as t } from "react/jsx-runtime";
+import { useUnityTheme as a } from "@payfit/unity-themes";
+import { Button as n } from "../../button/Button.js";
+function s({
+  children: e,
+  onPress: r
+}) {
+  const { theme: o } = a();
+  return /* @__PURE__ */ t("div", { className: "uy:theme-legacy:self-end uy:theme-rebrand:self-start", children: /* @__PURE__ */ t(n, { variant: o === "rebrand" ? "secondary" : "ghost", color: "primary", onPress: r, children: e }) });
+}
+s.displayName = "ToastAction";
+export {
+  s as ToastAction
+};

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare function ToastContent({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ToastContent {
+    var displayName: string;
+}
+export { ToastContent };

package/dist/esm/components/toast/parts/ToastContent.js

@@ -0,0 +1,11 @@
+import { jsx as n } from "react/jsx-runtime";
+import { Text as r } from "../../text/Text.js";
+import { useToastContext as e } from "../Toast.context.js";
+function a({ children: t }) {
+  const { inline: o } = e();
+  return o ? /* @__PURE__ */ n(r, { variant: "body", className: "uy:mb-100", children: t }) : null;
+}
+a.displayName = "ToastContent";
+export {
+  a as ToastContent
+};

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

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from 'react';
+declare function ToastTitle({ children }: PropsWithChildren<object>): import("react/jsx-runtime").JSX.Element;
+declare namespace ToastTitle {
+    var displayName: string;
+}
+export { ToastTitle };

package/dist/esm/components/toast/parts/ToastTitle.js

@@ -0,0 +1,9 @@
+import { jsx as o } from "react/jsx-runtime";
+import { Text as a } from "../../text/Text.js";
+function e({ children: t }) {
+  return /* @__PURE__ */ o(a, { asElement: "h4", variant: "bodyStrong", className: "uy:mt-100", children: t });
+}
+e.displayName = "ToastTitle";
+export {
+  e as ToastTitle
+};

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/toast/toast.d.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { ToastActionProps } from './parts/ToastAction.js';
+import { UnityToastProps } from './UnityToast.js';
+interface Base {
+    title: ReactNode;
+    content?: ReactNode;
+    datadogPrivacy?: 'allow' | 'mask' | 'hidden';
+}
+interface WithAction {
+    action: ReactNode;
+    actionOnPress: ToastActionProps['onPress'];
+}
+interface SuccessParams extends Base {
+    variant: Extract<UnityToastProps['variant'], 'success'>;
+    duration?: number;
+    action?: never;
+    actionOnPress?: never;
+}
+interface ErrorParams extends Base {
+    variant: Extract<UnityToastProps['variant'], 'error'>;
+    duration?: never;
+    action?: never;
+    actionOnPress?: never;
+}
+interface SuccessParamsWithAction extends Base, WithAction {
+    variant: Extract<UnityToastProps['variant'], 'success'>;
+    duration?: number;
+}
+interface ErrorParamsWithAction extends Base, WithAction {
+    variant: Extract<UnityToastProps['variant'], 'error'>;
+    duration?: never;
+}
+/**
+ * creates a toast
+ * @param prop the object which contains all the properties
+ * @param prop.title the toast title
+ * @param prop.content (optional) the content of the toast
+ * @param prop.variant the toast type
+ * @param prop.action (optional) the label of the action
+ * @param prop.actionOnPress (optional) the function to trigger when click on the action
+ * @param prop.duration (optional) to override the toast duration
+ */
+declare function toast({ title, content, variant, action, actionOnPress, duration, datadogPrivacy, }: SuccessParams | ErrorParams | SuccessParamsWithAction | ErrorParamsWithAction): string;
+export { toast };

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

@@ -0,0 +1,39 @@
+import { jsxs as e, jsx as r } from "react/jsx-runtime";
+import m from "react-hot-toast";
+import { ToastAction as p } from "./parts/ToastAction.js";
+import { ToastContent as f } from "./parts/ToastContent.js";
+import { ToastTitle as T } from "./parts/ToastTitle.js";
+import { TOAST_CONFIG as u } from "./ToastManager.js";
+import { UnityToast as c } from "./UnityToast.js";
+function k({
+  title: s,
+  content: o,
+  variant: i,
+  action: t,
+  actionOnPress: n,
+  duration: d,
+  datadogPrivacy: l = "mask"
+}) {
+  return m.custom(
+    (a) => /* @__PURE__ */ e(
+      c,
+      {
+        onClose: () => {
+          m.dismiss(a.id);
+        },
+        variant: i,
+        inline: !!o,
+        "data-dd-privacy": l,
+        children: [
+          /* @__PURE__ */ r(T, { children: s }),
+          o ? /* @__PURE__ */ r(f, { children: o }) : null,
+          t ? /* @__PURE__ */ r(p, { onPress: n, children: t }) : null
+        ]
+      }
+    ),
+    { duration: d ?? u[i].duration }
+  );
+}
+export {
+  k as toast
+};

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 };