tempest-react-sdk 0.78.0 → 0.79.0

package/dist/components/Toast/ToastProvider.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToastProvider.js","names":[],"sources":["../../../src/components/Toast/ToastProvider.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines — the provider is the queue: enqueue, dedupe, auto-\n * dismiss timers, pause on hover and the portal that renders them. Splitting the\n * queue from the renderer would put a timer in one file and the element it dismisses\n * in another.\n */\nimport {\n    Children,\n    Fragment,\n    createContext,\n    isValidElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Toast.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type ToastVariant = \"success\" | \"warning\" | \"error\" | \"info\";\n\n/**\n * Horizontal alignment of a toast's title and description.\n *\n * `\"start\"` is the default because a toast is read as a sentence beside a close\n * button: left-aligned lines share one edge with the icon and the stack, so a\n * two-line description stays scannable. `\"center\"` exists for the short\n * celebratory toast (an achievement with a badge) where the text is one line.\n */\nexport type ToastAlign = \"start\" | \"center\";\n\nexport interface ToastOptions {\n    id?: string;\n    title?: string;\n    description?: string;\n    variant?: ToastVariant;\n    /** Auto-dismiss timeout in ms. Pass `0` to keep the toast until dismissed manually. */\n    duration?: number;\n    /**\n     * Leading slot rendered before the text, e.g. `<img src=\"/badge.svg\" alt=\"\" />`.\n     *\n     * It is an app asset, so it takes any `ReactNode` — but it is a slot for an\n     * **icon**, not for a control. The wrapper is `inert`, so a button or link put\n     * here is neither focusable nor clickable; actions belong outside the toast.\n     *\n     * The slot is decorative (`aria-hidden`) unless {@link ToastOptions.iconLabel}\n     * is given: most icons repeat what the title already says, and an unlabelled\n     * image inside the live region would otherwise be announced as \"image\" or by\n     * its file name. An `<img>` or `<svg>` anywhere inside it is capped at 32px and\n     * keeps its aspect ratio. A node that renders nothing (`null`, a boolean, `\"\"`,\n     * `[]`, an empty fragment) counts as no icon, so the toast keeps two columns.\n     */\n    icon?: ReactNode;\n    /**\n     * Accessible name for {@link ToastOptions.icon} when the icon carries meaning\n     * the text does not. With it the slot becomes `role=\"img\"` with this label and\n     * is announced together with the toast; without it the slot is hidden from\n     * assistive technology.\n     */\n    iconLabel?: string;\n    /** Text alignment of title and description. Default `\"start\"`; see {@link ToastAlign}. */\n    align?: ToastAlign;\n}\n\ninterface ToastEntry extends Required<\n    Omit<ToastOptions, \"id\" | \"title\" | \"description\" | \"icon\" | \"iconLabel\">\n> {\n    id: string;\n    title?: string;\n    description?: string;\n    icon?: ReactNode;\n    iconLabel?: string;\n}\n\nexport interface ToastApi {\n    show: (options: ToastOptions) => string;\n    dismiss: (id: string) => void;\n    success: (\n        description: string,\n        options?: Omit<ToastOptions, \"variant\" | \"description\">,\n    ) => string;\n    error: (description: string, options?: Omit<ToastOptions, \"variant\" | \"description\">) => string;\n    warning: (\n        description: string,\n        options?: Omit<ToastOptions, \"variant\" | \"description\">,\n    ) => string;\n    info: (description: string, options?: Omit<ToastOptions, \"variant\" | \"description\">) => string;\n}\n\nconst ToastContext = createContext<ToastApi | null>(null);\n\n/**\n * Access the toast API. Must be used inside a {@link ToastProvider}.\n *\n * @returns Methods to show and dismiss toasts.\n */\nexport function useToast(): ToastApi {\n    const ctx = useContext(ToastContext);\n    if (!ctx) throw new Error(\"useToast must be used inside a <ToastProvider>\");\n    return ctx;\n}\n\nexport type ToastPosition =\n    \"top-right\" | \"top-left\" | \"top-center\" | \"bottom-right\" | \"bottom-left\" | \"bottom-center\";\n\nexport interface ToastProviderProps {\n    children: ReactNode;\n    /** Default auto-dismiss duration (ms). Default 4000. */\n    defaultDuration?: number;\n    /** Stack position on screen. Default `\"top-right\"`. */\n    position?: ToastPosition;\n}\n\n/**\n * Renders a portalled toast container and exposes the imperative {@link useToast} API.\n */\nexport function ToastProvider({\n    children,\n    defaultDuration = 4000,\n    position = \"top-right\",\n}: ToastProviderProps) {\n    const [toasts, setToasts] = useState<ToastEntry[]>([]);\n    const counter = useRef<number>(0);\n\n    const dismiss = useCallback((id: string): void => {\n        setToasts((current) => current.filter((toast) => toast.id !== id));\n    }, []);\n\n    const show = useCallback(\n        (options: ToastOptions): string => {\n            const id = options.id ?? `toast-${++counter.current}`;\n            const entry: ToastEntry = {\n                id,\n                title: options.title,\n                description: options.description,\n                variant: options.variant ?? \"info\",\n                duration: options.duration ?? defaultDuration,\n                icon: options.icon,\n                iconLabel: options.iconLabel,\n                align: options.align ?? \"start\",\n            };\n            setToasts((current) => [...current, entry]);\n            return id;\n        },\n        [defaultDuration],\n    );\n\n    const api = useMemo<ToastApi>(\n        () => ({\n            show,\n            dismiss,\n            success: (description, options) =>\n                show({ ...options, description, variant: \"success\" }),\n            error: (description, options) => show({ ...options, description, variant: \"error\" }),\n            warning: (description, options) =>\n                show({ ...options, description, variant: \"warning\" }),\n            info: (description, options) => show({ ...options, description, variant: \"info\" }),\n        }),\n        [show, dismiss],\n    );\n\n    return (\n        <ToastContext.Provider value={api}>\n            {children}\n            <ToastContainer toasts={toasts} onDismiss={dismiss} position={position} />\n        </ToastContext.Provider>\n    );\n}\n\ninterface ContainerProps {\n    toasts: ToastEntry[];\n    onDismiss: (id: string) => void;\n    position: ToastPosition;\n}\n\nfunction positionClass(position: ToastPosition): string {\n    switch (position) {\n        case \"top-left\":\n            return styles.positionTopLeft;\n        case \"top-center\":\n            return styles.positionTopCenter;\n        case \"bottom-right\":\n            return styles.positionBottomRight;\n        case \"bottom-left\":\n            return styles.positionBottomLeft;\n        case \"bottom-center\":\n            return styles.positionBottomCenter;\n        case \"top-right\":\n        default:\n            return styles.positionTopRight;\n    }\n}\n\n/**\n * The portalled stack, and the page's live region for toasts.\n *\n * `aria-atomic=\"false\"` matters: with `\"true\"` a screen reader re-reads the\n * **entire** stack on every change, so the third toast of a batch is announced as\n * all three, and dismissing one re-announces the survivors. `\"false\"` announces only\n * the node that was added, which is what the user needs.\n *\n * The stack stays the live region rather than delegating to `useAnnounce`, because\n * routing it through the shared announcer would put the same text in the document\n * twice — once visible, once hidden — and every `getByText(\"Salvo\")` in a consuming\n * app's test suite would start matching two nodes. The announcer is for messages\n * that have no on-screen home; a toast has one.\n */\nfunction ToastContainer({ toasts, onDismiss, position }: ContainerProps) {\n    const portalHost = usePortalHost();\n\n    if (!portalHost) return null;\n    return createPortal(\n        <div\n            className={cn(styles.container, positionClass(position))}\n            aria-live=\"polite\"\n            aria-atomic=\"false\"\n        >\n            {toasts.map((toast) => (\n                <ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />\n            ))}\n        </div>,\n        portalHost,\n    );\n}\n\ninterface ItemProps {\n    toast: ToastEntry;\n    onDismiss: (id: string) => void;\n}\n\n/**\n * One toast.\n *\n * No `role=\"status\"` of its own: it already lives inside the container's live\n * region, and a live region nested in a live region is announced twice by some\n * screen readers.\n *\n * With an icon the toast becomes three columns (leading, content, close) and the\n * icon and text are centred vertically against each other, so a 32px badge sits\n * level with a one-line title. Toasts without an icon keep the top-aligned layout\n * and the same size for short text; what changed for them is long text: the text\n * column now wraps a long word (`overflow-wrap: anywhere`) and the close button no\n * longer shrinks (it used to drop from 22px to 16–17px beside a two-line\n * description).\n *\n * The leading wrapper gets `inert` through a callback ref instead of a prop,\n * because no prop value works on both supported Reacts: React 18 drops\n * `inert={true}` with a warning and renders `inert=\"\"`, while React 19 renders\n * `inert={true}` and drops `inert=\"\"`.\n */\nfunction ToastItem({ toast, onDismiss }: ItemProps) {\n    useEffect(() => {\n        if (!toast.duration) return;\n        const timer = setTimeout(() => onDismiss(toast.id), toast.duration);\n        return () => clearTimeout(timer);\n    }, [toast.id, toast.duration, onDismiss]);\n\n    const hasIcon = rendersSomething(toast.icon);\n\n    return (\n        <div\n            className={cn(\n                styles.toast,\n                styles[toast.variant],\n                hasIcon && styles.withIcon,\n                toast.align === \"center\" && styles.alignCenter,\n            )}\n        >\n            {hasIcon && (\n                <div\n                    ref={makeInert}\n                    className={styles.leading}\n                    {...(toast.iconLabel\n                        ? { role: \"img\", \"aria-label\": toast.iconLabel }\n                        : { \"aria-hidden\": true })}\n                >\n                    {toast.icon}\n                </div>\n            )}\n            <div className={styles.content}>\n                {toast.title && <p className={styles.title}>{toast.title}</p>}\n                {toast.description && <p className={styles.description}>{toast.description}</p>}\n            </div>\n            <button\n                type=\"button\"\n                className={styles.close}\n                aria-label=\"Fechar notificação\"\n                onClick={() => onDismiss(toast.id)}\n            >\n                <CloseIcon />\n            </button>\n        </div>\n    );\n}\n\n/**\n * Whether a node renders anything at all.\n *\n * `Children.toArray` drops `null`, `undefined` and booleans and flattens arrays,\n * but keeps a fragment as one element — so a fragment is unwrapped and checked\n * by its children. `\"\"` renders no text node worth a column either.\n *\n * @param node - The icon slot content.\n * @returns `true` when at least one child would produce output.\n */\nfunction rendersSomething(node: ReactNode): boolean {\n    return Children.toArray(node).some((child) => {\n        if (child === \"\") return false;\n        if (isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment) {\n            return rendersSomething(child.props.children);\n        }\n        return true;\n    });\n}\n\n/**\n * Callback ref that marks the icon wrapper `inert`, on React 18 and 19 alike.\n *\n * @param node - The wrapper element, or `null` on unmount.\n */\nfunction makeInert(node: HTMLDivElement | null): void {\n    node?.setAttribute(\"inert\", \"\");\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"ToastProvider.js","names":["styles","Toast_module_default","ToastContext","createContext","useToast","ctx","useContext","ToastProvider","toasts","setToasts","useState","counter","useRef","dismiss","useCallback","current","toast","id","show","options","entry","defaultDuration","api","useMemo","children","ToastContainer","positionClass","position","portalHost","usePortalHost","createPortal","cn","ToastItem","timer","onDismiss","hasIcon","rendersSomething","makeInert","CloseIcon","Children","node","child","isValidElement","Fragment"],"sources":["../../../src/components/Toast/ToastProvider.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines — the provider is the queue: enqueue, dedupe, auto-\n * dismiss timers, pause on hover and the portal that renders them. Splitting the\n * queue from the renderer would put a timer in one file and the element it dismisses\n * in another.\n */\nimport {\n    Children,\n    Fragment,\n    createContext,\n    isValidElement,\n    useCallback,\n    useContext,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\nimport type { ReactNode } from \"react\";\nimport { createPortal } from \"react-dom\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Toast.module.css\";\nimport { usePortalHost } from \"../Portal/portal-host\";\n\nexport type ToastVariant = \"success\" | \"warning\" | \"error\" | \"info\";\n\n/**\n * Horizontal alignment of a toast's title and description.\n *\n * `\"start\"` is the default because a toast is read as a sentence beside a close\n * button: left-aligned lines share one edge with the icon and the stack, so a\n * two-line description stays scannable. `\"center\"` exists for the short\n * celebratory toast (an achievement with a badge) where the text is one line.\n */\nexport type ToastAlign = \"start\" | \"center\";\n\nexport interface ToastOptions {\n    id?: string;\n    title?: string;\n    description?: string;\n    variant?: ToastVariant;\n    /** Auto-dismiss timeout in ms. Pass `0` to keep the toast until dismissed manually. */\n    duration?: number;\n    /**\n     * Leading slot rendered before the text, e.g. `<img src=\"/badge.svg\" alt=\"\" />`.\n     *\n     * It is an app asset, so it takes any `ReactNode` — but it is a slot for an\n     * **icon**, not for a control. The wrapper is `inert`, so a button or link put\n     * here is neither focusable nor clickable; actions belong outside the toast.\n     *\n     * The slot is decorative (`aria-hidden`) unless {@link ToastOptions.iconLabel}\n     * is given: most icons repeat what the title already says, and an unlabelled\n     * image inside the live region would otherwise be announced as \"image\" or by\n     * its file name. An `<img>` or `<svg>` anywhere inside it is capped at 32px and\n     * keeps its aspect ratio. A node that renders nothing (`null`, a boolean, `\"\"`,\n     * `[]`, an empty fragment) counts as no icon, so the toast keeps two columns.\n     */\n    icon?: ReactNode;\n    /**\n     * Accessible name for {@link ToastOptions.icon} when the icon carries meaning\n     * the text does not. With it the slot becomes `role=\"img\"` with this label and\n     * is announced together with the toast; without it the slot is hidden from\n     * assistive technology.\n     */\n    iconLabel?: string;\n    /** Text alignment of title and description. Default `\"start\"`; see {@link ToastAlign}. */\n    align?: ToastAlign;\n}\n\ninterface ToastEntry extends Required<\n    Omit<ToastOptions, \"id\" | \"title\" | \"description\" | \"icon\" | \"iconLabel\">\n> {\n    id: string;\n    title?: string;\n    description?: string;\n    icon?: ReactNode;\n    iconLabel?: string;\n}\n\nexport interface ToastApi {\n    show: (options: ToastOptions) => string;\n    dismiss: (id: string) => void;\n    success: (\n        description: string,\n        options?: Omit<ToastOptions, \"variant\" | \"description\">,\n    ) => string;\n    error: (description: string, options?: Omit<ToastOptions, \"variant\" | \"description\">) => string;\n    warning: (\n        description: string,\n        options?: Omit<ToastOptions, \"variant\" | \"description\">,\n    ) => string;\n    info: (description: string, options?: Omit<ToastOptions, \"variant\" | \"description\">) => string;\n}\n\nconst ToastContext = createContext<ToastApi | null>(null);\n\n/**\n * Access the toast API. Must be used inside a {@link ToastProvider}.\n *\n * @returns Methods to show and dismiss toasts.\n */\nexport function useToast(): ToastApi {\n    const ctx = useContext(ToastContext);\n    if (!ctx) throw new Error(\"useToast must be used inside a <ToastProvider>\");\n    return ctx;\n}\n\nexport type ToastPosition =\n    \"top-right\" | \"top-left\" | \"top-center\" | \"bottom-right\" | \"bottom-left\" | \"bottom-center\";\n\nexport interface ToastProviderProps {\n    children: ReactNode;\n    /** Default auto-dismiss duration (ms). Default 4000. */\n    defaultDuration?: number;\n    /** Stack position on screen. Default `\"top-right\"`. */\n    position?: ToastPosition;\n}\n\n/**\n * Renders a portalled toast container and exposes the imperative {@link useToast} API.\n */\nexport function ToastProvider({\n    children,\n    defaultDuration = 4000,\n    position = \"top-right\",\n}: ToastProviderProps) {\n    const [toasts, setToasts] = useState<ToastEntry[]>([]);\n    const counter = useRef<number>(0);\n\n    const dismiss = useCallback((id: string): void => {\n        setToasts((current) => current.filter((toast) => toast.id !== id));\n    }, []);\n\n    const show = useCallback(\n        (options: ToastOptions): string => {\n            const id = options.id ?? `toast-${++counter.current}`;\n            const entry: ToastEntry = {\n                id,\n                title: options.title,\n                description: options.description,\n                variant: options.variant ?? \"info\",\n                duration: options.duration ?? defaultDuration,\n                icon: options.icon,\n                iconLabel: options.iconLabel,\n                align: options.align ?? \"start\",\n            };\n            setToasts((current) => [...current, entry]);\n            return id;\n        },\n        [defaultDuration],\n    );\n\n    const api = useMemo<ToastApi>(\n        () => ({\n            show,\n            dismiss,\n            success: (description, options) =>\n                show({ ...options, description, variant: \"success\" }),\n            error: (description, options) => show({ ...options, description, variant: \"error\" }),\n            warning: (description, options) =>\n                show({ ...options, description, variant: \"warning\" }),\n            info: (description, options) => show({ ...options, description, variant: \"info\" }),\n        }),\n        [show, dismiss],\n    );\n\n    return (\n        <ToastContext.Provider value={api}>\n            {children}\n            <ToastContainer toasts={toasts} onDismiss={dismiss} position={position} />\n        </ToastContext.Provider>\n    );\n}\n\ninterface ContainerProps {\n    toasts: ToastEntry[];\n    onDismiss: (id: string) => void;\n    position: ToastPosition;\n}\n\nfunction positionClass(position: ToastPosition): string {\n    switch (position) {\n        case \"top-left\":\n            return styles.positionTopLeft;\n        case \"top-center\":\n            return styles.positionTopCenter;\n        case \"bottom-right\":\n            return styles.positionBottomRight;\n        case \"bottom-left\":\n            return styles.positionBottomLeft;\n        case \"bottom-center\":\n            return styles.positionBottomCenter;\n        case \"top-right\":\n        default:\n            return styles.positionTopRight;\n    }\n}\n\n/**\n * The portalled stack, and the page's live region for toasts.\n *\n * `aria-atomic=\"false\"` matters: with `\"true\"` a screen reader re-reads the\n * **entire** stack on every change, so the third toast of a batch is announced as\n * all three, and dismissing one re-announces the survivors. `\"false\"` announces only\n * the node that was added, which is what the user needs.\n *\n * The stack stays the live region rather than delegating to `useAnnounce`, because\n * routing it through the shared announcer would put the same text in the document\n * twice — once visible, once hidden — and every `getByText(\"Salvo\")` in a consuming\n * app's test suite would start matching two nodes. The announcer is for messages\n * that have no on-screen home; a toast has one.\n */\nfunction ToastContainer({ toasts, onDismiss, position }: ContainerProps) {\n    const portalHost = usePortalHost();\n\n    if (!portalHost) return null;\n    return createPortal(\n        <div\n            className={cn(styles.container, positionClass(position))}\n            aria-live=\"polite\"\n            aria-atomic=\"false\"\n        >\n            {toasts.map((toast) => (\n                <ToastItem key={toast.id} toast={toast} onDismiss={onDismiss} />\n            ))}\n        </div>,\n        portalHost,\n    );\n}\n\ninterface ItemProps {\n    toast: ToastEntry;\n    onDismiss: (id: string) => void;\n}\n\n/**\n * One toast.\n *\n * No `role=\"status\"` of its own: it already lives inside the container's live\n * region, and a live region nested in a live region is announced twice by some\n * screen readers.\n *\n * With an icon the toast becomes three columns (leading, content, close) and the\n * icon and text are centred vertically against each other, so a 32px badge sits\n * level with a one-line title. Toasts without an icon keep the top-aligned layout\n * and the same size for short text; what changed for them is long text: the text\n * column now wraps a long word (`overflow-wrap: anywhere`) and the close button no\n * longer shrinks (it used to drop from 22px to 16–17px beside a two-line\n * description).\n *\n * The leading wrapper gets `inert` through a callback ref instead of a prop,\n * because no prop value works on both supported Reacts: React 18 drops\n * `inert={true}` with a warning and renders `inert=\"\"`, while React 19 renders\n * `inert={true}` and drops `inert=\"\"`.\n */\nfunction ToastItem({ toast, onDismiss }: ItemProps) {\n    useEffect(() => {\n        if (!toast.duration) return;\n        const timer = setTimeout(() => onDismiss(toast.id), toast.duration);\n        return () => clearTimeout(timer);\n    }, [toast.id, toast.duration, onDismiss]);\n\n    const hasIcon = rendersSomething(toast.icon);\n\n    return (\n        <div\n            className={cn(\n                styles.toast,\n                styles[toast.variant],\n                hasIcon && styles.withIcon,\n                toast.align === \"center\" && styles.alignCenter,\n            )}\n        >\n            {hasIcon && (\n                <div\n                    ref={makeInert}\n                    className={styles.leading}\n                    {...(toast.iconLabel\n                        ? { role: \"img\", \"aria-label\": toast.iconLabel }\n                        : { \"aria-hidden\": true })}\n                >\n                    {toast.icon}\n                </div>\n            )}\n            <div className={styles.content}>\n                {toast.title && <p className={styles.title}>{toast.title}</p>}\n                {toast.description && <p className={styles.description}>{toast.description}</p>}\n            </div>\n            <button\n                type=\"button\"\n                className={styles.close}\n                aria-label=\"Fechar notificação\"\n                onClick={() => onDismiss(toast.id)}\n            >\n                <CloseIcon />\n            </button>\n        </div>\n    );\n}\n\n/**\n * Whether a node renders anything at all.\n *\n * `Children.toArray` drops `null`, `undefined` and booleans and flattens arrays,\n * but keeps a fragment as one element — so a fragment is unwrapped and checked\n * by its children. `\"\"` renders no text node worth a column either.\n *\n * @param node - The icon slot content.\n * @returns `true` when at least one child would produce output.\n */\nfunction rendersSomething(node: ReactNode): boolean {\n    return Children.toArray(node).some((child) => {\n        if (child === \"\") return false;\n        if (isValidElement<{ children?: ReactNode }>(child) && child.type === Fragment) {\n            return rendersSomething(child.props.children);\n        }\n        return true;\n    });\n}\n\n/**\n * Callback ref that marks the icon wrapper `inert`, on React 18 and 19 alike.\n *\n * @param node - The wrapper element, or `null` on unmount.\n */\nfunction makeInert(node: HTMLDivElement | null): void {\n    node?.setAttribute(\"inert\", \"\");\n}\n\nfunction CloseIcon() {\n    return (\n        <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\">\n            <path\n                d=\"M6 6l12 12M6 18L18 6\"\n                stroke=\"currentColor\"\n                strokeWidth=\"2\"\n                strokeLinecap=\"round\"\n            />\n        </svg>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Toggle/Toggle.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.cjs","names":[],"sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Toggle.module.css\";\n\nexport type ToggleSize = \"sm\" | \"md\" | \"lg\";\nexport type ToggleVariant = \"default\" | \"outline\";\n\nexport interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n    /** Controlled pressed state. When provided the component is controlled. */\n    pressed?: boolean;\n    /** Initial pressed state for the uncontrolled variant. Default `false`. */\n    defaultPressed?: boolean;\n    /** Fired with the next pressed state whenever the toggle is activated. */\n    onPressedChange?: (pressed: boolean) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: ToggleSize;\n    /** Visual style. Default `\"default\"`. */\n    variant?: ToggleVariant;\n}\n\n/**\n * A pressable two-state button — like a checkbox styled as a button.\n *\n * Works controlled (pass `pressed` + `onPressedChange`) or uncontrolled\n * (pass `defaultPressed`). Renders a native `<button type=\"button\">` exposing\n * its state through `aria-pressed`.\n *\n * @param props - {@link ToggleProps}.\n * @returns The toggle button element.\n */\nexport const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(\n    {\n        pressed,\n        defaultPressed = false,\n        onPressedChange,\n        size = \"md\",\n        variant = \"default\",\n        className,\n        disabled,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const isControlled = pressed !== undefined;\n    const [internalPressed, setInternalPressed] = useState<boolean>(defaultPressed);\n    const isPressed = isControlled ? pressed : internalPressed;\n\n    const handleClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>): void => {\n            onClick?.(event);\n            if (event.defaultPrevented) return;\n            const next = !isPressed;\n            if (!isControlled) setInternalPressed(next);\n            onPressedChange?.(next);\n        },\n        [isPressed, isControlled, onClick, onPressedChange],\n    );\n\n    return (\n        <button\n            ref={ref}\n            type=\"button\"\n            aria-pressed={isPressed}\n            disabled={disabled}\n            data-state={isPressed ? \"on\" : \"off\"}\n            className={cn(\n                styles.toggle,\n                styles[size],\n                styles[variant],\n                isPressed && styles.pressed,\n                className,\n            )}\n            onClick={handleClick}\n            {...props}\n        >\n            {children}\n        </button>\n    );\n});\n"],"mappings":"6HA+BA,IAAa,GAAA,EAAS,EAAA,WAAA,CAA2C,SAC7D,CACI,UACA,iBAAiB,GACjB,kBACA,OAAO,KACP,UAAU,UACV,YACA,WACA,UACA,WACA,GAAG,GAEP,EACF,CACE,IAAM,EAAe,IAAY,IAAA,GAC3B,CAAC,EAAiB,IAAA,EAAsB,EAAA,SAAA,CAAkB,CAAc,EACxE,EAAY,EAAe,EAAU,EAErC,GAAA,EAAc,EAAA,YAAA,CACf,GAAqD,CAElD,GADA,IAAU,CAAK,EACX,EAAM,iBAAkB,OAC5B,IAAM,EAAO,CAAC,EACT,GAAc,EAAmB,CAAI,EAC1C,IAAkB,CAAI,CAC1B,EACA,CAAC,EAAW,EAAc,EAAS,CAAe,CACtD,EAEA,OACI,EAAA,EAAA,IAAA,CAAC,SAAD,CACS,MACL,KAAK,SACL,eAAc,EACJ,WACV,aAAY,EAAY,KAAO,MAC/B,UAAW,EAAA,GACP,EAAA,QAAO,OACP,EAAA,QAAO,GACP,EAAA,QAAO,GACP,GAAa,EAAA,QAAO,QACpB,CACJ,EACA,QAAS,EACT,GAAI,EAEH,UACG,CAAA,CAEhB,CAAC"}
+{"version":3,"file":"Toggle.cjs","names":["forwardRef","useState","useCallback","cn","styles","require_cn","require_Toggle_module","react","react_jsx_runtime","Toggle","props","isControlled","pressed","internalPressed","setInternalPressed","defaultPressed","isPressed","handleClick","onClick","event","next","onPressedChange","size","variant","className"],"sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Toggle.module.css\";\n\nexport type ToggleSize = \"sm\" | \"md\" | \"lg\";\nexport type ToggleVariant = \"default\" | \"outline\";\n\nexport interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n    /** Controlled pressed state. When provided the component is controlled. */\n    pressed?: boolean;\n    /** Initial pressed state for the uncontrolled variant. Default `false`. */\n    defaultPressed?: boolean;\n    /** Fired with the next pressed state whenever the toggle is activated. */\n    onPressedChange?: (pressed: boolean) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: ToggleSize;\n    /** Visual style. Default `\"default\"`. */\n    variant?: ToggleVariant;\n}\n\n/**\n * A pressable two-state button — like a checkbox styled as a button.\n *\n * Works controlled (pass `pressed` + `onPressedChange`) or uncontrolled\n * (pass `defaultPressed`). Renders a native `<button type=\"button\">` exposing\n * its state through `aria-pressed`.\n *\n * @param props - {@link ToggleProps}.\n * @returns The toggle button element.\n */\nexport const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(\n    {\n        pressed,\n        defaultPressed = false,\n        onPressedChange,\n        size = \"md\",\n        variant = \"default\",\n        className,\n        disabled,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const isControlled = pressed !== undefined;\n    const [internalPressed, setInternalPressed] = useState<boolean>(defaultPressed);\n    const isPressed = isControlled ? pressed : internalPressed;\n\n    const handleClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>): void => {\n            onClick?.(event);\n            if (event.defaultPrevented) return;\n            const next = !isPressed;\n            if (!isControlled) setInternalPressed(next);\n            onPressedChange?.(next);\n        },\n        [isPressed, isControlled, onClick, onPressedChange],\n    );\n\n    return (\n        <button\n            ref={ref}\n            type=\"button\"\n            aria-pressed={isPressed}\n            disabled={disabled}\n            data-state={isPressed ? \"on\" : \"off\"}\n            className={cn(\n                styles.toggle,\n                styles[size],\n                styles[variant],\n                isPressed && styles.pressed,\n                className,\n            )}\n            onClick={handleClick}\n            {...props}\n        >\n            {children}\n        </button>\n    );\n});\n"],"mappings":"A,6HA+BA,IAAaS,GAAA,EAAST,EAAAA,WAAAA,CAA2C,SAC7D,CACI,UACA,iBAAiB,GACjB,kBACA,OAAO,KACP,UAAU,UACV,YACA,WACA,UACA,WACA,GAAGU,GAEP,EACF,CACE,IAAMC,EAAeC,IAAY,IAAA,GAC3B,CAACC,EAAiBC,IAAA,EAAsBb,EAAAA,SAAAA,CAAkBc,CAAc,EACxEC,EAAYL,EAAeC,EAAUC,EAErCI,GAAA,EAAcf,EAAAA,YAAAA,CACf,GAAqD,CAElD,GADAgB,IAAUC,CAAK,EACXA,EAAM,iBAAkB,OAC5B,IAAMC,EAAO,CAACJ,EACTL,GAAcG,EAAmBM,CAAI,EAC1CC,IAAkBD,CAAI,CAC1B,EACA,CAACJ,EAAWL,EAAcO,EAASG,CAAe,CACtD,EAEA,OACI,EAAAb,EAAA,IAAA,CAAC,SAAD,CACS,MACL,KAAK,SACL,eAAcQ,EACJ,WACV,aAAYA,EAAY,KAAO,MAC/B,UAAWb,EAAAA,GACPC,EAAAA,QAAO,OACPA,EAAAA,QAAOkB,GACPlB,EAAAA,QAAOmB,GACPP,GAAaZ,EAAAA,QAAO,QACpBoB,CACJ,EACA,QAASP,EACT,GAAIP,EAEH,UACG,CAAA,CAEhB,CAAC,E"}

