atlas-react-kit 0.4.1 → 0.6.0

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/spinner.d.ts

@@ -0,0 +1,8 @@
+import * as React from "react";
+/**
+ * Indeterminate loading indicator for a button or small region. Announced as
+ * "Loading" by default; pass `aria-label` for something more specific. Use
+ * `Skeleton` or `TableBodySkeleton` when the layout of the result is known.
+ */
+declare function Spinner({ className, "aria-label": ariaLabel, ...props }: React.ComponentProps<"svg">): React.JSX.Element;
+export { Spinner };

package/dist/spinner.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Loader2Icon } from "lucide-react";
+import { cn } from "./utils.js";
+/**
+ * Indeterminate loading indicator for a button or small region. Announced as
+ * "Loading" by default; pass `aria-label` for something more specific. Use
+ * `Skeleton` or `TableBodySkeleton` when the layout of the result is known.
+ */
+function Spinner({ className, "aria-label": ariaLabel = "Loading", ...props }) {
+    return (_jsx(Loader2Icon, { role: "status", "aria-label": ariaLabel, "data-slot": "spinner", className: cn("size-4 animate-spin", className), ...props }));
+}
+export { Spinner };

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.d.ts

@@ -0,0 +1,9 @@
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+/**
+ * On/off setting that applies immediately (notifications, dark mode). Use
+ * `Checkbox` for choices submitted with a form. Square like the other
+ * primitives; checked uses the primary fill, as `Checkbox` does.
+ */
+declare function Switch({ className, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root>): React.JSX.Element;
+export { Switch };

package/dist/switch.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import * as React from "react";
+import { Switch as SwitchPrimitive } from "radix-ui";
+import { cn } from "./utils.js";
+/**
+ * On/off setting that applies immediately (notifications, dark mode). Use
+ * `Checkbox` for choices submitted with a form. Square like the other
+ * 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 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.d.ts

@@ -2,6 +2,8 @@ import * as React from "react";
 /**
  * Data table. The root is a `min-w-0 overflow-x-auto` scroller so nowrap
  * columns scroll inside the table instead of widening a card or panel.
+ * 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.
  */
 declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;

package/dist/table.js

@@ -2,13 +2,37 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./utils.js";
+/**
+ * True while the element's content is wider than its box. Re-checked when
+ * the container or its content resizes.
+ */
+function useHorizontalOverflow(ref) {
+    const [overflowing, setOverflowing] = React.useState(false);
+    React.useEffect(() => {
+        const element = ref.current;
+        if (!element || typeof ResizeObserver === "undefined")
+            return;
+        const check = () => setOverflowing(element.scrollWidth > element.clientWidth + 1);
+        check();
+        const observer = new ResizeObserver(check);
+        observer.observe(element);
+        if (element.firstElementChild)
+            observer.observe(element.firstElementChild);
+        return () => observer.disconnect();
+    }, [ref]);
+    return overflowing;
+}
 /**
  * Data table. The root is a `min-w-0 overflow-x-auto` scroller so nowrap
  * columns scroll inside the table instead of widening a card or panel.
+ * 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.
  */
 function Table({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "table-container", className: "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 }) }));
+    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", 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 }));
@@ -20,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/tabs.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
-import { tabsListVariants } from "./internal/tabs-styles.js";
+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;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
@@ -9,9 +9,12 @@ declare function TabsContent({ className, ...props }: React.ComponentProps<typeo
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not
  * `Tabs` + `TabsTrigger asChild`, when there are no `TabsContent` panels:
- * tabs would point assistive tech at panels that don't exist.
+ * tabs would point assistive tech at panels that don't exist. Style each link
+ * with `tabsTriggerVariants()` and mark the active one with
+ * `data-state="active"` and `aria-current="page"` (the Next adapter
+ * `TabsNavLink` does this for you).
  */
 declare function TabsNav({ className, children, ...props }: React.ComponentProps<"nav"> & {
     "aria-label": string;
 }): React.JSX.Element;
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };

package/dist/tabs.js

@@ -20,9 +20,12 @@ function TabsContent({ className, ...props }) {
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not
  * `Tabs` + `TabsTrigger asChild`, when there are no `TabsContent` panels:
- * tabs would point assistive tech at panels that don't exist.
+ * tabs would point assistive tech at panels that don't exist. Style each link
+ * with `tabsTriggerVariants()` and mark the active one with
+ * `data-state="active"` and `aria-current="page"` (the Next adapter
+ * `TabsNavLink` does this for you).
  */
 function TabsNav({ className, children, ...props }) {
     return (_jsx("nav", { "data-slot": "tabs-nav", "data-orientation": "horizontal", className: cn("group/tabs", className), ...props, children: _jsx("div", { "data-slot": "tabs-list", "data-variant": "default", className: tabsListVariants(), children: children }) }));
 }
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };

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/theme-provider.d.ts

@@ -3,7 +3,8 @@ import { useTheme, type ThemeProviderProps as NextThemesProviderProps } from "ne
 export type ThemeProviderProps = NextThemesProviderProps & {
     /**
      * When true, pressing `d` toggles dark/light unless focus is in an editable
-     * field. Defaults to true.
+     * field or a widget with letter typeahead (such as `Select`). Defaults to
+     * true.
      */
     enableShortcut?: boolean;
 };

package/dist/theme-provider.js

@@ -2,22 +2,46 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ThemeProvider as NextThemesProvider, useTheme, } from "next-themes";
-const EDITABLE_SELECTOR = "input, textarea, select, [contenteditable]:not([contenteditable='false'])";
-function isEditableTarget(target) {
+/**
+ * Targets where a bare `d` is input, not a shortcut: native and ARIA text
+ * fields, plus widgets with letter typeahead (Select trigger and list, menus,
+ * trees, grids).
+ */
+const KEY_CONSUMING_SELECTOR = [
+    "input",
+    "textarea",
+    "select",
+    "[contenteditable]:not([contenteditable='false'])",
+    ...[
+        "textbox",
+        "searchbox",
+        "spinbutton",
+        "combobox",
+        "listbox",
+        "menu",
+        "menubar",
+        "tree",
+        "treegrid",
+        "grid",
+    ].map((role) => `[role="${role}"]`),
+].join(", ");
+function isKeyConsumingTarget(target) {
     if (!(target instanceof HTMLElement))
         return false;
-    return Boolean(target.closest(EDITABLE_SELECTOR));
+    return Boolean(target.closest(KEY_CONSUMING_SELECTOR));
 }
 /** Listens for the optional `d` shortcut inside an existing theme context. */
 function ThemeShortcut() {
     const { resolvedTheme, setTheme } = useTheme();
     React.useEffect(() => {
         function onKeyDown(event) {
+            if (event.defaultPrevented || event.repeat || event.isComposing)
+                return;
             if (event.metaKey || event.ctrlKey || event.altKey)
                 return;
             if (event.key !== "d" && event.key !== "D")
                 return;
-            if (isEditableTarget(event.target))
+            if (isKeyConsumingTarget(event.target))
                 return;
             event.preventDefault();
             setTheme(resolvedTheme === "dark" ? "light" : "dark");

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-primary focus-visible:border-primary focus-visible:text-primary 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 };

package/dist/tooltip.d.ts

@@ -0,0 +1,15 @@
+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`.
+ */
+declare function TooltipProvider({ delayDuration, ...props }: React.ComponentProps<typeof TooltipPrimitive.Provider>): React.JSX.Element;
+/**
+ * Short label for an icon button or truncated text. Opens on hover and
+ * keyboard focus; put essential information in visible text instead.
+ */
+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;
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };

package/dist/tooltip.js

@@ -0,0 +1,26 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+import { cn } from "./utils.js";
+/**
+ * Shares open delay across tooltips. `Tooltip` adds one per instance, so a
+ * provider at the app root is optional; add it to tune `delayDuration`.
+ */
+function TooltipProvider({ delayDuration = 0, ...props }) {
+    return (_jsx(TooltipPrimitive.Provider, { "data-slot": "tooltip-provider", delayDuration: delayDuration, ...props }));
+}
+/**
+ * Short label for an icon button or truncated text. Opens on hover and
+ * keyboard focus; put essential information in visible text instead.
+ */
+function Tooltip({ ...props }) {
+    return (_jsx(TooltipProvider, { children: _jsx(TooltipPrimitive.Root, { "data-slot": "tooltip", ...props }) }));
+}
+function TooltipTrigger({ ...props }) {
+    return _jsx(TooltipPrimitive.Trigger, { "data-slot": "tooltip-trigger", ...props });
+}
+function TooltipContent({ className, sideOffset = 4, children, ...props }) {
+    return (_jsx(TooltipPrimitive.Portal, { children: _jsxs(TooltipPrimitive.Content, { "data-slot": "tooltip-content", sideOffset: sideOffset, className: cn("z-50 w-fit max-w-xs origin-(--radix-tooltip-content-transform-origin) rounded-none bg-foreground px-3 py-1.5 text-xs text-balance text-background duration-100 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-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:animate-in data-[state=delayed-open]:fade-in-0 data-[state=delayed-open]:zoom-in-95 data-[state=instant-open]:animate-in data-[state=instant-open]:fade-in-0", className), ...props, children: [children, _jsx(TooltipPrimitive.Arrow, { className: "fill-foreground" })] }) }));
+}
+export { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger };