@lifesg/react-design-system 4.0.0-alpha.5 → 4.0.0-alpha.7

package/toast/toast.js.map

@@ -1 +1 @@
-{"version":3,"file":"toast.js","sources":["../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    className,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss, autoDismissTime]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: EASING_DURATION,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <h2 className={styles.title} role=\"presentation\">\n                    {title}\n                </h2>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {label}\n                </Typography.BodyMD>\n            );\n        } else {\n            return (\n                <Typography.BodyBL className={styles.description}>\n                    {label}\n                </Typography.BodyBL>\n            );\n        }\n    };\n\n    return (\n        <animated.div\n            ref={toastRef}\n            style={transitions}\n            className={clsx(styles.wrapper, className)}\n            data-type={type}\n            data-fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <div className={styles.contentWrapper}>\n                <div className={styles.textIconWrapper} data-type={type}>\n                    {renderIcon()}\n                    <div className={styles.textContainer}>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </div>\n                </div>\n\n                {actionButton && (\n                    <Button\n                        className={styles.actionButton}\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                        sizeType=\"small\"\n                    >\n                        {actionButton.label}\n                    </Button>\n                )}\n            </div>\n            <ClickableIcon\n                className={styles.dismissButton}\n                onClick={handleDismiss}\n            >\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </animated.div>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","Toast","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","BodyBL","styles.description","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"+xCAmBA,MAAMA,EAA4B,IAG5BC,EAAiB,CACnBC,QAASC,EACTC,QAASC,EACTC,MAAOC,EACPC,KAAMC,GAGGC,EAASC,IAAA,IAAAC,KAClBA,EAAO,gBACPC,EAAKC,MACLA,EAAKC,UACLA,EAASC,YACTA,EAAWC,gBACXA,EAAkBjB,EAAyBkB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYT,EACTU,EAAUC,EAAAX,EAVK,CAAA,OAAA,QAAA,QAAA,YAAA,cAAA,kBAAA,YAAA,QAAA,iBAelB,MAAMY,EAAWC,EAAuB,OACjCC,EAAWC,GAAcC,GAAkB,GAE5CC,EAAWC,EAAsB,MAKvCC,GAAU,KACNJ,GAAW,EAAK,GACjB,IAEHI,GAAU,KACN,IAAKd,EAAa,OAElB,MAAMe,EAAUC,YAAW,KACvBN,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMgB,aAAaF,EAAQ,GACnC,CAACf,EAAaC,IAEjBa,GAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhBzB,EAAAY,EAASc,eAAO,IAAA1B,OAAA,EAAAA,EAAE2B,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBf,GAAW,EAAM,EAMfkB,EAAcC,EAAU,CAC1BC,QAASrB,EAAY,EAAI,EACzBsB,UAAWtB,EACLG,EACI,iBACA,iBACJA,EACA,qBACA,mBACNoB,OAAQ,CACJC,OAAQC,EAAQC,eAChBC,SAnFY,KAqFhBC,OAAQ,KACC5B,GAAWP,SAAAA,GAAa,IA0CrC,OACIoC,EAACC,EAASC,IAAGC,OAAAC,OAAA,CACTC,IAAKpC,EACLqC,MAAOhB,EACP7B,UAAW8C,EAAKC,EAAgB/C,GAAU,YAC/BH,EAAI,aACHO,EACZ4C,KAAK,QACLC,MAAOC,GAAYxC,IACfJ,EAAU,CAAA6C,SAAA,CAEdC,EAACC,EAAc,CAAAF,SAAEtD,IACjB0C,EAAA,MAAA,CAAKvC,UAAWsD,EAAqBH,SAAA,CACjCZ,EAAA,MAAA,CAAKvC,UAAWuD,EAAsB,YAAa1D,EAAIsD,SAAA,CAhDhD,MACf,MAAMK,EAAOtE,EAAeW,GAC5B,OAAO2D,GAAQJ,EAACI,qBAAmB,EA+CtBC,GACDlB,EAAA,MAAA,CAAKvC,UAAW0D,EAAoBP,SAAA,CAC/BrD,IA7Cb6D,EAAMC,eAAe9D,GACdA,EAGHsD,EAAA,KAAA,CAAIpD,UAAW6D,EAAcb,KAAK,eAAcG,SAC3CrD,KAyCIC,IAlCb4D,EAAMC,eAAe7D,GACdA,EAGHqD,EAFGtD,EAEFgE,EAAWC,OAMXD,EAAWE,OANM,CAAChE,UAAWiE,EAAkBd,SAC3CpD,WAiCJM,GACG+C,EAACc,EAAM,CACHlE,UAAWmE,EACXC,UAAU,QACVC,QAAShE,EAAagE,QACtBC,SAAS,QAAOnB,SAEf9C,EAAaN,WAI1BwC,EAACgC,GACGvE,UAAWwE,EACXH,QAAS3C,EAAayB,SAAA,CAEtBC,EAACC,EAAc,CAACL,KAAK,eAAcG,SAAA,uBAGnCC,EAACqB,EAAS,CAAA,eAAA,UAEH"}
+{"version":3,"file":"toast.js","sources":["../../src/toast/toast.tsx"],"sourcesContent":["import {\n    CrossIcon,\n    ExclamationCircleFillIcon,\n    ExclamationTriangleFillIcon,\n    ICircleFillIcon,\n    TickCircleFillIcon,\n} from \"@lifesg/react-icons\";\nimport { animated, easings, useSpring } from \"@react-spring/web\";\nimport clsx from \"clsx\";\nimport React, { useEffect, useRef, useState } from \"react\";\n\nimport { Button } from \"../button\";\nimport { inertValue, VisuallyHidden } from \"../shared/accessibility\";\nimport { ClickableIcon } from \"../shared/clickable-icon\";\nimport { useMaxWidthMediaQuery } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport * as styles from \"./toast.styles\";\nimport type { ToastProps } from \"./types\";\n\nconst DEFAULT_AUTO_DISMISS_TIME = 4000;\nconst EASING_DURATION = 1000;\n\nconst TOAST_ICON_MAP = {\n    success: TickCircleFillIcon,\n    warning: ExclamationTriangleFillIcon,\n    error: ExclamationCircleFillIcon,\n    info: ICircleFillIcon,\n};\n\n// @catalog\n/**\n * A brief notification that appears on screen to provide feedback about an\n * operation or event.\n *\n * Use `Toast` to surface status messages without interrupting the user's workflow.\n */\nexport const Toast = ({\n    type = \"success\",\n    title,\n    label,\n    className,\n    autoDismiss,\n    autoDismissTime = DEFAULT_AUTO_DISMISS_TIME,\n    onDismiss,\n    fixed = true,\n    actionButton,\n    ...otherProps\n}: ToastProps) => {\n    // =============================================================================\n    // CONST, STATE\n    // =============================================================================\n    const toastRef = useRef<HTMLDivElement>(null);\n    const [isVisible, setVisible] = useState<boolean>(false);\n\n    const isMobile = useMaxWidthMediaQuery(\"lg\");\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setVisible(true);\n    }, []);\n\n    useEffect(() => {\n        if (!autoDismiss) return;\n\n        const timeout = setTimeout(() => {\n            setVisible(false);\n        }, autoDismissTime);\n\n        return () => clearTimeout(timeout);\n    }, [autoDismiss, autoDismissTime]);\n\n    useEffect(() => {\n        const handleKeyDown = (event: KeyboardEvent) => {\n            if (\n                event.key === \"Escape\" &&\n                toastRef.current?.contains(document.activeElement)\n            ) {\n                handleDismiss();\n            }\n        };\n\n        document.addEventListener(\"keydown\", handleKeyDown);\n        return () => {\n            document.removeEventListener(\"keydown\", handleKeyDown);\n        };\n    }, []);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleDismiss = () => {\n        setVisible(false);\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n    const transitions = useSpring({\n        opacity: isVisible ? 1 : 0,\n        transform: isVisible\n            ? isMobile\n                ? `translateY(0%)`\n                : `translateX(0%)`\n            : isMobile\n            ? `translateY(-1500%)`\n            : `translateX(150%)`,\n        config: {\n            easing: easings.easeInOutQuart,\n            duration: EASING_DURATION,\n        },\n        onRest: () => {\n            if (!isVisible) onDismiss?.();\n        },\n    });\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIcon = () => {\n        const Icon = TOAST_ICON_MAP[type];\n        return Icon && <Icon aria-hidden />;\n    };\n\n    const renderTitle = () => {\n        if (React.isValidElement(title)) {\n            return title;\n        } else {\n            return (\n                <h2 className={styles.title} role=\"presentation\">\n                    {title}\n                </h2>\n            );\n        }\n    };\n\n    const renderDesc = () => {\n        if (React.isValidElement(label)) {\n            return label;\n        } else if (title) {\n            return (\n                <Typography.BodyMD className={styles.description}>\n                    {label}\n                </Typography.BodyMD>\n            );\n        } else {\n            return (\n                <Typography.BodyBL className={styles.description}>\n                    {label}\n                </Typography.BodyBL>\n            );\n        }\n    };\n\n    return (\n        <animated.div\n            ref={toastRef}\n            style={transitions}\n            className={clsx(styles.wrapper, className)}\n            data-type={type}\n            data-fixed={fixed}\n            role=\"alert\"\n            inert={inertValue(!isVisible)}\n            {...otherProps}\n        >\n            <VisuallyHidden>{type}</VisuallyHidden>\n            <div className={styles.contentWrapper}>\n                <div className={styles.textIconWrapper} data-type={type}>\n                    {renderIcon()}\n                    <div className={styles.textContainer}>\n                        {title && renderTitle()}\n                        {label && renderDesc()}\n                    </div>\n                </div>\n\n                {actionButton && (\n                    <Button\n                        className={styles.actionButton}\n                        styleType=\"light\"\n                        onClick={actionButton.onClick}\n                        sizeType=\"small\"\n                    >\n                        {actionButton.label}\n                    </Button>\n                )}\n            </div>\n            <ClickableIcon\n                className={styles.dismissButton}\n                onClick={handleDismiss}\n            >\n                <VisuallyHidden role=\"presentation\">\n                    Close notification\n                </VisuallyHidden>\n                <CrossIcon aria-hidden />\n            </ClickableIcon>\n        </animated.div>\n    );\n};\n"],"names":["DEFAULT_AUTO_DISMISS_TIME","TOAST_ICON_MAP","success","TickCircleFillIcon","warning","ExclamationTriangleFillIcon","error","ExclamationCircleFillIcon","info","ICircleFillIcon","Toast","_a","type","title","label","className","autoDismiss","autoDismissTime","onDismiss","fixed","actionButton","otherProps","__rest","toastRef","useRef","isVisible","setVisible","useState","isMobile","useMaxWidthMediaQuery","useEffect","timeout","setTimeout","clearTimeout","handleKeyDown","event","key","current","contains","document","activeElement","handleDismiss","addEventListener","removeEventListener","transitions","useSpring","opacity","transform","config","easing","easings","easeInOutQuart","duration","onRest","_jsxs","animated","div","Object","assign","ref","style","clsx","styles.wrapper","role","inert","inertValue","children","_jsx","VisuallyHidden","styles.contentWrapper","styles.textIconWrapper","Icon","renderIcon","styles.textContainer","React","isValidElement","styles.title","Typography","BodyMD","BodyBL","styles.description","Button","styles.actionButton","styleType","onClick","sizeType","ClickableIcon","styles.dismissButton","CrossIcon"],"mappings":"+xCAmBA,MAAMA,EAA4B,IAG5BC,EAAiB,CACnBC,QAASC,EACTC,QAASC,EACTC,MAAOC,EACPC,KAAMC,GAUGC,EAASC,IAAA,IAAAC,KAClBA,EAAO,gBACPC,EAAKC,MACLA,EAAKC,UACLA,EAASC,YACTA,EAAWC,gBACXA,EAAkBjB,EAAyBkB,UAC3CA,EAASC,MACTA,GAAQ,EAAIC,aACZA,GAAYT,EACTU,EAAUC,EAAAX,EAVK,CAAA,OAAA,QAAA,QAAA,YAAA,cAAA,kBAAA,YAAA,QAAA,iBAelB,MAAMY,EAAWC,EAAuB,OACjCC,EAAWC,GAAcC,GAAkB,GAE5CC,EAAWC,EAAsB,MAKvCC,GAAU,KACNJ,GAAW,EAAK,GACjB,IAEHI,GAAU,KACN,IAAKd,EAAa,OAElB,MAAMe,EAAUC,YAAW,KACvBN,GAAW,EAAM,GAClBT,GAEH,MAAO,IAAMgB,aAAaF,EAAQ,GACnC,CAACf,EAAaC,IAEjBa,GAAU,KACN,MAAMI,EAAiBC,UAED,WAAdA,EAAMC,MACU,QAAhBzB,EAAAY,EAASc,eAAO,IAAA1B,OAAA,EAAAA,EAAE2B,SAASC,SAASC,iBAEpCC,GACJ,EAIJ,OADAF,SAASG,iBAAiB,UAAWR,GAC9B,KACHK,SAASI,oBAAoB,UAAWT,EAAc,CACzD,GACF,IAKH,MAAMO,EAAgB,KAClBf,GAAW,EAAM,EAMfkB,EAAcC,EAAU,CAC1BC,QAASrB,EAAY,EAAI,EACzBsB,UAAWtB,EACLG,EACI,iBACA,iBACJA,EACA,qBACA,mBACNoB,OAAQ,CACJC,OAAQC,EAAQC,eAChBC,SA1FY,KA4FhBC,OAAQ,KACC5B,GAAWP,SAAAA,GAAa,IA0CrC,OACIoC,EAACC,EAASC,IAAGC,OAAAC,OAAA,CACTC,IAAKpC,EACLqC,MAAOhB,EACP7B,UAAW8C,EAAKC,EAAgB/C,GAAU,YAC/BH,EAAI,aACHO,EACZ4C,KAAK,QACLC,MAAOC,GAAYxC,IACfJ,EAAU,CAAA6C,SAAA,CAEdC,EAACC,EAAc,CAAAF,SAAEtD,IACjB0C,EAAA,MAAA,CAAKvC,UAAWsD,EAAqBH,SAAA,CACjCZ,EAAA,MAAA,CAAKvC,UAAWuD,EAAsB,YAAa1D,EAAIsD,SAAA,CAhDhD,MACf,MAAMK,EAAOtE,EAAeW,GAC5B,OAAO2D,GAAQJ,EAACI,qBAAmB,EA+CtBC,GACDlB,EAAA,MAAA,CAAKvC,UAAW0D,EAAoBP,SAAA,CAC/BrD,IA7Cb6D,EAAMC,eAAe9D,GACdA,EAGHsD,EAAA,KAAA,CAAIpD,UAAW6D,EAAcb,KAAK,eAAcG,SAC3CrD,KAyCIC,IAlCb4D,EAAMC,eAAe7D,GACdA,EAGHqD,EAFGtD,EAEFgE,EAAWC,OAMXD,EAAWE,OANM,CAAChE,UAAWiE,EAAkBd,SAC3CpD,WAiCJM,GACG+C,EAACc,EAAM,CACHlE,UAAWmE,EACXC,UAAU,QACVC,QAAShE,EAAagE,QACtBC,SAAS,QAAOnB,SAEf9C,EAAaN,WAI1BwC,EAACgC,GACGvE,UAAWwE,EACXH,QAAS3C,EAAayB,SAAA,CAEtBC,EAACC,EAAc,CAACL,KAAK,eAAcG,SAAA,uBAGnCC,EAACqB,EAAS,CAAA,eAAA,UAEH"}

package/toast/types.d.ts

@@ -1,25 +1,61 @@
 import type { HTMLAttributes } from "react";
 import type React from "react";
+/**
+ * Visual variant of the `Toast`, controlling the icon and color treatment.
+ */
 export type ToastType = "success" | "warning" | "error" | "info";
+/**
+ * Configuration for the optional action button rendered inside a `Toast`.
+ */
 export interface ToastActionButtonProps {
+    /** The label of the action button */
     label: string;
+    /** Called when the action button is clicked */
     onClick: () => void;
 }
+/**
+ * Props for the `Toast` notification component.
+ */
 export interface ToastProps extends Omit<HTMLAttributes<HTMLDivElement>, "title"> {
-    /** The type of Toast. Control the display */
+    /**
+     * Visual variant controlling the icon and color treatment.
+     *
+     * @default "success"
+     */
     type: ToastType;
-    /** The content of the Toast. If a `title` is provided, this will act as a description label  */
+    /**
+     * Main text content of the toast. When `title` is also provided, rendered
+     * as a supporting description using a smaller typography style.
+     */
     label: string | React.ReactNode;
-    /** The title of the Toast  */
+    /**
+     * Optional heading displayed above `label`.
+     */
     title?: string | React.ReactNode | undefined;
-    /** If specified, the Toast will be automatically dismissed after 4 seconds */
+    /**
+     * When `true`, the toast dismisses itself automatically after
+     * `autoDismissTime` milliseconds.
+     */
     autoDismiss?: boolean | undefined;
-    /** Time until auto dismissal in milliseconds. Requires `autoDismiss` to be `true` */
+    /**
+     * Duration in milliseconds before the toast auto-dismisses.
+     * Only takes effect when `autoDismiss` is `true`.
+     *
+     * @default 4000
+     */
     autoDismissTime?: number | undefined;
-    /** If given, the function will be called when the Toast is dismissed */
+    /**
+     * Called after the dismissal animation completes.
+     */
     onDismiss?: (() => void) | undefined;
-    /** Specifies if Toast should be fixed to top. Defaults to true */
+    /**
+     * Pins the toast in a fixed position at the top of the viewport.
+     *
+     * @default true
+     */
     fixed?: boolean | undefined;
-    /** If given, will display an actionButton with the given title and run the given function upon clicking of the button */
+    /**
+     * Optional action button rendered alongside the toast content.
+     */
     actionButton?: ToastActionButtonProps | undefined;
 }

package/toggle/toggle.d.ts

@@ -1,2 +1,8 @@
 import type { ToggleProps } from "./types";
+/**
+ * A selectable control for checkbox and radio interaction patterns.
+ *
+ * Use `Toggle` to present a labeled option that the user can select or
+ * deselect.
+ */
 export declare const Toggle: ({ type, indicator, checked, styleType, children, childrenMaxLines, subLabel, disabled, error, name, id, className, compositeSection, removable, focusableWhenDisabled, useContentWidth, onRemove, onChange, "data-testid": testId, "aria-describedby": ariaDescribedBy, ...otherProps }: ToggleProps) => import("react/jsx-runtime").JSX.Element;

package/toggle/toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"toggle.js","sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    focusableWhenDisabled,\n    useContentWidth,\n    onRemove,\n    onChange,\n    \"data-testid\": testId,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const uniqueId = useId();\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useApplyStyle(labelRef, {\n        [styles.tokens.label.desktopLineClamp]:\n            childrenMaxLines?.desktop == null\n                ? null\n                : `${childrenMaxLines.desktop}`,\n        [styles.tokens.label.tabletLineClamp]:\n            childrenMaxLines?.tablet == null\n                ? null\n                : `${childrenMaxLines.tablet}`,\n        [styles.tokens.label.mobileLineClamp]:\n            childrenMaxLines?.mobile == null\n                ? null\n                : `${childrenMaxLines.mobile}`,\n    });\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n    const isInteractionBlocked = !!disabled;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInteractionBlocked) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange) {\n            onChange(event);\n            return;\n        }\n\n        switch (type) {\n            case \"checkbox\":\n                setSelected((prevSelected) => {\n                    return !prevSelected;\n                });\n                break;\n            case \"radio\":\n            case \"yes\":\n            case \"no\":\n                if (!selected) {\n                    setSelected(true);\n                }\n                break;\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const getContainerStateClass = () => {\n        if (styleType === \"no-border\") {\n            if (error) {\n                return clsx(\n                    styles.colorBorderError,\n                    !disabled && styles.toggleContainerError\n                );\n            }\n\n            if (disabled) {\n                return selected\n                    ? styles.toggleContainerNoBorderDisabledSelected\n                    : styles.toggleContainerNoBorderDisabled;\n            }\n\n            if (selected) {\n                return styles.toggleContainerNoBorderSelected;\n            }\n\n            return styles.toggleContainerNoBorder;\n        }\n\n        if (error) {\n            return disabled\n                ? styles.colorBorderError\n                : styles.toggleContainerError;\n        }\n\n        if (disabled) {\n            return selected\n                ? styles.toggleContainerDisabledSelected\n                : styles.toggleContainerDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleContainerSelected;\n        }\n\n        return styles.toggleContainer;\n    };\n\n    const getContainerHoverClass = () => {\n        if (disabled) {\n            return undefined;\n        }\n\n        if (!error && selected) {\n            return styles.toggleContainerHoverSelected;\n        }\n\n        return styles.toggleContainerHoverDefault;\n    };\n\n    const getTextContainerStateClass = () => {\n        if (disabled) {\n            return selected\n                ? styles.toggleTextContainerDisabledSelected\n                : styles.colorTextDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleTextContainerSelected;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <ToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n            />\n        );\n    };\n\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <div\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n                className={styles.subLabel}\n            >\n                {component}\n            </div>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <div\n                    data-id=\"toggle-composite-children\"\n                    className={clsx(\n                        styles.children,\n                        !collapsible && styles.childrenIsFinalItem,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    <Markup baseTextSize=\"body-md\">\n                        {compositeSectionChildren}\n                    </Markup>\n                </div>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n        return (\n            collapsible && (\n                <button\n                    className={clsx(\n                        styles.expandButton,\n                        disabled && styles.disabledColorCursor,\n                        collapsedWithoutErrors &&\n                            styles.expandButtonPaddingTopRequired\n                    )}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? \"Show less\" : \"Show more\"}\n                    {expanded ? (\n                        <ChevronUpIcon aria-hidden />\n                    ) : (\n                        <ChevronDownIcon aria-hidden />\n                    )}\n                </button>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <div\n                id={`${generatedId}-header-container`}\n                className={styles.headerContainer}\n            >\n                <div\n                    className={clsx(\n                        styles.indicatorLabelContainer,\n                        removable && styles.indicatorLabelContainerAddPadding\n                    )}\n                >\n                    <div\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                        className={styles.inputContainer}\n                    >\n                        <input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            className={clsx(\n                                styles.input,\n                                disabled && styles.toggleInputDisabled\n                            )}\n                            disabled={isNativeDisabled}\n                            aria-disabled={isFocusableWhenDisabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <div\n                            className={clsx(\n                                styles.textContainer,\n                                getTextContainerStateClass()\n                            )}\n                        >\n                            <label\n                                ref={labelRef}\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                className={clsx(\n                                    styles.label,\n                                    selected\n                                        ? styles.toggleLabelSelected\n                                        : styles.toggleLabelDefault\n                                )}\n                            >\n                                {children}\n                            </label>\n                            {subLabel && renderSubLabel()}\n                        </div>\n                    </div>\n                </div>\n                {removable && (\n                    <button\n                        type=\"button\"\n                        className={clsx(\n                            styles.removeButton,\n                            disabled && styles.disabledColorCursor\n                        )}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </button>\n                )}\n            </div>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <Typography.BodyMD\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    Error\n                </Typography.BodyMD>\n                <TextList.Ul\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <Typography.BodyMD\n                                    weight=\"semibold\"\n                                    className={clsx(\n                                        styles.colorTextError,\n                                        disabled && styles.colorTextDisabled\n                                    )}\n                                >\n                                    {item}\n                                </Typography.BodyMD>\n                            </li>\n                        );\n                    })}\n                </TextList.Ul>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <div\n                    className={clsx(\n                        styles.errorContainer,\n                        disabled && styles.disabledColorCursor\n                    )}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <Alert\n                        type={disabled ? \"description\" : \"error\"}\n                        className={styles.alertContainer}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </Alert>\n                </div>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                getContainerStateClass(),\n                getContainerHoverClass(),\n                !indicator && styles.noIndicatorContainer,\n                useContentWidth && styles.useContentWidthContainer,\n                className\n            )}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </div>\n    );\n};\n"],"names":["Toggle","_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderErrorList","_jsxs","_Fragment","Typography","BodyMD","weight","clsx","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","onClick","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","styles.disabledColorCursor","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon","styles.expandButton","styles.expandButtonPaddingTopRequired","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}
+{"version":3,"file":"toggle.js","sources":["../../src/toggle/toggle.tsx"],"sourcesContent":["import { ChevronDownIcon } from \"@lifesg/react-icons/chevron-down\";\nimport { ChevronUpIcon } from \"@lifesg/react-icons/chevron-up\";\nimport clsx from \"clsx\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\n\nimport { Alert } from \"../alert\";\nimport { Markup } from \"../markup\";\nimport { TextList } from \"../text-list\";\nimport { useApplyStyle } from \"../theme\";\nimport { Typography } from \"../typography\";\nimport { useId } from \"../util\";\nimport * as styles from \"./toggle.styles\";\nimport type { ToggleIconType } from \"./toggle-icon\";\nimport { ToggleIcon } from \"./toggle-icon\";\nimport type { ToggleProps } from \"./types\";\n\n// @catalog\n/**\n * A selectable control for checkbox and radio interaction patterns.\n *\n * Use `Toggle` to present a labeled option that the user can select or\n * deselect.\n */\nexport const Toggle = ({\n    type = \"checkbox\",\n    indicator,\n    checked,\n    styleType = \"default\",\n    children,\n    childrenMaxLines,\n    subLabel,\n    disabled,\n    error,\n    name,\n    id,\n    className,\n    compositeSection,\n    removable,\n    focusableWhenDisabled,\n    useContentWidth,\n    onRemove,\n    onChange,\n    \"data-testid\": testId,\n    \"aria-describedby\": ariaDescribedBy,\n    ...otherProps\n}: ToggleProps) => {\n    // =============================================================================\n    // CONST, STATE, REF\n    // =============================================================================\n    const {\n        collapsible = true,\n        errors,\n        children: compositeSectionChildren,\n        initialExpanded,\n    } = compositeSection || {};\n    const [selected, setSelected] = useState<boolean | undefined>(checked);\n    const [expanded, setExpanded] = useState<boolean>(!!initialExpanded);\n    const hasCompositeSectionError = useMemo(() => {\n        const hasErrorList = Array.isArray(errors) && errors?.length > 0;\n        const hasErrorElement = !Array.isArray(errors) && !!errors;\n        return hasErrorList || hasErrorElement;\n    }, [errors]);\n    const uniqueId = useId();\n    const generatedId = id ? `${id}` : `tg-${uniqueId}`;\n\n    const inputRef = useRef<HTMLInputElement>(null);\n    const labelRef = useRef<HTMLLabelElement>(null);\n\n    useApplyStyle(labelRef, {\n        [styles.tokens.label.desktopLineClamp]:\n            childrenMaxLines?.desktop == null\n                ? null\n                : `${childrenMaxLines.desktop}`,\n        [styles.tokens.label.tabletLineClamp]:\n            childrenMaxLines?.tablet == null\n                ? null\n                : `${childrenMaxLines.tablet}`,\n        [styles.tokens.label.mobileLineClamp]:\n            childrenMaxLines?.mobile == null\n                ? null\n                : `${childrenMaxLines.mobile}`,\n    });\n\n    const isFocusableWhenDisabled = !!disabled && !!focusableWhenDisabled;\n    const isNativeDisabled = !!disabled && !focusableWhenDisabled;\n    const isInteractionBlocked = !!disabled;\n\n    // =============================================================================\n    // EFFECTS\n    // =============================================================================\n    useEffect(() => {\n        setSelected(checked);\n    }, [checked]);\n\n    useEffect(() => {\n        if (selected) {\n            setExpanded(initialExpanded ?? true);\n        }\n    }, [selected]);\n\n    // =============================================================================\n    // EVENT HANDLERS\n    // =============================================================================\n    const handleOnChange = (event: React.ChangeEvent<HTMLInputElement>) => {\n        if (isInteractionBlocked) {\n            event.preventDefault();\n            return;\n        }\n\n        if (onChange) {\n            onChange(event);\n            return;\n        }\n\n        switch (type) {\n            case \"checkbox\":\n                setSelected((prevSelected) => {\n                    return !prevSelected;\n                });\n                break;\n            case \"radio\":\n            case \"yes\":\n            case \"no\":\n                if (!selected) {\n                    setSelected(true);\n                }\n                break;\n        }\n    };\n\n    const handleExpandCollapseClick = () => {\n        if (!disabled) {\n            setExpanded(!expanded);\n        }\n    };\n\n    const handleOnRemove = () => {\n        if (!disabled) {\n            if (onRemove) {\n                onRemove();\n                return;\n            }\n        }\n    };\n\n    const handleContainerClick = () => {\n        inputRef?.current?.click();\n    };\n\n    const handleInputClick = (e: React.MouseEvent<HTMLInputElement>) => {\n        e.stopPropagation();\n    };\n\n    // =============================================================================\n    // HELPER FUNCTIONS\n    // =============================================================================\n\n    const getContainerStateClass = () => {\n        if (styleType === \"no-border\") {\n            if (error) {\n                return clsx(\n                    styles.colorBorderError,\n                    !disabled && styles.toggleContainerError\n                );\n            }\n\n            if (disabled) {\n                return selected\n                    ? styles.toggleContainerNoBorderDisabledSelected\n                    : styles.toggleContainerNoBorderDisabled;\n            }\n\n            if (selected) {\n                return styles.toggleContainerNoBorderSelected;\n            }\n\n            return styles.toggleContainerNoBorder;\n        }\n\n        if (error) {\n            return disabled\n                ? styles.colorBorderError\n                : styles.toggleContainerError;\n        }\n\n        if (disabled) {\n            return selected\n                ? styles.toggleContainerDisabledSelected\n                : styles.toggleContainerDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleContainerSelected;\n        }\n\n        return styles.toggleContainer;\n    };\n\n    const getContainerHoverClass = () => {\n        if (disabled) {\n            return undefined;\n        }\n\n        if (!error && selected) {\n            return styles.toggleContainerHoverSelected;\n        }\n\n        return styles.toggleContainerHoverDefault;\n    };\n\n    const getTextContainerStateClass = () => {\n        if (disabled) {\n            return selected\n                ? styles.toggleTextContainerDisabledSelected\n                : styles.colorTextDisabled;\n        }\n\n        if (selected) {\n            return styles.toggleTextContainerSelected;\n        }\n    };\n\n    // =============================================================================\n    // RENDER FUNCTIONS\n    // =============================================================================\n    const renderIndicator = () => {\n        let toggleIconType: ToggleIconType;\n\n        switch (type) {\n            case \"yes\":\n                toggleIconType = \"tick\";\n                break;\n            case \"no\":\n                toggleIconType = \"cross\";\n                break;\n            case \"checkbox\":\n            case \"radio\":\n                toggleIconType = type;\n                break;\n        }\n\n        return (\n            <ToggleIcon\n                type={toggleIconType}\n                active={selected}\n                disabled={disabled}\n            />\n        );\n    };\n\n    const renderSubLabel = () => {\n        if (!subLabel) {\n            return null;\n        }\n\n        let component: string | JSX.Element;\n\n        if (typeof subLabel === \"function\") {\n            component = subLabel();\n        } else {\n            component = subLabel;\n        }\n\n        // Hide sublabel from screen readers as the main input already has aria-describedby that points to the sublabel\n        return (\n            <div\n                data-id=\"toggle-sublabel\"\n                id={`${generatedId}-sublabel`}\n                aria-hidden\n                className={styles.subLabel}\n            >\n                {component}\n            </div>\n        );\n    };\n\n    const renderCompositeChildren = () => {\n        return (\n            (!collapsible || expanded) && (\n                <div\n                    data-id=\"toggle-composite-children\"\n                    className={clsx(\n                        styles.children,\n                        !collapsible && styles.childrenIsFinalItem,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    <Markup baseTextSize=\"body-md\">\n                        {compositeSectionChildren}\n                    </Markup>\n                </div>\n            )\n        );\n    };\n\n    const renderExpandButton = () => {\n        const collapsedWithoutErrors = !expanded && !hasCompositeSectionError;\n\n        return (\n            collapsible && (\n                <button\n                    className={clsx(\n                        styles.expandButton,\n                        disabled && styles.disabledColorCursor,\n                        collapsedWithoutErrors &&\n                            styles.expandButtonPaddingTopRequired\n                    )}\n                    disabled={disabled}\n                    onClick={handleExpandCollapseClick}\n                    data-testid={expanded ? \"collapse-button\" : \"expand-button\"}\n                >\n                    {expanded ? \"Show less\" : \"Show more\"}\n                    {expanded ? (\n                        <ChevronUpIcon aria-hidden />\n                    ) : (\n                        <ChevronDownIcon aria-hidden />\n                    )}\n                </button>\n            )\n        );\n    };\n\n    const renderToggleWithRemoveButton = () => {\n        const ariaDescriptions =\n            [\n                typeof subLabel === \"string\" ? `${generatedId}-sublabel` : null,\n                ariaDescribedBy,\n            ]\n                .filter(Boolean)\n                .join(\" \") || undefined;\n\n        return (\n            <div\n                id={`${generatedId}-header-container`}\n                className={styles.headerContainer}\n            >\n                <div\n                    className={clsx(\n                        styles.indicatorLabelContainer,\n                        removable && styles.indicatorLabelContainerAddPadding\n                    )}\n                >\n                    <div\n                        id={`${generatedId}-input-container`}\n                        onClick={handleContainerClick}\n                        className={styles.inputContainer}\n                    >\n                        <input\n                            ref={inputRef}\n                            name={name}\n                            id={`${generatedId}-input`}\n                            type={type === \"checkbox\" ? \"checkbox\" : \"radio\"}\n                            data-testid=\"toggle-input\"\n                            className={clsx(\n                                styles.input,\n                                disabled && styles.toggleInputDisabled\n                            )}\n                            disabled={isNativeDisabled}\n                            aria-disabled={isFocusableWhenDisabled}\n                            onChange={handleOnChange}\n                            onClick={handleInputClick}\n                            checked={selected}\n                            tabIndex={isFocusableWhenDisabled ? 0 : undefined}\n                            aria-describedby={ariaDescriptions}\n                            {...otherProps}\n                        />\n                        {indicator && renderIndicator()}\n                        <div\n                            className={clsx(\n                                styles.textContainer,\n                                getTextContainerStateClass()\n                            )}\n                        >\n                            <label\n                                ref={labelRef}\n                                htmlFor={`${generatedId}-input`}\n                                data-testid={`toggle-label`}\n                                id={`${generatedId}-label`}\n                                className={clsx(\n                                    styles.label,\n                                    selected\n                                        ? styles.toggleLabelSelected\n                                        : styles.toggleLabelDefault\n                                )}\n                            >\n                                {children}\n                            </label>\n                            {subLabel && renderSubLabel()}\n                        </div>\n                    </div>\n                </div>\n                {removable && (\n                    <button\n                        type=\"button\"\n                        className={clsx(\n                            styles.removeButton,\n                            disabled && styles.disabledColorCursor\n                        )}\n                        onClick={handleOnRemove}\n                        id={`${generatedId}-remove-button`}\n                    >\n                        Remove\n                    </button>\n                )}\n            </div>\n        );\n    };\n\n    const renderErrorList = (errors: string[]) => {\n        return (\n            <>\n                <Typography.BodyMD\n                    weight=\"semibold\"\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    Error\n                </Typography.BodyMD>\n                <TextList.Ul\n                    className={clsx(\n                        styles.colorTextError,\n                        disabled && styles.colorTextDisabled\n                    )}\n                >\n                    {errors?.map((item, index) => {\n                        return (\n                            <li\n                                key={index}\n                                id={`${generatedId}-error-list-item-${index}`}\n                            >\n                                <Typography.BodyMD\n                                    weight=\"semibold\"\n                                    className={clsx(\n                                        styles.colorTextError,\n                                        disabled && styles.colorTextDisabled\n                                    )}\n                                >\n                                    {item}\n                                </Typography.BodyMD>\n                            </li>\n                        );\n                    })}\n                </TextList.Ul>\n            </>\n        );\n    };\n\n    const renderError = () => {\n        return (\n            collapsible &&\n            !expanded &&\n            hasCompositeSectionError && (\n                <div\n                    className={clsx(\n                        styles.errorContainer,\n                        disabled && styles.disabledColorCursor\n                    )}\n                    onClick={handleExpandCollapseClick}\n                    id={`${generatedId}-error-alert`}\n                >\n                    <Alert\n                        type={disabled ? \"description\" : \"error\"}\n                        className={styles.alertContainer}\n                        showIcon\n                    >\n                        {Array.isArray(errors)\n                            ? renderErrorList(errors)\n                            : errors}\n                    </Alert>\n                </div>\n            )\n        );\n    };\n\n    const renderCompositeSection = () => {\n        return (\n            compositeSectionChildren && (\n                <div>\n                    {renderCompositeChildren()}\n                    {renderError()}\n                    {renderExpandButton()}\n                </div>\n            )\n        );\n    };\n\n    return (\n        <div\n            className={clsx(\n                styles.container,\n                getContainerStateClass(),\n                getContainerHoverClass(),\n                !indicator && styles.noIndicatorContainer,\n                useContentWidth && styles.useContentWidthContainer,\n                className\n            )}\n            id={id}\n            data-testid={testId}\n        >\n            {renderToggleWithRemoveButton()}\n            {renderCompositeSection()}\n        </div>\n    );\n};\n"],"names":["Toggle","_a","type","indicator","checked","styleType","children","childrenMaxLines","subLabel","disabled","error","name","id","className","compositeSection","removable","focusableWhenDisabled","useContentWidth","onRemove","onChange","testId","ariaDescribedBy","otherProps","__rest","collapsible","errors","compositeSectionChildren","initialExpanded","selected","setSelected","useState","expanded","setExpanded","hasCompositeSectionError","useMemo","hasErrorList","Array","isArray","length","hasErrorElement","uniqueId","useId","generatedId","inputRef","useRef","labelRef","useApplyStyle","styles.tokens","label","desktopLineClamp","desktop","tabletLineClamp","tablet","mobileLineClamp","mobile","isFocusableWhenDisabled","isNativeDisabled","isInteractionBlocked","useEffect","handleOnChange","event","preventDefault","prevSelected","handleExpandCollapseClick","handleOnRemove","handleContainerClick","current","click","handleInputClick","e","stopPropagation","renderIndicator","toggleIconType","_jsx","ToggleIcon","active","renderSubLabel","component","styles.subLabel","renderErrorList","_jsxs","_Fragment","Typography","BodyMD","weight","clsx","styles.colorTextError","styles.colorTextDisabled","TextList","Ul","map","item","index","styles.container","styles.colorBorderError","styles.toggleContainerError","styles.toggleContainerNoBorderDisabledSelected","styles.toggleContainerNoBorderDisabled","styles.toggleContainerNoBorderSelected","styles.toggleContainerNoBorder","styles.toggleContainerDisabledSelected","styles.toggleContainerDisabled","styles.toggleContainerSelected","styles.toggleContainer","styles.toggleContainerHoverSelected","styles.toggleContainerHoverDefault","getContainerHoverClass","styles.noIndicatorContainer","styles.useContentWidthContainer","ariaDescriptions","filter","Boolean","join","undefined","styles.headerContainer","styles.indicatorLabelContainer","styles.indicatorLabelContainerAddPadding","onClick","styles.inputContainer","ref","styles.input","styles.toggleInputDisabled","tabIndex","styles.textContainer","styles.toggleTextContainerDisabledSelected","styles.toggleTextContainerSelected","htmlFor","styles.label","styles.toggleLabelSelected","styles.toggleLabelDefault","styles.removeButton","styles.disabledColorCursor","renderToggleWithRemoveButton","styles.children","styles.childrenIsFinalItem","Markup","baseTextSize","styles.errorContainer","Alert","styles.alertContainer","showIcon","styles.expandButton","styles.expandButtonPaddingTopRequired","ChevronUpIcon","ChevronDownIcon"],"mappings":"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"}

package/toggle/types.d.ts

@@ -1,53 +1,131 @@
+/**
+ * Controls selection behavior and the indicator icon rendered inside the
+ * toggle.
+ *
+ * - `"checkbox"` allows the user to deselect.
+ * - `"radio"`, `"yes"`, and `"no"` only allow selection; once selected,
+ *   they cannot be deselected.
+ */
 export type ToggleType = "checkbox" | "radio" | "yes" | "no";
+/**
+ * Visual border style applied to the toggle container.
+ *
+ * - `"default"` renders the container with a visible border.
+ * - `"no-border"` renders without a border.
+ */
 export type ToggleStyleType = "default" | "no-border";
+/**
+ * Props for the `Toggle` selection control.
+ */
 export interface ToggleProps extends React.AriaAttributes, React.DOMAttributes<HTMLInputElement> {
     /**
-     * The type of toggle. Values: "checkbox" | "radio" | "yes" | "no"
+     * Determines selection behavior and the indicator icon style.
      *
-     * "checkbox" - allows deselection
-     *
-     * "radio", "yes", "no" - does not allow deselection. However they
-     * will determine the indicator to be displayed
+     * @default "checkbox"
      */
     type?: ToggleType | undefined;
-    /** Specifies if the indicator icon should be displayed */
+    /**
+     * Whether to render the selection indicator icon inside the toggle.
+     *
+     * The icon shape depends on `type`:
+     * - `"checkbox"` renders a tick box.
+     * - `"radio"` renders a filled circle.
+     * - `"yes"` renders a tick.
+     * - `"no"` renders a cross.
+     */
     indicator?: boolean | undefined;
-    /** Indicates if the element is checked */
+    /**
+     * Controlled checked state of the toggle.
+     */
     checked?: boolean | undefined;
-    /** The style type of the Toggle. Values: "default" | "no-border" */
+    /**
+     * Visual presentation of the toggle container.
+     *
+     * @default "default"
+     */
     styleType?: ToggleStyleType | undefined;
-    /** The Toggle label */
+    /** Label content for the toggle. */
     children: React.ReactNode;
-    /** The number of lines visible. Additional lines will be truncated */
+    /**
+     * Maximum number of visible label lines at each breakpoint.
+     *
+     * Lines beyond the limit are truncated with an ellipsis. Omit a
+     * breakpoint key to leave that viewport unconstrained.
+     */
     childrenMaxLines?: {
         mobile?: number | undefined;
         desktop?: number | undefined;
         tablet?: number | undefined;
     } | undefined;
+    /**
+     * Secondary content rendered below the main label.
+     */
     subLabel?: (() => JSX.Element) | JSX.Element | string | undefined;
     disabled?: boolean | undefined;
-    /** Specifies if the error display should be present */
+    /** Renders the input in an error state. */
     error?: boolean | undefined;
     className?: string | undefined;
     name?: string | undefined;
     id?: string | undefined;
     "data-testid"?: string | undefined;
+    /**
+     * Called when the toggle selection state changes.
+     *
+     * When provided, the caller is responsible for reflecting
+     * the new value back via `checked`.
+     */
     onChange?: ((event: React.ChangeEvent<HTMLInputElement>) => void) | undefined;
-    /** The Toggle subsection */
+    /**
+     * Optional collapsible body section rendered below the toggle label.
+     *
+     * The section automatically expands when the toggle becomes selected.
+     */
     compositeSection?: ToggleCompositeSectionProps | undefined;
-    /** Specifies if the remove button should be displayed */
+    /**
+     * Renders a "Remove" button alongside the label.
+     *
+     * Clicking the button calls `onRemove` when the toggle is not disabled.
+     */
     removable?: boolean | undefined;
+    /** Called when the remove button is clicked and the toggle is not disabled. */
     onRemove?: (() => void) | undefined;
-    /** Changes min-width to fit content */
+    /** Constrains the toggle width to its content rather than filling the container. */
     useContentWidth?: boolean | undefined;
+    /**
+     * Keeps the toggle keyboard-focusable when `disabled` is `true`.
+     *
+     * When set alongside `disabled`, the native `disabled` attribute is omitted
+     * in favor of `aria-disabled="true"` and `tabIndex={0}`, keeping the element
+     * keyboard-reachable. `onChange` is still suppressed.
+     */
     focusableWhenDisabled?: boolean | undefined;
 }
+/**
+ * Configuration for the collapsible body section attached to a `Toggle`.
+ */
 export interface ToggleCompositeSectionProps {
+    /** Content rendered inside the composite section body. */
     children: React.ReactNode;
-    /** Specifies if the subsection is collapsible */
+    /**
+     * Whether the section can be collapsed and expanded by the user.
+     *
+     * @default true
+     */
     collapsible?: boolean | undefined;
-    /** The initial expanded state. Only applicable if collapsible */
+    /**
+     * Whether the composite section starts in the expanded state.
+     *
+     * When the toggle becomes selected, the section automatically expands
+     * regardless of this value. Only applies when `collapsible` is `true`.
+     *
+     * @default false
+     */
     initialExpanded?: boolean | undefined;
-    /** Specifies errors to be displayed when the subsection is collapsed */
+    /**
+     * Errors shown in an alert banner when the section is collapsed.
+     *
+     * Pass a `string[]` to render a titled error list, or a `JSX.Element`
+     * for a custom error presentation.
+     */
     errors?: string[] | JSX.Element | undefined;
 }

package/tools/shared/generated-file-formatter.d.ts

@@ -0,0 +1,6 @@
+/**
+ * Shared formatter for generated files.
+ */
+export declare class GeneratedFileFormatter {
+    format(pattern: string): void;
+}

package/tools/shared/jsdoc-parser.d.ts

@@ -0,0 +1,36 @@
+type JsDocTagLike = {
+    getCommentText: () => string | undefined;
+    getTagName: () => string;
+};
+type JsDocBlockLike = {
+    getCommentText: () => string | undefined;
+    getTags: () => JsDocTagLike[];
+};
+type JsDocNodeLike = {
+    getJsDocs: () => JsDocBlockLike[];
+};
+type LeadingCommentNodeLike = {
+    getLeadingCommentRanges: () => Array<{
+        getText: () => string;
+    }>;
+};
+/**
+ * Shared parser for JSDoc tags and leading comments.
+ */
+export declare class JsDocParser {
+    getTagCommentText(tag: {
+        getCommentText: () => string | undefined;
+    }): string | undefined;
+    getDescriptionFromNode(node: JsDocNodeLike, options?: {
+        joinWith?: string;
+        normalizeNewlinesToSpaces?: boolean;
+    }): string | undefined;
+    getTags(node: JsDocNodeLike): JsDocTagLike[];
+    getLeadingNonJsDocComments(node: LeadingCommentNodeLike): string[];
+    getMarkerValuesFromLeadingComments(node: LeadingCommentNodeLike, marker: string): string[];
+    splitCommaSeparatedValues(rawValue: string | undefined): string[];
+    normalizeCommentText(text: string | undefined, options?: {
+        normalizeNewlinesToSpaces?: boolean;
+    }): string | undefined;
+}
+export {};

package/tools/shared/ts-morph-project-factory.d.ts

@@ -0,0 +1,9 @@
+import { Project } from "ts-morph";
+/**
+ * Shared singleton factory for ts-morph Project instances.
+ */
+export declare class TsMorphProjectFactory {
+    private static _instance;
+    static getProject(): Project;
+    static reset(): void;
+}

package/tools/shared/typescript-source-provider.d.ts

@@ -0,0 +1,9 @@
+import { type Project, type SourceFile } from "ts-morph";
+/**
+ * Shared source provider for ts-morph project and source-file operations.
+ */
+export declare class TypeScriptSourceProvider {
+    getProject(): Project;
+    getSourceFile(filePath: string): SourceFile;
+    getSourceFilesByGlobs(globs: readonly string[]): SourceFile[];
+}

package/tools/storybook-argtypes/adapters/file-system-adapter.d.ts

@@ -0,0 +1,69 @@
+/**
+ * FileSystemAdapter - Minimal abstraction for filesystem operations.
+ *
+ * This adapter abstracts path resolution and file existence checks,
+ * making file operations testable via mocking without filesystem access.
+ */
+import type { FileStat } from "../types";
+/**
+ * Interface for filesystem operations used by path resolution services.
+ * Allows mocking during tests without real filesystem access.
+ */
+export interface IFileSystemAdapter {
+    /**
+     * Check if a path exists (file or directory).
+     * @param path The path to check
+     * @returns true if path exists, false otherwise
+     */
+    existsSync(path: string): boolean;
+    /**
+     * Get file statistics for a path.
+     * @param path The path to stat
+     * @returns File stat object with isFile() and isDirectory() methods
+     * @throws If path doesn't exist
+     */
+    statSync(path: string): FileStat;
+    /**
+     * Resolve one or more path segments relative to working directory.
+     * @param segments Path segments to resolve
+     * @returns Absolute resolved path
+     */
+    resolvePath(...segments: string[]): string;
+    /**
+     * Remove a file or directory.
+     * @param path The path to remove
+     * @param options.force If true, suppress errors if path doesn't exist
+     */
+    rm(path: string, options?: {
+        force?: boolean;
+    }): Promise<void>;
+    /**
+     * Create a directory.
+     * @param path The directory path
+     * @param options.recursive If true, create parent directories as needed
+     */
+    mkdir(path: string, options?: {
+        recursive?: boolean;
+    }): Promise<void>;
+    /**
+     * Write text content to a file.
+     * @param path The file path
+     * @param data The content to write
+     */
+    writeFile(path: string, data: string): Promise<void>;
+}
+/**
+ * Default FileSystemAdapter implementation using Node.js fs module.
+ */
+export declare class FileSystemAdapter implements IFileSystemAdapter {
+    existsSync(path: string): boolean;
+    statSync(path: string): FileStat;
+    resolvePath(...segments: string[]): string;
+    rm(path: string, options?: {
+        force?: boolean;
+    }): Promise<void>;
+    mkdir(path: string, options?: {
+        recursive?: boolean;
+    }): Promise<void>;
+    writeFile(path: string, data: string): Promise<void>;
+}

package/tools/storybook-argtypes/arg-types-generator.d.ts

@@ -0,0 +1,85 @@
+/**
+ * ArgTypesGenerator - Orchestrator for Storybook argTypes generation.
+ *
+ * Composes all services to generate argTypes files from TypeScript sources
+ * and the registry mapping story titles to their argTypes.
+ *
+ * This class mirrors the logic in the original procedural script but with
+ * clear method boundaries and injectable dependencies.
+ */
+import type { IFileSystemAdapter } from "./adapters/file-system-adapter";
+/**
+ * Orchestrates the full Storybook argTypes generation pipeline.
+ * Coordinates all services: source analysis, type formatting, row building, and registry generation.
+ *
+ * Usage:
+ * ```typescript
+ * const generator = new ArgTypesGenerator();
+ * await generator.generateAll();
+ * ```
+ */
+export declare class ArgTypesGenerator {
+    private readonly sourceProvider;
+    private readonly jsDocExtractor;
+    private readonly typeDependencyResolver;
+    private readonly typeFormatter;
+    private readonly rowBuilder;
+    private readonly resolver;
+    private readonly storyRegistryGenerator;
+    private readonly generatedFileFormatter;
+    private readonly fsAdapter;
+    /**
+     * Create a new ArgTypesGenerator.
+     *
+     * @param fsAdapter Optional filesystem adapter for testability
+     */
+    constructor(fsAdapter?: IFileSystemAdapter);
+    /**
+     * Generate all component argTypes files and the registry.
+     * This is the main entry point for full generation.
+     */
+    generateAll(): Promise<void>;
+    /**
+     * Generate argTypes for a single component types.ts file.
+     *
+     * @param sourceFilePath Path to the source types.ts file
+     */
+    generateForSourceFile(sourceFilePath: string): Promise<void>;
+    /**
+     * Generate the global registry mapping story titles to their argTypes imports.
+     * Scans all story files to discover which component types.ts each story uses.
+     */
+    generateStorybookArgTypesRegistry(): Promise<void>;
+    /**
+     * Format all generated files using prettier.
+     */
+    formatGenerated(): void;
+    /**
+     * Get the output file path for generated argTypes.
+     */
+    getOutputFile(sourceFilePath: string): string;
+    /**
+     * Delete the generated argTypes output file for a given source file path.
+     * Used when the source file is removed during watch mode.
+     */
+    deleteOutputFile(sourceFilePath: string): Promise<void>;
+    /**
+     * Get the export name for the component's argTypes object.
+     * e.g. "form-custom-field" → "formCustomFieldExtraArgTypes"
+     */
+    getExportName(sourceFilePath: string): string;
+    /**
+     * Get the relative import path for a generated argTypes file.
+     */
+    getArgTypesImportPath(outputFile: string): string;
+    private getPropertyName;
+    private getCategoryName;
+    private findReferencedTypeNames;
+    private getWrappedTypeNames;
+    private getInheritedHtmlAttributesRow;
+    private getInheritedInterfacesDescription;
+    private getInterfaceArgTypes;
+    private getTypeAliasArgTypes;
+    private generateImportedTypeRows;
+    private shouldSkipImportedTypeRows;
+}