@payfit/unity-components 0.0.0-alpha.11

package/dist/cjs/components/text-area/TextArea.d.cts

@@ -0,0 +1,220 @@
+import { TextAreaProps as AriaTextAreaProps } from 'react-aria-components';
+export declare const textArea: import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    state: string;
+    resizeHandle: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}, {
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}>, {
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    state: string;
+    resizeHandle: string;
+}, import('tailwind-variants').TVReturnType<{
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}, {
+    base: string;
+    inputWrapper: string;
+    input: string;
+    state: string;
+    resizeHandle: string;
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<{
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}, {
+    isInvalid: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+            state: string;
+        };
+    };
+    isReadOnly: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+    isDisabled: {
+        true: {
+            base: string;
+            inputWrapper: string;
+            input: string;
+        };
+    };
+}>, unknown, unknown, undefined>>;
+export interface TextAreaProps extends AriaTextAreaProps {
+    /** Whether the field is in an invalid state */
+    isInvalid?: boolean;
+    /** Whether the field is in a loading state */
+    isLoading?: boolean;
+    /** Whether the field is disabled */
+    isDisabled?: boolean;
+    /** Whether the field is read-only */
+    isReadOnly?: boolean;
+    /** Whether the textarea is resizable */
+    isResizable?: boolean;
+}
+/**
+ * The `TextArea` component displays a styled, single HTML `<textarea>` field that follows the Unity design system language. It supports multiple states out of the box and can be used as a controlled or uncontrolled component. It is also compatible with the `Form` and `FormField` component as a form control.
+ * @param {TextAreaProps} props - Regular props from the `<textarea>` HTML element, plus state-related props
+ * @see {@link TextAreaProps} for all available props
+ * @example
+ * ```tsx
+ * import { Input } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   const [value, setValue] = useState()
+ *
+ *   const handleTextChange = (e) => {
+ *     setValue(e.target.value)
+ *   }
+ *
+ *   return (
+ *    <TextArea
+ *      id="my-text-area"
+ *      isResizable cols={50} rows={5} onChange={handleTextChange}
+ *    >
+ *      {value}
+ *    </TextArea>
+ * }
+ * ```
+ */
+declare const TextArea: import('react').ForwardRefExoticComponent<TextAreaProps & import('react').RefAttributes<HTMLTextAreaElement>>;
+export { TextArea };

package/dist/cjs/components/text-field/TextField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),h=require("react"),I=require("react-hook-form"),g=require("tailwind-variants"),k=require("../form-field/FormField.cjs"),B=require("../form-field/parts/FormControl.cjs"),H=require("../form-field/parts/FormFeedbackText.cjs"),L=require("../form-field/parts/FormHelperText.cjs"),P=require("../form-field/parts/FormLabel.cjs"),R=require("../input/Input.cjs"),S=require("../text-area/TextArea.cjs"),v=g.tv({base:"uy-flex uy-flex-col uy-gap-100"});function w({name:r,label:o,defaultValue:t,helperText:s,feedbackText:u,contextualLink:a,multiline:i,isRequired:x,isInvalid:F,isLoading:d,isDisabled:m,isReadOnly:q,requiredVariant:T,...n},c){const{control:j,setValue:b}=I.useFormContext(),p={isRequired:x,isInvalid:F,isLoading:d,isDisabled:m,isReadOnly:q},C=!i,{onClearButtonPress:y}=C?n:{},f=y??(()=>{b(r,"")});return e.jsxs(k.FormField,{control:j,name:r,className:v(),...p,children:[e.jsx(P.FormLabel,{requiredVariant:T,children:o}),s&&e.jsx(L.FormHelperText,{children:s}),e.jsx(B.FormControl,{children:i?e.jsx(S.TextArea,{ref:c,defaultValue:t,...n}):e.jsx(R.Input,{ref:c,defaultValue:t,onClearButtonPress:f,...n})}),e.jsx(H.FormFeedbackText,{children:u}),a]})}const l=h.forwardRef(function(o,t){return w(o,t)});l.displayName="TextField";exports.TextField=l;

package/dist/cjs/components/text-field/TextField.d.cts

