atlas-react-kit 0.5.0 → 0.6.0

package/dist/info-tip.js

@@ -0,0 +1,63 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { CircleHelpIcon } from "lucide-react";
+import { Popover, PopoverContent, PopoverDescription, PopoverHeader, PopoverTitle, PopoverTrigger, } from "./popover.js";
+import { cn } from "./utils.js";
+/**
+ * True when a mouse can hover. Touch and coarse pointers must use click;
+ * a hover-open popover would trap them after the first tap.
+ */
+function canHoverOpen() {
+    return window.matchMedia("(hover: hover) and (pointer: fine)").matches;
+}
+/**
+ * Longer help than a Tooltip: a Popover with a 20px glyph and a 44px hit
+ * area. Hover opens only on a fine pointer; click, tap, and keyboard always
+ * toggle it. Not a glossary or "coming soon" chip — pass that copy in.
+ */
+function InfoTip({ label, title, description, children, layout = "box", side = "top", align = "center", badge, icon, className, }) {
+    const [open, setOpen] = React.useState(false);
+    const closeTimer = React.useRef(null);
+    const hoverOpened = React.useRef(false);
+    const inline = layout === "inline";
+    const cancelClose = () => {
+        if (closeTimer.current !== null) {
+            window.clearTimeout(closeTimer.current);
+            closeTimer.current = null;
+        }
+    };
+    const openFromHover = () => {
+        if (!canHoverOpen())
+            return;
+        cancelClose();
+        hoverOpened.current = true;
+        setOpen(true);
+    };
+    const closeFromHover = () => {
+        if (!canHoverOpen() || !hoverOpened.current)
+            return;
+        cancelClose();
+        // Leave a beat so the pointer can travel from the glyph into the panel.
+        closeTimer.current = window.setTimeout(() => setOpen(false), 120);
+    };
+    React.useEffect(() => () => cancelClose(), []);
+    return (_jsxs(Popover, { open: open, onOpenChange: (next) => {
+            // Hover already opened the panel; the following click should pin
+            // it, not toggle it closed (Playwright and real mice both hover
+            // before they click).
+            if (hoverOpened.current && open && !next) {
+                hoverOpened.current = false;
+                return;
+            }
+            hoverOpened.current = false;
+            setOpen(next);
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, "data-slot": "info-tip-trigger", "data-layout": layout, className: cn("relative inline-flex shrink-0 items-center justify-center rounded-none text-muted-foreground outline-none hover:text-selected-foreground focus-visible:border-ring focus-visible:text-selected-foreground focus-visible:ring-2 focus-visible:ring-ring", inline
+                        ? "size-5 align-middle after:absolute after:top-1/2 after:left-1/2 after:size-11 after:-translate-x-1/2 after:-translate-y-1/2"
+                        : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: icon ?? (_jsx(CircleHelpIcon, { className: "size-5", "data-icon": "info-tip", "aria-hidden": true })) }) }), _jsxs(PopoverContent, { side: side, align: align, className: "w-72", onMouseEnter: openFromHover, onMouseLeave: closeFromHover, children: [_jsxs(PopoverHeader, { children: [_jsxs("div", { className: "flex items-start justify-between gap-2", children: [title ? _jsx(PopoverTitle, { children: title }) : null, badge] }), description ? (_jsx(PopoverDescription, { children: description })) : null] }), children] })] }));
+}
+/** InfoTip that sits in a line of text without stretching the line box. */
+function InlineTip(props) {
+    return _jsx(InfoTip, { ...props, layout: "inline" });
+}
+export { InfoTip, InlineTip };