package/dist/components/Toggle/Toggle.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.js","names":[],"sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Toggle.module.css\";\n\nexport type ToggleSize = \"sm\" | \"md\" | \"lg\";\nexport type ToggleVariant = \"default\" | \"outline\";\n\nexport interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n    /** Controlled pressed state. When provided the component is controlled. */\n    pressed?: boolean;\n    /** Initial pressed state for the uncontrolled variant. Default `false`. */\n    defaultPressed?: boolean;\n    /** Fired with the next pressed state whenever the toggle is activated. */\n    onPressedChange?: (pressed: boolean) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: ToggleSize;\n    /** Visual style. Default `\"default\"`. */\n    variant?: ToggleVariant;\n}\n\n/**\n * A pressable two-state button — like a checkbox styled as a button.\n *\n * Works controlled (pass `pressed` + `onPressedChange`) or uncontrolled\n * (pass `defaultPressed`). Renders a native `<button type=\"button\">` exposing\n * its state through `aria-pressed`.\n *\n * @param props - {@link ToggleProps}.\n * @returns The toggle button element.\n */\nexport const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(\n    {\n        pressed,\n        defaultPressed = false,\n        onPressedChange,\n        size = \"md\",\n        variant = \"default\",\n        className,\n        disabled,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const isControlled = pressed !== undefined;\n    const [internalPressed, setInternalPressed] = useState<boolean>(defaultPressed);\n    const isPressed = isControlled ? pressed : internalPressed;\n\n    const handleClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>): void => {\n            onClick?.(event);\n            if (event.defaultPrevented) return;\n            const next = !isPressed;\n            if (!isControlled) setInternalPressed(next);\n            onPressedChange?.(next);\n        },\n        [isPressed, isControlled, onClick, onPressedChange],\n    );\n\n    return (\n        <button\n            ref={ref}\n            type=\"button\"\n            aria-pressed={isPressed}\n            disabled={disabled}\n            data-state={isPressed ? \"on\" : \"off\"}\n            className={cn(\n                styles.toggle,\n                styles[size],\n                styles[variant],\n                isPressed && styles.pressed,\n                className,\n            )}\n            onClick={handleClick}\n            {...props}\n        >\n            {children}\n        </button>\n    );\n});\n"],"mappings":";;;;;AA+BA,IAAa,IAAS,EAA2C,SAC7D,EACI,YACA,oBAAiB,IACjB,oBACA,UAAO,MACP,aAAU,WACV,cACA,aACA,YACA,aACA,GAAG,KAEP,GACF;CACE,IAAM,IAAe,MAAY,KAAA,GAC3B,CAAC,GAAiB,KAAsB,EAAkB,CAAc,GACxE,IAAY,IAAe,IAAU,GAErC,IAAc,GACf,MAAqD;EAElD,IADA,IAAU,CAAK,GACX,EAAM,kBAAkB;EAC5B,IAAM,IAAO,CAAC;EAEd,AADK,KAAc,EAAmB,CAAI,GAC1C,IAAkB,CAAI;CAC1B,GACA;EAAC;EAAW;EAAc;EAAS;CAAe,CACtD;CAEA,OACI,kBAAC,UAAD;EACS;EACL,MAAK;EACL,gBAAc;EACJ;EACV,cAAY,IAAY,OAAO;EAC/B,WAAW,EACP,EAAO,QACP,EAAO,IACP,EAAO,IACP,KAAa,EAAO,SACpB,CACJ;EACA,SAAS;EACT,GAAI;EAEH;CACG,CAAA;AAEhB,CAAC"}
+{"version":3,"file":"Toggle.js","names":["styles","Toggle_module_default","Toggle","forwardRef","props","isControlled","pressed","internalPressed","setInternalPressed","useState","defaultPressed","isPressed","handleClick","useCallback","onClick","event","next","onPressedChange","cn","size","variant","className"],"sources":["../../../src/components/Toggle/Toggle.tsx"],"sourcesContent":["import { forwardRef, useCallback, useState } from \"react\";\nimport type { ButtonHTMLAttributes } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Toggle.module.css\";\n\nexport type ToggleSize = \"sm\" | \"md\" | \"lg\";\nexport type ToggleVariant = \"default\" | \"outline\";\n\nexport interface ToggleProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, \"onChange\"> {\n    /** Controlled pressed state. When provided the component is controlled. */\n    pressed?: boolean;\n    /** Initial pressed state for the uncontrolled variant. Default `false`. */\n    defaultPressed?: boolean;\n    /** Fired with the next pressed state whenever the toggle is activated. */\n    onPressedChange?: (pressed: boolean) => void;\n    /** Visual size. Default `\"md\"`. */\n    size?: ToggleSize;\n    /** Visual style. Default `\"default\"`. */\n    variant?: ToggleVariant;\n}\n\n/**\n * A pressable two-state button — like a checkbox styled as a button.\n *\n * Works controlled (pass `pressed` + `onPressedChange`) or uncontrolled\n * (pass `defaultPressed`). Renders a native `<button type=\"button\">` exposing\n * its state through `aria-pressed`.\n *\n * @param props - {@link ToggleProps}.\n * @returns The toggle button element.\n */\nexport const Toggle = forwardRef<HTMLButtonElement, ToggleProps>(function Toggle(\n    {\n        pressed,\n        defaultPressed = false,\n        onPressedChange,\n        size = \"md\",\n        variant = \"default\",\n        className,\n        disabled,\n        onClick,\n        children,\n        ...props\n    },\n    ref,\n) {\n    const isControlled = pressed !== undefined;\n    const [internalPressed, setInternalPressed] = useState<boolean>(defaultPressed);\n    const isPressed = isControlled ? pressed : internalPressed;\n\n    const handleClick = useCallback(\n        (event: React.MouseEvent<HTMLButtonElement>): void => {\n            onClick?.(event);\n            if (event.defaultPrevented) return;\n            const next = !isPressed;\n            if (!isControlled) setInternalPressed(next);\n            onPressedChange?.(next);\n        },\n        [isPressed, isControlled, onClick, onPressedChange],\n    );\n\n    return (\n        <button\n            ref={ref}\n            type=\"button\"\n            aria-pressed={isPressed}\n            disabled={disabled}\n            data-state={isPressed ? \"on\" : \"off\"}\n            className={cn(\n                styles.toggle,\n                styles[size],\n                styles[variant],\n                isPressed && styles.pressed,\n                className,\n            )}\n            onClick={handleClick}\n            {...props}\n        >\n            {children}\n        </button>\n    );\n});\n"],"mappings":";;;;;AA+BA,IAAaE,IAASC,EAA2C,SAC7D,EACI,YACA,oBAAiB,IACjB,oBACA,UAAO,MACP,aAAU,WACV,cACA,aACA,YACA,aACA,GAAGC,KAEP,GACF;CACE,IAAMC,IAAeC,MAAY,KAAA,GAC3B,CAACC,GAAiBC,KAAsBC,EAAkBC,CAAc,GACxEC,IAAYN,IAAeC,IAAUC,GAErCK,IAAcC,GACf,MAAqD;EAElD,IADAC,IAAUC,CAAK,GACXA,EAAM,kBAAkB;EAC5B,IAAMC,IAAO,CAACL;EAEd,AADKN,KAAcG,EAAmBQ,CAAI,GAC1CC,IAAkBD,CAAI;CAC1B,GACA;EAACL;EAAWN;EAAcS;EAASG;CAAe,CACtD;CAEA,OACI,kBAAC,UAAD;EACS;EACL,MAAK;EACL,gBAAcN;EACJ;EACV,cAAYA,IAAY,OAAO;EAC/B,WAAWO,EACPlB,EAAO,QACPA,EAAOmB,IACPnB,EAAOoB,IACPT,KAAaX,EAAO,SACpBqB,CACJ;EACA,SAAST;EACT,GAAIR;EAEH;CACG,CAAA;AAEhB,CAAC"}