@@ -0,0 +1,63 @@
+import { ForwardedRef, HTMLAttributes, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.cjs';
+import { InputProps } from '../input/Input.cjs';
+import { LabelProps } from '../label/Label.cjs';
+import { TextAreaProps } from '../text-area/TextArea.cjs';
+interface FieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends Pick<LabelProps, 'isRequired' | 'requiredVariant'> {
+    /** The name of the field, which should match the form schema. */
+    name: TName;
+    /** The label for the text field. */
+    label: string;
+    /** If true, the text field will be a multi-line text area. */
+    multiline?: boolean;
+    /** The default value of the text field. */
+    defaultValue?: HTMLAttributes<HTMLInputElement>['defaultValue'];
+    /** Helper text to display below the text field. */
+    helperText?: ReactNode;
+    /** Feedback text to display below the text field. */
+    feedbackText?: ReactNode;
+    /** A contextual link to display below the text field. */
+    contextualLink?: ReactNode;
+}
+interface TextFieldWithInputProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends FieldProps<TFieldValues, TName>, Omit<InputProps, 'name'> {
+    multiline?: false;
+    type?: 'text' | 'password' | 'email' | 'tel' | 'url' | 'search';
+}
+interface TextFieldWithTextAreaProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> extends FieldProps<TFieldValues, TName>, Omit<TextAreaProps, 'name'> {
+    multiline?: true;
+    type?: never;
+}
+export type TextFieldProps<TFieldValues extends FieldValues = FieldValues, TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>> = TextFieldWithInputProps<TFieldValues, TName> | TextFieldWithTextAreaProps<TFieldValues, TName>;
+type TextFieldComponent = (<TSchema extends Schema>(props: TextFieldProps<ZodInfer<TSchema>> & {
+    ref?: ForwardedRef<HTMLInputElement | HTMLTextAreaElement>;
+}) => JSX.Element) & {
+    displayName?: string;
+};
+/**
+ * The `TextField` component renders a full field that can accept text input, supporting single-line and multi-line text fields, and integrates with the `Form` component automatically.
+ * @example
+ * ```tsx
+ * const schema = z.object({
+ *   name: z.string(),
+ *   email: z.string().email()
+ * })
+ *
+ * function MyForm() {
+ *   const { Form } = useUnityForm(schema)
+ *
+ *   return (
+ *     <Form action={handleSubmit}>
+ *       <TextField<typeof schema>
+ *         name="name"  // Only "name" | "email" allowed
+ *         label="Name"
+ *       />
+ *     </Form>
+ *   )
+ * }
+ * ```
+ * @note The schema type parameter is needed to ensure type safety with the form's schema. If you omit it, the `name` prop will not be type-safe.
+ */
+declare const TextField: TextFieldComponent;
+export { TextField };

package/dist/cjs/components/toast/Toast.context.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const r=require("react/jsx-runtime"),o=require("react"),e=o.createContext({inline:!0});function s({inline:t,children:n}){return r.jsx(e.Provider,{value:{inline:t},children:n})}function u(){const t=o.useContext(e);if(!t)throw new Error("useToastContext must be used within an ToastProvider");return t}exports.ToastContext=e;exports.ToastProvider=s;exports.useToastContext=u;

package/dist/cjs/components/toast/Toast.context.d.cts

@@ -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/cjs/components/toast/ToastManager.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),e=require("react-hot-toast"),o={error:{duration:1/0},success:{duration:5e3}},r=()=>t.jsx(e.Toaster,{position:"top-right",gutter:8,toastOptions:{removeDelay:0}});exports.TOAST_CONFIG=o;exports.ToastManager=r;

package/dist/cjs/components/toast/ToastManager.d.cts

