@payfit/unity-components 2.46.11 → 2.46.13

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

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

@@ -1,98 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { SwitchProps as AriaSwitchProps } from 'react-aria-components/Switch';
-export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        false: {
-            indicator: string[];
-            knob: string[];
-        };
-        true: {
-            indicator: string;
-            knob: string;
-        };
-    };
-}, {
-    container: string[];
-    mobileContainer: string[];
-    textWrapper: string[];
-    label: string[];
-    hintText: string[];
-    indicator: string[];
-    knob: string[];
-}, undefined, {
-    isDisabled: {
-        false: {
-            indicator: string[];
-            knob: string[];
-        };
-        true: {
-            indicator: string;
-            knob: string;
-        };
-    };
-}, {
-    container: string[];
-    mobileContainer: string[];
-    textWrapper: string[];
-    label: string[];
-    hintText: string[];
-    indicator: string[];
-    knob: string[];
-}, import('tailwind-variants').TVReturnType<{
-    isDisabled: {
-        false: {
-            indicator: string[];
-            knob: string[];
-        };
-        true: {
-            indicator: string;
-            knob: string;
-        };
-    };
-}, {
-    container: string[];
-    mobileContainer: string[];
-    textWrapper: string[];
-    label: string[];
-    hintText: string[];
-    indicator: string[];
-    knob: string[];
-}, undefined, unknown, unknown, undefined>>;
-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. */
-    isLabelSrOnly?: boolean;
-    /** A helper text to display below the toggle switch's label. */
-    helperText?: string;
-}
-/**
- * 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'
- *
- * export function Example() {
- *   return (
- *     <ToggleSwitch
- *       label="Enable notifications"
- *       helperText="Receive updates about your account"
- *     />
- *   )
- * }
- * ```
- * @see {@link ToggleSwitchProps}
- * @remarks
- * Docs: /?path=/docs/inputs-toggleswitch--docs • Story: /?path=/story/inputs-toggleswitch--primary
- */
-export declare const ToggleSwitch: import('react').ForwardRefExoticComponent<ToggleSwitchProps & import('react').RefAttributes<HTMLLabelElement>>;

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