package/dist/components/Toggle/Toggle.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.module.cjs","names":[],"sources":["../../../src/components/Toggle/Toggle.module.css"],"sourcesContent":[".toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .toggle:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.toggle:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n.toggle:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.outline {\n    background-color: transparent;\n    border-color: var(--tempest-border);\n}\n\n.pressed {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    border-color: var(--tempest-primary-soft);\n}\n\n.outline.pressed {\n    border-color: var(--tempest-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .pressed:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n\n.sm {\n    min-height: 1.75rem;\n    padding: 0 var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.md {\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    font-size: var(--tempest-text-sm);\n}\n\n.lg {\n    min-height: 2.75rem;\n    padding: 0 var(--tempest-space-4);\n    font-size: var(--tempest-text-base);\n}\n"],"mappings":";"}
+{"version":3,"file":"Toggle.module.cjs","names":["toggle","outline","pressed","sm","md","lg","Toggle_module_default"],"sources":["../../../src/components/Toggle/Toggle.module.css"],"sourcesContent":[".toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .toggle:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.toggle:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n.toggle:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.outline {\n    background-color: transparent;\n    border-color: var(--tempest-border);\n}\n\n.pressed {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    border-color: var(--tempest-primary-soft);\n}\n\n.outline.pressed {\n    border-color: var(--tempest-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .pressed:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n\n.sm {\n    min-height: 1.75rem;\n    padding: 0 var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.md {\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    font-size: var(--tempest-text-sm);\n}\n\n.lg {\n    min-height: 2.75rem;\n    padding: 0 var(--tempest-space-4);\n    font-size: var(--tempest-text-base);\n}\n"],"mappings":";"}

package/dist/components/Toggle/Toggle.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Toggle.module.js","names":[],"sources":["../../../src/components/Toggle/Toggle.module.css"],"sourcesContent":[".toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .toggle:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.toggle:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n.toggle:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.outline {\n    background-color: transparent;\n    border-color: var(--tempest-border);\n}\n\n.pressed {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    border-color: var(--tempest-primary-soft);\n}\n\n.outline.pressed {\n    border-color: var(--tempest-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .pressed:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n\n.sm {\n    min-height: 1.75rem;\n    padding: 0 var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.md {\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    font-size: var(--tempest-text-sm);\n}\n\n.lg {\n    min-height: 2.75rem;\n    padding: 0 var(--tempest-space-4);\n    font-size: var(--tempest-text-base);\n}\n"],"mappings":";"}
+{"version":3,"file":"Toggle.module.js","names":["toggle","outline","pressed","sm","md","lg","Toggle_module_default"],"sources":["../../../src/components/Toggle/Toggle.module.css"],"sourcesContent":[".toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    border: 1px solid transparent;\n    border-radius: var(--tempest-radius-md);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .toggle:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.toggle:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: 2px;\n}\n\n.toggle:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.outline {\n    background-color: transparent;\n    border-color: var(--tempest-border);\n}\n\n.pressed {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n    border-color: var(--tempest-primary-soft);\n}\n\n.outline.pressed {\n    border-color: var(--tempest-primary);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .pressed:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n\n.sm {\n    min-height: 1.75rem;\n    padding: 0 var(--tempest-space-2);\n    font-size: var(--tempest-text-xs);\n}\n\n.md {\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    font-size: var(--tempest-text-sm);\n}\n\n.lg {\n    min-height: 2.75rem;\n    padding: 0 var(--tempest-space-4);\n    font-size: var(--tempest-text-base);\n}\n"],"mappings":";"}

package/dist/components/ToggleGroup/ToggleGroup.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./ToggleGroup.module.css\";\n\nexport type ToggleGroupType = \"single\" | \"multiple\";\n\ninterface ToggleGroupContextValue {\n    type: ToggleGroupType;\n    isSelected: (value: string) => boolean;\n    toggle: (value: string) => void;\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nfunction useToggleGroupContext(): ToggleGroupContextValue {\n    const ctx = useContext(ToggleGroupContext);\n    if (!ctx) {\n        throw new Error(\"ToggleGroupItem must be used within a ToggleGroup\");\n    }\n    return ctx;\n}\n\nexport interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {\n    /** Selection mode. `\"single\"` keeps one value; `\"multiple\"` keeps a set. Default `\"single\"`. */\n    type?: ToggleGroupType;\n    /** Controlled value — `string` for `single`, `string[]` for `multiple`. */\n    value?: string | string[];\n    /** Uncontrolled initial value. */\n    defaultValue?: string | string[];\n    /** Fired with the next value whenever the selection changes. */\n    onValueChange?: (value: string | string[]) => void;\n    children: ReactNode;\n}\n\nfunction normalizeArray(value: string | string[] | undefined): string[] {\n    if (value === undefined) return [];\n    return Array.isArray(value) ? value : [value];\n}\n\n/**\n * A set of {@link ToggleGroupItem}s that share selection state via context.\n *\n * In `single` mode the value is a `string` (empty string when nothing is\n * selected); in `multiple` mode it is a `string[]`. Works controlled (pass\n * `value` + `onValueChange`) or uncontrolled (pass `defaultValue`).\n *\n * @param props - {@link ToggleGroupProps}.\n * @returns A `role=\"group\"` container wrapping the items.\n */\nexport function ToggleGroup({\n    type = \"single\",\n    value,\n    defaultValue,\n    onValueChange,\n    className,\n    children,\n    ...props\n}: ToggleGroupProps) {\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState<string[]>(() =>\n        normalizeArray(defaultValue),\n    );\n    const selected = isControlled ? normalizeArray(value) : internalValue;\n\n    const commit = useCallback(\n        (next: string[]): void => {\n            if (!isControlled) setInternalValue(next);\n            onValueChange?.(type === \"single\" ? (next[0] ?? \"\") : next);\n        },\n        [isControlled, onValueChange, type],\n    );\n\n    const toggle = useCallback(\n        (itemValue: string): void => {\n            const isOn = selected.includes(itemValue);\n            if (type === \"single\") {\n                commit(isOn ? [] : [itemValue]);\n            } else {\n                commit(isOn ? selected.filter((v) => v !== itemValue) : [...selected, itemValue]);\n            }\n        },\n        [selected, type, commit],\n    );\n\n    const ctx = useMemo<ToggleGroupContextValue>(\n        () => ({\n            type,\n            isSelected: (itemValue: string) => selected.includes(itemValue),\n            toggle,\n        }),\n        [type, selected, toggle],\n    );\n\n    return (\n        <ToggleGroupContext.Provider value={ctx}>\n            <div role=\"group\" className={cn(styles.group, className)} {...props}>\n                {children}\n            </div>\n        </ToggleGroupContext.Provider>\n    );\n}\n\nexport interface ToggleGroupItemProps extends Omit<HTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n    /** Stable value identifying this item within the group. */\n    value: string;\n    /** Disables the item. */\n    disabled?: boolean;\n    children: ReactNode;\n}\n\n/**\n * A single selectable item inside a {@link ToggleGroup}. Reads and updates the\n * group's shared state through context.\n *\n * Icon-only items need an explicit `aria-label` (forwarded to the button):\n * an SVG child gives screen readers nothing to announce.\n *\n * @param props - {@link ToggleGroupItemProps}.\n * @returns A `role=\"button\"` element exposing its state via `aria-pressed`.\n */\nexport function ToggleGroupItem({\n    value,\n    disabled,\n    className,\n    children,\n    ...props\n}: ToggleGroupItemProps) {\n    const { isSelected, toggle } = useToggleGroupContext();\n    const selected = isSelected(value);\n\n    return (\n        <button\n            type=\"button\"\n            role=\"button\"\n            aria-pressed={selected}\n            disabled={disabled}\n            data-state={selected ? \"on\" : \"off\"}\n            className={cn(styles.item, selected && styles.selected, className)}\n            onClick={() => toggle(value)}\n            {...props}\n        >\n            {children}\n        </button>\n    );\n}\n"],"mappings":"kIAaA,IAAM,GAAA,EAAqB,EAAA,cAAA,CAA8C,IAAI,EAE7E,SAAS,GAAiD,CACtD,IAAM,GAAA,EAAM,EAAA,WAAA,CAAW,CAAkB,EACzC,GAAI,CAAC,EACD,MAAU,MAAM,mDAAmD,EAEvE,OAAO,CACX,CAcA,SAAS,EAAe,EAAgD,CAEpE,OADI,IAAU,IAAA,GAAkB,CAAC,EAC1B,MAAM,QAAQ,CAAK,EAAI,EAAQ,CAAC,CAAK,CAChD,CAYA,SAAgB,EAAY,CACxB,OAAO,SACP,QACA,eACA,gBACA,YACA,WACA,GAAG,GACc,CACjB,IAAM,EAAe,IAAU,IAAA,GACzB,CAAC,EAAe,IAAA,EAAoB,EAAA,SAAA,KACtC,EAAe,CAAY,CAC/B,EACM,EAAW,EAAe,EAAe,CAAK,EAAI,EAElD,GAAA,EAAS,EAAA,YAAA,CACV,GAAyB,CACjB,GAAc,EAAiB,CAAI,EACxC,IAAgB,IAAS,SAAY,EAAK,IAAM,GAAM,CAAI,CAC9D,EACA,CAAC,EAAc,EAAe,CAAI,CACtC,EAEM,GAAA,EAAS,EAAA,YAAA,CACV,GAA4B,CACzB,IAAM,EAAO,EAAS,SAAS,CAAS,EAEpC,EADA,IAAS,SACF,EAAO,CAAC,EAAI,CAAC,CAAS,EAEtB,EAAO,EAAS,OAAQ,GAAM,IAAM,CAAS,EAAI,CAAC,GAAG,EAAU,CAAS,CAAC,CAExF,EACA,CAAC,EAAU,EAAM,CAAM,CAC3B,EAEM,GAAA,EAAM,EAAA,QAAA,MACD,CACH,OACA,WAAa,GAAsB,EAAS,SAAS,CAAS,EAC9D,QACJ,GACA,CAAC,EAAM,EAAU,CAAM,CAC3B,EAEA,OACI,EAAA,EAAA,IAAA,CAAC,EAAmB,SAApB,CAA6B,MAAO,EAChC,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,KAAK,QAAQ,UAAW,EAAA,GAAG,EAAA,QAAO,MAAO,CAAS,EAAG,GAAI,EACzD,UACA,CAAA,CACoB,CAAA,CAErC,CAoBA,SAAgB,EAAgB,CAC5B,QACA,WACA,YACA,WACA,GAAG,GACkB,CACrB,GAAM,CAAE,aAAY,UAAW,EAAsB,EAC/C,EAAW,EAAW,CAAK,EAEjC,OACI,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,KAAK,SACL,eAAc,EACJ,WACV,aAAY,EAAW,KAAO,MAC9B,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,GAAY,EAAA,QAAO,SAAU,CAAS,EACjE,YAAe,EAAO,CAAK,EAC3B,GAAI,EAEH,UACG,CAAA,CAEhB"}
+{"version":3,"file":"ToggleGroup.cjs","names":["createContext","useContext","useState","useCallback","useMemo","cn","styles","require_cn","require_ToggleGroup_module","react","react_jsx_runtime","ToggleGroupContext","useToggleGroupContext","ctx","normalizeArray","value","ToggleGroup","props","isControlled","internalValue","setInternalValue","defaultValue","selected","commit","next","onValueChange","type","toggle","isOn","itemValue","v","className","ToggleGroupItem","isSelected"],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./ToggleGroup.module.css\";\n\nexport type ToggleGroupType = \"single\" | \"multiple\";\n\ninterface ToggleGroupContextValue {\n    type: ToggleGroupType;\n    isSelected: (value: string) => boolean;\n    toggle: (value: string) => void;\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nfunction useToggleGroupContext(): ToggleGroupContextValue {\n    const ctx = useContext(ToggleGroupContext);\n    if (!ctx) {\n        throw new Error(\"ToggleGroupItem must be used within a ToggleGroup\");\n    }\n    return ctx;\n}\n\nexport interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {\n    /** Selection mode. `\"single\"` keeps one value; `\"multiple\"` keeps a set. Default `\"single\"`. */\n    type?: ToggleGroupType;\n    /** Controlled value — `string` for `single`, `string[]` for `multiple`. */\n    value?: string | string[];\n    /** Uncontrolled initial value. */\n    defaultValue?: string | string[];\n    /** Fired with the next value whenever the selection changes. */\n    onValueChange?: (value: string | string[]) => void;\n    children: ReactNode;\n}\n\nfunction normalizeArray(value: string | string[] | undefined): string[] {\n    if (value === undefined) return [];\n    return Array.isArray(value) ? value : [value];\n}\n\n/**\n * A set of {@link ToggleGroupItem}s that share selection state via context.\n *\n * In `single` mode the value is a `string` (empty string when nothing is\n * selected); in `multiple` mode it is a `string[]`. Works controlled (pass\n * `value` + `onValueChange`) or uncontrolled (pass `defaultValue`).\n *\n * @param props - {@link ToggleGroupProps}.\n * @returns A `role=\"group\"` container wrapping the items.\n */\nexport function ToggleGroup({\n    type = \"single\",\n    value,\n    defaultValue,\n    onValueChange,\n    className,\n    children,\n    ...props\n}: ToggleGroupProps) {\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState<string[]>(() =>\n        normalizeArray(defaultValue),\n    );\n    const selected = isControlled ? normalizeArray(value) : internalValue;\n\n    const commit = useCallback(\n        (next: string[]): void => {\n            if (!isControlled) setInternalValue(next);\n            onValueChange?.(type === \"single\" ? (next[0] ?? \"\") : next);\n        },\n        [isControlled, onValueChange, type],\n    );\n\n    const toggle = useCallback(\n        (itemValue: string): void => {\n            const isOn = selected.includes(itemValue);\n            if (type === \"single\") {\n                commit(isOn ? [] : [itemValue]);\n            } else {\n                commit(isOn ? selected.filter((v) => v !== itemValue) : [...selected, itemValue]);\n            }\n        },\n        [selected, type, commit],\n    );\n\n    const ctx = useMemo<ToggleGroupContextValue>(\n        () => ({\n            type,\n            isSelected: (itemValue: string) => selected.includes(itemValue),\n            toggle,\n        }),\n        [type, selected, toggle],\n    );\n\n    return (\n        <ToggleGroupContext.Provider value={ctx}>\n            <div role=\"group\" className={cn(styles.group, className)} {...props}>\n                {children}\n            </div>\n        </ToggleGroupContext.Provider>\n    );\n}\n\nexport interface ToggleGroupItemProps extends Omit<HTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n    /** Stable value identifying this item within the group. */\n    value: string;\n    /** Disables the item. */\n    disabled?: boolean;\n    children: ReactNode;\n}\n\n/**\n * A single selectable item inside a {@link ToggleGroup}. Reads and updates the\n * group's shared state through context.\n *\n * Icon-only items need an explicit `aria-label` (forwarded to the button):\n * an SVG child gives screen readers nothing to announce.\n *\n * @param props - {@link ToggleGroupItemProps}.\n * @returns A `role=\"button\"` element exposing its state via `aria-pressed`.\n */\nexport function ToggleGroupItem({\n    value,\n    disabled,\n    className,\n    children,\n    ...props\n}: ToggleGroupItemProps) {\n    const { isSelected, toggle } = useToggleGroupContext();\n    const selected = isSelected(value);\n\n    return (\n        <button\n            type=\"button\"\n            role=\"button\"\n            aria-pressed={selected}\n            disabled={disabled}\n            data-state={selected ? \"on\" : \"off\"}\n            className={cn(styles.item, selected && styles.selected, className)}\n            onClick={() => toggle(value)}\n            {...props}\n        >\n            {children}\n        </button>\n    );\n}\n"],"mappings":"A,kIAaA,IAAMW,GAAA,EAAqBX,EAAAA,cAAAA,CAA8C,IAAI,EAE7E,SAASY,GAAiD,CACtD,IAAMC,GAAA,EAAMZ,EAAAA,WAAAA,CAAWU,CAAkB,EACzC,GAAI,CAACE,EACD,MAAU,MAAM,mDAAmD,EAEvE,OAAOA,CACX,CAcA,SAASC,EAAe,EAAgD,CAEpE,OADIC,IAAU,IAAA,GAAkB,CAAC,EAC1B,MAAM,QAAQA,CAAK,EAAIA,EAAQ,CAACA,CAAK,CAChD,CAYA,SAAgBC,EAAY,CACxB,OAAO,SACP,QACA,eACA,gBACA,YACA,WACA,GAAGC,GACc,CACjB,IAAMC,EAAeH,IAAU,IAAA,GACzB,CAACI,EAAeC,IAAA,EAAoBlB,EAAAA,SAAAA,KACtCY,EAAeO,CAAY,CAC/B,EACMC,EAAWJ,EAAeJ,EAAeC,CAAK,EAAII,EAElDI,GAAA,EAASpB,EAAAA,YAAAA,CACV,GAAyB,CACjBe,GAAcE,EAAiBI,CAAI,EACxCC,IAAgBC,IAAS,SAAYF,EAAK,IAAM,GAAMA,CAAI,CAC9D,EACA,CAACN,EAAcO,EAAeC,CAAI,CACtC,EAEMC,GAAA,EAASxB,EAAAA,YAAAA,CACV,GAA4B,CACzB,IAAMyB,EAAON,EAAS,SAASO,CAAS,EAEpCN,EADAG,IAAS,SACFE,EAAO,CAAC,EAAI,CAACC,CAAS,EAEtBD,EAAON,EAAS,OAAQ,GAAMQ,IAAMD,CAAS,EAAI,CAAC,GAAGP,EAAUO,CAAS,CAAC,CAExF,EACA,CAACP,EAAUI,EAAMH,CAAM,CAC3B,EAEMV,GAAA,EAAMT,EAAAA,QAAAA,MACD,CACH,OACA,WAAa,GAAsBkB,EAAS,SAASO,CAAS,EAC9D,QACJ,GACA,CAACH,EAAMJ,EAAUK,CAAM,CAC3B,EAEA,OACI,EAAAjB,EAAA,IAAA,CAACC,EAAmB,SAApB,CAA6B,MAAOE,EAChC,UAAA,EAAAH,EAAA,IAAA,CAAC,MAAD,CAAK,KAAK,QAAQ,UAAWL,EAAAA,GAAGC,EAAAA,QAAO,MAAOyB,CAAS,EAAG,GAAId,EACzD,UACA,CAAA,CACoB,CAAA,CAErC,CAoBA,SAAgBe,EAAgB,CAC5B,QACA,WACA,YACA,WACA,GAAGf,GACkB,CACrB,GAAM,CAAE,aAAY,UAAWL,EAAsB,EAC/CU,EAAWW,EAAWlB,CAAK,EAEjC,OACI,EAAAL,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,KAAK,SACL,eAAcY,EACJ,WACV,aAAYA,EAAW,KAAO,MAC9B,UAAWjB,EAAAA,GAAGC,EAAAA,QAAO,KAAMgB,GAAYhB,EAAAA,QAAO,SAAUyB,CAAS,EACjE,YAAeJ,EAAOZ,CAAK,EAC3B,GAAIE,EAEH,UACG,CAAA,CAEhB,C"}

package/dist/components/ToggleGroup/ToggleGroup.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./ToggleGroup.module.css\";\n\nexport type ToggleGroupType = \"single\" | \"multiple\";\n\ninterface ToggleGroupContextValue {\n    type: ToggleGroupType;\n    isSelected: (value: string) => boolean;\n    toggle: (value: string) => void;\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nfunction useToggleGroupContext(): ToggleGroupContextValue {\n    const ctx = useContext(ToggleGroupContext);\n    if (!ctx) {\n        throw new Error(\"ToggleGroupItem must be used within a ToggleGroup\");\n    }\n    return ctx;\n}\n\nexport interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {\n    /** Selection mode. `\"single\"` keeps one value; `\"multiple\"` keeps a set. Default `\"single\"`. */\n    type?: ToggleGroupType;\n    /** Controlled value — `string` for `single`, `string[]` for `multiple`. */\n    value?: string | string[];\n    /** Uncontrolled initial value. */\n    defaultValue?: string | string[];\n    /** Fired with the next value whenever the selection changes. */\n    onValueChange?: (value: string | string[]) => void;\n    children: ReactNode;\n}\n\nfunction normalizeArray(value: string | string[] | undefined): string[] {\n    if (value === undefined) return [];\n    return Array.isArray(value) ? value : [value];\n}\n\n/**\n * A set of {@link ToggleGroupItem}s that share selection state via context.\n *\n * In `single` mode the value is a `string` (empty string when nothing is\n * selected); in `multiple` mode it is a `string[]`. Works controlled (pass\n * `value` + `onValueChange`) or uncontrolled (pass `defaultValue`).\n *\n * @param props - {@link ToggleGroupProps}.\n * @returns A `role=\"group\"` container wrapping the items.\n */\nexport function ToggleGroup({\n    type = \"single\",\n    value,\n    defaultValue,\n    onValueChange,\n    className,\n    children,\n    ...props\n}: ToggleGroupProps) {\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState<string[]>(() =>\n        normalizeArray(defaultValue),\n    );\n    const selected = isControlled ? normalizeArray(value) : internalValue;\n\n    const commit = useCallback(\n        (next: string[]): void => {\n            if (!isControlled) setInternalValue(next);\n            onValueChange?.(type === \"single\" ? (next[0] ?? \"\") : next);\n        },\n        [isControlled, onValueChange, type],\n    );\n\n    const toggle = useCallback(\n        (itemValue: string): void => {\n            const isOn = selected.includes(itemValue);\n            if (type === \"single\") {\n                commit(isOn ? [] : [itemValue]);\n            } else {\n                commit(isOn ? selected.filter((v) => v !== itemValue) : [...selected, itemValue]);\n            }\n        },\n        [selected, type, commit],\n    );\n\n    const ctx = useMemo<ToggleGroupContextValue>(\n        () => ({\n            type,\n            isSelected: (itemValue: string) => selected.includes(itemValue),\n            toggle,\n        }),\n        [type, selected, toggle],\n    );\n\n    return (\n        <ToggleGroupContext.Provider value={ctx}>\n            <div role=\"group\" className={cn(styles.group, className)} {...props}>\n                {children}\n            </div>\n        </ToggleGroupContext.Provider>\n    );\n}\n\nexport interface ToggleGroupItemProps extends Omit<HTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n    /** Stable value identifying this item within the group. */\n    value: string;\n    /** Disables the item. */\n    disabled?: boolean;\n    children: ReactNode;\n}\n\n/**\n * A single selectable item inside a {@link ToggleGroup}. Reads and updates the\n * group's shared state through context.\n *\n * Icon-only items need an explicit `aria-label` (forwarded to the button):\n * an SVG child gives screen readers nothing to announce.\n *\n * @param props - {@link ToggleGroupItemProps}.\n * @returns A `role=\"button\"` element exposing its state via `aria-pressed`.\n */\nexport function ToggleGroupItem({\n    value,\n    disabled,\n    className,\n    children,\n    ...props\n}: ToggleGroupItemProps) {\n    const { isSelected, toggle } = useToggleGroupContext();\n    const selected = isSelected(value);\n\n    return (\n        <button\n            type=\"button\"\n            role=\"button\"\n            aria-pressed={selected}\n            disabled={disabled}\n            data-state={selected ? \"on\" : \"off\"}\n            className={cn(styles.item, selected && styles.selected, className)}\n            onClick={() => toggle(value)}\n            {...props}\n        >\n            {children}\n        </button>\n    );\n}\n"],"mappings":";;;;;AAaA,IAAM,IAAqB,EAA8C,IAAI;AAE7E,SAAS,IAAiD;CACtD,IAAM,IAAM,EAAW,CAAkB;CACzC,IAAI,CAAC,GACD,MAAU,MAAM,mDAAmD;CAEvE,OAAO;AACX;AAcA,SAAS,EAAe,GAAgD;CAEpE,OADI,MAAU,KAAA,IAAkB,CAAC,IAC1B,MAAM,QAAQ,CAAK,IAAI,IAAQ,CAAC,CAAK;AAChD;AAYA,SAAgB,EAAY,EACxB,UAAO,UACP,UACA,iBACA,kBACA,cACA,aACA,GAAG,KACc;CACjB,IAAM,IAAe,MAAU,KAAA,GACzB,CAAC,GAAe,KAAoB,QACtC,EAAe,CAAY,CAC/B,GACM,IAAW,IAAe,EAAe,CAAK,IAAI,GAElD,IAAS,GACV,MAAyB;EAEtB,AADK,KAAc,EAAiB,CAAI,GACxC,IAAgB,MAAS,WAAY,EAAK,MAAM,KAAM,CAAI;CAC9D,GACA;EAAC;EAAc;EAAe;CAAI,CACtC,GAEM,IAAS,GACV,MAA4B;EACzB,IAAM,IAAO,EAAS,SAAS,CAAS;EACxC,AACI,EADA,MAAS,WACF,IAAO,CAAC,IAAI,CAAC,CAAS,IAEtB,IAAO,EAAS,QAAQ,MAAM,MAAM,CAAS,IAAI,CAAC,GAAG,GAAU,CAAS,CAAC;CAExF,GACA;EAAC;EAAU;EAAM;CAAM,CAC3B,GAEM,IAAM,SACD;EACH;EACA,aAAa,MAAsB,EAAS,SAAS,CAAS;EAC9D;CACJ,IACA;EAAC;EAAM;EAAU;CAAM,CAC3B;CAEA,OACI,kBAAC,EAAmB,UAApB;EAA6B,OAAO;EAChC,UAAA,kBAAC,OAAD;GAAK,MAAK;GAAQ,WAAW,EAAG,EAAO,OAAO,CAAS;GAAG,GAAI;GACzD;EACA,CAAA;CACoB,CAAA;AAErC;AAoBA,SAAgB,EAAgB,EAC5B,UACA,aACA,cACA,aACA,GAAG,KACkB;CACrB,IAAM,EAAE,eAAY,cAAW,EAAsB,GAC/C,IAAW,EAAW,CAAK;CAEjC,OACI,kBAAC,UAAD;EACI,MAAK;EACL,MAAK;EACL,gBAAc;EACJ;EACV,cAAY,IAAW,OAAO;EAC9B,WAAW,EAAG,EAAO,MAAM,KAAY,EAAO,UAAU,CAAS;EACjE,eAAe,EAAO,CAAK;EAC3B,GAAI;EAEH;CACG,CAAA;AAEhB"}
+{"version":3,"file":"ToggleGroup.js","names":["styles","ToggleGroup_module_default","ToggleGroupContext","createContext","useToggleGroupContext","ctx","useContext","normalizeArray","value","ToggleGroup","props","isControlled","internalValue","setInternalValue","useState","defaultValue","selected","commit","useCallback","next","onValueChange","type","toggle","isOn","itemValue","v","useMemo","cn","className","ToggleGroupItem","isSelected"],"sources":["../../../src/components/ToggleGroup/ToggleGroup.tsx"],"sourcesContent":["import { createContext, useCallback, useContext, useMemo, useState } from \"react\";\nimport type { HTMLAttributes, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./ToggleGroup.module.css\";\n\nexport type ToggleGroupType = \"single\" | \"multiple\";\n\ninterface ToggleGroupContextValue {\n    type: ToggleGroupType;\n    isSelected: (value: string) => boolean;\n    toggle: (value: string) => void;\n}\n\nconst ToggleGroupContext = createContext<ToggleGroupContextValue | null>(null);\n\nfunction useToggleGroupContext(): ToggleGroupContextValue {\n    const ctx = useContext(ToggleGroupContext);\n    if (!ctx) {\n        throw new Error(\"ToggleGroupItem must be used within a ToggleGroup\");\n    }\n    return ctx;\n}\n\nexport interface ToggleGroupProps extends HTMLAttributes<HTMLDivElement> {\n    /** Selection mode. `\"single\"` keeps one value; `\"multiple\"` keeps a set. Default `\"single\"`. */\n    type?: ToggleGroupType;\n    /** Controlled value — `string` for `single`, `string[]` for `multiple`. */\n    value?: string | string[];\n    /** Uncontrolled initial value. */\n    defaultValue?: string | string[];\n    /** Fired with the next value whenever the selection changes. */\n    onValueChange?: (value: string | string[]) => void;\n    children: ReactNode;\n}\n\nfunction normalizeArray(value: string | string[] | undefined): string[] {\n    if (value === undefined) return [];\n    return Array.isArray(value) ? value : [value];\n}\n\n/**\n * A set of {@link ToggleGroupItem}s that share selection state via context.\n *\n * In `single` mode the value is a `string` (empty string when nothing is\n * selected); in `multiple` mode it is a `string[]`. Works controlled (pass\n * `value` + `onValueChange`) or uncontrolled (pass `defaultValue`).\n *\n * @param props - {@link ToggleGroupProps}.\n * @returns A `role=\"group\"` container wrapping the items.\n */\nexport function ToggleGroup({\n    type = \"single\",\n    value,\n    defaultValue,\n    onValueChange,\n    className,\n    children,\n    ...props\n}: ToggleGroupProps) {\n    const isControlled = value !== undefined;\n    const [internalValue, setInternalValue] = useState<string[]>(() =>\n        normalizeArray(defaultValue),\n    );\n    const selected = isControlled ? normalizeArray(value) : internalValue;\n\n    const commit = useCallback(\n        (next: string[]): void => {\n            if (!isControlled) setInternalValue(next);\n            onValueChange?.(type === \"single\" ? (next[0] ?? \"\") : next);\n        },\n        [isControlled, onValueChange, type],\n    );\n\n    const toggle = useCallback(\n        (itemValue: string): void => {\n            const isOn = selected.includes(itemValue);\n            if (type === \"single\") {\n                commit(isOn ? [] : [itemValue]);\n            } else {\n                commit(isOn ? selected.filter((v) => v !== itemValue) : [...selected, itemValue]);\n            }\n        },\n        [selected, type, commit],\n    );\n\n    const ctx = useMemo<ToggleGroupContextValue>(\n        () => ({\n            type,\n            isSelected: (itemValue: string) => selected.includes(itemValue),\n            toggle,\n        }),\n        [type, selected, toggle],\n    );\n\n    return (\n        <ToggleGroupContext.Provider value={ctx}>\n            <div role=\"group\" className={cn(styles.group, className)} {...props}>\n                {children}\n            </div>\n        </ToggleGroupContext.Provider>\n    );\n}\n\nexport interface ToggleGroupItemProps extends Omit<HTMLAttributes<HTMLButtonElement>, \"onClick\"> {\n    /** Stable value identifying this item within the group. */\n    value: string;\n    /** Disables the item. */\n    disabled?: boolean;\n    children: ReactNode;\n}\n\n/**\n * A single selectable item inside a {@link ToggleGroup}. Reads and updates the\n * group's shared state through context.\n *\n * Icon-only items need an explicit `aria-label` (forwarded to the button):\n * an SVG child gives screen readers nothing to announce.\n *\n * @param props - {@link ToggleGroupItemProps}.\n * @returns A `role=\"button\"` element exposing its state via `aria-pressed`.\n */\nexport function ToggleGroupItem({\n    value,\n    disabled,\n    className,\n    children,\n    ...props\n}: ToggleGroupItemProps) {\n    const { isSelected, toggle } = useToggleGroupContext();\n    const selected = isSelected(value);\n\n    return (\n        <button\n            type=\"button\"\n            role=\"button\"\n            aria-pressed={selected}\n            disabled={disabled}\n            data-state={selected ? \"on\" : \"off\"}\n            className={cn(styles.item, selected && styles.selected, className)}\n            onClick={() => toggle(value)}\n            {...props}\n        >\n            {children}\n        </button>\n    );\n}\n"],"mappings":";;;;;AAaA,IAAME,IAAqBC,EAA8C,IAAI;AAE7E,SAASC,IAAiD;CACtD,IAAMC,IAAMC,EAAWJ,CAAkB;CACzC,IAAI,CAACG,GACD,MAAU,MAAM,mDAAmD;CAEvE,OAAOA;AACX;AAcA,SAASE,EAAe,GAAgD;CAEpE,OADIC,MAAU,KAAA,IAAkB,CAAC,IAC1B,MAAM,QAAQA,CAAK,IAAIA,IAAQ,CAACA,CAAK;AAChD;AAYA,SAAgBC,EAAY,EACxB,UAAO,UACP,UACA,iBACA,kBACA,cACA,aACA,GAAGC,KACc;CACjB,IAAMC,IAAeH,MAAU,KAAA,GACzB,CAACI,GAAeC,KAAoBC,QACtCP,EAAeQ,CAAY,CAC/B,GACMC,IAAWL,IAAeJ,EAAeC,CAAK,IAAII,GAElDK,IAASC,GACV,MAAyB;EAEtB,AADKP,KAAcE,EAAiBM,CAAI,GACxCC,IAAgBC,MAAS,WAAYF,EAAK,MAAM,KAAMA,CAAI;CAC9D,GACA;EAACR;EAAcS;EAAeC;CAAI,CACtC,GAEMC,IAASJ,GACV,MAA4B;EACzB,IAAMK,IAAOP,EAAS,SAASQ,CAAS;EACxC,AACIP,EADAI,MAAS,WACFE,IAAO,CAAC,IAAI,CAACC,CAAS,IAEtBD,IAAOP,EAAS,QAAQ,MAAMS,MAAMD,CAAS,IAAI,CAAC,GAAGR,GAAUQ,CAAS,CAAC;CAExF,GACA;EAACR;EAAUK;EAAMJ;CAAM,CAC3B,GAEMZ,IAAMqB,SACD;EACH;EACA,aAAa,MAAsBV,EAAS,SAASQ,CAAS;EAC9D;CACJ,IACA;EAACH;EAAML;EAAUM;CAAM,CAC3B;CAEA,OACI,kBAACpB,EAAmB,UAApB;EAA6B,OAAOG;EAChC,UAAA,kBAAC,OAAD;GAAK,MAAK;GAAQ,WAAWsB,EAAG3B,EAAO,OAAO4B,CAAS;GAAG,GAAIlB;GACzD;EACA,CAAA;CACoB,CAAA;AAErC;AAoBA,SAAgBmB,EAAgB,EAC5B,UACA,aACA,cACA,aACA,GAAGnB,KACkB;CACrB,IAAM,EAAE,eAAY,cAAWN,EAAsB,GAC/CY,IAAWc,EAAWtB,CAAK;CAEjC,OACI,kBAAC,UAAD;EACI,MAAK;EACL,MAAK;EACL,gBAAcQ;EACJ;EACV,cAAYA,IAAW,OAAO;EAC9B,WAAWW,EAAG3B,EAAO,MAAMgB,KAAYhB,EAAO,UAAU4B,CAAS;EACjE,eAAeN,EAAOd,CAAK;EAC3B,GAAIE;EAEH;CACG,CAAA;AAEhB"}

package/dist/components/ToggleGroup/ToggleGroup.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.module.cjs","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    align-items: stretch;\n    gap: 0;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    overflow: hidden;\n}\n\n.item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    border: none;\n    border-left: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n.item:first-child {\n    border-left: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: -2px;\n    z-index: 1;\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .selected:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"ToggleGroup.module.cjs","names":["group","item","selected","ToggleGroup_module_default"],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    align-items: stretch;\n    gap: 0;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    overflow: hidden;\n}\n\n.item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    border: none;\n    border-left: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n.item:first-child {\n    border-left: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: -2px;\n    z-index: 1;\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .selected:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n"],"mappings":";"}

package/dist/components/ToggleGroup/ToggleGroup.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"ToggleGroup.module.js","names":[],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    align-items: stretch;\n    gap: 0;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    overflow: hidden;\n}\n\n.item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    border: none;\n    border-left: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n.item:first-child {\n    border-left: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: -2px;\n    z-index: 1;\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .selected:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"ToggleGroup.module.js","names":["group","item","selected","ToggleGroup_module_default"],"sources":["../../../src/components/ToggleGroup/ToggleGroup.module.css"],"sourcesContent":[".group {\n    display: inline-flex;\n    align-items: stretch;\n    gap: 0;\n    border: 1px solid var(--tempest-border);\n    border-radius: var(--tempest-radius-md);\n    overflow: hidden;\n}\n\n.item {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    gap: var(--tempest-space-2);\n    min-height: 2.25rem;\n    padding: 0 var(--tempest-space-3);\n    border: none;\n    border-left: 1px solid var(--tempest-border);\n    background-color: var(--tempest-surface);\n    color: var(--tempest-text);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-sm);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    cursor: pointer;\n    transition:\n        var(--tempest-transition-color),\n        background-color var(--tempest-duration-base) var(--tempest-ease-emphasized);\n    white-space: nowrap;\n}\n\n.item:first-child {\n    border-left: none;\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .item:hover {\n        background-color: var(--tempest-surface-2);\n    }\n}\n\n.item:focus-visible {\n    outline: var(--tempest-focus-ring-width) solid var(--tempest-focus-ring-color);\n    outline-offset: -2px;\n    z-index: 1;\n}\n\n.item:disabled {\n    opacity: 0.55;\n    cursor: not-allowed;\n}\n\n.selected {\n    background-color: var(--tempest-primary-soft);\n    color: var(--tempest-primary-on-soft);\n}\n\n@media (hover: hover) and (pointer: fine) {\n    .selected:hover {\n        background-color: var(--tempest-primary-soft-hover, var(--tempest-primary-soft));\n    }\n}\n"],"mappings":";"}

