atlas-react-kit 0.10.0 → 0.11.0

package/dist/search-picker.js

@@ -3,15 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
-import { listboxOptionId, moveListboxHighlight, scrollOptionIntoView, } from "./internal/listbox-navigation.js";
-import { listboxEmpty, optionState } from "./internal/styles.js";
+import { foldSearchText, handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
+import { ListboxEmptyStatus, ListboxOption } from "./internal/listbox-option.js";
 import { cn } from "./utils.js";
-/**
- * Case-fold and strip combining marks so "nino" matches "Niño".
- */
-export function foldSearchText(value) {
-    return value.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
-}
+export { foldSearchText };
 /**
  * Default SearchPicker filter: the folded label includes the folded query.
  */
@@ -21,12 +16,14 @@ export function defaultSearchFilter(item, query, getLabel) {
         return true;
     return foldSearchText(getLabel(item)).includes(needle);
 }
+/** Frame shared by the listbox and the empty state that replaces it. */
+const listFrame = "border border-input bg-background";
 /**
  * Always-visible combobox: a labelled input and a listbox. Unlike Combobox,
  * the list is not in a popover. Keyboard: arrows, Home/End, PageUp/PageDown,
  * Enter, Escape.
  */
-function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter, value, onSelect, label, placeholder = "Search", emptyText = "No results", listLabel, disabled, className, listClassName, }) {
+function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter, value, onSelect, label, placeholder = "Search", emptyText = "No results", listLabel, disabled, className, listClassName, ...props }) {
     const [query, setQuery] = React.useState("");
     const listId = React.useId();
     const inputId = React.useId();
@@ -62,38 +59,36 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         setHighlight(query ? 0 : selectedIndex);
     }
     const active = filtered[highlight];
+    const empty = filtered.length === 0;
     const selectItem = (item) => {
         onSelect(item);
         setQuery("");
     };
     const onKeyDown = (event) => {
-        const nextHighlight = moveListboxHighlight(event.key, highlight, filtered.length);
-        if (nextHighlight !== undefined) {
-            event.preventDefault();
-            setHighlight(nextHighlight);
+        const handled = handleListboxKey(event, {
+            highlight,
+            length: filtered.length,
+            setHighlight,
+            onEnter: (index) => {
+                const item = filtered[index];
+                if (item)
+                    selectItem(item);
+            },
+        });
+        if (handled || event.key !== "Escape")
+            return;
+        event.preventDefault();
+        if (query) {
+            setQuery("");
             return;
         }
-        if (event.key === "Enter") {
-            event.preventDefault();
-            if (active)
-                selectItem(active);
-        }
-        if (event.key === "Escape") {
-            event.preventDefault();
-            if (query) {
-                setQuery("");
-                return;
-            }
-            event.currentTarget.blur();
-        }
+        event.currentTarget.blur();
     };
-    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? listboxOptionId(listId, highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: cn("max-h-60 overflow-y-auto border border-input bg-background", listClassName), children: filtered.length === 0 ? (_jsx("li", { className: listboxEmpty, children: emptyText })) : (filtered.map((item, index) => {
+    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? listboxOptionId(listId, highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: empty
+                    ? "sr-only"
+                    : cn("max-h-60 overflow-y-auto", listFrame, listClassName), children: filtered.map((item, index) => {
                     const itemValue = getValue(item);
-                    const isSelected = itemValue === value;
-                    const isActive = index === highlight;
-                    return (_jsx("li", { role: "none", children: _jsx("button", { ref: isActive ? scrollOptionIntoView : undefined, id: listboxOptionId(listId, index), type: "button", role: "option", "aria-selected": isSelected, disabled: disabled, className: cn("relative flex w-full cursor-default items-center rounded-none py-2 pr-3 pl-3 text-left text-sm outline-hidden select-none", isSelected && optionState.selected, isActive && optionState.active, isActive &&
-                                !isSelected &&
-                                "bg-accent text-accent-foreground"), onMouseEnter: () => setHighlight(index), onClick: () => selectItem(item), children: _jsx("span", { className: "truncate", children: getLabel(item) }) }) }, itemValue));
-                })) })] }));
+                    return (_jsx(ListboxOption, { "data-slot": "search-picker-option", listId: listId, index: index, active: index === highlight, selected: itemValue === value, disabled: disabled, className: "pr-3", onMouseEnter: () => setHighlight(index), onClick: () => selectItem(item), children: _jsx("span", { className: "truncate", children: getLabel(item) }) }, itemValue));
+                }) }), _jsx(ListboxEmptyStatus, { "data-slot": "search-picker-empty", empty: empty, className: listFrame, children: emptyText })] }));
 }
 export { SearchPicker };