@@ -0,0 +1,7 @@
+import { UnityToastProps } from './UnityToast.cjs';
+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/cjs/components/toast/UnityToast.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),o=require("react"),c=require("react-intl"),y=require("tailwind-variants"),d=require("../icon-button/IconButton.cjs"),m=require("../icon/Icon.cjs"),x=require("./parts/ToastTitle.cjs"),b=require("./Toast.context.cjs"),f=y.tv({base:"sm:uy-w-[416px] uy-border uy-border-solid uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125",variants:{variant:{success:"uy-border-border-success",error:"uy-border-border-danger"}}}),g=e=>{const a=o.isValidElement(e)&&e.type===o.Fragment?e.props.children:e;if(o.Children.toArray(a).filter(r=>o.isValidElement(r)&&r.type===x.ToastTitle).length!==1)throw new Error("UnityToast must have one ToastTitle component")},l=({children:e,onClose:a,variant:s,inline:r=!0,...u})=>{const n=c.useIntl();g(e);const i=f({variant:s});return t.jsx(b.ToastProvider,{inline:r,children:t.jsxs("div",{"data-dd-privacy":"mask",...u,tabIndex:-1,role:s==="error"?"alert":"status","aria-atomic":"true","aria-live":s==="error"?"assertive":"polite",className:i,children:[t.jsxs("div",{className:"uy-flex uy-flex-row uy-grow",children:[t.jsx(m.Icon,{src:s==="success"?"CheckCircleFilled":"WarningCircleFilled",color:s==="success"?"content.success":"content.danger",className:"uy-mt-100",alt:n.formatMessage({id:"unity:component:toast:icon:status",defaultMessage:"Status"})}),t.jsx("div",{className:`${r?"uy-flex-col":"uy-flex-row uy-justify-between"} uy-flex uy-grow uy-ml-125`,children:e})]}),t.jsx("div",{role:"presentation",className:"uy-border-l-[1px] uy-border-solid uy-border-border-neutral uy-self-stretch"}),t.jsx(d.IconButton,{icon:"CloseOutlined",iconRole:"presentation",label:n.formatMessage({id:"unity:component:common:close:label",defaultMessage:"Close"}),variant:"ghost",color:"neutral",onClick:a})]})})};l.displayName="UnityToast";exports.UnityToast=l;

package/dist/cjs/components/toast/UnityToast.d.cts

@@ -0,0 +1,55 @@
+import { PropsWithChildren } from 'react';
+import { VariantProps } from 'tailwind-variants';
+declare const unityToast: import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        error: string;
+    };
+}, undefined, "sm:uy-w-[416px] uy-border uy-border-solid uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        success: string;
+        error: string;
+    };
+}, {
+    variant: {
+        success: string;
+        error: string;
+    };
+}>, {
+    variant: {
+        success: string;
+        error: string;
+    };
+}, undefined, import('tailwind-variants').TVReturnType<{
+    variant: {
+        success: string;
+        error: string;
+    };
+}, undefined, "sm:uy-w-[416px] uy-border uy-border-solid uy-rounded-75 uy-text-content-neutral uy-bg-surface-neutral uy-shadow-floating uy-p-100 uy-flex uy-gap-125", import('tailwind-variants/dist/config.js').TVConfig<{
+    variant: {
+        success: string;
+        error: string;
+    };
+}, {
+    variant: {
+        success: string;
+        error: string;
+    };
+}>, 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/cjs/components/toast/parts/ToastAction.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),i=require("../../button/Button.cjs");function e({children:o,onPress:n}){return t.jsx("div",{className:"uy-self-end",children:t.jsx(i.Button,{variant:"ghost",color:"primary",onPress:n,children:o})})}e.displayName="ToastAction";exports.ToastAction=e;

package/dist/cjs/components/toast/parts/ToastAction.d.cts

@@ -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/cjs/components/toast/parts/ToastContent.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),s=require("../../text/Text.cjs"),r=require("../Toast.context.cjs");function t({children:e}){const{inline:n}=r.useToastContext();return n?o.jsx(s.Text,{variant:"body",className:"uy-mb-100",children:e}):null}t.displayName="ToastContent";exports.ToastContent=t;

package/dist/cjs/components/toast/parts/ToastContent.d.cts

@@ -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/cjs/components/toast/parts/ToastTitle.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const s=require("react/jsx-runtime"),a=require("../../text/Text.cjs");function t({children:e}){return s.jsx(a.Text,{asElement:"h4",variant:"bodyStrong",className:"uy-mt-100",children:e})}t.displayName="ToastTitle";exports.ToastTitle=t;

package/dist/cjs/components/toast/parts/ToastTitle.d.cts

@@ -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/cjs/components/toast/toast.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const o=require("react/jsx-runtime"),c=require("react-hot-toast"),d=require("./parts/ToastAction.cjs"),T=require("./parts/ToastContent.cjs"),f=require("./parts/ToastTitle.cjs"),j=require("./ToastManager.cjs"),q=require("./UnityToast.cjs"),h=t=>t&&typeof t=="object"&&"default"in t?t:{default:t},i=h(c);function m({title:t,content:e,variant:s,action:n,actionOnPress:r,duration:a,datadogPrivacy:u="mask"}){return i.default.custom(l=>o.jsxs(q.UnityToast,{onClose:()=>{i.default.dismiss(l.id)},variant:s,inline:!!e,"data-dd-privacy":u,children:[o.jsx(f.ToastTitle,{children:t}),e?o.jsx(T.ToastContent,{children:e}):null,n?o.jsx(d.ToastAction,{onPress:r,children:n}):null]}),{duration:a??j.TOAST_CONFIG[s].duration})}exports.toast=m;