@@ -1,130 +0,0 @@
-import { jsx as e, jsxs as a } from "react/jsx-runtime";
-import { forwardRef as h } from "react";
-import { uyTv as v } from "@payfit/unity-themes";
-import { Switch as m } from "react-aria-components/Switch";
-import { useBreakpointListener as w } from "../../hooks/use-breakpoint-listener.js";
-const x = v({
-  slots: {
-    container: ["uy:flex uy:flex-col uy:sm:flex-row uy:gap-100 uy:group"],
-    mobileContainer: [
-      "uy:flex uy:flex-1 uy:justify-between uy:sm:justify-start uy:gap-200 uy:sm:gap-100 uy:group uy:my-75 uy:sm:my-0"
-    ],
-    textWrapper: ["uy:flex uy:flex-col uy:gap-50"],
-    label: [
-      "uy:typography-body uy:text-content-form-enabled uy:leading-4! uy:sm:leading-3!"
-    ],
-    hintText: ["uy:typography-body-small uy:text-content-neutral-low"],
-    indicator: [
-      "uy:p-50 uy:w-6.75 uy:h-4 uy:sm:w-500 uy:sm:h-300 uy:flex uy:items-center uy:shrink-0 uy:grow-0",
-      "uy:rounded-pill",
-      "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-disabled",
-      "uy:cursor-pointer uy:transition-colors uy:duration-200 uy:ease-in-out",
-      "uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
-      "uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled uy:group-data-[disabled]:cursor-not-allowed",
-      "uy:group-data-[focus-visible]:outline-2 uy:group-data-[focus-visible]:outline-offset-2 uy:group-data-[focus-visible]:outline-utility-focus-ring"
-    ],
-    knob: [
-      "uy:w-300 uy:h-300 uy:sm:w-200 uy:sm:h-200 uy:rounded-circle",
-      "uy:border uy:border-solid uy:border-border-form-disabled uy:bg-surface-form-enabled",
-      "uy:transition-all uy:duration-200 uy:ease-in-out",
-      'uy:group-data-[selected="true"]:translate-x-[90%]',
-      "uy:group-data-[pressed]:bg-surface-form-pressed uy:group-data-[pressed]:border-border-form-pressed",
-      "uy:group-data-[disabled]:bg-surface-form-disabled uy:group-data-[disabled]:border-border-form-disabled"
-    ]
-  },
-  variants: {
-    isDisabled: {
-      false: {
-        indicator: [
-          'uy:theme-legacy:group-data-[selected="true"]:bg-surface-form-active uy:theme-legacy:group-data-[selected="true"]:border-border-form-active',
-          'uy:theme-rebrand:group-data-[selected="true"]:bg-surface-form-active uy:theme-rebrand:group-data-[selected="true"]:border-surface-form-active',
-          'uy:theme-legacy:group-data-[selected="true"]:group-data-[pressed]:bg-surface-form-active',
-          'uy:theme-legacy:group-data-[selected="true"]:group-data-[pressed]:border-border-form-active',
-          'uy:theme-rebrand:group-data-[selected="true"]:group-data-[pressed]:bg-surface-primary-active',
-          'uy:theme-rebrand:group-data-[selected="true"]:group-data-[pressed]:border-border-primary-active'
-        ],
-        knob: [
-          "uy:theme-legacy:group-data-[selected=true]:border-border-inverted-enabled uy:theme-rebrand:group-data-[selected=true]:border-transparent",
-          "uy:group-data-[selected=true]:group-data-[pressed]:bg-surface-form-pressed",
-          "uy:group-data-[selected=true]:group-data-[pressed]:border-border-inverted-pressed"
-        ]
-      },
-      true: {
-        indicator: "",
-        knob: ""
-      }
-    }
-  }
-}), N = h(
-  ({
-    label: u,
-    helperText: r,
-    isLabelSrOnly: o = !1,
-    isDisabled: d,
-    ...b
-  }, s) => {
-    const {
-      container: t,
-      indicator: i,
-      knob: l,
-      textWrapper: y,
-      label: c,
-      hintText: p,
-      mobileContainer: g
-    } = x({ isDisabled: d }), f = w() === "xs", n = { ...b, role: "switch" };
-    return f ? /* @__PURE__ */ e(
-      m,
-      {
-        ...n,
-        ref: s,
-        className: t(),
-        isDisabled: d,
-        children: /* @__PURE__ */ a("div", { className: g(), children: [
-          /* @__PURE__ */ a(
-            "div",
-            {
-              className: y({
-                className: o ? "uy:sr-only" : ""
-              }),
-              "data-dd-privacy": "allow",
-              children: [
-                /* @__PURE__ */ e("span", { className: c(), children: u }),
-                r && /* @__PURE__ */ e("span", { className: p(), children: r })
-              ]
-            }
-          ),
-          /* @__PURE__ */ e("div", { className: i(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: l() }) })
-        ] })
-      }
-    ) : /* @__PURE__ */ a(
-      m,
-      {
-        ...n,
-        ref: s,
-        className: t(),
-        isDisabled: d,
-        children: [
-          /* @__PURE__ */ e("div", { className: i(), "data-dd-privacy": "mask", children: /* @__PURE__ */ e("div", { className: l() }) }),
-          /* @__PURE__ */ a(
-            "div",
-            {
-              className: y({
-                className: o ? "uy:sr-only" : ""
-              }),
-              "data-dd-privacy": "allow",
-              children: [
-                /* @__PURE__ */ e("span", { className: c(), children: u }),
-                r && /* @__PURE__ */ e("span", { className: p(), children: r })
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-N.displayName = "ToggleSwitch";
-export {
-  N as ToggleSwitch,
-  x as toggleSwitch
-};

package/dist/esm/components/toggle-switch-field/TanstackToggleSwitchField.d.ts

@@ -1,11 +0,0 @@
-import { TanstackToggleSwitchProps } from '../toggle-switch/TanstackToggleSwitch.js';
-export interface TanstackToggleSwitchFieldProps extends TanstackToggleSwitchProps {
-    /** The label for the toggle switch. */
-    label: string;
-    /** Helper text to display below the toggle switch label. */
-    switchHelperText?: string;
-    /** Whether the label is only visible to screen readers. */
-    isLabelSrOnly?: boolean;
-}
-declare const TanstackToggleSwitchField: import('react').ForwardRefExoticComponent<Omit<TanstackToggleSwitchFieldProps, "ref"> & import('react').RefAttributes<HTMLLabelElement>>;
-export { TanstackToggleSwitchField };

package/dist/esm/components/toggle-switch-field/TanstackToggleSwitchField.js

@@ -1,34 +0,0 @@
-import { jsxs as i, jsx as o } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { TanstackFormFeedbackText as s } from "../form-field/parts/TanstackFormFeedbackText.js";
-import { TanstackFormField as l } from "../form-field/TanstackFormField.js";
-import { TanstackToggleSwitch as T } from "../toggle-switch/TanstackToggleSwitch.js";
-function p({
-  label: t,
-  switchHelperText: r,
-  isDisabled: e,
-  isReadOnly: m,
-  isLabelSrOnly: c
-}, a) {
-  return /* @__PURE__ */ i(l, { children: [
-    /* @__PURE__ */ o(
-      T,
-      {
-        ref: a,
-        label: t,
-        helperText: r,
-        isLabelSrOnly: c,
-        ...{
-          isDisabled: e,
-          isReadOnly: m
-        }
-      }
-    ),
-    /* @__PURE__ */ o(s, {})
-  ] });
-}
-const d = n(p);
-d.displayName = "TanstackToggleSwitchField";
-export {
-  d as TanstackToggleSwitchField
-};

package/dist/esm/components/toggle-switch-field/ToggleSwitchField.d.ts

@@ -1,70 +0,0 @@
-import { StandardSchemaV1 } from '@standard-schema/spec';
-import { ForwardedRef, JSX } from 'react';
-import { FieldPath, FieldValues } from 'react-hook-form';
-import { Schema } from '../../hooks/use-form.types.js';
-interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> {
-    /** The name of the field, which should match the form schema. */
-    name: TName;
-    /** The label for the toggle switch. */
-    label: string;
-    /** Helper text to display below the toggle switch. */
-    switchHelperText?: string;
-    /** The default selected value of the toggle switch. */
-    defaultSelected?: boolean;
-    /** Whether the toggle switch is disabled. */
-    isDisabled?: boolean;
-    /** Whether the toggle switch is read-only. */
-    isReadOnly?: boolean;
-    /** Whether the toggle switch is invalid. */
-    isInvalid?: boolean;
-    /** Whether the toggle switch is loading. */
-    isLoading?: boolean;
-    /** Whether the label is visually hidden and accessible only to screen readers. */
-    isLabelSrOnly?: boolean;
-}
-export type ToggleSwitchFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = FieldProps<TFieldValues, TName>;
-type ToggleSwitchFieldComponent = (<TSchema extends Schema>(props: ToggleSwitchFieldProps<StandardSchemaV1.InferOutput<TSchema>> & {
-    ref?: ForwardedRef<HTMLLabelElement>;
-}) => JSX.Element) & {
-    displayName?: string;
-};
-/**
- * The `ToggleSwitchField` component enhances the base ToggleSwitch with form integration capabilities.
- * It automatically integrates with Unity's form context and handles value updates through the form's state management.
- *
- * The component provides form validation, helper text, and error feedback while maintaining the same
- * API as the base ToggleSwitch component. It's the recommended way to use toggle switches within forms.
- * @param {ToggleSwitchFieldProps} props - Props for the ToggleSwitchField component
- * @example
- * ```tsx
- * import { useUnityForm, ToggleSwitchField } from '@payfit/unity-components'
- * import * as z from 'zod'
- *
- * function Example() {
- *   const schema = z.object({
- *     enableFeature: z.boolean(),
- *   })
- *
- *   const { Form } = useUnityForm(schema)
- *
- *   return (
- *     <Form action={handleSubmit}>
- *       <ToggleSwitchField<typeof schema>
- *         name="enableFeature"
- *         label="Enable feature"
- *         helperText="Turn this on to enable the feature."
- *       />
- *     </Form>
- *   )
- * }
- * ```
- * @see {@link ToggleSwitchFieldProps} for all available props
- * @remarks
- * [API](/?path=/docs/forms-toggleswitchfield--docs) • [Demo](/?path=/story/forms-toggleswitchfield--primary)
- * @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 ToggleSwitchField: ToggleSwitchFieldComponent;
-export { ToggleSwitchField };

package/dist/esm/components/toggle-switch-field/ToggleSwitchField.js

@@ -1,60 +0,0 @@
-import { jsxs as h, jsx as t } from "react/jsx-runtime";
-import { forwardRef as u } from "react";
-import { useFormContext as a } from "react-hook-form";
-import { FormField as x } from "../form-field/FormField.js";
-import { FormControl as w } from "../form-field/parts/FormControl.js";
-import { FormFeedbackText as T } from "../form-field/parts/FormFeedbackText.js";
-import { ToggleSwitch as S } from "../toggle-switch/ToggleSwitch.js";
-function y({
-  name: o,
-  label: r,
-  defaultSelected: e,
-  switchHelperText: i,
-  isInvalid: m,
-  isLoading: l,
-  isDisabled: c,
-  isReadOnly: n,
-  isLabelSrOnly: p,
-  ...s
-}, f) {
-  const { control: d, watch: g } = a(), F = g(o);
-  return /* @__PURE__ */ h(
-    x,
-    {
-      control: d,
-      name: o,
-      className: "uy:flex uy:flex-col uy:gap-100",
-      ...{
-        isInvalid: m,
-        isLoading: l,
-        isDisabled: c,
-        isReadOnly: n
-      },
-      children: [
-        /* @__PURE__ */ t(w, { children: /* @__PURE__ */ t(
-          S,
-          {
-            ref: f,
-            defaultSelected: e,
-            isSelected: F,
-            label: r,
-            isLabelSrOnly: p,
-            helperText: i,
-            ...s
-          }
-        ) }),
-        /* @__PURE__ */ t(T, {})
-      ]
-    }
-  );
-}
-const j = u(function(r, e) {
-  return y(
-    r,
-    e
-  );
-});
-j.displayName = "ToggleSwitchField";
-export {
-  j as ToggleSwitchField
-};

package/dist/esm/components/toggle-switch-group/TanstackToggleSwitchGroup.d.ts

@@ -1,57 +0,0 @@
-import { ToggleSwitchGroupProps } from './ToggleSwitchGroup.js';
-export type TanstackToggleSwitchGroupProps = Omit<ToggleSwitchGroupProps, 'value' | 'defaultValue' | 'isInvalid' | 'feedbackText'>;
-/**
- * TanStack‑controlled group component for multiple `ToggleSwitch` children.
- *
- * `TanstackToggleSwitchGroup` wraps `ToggleSwitchGroup` and binds its value
- * (a `string[]`) to the TanStack field context via `useFieldContext`. The
- * selection state is fully driven by the form — do not pass `value` or
- * `defaultValue` directly.
- *
- * Behavior:
- * - The value comes from `field.state.value` (string[]), defaulting to `[]`.
- * - Changes are propagated via `field.handleChange` and forwarded to `onChange`.
- * - The invalid state (`isInvalid`) is derived from `field.state.meta`
- *   (`isTouched` && `!isValid`).
- *
- * Accessibility:
- * - The group handles its own label and `helperText`.
- * - For error feedback coming from the form, use the dedicated Field variant
- *   (`TanstackToggleSwitchGroupField`).
- *
- * Usage constraints:
- * - Must be rendered inside `<form.AppField name="…">`.
- * - Pre‑fill via `useTanstackUnityForm({ defaultValues: { … } })`.
- *
- * Example:
- * ```tsx
- * const form = useTanstackUnityForm({
- *   validators: { onBlur: z.object({ pref: z.array(z.string()).optional() }) },
- *   defaultValues: { pref: ['email'] },
- * })
- *
- * return (
- *   <form.AppForm>
- *     <form.Form>
- *       <form.AppField name="pref">
- *         {() => (
- *           <TanstackToggleSwitchGroup label="Notifications">
- *             <ToggleSwitch value="email" label="Email" />
- *             <ToggleSwitch value="sms" label="SMS" />
- *             <ToggleSwitch value="push" label="Push" />
- *           </TanstackToggleSwitchGroup>
- *         )}
- *       </form.AppField>
- *     </form.Form>
- *   </form.AppForm>
- * )
- * ```
- * @public
- * @see ToggleSwitchGroup
- * @see useFieldContext
- * @remarks The `value`, `defaultValue`, `isInvalid`, and `feedbackText` props are handled by the TanStack integration and therefore omitted.
- * @param props Group props (excluding `value`, `defaultValue`, `isInvalid`, `feedbackText`).
- * @returns A form‑controlled `fieldset` containing the child switches.
- */
-declare const TanstackToggleSwitchGroup: import('react').ForwardRefExoticComponent<TanstackToggleSwitchGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;
-export { TanstackToggleSwitchGroup };

package/dist/esm/components/toggle-switch-group/TanstackToggleSwitchGroup.js

@@ -1,23 +0,0 @@
-import { jsx as l } from "react/jsx-runtime";
-import { forwardRef as n } from "react";
-import { useFieldContext as c } from "../../hooks/tanstack-form-context.js";
-import { ToggleSwitchGroup as u } from "./ToggleSwitchGroup.js";
-const m = n(function({ onChange: a, ...e }, r) {
-  const t = c(), i = Array.isArray(t.state.value) ? t.state.value : [], s = t.state.meta.isTouched && !t.state.meta.isValid;
-  return /* @__PURE__ */ l(
-    u,
-    {
-      ...e,
-      ref: r,
-      value: i,
-      isInvalid: s,
-      onChange: (o) => {
-        t.handleChange(o), a?.(o);
-      }
-    }
-  );
-});
-m.displayName = "TanstackToggleSwitchGroup";
-export {
-  m as TanstackToggleSwitchGroup
-};

package/dist/esm/components/toggle-switch-group/ToggleSwitchGroup.d.ts

@@ -1,71 +0,0 @@
-import { VariantProps } from '@payfit/unity-themes';
-import { ReactNode } from 'react';
-export declare const toggleSwitchGroup: import('tailwind-variants').TVReturnType<{} | {} | {}, undefined, "uy:flex uy:flex-col uy:gap-50", {} | {}, undefined, import('tailwind-variants').TVReturnType<unknown, undefined, "uy:flex uy:flex-col uy:gap-50", unknown, unknown, undefined>>;
-export interface ToggleSwitchGroupProps extends VariantProps<typeof toggleSwitchGroup> {
-    /** The label for the group. */
-    label: string;
-    /** Helper text to display below the group. */
-    helperText?: ReactNode;
-    /** Feedback text to display below the group. */
-    feedbackText?: ReactNode;
-    /** The default selected values of the group. */
-    defaultValue?: string[];
-    /** The current selected values of the group (controlled). */
-    value?: string[];
-    /** Whether the group is disabled. */
-    isDisabled?: boolean;
-    /** Whether the group is read-only. */
-    isReadOnly?: boolean;
-    /** Whether the group is invalid. */
-    isInvalid?: boolean;
-    /** Whether the group is required. */
-    isRequired?: boolean;
-    /** The variant of the required indicator. */
-    requiredVariant?: 'required' | 'optional';
-    /** Callback when the selection changes. */
-    onChange?: (value: string[]) => void;
-    /**
-     * Handler called when the group receives focus.
-     */
-    onFocus?: (e: React.FocusEvent<HTMLFieldSetElement>) => void;
-    /**
-     * Handler called when the group loses focus.
-     */
-    onBlur?: (e: React.FocusEvent<HTMLFieldSetElement>) => void;
-    /**
-     * Handler that is called when the element's focus status changes.
-     * @param isFocused
-     */
-    onFocusChange?: (isFocused: boolean) => void;
-    children: ReactNode;
-}
-/**
- * The `ToggleSwitchGroup` component manages a collection of related toggle switches as a single unit.
- * It provides a way to select multiple options from a list of choices, with proper form field semantics
- * and accessibility features.
- *
- * The component handles the selection state internally and can be used in both controlled and uncontrolled modes.
- * It's particularly useful for settings pages, preference forms, or any scenario requiring multiple binary choices.
- * @param {ToggleSwitchGroupProps} props - Props for the ToggleSwitchGroup component
- * @example
- * ```tsx
- * import { ToggleSwitchGroup, ToggleSwitch } from '@payfit/unity-components'
- *
- * function Example() {
- *   return (
- *     <ToggleSwitchGroup
- *       label="Notification preferences"
- *       helperText="Choose how you want to receive notifications"
- *     >
- *       <ToggleSwitch value="email" label="Email notifications" />
- *       <ToggleSwitch value="sms" label="SMS notifications" />
- *       <ToggleSwitch value="push" label="Push notifications" />
- *     </ToggleSwitchGroup>
- *   )
- * }
- * ```
- * @see {@link ToggleSwitchGroupProps} for all available props
- * @remarks
- * [API](/?path=/docs/forms-toggleswitchgroup--docs) • [Demo](/?path=/story/forms-toggleswitchgroup--primary)
- */
-export declare const ToggleSwitchGroup: import('react').ForwardRefExoticComponent<ToggleSwitchGroupProps & import('react').RefAttributes<HTMLFieldSetElement>>;