package/dist/select.js

@@ -3,8 +3,14 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
 import { dataDisabledState, disabledState, fieldSurface, focusRing, invalidState, optionState, } from "./internal/styles.js";
+import { menuLabel, optionIcon, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
 import { cn } from "./utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
+/**
+ * Trigger heights as plain classes, so a consumer `className` such as `h-8`
+ * replaces them (a `data-[size=*]:` variant would outrank it).
+ */
+const triggerHeight = { default: "h-10", sm: "h-9" };
 const scrollButtonClassName = "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5";
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
@@ -16,20 +22,20 @@ function SelectValue({ ...props }) {
     return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(fieldSurface, focusRing, invalidState, disabledState, "flex items-center justify-between gap-1.5 whitespace-nowrap data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(fieldSurface, focusRing, invalidState, disabledState, optionIcon, triggerHeight[size], "flex items-center justify-between gap-1.5 whitespace-nowrap data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { "data-slot": "select-icon", asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, position = "popper", align = "center", sideOffset = 4, collisionPadding = 8, ...props }) {
-    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" &&
-                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-position": position, className: "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", children: children }), _jsx(SelectScrollDownButton, {})] }) }));
+    return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn(overlaySurface, overlaySideSlide, overlayFadeZoom, "relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", position === "popper" &&
+                "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, sideOffset: sideOffset, collisionPadding: collisionPadding, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { "data-slot": "select-viewport", "data-position": position, className: "data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)", children: children }), _jsx(SelectScrollDownButton, {})] }) }));
 }
 function SelectLabel({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase", className), ...props }));
+    return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn(menuLabel, className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionState.focus, optionState.checked, dataDisabledState, "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pr-8 pl-3 text-sm outline-hidden select-none not-data-[variant=destructive]:focus:**:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionRow, optionState.focus, optionState.checked, dataDisabledState, optionIcon, "pr-8 not-data-[variant=destructive]:focus:**:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { "data-slot": "select-item-indicator", children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
-    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1.5 my-1.5 h-px bg-border/50", className), ...props }));
+    return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1.5 my-1.5 h-px bg-border", className), ...props }));
 }
 function SelectScrollUpButton({ className, ...props }) {
     return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn(scrollButtonClassName, className), ...props, children: _jsx(ChevronUpIcon, {}) }));

package/dist/separator.d.ts

@@ -1,4 +1,8 @@
 import * as React from "react";
 import { Separator as SeparatorPrimitive } from "radix-ui";
+/**
+ * Hairline divider. Its thickness and length are plain classes picked from
+ * `orientation`, so `className="w-12"` or `"w-0.5"` replaces them.
+ */
 declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
 export { Separator };

package/dist/separator.js

@@ -3,7 +3,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Separator as SeparatorPrimitive } from "radix-ui";
 import { cn } from "./utils.js";
+/**
+ * Hairline divider. Its thickness and length are plain classes picked from
+ * `orientation`, so `className="w-12"` or `"w-0.5"` replaces them.
+ */
 function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
-    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border data-horizontal:h-px data-horizontal:w-full data-vertical:w-px data-vertical:self-stretch", className), ...props }));
+    return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border", orientation === "vertical" ? "w-px self-stretch" : "h-px w-full", className), ...props }));
 }
 export { Separator };

package/dist/slider.d.ts

@@ -1,4 +1,6 @@
-export type SliderProps = {
+import type * as React from "react";
+import { Slider as SliderPrimitive } from "radix-ui";
+export type SliderProps = Omit<React.ComponentProps<typeof SliderPrimitive.Root>, "value" | "defaultValue" | "onValueChange" | "onValueCommit" | "children"> & {
     value: number;
     onValueChange: (value: number) => void;
     onValueCommit?: (value: number) => void;
@@ -6,6 +8,7 @@ export type SliderProps = {
     max?: number;
     step?: number;
     disabled?: boolean;
+    /** Goes on the thumb, so a `<Label htmlFor>` names the slider. */
     id?: string;
     name?: string;
     className?: string;
@@ -14,7 +17,9 @@ export type SliderProps = {
 };
 /**
  * Single-thumb range on Radix Slider. Square track and thumb, primary fill,
- * solid focus ring, 44px thumb hit area. Pair with a visible `Label`.
+ * solid focus ring, 44px thumb hit area. Pair with a visible `Label`. Other
+ * props (`orientation`, `inverted`, `data-*`) go to the Radix root; `id`
+ * and the accessible name go to the thumb.
  */
-declare function Slider({ value, onValueChange, onValueCommit, min, max, step, disabled, id, name, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: SliderProps): import("react").JSX.Element;
+declare function Slider({ value, onValueChange, onValueCommit, min, max, step, id, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }: SliderProps): React.JSX.Element;
 export { Slider };

package/dist/slider.js

@@ -1,14 +1,16 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slider as SliderPrimitive } from "radix-ui";
-import { dataDisabledState, focusRing } from "./internal/styles.js";
+import { dataDisabledState, focusRing, hitArea44 } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Single-thumb range on Radix Slider. Square track and thumb, primary fill,
- * solid focus ring, 44px thumb hit area. Pair with a visible `Label`.
+ * solid focus ring, 44px thumb hit area. Pair with a visible `Label`. Other
+ * props (`orientation`, `inverted`, `data-*`) go to the Radix root; `id`
+ * and the accessible name go to the thumb.
  */
-function Slider({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, disabled, id, name, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }) {
-    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", name: name, min: min, max: max, step: step, disabled: disabled, value: [value], onValueChange: (next) => {
+function Slider({ value, onValueChange, onValueCommit, min = 0, max = 100, step = 1, id, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, ...props }) {
+    return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", ...props, min: min, max: max, step: step, value: [value], onValueChange: (next) => {
             const amount = next[0];
             if (amount !== undefined)
                 onValueChange(amount);
@@ -16,6 +18,6 @@ function Slider({ value, onValueChange, onValueCommit, min = 0, max = 100, step
             const amount = next[0];
             if (amount !== undefined)
                 onValueCommit?.(amount);
-        }, className: cn(dataDisabledState, "relative flex w-full touch-none items-center select-none", className), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative h-1.5 w-full grow overflow-hidden rounded-none bg-muted", children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-slot": "slider-thumb", className: cn(focusRing, "relative block size-4 shrink-0 rounded-none border border-primary bg-background shadow-xs after:absolute after:top-1/2 after:left-1/2 after:size-11 after:-translate-x-1/2 after:-translate-y-1/2") })] }));
+        }, className: cn(dataDisabledState, "relative flex w-full touch-none items-center select-none", className), children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: "relative h-1.5 w-full grow overflow-hidden rounded-none bg-muted", children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: "absolute h-full bg-primary" }) }), _jsx(SliderPrimitive.Thumb, { id: id, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, "data-slot": "slider-thumb", className: cn(focusRing, hitArea44, "relative block size-4 shrink-0 rounded-none border border-primary bg-background shadow-xs") })] }));
 }
 export { Slider };