package/dist/cjs/components/toast/toast.d.cts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+import { ToastActionProps } from './parts/ToastAction.cjs';
+import { UnityToastProps } from './UnityToast.cjs';
+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/cjs/components/toggle-switch/ToggleSwitch.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),g=require("react"),f=require("react-aria-components"),m=require("tailwind-variants"),a=m.tv({slots:{container:["uy-flex uy-gap-100 uy-group"],textWrapper:["uy-flex uy-flex-col uy-gap-50"],label:["uy-typography-body uy-text-content-form-enabled"],hintText:["uy-typography-body-small uy-text-content-neutral-low"],indicator:["uy-p-50 uy-w-500 uy-h-300 uy-flex uy-items-center","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","group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed",'group-data-[selected="true"]:uy-bg-surface-form-active group-data-[selected="true"]:uy-border-border-form-active group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-active group-data-[selected="true"]:group-data-[pressed]:uy-border-border-form-active',"group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled group-data-[disabled]:uy-cursor-not-allowed","group-data-[focus-visible]:uy-outline-2 group-data-[focus-visible]:uy-outline group-data-[focus-visible]:uy-outline-offset-2 group-data-[focus-visible]:uy-outline-utility-focus-ring"],knob:["uy-w-200 uy-h-200 uy-rounded-circle","uy-border uy-border-solid uy-border-border-form-enabled uy-bg-surface-form-enabled","uy-transition-all uy-duration-200 uy-ease-in-out","group-data-[pressed]:uy-bg-surface-form-pressed group-data-[pressed]:uy-border-border-form-pressed",'group-data-[selected="true"]:uy-translate-x-[90%] group-data-[selected="true"]:uy-border-border-inverted-enabled group-data-[selected="true"]:group-data-[pressed]:uy-bg-surface-form-pressed group-data-[selected="true"]:group-data-[pressed]:uy-border-border-inverted-pressed',"group-data-[disabled]:uy-bg-surface-form-disabled group-data-[disabled]:uy-border-border-form-disabled"]}}),o=g.forwardRef(({label:d,helperText:r,isLabelSrOnly:u=!1,...t},s)=>{const{container:l,indicator:i,knob:c,textWrapper:y,label:n,hintText:b}=a(),p={...t,role:"switch"};return e.jsxs(f.Switch,{...p,ref:s,className:l(),children:[e.jsx("div",{className:i(),"data-dd-privacy":"mask",children:e.jsx("div",{className:c()})}),e.jsxs("div",{className:y({className:u?"uy-sr-only":""}),"data-dd-privacy":"allow",children:[e.jsx("span",{className:n(),children:d}),r&&e.jsx("span",{className:b(),children:r})]})]})});o.displayName="ToggleSwitch";exports.ToggleSwitch=o;exports.toggleSwitch=a;

package/dist/cjs/components/toggle-switch/ToggleSwitch.d.cts