package/dist/components/Tooltip/Tooltip.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- the handlers below read the timer ref, and they only\n   run on user events (hover/focus), never during render */\nimport { cloneElement, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n    /**\n     * Render the bubble in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the bubble —\n     * a `DataTable` cell cut it 23 px short (measured in Chrome at 1440 px). In a\n     * portal it escapes the clip and flips to the opposite side at the viewport\n     * edge. `false` keeps the in-flow bubble.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and bubble, in px — the in-flow CSS uses the same 8 px. */\nconst TOOLTIP_OFFSET = 8;\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n *\n * `Escape` hides it without moving the pointer or the focus, which is what\n * WCAG 2.2 SC 1.4.13 (Content on Hover or Focus) asks of content that appears on\n * hover. It is an `Escape` layer like the overlays, so inside a `Modal` the first\n * press hides the tooltip and the second closes the modal.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n    portal = true,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const [triggerNode, setTriggerNode] = useState<HTMLSpanElement | null>(null);\n    const [bubbleNode, setBubbleNode] = useState<HTMLSpanElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: triggerNode,\n        floating: bubbleNode,\n        side: placement,\n        align: \"center\",\n        offset: TOOLTIP_OFFSET,\n        enabled: portal && open,\n    });\n    const tooltipId = useId();\n    /**\n     * Handle of the pending open timer.\n     *\n     * A ref, not a `let` in the component body: that binding is recreated on every\n     * render, so any re-render between `show` and `hide` (a parent update, a state\n     * change elsewhere) dropped the handle and `clearTimeout` silently cancelled\n     * nothing — the tooltip then opened after the pointer had already left.\n     */\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    function clearTimer(): void {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }\n\n    function show(): void {\n        if (disabled) return;\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        clearTimer();\n        setOpen(false);\n    }\n\n    useEffect(() => {\n        return () => {\n            clearTimer();\n        };\n    }, []);\n\n    useEscapeLayer(open, hide);\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    const bubble = (\n        <span\n            ref={setBubbleNode}\n            id={tooltipId}\n            role=\"tooltip\"\n            className={cn(styles.bubble, styles[placement], portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {content}\n        </span>\n    );\n\n    return (\n        <span ref={setTriggerNode} className={styles.trigger}>\n            {trigger}\n            {open && (portal ? <Portal>{bubble}</Portal> : bubble)}\n        </span>\n    );\n}\n"],"mappings":"mPAmCA,IAAM,EAAiB,EAYvB,SAAgB,EAAQ,CACpB,UACA,YAAY,MACZ,WACA,WAAW,GACX,YAAY,IACZ,SAAS,IACI,CACb,GAAM,CAAC,EAAM,IAAA,EAAW,EAAA,SAAA,CAAkB,EAAK,EACzC,CAAC,EAAa,IAAA,EAAkB,EAAA,SAAA,CAAiC,IAAI,EACrE,CAAC,EAAY,IAAA,EAAiB,EAAA,SAAA,CAAiC,IAAI,EACnE,EAAgB,EAAA,kBAAkB,CACpC,OAAQ,EACR,SAAU,EACV,KAAM,EACN,MAAO,SACP,OAAQ,EACR,QAAS,GAAU,CACvB,CAAC,EACK,GAAA,EAAY,EAAA,MAAA,CAAM,EASlB,GAAA,EAAW,EAAA,OAAA,CAA6C,IAAI,EAElE,SAAS,GAAmB,CACpB,EAAS,UAAY,OACrB,aAAa,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,CAEA,SAAS,GAAa,CACd,IACJ,EAAW,EACX,EAAS,QAAU,eAAiB,EAAQ,EAAI,EAAG,CAAS,EAChE,CAEA,SAAS,GAAa,CAClB,EAAW,EACX,EAAQ,EAAK,CACjB,EAEA,EAAA,EAAA,UAAA,SACiB,CACT,EAAW,CACf,EACD,CAAC,CAAC,EAEL,EAAA,eAAe,EAAM,CAAI,EAEzB,IAAM,GAAA,EAAU,EAAA,aAAA,CAAa,EAAU,CACnC,aAAc,EACd,aAAc,EACd,QAAS,EACT,OAAQ,EACR,mBAAoB,EAAO,EAAY,IAAA,EAC3C,CAA4B,EAEtB,GACF,EAAA,EAAA,IAAA,CAAC,OAAD,CACI,IAAK,EACL,GAAI,EACJ,KAAK,UACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,EAAA,QAAO,GAAY,GAAU,EAAA,QAAO,SAAS,EAC1E,MAAO,EAEN,SAAA,CACC,CAAA,EAGV,OACI,EAAA,EAAA,KAAA,CAAC,OAAD,CAAM,IAAK,EAAgB,UAAW,EAAA,QAAO,QAA7C,SAAA,CACK,EACA,IAAS,GAAS,EAAA,EAAA,IAAA,CAAC,EAAA,OAAD,CAAA,SAAS,CAAe,CAAA,EAAI,EAC7C,GAEd"}
+{"version":3,"file":"Tooltip.cjs","names":["useState","useAnchorPosition","useId","useRef","cloneElement","cn","styles","Portal","require_cn","require_escape_layer","require_Portal","require_anchor_position","require_Tooltip_module","react","react_jsx_runtime","TOOLTIP_OFFSET","Tooltip","open","setOpen","triggerNode","setTriggerNode","bubbleNode","setBubbleNode","floatingStyle","placement","portal","tooltipId","timerRef","clearTimer","show","disabled","openDelay","hide","trigger","children","bubble","content"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- the handlers below read the timer ref, and they only\n   run on user events (hover/focus), never during render */\nimport { cloneElement, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n    /**\n     * Render the bubble in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the bubble —\n     * a `DataTable` cell cut it 23 px short (measured in Chrome at 1440 px). In a\n     * portal it escapes the clip and flips to the opposite side at the viewport\n     * edge. `false` keeps the in-flow bubble.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and bubble, in px — the in-flow CSS uses the same 8 px. */\nconst TOOLTIP_OFFSET = 8;\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n *\n * `Escape` hides it without moving the pointer or the focus, which is what\n * WCAG 2.2 SC 1.4.13 (Content on Hover or Focus) asks of content that appears on\n * hover. It is an `Escape` layer like the overlays, so inside a `Modal` the first\n * press hides the tooltip and the second closes the modal.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n    portal = true,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const [triggerNode, setTriggerNode] = useState<HTMLSpanElement | null>(null);\n    const [bubbleNode, setBubbleNode] = useState<HTMLSpanElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: triggerNode,\n        floating: bubbleNode,\n        side: placement,\n        align: \"center\",\n        offset: TOOLTIP_OFFSET,\n        enabled: portal && open,\n    });\n    const tooltipId = useId();\n    /**\n     * Handle of the pending open timer.\n     *\n     * A ref, not a `let` in the component body: that binding is recreated on every\n     * render, so any re-render between `show` and `hide` (a parent update, a state\n     * change elsewhere) dropped the handle and `clearTimeout` silently cancelled\n     * nothing — the tooltip then opened after the pointer had already left.\n     */\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    function clearTimer(): void {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }\n\n    function show(): void {\n        if (disabled) return;\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        clearTimer();\n        setOpen(false);\n    }\n\n    useEffect(() => {\n        return () => {\n            clearTimer();\n        };\n    }, []);\n\n    useEscapeLayer(open, hide);\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    const bubble = (\n        <span\n            ref={setBubbleNode}\n            id={tooltipId}\n            role=\"tooltip\"\n            className={cn(styles.bubble, styles[placement], portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {content}\n        </span>\n    );\n\n    return (\n        <span ref={setTriggerNode} className={styles.trigger}>\n            {trigger}\n            {open && (portal ? <Portal>{bubble}</Portal> : bubble)}\n        </span>\n    );\n}\n"],"mappings":"A,mPAmCA,IAAMe,EAAiB,EAYvB,SAAgBC,EAAQ,CACpB,UACA,YAAY,MACZ,WACA,WAAW,GACX,YAAY,IACZ,SAAS,IACI,CACb,GAAM,CAACC,EAAMC,IAAA,EAAWlB,EAAAA,SAAAA,CAAkB,EAAK,EACzC,CAACmB,EAAaC,IAAA,EAAkBpB,EAAAA,SAAAA,CAAiC,IAAI,EACrE,CAACqB,EAAYC,IAAA,EAAiBtB,EAAAA,SAAAA,CAAiC,IAAI,EACnEuB,EAAgBtB,EAAAA,kBAAkB,CACpC,OAAQkB,EACR,SAAUE,EACV,KAAMG,EACN,MAAO,SACP,OAAQT,EACR,QAASU,GAAUR,CACvB,CAAC,EACKS,GAAA,EAAYxB,EAAAA,MAAAA,CAAM,EASlByB,GAAA,EAAWxB,EAAAA,OAAAA,CAA6C,IAAI,EAElE,SAASyB,GAAmB,CACpBD,EAAS,UAAY,OACrB,aAAaA,EAAS,OAAO,EAC7B,EAAS,QAAU,KAE3B,CAEA,SAASE,GAAa,CACdC,IACJF,EAAW,EACX,EAAS,QAAU,eAAiBV,EAAQ,EAAI,EAAGa,CAAS,EAChE,CAEA,SAASC,GAAa,CAClBJ,EAAW,EACXV,EAAQ,EAAK,CACjB,EAEA,EAAAL,EAAA,UAAA,SACiB,CACTe,EAAW,CACf,EACD,CAAC,CAAC,EAELnB,EAAA,eAAeQ,EAAMe,CAAI,EAEzB,IAAMC,GAAA,EAAU7B,EAAAA,aAAAA,CAAa8B,EAAU,CACnC,aAAcL,EACd,aAAcG,EACd,QAASH,EACT,OAAQG,EACR,mBAAoBf,EAAOS,EAAY,IAAA,EAC3C,CAA4B,EAEtBS,GACF,EAAArB,EAAA,IAAA,CAAC,OAAD,CACI,IAAKQ,EACL,GAAII,EACJ,KAAK,UACL,UAAWrB,EAAAA,GAAGC,EAAAA,QAAO,OAAQA,EAAAA,QAAOkB,GAAYC,GAAUnB,EAAAA,QAAO,SAAS,EAC1E,MAAOiB,EAEN,SAAAa,CACC,CAAA,EAGV,OACI,EAAAtB,EAAA,KAAA,CAAC,OAAD,CAAM,IAAKM,EAAgB,UAAWd,EAAAA,QAAO,QAA7C,SAAA,CACK2B,EACAhB,IAASQ,GAAS,EAAAX,EAAA,IAAA,CAACP,EAAAA,OAAD,CAAA,SAAS4B,CAAe,CAAA,EAAIA,EAC7C,C,EAEd,C"}

package/dist/components/Tooltip/Tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- the handlers below read the timer ref, and they only\n   run on user events (hover/focus), never during render */\nimport { cloneElement, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n    /**\n     * Render the bubble in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the bubble —\n     * a `DataTable` cell cut it 23 px short (measured in Chrome at 1440 px). In a\n     * portal it escapes the clip and flips to the opposite side at the viewport\n     * edge. `false` keeps the in-flow bubble.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and bubble, in px — the in-flow CSS uses the same 8 px. */\nconst TOOLTIP_OFFSET = 8;\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n *\n * `Escape` hides it without moving the pointer or the focus, which is what\n * WCAG 2.2 SC 1.4.13 (Content on Hover or Focus) asks of content that appears on\n * hover. It is an `Escape` layer like the overlays, so inside a `Modal` the first\n * press hides the tooltip and the second closes the modal.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n    portal = true,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const [triggerNode, setTriggerNode] = useState<HTMLSpanElement | null>(null);\n    const [bubbleNode, setBubbleNode] = useState<HTMLSpanElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: triggerNode,\n        floating: bubbleNode,\n        side: placement,\n        align: \"center\",\n        offset: TOOLTIP_OFFSET,\n        enabled: portal && open,\n    });\n    const tooltipId = useId();\n    /**\n     * Handle of the pending open timer.\n     *\n     * A ref, not a `let` in the component body: that binding is recreated on every\n     * render, so any re-render between `show` and `hide` (a parent update, a state\n     * change elsewhere) dropped the handle and `clearTimeout` silently cancelled\n     * nothing — the tooltip then opened after the pointer had already left.\n     */\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    function clearTimer(): void {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }\n\n    function show(): void {\n        if (disabled) return;\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        clearTimer();\n        setOpen(false);\n    }\n\n    useEffect(() => {\n        return () => {\n            clearTimer();\n        };\n    }, []);\n\n    useEscapeLayer(open, hide);\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    const bubble = (\n        <span\n            ref={setBubbleNode}\n            id={tooltipId}\n            role=\"tooltip\"\n            className={cn(styles.bubble, styles[placement], portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {content}\n        </span>\n    );\n\n    return (\n        <span ref={setTriggerNode} className={styles.trigger}>\n            {trigger}\n            {open && (portal ? <Portal>{bubble}</Portal> : bubble)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;AAmCA,IAAM,IAAiB;AAYvB,SAAgB,EAAQ,EACpB,YACA,eAAY,OACZ,aACA,cAAW,IACX,eAAY,KACZ,YAAS,MACI;CACb,IAAM,CAAC,GAAM,KAAW,EAAkB,EAAK,GACzC,CAAC,GAAa,KAAkB,EAAiC,IAAI,GACrE,CAAC,GAAY,KAAiB,EAAiC,IAAI,GACnE,IAAgB,EAAkB;EACpC,QAAQ;EACR,UAAU;EACV,MAAM;EACN,OAAO;EACP,QAAQ;EACR,SAAS,KAAU;CACvB,CAAC,GACK,IAAY,EAAM,GASlB,IAAW,EAA6C,IAAI;CAElE,SAAS,IAAmB;EACxB,AAAI,EAAS,YAAY,SACrB,aAAa,EAAS,OAAO,GAC7B,EAAS,UAAU;CAE3B;CAEA,SAAS,IAAa;EACd,MACJ,EAAW,GACX,EAAS,UAAU,iBAAiB,EAAQ,EAAI,GAAG,CAAS;CAChE;CAEA,SAAS,IAAa;EAElB,AADA,EAAW,GACX,EAAQ,EAAK;CACjB;CAQA,AANA,cACiB;EACT,EAAW;CACf,GACD,CAAC,CAAC,GAEL,EAAe,GAAM,CAAI;CAEzB,IAAM,IAAU,EAAa,GAAU;EACnC,cAAc;EACd,cAAc;EACd,SAAS;EACT,QAAQ;EACR,oBAAoB,IAAO,IAAY,KAAA;CAC3C,CAA4B,GAEtB,IACF,kBAAC,QAAD;EACI,KAAK;EACL,IAAI;EACJ,MAAK;EACL,WAAW,EAAG,EAAO,QAAQ,EAAO,IAAY,KAAU,EAAO,SAAS;EAC1E,OAAO;EAEN,UAAA;CACC,CAAA;CAGV,OACI,kBAAC,QAAD;EAAM,KAAK;EAAgB,WAAW,EAAO;EAA7C,UAAA,CACK,GACA,MAAS,IAAS,kBAAC,GAAD,EAAA,UAAS,EAAe,CAAA,IAAI,EAC7C;;AAEd"}
+{"version":3,"file":"Tooltip.js","names":["styles","Tooltip_module_default","TOOLTIP_OFFSET","Tooltip","open","setOpen","useState","triggerNode","setTriggerNode","bubbleNode","setBubbleNode","floatingStyle","useAnchorPosition","placement","portal","tooltipId","useId","timerRef","useRef","clearTimer","show","disabled","openDelay","hide","useEffect","useEscapeLayer","trigger","cloneElement","children","bubble","cn","content","Portal"],"sources":["../../../src/components/Tooltip/Tooltip.tsx"],"sourcesContent":["/* eslint-disable react-hooks/refs -- the handlers below read the timer ref, and they only\n   run on user events (hover/focus), never during render */\nimport { cloneElement, useEffect, useId, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Portal } from \"@/components/Portal\";\nimport { useAnchorPosition } from \"@/components/Portal/anchor-position\";\nimport { useEscapeLayer } from \"@/components/Portal/escape-layer\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./Tooltip.module.css\";\n\nexport type TooltipPlacement = \"top\" | \"bottom\" | \"left\" | \"right\";\n\nexport interface TooltipProps {\n    /** Tooltip content. Plain text recommended; rich content also works. */\n    content: ReactNode;\n    /** Placement relative to the trigger. Default: `\"top\"`. */\n    placement?: TooltipPlacement;\n    /** Single React element to attach hover/focus listeners to. */\n    children: ReactElement;\n    /** Disable the tooltip without changing the trigger. */\n    disabled?: boolean;\n    /** Delay (ms) before showing the tooltip. Default: 150. */\n    openDelay?: number;\n    /**\n     * Render the bubble in a portal, positioned against the trigger. Default `true`.\n     *\n     * In flow, an ancestor with `overflow` other than `visible` clips the bubble —\n     * a `DataTable` cell cut it 23 px short (measured in Chrome at 1440 px). In a\n     * portal it escapes the clip and flips to the opposite side at the viewport\n     * edge. `false` keeps the in-flow bubble.\n     */\n    portal?: boolean;\n}\n\n/** Gap between trigger and bubble, in px — the in-flow CSS uses the same 8 px. */\nconst TOOLTIP_OFFSET = 8;\n\n/**\n * Lightweight tooltip. Shows on hover and on focus (keyboard-friendly). Wraps\n * a single child element via `cloneElement`, so the trigger keeps its own ref\n * and props.\n *\n * `Escape` hides it without moving the pointer or the focus, which is what\n * WCAG 2.2 SC 1.4.13 (Content on Hover or Focus) asks of content that appears on\n * hover. It is an `Escape` layer like the overlays, so inside a `Modal` the first\n * press hides the tooltip and the second closes the modal.\n */\nexport function Tooltip({\n    content,\n    placement = \"top\",\n    children,\n    disabled = false,\n    openDelay = 150,\n    portal = true,\n}: TooltipProps) {\n    const [open, setOpen] = useState<boolean>(false);\n    const [triggerNode, setTriggerNode] = useState<HTMLSpanElement | null>(null);\n    const [bubbleNode, setBubbleNode] = useState<HTMLSpanElement | null>(null);\n    const floatingStyle = useAnchorPosition({\n        anchor: triggerNode,\n        floating: bubbleNode,\n        side: placement,\n        align: \"center\",\n        offset: TOOLTIP_OFFSET,\n        enabled: portal && open,\n    });\n    const tooltipId = useId();\n    /**\n     * Handle of the pending open timer.\n     *\n     * A ref, not a `let` in the component body: that binding is recreated on every\n     * render, so any re-render between `show` and `hide` (a parent update, a state\n     * change elsewhere) dropped the handle and `clearTimeout` silently cancelled\n     * nothing — the tooltip then opened after the pointer had already left.\n     */\n    const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null);\n\n    function clearTimer(): void {\n        if (timerRef.current !== null) {\n            clearTimeout(timerRef.current);\n            timerRef.current = null;\n        }\n    }\n\n    function show(): void {\n        if (disabled) return;\n        clearTimer();\n        timerRef.current = setTimeout(() => setOpen(true), openDelay);\n    }\n\n    function hide(): void {\n        clearTimer();\n        setOpen(false);\n    }\n\n    useEffect(() => {\n        return () => {\n            clearTimer();\n        };\n    }, []);\n\n    useEscapeLayer(open, hide);\n\n    const trigger = cloneElement(children, {\n        onMouseEnter: show,\n        onMouseLeave: hide,\n        onFocus: show,\n        onBlur: hide,\n        \"aria-describedby\": open ? tooltipId : undefined,\n    } as Record<string, unknown>);\n\n    const bubble = (\n        <span\n            ref={setBubbleNode}\n            id={tooltipId}\n            role=\"tooltip\"\n            className={cn(styles.bubble, styles[placement], portal && styles.portalled)}\n            style={floatingStyle}\n        >\n            {content}\n        </span>\n    );\n\n    return (\n        <span ref={setTriggerNode} className={styles.trigger}>\n            {trigger}\n            {open && (portal ? <Portal>{bubble}</Portal> : bubble)}\n        </span>\n    );\n}\n"],"mappings":";;;;;;;;AAmCA,IAAME,IAAiB;AAYvB,SAAgBC,EAAQ,EACpB,YACA,eAAY,OACZ,aACA,cAAW,IACX,eAAY,KACZ,YAAS,MACI;CACb,IAAM,CAACC,GAAMC,KAAWC,EAAkB,EAAK,GACzC,CAACC,GAAaC,KAAkBF,EAAiC,IAAI,GACrE,CAACG,GAAYC,KAAiBJ,EAAiC,IAAI,GACnEK,IAAgBC,EAAkB;EACpC,QAAQL;EACR,UAAUE;EACV,MAAMI;EACN,OAAO;EACP,QAAQX;EACR,SAASY,KAAUV;CACvB,CAAC,GACKW,IAAYC,EAAM,GASlBC,IAAWC,EAA6C,IAAI;CAElE,SAASC,IAAmB;EACxB,AAAIF,EAAS,YAAY,SACrB,aAAaA,EAAS,OAAO,GAC7B,EAAS,UAAU;CAE3B;CAEA,SAASG,IAAa;EAClB,AAAIC,MACJF,EAAW,GACX,EAAS,UAAU,iBAAiBd,EAAQ,EAAI,GAAGiB,CAAS;CAChE;CAEA,SAASC,IAAa;EAElB,AADAJ,EAAW,GACXd,EAAQ,EAAK;CACjB;CAQA,AANAmB,cACiB;EACT,EAAW;CACf,GACD,CAAC,CAAC,GAELC,EAAerB,GAAMmB,CAAI;CAEzB,IAAMG,IAAUC,EAAaC,GAAU;EACnC,cAAcR;EACd,cAAcG;EACd,SAASH;EACT,QAAQG;EACR,oBAAoBnB,IAAOW,IAAY,KAAA;CAC3C,CAA4B,GAEtBc,IACF,kBAAC,QAAD;EACI,KAAKnB;EACL,IAAIK;EACJ,MAAK;EACL,WAAWe,EAAG9B,EAAO,QAAQA,EAAOa,IAAYC,KAAUd,EAAO,SAAS;EAC1E,OAAOW;EAEN,UAAAoB;CACC,CAAA;CAGV,OACI,kBAAC,QAAD;EAAM,KAAKvB;EAAgB,WAAWR,EAAO;EAA7C,UAAA,CACK0B,GACAtB,MAASU,IAAS,kBAACkB,GAAD,EAAA,UAASH,EAAe,CAAA,IAAIA,EAC7C;;AAEd"}

package/dist/components/Tooltip/Tooltip.module.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.module.cjs","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Tooltip.module.cjs","names":["trigger","bubble","tempestTooltipIn","top","bottom","left","right","portalled","Tooltip_module_default"],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Tooltip/Tooltip.module.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tooltip.module.js","names":[],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":";"}
+{"version":3,"file":"Tooltip.module.js","names":["trigger","bubble","tempestTooltipIn","top","bottom","left","right","portalled","Tooltip_module_default"],"sources":["../../../src/components/Tooltip/Tooltip.module.css"],"sourcesContent":[".trigger {\n    display: inline-flex;\n    position: relative;\n}\n\n.bubble {\n    position: absolute;\n    z-index: var(--tempest-z-tooltip);\n    background-color: var(--tempest-gray-900);\n    color: #ffffff;\n    padding: 6px 10px;\n    border-radius: var(--tempest-radius-sm);\n    font-family: var(--tempest-font-sans);\n    font-size: var(--tempest-text-xs);\n    font-weight: var(--tempest-weight-medium);\n    line-height: var(--tempest-leading-snug);\n    white-space: nowrap;\n    pointer-events: none;\n    box-shadow: var(--tempest-shadow-lg);\n    animation: tempest-tooltip-in var(--tempest-duration-fast) var(--tempest-ease-out);\n}\n\n.top {\n    bottom: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.bottom {\n    top: calc(100% + 8px);\n    left: 50%;\n    transform: translateX(-50%);\n}\n\n.left {\n    right: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.right {\n    left: calc(100% + 8px);\n    top: 50%;\n    transform: translateY(-50%);\n}\n\n.portalled {\n    right: auto;\n    bottom: auto;\n    transform: none;\n}\n\n@keyframes tempest-tooltip-in {\n    from {\n        opacity: 0;\n        transform: scale(0.94) translate(var(--tempest-tx, 0), var(--tempest-ty, 0));\n    }\n    to {\n        opacity: 1;\n    }\n}\n\n@media (prefers-reduced-motion: reduce) {\n    .bubble {\n        animation: none;\n    }\n}\n\n/* Hide tooltip on touch / no-hover devices — tap+hold leaves\n * tooltip stuck visible and competes with native long-press menus. */\n@media (hover: none) {\n    .bubble {\n        display: none;\n    }\n}\n"],"mappings":";"}

package/dist/components/Tour/Tour.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-focus-trap.cjs"),n=require("./tour-position.cjs"),r=require("./Tour.module.cjs");let i=require("react"),a=require("react/jsx-runtime");var o={next:`Próximo`,back:`Voltar`,finish:`Concluir`,skip:`Pular`,close:`Fechar tour`,progress:(e,t)=>`Passo ${e} de ${t}`},s={next:`Next`,back:`Back`,finish:`Done`,skip:`Skip`,close:`Close tour`,progress:(e,t)=>`Step ${e} of ${t}`};function c({steps:c,open:l,onClose:u,onFinish:d,index:f,onIndexChange:p,locale:m=`pt-BR`,spotlightPadding:h=4,className:g}){let _=m===`en`?s:o,[v,y]=(0,i.useState)(0),b=Math.min(f??v,Math.max(0,c.length-1)),x=c[b],S=(0,i.useRef)(null),[C,w]=(0,i.useState)(null),[T,E]=(0,i.useState)({placement:`center`,top:0,left:0}),[D,O]=(0,i.useState)({width:0,height:0}),k=(0,i.useId)(),A=(0,i.useId)();t.useFocusTrap(S,l);let j=(0,i.useCallback)(e=>{f===void 0&&y(e),p?.(e)},[f,p]);(0,i.useEffect)(()=>{l&&f===void 0&&y(0)},[l,f]);let M=(0,i.useCallback)(()=>{if(!l||!x)return;let e=(x.target?document.querySelector(x.target):null)?.getBoundingClientRect()??null;w(e?{top:e.top,left:e.left,width:e.width,height:e.height}:null);let t={width:S.current?.offsetWidth??320,height:S.current?.offsetHeight??160},r={width:window.innerWidth,height:window.innerHeight};O(r),E(n.placeCard({target:e?{top:e.top,left:e.left,width:e.width,height:e.height}:null,card:t,viewport:r,preferred:x.placement}))},[l,x]);if((0,i.useLayoutEffect)(()=>{if(!l||!x)return;(x.target?document.querySelector(x.target):null)?.scrollIntoView({block:`center`,inline:`nearest`,behavior:`smooth`});let e=requestAnimationFrame(M);return()=>cancelAnimationFrame(e)},[l,x,M]),(0,i.useEffect)(()=>{if(l)return window.addEventListener(`resize`,M),window.addEventListener(`scroll`,M,!0),()=>{window.removeEventListener(`resize`,M),window.removeEventListener(`scroll`,M,!0)}},[l,M]),(0,i.useEffect)(()=>{l&&S.current?.focus()},[l,b]),!l||!x)return null;let N=b===c.length-1,P=()=>{d?.(),u()};return(0,a.jsxs)(`div`,{className:r.default.root,"data-placement":T.placement,children:[n.backdropRects(C,D,h).map((e,t)=>(0,a.jsx)(`div`,{className:r.default.backdrop,style:{top:e.top,left:e.left,width:e.width,height:e.height},onClick:u},t)),C&&(0,a.jsx)(`div`,{className:r.default.spotlight,style:{top:C.top-h,left:C.left-h,width:C.width+h*2,height:C.height+h*2}}),(0,a.jsxs)(`div`,{ref:S,className:e.cn(r.default.card,g),style:{top:T.top,left:T.left},role:`dialog`,"aria-modal":`true`,"aria-labelledby":x.title?k:void 0,"aria-describedby":A,tabIndex:-1,onKeyDown:e=>{if(e.key===`Escape`){e.stopPropagation(),u();return}e.key===`ArrowRight`&&!N&&(e.preventDefault(),j(b+1)),e.key===`ArrowLeft`&&b>0&&(e.preventDefault(),j(b-1))},children:[(0,a.jsxs)(`div`,{className:r.default.header,children:[(0,a.jsx)(`span`,{className:r.default.progress,children:_.progress(b+1,c.length)}),(0,a.jsx)(`button`,{type:`button`,className:r.default.close,"aria-label":_.close,onClick:u,children:`×`})]}),x.title&&(0,a.jsx)(`h2`,{className:r.default.title,id:k,children:x.title}),(0,a.jsx)(`div`,{className:r.default.body,id:A,children:x.body}),(0,a.jsxs)(`div`,{className:r.default.footer,children:[!N&&(0,a.jsx)(`button`,{type:`button`,className:r.default.skip,onClick:u,children:_.skip}),(0,a.jsxs)(`div`,{className:r.default.actions,children:[b>0&&(0,a.jsx)(`button`,{type:`button`,className:r.default.secondary,onClick:()=>j(b-1),children:_.back}),(0,a.jsx)(`button`,{type:`button`,className:r.default.primary,onClick:()=>N?P():j(b+1),children:N?_.finish:_.next})]})]})]})]})}exports.Tour=c;
+const e=require("../../utils/cn.cjs"),t=require("../../hooks/use-focus-trap.cjs"),n=require("./tour-position.cjs"),r=require("./Tour.module.cjs");let i=require("react"),a=require("react/jsx-runtime");var o={next:`Próximo`,back:`Voltar`,finish:`Concluir`,skip:`Pular`,close:`Fechar tour`,progress:(e,t)=>`Passo ${e} de ${t}`},s={next:`Next`,back:`Back`,finish:`Done`,skip:`Skip`,close:`Close tour`,progress:(e,t)=>`Step ${e} of ${t}`};function c({steps:c,open:l,onClose:u,onFinish:d,index:f,onIndexChange:p,locale:m=`pt-BR`,spotlightPadding:h=4,className:g}){let _=m===`en`?s:o,[v,y]=(0,i.useState)(0),b=Math.min(f??v,Math.max(0,c.length-1)),x=c[b],S=(0,i.useRef)(null),[C,w]=(0,i.useState)(null),[T,E]=(0,i.useState)({placement:`center`,top:0,left:0}),[D,O]=(0,i.useState)({width:0,height:0}),k=(0,i.useId)(),A=(0,i.useId)();t.useFocusTrap(S,l);let j=(0,i.useCallback)(e=>{f===void 0&&y(e),p?.(e)},[f,p]);(0,i.useEffect)(()=>{l&&f===void 0&&y(0)},[l,f]);let M=(0,i.useCallback)(()=>{if(!l||!x)return;let e=(x.target?document.querySelector(x.target):null)?.getBoundingClientRect()??null;w(e?{top:e.top,left:e.left,width:e.width,height:e.height}:null);let t={width:S.current?.offsetWidth??320,height:S.current?.offsetHeight??160},r={width:window.innerWidth,height:window.innerHeight};O(r),E(n.placeCard({target:e?{top:e.top,left:e.left,width:e.width,height:e.height}:null,card:t,viewport:r,preferred:x.placement}))},[l,x]);if((0,i.useLayoutEffect)(()=>{if(!l||!x)return;(x.target?document.querySelector(x.target):null)?.scrollIntoView({block:`center`,inline:`nearest`,behavior:`smooth`});let e=requestAnimationFrame(M);return()=>cancelAnimationFrame(e)},[l,x,M]),(0,i.useEffect)(()=>{if(l)return window.addEventListener(`resize`,M),window.addEventListener(`scroll`,M,!0),()=>{window.removeEventListener(`resize`,M),window.removeEventListener(`scroll`,M,!0)}},[l,M]),(0,i.useEffect)(()=>{l&&S.current?.focus()},[l,b]),!l||!x)return null;let N=b===c.length-1,P=()=>{d?.(),u()};return(0,a.jsxs)(`div`,{className:r.default.root,"data-placement":T.placement,children:[n.backdropRects(C,D,h).map((e,t)=>(0,a.jsx)(`div`,{className:r.default.backdrop,style:{top:e.top,left:e.left,width:e.width,height:e.height},onClick:u},t)),C&&(0,a.jsx)(`div`,{className:r.default.spotlight,style:{top:C.top-h,left:C.left-h,width:C.width+h*2,height:C.height+h*2}}),(0,a.jsxs)(`div`,{ref:S,className:e.cn(r.default.card,g),style:{top:T.top,left:T.left},role:`dialog`,"aria-modal":`true`,"aria-labelledby":x.title?k:void 0,"aria-describedby":A,tabIndex:-1,onKeyDown:e=>{e.key===`Escape`?(e.stopPropagation(),u()):(e.key===`ArrowRight`&&!N&&(e.preventDefault(),j(b+1)),e.key===`ArrowLeft`&&b>0&&(e.preventDefault(),j(b-1)))},children:[(0,a.jsxs)(`div`,{className:r.default.header,children:[(0,a.jsx)(`span`,{className:r.default.progress,children:_.progress(b+1,c.length)}),(0,a.jsx)(`button`,{type:`button`,className:r.default.close,"aria-label":_.close,onClick:u,children:`×`})]}),x.title&&(0,a.jsx)(`h2`,{className:r.default.title,id:k,children:x.title}),(0,a.jsx)(`div`,{className:r.default.body,id:A,children:x.body}),(0,a.jsxs)(`div`,{className:r.default.footer,children:[!N&&(0,a.jsx)(`button`,{type:`button`,className:r.default.skip,onClick:u,children:_.skip}),(0,a.jsxs)(`div`,{className:r.default.actions,children:[b>0&&(0,a.jsx)(`button`,{type:`button`,className:r.default.secondary,onClick:()=>j(b-1),children:_.back}),(0,a.jsx)(`button`,{type:`button`,className:r.default.primary,onClick:()=>N?P():j(b+1),children:N?_.finish:_.next})]})]})]})]})}exports.Tour=c;
 //# sourceMappingURL=Tour.cjs.map

package/dist/components/Tour/Tour.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.cjs","names":[],"sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — a product tour is a\n * controlled sequence (steps, index, onIndexChange, open, onClose, onFinish) drawn\n * over someone else's DOM (spotlightPadding, locale, className). The body measures\n * the target element, positions the spotlight and the card against it, and re-\n * measures on scroll and resize — one geometry, three triggers.\n */\nimport {\n    useCallback,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type KeyboardEvent,\n    type ReactNode,\n} from \"react\";\n\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { cn } from \"@/utils/cn\";\n\nimport { backdropRects, placeCard, type TourPlacement, type TourRect } from \"./tour-position\";\nimport styles from \"./Tour.module.css\";\n\n/** One stop of the tour. */\nexport interface TourStep {\n    /**\n     * CSS selector of the element to point at.\n     *\n     * A selector rather than a ref, so a tour can be declared as data — in a config\n     * file, from the backend, next to the copy — without every screen having to\n     * thread refs up to whoever renders the tour.\n     */\n    target?: string;\n    /** Heading of the card. */\n    title?: ReactNode;\n    /** The explanation. */\n    body: ReactNode;\n    /** Preferred side. Default `\"bottom\"`, flipped when it does not fit. */\n    placement?: TourPlacement;\n}\n\n/** Labels, per locale. */\ninterface TourStrings {\n    next: string;\n    back: string;\n    finish: string;\n    skip: string;\n    close: string;\n    progress: (current: number, total: number) => string;\n}\n\nconst PT_BR: TourStrings = {\n    next: \"Próximo\",\n    back: \"Voltar\",\n    finish: \"Concluir\",\n    skip: \"Pular\",\n    close: \"Fechar tour\",\n    progress: (current, total) => `Passo ${current} de ${total}`,\n};\n\nconst EN: TourStrings = {\n    next: \"Next\",\n    back: \"Back\",\n    finish: \"Done\",\n    skip: \"Skip\",\n    close: \"Close tour\",\n    progress: (current, total) => `Step ${current} of ${total}`,\n};\n\nexport interface TourProps {\n    /** The stops, in order. */\n    steps: readonly TourStep[];\n    /** Whether the tour is showing. Controlled. */\n    open: boolean;\n    /** Closed by `Esc`, by the close button or by \"skip\". */\n    onClose: () => void;\n    /** Called after the last step is confirmed. `onClose` follows it. */\n    onFinish?: () => void;\n    /** Current step index, when the app wants to drive it. */\n    index?: number;\n    /** Step changed — required only when `index` is given. */\n    onIndexChange?: (index: number) => void;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Space kept clear around the highlighted element, in px. Default 4. */\n    spotlightPadding?: number;\n    /** Extra class on the card. */\n    className?: string;\n}\n\n/**\n * A guided tour: dim the page, highlight one element at a time, explain it.\n *\n * The highlighted element stays **clickable** while everything else is blocked,\n * because the useful kind of coachmark says \"press this\" and lets you press it. That\n * is why the backdrop is four rectangles around the target rather than one overlay\n * with a `box-shadow` hole — a shadow is not hit-testable, so a hole made that way\n * would not block anything.\n *\n * Whether a user has seen the tour is the app's business: this component takes\n * `open` and emits `onClose`/`onFinish`. Persisting a flag in `localStorage` is one\n * line in the app and a wrong default here.\n *\n * @example\n * const [open, setOpen] = useState(!storage.get(\"tour-v1\"));\n *\n * <Tour\n *     open={open}\n *     steps={[\n *         { target: \"#novo-pedido\", title: \"Comece aqui\", body: \"Todo pedido nasce deste botão.\" },\n *         { target: \"[data-tour='filtros']\", body: \"E filtre por período aqui.\" },\n *     ]}\n *     onClose={() => setOpen(false)}\n *     onFinish={() => storage.set(\"tour-v1\", true)}\n * />\n */\nexport function Tour({\n    steps,\n    open,\n    onClose,\n    onFinish,\n    index,\n    onIndexChange,\n    locale = \"pt-BR\",\n    spotlightPadding = 4,\n    className,\n}: TourProps) {\n    const strings = locale === \"en\" ? EN : PT_BR;\n    const [internal, setInternal] = useState(0);\n    const current = Math.min(index ?? internal, Math.max(0, steps.length - 1));\n    const step = steps[current];\n\n    const card = useRef<HTMLDivElement | null>(null);\n    const [target, setTarget] = useState<TourRect | null>(null);\n    const [position, setPosition] = useState<{\n        placement: TourPlacement;\n        top: number;\n        left: number;\n    }>({ placement: \"center\", top: 0, left: 0 });\n    const [viewport, setViewport] = useState({ width: 0, height: 0 });\n    const titleId = useId();\n    const bodyId = useId();\n\n    useFocusTrap(card, open);\n\n    const goTo = useCallback(\n        (next: number) => {\n            if (index === undefined) setInternal(next);\n            onIndexChange?.(next);\n        },\n        [index, onIndexChange],\n    );\n\n    /** Reset to the first step whenever the tour opens again. */\n    useEffect(() => {\n        if (open && index === undefined) setInternal(0);\n    }, [open, index]);\n\n    /**\n     * Find the step's element, bring it into view, and measure everything.\n     *\n     * The scroll happens before measuring, and the measurement is deferred to the\n     * next frame: reading a rect in the same tick as `scrollIntoView` gives the\n     * position the element had *before* the scroll, which lands the card over the\n     * wrong part of the page.\n     */\n    const measure = useCallback(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        const rect = element?.getBoundingClientRect() ?? null;\n        setTarget(\n            rect\n                ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                : null,\n        );\n\n        const size = {\n            width: card.current?.offsetWidth ?? 320,\n            height: card.current?.offsetHeight ?? 160,\n        };\n        const view = { width: window.innerWidth, height: window.innerHeight };\n        setViewport(view);\n        setPosition(\n            placeCard({\n                target: rect\n                    ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                    : null,\n                card: size,\n                viewport: view,\n                preferred: step.placement,\n            }),\n        );\n    }, [open, step]);\n\n    useLayoutEffect(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        element?.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" });\n        const frame = requestAnimationFrame(measure);\n        return () => cancelAnimationFrame(frame);\n    }, [open, step, measure]);\n\n    useEffect(() => {\n        if (!open) return;\n        window.addEventListener(\"resize\", measure);\n        window.addEventListener(\"scroll\", measure, true);\n        return () => {\n            window.removeEventListener(\"resize\", measure);\n            window.removeEventListener(\"scroll\", measure, true);\n        };\n    }, [open, measure]);\n\n    useEffect(() => {\n        if (open) card.current?.focus();\n    }, [open, current]);\n\n    if (!open || !step) return null;\n\n    const last = current === steps.length - 1;\n\n    const finish = (): void => {\n        onFinish?.();\n        onClose();\n    };\n\n    /**\n     * Arrow keys walk the tour and `Esc` leaves it.\n     *\n     * `Esc` is handled here rather than on `window` so a tour opened over a modal\n     * does not close both: the innermost handler that sees the key wins, and the\n     * card has focus.\n     */\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        if (event.key === \"Escape\") {\n            event.stopPropagation();\n            onClose();\n            return;\n        }\n        if (event.key === \"ArrowRight\" && !last) {\n            event.preventDefault();\n            goTo(current + 1);\n        }\n        if (event.key === \"ArrowLeft\" && current > 0) {\n            event.preventDefault();\n            goTo(current - 1);\n        }\n    };\n\n    return (\n        <div className={styles.root} data-placement={position.placement}>\n            {backdropRects(target, viewport, spotlightPadding).map((rect, i) => (\n                <div\n                    key={i}\n                    className={styles.backdrop}\n                    style={{\n                        top: rect.top,\n                        left: rect.left,\n                        width: rect.width,\n                        height: rect.height,\n                    }}\n                    onClick={onClose}\n                />\n            ))}\n\n            {target && (\n                <div\n                    className={styles.spotlight}\n                    style={{\n                        top: target.top - spotlightPadding,\n                        left: target.left - spotlightPadding,\n                        width: target.width + spotlightPadding * 2,\n                        height: target.height + spotlightPadding * 2,\n                    }}\n                />\n            )}\n\n            <div\n                ref={card}\n                className={cn(styles.card, className)}\n                style={{ top: position.top, left: position.left }}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={step.title ? titleId : undefined}\n                aria-describedby={bodyId}\n                tabIndex={-1}\n                onKeyDown={handleKeyDown}\n            >\n                <div className={styles.header}>\n                    <span className={styles.progress}>\n                        {strings.progress(current + 1, steps.length)}\n                    </span>\n                    <button\n                        type=\"button\"\n                        className={styles.close}\n                        aria-label={strings.close}\n                        onClick={onClose}\n                    >\n                        ×\n                    </button>\n                </div>\n\n                {step.title && (\n                    <h2 className={styles.title} id={titleId}>\n                        {step.title}\n                    </h2>\n                )}\n                <div className={styles.body} id={bodyId}>\n                    {step.body}\n                </div>\n\n                <div className={styles.footer}>\n                    {!last && (\n                        <button type=\"button\" className={styles.skip} onClick={onClose}>\n                            {strings.skip}\n                        </button>\n                    )}\n                    <div className={styles.actions}>\n                        {current > 0 && (\n                            <button\n                                type=\"button\"\n                                className={styles.secondary}\n                                onClick={() => goTo(current - 1)}\n                            >\n                                {strings.back}\n                            </button>\n                        )}\n                        <button\n                            type=\"button\"\n                            className={styles.primary}\n                            onClick={() => (last ? finish() : goTo(current + 1))}\n                        >\n                            {last ? strings.finish : strings.next}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":"wMAoDA,IAAM,EAAqB,CACvB,KAAM,UACN,KAAM,SACN,OAAQ,WACR,KAAM,QACN,MAAO,cACP,UAAW,EAAS,IAAU,SAAS,EAAQ,MAAM,GACzD,EAEM,EAAkB,CACpB,KAAM,OACN,KAAM,OACN,OAAQ,OACR,KAAM,OACN,MAAO,aACP,UAAW,EAAS,IAAU,QAAQ,EAAQ,MAAM,GACxD,EAiDA,SAAgB,EAAK,CACjB,QACA,OACA,UACA,WACA,QACA,gBACA,SAAS,QACT,mBAAmB,EACnB,aACU,CACV,IAAM,EAAU,IAAW,KAAO,EAAK,EACjC,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAS,CAAC,EACpC,EAAU,KAAK,IAAI,GAAS,EAAU,KAAK,IAAI,EAAG,EAAM,OAAS,CAAC,CAAC,EACnE,EAAO,EAAM,GAEb,GAAA,EAAO,EAAA,OAAA,CAA8B,IAAI,EACzC,CAAC,EAAQ,IAAA,EAAa,EAAA,SAAA,CAA0B,IAAI,EACpD,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAI7B,CAAE,UAAW,SAAU,IAAK,EAAG,KAAM,CAAE,CAAC,EACrC,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAS,CAAE,MAAO,EAAG,OAAQ,CAAE,CAAC,EAC1D,GAAA,EAAU,EAAA,MAAA,CAAM,EAChB,GAAA,EAAS,EAAA,MAAA,CAAM,EAErB,EAAA,aAAa,EAAM,CAAI,EAEvB,IAAM,GAAA,EAAO,EAAA,YAAA,CACR,GAAiB,CACV,IAAU,IAAA,IAAW,EAAY,CAAI,EACzC,IAAgB,CAAI,CACxB,EACA,CAAC,EAAO,CAAa,CACzB,GAGA,EAAA,EAAA,UAAA,KAAgB,CACR,GAAQ,IAAU,IAAA,IAAW,EAAY,CAAC,CAClD,EAAG,CAAC,EAAM,CAAK,CAAC,EAUhB,IAAM,GAAA,EAAU,EAAA,YAAA,KAAkB,CAC9B,GAAI,CAAC,GAAQ,CAAC,EAAM,OAEpB,IAAM,GADU,EAAK,OAAS,SAAS,cAA2B,EAAK,MAAM,EAAI,KAAA,EAC3D,sBAAsB,GAAK,KACjD,EACI,EACM,CAAE,IAAK,EAAK,IAAK,KAAM,EAAK,KAAM,MAAO,EAAK,MAAO,OAAQ,EAAK,MAAO,EACzE,IACV,EAEA,IAAM,EAAO,CACT,MAAO,EAAK,SAAS,aAAe,IACpC,OAAQ,EAAK,SAAS,cAAgB,GAC1C,EACM,EAAO,CAAE,MAAO,OAAO,WAAY,OAAQ,OAAO,WAAY,EACpE,EAAY,CAAI,EAChB,EACI,EAAA,UAAU,CACN,OAAQ,EACF,CAAE,IAAK,EAAK,IAAK,KAAM,EAAK,KAAM,MAAO,EAAK,MAAO,OAAQ,EAAK,MAAO,EACzE,KACN,KAAM,EACN,SAAU,EACV,UAAW,EAAK,SACpB,CAAC,CACL,CACJ,EAAG,CAAC,EAAM,CAAI,CAAC,EAwBf,IAtBA,EAAA,EAAA,gBAAA,KAAsB,CAClB,GAAI,CAAC,GAAQ,CAAC,EAAM,QACJ,EAAK,OAAS,SAAS,cAA2B,EAAK,MAAM,EAAI,KAAA,EACxE,eAAe,CAAE,MAAO,SAAU,OAAQ,UAAW,SAAU,QAAS,CAAC,EAClF,IAAM,EAAQ,sBAAsB,CAAO,EAC3C,UAAa,qBAAqB,CAAK,CAC3C,EAAG,CAAC,EAAM,EAAM,CAAO,CAAC,GAExB,EAAA,EAAA,UAAA,KAAgB,CACP,KAGL,OAFA,OAAO,iBAAiB,SAAU,CAAO,EACzC,OAAO,iBAAiB,SAAU,EAAS,EAAI,MAClC,CACT,OAAO,oBAAoB,SAAU,CAAO,EAC5C,OAAO,oBAAoB,SAAU,EAAS,EAAI,CACtD,CACJ,EAAG,CAAC,EAAM,CAAO,CAAC,GAElB,EAAA,EAAA,UAAA,KAAgB,CACR,GAAM,EAAK,SAAS,MAAM,CAClC,EAAG,CAAC,EAAM,CAAO,CAAC,EAEd,CAAC,GAAQ,CAAC,EAAM,OAAO,KAE3B,IAAM,EAAO,IAAY,EAAM,OAAS,EAElC,MAAqB,CACvB,IAAW,EACX,EAAQ,CACZ,EAyBA,OACI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAM,iBAAgB,EAAS,UAAtD,SAAA,CACK,EAAA,cAAc,EAAQ,EAAU,CAAgB,CAAC,CAAC,KAAK,EAAM,KAC1D,EAAA,EAAA,IAAA,CAAC,MAAD,CAEI,UAAW,EAAA,QAAO,SAClB,MAAO,CACH,IAAK,EAAK,IACV,KAAM,EAAK,KACX,MAAO,EAAK,MACZ,OAAQ,EAAK,MACjB,EACA,QAAS,CACZ,EATQ,CASR,CACJ,EAEA,IACG,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,UAAW,EAAA,QAAO,UAClB,MAAO,CACH,IAAK,EAAO,IAAM,EAClB,KAAM,EAAO,KAAO,EACpB,MAAO,EAAO,MAAQ,EAAmB,EACzC,OAAQ,EAAO,OAAS,EAAmB,CAC/C,CACH,CAAA,GAGL,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,GAAG,EAAA,QAAO,KAAM,CAAS,EACpC,MAAO,CAAE,IAAK,EAAS,IAAK,KAAM,EAAS,IAAK,EAChD,KAAK,SACL,aAAW,OACX,kBAAiB,EAAK,MAAQ,EAAU,IAAA,GACxC,mBAAkB,EAClB,SAAU,GACV,UArDW,GAA+C,CAClE,GAAI,EAAM,MAAQ,SAAU,CACxB,EAAM,gBAAgB,EACtB,EAAQ,EACR,MACJ,CACI,EAAM,MAAQ,cAAgB,CAAC,IAC/B,EAAM,eAAe,EACrB,EAAK,EAAU,CAAC,GAEhB,EAAM,MAAQ,aAAe,EAAU,IACvC,EAAM,eAAe,EACrB,EAAK,EAAU,CAAC,EAExB,EA8BQ,SAAA,EAWI,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAvB,SAAA,EACI,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,SACnB,SAAA,EAAQ,SAAS,EAAU,EAAG,EAAM,MAAM,CACzC,CAAA,GACN,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,MAClB,aAAY,EAAQ,MACpB,QAAS,EACZ,SAAA,GAEO,CAAA,CACP,IAEJ,EAAK,QACF,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,MAAO,GAAI,EAC5B,SAAA,EAAK,KACN,CAAA,GAER,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,KAAM,GAAI,EAC5B,SAAA,EAAK,IACL,CAAA,GAEL,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAvB,SAAA,CACK,CAAC,IACE,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,EAAA,QAAO,KAAM,QAAS,EAClD,SAAA,EAAQ,IACL,CAAA,GAEZ,EAAA,EAAA,KAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,QAAvB,SAAA,CACK,EAAU,IACP,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,UAClB,YAAe,EAAK,EAAU,CAAC,EAE9B,SAAA,EAAQ,IACL,CAAA,GAEZ,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,YAAgB,EAAO,EAAO,EAAI,EAAK,EAAU,CAAC,EAEjD,SAAA,EAAO,EAAQ,OAAS,EAAQ,IAC7B,CAAA,CACP,CACJ,CAAA,CAAA,GACJ,GACJ,GAEb"}
+{"version":3,"file":"Tour.cjs","names":["useState","useRef","useId","useCallback","placeCard","styles","backdropRects","cn","require_cn","require_use_focus_trap","require_tour_position","require_Tour_module","react","react_jsx_runtime","PT_BR","current","total","EN","Tour","strings","locale","internal","setInternal","index","steps","step","card","target","setTarget","position","setPosition","viewport","setViewport","titleId","bodyId","open","goTo","next","onIndexChange","measure","rect","size","view","frame","last","finish","onFinish","onClose","spotlightPadding","i","className","event"],"sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — a product tour is a\n * controlled sequence (steps, index, onIndexChange, open, onClose, onFinish) drawn\n * over someone else's DOM (spotlightPadding, locale, className). The body measures\n * the target element, positions the spotlight and the card against it, and re-\n * measures on scroll and resize — one geometry, three triggers.\n */\nimport {\n    useCallback,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type KeyboardEvent,\n    type ReactNode,\n} from \"react\";\n\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { cn } from \"@/utils/cn\";\n\nimport { backdropRects, placeCard, type TourPlacement, type TourRect } from \"./tour-position\";\nimport styles from \"./Tour.module.css\";\n\n/** One stop of the tour. */\nexport interface TourStep {\n    /**\n     * CSS selector of the element to point at.\n     *\n     * A selector rather than a ref, so a tour can be declared as data — in a config\n     * file, from the backend, next to the copy — without every screen having to\n     * thread refs up to whoever renders the tour.\n     */\n    target?: string;\n    /** Heading of the card. */\n    title?: ReactNode;\n    /** The explanation. */\n    body: ReactNode;\n    /** Preferred side. Default `\"bottom\"`, flipped when it does not fit. */\n    placement?: TourPlacement;\n}\n\n/** Labels, per locale. */\ninterface TourStrings {\n    next: string;\n    back: string;\n    finish: string;\n    skip: string;\n    close: string;\n    progress: (current: number, total: number) => string;\n}\n\nconst PT_BR: TourStrings = {\n    next: \"Próximo\",\n    back: \"Voltar\",\n    finish: \"Concluir\",\n    skip: \"Pular\",\n    close: \"Fechar tour\",\n    progress: (current, total) => `Passo ${current} de ${total}`,\n};\n\nconst EN: TourStrings = {\n    next: \"Next\",\n    back: \"Back\",\n    finish: \"Done\",\n    skip: \"Skip\",\n    close: \"Close tour\",\n    progress: (current, total) => `Step ${current} of ${total}`,\n};\n\nexport interface TourProps {\n    /** The stops, in order. */\n    steps: readonly TourStep[];\n    /** Whether the tour is showing. Controlled. */\n    open: boolean;\n    /** Closed by `Esc`, by the close button or by \"skip\". */\n    onClose: () => void;\n    /** Called after the last step is confirmed. `onClose` follows it. */\n    onFinish?: () => void;\n    /** Current step index, when the app wants to drive it. */\n    index?: number;\n    /** Step changed — required only when `index` is given. */\n    onIndexChange?: (index: number) => void;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Space kept clear around the highlighted element, in px. Default 4. */\n    spotlightPadding?: number;\n    /** Extra class on the card. */\n    className?: string;\n}\n\n/**\n * A guided tour: dim the page, highlight one element at a time, explain it.\n *\n * The highlighted element stays **clickable** while everything else is blocked,\n * because the useful kind of coachmark says \"press this\" and lets you press it. That\n * is why the backdrop is four rectangles around the target rather than one overlay\n * with a `box-shadow` hole — a shadow is not hit-testable, so a hole made that way\n * would not block anything.\n *\n * Whether a user has seen the tour is the app's business: this component takes\n * `open` and emits `onClose`/`onFinish`. Persisting a flag in `localStorage` is one\n * line in the app and a wrong default here.\n *\n * @example\n * const [open, setOpen] = useState(!storage.get(\"tour-v1\"));\n *\n * <Tour\n *     open={open}\n *     steps={[\n *         { target: \"#novo-pedido\", title: \"Comece aqui\", body: \"Todo pedido nasce deste botão.\" },\n *         { target: \"[data-tour='filtros']\", body: \"E filtre por período aqui.\" },\n *     ]}\n *     onClose={() => setOpen(false)}\n *     onFinish={() => storage.set(\"tour-v1\", true)}\n * />\n */\nexport function Tour({\n    steps,\n    open,\n    onClose,\n    onFinish,\n    index,\n    onIndexChange,\n    locale = \"pt-BR\",\n    spotlightPadding = 4,\n    className,\n}: TourProps) {\n    const strings = locale === \"en\" ? EN : PT_BR;\n    const [internal, setInternal] = useState(0);\n    const current = Math.min(index ?? internal, Math.max(0, steps.length - 1));\n    const step = steps[current];\n\n    const card = useRef<HTMLDivElement | null>(null);\n    const [target, setTarget] = useState<TourRect | null>(null);\n    const [position, setPosition] = useState<{\n        placement: TourPlacement;\n        top: number;\n        left: number;\n    }>({ placement: \"center\", top: 0, left: 0 });\n    const [viewport, setViewport] = useState({ width: 0, height: 0 });\n    const titleId = useId();\n    const bodyId = useId();\n\n    useFocusTrap(card, open);\n\n    const goTo = useCallback(\n        (next: number) => {\n            if (index === undefined) setInternal(next);\n            onIndexChange?.(next);\n        },\n        [index, onIndexChange],\n    );\n\n    /** Reset to the first step whenever the tour opens again. */\n    useEffect(() => {\n        if (open && index === undefined) setInternal(0);\n    }, [open, index]);\n\n    /**\n     * Find the step's element, bring it into view, and measure everything.\n     *\n     * The scroll happens before measuring, and the measurement is deferred to the\n     * next frame: reading a rect in the same tick as `scrollIntoView` gives the\n     * position the element had *before* the scroll, which lands the card over the\n     * wrong part of the page.\n     */\n    const measure = useCallback(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        const rect = element?.getBoundingClientRect() ?? null;\n        setTarget(\n            rect\n                ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                : null,\n        );\n\n        const size = {\n            width: card.current?.offsetWidth ?? 320,\n            height: card.current?.offsetHeight ?? 160,\n        };\n        const view = { width: window.innerWidth, height: window.innerHeight };\n        setViewport(view);\n        setPosition(\n            placeCard({\n                target: rect\n                    ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                    : null,\n                card: size,\n                viewport: view,\n                preferred: step.placement,\n            }),\n        );\n    }, [open, step]);\n\n    useLayoutEffect(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        element?.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" });\n        const frame = requestAnimationFrame(measure);\n        return () => cancelAnimationFrame(frame);\n    }, [open, step, measure]);\n\n    useEffect(() => {\n        if (!open) return;\n        window.addEventListener(\"resize\", measure);\n        window.addEventListener(\"scroll\", measure, true);\n        return () => {\n            window.removeEventListener(\"resize\", measure);\n            window.removeEventListener(\"scroll\", measure, true);\n        };\n    }, [open, measure]);\n\n    useEffect(() => {\n        if (open) card.current?.focus();\n    }, [open, current]);\n\n    if (!open || !step) return null;\n\n    const last = current === steps.length - 1;\n\n    const finish = (): void => {\n        onFinish?.();\n        onClose();\n    };\n\n    /**\n     * Arrow keys walk the tour and `Esc` leaves it.\n     *\n     * `Esc` is handled here rather than on `window` so a tour opened over a modal\n     * does not close both: the innermost handler that sees the key wins, and the\n     * card has focus.\n     */\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        if (event.key === \"Escape\") {\n            event.stopPropagation();\n            onClose();\n            return;\n        }\n        if (event.key === \"ArrowRight\" && !last) {\n            event.preventDefault();\n            goTo(current + 1);\n        }\n        if (event.key === \"ArrowLeft\" && current > 0) {\n            event.preventDefault();\n            goTo(current - 1);\n        }\n    };\n\n    return (\n        <div className={styles.root} data-placement={position.placement}>\n            {backdropRects(target, viewport, spotlightPadding).map((rect, i) => (\n                <div\n                    key={i}\n                    className={styles.backdrop}\n                    style={{\n                        top: rect.top,\n                        left: rect.left,\n                        width: rect.width,\n                        height: rect.height,\n                    }}\n                    onClick={onClose}\n                />\n            ))}\n\n            {target && (\n                <div\n                    className={styles.spotlight}\n                    style={{\n                        top: target.top - spotlightPadding,\n                        left: target.left - spotlightPadding,\n                        width: target.width + spotlightPadding * 2,\n                        height: target.height + spotlightPadding * 2,\n                    }}\n                />\n            )}\n\n            <div\n                ref={card}\n                className={cn(styles.card, className)}\n                style={{ top: position.top, left: position.left }}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={step.title ? titleId : undefined}\n                aria-describedby={bodyId}\n                tabIndex={-1}\n                onKeyDown={handleKeyDown}\n            >\n                <div className={styles.header}>\n                    <span className={styles.progress}>\n                        {strings.progress(current + 1, steps.length)}\n                    </span>\n                    <button\n                        type=\"button\"\n                        className={styles.close}\n                        aria-label={strings.close}\n                        onClick={onClose}\n                    >\n                        ×\n                    </button>\n                </div>\n\n                {step.title && (\n                    <h2 className={styles.title} id={titleId}>\n                        {step.title}\n                    </h2>\n                )}\n                <div className={styles.body} id={bodyId}>\n                    {step.body}\n                </div>\n\n                <div className={styles.footer}>\n                    {!last && (\n                        <button type=\"button\" className={styles.skip} onClick={onClose}>\n                            {strings.skip}\n                        </button>\n                    )}\n                    <div className={styles.actions}>\n                        {current > 0 && (\n                            <button\n                                type=\"button\"\n                                className={styles.secondary}\n                                onClick={() => goTo(current - 1)}\n                            >\n                                {strings.back}\n                            </button>\n                        )}\n                        <button\n                            type=\"button\"\n                            className={styles.primary}\n                            onClick={() => (last ? finish() : goTo(current + 1))}\n                        >\n                            {last ? strings.finish : strings.next}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Tour/Tour.js

@@ -123,11 +123,7 @@ function h({ steps: h, open: g, onClose: _, onFinish: v, index: y, onIndexChange
 				"aria-describedby": L,
 				tabIndex: -1,
 				onKeyDown: (e) => {
-					if (e.key === "Escape") {
-						e.stopPropagation(), _();
-						return;
-					}
-					e.key === "ArrowRight" && !B && (e.preventDefault(), R(D + 1)), e.key === "ArrowLeft" && D > 0 && (e.preventDefault(), R(D - 1));
+					e.key === "Escape" ? (e.stopPropagation(), _()) : (e.key === "ArrowRight" && !B && (e.preventDefault(), R(D + 1)), e.key === "ArrowLeft" && D > 0 && (e.preventDefault(), R(D - 1)));
 				},
 				children: [
 					/* @__PURE__ */ f("div", {

package/dist/components/Tour/Tour.js.map

@@ -1 +1 @@
-{"version":3,"file":"Tour.js","names":[],"sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — a product tour is a\n * controlled sequence (steps, index, onIndexChange, open, onClose, onFinish) drawn\n * over someone else's DOM (spotlightPadding, locale, className). The body measures\n * the target element, positions the spotlight and the card against it, and re-\n * measures on scroll and resize — one geometry, three triggers.\n */\nimport {\n    useCallback,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type KeyboardEvent,\n    type ReactNode,\n} from \"react\";\n\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { cn } from \"@/utils/cn\";\n\nimport { backdropRects, placeCard, type TourPlacement, type TourRect } from \"./tour-position\";\nimport styles from \"./Tour.module.css\";\n\n/** One stop of the tour. */\nexport interface TourStep {\n    /**\n     * CSS selector of the element to point at.\n     *\n     * A selector rather than a ref, so a tour can be declared as data — in a config\n     * file, from the backend, next to the copy — without every screen having to\n     * thread refs up to whoever renders the tour.\n     */\n    target?: string;\n    /** Heading of the card. */\n    title?: ReactNode;\n    /** The explanation. */\n    body: ReactNode;\n    /** Preferred side. Default `\"bottom\"`, flipped when it does not fit. */\n    placement?: TourPlacement;\n}\n\n/** Labels, per locale. */\ninterface TourStrings {\n    next: string;\n    back: string;\n    finish: string;\n    skip: string;\n    close: string;\n    progress: (current: number, total: number) => string;\n}\n\nconst PT_BR: TourStrings = {\n    next: \"Próximo\",\n    back: \"Voltar\",\n    finish: \"Concluir\",\n    skip: \"Pular\",\n    close: \"Fechar tour\",\n    progress: (current, total) => `Passo ${current} de ${total}`,\n};\n\nconst EN: TourStrings = {\n    next: \"Next\",\n    back: \"Back\",\n    finish: \"Done\",\n    skip: \"Skip\",\n    close: \"Close tour\",\n    progress: (current, total) => `Step ${current} of ${total}`,\n};\n\nexport interface TourProps {\n    /** The stops, in order. */\n    steps: readonly TourStep[];\n    /** Whether the tour is showing. Controlled. */\n    open: boolean;\n    /** Closed by `Esc`, by the close button or by \"skip\". */\n    onClose: () => void;\n    /** Called after the last step is confirmed. `onClose` follows it. */\n    onFinish?: () => void;\n    /** Current step index, when the app wants to drive it. */\n    index?: number;\n    /** Step changed — required only when `index` is given. */\n    onIndexChange?: (index: number) => void;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Space kept clear around the highlighted element, in px. Default 4. */\n    spotlightPadding?: number;\n    /** Extra class on the card. */\n    className?: string;\n}\n\n/**\n * A guided tour: dim the page, highlight one element at a time, explain it.\n *\n * The highlighted element stays **clickable** while everything else is blocked,\n * because the useful kind of coachmark says \"press this\" and lets you press it. That\n * is why the backdrop is four rectangles around the target rather than one overlay\n * with a `box-shadow` hole — a shadow is not hit-testable, so a hole made that way\n * would not block anything.\n *\n * Whether a user has seen the tour is the app's business: this component takes\n * `open` and emits `onClose`/`onFinish`. Persisting a flag in `localStorage` is one\n * line in the app and a wrong default here.\n *\n * @example\n * const [open, setOpen] = useState(!storage.get(\"tour-v1\"));\n *\n * <Tour\n *     open={open}\n *     steps={[\n *         { target: \"#novo-pedido\", title: \"Comece aqui\", body: \"Todo pedido nasce deste botão.\" },\n *         { target: \"[data-tour='filtros']\", body: \"E filtre por período aqui.\" },\n *     ]}\n *     onClose={() => setOpen(false)}\n *     onFinish={() => storage.set(\"tour-v1\", true)}\n * />\n */\nexport function Tour({\n    steps,\n    open,\n    onClose,\n    onFinish,\n    index,\n    onIndexChange,\n    locale = \"pt-BR\",\n    spotlightPadding = 4,\n    className,\n}: TourProps) {\n    const strings = locale === \"en\" ? EN : PT_BR;\n    const [internal, setInternal] = useState(0);\n    const current = Math.min(index ?? internal, Math.max(0, steps.length - 1));\n    const step = steps[current];\n\n    const card = useRef<HTMLDivElement | null>(null);\n    const [target, setTarget] = useState<TourRect | null>(null);\n    const [position, setPosition] = useState<{\n        placement: TourPlacement;\n        top: number;\n        left: number;\n    }>({ placement: \"center\", top: 0, left: 0 });\n    const [viewport, setViewport] = useState({ width: 0, height: 0 });\n    const titleId = useId();\n    const bodyId = useId();\n\n    useFocusTrap(card, open);\n\n    const goTo = useCallback(\n        (next: number) => {\n            if (index === undefined) setInternal(next);\n            onIndexChange?.(next);\n        },\n        [index, onIndexChange],\n    );\n\n    /** Reset to the first step whenever the tour opens again. */\n    useEffect(() => {\n        if (open && index === undefined) setInternal(0);\n    }, [open, index]);\n\n    /**\n     * Find the step's element, bring it into view, and measure everything.\n     *\n     * The scroll happens before measuring, and the measurement is deferred to the\n     * next frame: reading a rect in the same tick as `scrollIntoView` gives the\n     * position the element had *before* the scroll, which lands the card over the\n     * wrong part of the page.\n     */\n    const measure = useCallback(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        const rect = element?.getBoundingClientRect() ?? null;\n        setTarget(\n            rect\n                ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                : null,\n        );\n\n        const size = {\n            width: card.current?.offsetWidth ?? 320,\n            height: card.current?.offsetHeight ?? 160,\n        };\n        const view = { width: window.innerWidth, height: window.innerHeight };\n        setViewport(view);\n        setPosition(\n            placeCard({\n                target: rect\n                    ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                    : null,\n                card: size,\n                viewport: view,\n                preferred: step.placement,\n            }),\n        );\n    }, [open, step]);\n\n    useLayoutEffect(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        element?.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" });\n        const frame = requestAnimationFrame(measure);\n        return () => cancelAnimationFrame(frame);\n    }, [open, step, measure]);\n\n    useEffect(() => {\n        if (!open) return;\n        window.addEventListener(\"resize\", measure);\n        window.addEventListener(\"scroll\", measure, true);\n        return () => {\n            window.removeEventListener(\"resize\", measure);\n            window.removeEventListener(\"scroll\", measure, true);\n        };\n    }, [open, measure]);\n\n    useEffect(() => {\n        if (open) card.current?.focus();\n    }, [open, current]);\n\n    if (!open || !step) return null;\n\n    const last = current === steps.length - 1;\n\n    const finish = (): void => {\n        onFinish?.();\n        onClose();\n    };\n\n    /**\n     * Arrow keys walk the tour and `Esc` leaves it.\n     *\n     * `Esc` is handled here rather than on `window` so a tour opened over a modal\n     * does not close both: the innermost handler that sees the key wins, and the\n     * card has focus.\n     */\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        if (event.key === \"Escape\") {\n            event.stopPropagation();\n            onClose();\n            return;\n        }\n        if (event.key === \"ArrowRight\" && !last) {\n            event.preventDefault();\n            goTo(current + 1);\n        }\n        if (event.key === \"ArrowLeft\" && current > 0) {\n            event.preventDefault();\n            goTo(current - 1);\n        }\n    };\n\n    return (\n        <div className={styles.root} data-placement={position.placement}>\n            {backdropRects(target, viewport, spotlightPadding).map((rect, i) => (\n                <div\n                    key={i}\n                    className={styles.backdrop}\n                    style={{\n                        top: rect.top,\n                        left: rect.left,\n                        width: rect.width,\n                        height: rect.height,\n                    }}\n                    onClick={onClose}\n                />\n            ))}\n\n            {target && (\n                <div\n                    className={styles.spotlight}\n                    style={{\n                        top: target.top - spotlightPadding,\n                        left: target.left - spotlightPadding,\n                        width: target.width + spotlightPadding * 2,\n                        height: target.height + spotlightPadding * 2,\n                    }}\n                />\n            )}\n\n            <div\n                ref={card}\n                className={cn(styles.card, className)}\n                style={{ top: position.top, left: position.left }}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={step.title ? titleId : undefined}\n                aria-describedby={bodyId}\n                tabIndex={-1}\n                onKeyDown={handleKeyDown}\n            >\n                <div className={styles.header}>\n                    <span className={styles.progress}>\n                        {strings.progress(current + 1, steps.length)}\n                    </span>\n                    <button\n                        type=\"button\"\n                        className={styles.close}\n                        aria-label={strings.close}\n                        onClick={onClose}\n                    >\n                        ×\n                    </button>\n                </div>\n\n                {step.title && (\n                    <h2 className={styles.title} id={titleId}>\n                        {step.title}\n                    </h2>\n                )}\n                <div className={styles.body} id={bodyId}>\n                    {step.body}\n                </div>\n\n                <div className={styles.footer}>\n                    {!last && (\n                        <button type=\"button\" className={styles.skip} onClick={onClose}>\n                            {strings.skip}\n                        </button>\n                    )}\n                    <div className={styles.actions}>\n                        {current > 0 && (\n                            <button\n                                type=\"button\"\n                                className={styles.secondary}\n                                onClick={() => goTo(current - 1)}\n                            >\n                                {strings.back}\n                            </button>\n                        )}\n                        <button\n                            type=\"button\"\n                            className={styles.primary}\n                            onClick={() => (last ? finish() : goTo(current + 1))}\n                        >\n                            {last ? strings.finish : strings.next}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Tour.js","names":["styles","Tour_module_default","PT_BR","current","total","EN","Tour","strings","locale","internal","setInternal","useState","index","steps","step","card","useRef","target","setTarget","position","setPosition","viewport","setViewport","titleId","useId","bodyId","open","goTo","useCallback","next","onIndexChange","measure","rect","size","view","placeCard","useLayoutEffect","frame","useEffect","last","finish","onFinish","onClose","backdropRects","spotlightPadding","i","cn","className","event"],"sources":["../../../src/components/Tour/Tour.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — a product tour is a\n * controlled sequence (steps, index, onIndexChange, open, onClose, onFinish) drawn\n * over someone else's DOM (spotlightPadding, locale, className). The body measures\n * the target element, positions the spotlight and the card against it, and re-\n * measures on scroll and resize — one geometry, three triggers.\n */\nimport {\n    useCallback,\n    useEffect,\n    useId,\n    useLayoutEffect,\n    useRef,\n    useState,\n    type KeyboardEvent,\n    type ReactNode,\n} from \"react\";\n\nimport { useFocusTrap } from \"@/hooks/use-focus-trap\";\nimport { cn } from \"@/utils/cn\";\n\nimport { backdropRects, placeCard, type TourPlacement, type TourRect } from \"./tour-position\";\nimport styles from \"./Tour.module.css\";\n\n/** One stop of the tour. */\nexport interface TourStep {\n    /**\n     * CSS selector of the element to point at.\n     *\n     * A selector rather than a ref, so a tour can be declared as data — in a config\n     * file, from the backend, next to the copy — without every screen having to\n     * thread refs up to whoever renders the tour.\n     */\n    target?: string;\n    /** Heading of the card. */\n    title?: ReactNode;\n    /** The explanation. */\n    body: ReactNode;\n    /** Preferred side. Default `\"bottom\"`, flipped when it does not fit. */\n    placement?: TourPlacement;\n}\n\n/** Labels, per locale. */\ninterface TourStrings {\n    next: string;\n    back: string;\n    finish: string;\n    skip: string;\n    close: string;\n    progress: (current: number, total: number) => string;\n}\n\nconst PT_BR: TourStrings = {\n    next: \"Próximo\",\n    back: \"Voltar\",\n    finish: \"Concluir\",\n    skip: \"Pular\",\n    close: \"Fechar tour\",\n    progress: (current, total) => `Passo ${current} de ${total}`,\n};\n\nconst EN: TourStrings = {\n    next: \"Next\",\n    back: \"Back\",\n    finish: \"Done\",\n    skip: \"Skip\",\n    close: \"Close tour\",\n    progress: (current, total) => `Step ${current} of ${total}`,\n};\n\nexport interface TourProps {\n    /** The stops, in order. */\n    steps: readonly TourStep[];\n    /** Whether the tour is showing. Controlled. */\n    open: boolean;\n    /** Closed by `Esc`, by the close button or by \"skip\". */\n    onClose: () => void;\n    /** Called after the last step is confirmed. `onClose` follows it. */\n    onFinish?: () => void;\n    /** Current step index, when the app wants to drive it. */\n    index?: number;\n    /** Step changed — required only when `index` is given. */\n    onIndexChange?: (index: number) => void;\n    /** Locale for the labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Space kept clear around the highlighted element, in px. Default 4. */\n    spotlightPadding?: number;\n    /** Extra class on the card. */\n    className?: string;\n}\n\n/**\n * A guided tour: dim the page, highlight one element at a time, explain it.\n *\n * The highlighted element stays **clickable** while everything else is blocked,\n * because the useful kind of coachmark says \"press this\" and lets you press it. That\n * is why the backdrop is four rectangles around the target rather than one overlay\n * with a `box-shadow` hole — a shadow is not hit-testable, so a hole made that way\n * would not block anything.\n *\n * Whether a user has seen the tour is the app's business: this component takes\n * `open` and emits `onClose`/`onFinish`. Persisting a flag in `localStorage` is one\n * line in the app and a wrong default here.\n *\n * @example\n * const [open, setOpen] = useState(!storage.get(\"tour-v1\"));\n *\n * <Tour\n *     open={open}\n *     steps={[\n *         { target: \"#novo-pedido\", title: \"Comece aqui\", body: \"Todo pedido nasce deste botão.\" },\n *         { target: \"[data-tour='filtros']\", body: \"E filtre por período aqui.\" },\n *     ]}\n *     onClose={() => setOpen(false)}\n *     onFinish={() => storage.set(\"tour-v1\", true)}\n * />\n */\nexport function Tour({\n    steps,\n    open,\n    onClose,\n    onFinish,\n    index,\n    onIndexChange,\n    locale = \"pt-BR\",\n    spotlightPadding = 4,\n    className,\n}: TourProps) {\n    const strings = locale === \"en\" ? EN : PT_BR;\n    const [internal, setInternal] = useState(0);\n    const current = Math.min(index ?? internal, Math.max(0, steps.length - 1));\n    const step = steps[current];\n\n    const card = useRef<HTMLDivElement | null>(null);\n    const [target, setTarget] = useState<TourRect | null>(null);\n    const [position, setPosition] = useState<{\n        placement: TourPlacement;\n        top: number;\n        left: number;\n    }>({ placement: \"center\", top: 0, left: 0 });\n    const [viewport, setViewport] = useState({ width: 0, height: 0 });\n    const titleId = useId();\n    const bodyId = useId();\n\n    useFocusTrap(card, open);\n\n    const goTo = useCallback(\n        (next: number) => {\n            if (index === undefined) setInternal(next);\n            onIndexChange?.(next);\n        },\n        [index, onIndexChange],\n    );\n\n    /** Reset to the first step whenever the tour opens again. */\n    useEffect(() => {\n        if (open && index === undefined) setInternal(0);\n    }, [open, index]);\n\n    /**\n     * Find the step's element, bring it into view, and measure everything.\n     *\n     * The scroll happens before measuring, and the measurement is deferred to the\n     * next frame: reading a rect in the same tick as `scrollIntoView` gives the\n     * position the element had *before* the scroll, which lands the card over the\n     * wrong part of the page.\n     */\n    const measure = useCallback(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        const rect = element?.getBoundingClientRect() ?? null;\n        setTarget(\n            rect\n                ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                : null,\n        );\n\n        const size = {\n            width: card.current?.offsetWidth ?? 320,\n            height: card.current?.offsetHeight ?? 160,\n        };\n        const view = { width: window.innerWidth, height: window.innerHeight };\n        setViewport(view);\n        setPosition(\n            placeCard({\n                target: rect\n                    ? { top: rect.top, left: rect.left, width: rect.width, height: rect.height }\n                    : null,\n                card: size,\n                viewport: view,\n                preferred: step.placement,\n            }),\n        );\n    }, [open, step]);\n\n    useLayoutEffect(() => {\n        if (!open || !step) return;\n        const element = step.target ? document.querySelector<HTMLElement>(step.target) : null;\n        element?.scrollIntoView({ block: \"center\", inline: \"nearest\", behavior: \"smooth\" });\n        const frame = requestAnimationFrame(measure);\n        return () => cancelAnimationFrame(frame);\n    }, [open, step, measure]);\n\n    useEffect(() => {\n        if (!open) return;\n        window.addEventListener(\"resize\", measure);\n        window.addEventListener(\"scroll\", measure, true);\n        return () => {\n            window.removeEventListener(\"resize\", measure);\n            window.removeEventListener(\"scroll\", measure, true);\n        };\n    }, [open, measure]);\n\n    useEffect(() => {\n        if (open) card.current?.focus();\n    }, [open, current]);\n\n    if (!open || !step) return null;\n\n    const last = current === steps.length - 1;\n\n    const finish = (): void => {\n        onFinish?.();\n        onClose();\n    };\n\n    /**\n     * Arrow keys walk the tour and `Esc` leaves it.\n     *\n     * `Esc` is handled here rather than on `window` so a tour opened over a modal\n     * does not close both: the innermost handler that sees the key wins, and the\n     * card has focus.\n     */\n    const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>): void => {\n        if (event.key === \"Escape\") {\n            event.stopPropagation();\n            onClose();\n            return;\n        }\n        if (event.key === \"ArrowRight\" && !last) {\n            event.preventDefault();\n            goTo(current + 1);\n        }\n        if (event.key === \"ArrowLeft\" && current > 0) {\n            event.preventDefault();\n            goTo(current - 1);\n        }\n    };\n\n    return (\n        <div className={styles.root} data-placement={position.placement}>\n            {backdropRects(target, viewport, spotlightPadding).map((rect, i) => (\n                <div\n                    key={i}\n                    className={styles.backdrop}\n                    style={{\n                        top: rect.top,\n                        left: rect.left,\n                        width: rect.width,\n                        height: rect.height,\n                    }}\n                    onClick={onClose}\n                />\n            ))}\n\n            {target && (\n                <div\n                    className={styles.spotlight}\n                    style={{\n                        top: target.top - spotlightPadding,\n                        left: target.left - spotlightPadding,\n                        width: target.width + spotlightPadding * 2,\n                        height: target.height + spotlightPadding * 2,\n                    }}\n                />\n            )}\n\n            <div\n                ref={card}\n                className={cn(styles.card, className)}\n                style={{ top: position.top, left: position.left }}\n                role=\"dialog\"\n                aria-modal=\"true\"\n                aria-labelledby={step.title ? titleId : undefined}\n                aria-describedby={bodyId}\n                tabIndex={-1}\n                onKeyDown={handleKeyDown}\n            >\n                <div className={styles.header}>\n                    <span className={styles.progress}>\n                        {strings.progress(current + 1, steps.length)}\n                    </span>\n                    <button\n                        type=\"button\"\n                        className={styles.close}\n                        aria-label={strings.close}\n                        onClick={onClose}\n                    >\n                        ×\n                    </button>\n                </div>\n\n                {step.title && (\n                    <h2 className={styles.title} id={titleId}>\n                        {step.title}\n                    </h2>\n                )}\n                <div className={styles.body} id={bodyId}>\n                    {step.body}\n                </div>\n\n                <div className={styles.footer}>\n                    {!last && (\n                        <button type=\"button\" className={styles.skip} onClick={onClose}>\n                            {strings.skip}\n                        </button>\n                    )}\n                    <div className={styles.actions}>\n                        {current > 0 && (\n                            <button\n                                type=\"button\"\n                                className={styles.secondary}\n                                onClick={() => goTo(current - 1)}\n                            >\n                                {strings.back}\n                            </button>\n                        )}\n                        <button\n                            type=\"button\"\n                            className={styles.primary}\n                            onClick={() => (last ? finish() : goTo(current + 1))}\n                        >\n                            {last ? strings.finish : strings.next}\n                        </button>\n                    </div>\n                </div>\n            </div>\n        </div>\n    );\n}\n"],"mappings":"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"}