package/dist/sortable-table-head.d.ts

@@ -6,10 +6,12 @@ type SortableTableHeadProps = ComponentProps<typeof TableHead> & {
     sorted?: boolean;
     direction?: SortDirection;
     onClick?: () => void;
+    /** Classes for the inner sort button (`data-slot="sortable-table-head-button"`). */
+    buttonClassName?: string;
 };
 /**
  * Table header cell with `aria-sort` and a button affordance.
  * Column keys and comparators stay in the application.
  */
-export declare function SortableTableHead({ children, sorted, direction, onClick, className, ...props }: SortableTableHeadProps): import("react").JSX.Element;
+export declare function SortableTableHead({ children, sorted, direction, onClick, className, buttonClassName, ...props }: SortableTableHeadProps): import("react").JSX.Element;
 export {};

package/dist/sortable-table-head.js

@@ -2,15 +2,16 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ChevronDownIcon, ChevronUpIcon, ChevronsUpDownIcon, } from "lucide-react";
 import { TableHead } from "./table.js";
+import { cn } from "./utils.js";
 /**
  * Table header cell with `aria-sort` and a button affordance.
  * Column keys and comparators stay in the application.
  */
-export function SortableTableHead({ children, sorted = false, direction = "asc", onClick, className, ...props }) {
+export function SortableTableHead({ children, sorted = false, direction = "asc", onClick, className, buttonClassName, ...props }) {
     const ariaSort = sorted
         ? direction === "asc"
             ? "ascending"
             : "descending"
         : "none";
-    return (_jsx(TableHead, { "aria-sort": ariaSort, className: className, ...props, children: _jsxs("button", { type: "button", onClick: onClick, className: "inline-flex items-center gap-1 rounded-none hover:text-foreground", children: [children, sorted ? (direction === "asc" ? (_jsx(ChevronUpIcon, { className: "size-3.5", "aria-hidden": "true" })) : (_jsx(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" }))) : (_jsx(ChevronsUpDownIcon, { className: "size-3.5 opacity-40", "aria-hidden": "true" }))] }) }));
+    return (_jsx(TableHead, { "aria-sort": ariaSort, className: className, ...props, children: _jsxs("button", { type: "button", onClick: onClick, "data-slot": "sortable-table-head-button", className: cn("inline-flex items-center gap-1 rounded-none hover:text-foreground", buttonClassName), children: [children, sorted ? (direction === "asc" ? (_jsx(ChevronUpIcon, { className: "size-3.5", "aria-hidden": "true" })) : (_jsx(ChevronDownIcon, { className: "size-3.5", "aria-hidden": "true" }))) : (_jsx(ChevronsUpDownIcon, { className: "size-3.5 text-muted-foreground", "aria-hidden": "true" }))] }) }));
 }

package/dist/stat-tile.d.ts

@@ -1,12 +1,13 @@
 import type * as React from "react";
+import { sectionLabel } from "./internal/styles.js";
 /**
  * Uppercase muted label used on tiles and thin section chrome. Apps that
  * only needed a heading class can import this instead of a wrapper.
  */
-export declare const sectionLabel = "text-xs font-semibold tracking-widest text-muted-foreground uppercase";
+export { sectionLabel };
 /** Row of tiles: stacked on phones, divided columns from `sm`. */
 export declare const statTileGrid = "grid ring-1 ring-foreground/5 sm:divide-x";
-export type StatTileProps = {
+export type StatTileProps = Omit<React.ComponentProps<"div">, "children" | "title"> & {
     label: string;
     value: string;
     sub?: React.ReactNode;
@@ -15,7 +16,8 @@ export type StatTileProps = {
 };
 /**
  * Label, big tabular figure, optional extra (a meter), muted sub line.
- * Domain copy and status colors stay in the app.
+ * Domain copy and status colors stay in the app. Other props go to the
+ * root `div`; parts carry `data-slot="stat-tile-label|value|sub"`.
  */
-declare function StatTile({ label, value, sub, children, className }: StatTileProps): React.JSX.Element;
+declare function StatTile({ label, value, sub, children, className, ...props }: StatTileProps): React.JSX.Element;
 export { StatTile };

package/dist/stat-tile.js

@@ -1,17 +1,19 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sectionLabel } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Uppercase muted label used on tiles and thin section chrome. Apps that
  * only needed a heading class can import this instead of a wrapper.
  */
-export const sectionLabel = "text-xs font-semibold tracking-widest text-muted-foreground uppercase";
+export { sectionLabel };
 /** Row of tiles: stacked on phones, divided columns from `sm`. */
 export const statTileGrid = "grid ring-1 ring-foreground/5 sm:divide-x";
 /**
  * Label, big tabular figure, optional extra (a meter), muted sub line.
- * Domain copy and status colors stay in the app.
+ * Domain copy and status colors stay in the app. Other props go to the
+ * root `div`; parts carry `data-slot="stat-tile-label|value|sub"`.
  */
-function StatTile({ label, value, sub, children, className }) {
-    return (_jsxs("div", { "data-slot": "stat-tile", className: cn("flex flex-col gap-1 px-3 py-2", className), children: [_jsx("span", { className: sectionLabel, children: label }), _jsx("span", { className: "text-lg font-semibold tracking-tight tabular-nums", children: value }), children, sub ? (_jsx("span", { className: "text-xs leading-snug text-muted-foreground", children: sub })) : null] }));
+function StatTile({ label, value, sub, children, className, ...props }) {
+    return (_jsxs("div", { "data-slot": "stat-tile", className: cn("flex flex-col gap-1 px-3 py-2", className), ...props, children: [_jsx("span", { "data-slot": "stat-tile-label", className: sectionLabel, children: label }), _jsx("span", { "data-slot": "stat-tile-value", className: "text-lg font-semibold tracking-tight tabular-nums", children: value }), children, sub ? (_jsx("span", { "data-slot": "stat-tile-sub", className: "text-xs leading-snug text-muted-foreground", children: sub })) : null] }));
 }
 export { StatTile };

package/dist/switch.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Switch as SwitchPrimitive } from "radix-ui";
-import { disabledState, focusRing, invalidState } from "./internal/styles.js";
+import { choiceHitArea, disabledState, focusRing, invalidState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * On/off setting that applies immediately (notifications, dark mode). Use
@@ -10,6 +10,6 @@ import { cn } from "./utils.js";
  * primitives; checked uses the primary fill, as `Checkbox` does.
  */
 function Switch({ className, ...props }) {
-    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn(focusRing, invalidState, disabledState, "peer inline-flex h-5 w-9 shrink-0 items-center rounded-none border border-transparent bg-input p-0.5 shadow-xs transition-colors data-checked:bg-primary dark:data-checked:bg-primary", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block size-3.5 rounded-none bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground" }) }));
+    return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", className: cn(focusRing, invalidState, disabledState, choiceHitArea, "peer relative inline-flex h-5 w-9 shrink-0 items-center rounded-none border border-transparent bg-input p-0.5 shadow-xs transition-colors data-checked:bg-primary dark:data-checked:bg-primary", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: "pointer-events-none block size-3.5 rounded-none bg-background shadow-sm ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground" }) }));
 }
 export { Switch };

package/dist/table-body-skeleton.d.ts

@@ -1,7 +1,13 @@
 type Props = {
     columns: number;
     rows?: number;
+    /** Classes for the `tbody`. */
+    className?: string;
 };
-/** Skeleton table body rows for client query loading states. */
-export declare function TableBodySkeleton({ columns, rows }: Props): import("react").JSX.Element;
+/**
+ * Skeleton table body rows for client query loading states. The body is
+ * `aria-busy` and the placeholder cells are hidden, so a screen reader hears
+ * that the table is loading instead of rows of empty cells.
+ */
+export declare function TableBodySkeleton({ columns, rows, className }: Props): import("react").JSX.Element;
 export {};

package/dist/table-body-skeleton.js

@@ -1,7 +1,11 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Skeleton } from "./skeleton.js";
 import { TableBody, TableCell, TableRow } from "./table.js";
-/** Skeleton table body rows for client query loading states. */
-export function TableBodySkeleton({ columns, rows = 5 }) {
-    return (_jsx(TableBody, { children: Array.from({ length: rows }, (_, row) => (_jsx(TableRow, { children: Array.from({ length: columns }, (_, col) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-full" }) }, col))) }, row))) }));
+/**
+ * Skeleton table body rows for client query loading states. The body is
+ * `aria-busy` and the placeholder cells are hidden, so a screen reader hears
+ * that the table is loading instead of rows of empty cells.
+ */
+export function TableBodySkeleton({ columns, rows = 5, className }) {
+    return (_jsx(TableBody, { "aria-busy": "true", className: className, children: Array.from({ length: rows }, (_, row) => (_jsx(TableRow, { "aria-hidden": "true", children: Array.from({ length: columns }, (_, col) => (_jsx(TableCell, { children: _jsx(Skeleton, { className: "h-4 w-full" }) }, col))) }, row))) }));
 }

package/dist/table.d.ts

@@ -5,8 +5,14 @@ import * as React from "react";
  * While it overflows, the scroller joins the tab order so keyboard users can
  * scroll it with the arrow keys (WCAG 2.1.1).
  * Cell padding is `px-2` below `sm` and the original `p-3` from `sm` up.
+ *
+ * `className` styles the `<table>` (`w-full` by default; `w-auto` sizes it
+ * to its columns). `containerClassName` styles the scroller, for a height
+ * cap (`max-h-96 overflow-y-auto`) or a border.
  */
-declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
+declare function Table({ className, containerClassName, ...props }: React.ComponentProps<"table"> & {
+    containerClassName?: string;
+}): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
 declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;

package/dist/table.js

@@ -10,11 +10,15 @@ import { cn } from "./utils.js";
  * While it overflows, the scroller joins the tab order so keyboard users can
  * scroll it with the arrow keys (WCAG 2.1.1).
  * Cell padding is `px-2` below `sm` and the original `p-3` from `sm` up.
+ *
+ * `className` styles the `<table>` (`w-full` by default; `w-auto` sizes it
+ * to its columns). `containerClassName` styles the scroller, for a height
+ * cap (`max-h-96 overflow-y-auto`) or a border.
  */
-function Table({ className, ...props }) {
+function Table({ className, containerClassName, ...props }) {
     const containerRef = React.useRef(null);
     const scrollable = useHorizontalOverflow(containerRef);
-    return (_jsx("div", { ref: containerRef, "data-slot": "table-container", tabIndex: scrollable ? 0 : undefined, className: cn(focusRing, "relative w-full min-w-0 max-w-full overflow-x-auto overscroll-x-contain"), children: _jsx("table", { "data-slot": "table", className: cn("w-full min-w-full caption-bottom text-sm", className), ...props }) }));
+    return (_jsx("div", { ref: containerRef, "data-slot": "table-container", tabIndex: scrollable ? 0 : undefined, className: cn(focusRing, "relative min-w-0 max-w-full overflow-x-auto overscroll-x-contain", containerClassName), children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
     return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));

package/dist/tabs.d.ts

@@ -3,7 +3,14 @@ import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
 import { tabsListVariants, tabsTriggerVariants } from "./internal/tabs-styles.js";
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
-declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
+/**
+ * The tab row inside its scroller. `className` styles the list (its `h-11`
+ * height, fill, gap); `scrollerClassName` styles the scroller around it
+ * (`h-13` with `p-1` for the active border and focus ring).
+ */
+declare function TabsList({ className, scrollerClassName, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & Omit<VariantProps<typeof tabsListVariants>, "orientation"> & {
+    scrollerClassName?: string;
+}): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
 /**
@@ -18,9 +25,12 @@ declare function TabsContent({ className, ...props }: React.ComponentProps<typeo
  * for active borders and focus rings counted in the scroller height (so the
  * list cannot overflow on y), an edge fade while it overflows, and the
  * active link scrolled into view on mount. Do not wrap it in
- * `overflow-x-auto`.
+ * `overflow-x-auto`. `scrollerClassName` styles that scroller and
+ * `listClassName` the row of links inside it.
  */
-declare function TabsNav({ className, children, ...props }: React.ComponentProps<"nav"> & {
+declare function TabsNav({ className, scrollerClassName, listClassName, children, ...props }: React.ComponentProps<"nav"> & {
     "aria-label": string;
+    scrollerClassName?: string;
+    listClassName?: string;
 }): React.JSX.Element;
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };

package/dist/tabs.js

@@ -7,8 +7,14 @@ import { focusRing } from "./internal/styles.js";
 import { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
 import { useHorizontalOverflow } from "./internal/use-horizontal-overflow.js";
 import { cn } from "./utils.js";
+/**
+ * The root's orientation, so the list can pick plain size classes (`h-11`)
+ * that a consumer `className` replaces, instead of `group-data-*` variants
+ * that would beat it.
+ */
+const TabsOrientationContext = React.createContext("horizontal");
 function Tabs({ className, orientation = "horizontal", ...props }) {
-    return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn('group/tabs flex gap-2 data-[orientation="horizontal"]:flex-col', className), ...props }));
+    return (_jsx(TabsOrientationContext.Provider, { value: orientation, children: _jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn('group/tabs flex gap-2 data-[orientation="horizontal"]:flex-col', className), ...props }) }));
 }
 /**
  * Horizontal scroller around a tab row. `overflow-x: auto` alone would
@@ -18,24 +24,36 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
  * y axis as a backstop, and fade the edges while the row overflows —
  * same cue as `Table`.
  */
-function TabsScroller({ variant = "default", children, }) {
+function TabsScroller({ variant = "default", orientation = "horizontal", className, children, }) {
     const ref = React.useRef(null);
+    const revealed = React.useRef(null);
     const overflowing = useHorizontalOverflow(ref);
+    // Runs after every render, not just mount: TabsNav usually sits in a
+    // persistent layout, so a route change updates the active link in place.
     React.useLayoutEffect(() => {
         const scroller = ref.current;
         if (!scroller)
             return;
         const active = scroller.querySelector('[aria-current="page"], [data-state="active"]');
-        active?.scrollIntoView({
+        if (!active || active === revealed.current)
+            return;
+        revealed.current = active;
+        active.scrollIntoView({
             block: "nearest",
             inline: "nearest",
             behavior: "auto",
         });
-    }, []);
-    return (_jsx("div", { ref: ref, "data-slot": "tabs-scroller", "data-variant": variant, tabIndex: overflowing ? 0 : undefined, className: cn(focusRing, tabsScrollerVariants({ variant })), children: children }));
+    });
+    return (_jsx("div", { ref: ref, "data-slot": "tabs-scroller", "data-variant": variant, tabIndex: overflowing ? 0 : undefined, className: cn(focusRing, tabsScrollerVariants({ variant, orientation }), className), children: children }));
 }
-function TabsList({ className, variant = "default", ...props }) {
-    return (_jsx(TabsScroller, { variant: variant ?? "default", children: _jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), 
+/**
+ * The tab row inside its scroller. `className` styles the list (its `h-11`
+ * height, fill, gap); `scrollerClassName` styles the scroller around it
+ * (`h-13` with `p-1` for the active border and focus ring).
+ */
+function TabsList({ className, scrollerClassName, variant = "default", ...props }) {
+    const orientation = React.useContext(TabsOrientationContext);
+    return (_jsx(TabsScroller, { variant: variant ?? "default", orientation: orientation, className: scrollerClassName, children: _jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant, orientation }), 
             // The scroller owns the muted fill so edge fades show through.
             variant === "default" && "bg-transparent", className), ...props }) }));
 }
@@ -57,9 +75,10 @@ function TabsContent({ className, ...props }) {
  * for active borders and focus rings counted in the scroller height (so the
  * list cannot overflow on y), an edge fade while it overflows, and the
  * active link scrolled into view on mount. Do not wrap it in
- * `overflow-x-auto`.
+ * `overflow-x-auto`. `scrollerClassName` styles that scroller and
+ * `listClassName` the row of links inside it.
  */
-function TabsNav({ className, children, ...props }) {
-    return (_jsx("nav", { "data-slot": "tabs-nav", "data-orientation": "horizontal", className: cn("group/tabs min-w-0 max-w-full", className), ...props, children: _jsx(TabsScroller, { children: _jsx("div", { "data-slot": "tabs-list", "data-variant": "default", className: cn(tabsListVariants(), "bg-transparent"), children: children }) }) }));
+function TabsNav({ className, scrollerClassName, listClassName, children, ...props }) {
+    return (_jsx("nav", { "data-slot": "tabs-nav", "data-orientation": "horizontal", className: cn("group/tabs min-w-0 max-w-full", className), ...props, children: _jsx(TabsScroller, { className: scrollerClassName, children: _jsx("div", { "data-slot": "tabs-list", "data-variant": "default", className: cn(tabsListVariants({ orientation: "horizontal" }), "bg-transparent", listClassName), children: children }) }) }));
 }
 export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };

package/dist/theme-provider.d.ts

@@ -4,7 +4,8 @@ export type ThemeProviderProps = NextThemesProviderProps & {
     /**
      * When true, pressing `d` toggles dark/light unless focus is in an editable
      * field or a widget with letter typeahead (such as `Select`). Defaults to
-     * true.
+     * false: a single-key shortcut fires by accident for speech-input users, so
+     * an app that turns it on should also let people switch it off (WCAG 2.1.4).
      */
     enableShortcut?: boolean;
 };

package/dist/theme-provider.js

@@ -55,7 +55,7 @@ function ThemeShortcut() {
  * Class-based theme wrapper around `next-themes`. Does not require Next.js;
  * pass `storageKey` from the application (`atlas-theme` is the kit default).
  */
-function ThemeProvider({ children, storageKey = "atlas-theme", attribute = "class", defaultTheme = "system", enableSystem = true, disableTransitionOnChange = true, enableShortcut = true, ...props }) {
+function ThemeProvider({ children, storageKey = "atlas-theme", attribute = "class", defaultTheme = "system", enableSystem = true, disableTransitionOnChange = true, enableShortcut = false, ...props }) {
     return (_jsxs(NextThemesProvider, { storageKey: storageKey, attribute: attribute, defaultTheme: defaultTheme, enableSystem: enableSystem, disableTransitionOnChange: disableTransitionOnChange, ...props, children: [enableShortcut ? _jsx(ThemeShortcut, {}) : null, children] }));
 }
 export { ThemeProvider, useTheme };

package/dist/toggle.js

@@ -3,7 +3,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
-import { disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
+import { controlSize, disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Selected chrome shared by Toggle and ToggleGroupItem (see
@@ -25,9 +25,9 @@ const toggleVariants = cva([
             outline: "border border-input bg-transparent",
         },
         size: {
-            default: "h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
-            sm: "h-9 min-w-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-            lg: "h-11 min-w-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+            default: `${controlSize.default} min-w-10`,
+            sm: `${controlSize.sm} min-w-9`,
+            lg: `${controlSize.lg} min-w-11`,
         },
     },
     defaultVariants: {

package/dist/tooltip.d.ts

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { Tooltip as TooltipPrimitive } from "radix-ui";
 /**
- * Shares open delay across tooltips. `Tooltip` adds one per instance, so a
- * provider at the app root is optional; add it to tune `delayDuration`.
+ * Shares open delay across tooltips. `Tooltip` adds one when none is above
+ * it, so a provider at the app root is optional; add it to tune
+ * `delayDuration`.
  */
 declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
 /**
@@ -11,5 +12,8 @@ declare function TooltipProvider({ delayDuration, ...props }: React.ComponentPro
  */
 declare function Tooltip({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Root>): React.JSX.Element;
 declare function TooltipTrigger({ ...props }: React.ComponentProps<typeof TooltipPrimitive.Trigger>): React.JSX.Element;
-declare function TooltipContent({ className, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content>): React.JSX.Element;
+declare function TooltipContent({ className, arrowClassName, sideOffset, children, ...props }: React.ComponentProps<typeof TooltipPrimitive.Content> & {
+    /** Classes for the arrow, e.g. its fill when `className` recolors the tip. */
+    arrowClassName?: string;
+}): React.JSX.Element;
 export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };