tempest-react-sdk 0.38.3 → 0.39.1

package/dist/components/Transfer/Transfer.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"Transfer.cjs","names":[],"sources":["../../../src/components/Transfer/Transfer.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — two lists that hand\n * items to each other: items and value are the model, onChange the move,\n * sourceTitle/targetTitle/renderItem/locale/height the presentation, and\n * searchable/disabled the behaviour. The body keeps both selections and the filter\n * query, and every move reads all three.\n */\nimport { useId, useMemo, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { Checkbox } from \"../Checkbox\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport {\n    applyMove,\n    filterItems,\n    movableIds,\n    splitSides,\n    transferStrings,\n    type TransferItem,\n    type TransferSide,\n} from \"./transfer-state\";\nimport styles from \"./Transfer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onChange\" | \"defaultValue\";\n\nexport interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The whole catalogue. Both panes are derived from it. */\n    items: readonly TransferItem[];\n    /** Ids on the target side. Controlled. */\n    value: readonly string[];\n    /** Next value, always in catalogue order. */\n    onChange: (value: string[]) => void;\n    /** Heading of the left pane. Default `\"Disponíveis\"`. */\n    sourceTitle?: ReactNode;\n    /** Heading of the right pane. Default `\"Selecionados\"`. */\n    targetTitle?: ReactNode;\n    /** Show a search box above each pane. Default `true` past 8 items. */\n    searchable?: boolean;\n    /** Custom row body. Gets the item and which side it is on. */\n    renderItem?: (item: TransferItem, side: TransferSide) => ReactNode;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Height of each pane's scroll area, any CSS length. Default `\"16rem\"`. */\n    height?: string;\n    /** Block every move. */\n    disabled?: boolean;\n}\n\n/**\n * Two panes and a set of move controls: pick a subset out of a catalogue.\n *\n * Controlled on **ids of the target side only**. The panes are derived on every\n * render, never stored, because two stored lists drift the moment the catalogue\n * changes under them — a permission removed upstream lingers in whichever pane\n * held it, and an id in both panes is a bug nobody can see.\n *\n * @example\n * const [roles, setRoles] = useState<string[]>([]);\n *\n * <Transfer\n *     items={allRoles}\n *     value={roles}\n *     onChange={setRoles}\n *     sourceTitle=\"Papéis disponíveis\"\n *     targetTitle=\"Papéis do usuário\"\n * />\n */\nexport function Transfer({\n    items,\n    value,\n    onChange,\n    sourceTitle,\n    targetTitle,\n    searchable,\n    renderItem,\n    locale = \"pt-BR\",\n    height = \"16rem\",\n    disabled = false,\n    className,\n    ...rest\n}: TransferProps) {\n    const strings = transferStrings(locale);\n    const baseId = useId();\n    const [checked, setChecked] = useState<Set<string>>(new Set());\n    const [queries, setQueries] = useState<{ source: string; target: string }>({\n        source: \"\",\n        target: \"\",\n    });\n    const [announcement, setAnnouncement] = useState(\"\");\n\n    const { source, target } = useMemo(() => splitSides(items, value), [items, value]);\n    const withSearch = searchable ?? items.length > 8;\n\n    /**\n     * What each pane is showing right now — the filter included.\n     *\n     * Every control acts on this, not on the pane's full contents: filtering to\n     * \"sao\" and pressing \"move all\" has to move what you are looking at. Moving\n     * rows the filter hid is the kind of surprise that makes people stop trusting\n     * the bulk button.\n     */\n    const visible: Record<TransferSide, TransferItem[]> = {\n        source: withSearch ? filterItems(source, queries.source) : [...source],\n        target: withSearch ? filterItems(target, queries.target) : [...target],\n    };\n\n    const panes: Array<{ side: TransferSide; title: ReactNode; items: TransferItem[] }> = [\n        { side: \"source\", title: sourceTitle ?? strings.sourceTitle, items: source },\n        { side: \"target\", title: targetTitle ?? strings.targetTitle, items: target },\n    ];\n\n    /**\n     * Move ids and drop them from the checked set.\n     *\n     * Clearing the checks is the point: after a move the rows are on the other\n     * side, and leaving them checked means the next click on the opposite button\n     * sends them straight back — which reads as the component undoing itself.\n     */\n    const move = (moving: readonly string[], to: TransferSide): void => {\n        if (disabled || moving.length === 0) return;\n        const next = applyMove({ value, moving, to, items });\n        const changed = to === \"target\" ? next.length - value.length : value.length - next.length;\n        onChange(next);\n        setChecked((current) => {\n            const remaining = new Set(current);\n            for (const id of moving) remaining.delete(id);\n            return remaining;\n        });\n        if (changed > 0) {\n            const sideName = to === \"target\" ? strings.targetTitle : strings.sourceTitle;\n            setAnnouncement(strings.moved(changed, String(sideName).toLowerCase()));\n        }\n    };\n\n    const toggle = (id: string): void => {\n        setChecked((current) => {\n            const next = new Set(current);\n            if (next.has(id)) next.delete(id);\n            else next.add(id);\n            return next;\n        });\n    };\n\n    /** Ids checked **and visible** on one side — what the move buttons act on. */\n    const checkedOn = (side: TransferSide): string[] =>\n        movableIds(visible[side]).filter((id) => checked.has(id));\n\n    const checkedSource = checkedOn(\"source\");\n    const checkedTarget = checkedOn(\"target\");\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {panes.map((pane) => {\n                const shown = visible[pane.side];\n                const movable = movableIds(shown);\n                const checkedHere = movable.filter((id) => checked.has(id));\n                const allChecked = movable.length > 0 && checkedHere.length === movable.length;\n                const titleId = `${baseId}-${pane.side}-title`;\n\n                return (\n                    <section key={pane.side} className={styles.pane} aria-labelledby={titleId}>\n                        <div className={styles.paneHeader}>\n                            <div className={styles.paneTitle}>\n                                <Checkbox\n                                    checked={allChecked}\n                                    indeterminate={checkedHere.length > 0 && !allChecked}\n                                    disabled={disabled || movable.length === 0}\n                                    aria-label={\n                                        typeof pane.title === \"string\"\n                                            ? pane.title\n                                            : String(pane.side)\n                                    }\n                                    onChange={() =>\n                                        setChecked((current) => {\n                                            const next = new Set(current);\n                                            for (const id of movable) {\n                                                if (allChecked) next.delete(id);\n                                                else next.add(id);\n                                            }\n                                            return next;\n                                        })\n                                    }\n                                />\n                                <h3 className={styles.title} id={titleId}>\n                                    {pane.title}\n                                </h3>\n                            </div>\n                            <span className={styles.count}>\n                                {strings.selected(checkedHere.length, pane.items.length)}\n                            </span>\n                        </div>\n\n                        {withSearch && (\n                            <input\n                                type=\"search\"\n                                className={styles.search}\n                                value={queries[pane.side]}\n                                placeholder={strings.search}\n                                aria-label={`${strings.search}: ${\n                                    typeof pane.title === \"string\" ? pane.title : pane.side\n                                }`}\n                                onChange={(event) =>\n                                    setQueries((current) => ({\n                                        ...current,\n                                        [pane.side]: event.target.value,\n                                    }))\n                                }\n                            />\n                        )}\n\n                        <ul className={styles.list} style={{ height }}>\n                            {shown.length === 0 ? (\n                                <li className={styles.empty}>\n                                    {queries[pane.side] ? strings.noMatches : strings.empty}\n                                </li>\n                            ) : (\n                                shown.map((item) => (\n                                    <li key={item.id} className={styles.row}>\n                                        <Checkbox\n                                            checked={checked.has(item.id)}\n                                            disabled={disabled || item.disabled}\n                                            label={\n                                                renderItem\n                                                    ? renderItem(item, pane.side)\n                                                    : item.label\n                                            }\n                                            onChange={() => toggle(item.id)}\n                                            onDoubleClick={() =>\n                                                move(\n                                                    [item.id],\n                                                    pane.side === \"source\" ? \"target\" : \"source\",\n                                                )\n                                            }\n                                        />\n                                    </li>\n                                ))\n                            )}\n                        </ul>\n                    </section>\n                );\n            })}\n\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.source).length === 0}\n                    aria-label={strings.allToTarget}\n                    title={strings.allToTarget}\n                    onClick={() => move(movableIds(visible.source), \"target\")}\n                >\n                    »\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedSource.length === 0}\n                    aria-label={strings.toTarget}\n                    title={strings.toTarget}\n                    onClick={() => move(checkedSource, \"target\")}\n                >\n                    ›\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedTarget.length === 0}\n                    aria-label={strings.toSource}\n                    title={strings.toSource}\n                    onClick={() => move(checkedTarget, \"source\")}\n                >\n                    ‹\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.target).length === 0}\n                    aria-label={strings.allToSource}\n                    title={strings.allToSource}\n                    onClick={() => move(movableIds(visible.target), \"source\")}\n                >\n                    «\n                </button>\n            </div>\n\n            <VisuallyHidden aria-live=\"polite\" role=\"status\">\n                {announcement}\n            </VisuallyHidden>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Transfer.cjs","names":[],"sources":["../../../src/components/Transfer/Transfer.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — two lists that hand\n * items to each other: items and value are the model, onChange the move,\n * sourceTitle/targetTitle/renderItem/locale/height the presentation, and\n * searchable/disabled the behaviour. The body keeps both selections and the filter\n * query, and every move reads all three.\n */\nimport { useId, useMemo, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { Checkbox } from \"../Checkbox\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport {\n    applyMove,\n    filterItems,\n    movableIds,\n    splitSides,\n    transferStrings,\n    type TransferItem,\n    type TransferSide,\n} from \"./transfer-state\";\nimport styles from \"./Transfer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onChange\" | \"defaultValue\";\n\nexport interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The whole catalogue. Both panes are derived from it. */\n    items: readonly TransferItem[];\n    /** Ids on the target side. Controlled. */\n    value: readonly string[];\n    /** Next value, always in catalogue order. */\n    onChange: (value: string[]) => void;\n    /** Heading of the left pane. Default `\"Disponíveis\"`. */\n    sourceTitle?: ReactNode;\n    /** Heading of the right pane. Default `\"Selecionados\"`. */\n    targetTitle?: ReactNode;\n    /** Show a search box above each pane. Default `true` past 8 items. */\n    searchable?: boolean;\n    /** Custom row body. Gets the item and which side it is on. */\n    renderItem?: (item: TransferItem, side: TransferSide) => ReactNode;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Height of each pane's scroll area, any CSS length. Default `\"16rem\"`. */\n    height?: string;\n    /** Block every move. */\n    disabled?: boolean;\n}\n\n/**\n * Two panes and a set of move controls: pick a subset out of a catalogue.\n *\n * Controlled on **ids of the target side only**. The panes are derived on every\n * render, never stored, because two stored lists drift the moment the catalogue\n * changes under them — a permission removed upstream lingers in whichever pane\n * held it, and an id in both panes is a bug nobody can see.\n *\n * @example\n * const [roles, setRoles] = useState<string[]>([]);\n *\n * <Transfer\n *     items={allRoles}\n *     value={roles}\n *     onChange={setRoles}\n *     sourceTitle=\"Papéis disponíveis\"\n *     targetTitle=\"Papéis do usuário\"\n * />\n */\nexport function Transfer({\n    items,\n    value,\n    onChange,\n    sourceTitle,\n    targetTitle,\n    searchable,\n    renderItem,\n    locale = \"pt-BR\",\n    height = \"16rem\",\n    disabled = false,\n    className,\n    ...rest\n}: TransferProps) {\n    const strings = transferStrings(locale);\n    const baseId = useId();\n    const [checked, setChecked] = useState<Set<string>>(new Set());\n    const [queries, setQueries] = useState<{ source: string; target: string }>({\n        source: \"\",\n        target: \"\",\n    });\n    const [announcement, setAnnouncement] = useState(\"\");\n\n    const { source, target } = useMemo(() => splitSides(items, value), [items, value]);\n    const withSearch = searchable ?? items.length > 8;\n\n    /**\n     * What each pane is showing right now — the filter included.\n     *\n     * Every control acts on this, not on the pane's full contents: filtering to\n     * \"sao\" and pressing \"move all\" has to move what you are looking at. Moving\n     * rows the filter hid is the kind of surprise that makes people stop trusting\n     * the bulk button.\n     */\n    const visible: Record<TransferSide, TransferItem[]> = {\n        source: withSearch ? filterItems(source, queries.source) : [...source],\n        target: withSearch ? filterItems(target, queries.target) : [...target],\n    };\n\n    const panes: Array<{ side: TransferSide; title: ReactNode; items: TransferItem[] }> = [\n        { side: \"source\", title: sourceTitle ?? strings.sourceTitle, items: source },\n        { side: \"target\", title: targetTitle ?? strings.targetTitle, items: target },\n    ];\n\n    /**\n     * Move ids and drop them from the checked set.\n     *\n     * Clearing the checks is the point: after a move the rows are on the other\n     * side, and leaving them checked means the next click on the opposite button\n     * sends them straight back — which reads as the component undoing itself.\n     */\n    const move = (moving: readonly string[], to: TransferSide): void => {\n        if (disabled || moving.length === 0) return;\n        const next = applyMove({ value, moving, to, items });\n        const changed = to === \"target\" ? next.length - value.length : value.length - next.length;\n        onChange(next);\n        setChecked((current) => {\n            const remaining = new Set(current);\n            for (const id of moving) remaining.delete(id);\n            return remaining;\n        });\n        if (changed > 0) {\n            const sideName = to === \"target\" ? strings.targetTitle : strings.sourceTitle;\n            setAnnouncement(strings.moved(changed, String(sideName).toLowerCase()));\n        }\n    };\n\n    const toggle = (id: string): void => {\n        setChecked((current) => {\n            const next = new Set(current);\n            if (next.has(id)) next.delete(id);\n            else next.add(id);\n            return next;\n        });\n    };\n\n    /** Ids checked **and visible** on one side — what the move buttons act on. */\n    const checkedOn = (side: TransferSide): string[] =>\n        movableIds(visible[side]).filter((id) => checked.has(id));\n\n    const checkedSource = checkedOn(\"source\");\n    const checkedTarget = checkedOn(\"target\");\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {panes.map((pane) => {\n                const shown = visible[pane.side];\n                const movable = movableIds(shown);\n                const checkedHere = movable.filter((id) => checked.has(id));\n                const allChecked = movable.length > 0 && checkedHere.length === movable.length;\n                const titleId = `${baseId}-${pane.side}-title`;\n\n                return (\n                    <section key={pane.side} className={styles.pane} aria-labelledby={titleId}>\n                        <div className={styles.paneHeader}>\n                            <div className={styles.paneTitle}>\n                                <Checkbox\n                                    checked={allChecked}\n                                    indeterminate={checkedHere.length > 0 && !allChecked}\n                                    disabled={disabled || movable.length === 0}\n                                    aria-label={\n                                        typeof pane.title === \"string\"\n                                            ? pane.title\n                                            : String(pane.side)\n                                    }\n                                    onChange={() =>\n                                        setChecked((current) => {\n                                            const next = new Set(current);\n                                            for (const id of movable) {\n                                                if (allChecked) next.delete(id);\n                                                else next.add(id);\n                                            }\n                                            return next;\n                                        })\n                                    }\n                                />\n                                <h3 className={styles.title} id={titleId}>\n                                    {pane.title}\n                                </h3>\n                            </div>\n                            <span className={styles.count}>\n                                {strings.selected(checkedHere.length, pane.items.length)}\n                            </span>\n                        </div>\n\n                        {withSearch && (\n                            <input\n                                type=\"search\"\n                                className={styles.search}\n                                value={queries[pane.side]}\n                                placeholder={strings.search}\n                                aria-label={`${strings.search}: ${\n                                    typeof pane.title === \"string\" ? pane.title : pane.side\n                                }`}\n                                onChange={(event) =>\n                                    setQueries((current) => ({\n                                        ...current,\n                                        [pane.side]: event.target.value,\n                                    }))\n                                }\n                            />\n                        )}\n\n                        <ul className={styles.list} style={{ height }}>\n                            {shown.length === 0 ? (\n                                <li className={styles.empty}>\n                                    {queries[pane.side] ? strings.noMatches : strings.empty}\n                                </li>\n                            ) : (\n                                shown.map((item) => (\n                                    <li key={item.id} className={styles.row}>\n                                        <Checkbox\n                                            checked={checked.has(item.id)}\n                                            disabled={disabled || item.disabled}\n                                            label={\n                                                renderItem\n                                                    ? renderItem(item, pane.side)\n                                                    : item.label\n                                            }\n                                            onChange={() => toggle(item.id)}\n                                            onDoubleClick={() =>\n                                                move(\n                                                    [item.id],\n                                                    pane.side === \"source\" ? \"target\" : \"source\",\n                                                )\n                                            }\n                                        />\n                                    </li>\n                                ))\n                            )}\n                        </ul>\n                    </section>\n                );\n            })}\n\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.source).length === 0}\n                    aria-label={strings.allToTarget}\n                    title={strings.allToTarget}\n                    onClick={() => move(movableIds(visible.source), \"target\")}\n                >\n                    »\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedSource.length === 0}\n                    aria-label={strings.toTarget}\n                    title={strings.toTarget}\n                    onClick={() => move(checkedSource, \"target\")}\n                >\n                    ›\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedTarget.length === 0}\n                    aria-label={strings.toSource}\n                    title={strings.toSource}\n                    onClick={() => move(checkedTarget, \"source\")}\n                >\n                    ‹\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.target).length === 0}\n                    aria-label={strings.allToSource}\n                    title={strings.allToSource}\n                    onClick={() => move(movableIds(visible.target), \"source\")}\n                >\n                    «\n                </button>\n            </div>\n\n            <VisuallyHidden aria-live=\"polite\" role=\"status\">\n                {announcement}\n            </VisuallyHidden>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/Transfer/Transfer.js.map

@@ -1 +1 @@
-{"version":3,"file":"Transfer.js","names":[],"sources":["../../../src/components/Transfer/Transfer.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — two lists that hand\n * items to each other: items and value are the model, onChange the move,\n * sourceTitle/targetTitle/renderItem/locale/height the presentation, and\n * searchable/disabled the behaviour. The body keeps both selections and the filter\n * query, and every move reads all three.\n */\nimport { useId, useMemo, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { Checkbox } from \"../Checkbox\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport {\n    applyMove,\n    filterItems,\n    movableIds,\n    splitSides,\n    transferStrings,\n    type TransferItem,\n    type TransferSide,\n} from \"./transfer-state\";\nimport styles from \"./Transfer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onChange\" | \"defaultValue\";\n\nexport interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The whole catalogue. Both panes are derived from it. */\n    items: readonly TransferItem[];\n    /** Ids on the target side. Controlled. */\n    value: readonly string[];\n    /** Next value, always in catalogue order. */\n    onChange: (value: string[]) => void;\n    /** Heading of the left pane. Default `\"Disponíveis\"`. */\n    sourceTitle?: ReactNode;\n    /** Heading of the right pane. Default `\"Selecionados\"`. */\n    targetTitle?: ReactNode;\n    /** Show a search box above each pane. Default `true` past 8 items. */\n    searchable?: boolean;\n    /** Custom row body. Gets the item and which side it is on. */\n    renderItem?: (item: TransferItem, side: TransferSide) => ReactNode;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Height of each pane's scroll area, any CSS length. Default `\"16rem\"`. */\n    height?: string;\n    /** Block every move. */\n    disabled?: boolean;\n}\n\n/**\n * Two panes and a set of move controls: pick a subset out of a catalogue.\n *\n * Controlled on **ids of the target side only**. The panes are derived on every\n * render, never stored, because two stored lists drift the moment the catalogue\n * changes under them — a permission removed upstream lingers in whichever pane\n * held it, and an id in both panes is a bug nobody can see.\n *\n * @example\n * const [roles, setRoles] = useState<string[]>([]);\n *\n * <Transfer\n *     items={allRoles}\n *     value={roles}\n *     onChange={setRoles}\n *     sourceTitle=\"Papéis disponíveis\"\n *     targetTitle=\"Papéis do usuário\"\n * />\n */\nexport function Transfer({\n    items,\n    value,\n    onChange,\n    sourceTitle,\n    targetTitle,\n    searchable,\n    renderItem,\n    locale = \"pt-BR\",\n    height = \"16rem\",\n    disabled = false,\n    className,\n    ...rest\n}: TransferProps) {\n    const strings = transferStrings(locale);\n    const baseId = useId();\n    const [checked, setChecked] = useState<Set<string>>(new Set());\n    const [queries, setQueries] = useState<{ source: string; target: string }>({\n        source: \"\",\n        target: \"\",\n    });\n    const [announcement, setAnnouncement] = useState(\"\");\n\n    const { source, target } = useMemo(() => splitSides(items, value), [items, value]);\n    const withSearch = searchable ?? items.length > 8;\n\n    /**\n     * What each pane is showing right now — the filter included.\n     *\n     * Every control acts on this, not on the pane's full contents: filtering to\n     * \"sao\" and pressing \"move all\" has to move what you are looking at. Moving\n     * rows the filter hid is the kind of surprise that makes people stop trusting\n     * the bulk button.\n     */\n    const visible: Record<TransferSide, TransferItem[]> = {\n        source: withSearch ? filterItems(source, queries.source) : [...source],\n        target: withSearch ? filterItems(target, queries.target) : [...target],\n    };\n\n    const panes: Array<{ side: TransferSide; title: ReactNode; items: TransferItem[] }> = [\n        { side: \"source\", title: sourceTitle ?? strings.sourceTitle, items: source },\n        { side: \"target\", title: targetTitle ?? strings.targetTitle, items: target },\n    ];\n\n    /**\n     * Move ids and drop them from the checked set.\n     *\n     * Clearing the checks is the point: after a move the rows are on the other\n     * side, and leaving them checked means the next click on the opposite button\n     * sends them straight back — which reads as the component undoing itself.\n     */\n    const move = (moving: readonly string[], to: TransferSide): void => {\n        if (disabled || moving.length === 0) return;\n        const next = applyMove({ value, moving, to, items });\n        const changed = to === \"target\" ? next.length - value.length : value.length - next.length;\n        onChange(next);\n        setChecked((current) => {\n            const remaining = new Set(current);\n            for (const id of moving) remaining.delete(id);\n            return remaining;\n        });\n        if (changed > 0) {\n            const sideName = to === \"target\" ? strings.targetTitle : strings.sourceTitle;\n            setAnnouncement(strings.moved(changed, String(sideName).toLowerCase()));\n        }\n    };\n\n    const toggle = (id: string): void => {\n        setChecked((current) => {\n            const next = new Set(current);\n            if (next.has(id)) next.delete(id);\n            else next.add(id);\n            return next;\n        });\n    };\n\n    /** Ids checked **and visible** on one side — what the move buttons act on. */\n    const checkedOn = (side: TransferSide): string[] =>\n        movableIds(visible[side]).filter((id) => checked.has(id));\n\n    const checkedSource = checkedOn(\"source\");\n    const checkedTarget = checkedOn(\"target\");\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {panes.map((pane) => {\n                const shown = visible[pane.side];\n                const movable = movableIds(shown);\n                const checkedHere = movable.filter((id) => checked.has(id));\n                const allChecked = movable.length > 0 && checkedHere.length === movable.length;\n                const titleId = `${baseId}-${pane.side}-title`;\n\n                return (\n                    <section key={pane.side} className={styles.pane} aria-labelledby={titleId}>\n                        <div className={styles.paneHeader}>\n                            <div className={styles.paneTitle}>\n                                <Checkbox\n                                    checked={allChecked}\n                                    indeterminate={checkedHere.length > 0 && !allChecked}\n                                    disabled={disabled || movable.length === 0}\n                                    aria-label={\n                                        typeof pane.title === \"string\"\n                                            ? pane.title\n                                            : String(pane.side)\n                                    }\n                                    onChange={() =>\n                                        setChecked((current) => {\n                                            const next = new Set(current);\n                                            for (const id of movable) {\n                                                if (allChecked) next.delete(id);\n                                                else next.add(id);\n                                            }\n                                            return next;\n                                        })\n                                    }\n                                />\n                                <h3 className={styles.title} id={titleId}>\n                                    {pane.title}\n                                </h3>\n                            </div>\n                            <span className={styles.count}>\n                                {strings.selected(checkedHere.length, pane.items.length)}\n                            </span>\n                        </div>\n\n                        {withSearch && (\n                            <input\n                                type=\"search\"\n                                className={styles.search}\n                                value={queries[pane.side]}\n                                placeholder={strings.search}\n                                aria-label={`${strings.search}: ${\n                                    typeof pane.title === \"string\" ? pane.title : pane.side\n                                }`}\n                                onChange={(event) =>\n                                    setQueries((current) => ({\n                                        ...current,\n                                        [pane.side]: event.target.value,\n                                    }))\n                                }\n                            />\n                        )}\n\n                        <ul className={styles.list} style={{ height }}>\n                            {shown.length === 0 ? (\n                                <li className={styles.empty}>\n                                    {queries[pane.side] ? strings.noMatches : strings.empty}\n                                </li>\n                            ) : (\n                                shown.map((item) => (\n                                    <li key={item.id} className={styles.row}>\n                                        <Checkbox\n                                            checked={checked.has(item.id)}\n                                            disabled={disabled || item.disabled}\n                                            label={\n                                                renderItem\n                                                    ? renderItem(item, pane.side)\n                                                    : item.label\n                                            }\n                                            onChange={() => toggle(item.id)}\n                                            onDoubleClick={() =>\n                                                move(\n                                                    [item.id],\n                                                    pane.side === \"source\" ? \"target\" : \"source\",\n                                                )\n                                            }\n                                        />\n                                    </li>\n                                ))\n                            )}\n                        </ul>\n                    </section>\n                );\n            })}\n\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.source).length === 0}\n                    aria-label={strings.allToTarget}\n                    title={strings.allToTarget}\n                    onClick={() => move(movableIds(visible.source), \"target\")}\n                >\n                    »\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedSource.length === 0}\n                    aria-label={strings.toTarget}\n                    title={strings.toTarget}\n                    onClick={() => move(checkedSource, \"target\")}\n                >\n                    ›\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedTarget.length === 0}\n                    aria-label={strings.toSource}\n                    title={strings.toSource}\n                    onClick={() => move(checkedTarget, \"source\")}\n                >\n                    ‹\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.target).length === 0}\n                    aria-label={strings.allToSource}\n                    title={strings.allToSource}\n                    onClick={() => move(movableIds(visible.target), \"source\")}\n                >\n                    «\n                </button>\n            </div>\n\n            <VisuallyHidden aria-live=\"polite\" role=\"status\">\n                {announcement}\n            </VisuallyHidden>\n        </div>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"Transfer.js","names":[],"sources":["../../../src/components/Transfer/Transfer.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — two lists that hand\n * items to each other: items and value are the model, onChange the move,\n * sourceTitle/targetTitle/renderItem/locale/height the presentation, and\n * searchable/disabled the behaviour. The body keeps both selections and the filter\n * query, and every move reads all three.\n */\nimport { useId, useMemo, useState, type HTMLAttributes, type ReactNode } from \"react\";\n\nimport { cn } from \"@/utils/cn\";\n\nimport { Checkbox } from \"../Checkbox\";\nimport { VisuallyHidden } from \"../VisuallyHidden\";\nimport {\n    applyMove,\n    filterItems,\n    movableIds,\n    splitSides,\n    transferStrings,\n    type TransferItem,\n    type TransferSide,\n} from \"./transfer-state\";\nimport styles from \"./Transfer.module.css\";\n\n/** DOM attributes this component redefines. */\ntype OverriddenDomProps = \"children\" | \"onChange\" | \"defaultValue\";\n\nexport interface TransferProps extends Omit<HTMLAttributes<HTMLDivElement>, OverriddenDomProps> {\n    /** The whole catalogue. Both panes are derived from it. */\n    items: readonly TransferItem[];\n    /** Ids on the target side. Controlled. */\n    value: readonly string[];\n    /** Next value, always in catalogue order. */\n    onChange: (value: string[]) => void;\n    /** Heading of the left pane. Default `\"Disponíveis\"`. */\n    sourceTitle?: ReactNode;\n    /** Heading of the right pane. Default `\"Selecionados\"`. */\n    targetTitle?: ReactNode;\n    /** Show a search box above each pane. Default `true` past 8 items. */\n    searchable?: boolean;\n    /** Custom row body. Gets the item and which side it is on. */\n    renderItem?: (item: TransferItem, side: TransferSide) => ReactNode;\n    /** Locale for labels. Default `\"pt-BR\"`. */\n    locale?: \"pt-BR\" | \"en\";\n    /** Height of each pane's scroll area, any CSS length. Default `\"16rem\"`. */\n    height?: string;\n    /** Block every move. */\n    disabled?: boolean;\n}\n\n/**\n * Two panes and a set of move controls: pick a subset out of a catalogue.\n *\n * Controlled on **ids of the target side only**. The panes are derived on every\n * render, never stored, because two stored lists drift the moment the catalogue\n * changes under them — a permission removed upstream lingers in whichever pane\n * held it, and an id in both panes is a bug nobody can see.\n *\n * @example\n * const [roles, setRoles] = useState<string[]>([]);\n *\n * <Transfer\n *     items={allRoles}\n *     value={roles}\n *     onChange={setRoles}\n *     sourceTitle=\"Papéis disponíveis\"\n *     targetTitle=\"Papéis do usuário\"\n * />\n */\nexport function Transfer({\n    items,\n    value,\n    onChange,\n    sourceTitle,\n    targetTitle,\n    searchable,\n    renderItem,\n    locale = \"pt-BR\",\n    height = \"16rem\",\n    disabled = false,\n    className,\n    ...rest\n}: TransferProps) {\n    const strings = transferStrings(locale);\n    const baseId = useId();\n    const [checked, setChecked] = useState<Set<string>>(new Set());\n    const [queries, setQueries] = useState<{ source: string; target: string }>({\n        source: \"\",\n        target: \"\",\n    });\n    const [announcement, setAnnouncement] = useState(\"\");\n\n    const { source, target } = useMemo(() => splitSides(items, value), [items, value]);\n    const withSearch = searchable ?? items.length > 8;\n\n    /**\n     * What each pane is showing right now — the filter included.\n     *\n     * Every control acts on this, not on the pane's full contents: filtering to\n     * \"sao\" and pressing \"move all\" has to move what you are looking at. Moving\n     * rows the filter hid is the kind of surprise that makes people stop trusting\n     * the bulk button.\n     */\n    const visible: Record<TransferSide, TransferItem[]> = {\n        source: withSearch ? filterItems(source, queries.source) : [...source],\n        target: withSearch ? filterItems(target, queries.target) : [...target],\n    };\n\n    const panes: Array<{ side: TransferSide; title: ReactNode; items: TransferItem[] }> = [\n        { side: \"source\", title: sourceTitle ?? strings.sourceTitle, items: source },\n        { side: \"target\", title: targetTitle ?? strings.targetTitle, items: target },\n    ];\n\n    /**\n     * Move ids and drop them from the checked set.\n     *\n     * Clearing the checks is the point: after a move the rows are on the other\n     * side, and leaving them checked means the next click on the opposite button\n     * sends them straight back — which reads as the component undoing itself.\n     */\n    const move = (moving: readonly string[], to: TransferSide): void => {\n        if (disabled || moving.length === 0) return;\n        const next = applyMove({ value, moving, to, items });\n        const changed = to === \"target\" ? next.length - value.length : value.length - next.length;\n        onChange(next);\n        setChecked((current) => {\n            const remaining = new Set(current);\n            for (const id of moving) remaining.delete(id);\n            return remaining;\n        });\n        if (changed > 0) {\n            const sideName = to === \"target\" ? strings.targetTitle : strings.sourceTitle;\n            setAnnouncement(strings.moved(changed, String(sideName).toLowerCase()));\n        }\n    };\n\n    const toggle = (id: string): void => {\n        setChecked((current) => {\n            const next = new Set(current);\n            if (next.has(id)) next.delete(id);\n            else next.add(id);\n            return next;\n        });\n    };\n\n    /** Ids checked **and visible** on one side — what the move buttons act on. */\n    const checkedOn = (side: TransferSide): string[] =>\n        movableIds(visible[side]).filter((id) => checked.has(id));\n\n    const checkedSource = checkedOn(\"source\");\n    const checkedTarget = checkedOn(\"target\");\n\n    return (\n        <div className={cn(styles.wrapper, className)} {...rest}>\n            {panes.map((pane) => {\n                const shown = visible[pane.side];\n                const movable = movableIds(shown);\n                const checkedHere = movable.filter((id) => checked.has(id));\n                const allChecked = movable.length > 0 && checkedHere.length === movable.length;\n                const titleId = `${baseId}-${pane.side}-title`;\n\n                return (\n                    <section key={pane.side} className={styles.pane} aria-labelledby={titleId}>\n                        <div className={styles.paneHeader}>\n                            <div className={styles.paneTitle}>\n                                <Checkbox\n                                    checked={allChecked}\n                                    indeterminate={checkedHere.length > 0 && !allChecked}\n                                    disabled={disabled || movable.length === 0}\n                                    aria-label={\n                                        typeof pane.title === \"string\"\n                                            ? pane.title\n                                            : String(pane.side)\n                                    }\n                                    onChange={() =>\n                                        setChecked((current) => {\n                                            const next = new Set(current);\n                                            for (const id of movable) {\n                                                if (allChecked) next.delete(id);\n                                                else next.add(id);\n                                            }\n                                            return next;\n                                        })\n                                    }\n                                />\n                                <h3 className={styles.title} id={titleId}>\n                                    {pane.title}\n                                </h3>\n                            </div>\n                            <span className={styles.count}>\n                                {strings.selected(checkedHere.length, pane.items.length)}\n                            </span>\n                        </div>\n\n                        {withSearch && (\n                            <input\n                                type=\"search\"\n                                className={styles.search}\n                                value={queries[pane.side]}\n                                placeholder={strings.search}\n                                aria-label={`${strings.search}: ${\n                                    typeof pane.title === \"string\" ? pane.title : pane.side\n                                }`}\n                                onChange={(event) =>\n                                    setQueries((current) => ({\n                                        ...current,\n                                        [pane.side]: event.target.value,\n                                    }))\n                                }\n                            />\n                        )}\n\n                        <ul className={styles.list} style={{ height }}>\n                            {shown.length === 0 ? (\n                                <li className={styles.empty}>\n                                    {queries[pane.side] ? strings.noMatches : strings.empty}\n                                </li>\n                            ) : (\n                                shown.map((item) => (\n                                    <li key={item.id} className={styles.row}>\n                                        <Checkbox\n                                            checked={checked.has(item.id)}\n                                            disabled={disabled || item.disabled}\n                                            label={\n                                                renderItem\n                                                    ? renderItem(item, pane.side)\n                                                    : item.label\n                                            }\n                                            onChange={() => toggle(item.id)}\n                                            onDoubleClick={() =>\n                                                move(\n                                                    [item.id],\n                                                    pane.side === \"source\" ? \"target\" : \"source\",\n                                                )\n                                            }\n                                        />\n                                    </li>\n                                ))\n                            )}\n                        </ul>\n                    </section>\n                );\n            })}\n\n            <div className={styles.controls}>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.source).length === 0}\n                    aria-label={strings.allToTarget}\n                    title={strings.allToTarget}\n                    onClick={() => move(movableIds(visible.source), \"target\")}\n                >\n                    »\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedSource.length === 0}\n                    aria-label={strings.toTarget}\n                    title={strings.toTarget}\n                    onClick={() => move(checkedSource, \"target\")}\n                >\n                    ›\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || checkedTarget.length === 0}\n                    aria-label={strings.toSource}\n                    title={strings.toSource}\n                    onClick={() => move(checkedTarget, \"source\")}\n                >\n                    ‹\n                </button>\n                <button\n                    type=\"button\"\n                    className={styles.control}\n                    disabled={disabled || movableIds(visible.target).length === 0}\n                    aria-label={strings.allToSource}\n                    title={strings.allToSource}\n                    onClick={() => move(movableIds(visible.target), \"source\")}\n                >\n                    «\n                </button>\n            </div>\n\n            <VisuallyHidden aria-live=\"polite\" role=\"status\">\n                {announcement}\n            </VisuallyHidden>\n        </div>\n    );\n}\n"],"mappings":"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"}

package/dist/components/TreeView/TreeView.cjs

@@ -1,2 +1,2 @@
-const e=require("../../utils/cn.cjs"),t=require("./TreeView.module.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("lucide-react");function a(e,t,n=0,r=null,i=[]){for(let o of e){let e=Array.isArray(o.children),s=e&&t.has(o.id);i.push({node:o,depth:n,parentId:r,hasChildren:e,expanded:s}),s&&o.children&&a(o.children,t,n+1,o.id,i)}return i}function o({nodes:o,expandedIds:s,defaultExpandedIds:c=[],onExpandedChange:l,selectedId:u,defaultSelectedId:d=null,onSelect:f,toggleOnSelect:p=!0,label:m,className:h}){let g=s!==void 0,[_,v]=(0,n.useState)(c),y=g?s:_,b=u!==void 0,[x,S]=(0,n.useState)(d),C=b?u:x,w=(0,n.useMemo)(()=>new Set(y),[y]),T=(0,n.useMemo)(()=>a(o,w),[o,w]),[E,D]=(0,n.useState)(null),O=(0,n.useRef)(null),k=E??C??T.find(e=>!e.node.disabled)?.node.id??null,A=(0,n.useCallback)(e=>{g||v(e),l?.(e)},[g,l]),j=(0,n.useCallback)(e=>{A(y.includes(e)?y.filter(t=>t!==e):[...y,e])},[y,A]),M=(0,n.useCallback)(e=>{e.node.disabled||(b||S(e.node.id),D(e.node.id),f?.(e.node),e.hasChildren&&p&&j(e.node.id))},[f,b,j,p]),N=(0,n.useCallback)(e=>{D(e),(O.current?.querySelector(`[data-tree-id="${e}"]`))?.focus()},[]),P=(0,n.useCallback)((e,t)=>{for(let n=e+t;n>=0&&n<T.length;n+=t)if(!T[n].node.disabled){N(T[n].node.id);return}},[T,N]),F=(0,n.useCallback)((e,t,n)=>{switch(e.key){case`ArrowDown`:e.preventDefault(),P(n,1);break;case`ArrowUp`:e.preventDefault(),P(n,-1);break;case`ArrowRight`:e.preventDefault(),t.hasChildren&&!t.expanded?j(t.node.id):t.expanded&&P(n,1);break;case`ArrowLeft`:e.preventDefault(),t.expanded?j(t.node.id):t.parentId&&N(t.parentId);break;case`Home`:e.preventDefault(),P(-1,1);break;case`End`:e.preventDefault(),P(T.length,-1);break;case`Enter`:case` `:e.preventDefault(),M(t);break;default:break}},[P,T.length,M,j,N]);return(0,r.jsx)(`ul`,{ref:O,role:`tree`,"aria-label":m,className:e.cn(t.default.tree,h),children:T.map((n,a)=>{let o=C===n.node.id;return(0,r.jsx)(`li`,{role:`treeitem`,"aria-expanded":n.hasChildren?n.expanded:void 0,"aria-selected":o,"aria-level":n.depth+1,"aria-disabled":n.node.disabled||void 0,className:t.default.item,children:(0,r.jsxs)(`div`,{"data-tree-id":n.node.id,className:e.cn(t.default.row,o&&t.default.selected,n.node.disabled&&t.default.disabled),style:{paddingInlineStart:`calc(${n.depth} * var(--tempest-space-5))`},tabIndex:k===n.node.id&&!n.node.disabled?0:-1,onClick:()=>M(n),onFocus:()=>D(n.node.id),onKeyDown:e=>F(e,n,a),children:[n.hasChildren?(0,r.jsx)(`span`,{className:e.cn(t.default.chevron,n.expanded&&t.default.chevronOpen),"aria-hidden":`true`,onClick:e=>{e.stopPropagation(),n.node.disabled||j(n.node.id)},children:(0,r.jsx)(i.ChevronRight,{size:14})}):(0,r.jsx)(`span`,{className:t.default.chevronPlaceholder,"aria-hidden":`true`}),n.node.icon?(0,r.jsx)(`span`,{className:t.default.icon,"aria-hidden":`true`,children:n.node.icon}):null,(0,r.jsx)(`span`,{className:t.default.label,children:n.node.label})]})},n.node.id)})})}exports.TreeView=o;
+const e=require("../../utils/cn.cjs"),t=require("./TreeView.module.cjs");let n=require("react"),r=require("react/jsx-runtime"),i=require("lucide-react");function a(e,t,n=0,r=null,i=[]){for(let o of e){let e=Array.isArray(o.children),s=e&&t.has(o.id);i.push({node:o,depth:n,parentId:r,hasChildren:e,expanded:s}),s&&o.children&&a(o.children,t,n+1,o.id,i)}return i}function o({nodes:o,expandedIds:s,defaultExpandedIds:c=[],onExpandedChange:l,selectedId:u,defaultSelectedId:d=null,onSelect:f,toggleOnSelect:p=!0,label:m,className:h}){let g=s!==void 0,[_,v]=(0,n.useState)(c),y=g?s:_,b=u!==void 0,[x,S]=(0,n.useState)(d),C=b?u:x,w=(0,n.useMemo)(()=>new Set(y),[y]),T=(0,n.useMemo)(()=>a(o,w),[o,w]),[E,D]=(0,n.useState)(null),O=(0,n.useRef)(null),k=E??C??T.find(e=>!e.node.disabled)?.node.id??null,A=(0,n.useCallback)(e=>{g||v(e),l?.(e)},[g,l]),j=(0,n.useCallback)(e=>{A(y.includes(e)?y.filter(t=>t!==e):[...y,e])},[y,A]),M=(0,n.useCallback)(e=>{e.node.disabled||(b||S(e.node.id),D(e.node.id),f?.(e.node),e.hasChildren&&p&&j(e.node.id))},[f,b,j,p]),N=(0,n.useCallback)(e=>{D(e),(O.current?.querySelector(`[data-tree-id="${e}"]`))?.focus()},[]),P=(0,n.useCallback)((e,t)=>{for(let n=e+t;n>=0&&n<T.length;n+=t)if(!T[n].node.disabled){N(T[n].node.id);return}},[T,N]),F=(0,n.useCallback)((e,t,n)=>{switch(e.key){case`ArrowDown`:e.preventDefault(),P(n,1);break;case`ArrowUp`:e.preventDefault(),P(n,-1);break;case`ArrowRight`:e.preventDefault(),t.hasChildren&&!t.expanded?j(t.node.id):t.expanded&&P(n,1);break;case`ArrowLeft`:e.preventDefault(),t.expanded?j(t.node.id):t.parentId&&N(t.parentId);break;case`Home`:e.preventDefault(),P(-1,1);break;case`End`:e.preventDefault(),P(T.length,-1);break;case`Enter`:case` `:e.preventDefault(),M(t)}},[P,T.length,M,j,N]);return(0,r.jsx)(`ul`,{ref:O,role:`tree`,"aria-label":m,className:e.cn(t.default.tree,h),children:T.map((n,a)=>{let o=C===n.node.id;return(0,r.jsx)(`li`,{role:`treeitem`,"aria-expanded":n.hasChildren?n.expanded:void 0,"aria-selected":o,"aria-level":n.depth+1,"aria-disabled":n.node.disabled||void 0,className:t.default.item,children:(0,r.jsxs)(`div`,{"data-tree-id":n.node.id,className:e.cn(t.default.row,o&&t.default.selected,n.node.disabled&&t.default.disabled),style:{paddingInlineStart:`calc(${n.depth} * var(--tempest-space-5))`},tabIndex:k===n.node.id&&!n.node.disabled?0:-1,onClick:()=>M(n),onFocus:()=>D(n.node.id),onKeyDown:e=>F(e,n,a),children:[n.hasChildren?(0,r.jsx)(`span`,{className:e.cn(t.default.chevron,n.expanded&&t.default.chevronOpen),"aria-hidden":`true`,onClick:e=>{e.stopPropagation(),n.node.disabled||j(n.node.id)},children:(0,r.jsx)(i.ChevronRight,{size:14})}):(0,r.jsx)(`span`,{className:t.default.chevronPlaceholder,"aria-hidden":`true`}),n.node.icon?(0,r.jsx)(`span`,{className:t.default.icon,"aria-hidden":`true`,children:n.node.icon}):null,(0,r.jsx)(`span`,{className:t.default.label,children:n.node.label})]})},n.node.id)})})}exports.TreeView=o;
 //# sourceMappingURL=TreeView.cjs.map

package/dist/components/TreeView/TreeView.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.cjs","names":[],"sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — expansion and selection\n * are two independent controlled states, each with its uncontrolled twin\n * (expandedIds/defaultExpandedIds/onExpandedChange, selectedId/\n * defaultSelectedId/onSelect), plus toggleOnSelect for the case where they should\n * move together. The body is the flattened visible list and the roving focus over\n * it.\n */\nimport { ChevronRight } from \"lucide-react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TreeView.module.css\";\n\n/** One node of the tree. Children make it a branch; no children makes it a leaf. */\nexport interface TreeNode {\n    /** Stable identifier, unique across the whole tree. */\n    id: string;\n    /** Rendered label. */\n    label: ReactNode;\n    /** Child nodes. An empty array still renders as a branch (an empty folder). */\n    children?: TreeNode[];\n    /** Icon rendered before the label. */\n    icon?: ReactNode;\n    /** Blocks selection and expansion, and skips the node in keyboard navigation. */\n    disabled?: boolean;\n}\n\nexport interface TreeViewProps {\n    /** Root nodes. */\n    nodes: TreeNode[];\n    /** Controlled expanded ids. */\n    expandedIds?: string[];\n    /** Uncontrolled initial expanded ids. */\n    defaultExpandedIds?: string[];\n    onExpandedChange?: (expandedIds: string[]) => void;\n    /** Controlled selected id. `null` means nothing selected. */\n    selectedId?: string | null;\n    /** Uncontrolled initial selection. */\n    defaultSelectedId?: string | null;\n    onSelect?: (node: TreeNode) => void;\n    /**\n     * Selecting a branch also toggles it. Default `true` — matches how a file\n     * explorer behaves; set `false` when a branch is itself a meaningful choice\n     * (a category that owns items, for instance).\n     */\n    toggleOnSelect?: boolean;\n    /** Accessible name for the tree. */\n    label?: string;\n    className?: string;\n}\n\ninterface FlatNode {\n    node: TreeNode;\n    depth: number;\n    parentId: string | null;\n    hasChildren: boolean;\n    expanded: boolean;\n}\n\n/**\n * Walk the tree into the list of *currently visible* rows.\n *\n * Keyboard navigation works on this flattened view, which is what makes\n * ArrowDown from the last child of a collapsed-sibling branch land on the right\n * row: rows that are not rendered simply are not in the list.\n */\nfunction flatten(\n    nodes: TreeNode[],\n    expandedIds: Set<string>,\n    depth = 0,\n    parentId: string | null = null,\n    out: FlatNode[] = [],\n): FlatNode[] {\n    for (const node of nodes) {\n        const hasChildren = Array.isArray(node.children);\n        const expanded = hasChildren && expandedIds.has(node.id);\n        out.push({ node, depth, parentId, hasChildren, expanded });\n        if (expanded && node.children) {\n            flatten(node.children, expandedIds, depth + 1, node.id, out);\n        }\n    }\n    return out;\n}\n\n/**\n * Accessible tree for hierarchical data — categories, permissions, folders, an\n * org chart.\n *\n * Implements the `tree` role with **roving tabindex**: exactly one row is\n * tabbable, and the arrow keys move focus within the widget. That is what keeps a\n * 500-node tree from adding 500 stops to the page's tab order.\n *\n * Keyboard map: `↓`/`↑` move, `→` expands (or descends), `←` collapses (or goes to\n * the parent), `Home`/`End` jump to the first/last visible row, `Enter`/`Space`\n * select.\n *\n * The chevron is decoration (`aria-hidden`), not a button: the row itself carries\n * `aria-expanded`, so a second focusable control there would only add noise for a\n * screen reader while duplicating an action the keyboard map already has. It still\n * accepts a click, with the event stopped so it toggles without also selecting.\n *\n * @example\n * ```tsx\n * const nodes: TreeNode[] = [\n *   {\n *     id: \"vendas\",\n *     label: \"Vendas\",\n *     children: [\n *       { id: \"vendas.ler\", label: \"Ler\" },\n *       { id: \"vendas.editar\", label: \"Editar\" },\n *     ],\n *   },\n *   { id: \"config\", label: \"Configurações\", children: [] },\n * ];\n *\n * <TreeView nodes={nodes} defaultExpandedIds={[\"vendas\"]} onSelect={(node) => console.log(node.id)} />\n * ```\n */\nexport function TreeView({\n    nodes,\n    expandedIds,\n    defaultExpandedIds = [],\n    onExpandedChange,\n    selectedId,\n    defaultSelectedId = null,\n    onSelect,\n    toggleOnSelect = true,\n    label,\n    className,\n}: TreeViewProps) {\n    const expandedControlled = expandedIds !== undefined;\n    const [internalExpanded, setInternalExpanded] = useState<string[]>(defaultExpandedIds);\n    const expanded = expandedControlled ? expandedIds : internalExpanded;\n\n    const selectionControlled = selectedId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);\n    const selected = selectionControlled ? selectedId : internalSelected;\n\n    const expandedSet = useMemo(() => new Set(expanded), [expanded]);\n    const rows = useMemo(() => flatten(nodes, expandedSet), [nodes, expandedSet]);\n\n    const [focusedId, setFocusedId] = useState<string | null>(null);\n    const containerRef = useRef<HTMLUListElement>(null);\n\n    const activeId =\n        focusedId ?? selected ?? rows.find((row) => !row.node.disabled)?.node.id ?? null;\n\n    const setExpanded = useCallback(\n        (next: string[]): void => {\n            if (!expandedControlled) setInternalExpanded(next);\n            onExpandedChange?.(next);\n        },\n        [expandedControlled, onExpandedChange],\n    );\n\n    const toggle = useCallback(\n        (id: string): void => {\n            setExpanded(\n                expanded.includes(id) ? expanded.filter((x) => x !== id) : [...expanded, id],\n            );\n        },\n        [expanded, setExpanded],\n    );\n\n    const select = useCallback(\n        (row: FlatNode): void => {\n            if (row.node.disabled) return;\n            if (!selectionControlled) setInternalSelected(row.node.id);\n            setFocusedId(row.node.id);\n            onSelect?.(row.node);\n            if (row.hasChildren && toggleOnSelect) toggle(row.node.id);\n        },\n        [onSelect, selectionControlled, toggle, toggleOnSelect],\n    );\n\n    /** Move DOM focus to a row by id, so the roving tabindex actually roves. */\n    const focusRow = useCallback((id: string): void => {\n        setFocusedId(id);\n        const element = containerRef.current?.querySelector<HTMLElement>(`[data-tree-id=\"${id}\"]`);\n        element?.focus();\n    }, []);\n\n    const moveFocus = useCallback(\n        (from: number, delta: number): void => {\n            for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {\n                if (!rows[index].node.disabled) {\n                    focusRow(rows[index].node.id);\n                    return;\n                }\n            }\n        },\n        [rows, focusRow],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLDivElement>, row: FlatNode, index: number): void => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    moveFocus(index, 1);\n                    break;\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    moveFocus(index, -1);\n                    break;\n                case \"ArrowRight\":\n                    event.preventDefault();\n                    if (row.hasChildren && !row.expanded) toggle(row.node.id);\n                    else if (row.expanded) moveFocus(index, 1);\n                    break;\n                case \"ArrowLeft\":\n                    event.preventDefault();\n                    if (row.expanded) {\n                        toggle(row.node.id);\n                    } else if (row.parentId) {\n                        focusRow(row.parentId);\n                    }\n                    break;\n                case \"Home\":\n                    event.preventDefault();\n                    moveFocus(-1, 1);\n                    break;\n                case \"End\":\n                    event.preventDefault();\n                    moveFocus(rows.length, -1);\n                    break;\n                case \"Enter\":\n                case \" \":\n                    event.preventDefault();\n                    select(row);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [moveFocus, rows.length, select, toggle, focusRow],\n    );\n\n    return (\n        <ul\n            ref={containerRef}\n            role=\"tree\"\n            aria-label={label}\n            className={cn(styles.tree, className)}\n        >\n            {rows.map((row, index) => {\n                const isSelected = selected === row.node.id;\n                return (\n                    <li\n                        key={row.node.id}\n                        role=\"treeitem\"\n                        aria-expanded={row.hasChildren ? row.expanded : undefined}\n                        aria-selected={isSelected}\n                        aria-level={row.depth + 1}\n                        aria-disabled={row.node.disabled || undefined}\n                        className={styles.item}\n                    >\n                        <div\n                            data-tree-id={row.node.id}\n                            className={cn(\n                                styles.row,\n                                isSelected && styles.selected,\n                                row.node.disabled && styles.disabled,\n                            )}\n                            style={{\n                                paddingInlineStart: `calc(${row.depth} * var(--tempest-space-5))`,\n                            }}\n                            tabIndex={activeId === row.node.id && !row.node.disabled ? 0 : -1}\n                            onClick={() => select(row)}\n                            onFocus={() => setFocusedId(row.node.id)}\n                            onKeyDown={(event) => handleKeyDown(event, row, index)}\n                        >\n                            {row.hasChildren ? (\n                                <span\n                                    className={cn(\n                                        styles.chevron,\n                                        row.expanded && styles.chevronOpen,\n                                    )}\n                                    aria-hidden=\"true\"\n                                    onClick={(event) => {\n                                        event.stopPropagation();\n                                        if (!row.node.disabled) toggle(row.node.id);\n                                    }}\n                                >\n                                    <ChevronRight size={14} />\n                                </span>\n                            ) : (\n                                <span className={styles.chevronPlaceholder} aria-hidden=\"true\" />\n                            )}\n                            {row.node.icon ? (\n                                <span className={styles.icon} aria-hidden=\"true\">\n                                    {row.node.icon}\n                                </span>\n                            ) : null}\n                            <span className={styles.label}>{row.node.label}</span>\n                        </div>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TreeView.cjs","names":[],"sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — expansion and selection\n * are two independent controlled states, each with its uncontrolled twin\n * (expandedIds/defaultExpandedIds/onExpandedChange, selectedId/\n * defaultSelectedId/onSelect), plus toggleOnSelect for the case where they should\n * move together. The body is the flattened visible list and the roving focus over\n * it.\n */\nimport { ChevronRight } from \"lucide-react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TreeView.module.css\";\n\n/** One node of the tree. Children make it a branch; no children makes it a leaf. */\nexport interface TreeNode {\n    /** Stable identifier, unique across the whole tree. */\n    id: string;\n    /** Rendered label. */\n    label: ReactNode;\n    /** Child nodes. An empty array still renders as a branch (an empty folder). */\n    children?: TreeNode[];\n    /** Icon rendered before the label. */\n    icon?: ReactNode;\n    /** Blocks selection and expansion, and skips the node in keyboard navigation. */\n    disabled?: boolean;\n}\n\nexport interface TreeViewProps {\n    /** Root nodes. */\n    nodes: TreeNode[];\n    /** Controlled expanded ids. */\n    expandedIds?: string[];\n    /** Uncontrolled initial expanded ids. */\n    defaultExpandedIds?: string[];\n    onExpandedChange?: (expandedIds: string[]) => void;\n    /** Controlled selected id. `null` means nothing selected. */\n    selectedId?: string | null;\n    /** Uncontrolled initial selection. */\n    defaultSelectedId?: string | null;\n    onSelect?: (node: TreeNode) => void;\n    /**\n     * Selecting a branch also toggles it. Default `true` — matches how a file\n     * explorer behaves; set `false` when a branch is itself a meaningful choice\n     * (a category that owns items, for instance).\n     */\n    toggleOnSelect?: boolean;\n    /** Accessible name for the tree. */\n    label?: string;\n    className?: string;\n}\n\ninterface FlatNode {\n    node: TreeNode;\n    depth: number;\n    parentId: string | null;\n    hasChildren: boolean;\n    expanded: boolean;\n}\n\n/**\n * Walk the tree into the list of *currently visible* rows.\n *\n * Keyboard navigation works on this flattened view, which is what makes\n * ArrowDown from the last child of a collapsed-sibling branch land on the right\n * row: rows that are not rendered simply are not in the list.\n */\nfunction flatten(\n    nodes: TreeNode[],\n    expandedIds: Set<string>,\n    depth = 0,\n    parentId: string | null = null,\n    out: FlatNode[] = [],\n): FlatNode[] {\n    for (const node of nodes) {\n        const hasChildren = Array.isArray(node.children);\n        const expanded = hasChildren && expandedIds.has(node.id);\n        out.push({ node, depth, parentId, hasChildren, expanded });\n        if (expanded && node.children) {\n            flatten(node.children, expandedIds, depth + 1, node.id, out);\n        }\n    }\n    return out;\n}\n\n/**\n * Accessible tree for hierarchical data — categories, permissions, folders, an\n * org chart.\n *\n * Implements the `tree` role with **roving tabindex**: exactly one row is\n * tabbable, and the arrow keys move focus within the widget. That is what keeps a\n * 500-node tree from adding 500 stops to the page's tab order.\n *\n * Keyboard map: `↓`/`↑` move, `→` expands (or descends), `←` collapses (or goes to\n * the parent), `Home`/`End` jump to the first/last visible row, `Enter`/`Space`\n * select.\n *\n * The chevron is decoration (`aria-hidden`), not a button: the row itself carries\n * `aria-expanded`, so a second focusable control there would only add noise for a\n * screen reader while duplicating an action the keyboard map already has. It still\n * accepts a click, with the event stopped so it toggles without also selecting.\n *\n * @example\n * ```tsx\n * const nodes: TreeNode[] = [\n *   {\n *     id: \"vendas\",\n *     label: \"Vendas\",\n *     children: [\n *       { id: \"vendas.ler\", label: \"Ler\" },\n *       { id: \"vendas.editar\", label: \"Editar\" },\n *     ],\n *   },\n *   { id: \"config\", label: \"Configurações\", children: [] },\n * ];\n *\n * <TreeView nodes={nodes} defaultExpandedIds={[\"vendas\"]} onSelect={(node) => console.log(node.id)} />\n * ```\n */\nexport function TreeView({\n    nodes,\n    expandedIds,\n    defaultExpandedIds = [],\n    onExpandedChange,\n    selectedId,\n    defaultSelectedId = null,\n    onSelect,\n    toggleOnSelect = true,\n    label,\n    className,\n}: TreeViewProps) {\n    const expandedControlled = expandedIds !== undefined;\n    const [internalExpanded, setInternalExpanded] = useState<string[]>(defaultExpandedIds);\n    const expanded = expandedControlled ? expandedIds : internalExpanded;\n\n    const selectionControlled = selectedId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);\n    const selected = selectionControlled ? selectedId : internalSelected;\n\n    const expandedSet = useMemo(() => new Set(expanded), [expanded]);\n    const rows = useMemo(() => flatten(nodes, expandedSet), [nodes, expandedSet]);\n\n    const [focusedId, setFocusedId] = useState<string | null>(null);\n    const containerRef = useRef<HTMLUListElement>(null);\n\n    const activeId =\n        focusedId ?? selected ?? rows.find((row) => !row.node.disabled)?.node.id ?? null;\n\n    const setExpanded = useCallback(\n        (next: string[]): void => {\n            if (!expandedControlled) setInternalExpanded(next);\n            onExpandedChange?.(next);\n        },\n        [expandedControlled, onExpandedChange],\n    );\n\n    const toggle = useCallback(\n        (id: string): void => {\n            setExpanded(\n                expanded.includes(id) ? expanded.filter((x) => x !== id) : [...expanded, id],\n            );\n        },\n        [expanded, setExpanded],\n    );\n\n    const select = useCallback(\n        (row: FlatNode): void => {\n            if (row.node.disabled) return;\n            if (!selectionControlled) setInternalSelected(row.node.id);\n            setFocusedId(row.node.id);\n            onSelect?.(row.node);\n            if (row.hasChildren && toggleOnSelect) toggle(row.node.id);\n        },\n        [onSelect, selectionControlled, toggle, toggleOnSelect],\n    );\n\n    /** Move DOM focus to a row by id, so the roving tabindex actually roves. */\n    const focusRow = useCallback((id: string): void => {\n        setFocusedId(id);\n        const element = containerRef.current?.querySelector<HTMLElement>(`[data-tree-id=\"${id}\"]`);\n        element?.focus();\n    }, []);\n\n    const moveFocus = useCallback(\n        (from: number, delta: number): void => {\n            for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {\n                if (!rows[index].node.disabled) {\n                    focusRow(rows[index].node.id);\n                    return;\n                }\n            }\n        },\n        [rows, focusRow],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLDivElement>, row: FlatNode, index: number): void => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    moveFocus(index, 1);\n                    break;\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    moveFocus(index, -1);\n                    break;\n                case \"ArrowRight\":\n                    event.preventDefault();\n                    if (row.hasChildren && !row.expanded) toggle(row.node.id);\n                    else if (row.expanded) moveFocus(index, 1);\n                    break;\n                case \"ArrowLeft\":\n                    event.preventDefault();\n                    if (row.expanded) {\n                        toggle(row.node.id);\n                    } else if (row.parentId) {\n                        focusRow(row.parentId);\n                    }\n                    break;\n                case \"Home\":\n                    event.preventDefault();\n                    moveFocus(-1, 1);\n                    break;\n                case \"End\":\n                    event.preventDefault();\n                    moveFocus(rows.length, -1);\n                    break;\n                case \"Enter\":\n                case \" \":\n                    event.preventDefault();\n                    select(row);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [moveFocus, rows.length, select, toggle, focusRow],\n    );\n\n    return (\n        <ul\n            ref={containerRef}\n            role=\"tree\"\n            aria-label={label}\n            className={cn(styles.tree, className)}\n        >\n            {rows.map((row, index) => {\n                const isSelected = selected === row.node.id;\n                return (\n                    <li\n                        key={row.node.id}\n                        role=\"treeitem\"\n                        aria-expanded={row.hasChildren ? row.expanded : undefined}\n                        aria-selected={isSelected}\n                        aria-level={row.depth + 1}\n                        aria-disabled={row.node.disabled || undefined}\n                        className={styles.item}\n                    >\n                        <div\n                            data-tree-id={row.node.id}\n                            className={cn(\n                                styles.row,\n                                isSelected && styles.selected,\n                                row.node.disabled && styles.disabled,\n                            )}\n                            style={{\n                                paddingInlineStart: `calc(${row.depth} * var(--tempest-space-5))`,\n                            }}\n                            tabIndex={activeId === row.node.id && !row.node.disabled ? 0 : -1}\n                            onClick={() => select(row)}\n                            onFocus={() => setFocusedId(row.node.id)}\n                            onKeyDown={(event) => handleKeyDown(event, row, index)}\n                        >\n                            {row.hasChildren ? (\n                                <span\n                                    className={cn(\n                                        styles.chevron,\n                                        row.expanded && styles.chevronOpen,\n                                    )}\n                                    aria-hidden=\"true\"\n                                    onClick={(event) => {\n                                        event.stopPropagation();\n                                        if (!row.node.disabled) toggle(row.node.id);\n                                    }}\n                                >\n                                    <ChevronRight size={14} />\n                                </span>\n                            ) : (\n                                <span className={styles.chevronPlaceholder} aria-hidden=\"true\" />\n                            )}\n                            {row.node.icon ? (\n                                <span className={styles.icon} aria-hidden=\"true\">\n                                    {row.node.icon}\n                                </span>\n                            ) : null}\n                            <span className={styles.label}>{row.node.label}</span>\n                        </div>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"mappings":"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"}

package/dist/components/TreeView/TreeView.js

@@ -57,10 +57,7 @@ function u({ nodes: u, expandedIds: d, defaultExpandedIds: f = [], onExpandedCha
 				e.preventDefault(), R(k.length, -1);
 				break;
 			case "Enter":
-			case " ":
-				e.preventDefault(), I(t);
-				break;
-			default: break;
+			case " ": e.preventDefault(), I(t);
 		}
 	}, [
 		R,

package/dist/components/TreeView/TreeView.js.map

@@ -1 +1 @@
-{"version":3,"file":"TreeView.js","names":[],"sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — expansion and selection\n * are two independent controlled states, each with its uncontrolled twin\n * (expandedIds/defaultExpandedIds/onExpandedChange, selectedId/\n * defaultSelectedId/onSelect), plus toggleOnSelect for the case where they should\n * move together. The body is the flattened visible list and the roving focus over\n * it.\n */\nimport { ChevronRight } from \"lucide-react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TreeView.module.css\";\n\n/** One node of the tree. Children make it a branch; no children makes it a leaf. */\nexport interface TreeNode {\n    /** Stable identifier, unique across the whole tree. */\n    id: string;\n    /** Rendered label. */\n    label: ReactNode;\n    /** Child nodes. An empty array still renders as a branch (an empty folder). */\n    children?: TreeNode[];\n    /** Icon rendered before the label. */\n    icon?: ReactNode;\n    /** Blocks selection and expansion, and skips the node in keyboard navigation. */\n    disabled?: boolean;\n}\n\nexport interface TreeViewProps {\n    /** Root nodes. */\n    nodes: TreeNode[];\n    /** Controlled expanded ids. */\n    expandedIds?: string[];\n    /** Uncontrolled initial expanded ids. */\n    defaultExpandedIds?: string[];\n    onExpandedChange?: (expandedIds: string[]) => void;\n    /** Controlled selected id. `null` means nothing selected. */\n    selectedId?: string | null;\n    /** Uncontrolled initial selection. */\n    defaultSelectedId?: string | null;\n    onSelect?: (node: TreeNode) => void;\n    /**\n     * Selecting a branch also toggles it. Default `true` — matches how a file\n     * explorer behaves; set `false` when a branch is itself a meaningful choice\n     * (a category that owns items, for instance).\n     */\n    toggleOnSelect?: boolean;\n    /** Accessible name for the tree. */\n    label?: string;\n    className?: string;\n}\n\ninterface FlatNode {\n    node: TreeNode;\n    depth: number;\n    parentId: string | null;\n    hasChildren: boolean;\n    expanded: boolean;\n}\n\n/**\n * Walk the tree into the list of *currently visible* rows.\n *\n * Keyboard navigation works on this flattened view, which is what makes\n * ArrowDown from the last child of a collapsed-sibling branch land on the right\n * row: rows that are not rendered simply are not in the list.\n */\nfunction flatten(\n    nodes: TreeNode[],\n    expandedIds: Set<string>,\n    depth = 0,\n    parentId: string | null = null,\n    out: FlatNode[] = [],\n): FlatNode[] {\n    for (const node of nodes) {\n        const hasChildren = Array.isArray(node.children);\n        const expanded = hasChildren && expandedIds.has(node.id);\n        out.push({ node, depth, parentId, hasChildren, expanded });\n        if (expanded && node.children) {\n            flatten(node.children, expandedIds, depth + 1, node.id, out);\n        }\n    }\n    return out;\n}\n\n/**\n * Accessible tree for hierarchical data — categories, permissions, folders, an\n * org chart.\n *\n * Implements the `tree` role with **roving tabindex**: exactly one row is\n * tabbable, and the arrow keys move focus within the widget. That is what keeps a\n * 500-node tree from adding 500 stops to the page's tab order.\n *\n * Keyboard map: `↓`/`↑` move, `→` expands (or descends), `←` collapses (or goes to\n * the parent), `Home`/`End` jump to the first/last visible row, `Enter`/`Space`\n * select.\n *\n * The chevron is decoration (`aria-hidden`), not a button: the row itself carries\n * `aria-expanded`, so a second focusable control there would only add noise for a\n * screen reader while duplicating an action the keyboard map already has. It still\n * accepts a click, with the event stopped so it toggles without also selecting.\n *\n * @example\n * ```tsx\n * const nodes: TreeNode[] = [\n *   {\n *     id: \"vendas\",\n *     label: \"Vendas\",\n *     children: [\n *       { id: \"vendas.ler\", label: \"Ler\" },\n *       { id: \"vendas.editar\", label: \"Editar\" },\n *     ],\n *   },\n *   { id: \"config\", label: \"Configurações\", children: [] },\n * ];\n *\n * <TreeView nodes={nodes} defaultExpandedIds={[\"vendas\"]} onSelect={(node) => console.log(node.id)} />\n * ```\n */\nexport function TreeView({\n    nodes,\n    expandedIds,\n    defaultExpandedIds = [],\n    onExpandedChange,\n    selectedId,\n    defaultSelectedId = null,\n    onSelect,\n    toggleOnSelect = true,\n    label,\n    className,\n}: TreeViewProps) {\n    const expandedControlled = expandedIds !== undefined;\n    const [internalExpanded, setInternalExpanded] = useState<string[]>(defaultExpandedIds);\n    const expanded = expandedControlled ? expandedIds : internalExpanded;\n\n    const selectionControlled = selectedId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);\n    const selected = selectionControlled ? selectedId : internalSelected;\n\n    const expandedSet = useMemo(() => new Set(expanded), [expanded]);\n    const rows = useMemo(() => flatten(nodes, expandedSet), [nodes, expandedSet]);\n\n    const [focusedId, setFocusedId] = useState<string | null>(null);\n    const containerRef = useRef<HTMLUListElement>(null);\n\n    const activeId =\n        focusedId ?? selected ?? rows.find((row) => !row.node.disabled)?.node.id ?? null;\n\n    const setExpanded = useCallback(\n        (next: string[]): void => {\n            if (!expandedControlled) setInternalExpanded(next);\n            onExpandedChange?.(next);\n        },\n        [expandedControlled, onExpandedChange],\n    );\n\n    const toggle = useCallback(\n        (id: string): void => {\n            setExpanded(\n                expanded.includes(id) ? expanded.filter((x) => x !== id) : [...expanded, id],\n            );\n        },\n        [expanded, setExpanded],\n    );\n\n    const select = useCallback(\n        (row: FlatNode): void => {\n            if (row.node.disabled) return;\n            if (!selectionControlled) setInternalSelected(row.node.id);\n            setFocusedId(row.node.id);\n            onSelect?.(row.node);\n            if (row.hasChildren && toggleOnSelect) toggle(row.node.id);\n        },\n        [onSelect, selectionControlled, toggle, toggleOnSelect],\n    );\n\n    /** Move DOM focus to a row by id, so the roving tabindex actually roves. */\n    const focusRow = useCallback((id: string): void => {\n        setFocusedId(id);\n        const element = containerRef.current?.querySelector<HTMLElement>(`[data-tree-id=\"${id}\"]`);\n        element?.focus();\n    }, []);\n\n    const moveFocus = useCallback(\n        (from: number, delta: number): void => {\n            for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {\n                if (!rows[index].node.disabled) {\n                    focusRow(rows[index].node.id);\n                    return;\n                }\n            }\n        },\n        [rows, focusRow],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLDivElement>, row: FlatNode, index: number): void => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    moveFocus(index, 1);\n                    break;\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    moveFocus(index, -1);\n                    break;\n                case \"ArrowRight\":\n                    event.preventDefault();\n                    if (row.hasChildren && !row.expanded) toggle(row.node.id);\n                    else if (row.expanded) moveFocus(index, 1);\n                    break;\n                case \"ArrowLeft\":\n                    event.preventDefault();\n                    if (row.expanded) {\n                        toggle(row.node.id);\n                    } else if (row.parentId) {\n                        focusRow(row.parentId);\n                    }\n                    break;\n                case \"Home\":\n                    event.preventDefault();\n                    moveFocus(-1, 1);\n                    break;\n                case \"End\":\n                    event.preventDefault();\n                    moveFocus(rows.length, -1);\n                    break;\n                case \"Enter\":\n                case \" \":\n                    event.preventDefault();\n                    select(row);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [moveFocus, rows.length, select, toggle, focusRow],\n    );\n\n    return (\n        <ul\n            ref={containerRef}\n            role=\"tree\"\n            aria-label={label}\n            className={cn(styles.tree, className)}\n        >\n            {rows.map((row, index) => {\n                const isSelected = selected === row.node.id;\n                return (\n                    <li\n                        key={row.node.id}\n                        role=\"treeitem\"\n                        aria-expanded={row.hasChildren ? row.expanded : undefined}\n                        aria-selected={isSelected}\n                        aria-level={row.depth + 1}\n                        aria-disabled={row.node.disabled || undefined}\n                        className={styles.item}\n                    >\n                        <div\n                            data-tree-id={row.node.id}\n                            className={cn(\n                                styles.row,\n                                isSelected && styles.selected,\n                                row.node.disabled && styles.disabled,\n                            )}\n                            style={{\n                                paddingInlineStart: `calc(${row.depth} * var(--tempest-space-5))`,\n                            }}\n                            tabIndex={activeId === row.node.id && !row.node.disabled ? 0 : -1}\n                            onClick={() => select(row)}\n                            onFocus={() => setFocusedId(row.node.id)}\n                            onKeyDown={(event) => handleKeyDown(event, row, index)}\n                        >\n                            {row.hasChildren ? (\n                                <span\n                                    className={cn(\n                                        styles.chevron,\n                                        row.expanded && styles.chevronOpen,\n                                    )}\n                                    aria-hidden=\"true\"\n                                    onClick={(event) => {\n                                        event.stopPropagation();\n                                        if (!row.node.disabled) toggle(row.node.id);\n                                    }}\n                                >\n                                    <ChevronRight size={14} />\n                                </span>\n                            ) : (\n                                <span className={styles.chevronPlaceholder} aria-hidden=\"true\" />\n                            )}\n                            {row.node.icon ? (\n                                <span className={styles.icon} aria-hidden=\"true\">\n                                    {row.node.icon}\n                                </span>\n                            ) : null}\n                            <span className={styles.label}>{row.node.label}</span>\n                        </div>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"mappings":"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"}
+{"version":3,"file":"TreeView.js","names":[],"sources":["../../../src/components/TreeView/TreeView.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count, function-lines — expansion and selection\n * are two independent controlled states, each with its uncontrolled twin\n * (expandedIds/defaultExpandedIds/onExpandedChange, selectedId/\n * defaultSelectedId/onSelect), plus toggleOnSelect for the case where they should\n * move together. The body is the flattened visible list and the roving focus over\n * it.\n */\nimport { ChevronRight } from \"lucide-react\";\nimport { useCallback, useMemo, useRef, useState } from \"react\";\nimport type { KeyboardEvent, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./TreeView.module.css\";\n\n/** One node of the tree. Children make it a branch; no children makes it a leaf. */\nexport interface TreeNode {\n    /** Stable identifier, unique across the whole tree. */\n    id: string;\n    /** Rendered label. */\n    label: ReactNode;\n    /** Child nodes. An empty array still renders as a branch (an empty folder). */\n    children?: TreeNode[];\n    /** Icon rendered before the label. */\n    icon?: ReactNode;\n    /** Blocks selection and expansion, and skips the node in keyboard navigation. */\n    disabled?: boolean;\n}\n\nexport interface TreeViewProps {\n    /** Root nodes. */\n    nodes: TreeNode[];\n    /** Controlled expanded ids. */\n    expandedIds?: string[];\n    /** Uncontrolled initial expanded ids. */\n    defaultExpandedIds?: string[];\n    onExpandedChange?: (expandedIds: string[]) => void;\n    /** Controlled selected id. `null` means nothing selected. */\n    selectedId?: string | null;\n    /** Uncontrolled initial selection. */\n    defaultSelectedId?: string | null;\n    onSelect?: (node: TreeNode) => void;\n    /**\n     * Selecting a branch also toggles it. Default `true` — matches how a file\n     * explorer behaves; set `false` when a branch is itself a meaningful choice\n     * (a category that owns items, for instance).\n     */\n    toggleOnSelect?: boolean;\n    /** Accessible name for the tree. */\n    label?: string;\n    className?: string;\n}\n\ninterface FlatNode {\n    node: TreeNode;\n    depth: number;\n    parentId: string | null;\n    hasChildren: boolean;\n    expanded: boolean;\n}\n\n/**\n * Walk the tree into the list of *currently visible* rows.\n *\n * Keyboard navigation works on this flattened view, which is what makes\n * ArrowDown from the last child of a collapsed-sibling branch land on the right\n * row: rows that are not rendered simply are not in the list.\n */\nfunction flatten(\n    nodes: TreeNode[],\n    expandedIds: Set<string>,\n    depth = 0,\n    parentId: string | null = null,\n    out: FlatNode[] = [],\n): FlatNode[] {\n    for (const node of nodes) {\n        const hasChildren = Array.isArray(node.children);\n        const expanded = hasChildren && expandedIds.has(node.id);\n        out.push({ node, depth, parentId, hasChildren, expanded });\n        if (expanded && node.children) {\n            flatten(node.children, expandedIds, depth + 1, node.id, out);\n        }\n    }\n    return out;\n}\n\n/**\n * Accessible tree for hierarchical data — categories, permissions, folders, an\n * org chart.\n *\n * Implements the `tree` role with **roving tabindex**: exactly one row is\n * tabbable, and the arrow keys move focus within the widget. That is what keeps a\n * 500-node tree from adding 500 stops to the page's tab order.\n *\n * Keyboard map: `↓`/`↑` move, `→` expands (or descends), `←` collapses (or goes to\n * the parent), `Home`/`End` jump to the first/last visible row, `Enter`/`Space`\n * select.\n *\n * The chevron is decoration (`aria-hidden`), not a button: the row itself carries\n * `aria-expanded`, so a second focusable control there would only add noise for a\n * screen reader while duplicating an action the keyboard map already has. It still\n * accepts a click, with the event stopped so it toggles without also selecting.\n *\n * @example\n * ```tsx\n * const nodes: TreeNode[] = [\n *   {\n *     id: \"vendas\",\n *     label: \"Vendas\",\n *     children: [\n *       { id: \"vendas.ler\", label: \"Ler\" },\n *       { id: \"vendas.editar\", label: \"Editar\" },\n *     ],\n *   },\n *   { id: \"config\", label: \"Configurações\", children: [] },\n * ];\n *\n * <TreeView nodes={nodes} defaultExpandedIds={[\"vendas\"]} onSelect={(node) => console.log(node.id)} />\n * ```\n */\nexport function TreeView({\n    nodes,\n    expandedIds,\n    defaultExpandedIds = [],\n    onExpandedChange,\n    selectedId,\n    defaultSelectedId = null,\n    onSelect,\n    toggleOnSelect = true,\n    label,\n    className,\n}: TreeViewProps) {\n    const expandedControlled = expandedIds !== undefined;\n    const [internalExpanded, setInternalExpanded] = useState<string[]>(defaultExpandedIds);\n    const expanded = expandedControlled ? expandedIds : internalExpanded;\n\n    const selectionControlled = selectedId !== undefined;\n    const [internalSelected, setInternalSelected] = useState<string | null>(defaultSelectedId);\n    const selected = selectionControlled ? selectedId : internalSelected;\n\n    const expandedSet = useMemo(() => new Set(expanded), [expanded]);\n    const rows = useMemo(() => flatten(nodes, expandedSet), [nodes, expandedSet]);\n\n    const [focusedId, setFocusedId] = useState<string | null>(null);\n    const containerRef = useRef<HTMLUListElement>(null);\n\n    const activeId =\n        focusedId ?? selected ?? rows.find((row) => !row.node.disabled)?.node.id ?? null;\n\n    const setExpanded = useCallback(\n        (next: string[]): void => {\n            if (!expandedControlled) setInternalExpanded(next);\n            onExpandedChange?.(next);\n        },\n        [expandedControlled, onExpandedChange],\n    );\n\n    const toggle = useCallback(\n        (id: string): void => {\n            setExpanded(\n                expanded.includes(id) ? expanded.filter((x) => x !== id) : [...expanded, id],\n            );\n        },\n        [expanded, setExpanded],\n    );\n\n    const select = useCallback(\n        (row: FlatNode): void => {\n            if (row.node.disabled) return;\n            if (!selectionControlled) setInternalSelected(row.node.id);\n            setFocusedId(row.node.id);\n            onSelect?.(row.node);\n            if (row.hasChildren && toggleOnSelect) toggle(row.node.id);\n        },\n        [onSelect, selectionControlled, toggle, toggleOnSelect],\n    );\n\n    /** Move DOM focus to a row by id, so the roving tabindex actually roves. */\n    const focusRow = useCallback((id: string): void => {\n        setFocusedId(id);\n        const element = containerRef.current?.querySelector<HTMLElement>(`[data-tree-id=\"${id}\"]`);\n        element?.focus();\n    }, []);\n\n    const moveFocus = useCallback(\n        (from: number, delta: number): void => {\n            for (let index = from + delta; index >= 0 && index < rows.length; index += delta) {\n                if (!rows[index].node.disabled) {\n                    focusRow(rows[index].node.id);\n                    return;\n                }\n            }\n        },\n        [rows, focusRow],\n    );\n\n    const handleKeyDown = useCallback(\n        (event: KeyboardEvent<HTMLDivElement>, row: FlatNode, index: number): void => {\n            switch (event.key) {\n                case \"ArrowDown\":\n                    event.preventDefault();\n                    moveFocus(index, 1);\n                    break;\n                case \"ArrowUp\":\n                    event.preventDefault();\n                    moveFocus(index, -1);\n                    break;\n                case \"ArrowRight\":\n                    event.preventDefault();\n                    if (row.hasChildren && !row.expanded) toggle(row.node.id);\n                    else if (row.expanded) moveFocus(index, 1);\n                    break;\n                case \"ArrowLeft\":\n                    event.preventDefault();\n                    if (row.expanded) {\n                        toggle(row.node.id);\n                    } else if (row.parentId) {\n                        focusRow(row.parentId);\n                    }\n                    break;\n                case \"Home\":\n                    event.preventDefault();\n                    moveFocus(-1, 1);\n                    break;\n                case \"End\":\n                    event.preventDefault();\n                    moveFocus(rows.length, -1);\n                    break;\n                case \"Enter\":\n                case \" \":\n                    event.preventDefault();\n                    select(row);\n                    break;\n                default:\n                    break;\n            }\n        },\n        [moveFocus, rows.length, select, toggle, focusRow],\n    );\n\n    return (\n        <ul\n            ref={containerRef}\n            role=\"tree\"\n            aria-label={label}\n            className={cn(styles.tree, className)}\n        >\n            {rows.map((row, index) => {\n                const isSelected = selected === row.node.id;\n                return (\n                    <li\n                        key={row.node.id}\n                        role=\"treeitem\"\n                        aria-expanded={row.hasChildren ? row.expanded : undefined}\n                        aria-selected={isSelected}\n                        aria-level={row.depth + 1}\n                        aria-disabled={row.node.disabled || undefined}\n                        className={styles.item}\n                    >\n                        <div\n                            data-tree-id={row.node.id}\n                            className={cn(\n                                styles.row,\n                                isSelected && styles.selected,\n                                row.node.disabled && styles.disabled,\n                            )}\n                            style={{\n                                paddingInlineStart: `calc(${row.depth} * var(--tempest-space-5))`,\n                            }}\n                            tabIndex={activeId === row.node.id && !row.node.disabled ? 0 : -1}\n                            onClick={() => select(row)}\n                            onFocus={() => setFocusedId(row.node.id)}\n                            onKeyDown={(event) => handleKeyDown(event, row, index)}\n                        >\n                            {row.hasChildren ? (\n                                <span\n                                    className={cn(\n                                        styles.chevron,\n                                        row.expanded && styles.chevronOpen,\n                                    )}\n                                    aria-hidden=\"true\"\n                                    onClick={(event) => {\n                                        event.stopPropagation();\n                                        if (!row.node.disabled) toggle(row.node.id);\n                                    }}\n                                >\n                                    <ChevronRight size={14} />\n                                </span>\n                            ) : (\n                                <span className={styles.chevronPlaceholder} aria-hidden=\"true\" />\n                            )}\n                            {row.node.icon ? (\n                                <span className={styles.icon} aria-hidden=\"true\">\n                                    {row.node.icon}\n                                </span>\n                            ) : null}\n                            <span className={styles.label}>{row.node.label}</span>\n                        </div>\n                    </li>\n                );\n            })}\n        </ul>\n    );\n}\n"],"mappings":";;;;;;AAmEA,SAAS,EACL,GACA,GACA,IAAQ,GACR,IAA0B,MAC1B,IAAkB,CAAC,GACT;CACV,KAAK,IAAM,KAAQ,GAAO;EACtB,IAAM,IAAc,MAAM,QAAQ,EAAK,QAAQ,GACzC,IAAW,KAAe,EAAY,IAAI,EAAK,EAAE;EAEvD,AADA,EAAI,KAAK;GAAE;GAAM;GAAO;GAAU;GAAa;EAAS,CAAC,GACrD,KAAY,EAAK,YACjB,EAAQ,EAAK,UAAU,GAAa,IAAQ,GAAG,EAAK,IAAI,CAAG;CAEnE;CACA,OAAO;AACX;AAoCA,SAAgB,EAAS,EACrB,UACA,gBACA,wBAAqB,CAAC,GACtB,qBACA,eACA,uBAAoB,MACpB,aACA,oBAAiB,IACjB,UACA,gBACc;CACd,IAAM,IAAqB,MAAgB,KAAA,GACrC,CAAC,GAAkB,KAAuB,EAAmB,CAAkB,GAC/E,IAAW,IAAqB,IAAc,GAE9C,IAAsB,MAAe,KAAA,GACrC,CAAC,GAAkB,KAAuB,EAAwB,CAAiB,GACnF,IAAW,IAAsB,IAAa,GAE9C,IAAc,QAAc,IAAI,IAAI,CAAQ,GAAG,CAAC,CAAQ,CAAC,GACzD,IAAO,QAAc,EAAQ,GAAO,CAAW,GAAG,CAAC,GAAO,CAAW,CAAC,GAEtE,CAAC,GAAW,KAAgB,EAAwB,IAAI,GACxD,IAAe,EAAyB,IAAI,GAE5C,IACF,KAAa,KAAY,EAAK,MAAM,MAAQ,CAAC,EAAI,KAAK,QAAQ,CAAC,EAAE,KAAK,MAAM,MAE1E,IAAc,GACf,MAAyB;EAEtB,AADK,KAAoB,EAAoB,CAAI,GACjD,IAAmB,CAAI;CAC3B,GACA,CAAC,GAAoB,CAAgB,CACzC,GAEM,IAAS,GACV,MAAqB;EAClB,EACI,EAAS,SAAS,CAAE,IAAI,EAAS,QAAQ,MAAM,MAAM,CAAE,IAAI,CAAC,GAAG,GAAU,CAAE,CAC/E;CACJ,GACA,CAAC,GAAU,CAAW,CAC1B,GAEM,IAAS,GACV,MAAwB;EACjB,EAAI,KAAK,aACR,KAAqB,EAAoB,EAAI,KAAK,EAAE,GACzD,EAAa,EAAI,KAAK,EAAE,GACxB,IAAW,EAAI,IAAI,GACf,EAAI,eAAe,KAAgB,EAAO,EAAI,KAAK,EAAE;CAC7D,GACA;EAAC;EAAU;EAAqB;EAAQ;CAAc,CAC1D,GAGM,IAAW,GAAa,MAAqB;EAG/C,AAFA,EAAa,CAAE,IACC,EAAa,SAAS,cAA2B,kBAAkB,EAAG,GAAG,EAAA,EAChF,MAAM;CACnB,GAAG,CAAC,CAAC,GAEC,IAAY,GACb,GAAc,MAAwB;EACnC,KAAK,IAAI,IAAQ,IAAO,GAAO,KAAS,KAAK,IAAQ,EAAK,QAAQ,KAAS,GACvE,IAAI,CAAC,EAAK,EAAM,CAAC,KAAK,UAAU;GAC5B,EAAS,EAAK,EAAM,CAAC,KAAK,EAAE;GAC5B;EACJ;CAER,GACA,CAAC,GAAM,CAAQ,CACnB,GAEM,IAAgB,GACjB,GAAsC,GAAe,MAAwB;EAC1E,QAAQ,EAAM,KAAd;GACI,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAU,GAAO,CAAC;IAClB;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAU,GAAO,EAAE;IACnB;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACjB,EAAI,eAAe,CAAC,EAAI,WAAU,EAAO,EAAI,KAAK,EAAE,IAC/C,EAAI,YAAU,EAAU,GAAO,CAAC;IACzC;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACjB,EAAI,WACJ,EAAO,EAAI,KAAK,EAAE,IACX,EAAI,YACX,EAAS,EAAI,QAAQ;IAEzB;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAU,IAAI,CAAC;IACf;GACJ,KAAK;IAED,AADA,EAAM,eAAe,GACrB,EAAU,EAAK,QAAQ,EAAE;IACzB;GACJ,KAAK;GACL,KAAK,KAED,AADA,EAAM,eAAe,GACrB,EAAO,CAAG;EAIlB;CACJ,GACA;EAAC;EAAW,EAAK;EAAQ;EAAQ;EAAQ;CAAQ,CACrD;CAEA,OACI,kBAAC,MAAD;EACI,KAAK;EACL,MAAK;EACL,cAAY;EACZ,WAAW,EAAG,EAAO,MAAM,CAAS;EAEnC,UAAA,EAAK,KAAK,GAAK,MAAU;GACtB,IAAM,IAAa,MAAa,EAAI,KAAK;GACzC,OACI,kBAAC,MAAD;IAEI,MAAK;IACL,iBAAe,EAAI,cAAc,EAAI,WAAW,KAAA;IAChD,iBAAe;IACf,cAAY,EAAI,QAAQ;IACxB,iBAAe,EAAI,KAAK,YAAY,KAAA;IACpC,WAAW,EAAO;IAElB,UAAA,kBAAC,OAAD;KACI,gBAAc,EAAI,KAAK;KACvB,WAAW,EACP,EAAO,KACP,KAAc,EAAO,UACrB,EAAI,KAAK,YAAY,EAAO,QAChC;KACA,OAAO,EACH,oBAAoB,QAAQ,EAAI,MAAM,4BAC1C;KACA,UAAU,MAAa,EAAI,KAAK,MAAM,CAAC,EAAI,KAAK,WAAW,IAAI;KAC/D,eAAe,EAAO,CAAG;KACzB,eAAe,EAAa,EAAI,KAAK,EAAE;KACvC,YAAY,MAAU,EAAc,GAAO,GAAK,CAAK;KAbzD,UAAA;MAeK,EAAI,cACD,kBAAC,QAAD;OACI,WAAW,EACP,EAAO,SACP,EAAI,YAAY,EAAO,WAC3B;OACA,eAAY;OACZ,UAAU,MAAU;QAEhB,AADA,EAAM,gBAAgB,GACjB,EAAI,KAAK,YAAU,EAAO,EAAI,KAAK,EAAE;OAC9C;OAEA,UAAA,kBAAC,GAAD,EAAc,MAAM,GAAK,CAAA;MACvB,CAAA,IAEN,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAoB,eAAY;MAAQ,CAAA;MAEnE,EAAI,KAAK,OACN,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAM,eAAY;OACrC,UAAA,EAAI,KAAK;MACR,CAAA,IACN;MACJ,kBAAC,QAAD;OAAM,WAAW,EAAO;OAAQ,UAAA,EAAI,KAAK;MAAY,CAAA;KACpD;;GACL,GA/CK,EAAI,KAAK,EA+Cd;EAEZ,CAAC;CACD,CAAA;AAEZ"}

package/dist/components/UpdatePrompt/UpdatePrompt.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"UpdatePrompt.cjs","names":[],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"mappings":"0IAiCA,SAAgB,EAAa,CACzB,OACA,WACA,YACA,UAAU,mCACV,cAAc,YACd,WAAW,SACX,YACA,GAAG,GACe,CAElB,OADK,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,EAAA,QAAO,GAAW,CAAS,EACxD,KAAK,QACL,YAAU,YACV,GAAI,WAJR,EAMI,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAW,UAAW,EAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GACjE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,iBAAU,CAAc,CAAA,GAChD,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,EAAA,QAAO,OAAQ,QAAS,WACpD,CACG,CAAA,EACP,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,aAAW,YACX,QAAS,YAET,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAG,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC7B,CAAA,CAEX,IAvBS,IAyBtB"}
+{"version":3,"file":"UpdatePrompt.cjs","names":[],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"mappings":"0IAiCA,SAAgB,EAAa,CACzB,OACA,WACA,YACA,UAAU,mCACV,cAAc,YACd,WAAW,SACX,YACA,GAAG,GACe,CAElB,OADK,GAED,EAAA,EAAA,KAAA,CAAC,MAAD,CACI,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,EAAA,QAAO,GAAW,CAAS,EACxD,KAAK,QACL,YAAU,YACV,GAAI,EAJR,SAAA,EAMI,EAAA,EAAA,IAAA,CAAC,EAAA,UAAD,CAAW,UAAW,EAAA,QAAO,KAAM,KAAM,GAAI,cAAY,MAAQ,CAAA,GACjE,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,QAAU,SAAA,CAAc,CAAA,GAChD,EAAA,EAAA,IAAA,CAAC,SAAD,CAAQ,KAAK,SAAS,UAAW,EAAA,QAAO,OAAQ,QAAS,EACpD,SAAA,CACG,CAAA,EACP,IACG,EAAA,EAAA,IAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,QAClB,aAAW,YACX,QAAS,EAET,UAAA,EAAA,EAAA,IAAA,CAAC,EAAA,EAAD,CAAG,KAAM,GAAI,cAAY,MAAQ,CAAA,CAC7B,CAAA,CAEX,IAvBS,IAyBtB"}

package/dist/components/UpdatePrompt/UpdatePrompt.js.map

@@ -1 +1 @@
-{"version":3,"file":"UpdatePrompt.js","names":[],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAiCA,SAAgB,EAAa,EACzB,SACA,aACA,cACA,aAAU,oCACV,iBAAc,aACd,cAAW,UACX,cACA,GAAG,KACe;CAElB,OADK,IAED,kBAAC,OAAD;EACI,WAAW,EAAG,EAAO,QAAQ,EAAO,IAAW,CAAS;EACxD,MAAK;EACL,aAAU;EACV,GAAI;YAJR;GAMI,kBAAC,GAAD;IAAW,WAAW,EAAO;IAAM,MAAM;IAAI,eAAY;GAAQ,CAAA;GACjE,kBAAC,QAAD;IAAM,WAAW,EAAO;cAAU;GAAc,CAAA;GAChD,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW,EAAO;IAAQ,SAAS;cACpD;GACG,CAAA;GACP,KACG,kBAAC,UAAD;IACI,MAAK;IACL,WAAW,EAAO;IAClB,cAAW;IACX,SAAS;cAET,kBAAC,GAAD;KAAG,MAAM;KAAI,eAAY;IAAQ,CAAA;GAC7B,CAAA;EAEX;MAvBS;AAyBtB"}
+{"version":3,"file":"UpdatePrompt.js","names":[],"sources":["../../../src/components/UpdatePrompt/UpdatePrompt.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from \"react\";\nimport { RefreshCw, X } from \"lucide-react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./UpdatePrompt.module.css\";\n\nexport type UpdatePromptPosition = \"top\" | \"bottom\";\n\nexport interface UpdatePromptProps extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Whether the prompt is visible. Feed from `useServiceWorkerUpdate().updateAvailable`. */\n    open: boolean;\n    /** Called when the user confirms the update. Wire to `applyUpdate`. */\n    onUpdate: () => void;\n    /** Called when the user dismisses the prompt. Omit to hide the dismiss button. */\n    onDismiss?: () => void;\n    /** Body message. */\n    message?: ReactNode;\n    /** Confirm button label. Default `\"Atualizar\"`. */\n    actionLabel?: string;\n    /** Where to pin the fixed toast. Default `\"bottom\"`. */\n    position?: UpdatePromptPosition;\n}\n\n/**\n * Fixed toast prompting the user to activate a freshly installed service\n * worker. Presentational — pair with {@link useServiceWorkerUpdate}, feeding\n * `updateAvailable` to `open` and `applyUpdate` to `onUpdate`.\n *\n * Renders nothing while `open` is `false`.\n *\n * @example\n * const { updateAvailable, applyUpdate } = useServiceWorkerUpdate({ url: \"/sw.js\" });\n * <UpdatePrompt open={updateAvailable} onUpdate={applyUpdate} />\n */\nexport function UpdatePrompt({\n    open,\n    onUpdate,\n    onDismiss,\n    message = \"Uma nova versão está disponível.\",\n    actionLabel = \"Atualizar\",\n    position = \"bottom\",\n    className,\n    ...props\n}: UpdatePromptProps) {\n    if (!open) return null;\n    return (\n        <div\n            className={cn(styles.prompt, styles[position], className)}\n            role=\"alert\"\n            aria-live=\"assertive\"\n            {...props}\n        >\n            <RefreshCw className={styles.icon} size={18} aria-hidden=\"true\" />\n            <span className={styles.message}>{message}</span>\n            <button type=\"button\" className={styles.action} onClick={onUpdate}>\n                {actionLabel}\n            </button>\n            {onDismiss && (\n                <button\n                    type=\"button\"\n                    className={styles.dismiss}\n                    aria-label=\"Dispensar\"\n                    onClick={onDismiss}\n                >\n                    <X size={16} aria-hidden=\"true\" />\n                </button>\n            )}\n        </div>\n    );\n}\n"],"mappings":";;;;;AAiCA,SAAgB,EAAa,EACzB,SACA,aACA,cACA,aAAU,oCACV,iBAAc,aACd,cAAW,UACX,cACA,GAAG,KACe;CAElB,OADK,IAED,kBAAC,OAAD;EACI,WAAW,EAAG,EAAO,QAAQ,EAAO,IAAW,CAAS;EACxD,MAAK;EACL,aAAU;EACV,GAAI;EAJR,UAAA;GAMI,kBAAC,GAAD;IAAW,WAAW,EAAO;IAAM,MAAM;IAAI,eAAY;GAAQ,CAAA;GACjE,kBAAC,QAAD;IAAM,WAAW,EAAO;IAAU,UAAA;GAAc,CAAA;GAChD,kBAAC,UAAD;IAAQ,MAAK;IAAS,WAAW,EAAO;IAAQ,SAAS;IACpD,UAAA;GACG,CAAA;GACP,KACG,kBAAC,UAAD;IACI,MAAK;IACL,WAAW,EAAO;IAClB,cAAW;IACX,SAAS;IAET,UAAA,kBAAC,GAAD;KAAG,MAAM;KAAI,eAAY;IAAQ,CAAA;GAC7B,CAAA;EAEX;MAvBS;AAyBtB"}

package/dist/components/VirtualList/VirtualList.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.cjs","names":[],"sources":["../../../src/components/VirtualList/VirtualList.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — items, itemHeight, height and overscan are the\n * window maths; renderItem and getKey the row contract; label the accessible name of\n * a scroll region. Nine props is what windowing costs — the alternative is the app\n * doing the maths.\n */\nimport { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./VirtualList.module.css\";\n\nexport interface VirtualListProps<T> {\n    items: T[];\n    /** Fixed pixel height for each row. */\n    itemHeight: number;\n    /** Render a single row. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Container height (px) or any CSS length. */\n    height: number | string;\n    /** Number of items rendered above/below the viewport. Default: 4. */\n    overscan?: number;\n    /** Stable key derivation; defaults to the index. */\n    getKey?: (item: T, index: number) => string | number;\n    className?: string;\n    style?: CSSProperties;\n    /**\n     * Accessible name for the list. Worth setting when the list scrolls: it\n     * then carries a tab stop of its own, and a focus stop that announces\n     * nothing is worse than no focus stop.\n     */\n    label?: string;\n}\n\n/**\n * Fixed-height virtual list. Renders only the visible window plus a small\n * overscan buffer. Suitable for lists of thousands of identical rows.\n *\n * For variable heights, use `react-window`/`@tanstack/react-virtual` — those\n * solve a more general problem at the cost of extra setup.\n */\nexport function VirtualList<T>({\n    items,\n    itemHeight,\n    renderItem,\n    height,\n    overscan = 4,\n    getKey,\n    className,\n    style,\n    label,\n}: VirtualListProps<T>) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const totalHeight = items.length * itemHeight;\n    /*\n     * Rows are absolutely positioned inside the spacer, so nothing in a\n     * virtual list is focusable by default: a keyboard user can see the\n     * scrollbar and has no way to move it. The tab stop only appears while\n     * there is something past the fold — measured from the numbers already at\n     * hand rather than from the DOM.\n     */\n    const scrollable = viewport > 0 && totalHeight - viewport > 1;\n    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n    const visibleCount = Math.ceil(viewport / itemHeight) + overscan * 2;\n    const end = Math.min(items.length, start + visibleCount);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.scroll, className)}\n            style={{ height, ...style }}\n            onScroll={(event) => setScrollTop((event.target as HTMLDivElement).scrollTop)}\n            role=\"list\"\n            aria-label={label}\n            tabIndex={scrollable ? 0 : undefined}\n        >\n            <div className={styles.spacer} style={{ height: totalHeight }}>\n                {items.slice(start, end).map((item, offset) => {\n                    const index = start + offset;\n                    const key = getKey ? getKey(item, index) : index;\n                    return (\n                        <div\n                            key={key}\n                            role=\"listitem\"\n                            className={styles.row}\n                            style={{ top: index * itemHeight, height: itemHeight }}\n                        >\n                            {renderItem(item, index)}\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"kIAwCA,SAAgB,EAAe,CAC3B,QACA,aACA,aACA,SACA,WAAW,EACX,SACA,YACA,QACA,SACoB,CACpB,IAAM,GAAA,EAAA,EAAA,OAAA,CAAsC,IAAI,EAC1C,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAiC,CAAC,EAC9C,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAgC,CAAC,GAElD,EAAA,EAAA,UAAA,KAAgB,CACZ,IAAM,EAAU,EAAa,QAG7B,GAFI,CAAC,IACL,EAAY,EAAQ,YAAY,EAC5B,OAAO,eAAmB,KAAa,OAC3C,IAAM,EAAW,IAAI,mBAAqB,EAAY,EAAQ,YAAY,CAAC,EAE3E,OADA,EAAS,QAAQ,CAAO,MACX,EAAS,WAAW,CACrC,EAAG,CAAC,CAAC,EAEL,IAAM,EAAc,EAAM,OAAS,EAQ7B,EAAa,EAAW,GAAK,EAAc,EAAW,EACtD,EAAQ,KAAK,IAAI,EAAG,KAAK,MAAM,EAAY,CAAU,EAAI,CAAQ,EACjE,EAAe,KAAK,KAAK,EAAW,CAAU,EAAI,EAAW,EAC7D,EAAM,KAAK,IAAI,EAAM,OAAQ,EAAQ,CAAY,EAEvD,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EACtC,MAAO,CAAE,SAAQ,GAAG,CAAM,EAC1B,SAAW,GAAU,EAAc,EAAM,OAA0B,SAAS,EAC5E,KAAK,OACL,aAAY,EACZ,SAAU,EAAa,EAAI,IAAA,aAE3B,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAQ,MAAO,CAAE,OAAQ,CAAY,WACvD,EAAM,MAAM,EAAO,CAAG,CAAC,CAAC,KAAK,EAAM,IAAW,CAC3C,IAAM,EAAQ,EAAQ,EAChB,EAAM,EAAS,EAAO,EAAM,CAAK,EAAI,EAC3C,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAEI,KAAK,WACL,UAAW,EAAA,QAAO,IAClB,MAAO,CAAE,IAAK,EAAQ,EAAY,OAAQ,CAAW,WAEpD,EAAW,EAAM,CAAK,CACtB,EANI,CAMJ,CAEb,CAAC,CACA,CAAA,CACJ,CAAA,CAEb"}
+{"version":3,"file":"VirtualList.cjs","names":[],"sources":["../../../src/components/VirtualList/VirtualList.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — items, itemHeight, height and overscan are the\n * window maths; renderItem and getKey the row contract; label the accessible name of\n * a scroll region. Nine props is what windowing costs — the alternative is the app\n * doing the maths.\n */\nimport { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./VirtualList.module.css\";\n\nexport interface VirtualListProps<T> {\n    items: T[];\n    /** Fixed pixel height for each row. */\n    itemHeight: number;\n    /** Render a single row. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Container height (px) or any CSS length. */\n    height: number | string;\n    /** Number of items rendered above/below the viewport. Default: 4. */\n    overscan?: number;\n    /** Stable key derivation; defaults to the index. */\n    getKey?: (item: T, index: number) => string | number;\n    className?: string;\n    style?: CSSProperties;\n    /**\n     * Accessible name for the list. Worth setting when the list scrolls: it\n     * then carries a tab stop of its own, and a focus stop that announces\n     * nothing is worse than no focus stop.\n     */\n    label?: string;\n}\n\n/**\n * Fixed-height virtual list. Renders only the visible window plus a small\n * overscan buffer. Suitable for lists of thousands of identical rows.\n *\n * For variable heights, use `react-window`/`@tanstack/react-virtual` — those\n * solve a more general problem at the cost of extra setup.\n */\nexport function VirtualList<T>({\n    items,\n    itemHeight,\n    renderItem,\n    height,\n    overscan = 4,\n    getKey,\n    className,\n    style,\n    label,\n}: VirtualListProps<T>) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const totalHeight = items.length * itemHeight;\n    /*\n     * Rows are absolutely positioned inside the spacer, so nothing in a\n     * virtual list is focusable by default: a keyboard user can see the\n     * scrollbar and has no way to move it. The tab stop only appears while\n     * there is something past the fold — measured from the numbers already at\n     * hand rather than from the DOM.\n     */\n    const scrollable = viewport > 0 && totalHeight - viewport > 1;\n    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n    const visibleCount = Math.ceil(viewport / itemHeight) + overscan * 2;\n    const end = Math.min(items.length, start + visibleCount);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.scroll, className)}\n            style={{ height, ...style }}\n            onScroll={(event) => setScrollTop((event.target as HTMLDivElement).scrollTop)}\n            role=\"list\"\n            aria-label={label}\n            tabIndex={scrollable ? 0 : undefined}\n        >\n            <div className={styles.spacer} style={{ height: totalHeight }}>\n                {items.slice(start, end).map((item, offset) => {\n                    const index = start + offset;\n                    const key = getKey ? getKey(item, index) : index;\n                    return (\n                        <div\n                            key={key}\n                            role=\"listitem\"\n                            className={styles.row}\n                            style={{ top: index * itemHeight, height: itemHeight }}\n                        >\n                            {renderItem(item, index)}\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":"kIAwCA,SAAgB,EAAe,CAC3B,QACA,aACA,aACA,SACA,WAAW,EACX,SACA,YACA,QACA,SACoB,CACpB,IAAM,GAAA,EAAe,EAAA,OAAA,CAAuB,IAAI,EAC1C,CAAC,EAAW,IAAA,EAAgB,EAAA,SAAA,CAAiB,CAAC,EAC9C,CAAC,EAAU,IAAA,EAAe,EAAA,SAAA,CAAiB,CAAC,GAElD,EAAA,EAAA,UAAA,KAAgB,CACZ,IAAM,EAAU,EAAa,QAG7B,GAFI,CAAC,IACL,EAAY,EAAQ,YAAY,EAC5B,OAAO,eAAmB,KAAa,OAC3C,IAAM,EAAW,IAAI,mBAAqB,EAAY,EAAQ,YAAY,CAAC,EAE3E,OADA,EAAS,QAAQ,CAAO,MACX,EAAS,WAAW,CACrC,EAAG,CAAC,CAAC,EAEL,IAAM,EAAc,EAAM,OAAS,EAQ7B,EAAa,EAAW,GAAK,EAAc,EAAW,EACtD,EAAQ,KAAK,IAAI,EAAG,KAAK,MAAM,EAAY,CAAU,EAAI,CAAQ,EACjE,EAAe,KAAK,KAAK,EAAW,CAAU,EAAI,EAAW,EAC7D,EAAM,KAAK,IAAI,EAAM,OAAQ,EAAQ,CAAY,EAEvD,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EACtC,MAAO,CAAE,SAAQ,GAAG,CAAM,EAC1B,SAAW,GAAU,EAAc,EAAM,OAA0B,SAAS,EAC5E,KAAK,OACL,aAAY,EACZ,SAAU,EAAa,EAAI,IAAA,GAE3B,UAAA,EAAA,EAAA,IAAA,CAAC,MAAD,CAAK,UAAW,EAAA,QAAO,OAAQ,MAAO,CAAE,OAAQ,CAAY,EACvD,SAAA,EAAM,MAAM,EAAO,CAAG,CAAC,CAAC,KAAK,EAAM,IAAW,CAC3C,IAAM,EAAQ,EAAQ,EAChB,EAAM,EAAS,EAAO,EAAM,CAAK,EAAI,EAC3C,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CAEI,KAAK,WACL,UAAW,EAAA,QAAO,IAClB,MAAO,CAAE,IAAK,EAAQ,EAAY,OAAQ,CAAW,EAEpD,SAAA,EAAW,EAAM,CAAK,CACtB,EANI,CAMJ,CAEb,CAAC,CACA,CAAA,CACJ,CAAA,CAEb"}

package/dist/components/VirtualList/VirtualList.js.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualList.js","names":[],"sources":["../../../src/components/VirtualList/VirtualList.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — items, itemHeight, height and overscan are the\n * window maths; renderItem and getKey the row contract; label the accessible name of\n * a scroll region. Nine props is what windowing costs — the alternative is the app\n * doing the maths.\n */\nimport { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./VirtualList.module.css\";\n\nexport interface VirtualListProps<T> {\n    items: T[];\n    /** Fixed pixel height for each row. */\n    itemHeight: number;\n    /** Render a single row. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Container height (px) or any CSS length. */\n    height: number | string;\n    /** Number of items rendered above/below the viewport. Default: 4. */\n    overscan?: number;\n    /** Stable key derivation; defaults to the index. */\n    getKey?: (item: T, index: number) => string | number;\n    className?: string;\n    style?: CSSProperties;\n    /**\n     * Accessible name for the list. Worth setting when the list scrolls: it\n     * then carries a tab stop of its own, and a focus stop that announces\n     * nothing is worse than no focus stop.\n     */\n    label?: string;\n}\n\n/**\n * Fixed-height virtual list. Renders only the visible window plus a small\n * overscan buffer. Suitable for lists of thousands of identical rows.\n *\n * For variable heights, use `react-window`/`@tanstack/react-virtual` — those\n * solve a more general problem at the cost of extra setup.\n */\nexport function VirtualList<T>({\n    items,\n    itemHeight,\n    renderItem,\n    height,\n    overscan = 4,\n    getKey,\n    className,\n    style,\n    label,\n}: VirtualListProps<T>) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const totalHeight = items.length * itemHeight;\n    /*\n     * Rows are absolutely positioned inside the spacer, so nothing in a\n     * virtual list is focusable by default: a keyboard user can see the\n     * scrollbar and has no way to move it. The tab stop only appears while\n     * there is something past the fold — measured from the numbers already at\n     * hand rather than from the DOM.\n     */\n    const scrollable = viewport > 0 && totalHeight - viewport > 1;\n    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n    const visibleCount = Math.ceil(viewport / itemHeight) + overscan * 2;\n    const end = Math.min(items.length, start + visibleCount);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.scroll, className)}\n            style={{ height, ...style }}\n            onScroll={(event) => setScrollTop((event.target as HTMLDivElement).scrollTop)}\n            role=\"list\"\n            aria-label={label}\n            tabIndex={scrollable ? 0 : undefined}\n        >\n            <div className={styles.spacer} style={{ height: totalHeight }}>\n                {items.slice(start, end).map((item, offset) => {\n                    const index = start + offset;\n                    const key = getKey ? getKey(item, index) : index;\n                    return (\n                        <div\n                            key={key}\n                            role=\"listitem\"\n                            className={styles.row}\n                            style={{ top: index * itemHeight, height: itemHeight }}\n                        >\n                            {renderItem(item, index)}\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;AAwCA,SAAgB,EAAe,EAC3B,UACA,eACA,eACA,WACA,cAAW,GACX,WACA,cACA,UACA,YACoB;CACpB,IAAM,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAW,KAAgB,EAAiB,CAAC,GAC9C,CAAC,GAAU,KAAe,EAAiB,CAAC;CAElD,QAAgB;EACZ,IAAM,IAAU,EAAa;EAG7B,IAFI,CAAC,MACL,EAAY,EAAQ,YAAY,GAC5B,OAAO,iBAAmB,MAAa;EAC3C,IAAM,IAAW,IAAI,qBAAqB,EAAY,EAAQ,YAAY,CAAC;EAE3E,OADA,EAAS,QAAQ,CAAO,SACX,EAAS,WAAW;CACrC,GAAG,CAAC,CAAC;CAEL,IAAM,IAAc,EAAM,SAAS,GAQ7B,IAAa,IAAW,KAAK,IAAc,IAAW,GACtD,IAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,IAAY,CAAU,IAAI,CAAQ,GACjE,IAAe,KAAK,KAAK,IAAW,CAAU,IAAI,IAAW,GAC7D,IAAM,KAAK,IAAI,EAAM,QAAQ,IAAQ,CAAY;CAEvD,OACI,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,EAAG,EAAO,QAAQ,CAAS;EACtC,OAAO;GAAE;GAAQ,GAAG;EAAM;EAC1B,WAAW,MAAU,EAAc,EAAM,OAA0B,SAAS;EAC5E,MAAK;EACL,cAAY;EACZ,UAAU,IAAa,IAAI,KAAA;YAE3B,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAQ,OAAO,EAAE,QAAQ,EAAY;aACvD,EAAM,MAAM,GAAO,CAAG,CAAC,CAAC,KAAK,GAAM,MAAW;IAC3C,IAAM,IAAQ,IAAQ,GAChB,IAAM,IAAS,EAAO,GAAM,CAAK,IAAI;IAC3C,OACI,kBAAC,OAAD;KAEI,MAAK;KACL,WAAW,EAAO;KAClB,OAAO;MAAE,KAAK,IAAQ;MAAY,QAAQ;KAAW;eAEpD,EAAW,GAAM,CAAK;IACtB,GANI,CAMJ;GAEb,CAAC;EACA,CAAA;CACJ,CAAA;AAEb"}
+{"version":3,"file":"VirtualList.js","names":[],"sources":["../../../src/components/VirtualList/VirtualList.tsx"],"sourcesContent":["/**\n * @tempest-limits props-count — items, itemHeight, height and overscan are the\n * window maths; renderItem and getKey the row contract; label the accessible name of\n * a scroll region. Nine props is what windowing costs — the alternative is the app\n * doing the maths.\n */\nimport { useEffect, useRef, useState } from \"react\";\nimport type { CSSProperties, ReactNode } from \"react\";\nimport { cn } from \"@/utils/cn\";\nimport styles from \"./VirtualList.module.css\";\n\nexport interface VirtualListProps<T> {\n    items: T[];\n    /** Fixed pixel height for each row. */\n    itemHeight: number;\n    /** Render a single row. */\n    renderItem: (item: T, index: number) => ReactNode;\n    /** Container height (px) or any CSS length. */\n    height: number | string;\n    /** Number of items rendered above/below the viewport. Default: 4. */\n    overscan?: number;\n    /** Stable key derivation; defaults to the index. */\n    getKey?: (item: T, index: number) => string | number;\n    className?: string;\n    style?: CSSProperties;\n    /**\n     * Accessible name for the list. Worth setting when the list scrolls: it\n     * then carries a tab stop of its own, and a focus stop that announces\n     * nothing is worse than no focus stop.\n     */\n    label?: string;\n}\n\n/**\n * Fixed-height virtual list. Renders only the visible window plus a small\n * overscan buffer. Suitable for lists of thousands of identical rows.\n *\n * For variable heights, use `react-window`/`@tanstack/react-virtual` — those\n * solve a more general problem at the cost of extra setup.\n */\nexport function VirtualList<T>({\n    items,\n    itemHeight,\n    renderItem,\n    height,\n    overscan = 4,\n    getKey,\n    className,\n    style,\n    label,\n}: VirtualListProps<T>) {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n\n    useEffect(() => {\n        const element = containerRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    const totalHeight = items.length * itemHeight;\n    /*\n     * Rows are absolutely positioned inside the spacer, so nothing in a\n     * virtual list is focusable by default: a keyboard user can see the\n     * scrollbar and has no way to move it. The tab stop only appears while\n     * there is something past the fold — measured from the numbers already at\n     * hand rather than from the DOM.\n     */\n    const scrollable = viewport > 0 && totalHeight - viewport > 1;\n    const start = Math.max(0, Math.floor(scrollTop / itemHeight) - overscan);\n    const visibleCount = Math.ceil(viewport / itemHeight) + overscan * 2;\n    const end = Math.min(items.length, start + visibleCount);\n\n    return (\n        <div\n            ref={containerRef}\n            className={cn(styles.scroll, className)}\n            style={{ height, ...style }}\n            onScroll={(event) => setScrollTop((event.target as HTMLDivElement).scrollTop)}\n            role=\"list\"\n            aria-label={label}\n            tabIndex={scrollable ? 0 : undefined}\n        >\n            <div className={styles.spacer} style={{ height: totalHeight }}>\n                {items.slice(start, end).map((item, offset) => {\n                    const index = start + offset;\n                    const key = getKey ? getKey(item, index) : index;\n                    return (\n                        <div\n                            key={key}\n                            role=\"listitem\"\n                            className={styles.row}\n                            style={{ top: index * itemHeight, height: itemHeight }}\n                        >\n                            {renderItem(item, index)}\n                        </div>\n                    );\n                })}\n            </div>\n        </div>\n    );\n}\n"],"mappings":";;;;;AAwCA,SAAgB,EAAe,EAC3B,UACA,eACA,eACA,WACA,cAAW,GACX,WACA,cACA,UACA,YACoB;CACpB,IAAM,IAAe,EAAuB,IAAI,GAC1C,CAAC,GAAW,KAAgB,EAAiB,CAAC,GAC9C,CAAC,GAAU,KAAe,EAAiB,CAAC;CAElD,QAAgB;EACZ,IAAM,IAAU,EAAa;EAG7B,IAFI,CAAC,MACL,EAAY,EAAQ,YAAY,GAC5B,OAAO,iBAAmB,MAAa;EAC3C,IAAM,IAAW,IAAI,qBAAqB,EAAY,EAAQ,YAAY,CAAC;EAE3E,OADA,EAAS,QAAQ,CAAO,SACX,EAAS,WAAW;CACrC,GAAG,CAAC,CAAC;CAEL,IAAM,IAAc,EAAM,SAAS,GAQ7B,IAAa,IAAW,KAAK,IAAc,IAAW,GACtD,IAAQ,KAAK,IAAI,GAAG,KAAK,MAAM,IAAY,CAAU,IAAI,CAAQ,GACjE,IAAe,KAAK,KAAK,IAAW,CAAU,IAAI,IAAW,GAC7D,IAAM,KAAK,IAAI,EAAM,QAAQ,IAAQ,CAAY;CAEvD,OACI,kBAAC,OAAD;EACI,KAAK;EACL,WAAW,EAAG,EAAO,QAAQ,CAAS;EACtC,OAAO;GAAE;GAAQ,GAAG;EAAM;EAC1B,WAAW,MAAU,EAAc,EAAM,OAA0B,SAAS;EAC5E,MAAK;EACL,cAAY;EACZ,UAAU,IAAa,IAAI,KAAA;EAE3B,UAAA,kBAAC,OAAD;GAAK,WAAW,EAAO;GAAQ,OAAO,EAAE,QAAQ,EAAY;GACvD,UAAA,EAAM,MAAM,GAAO,CAAG,CAAC,CAAC,KAAK,GAAM,MAAW;IAC3C,IAAM,IAAQ,IAAQ,GAChB,IAAM,IAAS,EAAO,GAAM,CAAK,IAAI;IAC3C,OACI,kBAAC,OAAD;KAEI,MAAK;KACL,WAAW,EAAO;KAClB,OAAO;MAAE,KAAK,IAAQ;MAAY,QAAQ;KAAW;KAEpD,UAAA,EAAW,GAAM,CAAK;IACtB,GANI,CAMJ;GAEb,CAAC;EACA,CAAA;CACJ,CAAA;AAEb"}

package/dist/components/VirtualTable/VirtualTable.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"VirtualTable.cjs","names":[],"sources":["../../../src/components/VirtualTable/VirtualTable.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count — windowing needs its own measurements\n * (rowHeight, height, overscan, scrollToIndex) on top of everything a table already\n * takes (data, columns, rowKey, initialSort, onRowClick, emptyMessage, caption). The\n * caption is not optional chrome — a virtualised grid without one is unreadable to a\n * screen reader.\n */\nimport {\n    type HTMLAttributes,\n    type ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\n\nimport type { TableAlign } from \"../Table\";\nimport styles from \"./VirtualTable.module.css\";\n\nexport type VirtualTableSortDirection = \"asc\" | \"desc\";\n\nexport interface VirtualTableSort<T> {\n    key: keyof T;\n    direction: VirtualTableSortDirection;\n}\n\nexport interface VirtualTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `row[key]`. */\n    render?: (row: T, index: number) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment. */\n    align?: TableAlign;\n    /**\n     * Column width. Recommended for every column: virtualized rows enter and\n     * leave the DOM as you scroll, so letting the browser auto-size columns from\n     * whatever is currently rendered makes them jump mid-scroll.\n     */\n    width?: string | number;\n}\n\nexport interface VirtualTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Full dataset. Every row is accounted for; only the visible ones render. */\n    data: T[];\n    /** Column definitions. */\n    columns: VirtualTableColumn<T>[];\n    /**\n     * Row height in px. Must be uniform and must match what the CSS produces,\n     * because it is what maps scroll offset to row index.\n     */\n    rowHeight: number;\n    /** Height of the scroll viewport — a number of px or any CSS length. */\n    height: number | string;\n    /** Rows rendered above and below the viewport. Default `4`. */\n    overscan?: number;\n    /** Stable key extractor. Defaults to the row's index in `data`. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Sort applied before any header interaction. */\n    initialSort?: VirtualTableSort<T>;\n    /** Called when a row is activated by click, `Enter` or `Space`. */\n    onRowClick?: (row: T, index: number) => void;\n    /** Content shown when `data` is empty. */\n    emptyMessage?: ReactNode;\n    /** Accessible name for the table. Rendered as a visually hidden `<caption>`. */\n    caption?: ReactNode;\n    /** Scroll this row into view whenever it changes. */\n    scrollToIndex?: number;\n}\n\n/** Resolve a column's alignment to its CSS module class. */\nfunction alignClass(align: TableAlign | undefined): string | undefined {\n    if (align === \"right\") return styles.alignRight;\n    if (align === \"center\") return styles.alignCenter;\n    return undefined;\n}\n\n/**\n * A table that stays responsive at 10k+ rows by rendering only the visible window.\n *\n * `Table` renders every row it is given and `DataTable` paginates to keep that\n * count small; neither has an answer for \"show me all 40 000 rows in one\n * scrollable grid\". This does, at the cost of one constraint: **`rowHeight` must\n * be uniform**, since mapping a scroll offset to a row index is what makes the\n * window computable without measuring anything.\n *\n * It stays a real `<table>`. The window is produced by two spacer rows — one\n * above the visible slice, one below — instead of absolutely positioning rows.\n * That is deliberate: `position: absolute` on `<tr>` collapses table layout, so\n * every column width would have to be computed by hand, and the element would\n * stop being a table for assistive technology. With spacer rows the browser keeps\n * doing column layout and screen readers keep announcing a grid.\n *\n * Because only a slice is in the DOM, `aria-rowcount` on the table and\n * `aria-rowindex` on each row carry the real numbers — without them a screen\n * reader announces \"row 3 of 20\" while the user is on row 5003 of 40 000.\n *\n * @example\n * <VirtualTable\n *     data={rows}\n *     columns={[\n *         { key: \"id\", header: \"#\", width: 80, sortable: true },\n *         { key: \"name\", header: \"Nome\", width: 240, sortable: true },\n *         { key: \"total\", header: \"Total\", align: \"right\", width: 120, sortable: true },\n *     ]}\n *     rowHeight={40}\n *     height={480}\n *     rowKey={(row) => row.id}\n * />\n */\nexport function VirtualTable<T>({\n    data,\n    columns,\n    rowHeight,\n    height,\n    overscan = 4,\n    rowKey,\n    initialSort,\n    onRowClick,\n    emptyMessage = \"Nenhum registro encontrado.\",\n    caption,\n    scrollToIndex,\n    className,\n    ...rest\n}: VirtualTableProps<T>) {\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n    const [sort, setSort] = useState<VirtualTableSort<T> | null>(initialSort ?? null);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element || scrollToIndex == null) return;\n        element.scrollTop = Math.max(0, Math.min(scrollToIndex, data.length - 1)) * rowHeight;\n    }, [scrollToIndex, rowHeight, data.length]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return data;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...data].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [data, sort]);\n\n    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);\n    const windowSize = Math.ceil(viewport / rowHeight) + overscan * 2;\n    const end = Math.min(sorted.length, start + windowSize);\n    const slice = sorted.slice(start, end);\n\n    /**\n     * Advance a column through asc → desc → unsorted, and jump back to the top.\n     *\n     * The scroll reset happens here rather than in an effect keyed on the sort\n     * state for two reasons: this is the actual event that invalidates the offset\n     * (keeping it would leave the user at the same pixel of a different dataset,\n     * which reads as the table having jumped somewhere random), and an effect would\n     * also fire on mount — clobbering an initial `scrollToIndex`.\n     */\n    const toggleSort = useCallback((key: keyof T): void => {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n        const element = scrollRef.current;\n        if (element) element.scrollTop = 0;\n        setScrollTop(0);\n    }, []);\n\n    return (\n        <div\n            ref={scrollRef}\n            className={cn(styles.scroll, className)}\n            style={{ height }}\n            onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}\n            {...rest}\n        >\n            <table className={styles.table} aria-rowcount={sorted.length}>\n                {caption ? <caption className={styles.caption}>{caption}</caption> : null}\n                <thead className={styles.head}>\n                    <tr>\n                        {columns.map((column) => {\n                            const isSorted = sort?.key === column.key;\n                            return (\n                                <th\n                                    key={String(column.key)}\n                                    scope=\"col\"\n                                    className={cn(styles.th, alignClass(column.align))}\n                                    style={{ width: column.width }}\n                                    aria-sort={\n                                        isSorted\n                                            ? sort?.direction === \"asc\"\n                                                ? \"ascending\"\n                                                : \"descending\"\n                                            : column.sortable\n                                              ? \"none\"\n                                              : undefined\n                                    }\n                                >\n                                    {column.sortable ? (\n                                        <button\n                                            type=\"button\"\n                                            className={styles.sortButton}\n                                            onClick={() => toggleSort(column.key)}\n                                        >\n                                            {column.header}\n                                            <span className={styles.sortIndicator} aria-hidden>\n                                                {isSorted\n                                                    ? sort?.direction === \"asc\"\n                                                        ? \"▲\"\n                                                        : \"▼\"\n                                                    : \"↕\"}\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        column.header\n                                    )}\n                                </th>\n                            );\n                        })}\n                    </tr>\n                </thead>\n                <tbody>\n                    {sorted.length === 0 ? (\n                        <tr>\n                            <td className={styles.emptyRow} colSpan={columns.length}>\n                                {emptyMessage}\n                            </td>\n                        </tr>\n                    ) : (\n                        <>\n                            {start > 0 && <tr aria-hidden style={{ height: start * rowHeight }} />}\n                            {slice.map((row, offset) => {\n                                const index = start + offset;\n                                return (\n                                    <tr\n                                        key={rowKey ? rowKey(row, index) : index}\n                                        aria-rowindex={index + 1}\n                                        className={cn(styles.tr, onRowClick && styles.clickable)}\n                                        style={{ height: rowHeight }}\n                                        tabIndex={onRowClick ? 0 : undefined}\n                                        onClick={\n                                            onRowClick ? () => onRowClick(row, index) : undefined\n                                        }\n                                        onKeyDown={\n                                            onRowClick\n                                                ? (event) => {\n                                                      if (\n                                                          event.key === \"Enter\" ||\n                                                          event.key === \" \"\n                                                      ) {\n                                                          event.preventDefault();\n                                                          onRowClick(row, index);\n                                                      }\n                                                  }\n                                                : undefined\n                                        }\n                                    >\n                                        {columns.map((column) => (\n                                            <td\n                                                key={String(column.key)}\n                                                className={cn(styles.td, alignClass(column.align))}\n                                                style={{ width: column.width }}\n                                            >\n                                                {column.render\n                                                    ? column.render(row, index)\n                                                    : ((row[column.key] as ReactNode) ?? null)}\n                                            </td>\n                                        ))}\n                                    </tr>\n                                );\n                            })}\n                            {end < sorted.length && (\n                                <tr\n                                    aria-hidden\n                                    style={{ height: (sorted.length - end) * rowHeight }}\n                                />\n                            )}\n                        </>\n                    )}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"+KA8EA,SAAS,EAAW,EAAmD,CACnE,GAAI,IAAU,QAAS,OAAO,EAAA,QAAO,WACrC,GAAI,IAAU,SAAU,OAAO,EAAA,QAAO,WAE1C,CAmCA,SAAgB,EAAgB,CAC5B,OACA,UACA,YACA,SACA,WAAW,EACX,SACA,cACA,aACA,eAAe,8BACf,UACA,gBACA,YACA,GAAG,GACkB,CACrB,IAAM,GAAA,EAAA,EAAA,OAAA,CAAmC,IAAI,EACvC,CAAC,EAAW,IAAA,EAAA,EAAA,SAAA,CAAiC,CAAC,EAC9C,CAAC,EAAU,IAAA,EAAA,EAAA,SAAA,CAAgC,CAAC,EAC5C,CAAC,EAAM,IAAA,EAAA,EAAA,SAAA,CAAgD,GAAe,IAAI,GAEhF,EAAA,EAAA,UAAA,KAAgB,CACZ,IAAM,EAAU,EAAU,QAG1B,GAFI,CAAC,IACL,EAAY,EAAQ,YAAY,EAC5B,OAAO,eAAmB,KAAa,OAC3C,IAAM,EAAW,IAAI,mBAAqB,EAAY,EAAQ,YAAY,CAAC,EAE3E,OADA,EAAS,QAAQ,CAAO,MACX,EAAS,WAAW,CACrC,EAAG,CAAC,CAAC,GAEL,EAAA,EAAA,UAAA,KAAgB,CACZ,IAAM,EAAU,EAAU,QACtB,CAAC,GAAW,GAAiB,OACjC,EAAQ,UAAY,KAAK,IAAI,EAAG,KAAK,IAAI,EAAe,EAAK,OAAS,CAAC,CAAC,EAAI,EAChF,EAAG,CAAC,EAAe,EAAW,EAAK,MAAM,CAAC,EAE1C,IAAM,GAAA,EAAA,EAAA,QAAA,KAA4B,CAC9B,GAAI,CAAC,EAAM,OAAO,EAClB,IAAM,EAAS,EAAK,YAAc,MAAQ,EAAI,GAC9C,MAAO,CAAC,GAAG,CAAI,CAAC,CAAC,MAAM,EAAG,IAAM,EAAA,cAAc,EAAE,EAAK,KAAM,EAAE,EAAK,IAAI,EAAI,CAAM,CACpF,EAAG,CAAC,EAAM,CAAI,CAAC,EAET,EAAQ,KAAK,IAAI,EAAG,KAAK,MAAM,EAAY,CAAS,EAAI,CAAQ,EAChE,EAAa,KAAK,KAAK,EAAW,CAAS,EAAI,EAAW,EAC1D,EAAM,KAAK,IAAI,EAAO,OAAQ,EAAQ,CAAU,EAChD,EAAQ,EAAO,MAAM,EAAO,CAAG,EAW/B,GAAA,EAAA,EAAA,YAAA,CAA0B,GAAuB,CACnD,EAAS,GACD,CAAC,GAAW,EAAQ,MAAQ,EAAY,CAAE,MAAK,UAAW,KAAM,EAChE,EAAQ,YAAc,MAAc,CAAE,MAAK,UAAW,MAAO,EAC1D,IACV,EACD,IAAM,EAAU,EAAU,QACtB,IAAS,EAAQ,UAAY,GACjC,EAAa,CAAC,CAClB,EAAG,CAAC,CAAC,EAEL,OACI,EAAA,EAAA,IAAA,CAAC,MAAD,CACI,IAAK,EACL,UAAW,EAAA,GAAG,EAAA,QAAO,OAAQ,CAAS,EACtC,MAAO,CAAE,QAAO,EAChB,SAAW,GAAU,EAAa,EAAM,cAAc,SAAS,EAC/D,GAAI,YAEJ,EAAA,EAAA,KAAA,CAAC,QAAD,CAAO,UAAW,EAAA,QAAO,MAAO,gBAAe,EAAO,gBAAtD,CACK,GAAU,EAAA,EAAA,IAAA,CAAC,UAAD,CAAS,UAAW,EAAA,QAAO,iBAAU,CAAiB,CAAA,EAAI,MACrE,EAAA,EAAA,IAAA,CAAC,QAAD,CAAO,UAAW,EAAA,QAAO,eACrB,EAAA,EAAA,IAAA,CAAC,KAAD,CAAA,SACK,EAAQ,IAAK,GAAW,CACrB,IAAM,EAAW,GAAM,MAAQ,EAAO,IACtC,OACI,EAAA,EAAA,IAAA,CAAC,KAAD,CAEI,MAAM,MACN,UAAW,EAAA,GAAG,EAAA,QAAO,GAAI,EAAW,EAAO,KAAK,CAAC,EACjD,MAAO,CAAE,MAAO,EAAO,KAAM,EAC7B,YACI,EACM,GAAM,YAAc,MAChB,YACA,aACJ,EAAO,SACL,OACA,IAAA,YAGX,EAAO,UACJ,EAAA,EAAA,KAAA,CAAC,SAAD,CACI,KAAK,SACL,UAAW,EAAA,QAAO,WAClB,YAAe,EAAW,EAAO,GAAG,WAHxC,CAKK,EAAO,QACR,EAAA,EAAA,IAAA,CAAC,OAAD,CAAM,UAAW,EAAA,QAAO,cAAe,cAAA,YAClC,EACK,GAAM,YAAc,MAChB,IACA,IACJ,GACJ,CAAA,CACF,IAER,EAAO,MAEX,EAhCK,OAAO,EAAO,GAAG,CAgCtB,CAEZ,CAAC,CACD,CAAA,CACD,CAAA,GACP,EAAA,EAAA,IAAA,CAAC,QAAD,CAAA,SACK,EAAO,SAAW,GACf,EAAA,EAAA,IAAA,CAAC,KAAD,CAAA,UACI,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,UAAW,EAAA,QAAO,SAAU,QAAS,EAAQ,gBAC5C,CACD,CAAA,CACJ,CAAA,GAEJ,EAAA,EAAA,KAAA,CAAA,EAAA,SAAA,CAAA,SAAA,CACK,EAAQ,IAAK,EAAA,EAAA,IAAA,CAAC,KAAD,CAAI,cAAA,GAAY,MAAO,CAAE,OAAQ,EAAQ,CAAU,CAAI,CAAA,EACpE,EAAM,KAAK,EAAK,IAAW,CACxB,IAAM,EAAQ,EAAQ,EACtB,OACI,EAAA,EAAA,IAAA,CAAC,KAAD,CAEI,gBAAe,EAAQ,EACvB,UAAW,EAAA,GAAG,EAAA,QAAO,GAAI,GAAc,EAAA,QAAO,SAAS,EACvD,MAAO,CAAE,OAAQ,CAAU,EAC3B,SAAU,EAAa,EAAI,IAAA,GAC3B,QACI,MAAmB,EAAW,EAAK,CAAK,EAAI,IAAA,GAEhD,UACI,EACO,GAAU,EAEH,EAAM,MAAQ,SACd,EAAM,MAAQ,OAEd,EAAM,eAAe,EACrB,EAAW,EAAK,CAAK,EAE7B,EACA,IAAA,YAGT,EAAQ,IAAK,IACV,EAAA,EAAA,IAAA,CAAC,KAAD,CAEI,UAAW,EAAA,GAAG,EAAA,QAAO,GAAI,EAAW,EAAO,KAAK,CAAC,EACjD,MAAO,CAAE,MAAO,EAAO,KAAM,WAE5B,EAAO,OACF,EAAO,OAAO,EAAK,CAAK,EACtB,EAAI,EAAO,MAAsB,IACzC,EAPK,OAAO,EAAO,GAAG,CAOtB,CACP,CACD,EAjCK,EAAS,EAAO,EAAK,CAAK,EAAI,CAiCnC,CAEZ,CAAC,EACA,EAAM,EAAO,SACV,EAAA,EAAA,IAAA,CAAC,KAAD,CACI,cAAA,GACA,MAAO,CAAE,QAAS,EAAO,OAAS,GAAO,CAAU,CACtD,CAAA,CAEP,CAAA,CAAA,CAEH,CAAA,CACJ,GACN,CAAA,CAEb"}
+{"version":3,"file":"VirtualTable.cjs","names":[],"sources":["../../../src/components/VirtualTable/VirtualTable.tsx"],"sourcesContent":["/**\n * @tempest-limits file-lines, props-count — windowing needs its own measurements\n * (rowHeight, height, overscan, scrollToIndex) on top of everything a table already\n * takes (data, columns, rowKey, initialSort, onRowClick, emptyMessage, caption). The\n * caption is not optional chrome — a virtualised grid without one is unreadable to a\n * screen reader.\n */\nimport {\n    type HTMLAttributes,\n    type ReactNode,\n    useCallback,\n    useEffect,\n    useMemo,\n    useRef,\n    useState,\n} from \"react\";\n\nimport { cn } from \"@/utils/cn\";\nimport { compareValues } from \"@/utils/compare-values\";\n\nimport type { TableAlign } from \"../Table\";\nimport styles from \"./VirtualTable.module.css\";\n\nexport type VirtualTableSortDirection = \"asc\" | \"desc\";\n\nexport interface VirtualTableSort<T> {\n    key: keyof T;\n    direction: VirtualTableSortDirection;\n}\n\nexport interface VirtualTableColumn<T> {\n    /** Property of the row this column reads from. Doubles as the cell key. */\n    key: keyof T;\n    /** Column heading. */\n    header: ReactNode;\n    /** Custom cell renderer. Defaults to `row[key]`. */\n    render?: (row: T, index: number) => ReactNode;\n    /** Enable click-to-sort on this column's header. */\n    sortable?: boolean;\n    /** Text alignment. */\n    align?: TableAlign;\n    /**\n     * Column width. Recommended for every column: virtualized rows enter and\n     * leave the DOM as you scroll, so letting the browser auto-size columns from\n     * whatever is currently rendered makes them jump mid-scroll.\n     */\n    width?: string | number;\n}\n\nexport interface VirtualTableProps<T> extends Omit<HTMLAttributes<HTMLDivElement>, \"children\"> {\n    /** Full dataset. Every row is accounted for; only the visible ones render. */\n    data: T[];\n    /** Column definitions. */\n    columns: VirtualTableColumn<T>[];\n    /**\n     * Row height in px. Must be uniform and must match what the CSS produces,\n     * because it is what maps scroll offset to row index.\n     */\n    rowHeight: number;\n    /** Height of the scroll viewport — a number of px or any CSS length. */\n    height: number | string;\n    /** Rows rendered above and below the viewport. Default `4`. */\n    overscan?: number;\n    /** Stable key extractor. Defaults to the row's index in `data`. */\n    rowKey?: (row: T, index: number) => string | number;\n    /** Sort applied before any header interaction. */\n    initialSort?: VirtualTableSort<T>;\n    /** Called when a row is activated by click, `Enter` or `Space`. */\n    onRowClick?: (row: T, index: number) => void;\n    /** Content shown when `data` is empty. */\n    emptyMessage?: ReactNode;\n    /** Accessible name for the table. Rendered as a visually hidden `<caption>`. */\n    caption?: ReactNode;\n    /** Scroll this row into view whenever it changes. */\n    scrollToIndex?: number;\n}\n\n/** Resolve a column's alignment to its CSS module class. */\nfunction alignClass(align: TableAlign | undefined): string | undefined {\n    if (align === \"right\") return styles.alignRight;\n    if (align === \"center\") return styles.alignCenter;\n    return undefined;\n}\n\n/**\n * A table that stays responsive at 10k+ rows by rendering only the visible window.\n *\n * `Table` renders every row it is given and `DataTable` paginates to keep that\n * count small; neither has an answer for \"show me all 40 000 rows in one\n * scrollable grid\". This does, at the cost of one constraint: **`rowHeight` must\n * be uniform**, since mapping a scroll offset to a row index is what makes the\n * window computable without measuring anything.\n *\n * It stays a real `<table>`. The window is produced by two spacer rows — one\n * above the visible slice, one below — instead of absolutely positioning rows.\n * That is deliberate: `position: absolute` on `<tr>` collapses table layout, so\n * every column width would have to be computed by hand, and the element would\n * stop being a table for assistive technology. With spacer rows the browser keeps\n * doing column layout and screen readers keep announcing a grid.\n *\n * Because only a slice is in the DOM, `aria-rowcount` on the table and\n * `aria-rowindex` on each row carry the real numbers — without them a screen\n * reader announces \"row 3 of 20\" while the user is on row 5003 of 40 000.\n *\n * @example\n * <VirtualTable\n *     data={rows}\n *     columns={[\n *         { key: \"id\", header: \"#\", width: 80, sortable: true },\n *         { key: \"name\", header: \"Nome\", width: 240, sortable: true },\n *         { key: \"total\", header: \"Total\", align: \"right\", width: 120, sortable: true },\n *     ]}\n *     rowHeight={40}\n *     height={480}\n *     rowKey={(row) => row.id}\n * />\n */\nexport function VirtualTable<T>({\n    data,\n    columns,\n    rowHeight,\n    height,\n    overscan = 4,\n    rowKey,\n    initialSort,\n    onRowClick,\n    emptyMessage = \"Nenhum registro encontrado.\",\n    caption,\n    scrollToIndex,\n    className,\n    ...rest\n}: VirtualTableProps<T>) {\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const [scrollTop, setScrollTop] = useState<number>(0);\n    const [viewport, setViewport] = useState<number>(0);\n    const [sort, setSort] = useState<VirtualTableSort<T> | null>(initialSort ?? null);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element) return;\n        setViewport(element.clientHeight);\n        if (typeof ResizeObserver === \"undefined\") return;\n        const observer = new ResizeObserver(() => setViewport(element.clientHeight));\n        observer.observe(element);\n        return () => observer.disconnect();\n    }, []);\n\n    useEffect(() => {\n        const element = scrollRef.current;\n        if (!element || scrollToIndex == null) return;\n        element.scrollTop = Math.max(0, Math.min(scrollToIndex, data.length - 1)) * rowHeight;\n    }, [scrollToIndex, rowHeight, data.length]);\n\n    const sorted = useMemo<T[]>(() => {\n        if (!sort) return data;\n        const factor = sort.direction === \"asc\" ? 1 : -1;\n        return [...data].sort((a, b) => compareValues(a[sort.key], b[sort.key]) * factor);\n    }, [data, sort]);\n\n    const start = Math.max(0, Math.floor(scrollTop / rowHeight) - overscan);\n    const windowSize = Math.ceil(viewport / rowHeight) + overscan * 2;\n    const end = Math.min(sorted.length, start + windowSize);\n    const slice = sorted.slice(start, end);\n\n    /**\n     * Advance a column through asc → desc → unsorted, and jump back to the top.\n     *\n     * The scroll reset happens here rather than in an effect keyed on the sort\n     * state for two reasons: this is the actual event that invalidates the offset\n     * (keeping it would leave the user at the same pixel of a different dataset,\n     * which reads as the table having jumped somewhere random), and an effect would\n     * also fire on mount — clobbering an initial `scrollToIndex`.\n     */\n    const toggleSort = useCallback((key: keyof T): void => {\n        setSort((current) => {\n            if (!current || current.key !== key) return { key, direction: \"asc\" };\n            if (current.direction === \"asc\") return { key, direction: \"desc\" };\n            return null;\n        });\n        const element = scrollRef.current;\n        if (element) element.scrollTop = 0;\n        setScrollTop(0);\n    }, []);\n\n    return (\n        <div\n            ref={scrollRef}\n            className={cn(styles.scroll, className)}\n            style={{ height }}\n            onScroll={(event) => setScrollTop(event.currentTarget.scrollTop)}\n            {...rest}\n        >\n            <table className={styles.table} aria-rowcount={sorted.length}>\n                {caption ? <caption className={styles.caption}>{caption}</caption> : null}\n                <thead className={styles.head}>\n                    <tr>\n                        {columns.map((column) => {\n                            const isSorted = sort?.key === column.key;\n                            return (\n                                <th\n                                    key={String(column.key)}\n                                    scope=\"col\"\n                                    className={cn(styles.th, alignClass(column.align))}\n                                    style={{ width: column.width }}\n                                    aria-sort={\n                                        isSorted\n                                            ? sort?.direction === \"asc\"\n                                                ? \"ascending\"\n                                                : \"descending\"\n                                            : column.sortable\n                                              ? \"none\"\n                                              : undefined\n                                    }\n                                >\n                                    {column.sortable ? (\n                                        <button\n                                            type=\"button\"\n                                            className={styles.sortButton}\n                                            onClick={() => toggleSort(column.key)}\n                                        >\n                                            {column.header}\n                                            <span className={styles.sortIndicator} aria-hidden>\n                                                {isSorted\n                                                    ? sort?.direction === \"asc\"\n                                                        ? \"▲\"\n                                                        : \"▼\"\n                                                    : \"↕\"}\n                                            </span>\n                                        </button>\n                                    ) : (\n                                        column.header\n                                    )}\n                                </th>\n                            );\n                        })}\n                    </tr>\n                </thead>\n                <tbody>\n                    {sorted.length === 0 ? (\n                        <tr>\n                            <td className={styles.emptyRow} colSpan={columns.length}>\n                                {emptyMessage}\n                            </td>\n                        </tr>\n                    ) : (\n                        <>\n                            {start > 0 && <tr aria-hidden style={{ height: start * rowHeight }} />}\n                            {slice.map((row, offset) => {\n                                const index = start + offset;\n                                return (\n                                    <tr\n                                        key={rowKey ? rowKey(row, index) : index}\n                                        aria-rowindex={index + 1}\n                                        className={cn(styles.tr, onRowClick && styles.clickable)}\n                                        style={{ height: rowHeight }}\n                                        tabIndex={onRowClick ? 0 : undefined}\n                                        onClick={\n                                            onRowClick ? () => onRowClick(row, index) : undefined\n                                        }\n                                        onKeyDown={\n                                            onRowClick\n                                                ? (event) => {\n                                                      if (\n                                                          event.key === \"Enter\" ||\n                                                          event.key === \" \"\n                                                      ) {\n                                                          event.preventDefault();\n                                                          onRowClick(row, index);\n                                                      }\n                                                  }\n                                                : undefined\n                                        }\n                                    >\n                                        {columns.map((column) => (\n                                            <td\n                                                key={String(column.key)}\n                                                className={cn(styles.td, alignClass(column.align))}\n                                                style={{ width: column.width }}\n                                            >\n                                                {column.render\n                                                    ? column.render(row, index)\n                                                    : ((row[column.key] as ReactNode) ?? null)}\n                                            </td>\n                                        ))}\n                                    </tr>\n                                );\n                            })}\n                            {end < sorted.length && (\n                                <tr\n                                    aria-hidden\n                                    style={{ height: (sorted.length - end) * rowHeight }}\n                                />\n                            )}\n                        </>\n                    )}\n                </tbody>\n            </table>\n        </div>\n    );\n}\n"],"mappings":"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"}