@@ -0,0 +1,111 @@
+import { SwitchProps as AriaSwitchProps } from 'react-aria-components';
+import { VariantProps } from 'tailwind-variants';
+export declare const toggleSwitch: import('tailwind-variants').TVReturnType<{
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            indicator?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            textWrapper?: import('tailwind-merge').ClassNameValue;
+            hintText?: import('tailwind-merge').ClassNameValue;
+            knob?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {
+    [x: string]: {
+        [x: string]: import('tailwind-merge').ClassNameValue | {
+            indicator?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            textWrapper?: import('tailwind-merge').ClassNameValue;
+            hintText?: import('tailwind-merge').ClassNameValue;
+            knob?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
+    textWrapper: string[];
+    label: string[];
+    hintText: string[];
+    indicator: string[];
+    knob: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            indicator?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            textWrapper?: import('tailwind-merge').ClassNameValue;
+            hintText?: import('tailwind-merge').ClassNameValue;
+            knob?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            indicator?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            textWrapper?: import('tailwind-merge').ClassNameValue;
+            hintText?: import('tailwind-merge').ClassNameValue;
+            knob?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}, {
+    container: string[];
+    textWrapper: string[];
+    label: string[];
+    hintText: string[];
+    indicator: string[];
+    knob: string[];
+}, import('tailwind-variants').TVReturnType<unknown, {
+    container: string[];
+    textWrapper: string[];
+    label: string[];
+    hintText: string[];
+    indicator: string[];
+    knob: string[];
+}, undefined, import('tailwind-variants/dist/config.js').TVConfig<unknown, {
+    [key: string]: {
+        [key: string]: import('tailwind-merge').ClassNameValue | {
+            indicator?: import('tailwind-merge').ClassNameValue;
+            label?: import('tailwind-merge').ClassNameValue;
+            container?: import('tailwind-merge').ClassNameValue;
+            textWrapper?: import('tailwind-merge').ClassNameValue;
+            hintText?: import('tailwind-merge').ClassNameValue;
+            knob?: import('tailwind-merge').ClassNameValue;
+        };
+    };
+} | {}>, unknown, unknown, undefined>>;
+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;
+}
+/**
+ * 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
+ * @example
+ * ```tsx
+ * import { ToggleSwitch } from '@payfit/unity-components'
+ *
+ * function Example() {
+ *   return (
+ *     <ToggleSwitch
+ *       label="Enable notifications"
+ *       helperText="Receive updates about your account"
+ *     />
+ *   )
+ * }
+ * ```
+ * @see {@link ToggleSwitchProps} for all available props
+ * @remarks
+ * [API](/?path=/docs/inputs-toggleswitch--docs) • [Demo](/?path=/story/inputs-toggleswitch--primary)
+ */
+export declare const ToggleSwitch: import('react').ForwardRefExoticComponent<ToggleSwitchProps & import('react').RefAttributes<HTMLLabelElement>>;
+export {};

package/dist/cjs/components/toggle-switch-field/ToggleSwitchField.cjs

@@ -0,0 +1 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),j=require("react"),p=require("react-hook-form"),f=require("../form-field/FormField.cjs"),y=require("../form-field/parts/FormControl.cjs"),b=require("../form-field/parts/FormFeedbackText.cjs"),k=require("../form-field/parts/FormHelperText.cjs"),C=require("../form-field/parts/FormLabel.cjs"),H=require("../toggle-switch/ToggleSwitch.cjs");function R({name:r,label:o,defaultSelected:t,helperText:i,switchHelperText:l,contextualLink:n,isRequired:s,isInvalid:u,isLoading:F,isDisabled:d,isReadOnly:m,requiredVariant:g,isLabelSrOnly:x,...a},h){const{control:T,watch:S}=p.useFormContext(),q=S(r),w={isRequired:s,isInvalid:u,isLoading:F,isDisabled:d,isReadOnly:m};return e.jsxs(f.FormField,{control:T,name:r,className:"uy-flex uy-flex-col uy-gap-100",...w,children:[e.jsx(C.FormLabel,{requiredVariant:g,children:o}),e.jsx(k.FormHelperText,{children:i}),e.jsx(y.FormControl,{children:e.jsx(H.ToggleSwitch,{ref:h,defaultSelected:t,isSelected:q,label:o,isLabelSrOnly:x,helperText:l,...a})}),e.jsx(b.FormFeedbackText,{}),n]})}const c=j.forwardRef(function(o,t){return R(o,t)});c.displayName="ToggleSwitchField";exports.ToggleSwitchField=c;

package/dist/cjs/components/toggle-switch-field/ToggleSwitchField.d.cts

@@ -0,0 +1,73 @@
+import { ForwardedRef, JSX, ReactNode } from 'react';
+import { FieldPath, FieldValues } from 'react-hook-form';
+import { infer as ZodInfer } from 'zod';
+import { Schema } from '../../hooks/use-form.types.cjs';
+import { LabelProps } from '../label/Label.cjs';
+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 toggle switch. */
+    label: string;
+    /** Helper text to display below form field. */
+    helperText?: ReactNode;
+    /** Helper text to display below the toggle switch. */
+    switchHelperText?: string;
+    /** A contextual link to display below the toggle switch. */
+    contextualLink?: ReactNode;
+    /** 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<ZodInfer<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.
+ */
+declare const ToggleSwitchField: ToggleSwitchFieldComponent;
+export { ToggleSwitchField };