package/dist/input.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./utils.js";
 function Input({ className, type, ...props }) {
-    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-10 w-full min-w-0 rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx("input", { type: type, "data-slot": "input", className: cn("h-10 w-full min-w-0 rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }
 export { Input };

package/dist/internal/form-control.d.ts

@@ -6,4 +6,4 @@
  * control next to real form fields. Hover stays Input-like and cancels the
  * outline Button's purple selected wash.
  */
-export declare const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
+export declare const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";

package/dist/internal/form-control.js

@@ -6,4 +6,4 @@
  * control next to real form fields. Hover stays Input-like and cancels the
  * outline Button's purple selected wash.
  */
-export const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";
+export const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";

package/dist/internal/tabs-styles.js

@@ -11,9 +11,9 @@ const tabsListVariants = cva('group/tabs-list inline-flex w-fit items-stretch ju
     },
 });
 const tabsTriggerVariants = cva([
-    'relative inline-flex h-full min-w-0 flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3.5',
-    'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent',
-    'data-[state="active"]:bg-selected data-[state="active"]:text-selected-foreground dark:data-[state="active"]:border-transparent dark:data-[state="active"]:bg-selected dark:data-[state="active"]:text-selected-foreground',
+    'relative inline-flex h-full min-w-0 flex-1 items-center justify-center gap-2 border border-transparent px-4 py-1.5 text-xs font-semibold tracking-wider whitespace-nowrap text-foreground/60 uppercase transition-all group-data-[orientation="vertical"]/tabs:w-full group-data-[orientation="vertical"]/tabs:justify-start group-data-[orientation="vertical"]/tabs:px-4 group-data-[orientation="vertical"]/tabs:py-2 hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-2.5 has-data-[icon=inline-start]:pl-2.5 dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=\'size-\'])]:size-3.5',
+    'group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:border-transparent group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state="active"]:bg-transparent',
+    'data-[state="active"]:border-selected-foreground data-[state="active"]:bg-selected data-[state="active"]:text-selected-foreground',
     'after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation="horizontal"]/tabs:after:inset-x-0 group-data-[orientation="horizontal"]/tabs:after:bottom-[-5px] group-data-[orientation="horizontal"]/tabs:after:h-0.5 group-data-[orientation="vertical"]/tabs:after:inset-y-0 group-data-[orientation="vertical"]/tabs:after:-right-1 group-data-[orientation="vertical"]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state="active"]:after:opacity-100',
 ]);
 export { tabsListVariants, tabsTriggerVariants };

package/dist/markdown.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Drop javascript:/data:/unknown schemes. react-markdown already omits raw
+ * HTML (no rehype-raw), so this is the remaining URL hole.
+ */
+export declare function safeMarkdownUrl(url: string): string;
+export type MarkdownProps = {
+    content: string;
+    className?: string;
+};
+/**
+ * GitHub-flavoured Markdown, token-styled and sanitized. No Next, no raw
+ * HTML, no typography plugin. `react-markdown` and `remark-gfm` stay in this
+ * module so other subpaths do not pay for them.
+ */
+declare function Markdown({ content, className }: MarkdownProps): import("react").JSX.Element;
+/** Alias used by apps that imported MarkdownContent. */
+declare const MarkdownContent: typeof Markdown;
+export { Markdown, MarkdownContent };

package/dist/markdown.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import { cn } from "./utils.js";
+/** Stable identity so parent re-renders do not re-parse unchanged content. */
+const REMARK_PLUGINS = [remarkGfm];
+const SAFE_PROTOCOLS = new Set(["http:", "https:", "mailto:"]);
+/**
+ * Drop javascript:/data:/unknown schemes. react-markdown already omits raw
+ * HTML (no rehype-raw), so this is the remaining URL hole.
+ */
+export function safeMarkdownUrl(url) {
+    const value = url.trim();
+    if (!value)
+        return "";
+    if (value.startsWith("#") || value.startsWith("/"))
+        return value;
+    try {
+        const parsed = new URL(value);
+        return SAFE_PROTOCOLS.has(parsed.protocol) ? value : "";
+    }
+    catch {
+        return "";
+    }
+}
+function headingClass(size) {
+    return cn("font-heading font-semibold tracking-tight text-foreground", size);
+}
+const markdownComponents = {
+    h1: ({ children }) => _jsx("h1", { className: headingClass("text-xl"), children: children }),
+    h2: ({ children }) => _jsx("h2", { className: headingClass("text-lg"), children: children }),
+    h3: ({ children }) => (_jsx("h3", { className: headingClass("text-base"), children: children })),
+    p: ({ children }) => _jsx("p", { className: "text-sm leading-relaxed", children: children }),
+    ul: ({ children }) => (_jsx("ul", { className: "list-disc space-y-1 pl-5 text-sm", children: children })),
+    ol: ({ children }) => (_jsx("ol", { className: "list-decimal space-y-1 pl-5 text-sm", children: children })),
+    li: ({ children }) => _jsx("li", { className: "leading-relaxed", children: children }),
+    blockquote: ({ children }) => (_jsx("blockquote", { className: "border-l-2 border-input pl-3 text-sm text-muted-foreground", children: children })),
+    a: ({ href, children }) => href ? (_jsx("a", { href: href, className: "text-selected-foreground underline underline-offset-2", ...(href.startsWith("http")
+            ? { target: "_blank", rel: "noreferrer noopener" }
+            : {}), children: children })) : (_jsx("span", { children: children })),
+    code: ({ className, children }) => {
+        const fenced = /language-/.test(className ?? "");
+        return (_jsx("code", { className: cn("font-mono text-xs", fenced ? "bg-transparent" : "bg-muted px-1 py-0.5"), children: children }));
+    },
+    pre: ({ children }) => (_jsx("pre", { className: "overflow-x-auto bg-muted p-3 text-xs", children: children })),
+    hr: () => _jsx("hr", { className: "border-border" }),
+    table: ({ children }) => (_jsx("div", { className: "overflow-x-auto", children: _jsx("table", { className: "w-full text-left text-sm", children: children }) })),
+    th: ({ children }) => (_jsx("th", { className: "border-b border-input py-1.5 pr-3 font-medium", children: children })),
+    td: ({ children }) => (_jsx("td", { className: "border-b border-border py-1.5 pr-3", children: children })),
+    img: ({ src, alt }) => (_jsx("img", { src: src, alt: alt ?? "", className: "max-w-full" })),
+};
+/**
+ * GitHub-flavoured Markdown, token-styled and sanitized. No Next, no raw
+ * HTML, no typography plugin. `react-markdown` and `remark-gfm` stay in this
+ * module so other subpaths do not pay for them.
+ */
+function Markdown({ content, className }) {
+    return (_jsx("article", { "data-slot": "markdown", className: cn("flex flex-col gap-3 text-foreground", className), children: _jsx(ReactMarkdown, { remarkPlugins: REMARK_PLUGINS, urlTransform: safeMarkdownUrl, components: markdownComponents, children: content }) }));
+}
+/** Alias used by apps that imported MarkdownContent. */
+const MarkdownContent = Markdown;
+export { Markdown, MarkdownContent };

package/dist/meter.d.ts

@@ -0,0 +1,22 @@
+export type MeterMarker = {
+    /** Same scale as `value` / `min` / `max` (not a 0–1 fraction). */
+    position: number;
+    className?: string;
+};
+export type MeterProps = {
+    value: number;
+    min?: number;
+    max: number;
+    /** App-owned fill (status, pace). Defaults to primary. */
+    fillClassName?: string;
+    markers?: MeterMarker[];
+    "aria-label": string;
+    className?: string;
+};
+/**
+ * Track, fill, and optional ticks for a current value against a scale.
+ * Use `Progress` for a plain 0–100 job bar. The app chooses fill color and
+ * marker positions (80% of a cap, 1.0× typical, and so on).
+ */
+declare function Meter({ value, min, max, fillClassName, markers, "aria-label": ariaLabel, className, }: MeterProps): import("react").JSX.Element;
+export { Meter };

package/dist/meter.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "./utils.js";
+/**
+ * Track, fill, and optional ticks for a current value against a scale.
+ * Use `Progress` for a plain 0–100 job bar. The app chooses fill color and
+ * marker positions (80% of a cap, 1.0× typical, and so on).
+ */
+function Meter({ value, min = 0, max, fillClassName = "bg-primary", markers, "aria-label": ariaLabel, className, }) {
+    const span = max - min;
+    const toPercent = (amount) => {
+        if (span === 0)
+            return 0;
+        return Math.min(100, Math.max(0, ((amount - min) / span) * 100));
+    };
+    return (_jsxs("div", { role: "meter", "data-slot": "meter", "aria-valuemin": min, "aria-valuemax": max, "aria-valuenow": Math.min(max, Math.max(min, value)), "aria-label": ariaLabel, className: cn("relative h-1.5 w-full overflow-hidden bg-muted", className), children: [_jsx("div", { "data-slot": "meter-fill", className: cn("h-full", fillClassName), style: { width: `${toPercent(value)}%` } }), markers?.map((marker) => (_jsx("div", { "aria-hidden": true, "data-slot": "meter-marker", className: cn("absolute inset-y-0 w-px bg-foreground/40", marker.className), style: { left: `${toPercent(marker.position)}%` } }, marker.position)))] }));
+}
+export { Meter };

package/dist/pagination.js

@@ -21,7 +21,7 @@ function PaginationLink({ className, isActive, size = "icon", ...props }) {
     return (_jsx("a", { "aria-current": isActive ? "page" : undefined, "data-slot": "pagination-link", "data-active": isActive, className: cn(buttonVariants({
             variant: isActive ? "outline" : "ghost",
             size: size === "icon" ? "icon-sm" : "sm",
-        }), "font-medium tracking-normal normal-case tabular-nums data-[active=true]:border-primary data-[active=true]:bg-selected data-[active=true]:text-selected-foreground", className), ...props }));
+        }), "font-medium tracking-normal normal-case tabular-nums data-[active=true]:border-selected-foreground data-[active=true]:bg-selected data-[active=true]:text-selected-foreground", className), ...props }));
 }
 function PaginationPrevious({ className, children = "Previous", ...props }) {
     return (_jsxs(PaginationLink, { "aria-label": "Go to previous page", size: "default", className: cn("gap-1 px-2.5 sm:pl-2", className), ...props, children: [_jsx(ChevronLeftIcon, { "data-icon": "inline-start" }), _jsx("span", { className: "hidden sm:block", children: children })] }));

package/dist/radio-group.js

@@ -15,6 +15,6 @@ function RadioGroup({ className, ...props }) {
  * differently from square checkboxes.
  */
 function RadioGroupItem({ className, ...props }) {
-    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn("peer relative flex aspect-square size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-transparent shadow-xs transition-shadow outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-checked:border-primary", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex items-center justify-center", children: _jsx("span", { className: "size-2 rounded-full bg-primary" }) }) }));
+    return (_jsx(RadioGroupPrimitive.Item, { "data-slot": "radio-group-item", className: cn("peer relative flex aspect-square size-4.5 shrink-0 items-center justify-center rounded-full border border-input bg-transparent shadow-xs transition-shadow outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-checked:border-primary", className), ...props, children: _jsx(RadioGroupPrimitive.Indicator, { "data-slot": "radio-group-indicator", className: "flex items-center justify-center", children: _jsx("span", { className: "size-2 rounded-full bg-primary" }) }) }));
 }
 export { RadioGroup, RadioGroupItem };

package/dist/search-picker.d.ts

@@ -0,0 +1,30 @@
+import * as React from "react";
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño".
+ */
+export declare function foldSearchText(value: string): string;
+/**
+ * Default SearchPicker filter: the folded label includes the folded query.
+ */
+export declare function defaultSearchFilter<T>(item: T, query: string, getLabel: (item: T) => string): boolean;
+export type SearchPickerProps<T> = {
+    items: T[];
+    getValue: (item: T) => string;
+    getLabel: (item: T) => string;
+    filter?: (item: T, query: string, getLabel: (item: T) => string) => boolean;
+    value?: string;
+    onSelect: (item: T) => void;
+    label: string;
+    placeholder?: string;
+    emptyText?: string;
+    listLabel?: string;
+    disabled?: boolean;
+    className?: string;
+};
+/**
+ * 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.
+ */
+declare function SearchPicker<T>({ items, getValue, getLabel, filter, value, onSelect, label, placeholder, emptyText, listLabel, disabled, className, }: SearchPickerProps<T>): React.JSX.Element;
+export { SearchPicker };

package/dist/search-picker.js

@@ -0,0 +1,100 @@
+"use client";
+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 { cn } from "./utils.js";
+const LISTBOX_PAGE_SIZE = 10;
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño".
+ */
+export function foldSearchText(value) {
+    return value.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
+/**
+ * Default SearchPicker filter: the folded label includes the folded query.
+ */
+export function defaultSearchFilter(item, query, getLabel) {
+    const needle = foldSearchText(query.trim());
+    if (!needle)
+        return true;
+    return foldSearchText(getLabel(item)).includes(needle);
+}
+/**
+ * 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, }) {
+    const [query, setQuery] = React.useState("");
+    const listId = React.useId();
+    const inputId = React.useId();
+    const filtered = React.useMemo(() => items.filter((item) => filter(item, query, getLabel)), [items, filter, query, getLabel]);
+    const selectedIndex = React.useMemo(() => {
+        const index = filtered.findIndex((item) => getValue(item) === value);
+        return index >= 0 ? index : 0;
+    }, [filtered, getValue, value]);
+    const [highlight, setHighlight] = React.useState(selectedIndex);
+    React.useEffect(() => {
+        setHighlight(query ? 0 : selectedIndex);
+    }, [query, selectedIndex]);
+    const optionId = (index) => `${listId}-option-${index}`;
+    const active = filtered[highlight];
+    const scrollHighlightedOption = React.useCallback((node) => {
+        node?.scrollIntoView({ block: "nearest" });
+    }, []);
+    const selectItem = (item) => {
+        onSelect(item);
+        setQuery("");
+    };
+    const onKeyDown = (event) => {
+        if (event.key === "ArrowDown") {
+            event.preventDefault();
+            setHighlight((index) => filtered.length === 0 ? 0 : Math.min(index + 1, filtered.length - 1));
+        }
+        if (event.key === "ArrowUp") {
+            event.preventDefault();
+            setHighlight((index) => Math.max(index - 1, 0));
+        }
+        if (event.key === "Home") {
+            event.preventDefault();
+            setHighlight(0);
+        }
+        if (event.key === "End") {
+            event.preventDefault();
+            setHighlight(filtered.length === 0 ? 0 : filtered.length - 1);
+        }
+        if (event.key === "PageDown") {
+            event.preventDefault();
+            setHighlight((index) => filtered.length === 0
+                ? 0
+                : Math.min(index + LISTBOX_PAGE_SIZE, filtered.length - 1));
+        }
+        if (event.key === "PageUp") {
+            event.preventDefault();
+            setHighlight((index) => Math.max(index - LISTBOX_PAGE_SIZE, 0));
+        }
+        if (event.key === "Enter") {
+            event.preventDefault();
+            if (active)
+                selectItem(active);
+        }
+        if (event.key === "Escape") {
+            event.preventDefault();
+            if (query) {
+                setQuery("");
+                return;
+            }
+            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 ? optionId(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: "max-h-60 overflow-y-auto border border-input bg-background", children: filtered.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText })) : (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 ? scrollHighlightedOption : undefined, id: optionId(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 && "bg-selected text-selected-foreground", isActive && "shadow-[inset_2px_0_0_var(--color-ring)]", isActive &&
+                                !isSelected &&
+                                "bg-accent text-accent-foreground"), onMouseEnter: () => setHighlight(index), onClick: () => selectItem(item), children: _jsx("span", { className: "truncate", children: getLabel(item) }) }) }, itemValue));
+                })) })] }));
+}
+export { SearchPicker };

package/dist/select.js

@@ -14,7 +14,7 @@ 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("flex w-full min-w-0 items-center justify-between gap-1.5 rounded-none border border-input bg-background px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 md:text-sm *: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 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_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("flex w-full min-w-0 items-center justify-between gap-1.5 rounded-none border border-input bg-background px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 md:text-sm *: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 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_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" }) })] }));
 }
 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" &&
@@ -24,7 +24,7 @@ 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 }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("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 focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[state=checked]:bg-selected data-[state=checked]:text-selected-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_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("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 focus:bg-accent focus:text-accent-foreground focus:shadow-[inset_2px_0_0_var(--color-ring)] not-data-[variant=destructive]:focus:**:text-accent-foreground data-[state=checked]:bg-selected data-[state=checked]:text-selected-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_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 })] }));
 }
 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 }));

package/dist/slider.d.ts

@@ -0,0 +1,20 @@
+export type SliderProps = {
+    value: number;
+    onValueChange: (value: number) => void;
+    onValueCommit?: (value: number) => void;
+    min?: number;
+    max?: number;
+    step?: number;
+    disabled?: boolean;
+    id?: string;
+    name?: string;
+    className?: string;
+    "aria-label"?: string;
+    "aria-labelledby"?: string;
+};
+/**
+ * Single-thumb range on Radix Slider. Square track and thumb, primary fill,
+ * solid focus ring, 44px thumb hit area. Pair with a visible `Label`.
+ */
+declare function Slider({ value, onValueChange, onValueCommit, min, max, step, disabled, id, name, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: SliderProps): import("react").JSX.Element;
+export { Slider };

package/dist/slider.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Slider as SliderPrimitive } from "radix-ui";
+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`.
+ */
+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) => {
+            const amount = next[0];
+            if (amount !== undefined)
+                onValueChange(amount);
+        }, onValueCommit: (next) => {
+            const amount = next[0];
+            if (amount !== undefined)
+                onValueCommit?.(amount);
+        }, className: cn("relative flex w-full touch-none items-center select-none data-disabled:opacity-50", 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: "relative block size-4 shrink-0 rounded-none border border-primary bg-background shadow-xs outline-none after:absolute after:top-1/2 after:left-1/2 after:size-11 after:-translate-x-1/2 after:-translate-y-1/2 focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring" })] }));
+}
+export { Slider };

package/dist/stat-tile.d.ts

@@ -0,0 +1,21 @@
+import type * as React from "react";
+/**
+ * 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";
+/** 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 = {
+    label: string;
+    value: string;
+    sub?: React.ReactNode;
+    children?: React.ReactNode;
+    className?: string;
+};
+/**
+ * Label, big tabular figure, optional extra (a meter), muted sub line.
+ * Domain copy and status colors stay in the app.
+ */
+declare function StatTile({ label, value, sub, children, className }: StatTileProps): React.JSX.Element;
+export { StatTile };

package/dist/stat-tile.js

@@ -0,0 +1,17 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+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";
+/** 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.
+ */
+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] }));
+}
+export { StatTile };

package/dist/switch.js

@@ -9,6 +9,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("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 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-checked:bg-primary dark:bg-input/80 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("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 outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 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.js

@@ -32,7 +32,7 @@ function useHorizontalOverflow(ref) {
 function Table({ className, ...props }) {
     const containerRef = React.useRef(null);
     const scrollable = useHorizontalOverflow(containerRef);
-    return (_jsx("div", { ref: containerRef, "data-slot": "table-container", tabIndex: scrollable ? 0 : undefined, className: "relative w-full min-w-0 max-w-full overflow-x-auto overscroll-x-contain outline-none focus-visible:ring-2 focus-visible:ring-ring/30", 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: "relative w-full min-w-0 max-w-full overflow-x-auto overscroll-x-contain outline-none focus-visible:ring-2 focus-visible:ring-ring", children: _jsx("table", { "data-slot": "table", className: cn("w-full min-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 }));
@@ -44,7 +44,7 @@ function TableFooter({ className, ...props }) {
     return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
 }
 function TableRow({ className, ...props }) {
-    return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-selected", className), ...props }));
+    return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-selected data-[state=selected]:shadow-[inset_2px_0_0_var(--color-selected-foreground)]", className), ...props }));
 }
 function TableHead({ className, ...props }) {
     return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle text-xs font-medium tracking-wider whitespace-nowrap text-muted-foreground uppercase sm:h-12 sm:px-3 [&:has([role=checkbox])]:pr-0", className), ...props }));

package/dist/textarea.js

@@ -2,6 +2,6 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./utils.js";
 function Textarea({ className, ...props }) {
-    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
+    return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full resize-none rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 md:text-sm dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), ...props }));
 }
 export { Textarea };

package/dist/toggle-group.js

@@ -16,9 +16,9 @@ function ToggleGroup({ className, variant, size, spacing = 2, orientation = "hor
 }
 function ToggleGroupItem({ className, children, variant = "default", size = "default", ...props }) {
     const context = React.useContext(ToggleGroupContext);
-    return (_jsx(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn("shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none data-[state=on]:bg-selected data-[state=on]:text-selected-foreground group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", toggleVariants({
+    return (_jsx(ToggleGroupPrimitive.Item, { "data-slot": "toggle-group-item", "data-variant": context.variant || variant, "data-size": context.size || size, "data-spacing": context.spacing, className: cn(toggleVariants({
             variant: context.variant || variant,
             size: context.size || size,
-        }), className), ...props, children: children }));
+        }), "shrink-0 group-data-[spacing=0]/toggle-group:rounded-none group-data-[spacing=0]/toggle-group:shadow-none focus:z-10 focus-visible:z-10 group-data-horizontal/toggle-group:data-[spacing=0]:first:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:first:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:last:rounded-none group-data-vertical/toggle-group:data-[spacing=0]:last:rounded-none group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:border-l-0 group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:border-t-0 group-data-horizontal/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-l group-data-vertical/toggle-group:data-[spacing=0]:data-[variant=outline]:first:border-t", className), ...props, children: children }));
 }
 export { ToggleGroup, ToggleGroupItem };

package/dist/toggle.d.ts

@@ -1,9 +1,19 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
+/**
+ * Selected chrome shared by standalone Toggle and ToggleGroupItem.
+ *
+ * Radix Toggle sets `data-state=on` and `aria-pressed`. ToggleGroup items
+ * always set `data-state=on`; in multiple mode they also set `aria-pressed`,
+ * but in single mode they are radios with `aria-checked` and no
+ * `aria-pressed`. All three selectors apply the same wash, text, and
+ * selected-foreground border so the state meets WCAG 1.4.11 in every mode.
+ */
+declare const selectedToggleChrome = "data-on:border-selected-foreground data-on:bg-selected data-on:text-selected-foreground aria-pressed:border-selected-foreground aria-pressed:bg-selected aria-pressed:text-selected-foreground aria-checked:border-selected-foreground aria-checked:bg-selected aria-checked:text-selected-foreground";
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): React.JSX.Element;
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants, selectedToggleChrome };

package/dist/toggle.js

@@ -4,10 +4,20 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
 import { cn } from "./utils.js";
-const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:border-primary hover:bg-selected hover:text-selected-foreground focus-visible:border-primary focus-visible:text-selected-foreground focus-visible:ring-[3px] focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-selected aria-pressed:text-selected-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
+/**
+ * Selected chrome shared by standalone Toggle and ToggleGroupItem.
+ *
+ * Radix Toggle sets `data-state=on` and `aria-pressed`. ToggleGroup items
+ * always set `data-state=on`; in multiple mode they also set `aria-pressed`,
+ * but in single mode they are radios with `aria-checked` and no
+ * `aria-pressed`. All three selectors apply the same wash, text, and
+ * selected-foreground border so the state meets WCAG 1.4.11 in every mode.
+ */
+const selectedToggleChrome = "data-on:border-selected-foreground data-on:bg-selected data-on:text-selected-foreground aria-pressed:border-selected-foreground aria-pressed:bg-selected aria-pressed:text-selected-foreground aria-checked:border-selected-foreground aria-checked:bg-selected aria-checked:text-selected-foreground";
+const toggleVariants = cva(`group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground focus-visible:border-ring focus-visible:text-selected-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 ${selectedToggleChrome} [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5`, {
     variants: {
         variant: {
-            default: "bg-transparent",
+            default: "border border-transparent bg-transparent",
             outline: "border border-input bg-transparent",
         },
         size: {
@@ -24,4 +34,4 @@ const toggleVariants = cva("group/toggle inline-flex items-center justify-center
 function Toggle({ className, variant = "default", size = "default", ...props }) {
     return (_jsx(TogglePrimitive.Root, { "data-slot": "toggle", className: cn(toggleVariants({ variant, size, className })), ...props }));
 }
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants, selectedToggleChrome };