atlas-react-kit 0.6.0 → 0.7.0

package/COMPONENTS.md

@@ -38,7 +38,7 @@ no root component barrel.
 | `separator`, `skeleton`       | `Separator`, `Skeleton`                                                                                                                                                                                                                                                                               |
 | `slider`                      | `Slider`; `value` number, `onValueChange`, optional `onValueCommit`, `min`, `max`, `step`, `disabled`, `id`, `aria-labelledby`, `className`. Radix Slider; 44px thumb hit; square track; primary fill. Name it with `aria-labelledby`.                                                                |
 | `sortable-table-head`         | `SortableTableHead`; `sorted`, `direction` (`asc` \                                                                                                                                                                                                                                                   |
-| `sonner`                      | `Toaster`; Sonner props, with `next-themes` theme defaults                                                                                                                                                                                                                                            |
+| `sonner`                      | `Toaster`, `toast`; kit-styled toasts (status icons, kit buttons, close button); import `toast` from here, not `sonner`                                                                                                                                                                               |
 | `spinner`                     | `Spinner`; `role="status"` with `aria-label` (default `Loading`)                                                                                                                                                                                                                                      |
 | `stat-tile`                   | `StatTile`, `statTileGrid`, `sectionLabel`; `label`, `value`, optional `sub`, `children`, `className`.                                                                                                                                                                                                |
 | `switch`                      | `Switch`; settings that apply immediately; square track and thumb                                                                                                                                                                                                                                     |

package/DESIGN_RULES.md

@@ -32,9 +32,11 @@ belong to the application.
 ## Accessibility
 
 The target is WCAG 2.2 AA. CI runs axe-core's WCAG 2.2 A and AA rules against
-every Storybook story in light and dark mode, and checks the theme's token
-pairs for text and non-text contrast in both themes (`npm run test:a11y
---prefix site`). A violation fails the build. Automated checks do not replace
+every Storybook story and every open overlay (menus, listboxes, dialogs,
+popovers, tooltips, toasts) in light and dark mode, checks that focus never
+lands in content an open overlay hides, and checks the theme's token pairs
+for text and non-text contrast in both themes (`npm run test:a11y --prefix
+site`). A violation fails the build. Automated checks do not replace
 keyboard and screen-reader testing.
 
 - Text meets 4.5:1 against its background. The token pairs are tuned for it,

package/README.md

@@ -1,13 +1,13 @@
 # Atlas React Kit
 
 Shared React components and a Tailwind theme with square corners, semantic
-colors, and distinct selected states. 0.6.0 adds generic pieces apps were
+colors, and distinct selected states. 0.6.0 added generic pieces apps were
 keeping locally (`InfoTip`, `ColorLegend`, `SearchPicker`, `Markdown`,
 `StatTile`, `Meter`, `Slider`) plus the ToggleGroup selected-state fix.
 React 19 and Tailwind 4 are required.
 
 ```sh
-npm install --save-exact atlas-react-kit@0.6.0
+npm install --save-exact atlas-react-kit@0.7.0
 ```
 
 Import components by subpath:
@@ -116,7 +116,7 @@ artifact with the package owner's npm login:
 ```sh
 mkdir -p release-artifacts
 npm pack --pack-destination release-artifacts
-npm publish ./release-artifacts/atlas-react-kit-0.6.0.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.7.0.tgz --access public
 ```
 
 See [CONTRIBUTING.md](./CONTRIBUTING.md) for adding components, the browser

package/dist/accordion.js

@@ -3,6 +3,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Accordion as AccordionPrimitive } from "radix-ui";
 import { ChevronDownIcon } from "lucide-react";
+import { disabledState, focusRing } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /** Stacked sections that expand in place (FAQs, settings groups). */
 function Accordion({ ...props }) {
@@ -12,7 +13,7 @@ function AccordionItem({ className, ...props }) {
     return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("border-b last:border-b-0", className), ...props }));
 }
 function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn("flex flex-1 items-start justify-between gap-4 rounded-none py-4 text-left text-sm font-medium transition-colors outline-none hover:text-selected-foreground focus-visible:text-selected-foreground focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn(focusRing, disabledState, "flex flex-1 items-start justify-between gap-4 rounded-none py-4 text-left text-sm font-medium transition-colors hover:text-selected-foreground focus-visible:text-selected-foreground [&[data-state=open]>svg]:rotate-180", className), ...props, children: [children, _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 shrink-0 translate-y-0.5 text-muted-foreground transition-transform duration-200" })] }) }));
 }
 function AccordionContent({ className, children, ...props }) {
     return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn("pt-0 pb-4", className), children: children }) }));

package/dist/badge.js

@@ -2,13 +2,18 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
+import { focusRing, invalidState } from "./internal/styles.js";
 import { cn } from "./utils.js";
-const badgeVariants = cva("group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-none border-0 bg-transparent px-0 py-0 text-[0.625rem] font-semibold tracking-widest whitespace-nowrap uppercase transition-colors focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring has-data-[icon=inline-end]:pr-0 has-data-[icon=inline-start]:pl-0 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3!", {
+const badgeVariants = cva([
+    focusRing,
+    invalidState,
+    "group/badge inline-flex w-fit shrink-0 items-center justify-center gap-1.5 overflow-hidden rounded-none border-0 bg-transparent px-0 py-0 text-[0.625rem] font-semibold tracking-widest whitespace-nowrap uppercase transition-colors has-data-[icon=inline-end]:pr-0 has-data-[icon=inline-start]:pl-0 [&>svg]:pointer-events-none [&>svg]:size-3!",
+], {
     variants: {
         variant: {
             default: "text-foreground [a]:hover:text-foreground/70",
             secondary: "text-muted-foreground [a]:hover:text-foreground",
-            destructive: "text-destructive focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:text-destructive/70",
+            destructive: "text-destructive [a]:hover:text-destructive/70",
             outline: "text-foreground [a]:hover:text-foreground/70",
             ghost: "text-muted-foreground hover:text-foreground",
             link: "text-foreground underline-offset-4 hover:underline",

package/dist/button.d.ts

@@ -6,7 +6,7 @@ import { type VariantProps } from "class-variance-authority";
  * stays readable on dark), no muted grey fill. Used by quiet actions such as
  * "Clear selection" sitting on a selected row.
  */
-declare const quietButtonInteraction = "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground focus-visible:text-selected-foreground aria-expanded:border-selected-foreground aria-expanded:bg-selected aria-expanded:text-selected-foreground";
+declare const quietButtonInteraction: string;
 declare const buttonVariants: (props?: ({
     variant?: "default" | "link" | "destructive" | "secondary" | "outline" | "ghost" | null | undefined;
     size?: "default" | "sm" | "lg" | "xs" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;

package/dist/button.js

@@ -2,6 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
+import { disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Outline and ghost hover/focus: selected-foreground border, selected wash, and
@@ -9,8 +10,17 @@ import { cn } from "./utils.js";
  * stays readable on dark), no muted grey fill. Used by quiet actions such as
  * "Clear selection" sitting on a selected row.
  */
-const quietButtonInteraction = "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground focus-visible:text-selected-foreground aria-expanded:border-selected-foreground aria-expanded:bg-selected aria-expanded:text-selected-foreground";
-const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 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", {
+const quietButtonInteraction = [
+    selectedState.hover,
+    "focus-visible:text-selected-foreground",
+    selectedState.expanded,
+].join(" ");
+const buttonVariants = cva([
+    focusRing,
+    invalidState,
+    disabledState,
+    "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all select-none active:not-aria-[haspopup]:translate-y-px [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+], {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/80",

package/dist/checkbox.js

@@ -2,9 +2,10 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Checkbox as CheckboxPrimitive } from "radix-ui";
+import { disabledState, focusRing, invalidState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 import { CheckIcon } from "lucide-react";
 function Checkbox({ className, ...props }) {
-    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn("peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow outline-none group-has-disabled/field:opacity-50 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 aria-invalid:aria-checked:border-primary dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
+    return (_jsx(CheckboxPrimitive.Root, { "data-slot": "checkbox", className: cn(focusRing, invalidState, disabledState, "peer relative flex size-4.5 shrink-0 items-center justify-center rounded-none border border-input bg-transparent transition-shadow group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 aria-invalid:aria-checked:border-primary data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary", className), ...props, children: _jsx(CheckboxPrimitive.Indicator, { "data-slot": "checkbox-indicator", className: "grid place-content-center text-current transition-none [&>svg]:size-3.5", children: _jsx(CheckIcon, {}) }) }));
 }
 export { Checkbox };

package/dist/combobox.js

@@ -6,6 +6,7 @@ import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { formControlTriggerClassName } from "./internal/form-control.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
+import { optionState } from "./internal/styles.js";
 import { cn, onInputChange } from "./utils.js";
 /**
  * PageUp/PageDown jump size. The option list is `max-h-60`; ten rows is a
@@ -112,7 +113,6 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
     return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled: disabled, className: cn(formControlTriggerClassName, "justify-between", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: selected?.label ?? placeholder }), _jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", className: "w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { ref: inputRef, value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption ? optionId(highlight) : undefined }) }), _jsx("ul", { id: listId, role: "listbox", className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText })) : (filtered.map((option, index) => {
                             const isSelected = option.value === value;
                             const isActive = index === highlight;
-                            return (_jsx("li", { role: "none", children: _jsxs("button", { ref: isActive ? scrollHighlightedOption : undefined, id: optionId(index), type: "button", role: "option", "aria-selected": isSelected, className: cn("relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-3 text-left text-sm outline-hidden select-none", isSelected && "bg-selected text-selected-foreground", isActive &&
-                                        "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--color-ring)]"), onMouseEnter: () => setHighlight(index), onClick: () => selectValue(option.value), children: [_jsx("span", { className: "truncate", children: option.label }), isSelected ? (_jsx(CheckIcon, { className: "pointer-events-none absolute right-2 size-3.5" })) : null] }) }, option.value));
+                            return (_jsx("li", { role: "none", children: _jsxs("button", { ref: isActive ? scrollHighlightedOption : undefined, id: optionId(index), type: "button", role: "option", "aria-selected": isSelected, className: cn("relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-3 text-left text-sm outline-hidden select-none", isSelected && optionState.selected, isActive && optionState.active), onMouseEnter: () => setHighlight(index), onClick: () => selectValue(option.value), children: [_jsx("span", { className: "truncate", children: option.label }), isSelected ? (_jsx(CheckIcon, { className: "pointer-events-none absolute right-2 size-3.5" })) : null] }) }, option.value));
                         })) })] })] }));
 }

package/dist/dropdown-menu.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { DropdownMenu as DropdownMenuPrimitive } from "radix-ui";
 import { CheckIcon, ChevronRightIcon } from "lucide-react";
+import { dataDisabledState, optionState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /** Item highlight and selected chrome shared with `SelectItem`. */
-const menuItemClassName = "relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground focus:shadow-[inset_2px_0_0_var(--color-ring)] data-disabled:pointer-events-none data-disabled:opacity-50 data-inset:pl-9 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
+const menuItemClassName = cn(optionState.focus, dataDisabledState, "relative flex cursor-default items-center gap-2.5 rounded-none px-3 py-2 text-sm outline-hidden select-none data-inset:pl-9 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5");
 const menuContentClassName = "z-50 min-w-40 overflow-x-hidden overflow-y-auto rounded-none bg-popover p-1 text-popover-foreground shadow-md ring-1 ring-foreground/10 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-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";
 /** Action menu for commands (row actions, overflow menus). Use `Select` to pick a value. */
 function DropdownMenu({ ...props }) {

package/dist/form/markdown-field.js

@@ -5,7 +5,8 @@ import { Label } from "../label.js";
 import { Markdown } from "../markdown.js";
 import { Textarea } from "../textarea.js";
 import { ToggleGroup, ToggleGroupItem } from "../toggle-group.js";
-import { onInputChange } from "../utils.js";
+import { fieldSurface } from "../internal/styles.js";
+import { cn, onInputChange } from "../utils.js";
 import { FieldError, getFieldErrorMessage } from "./field-error.js";
 /**
  * GFM body field: Write is a textarea, Preview is the sanitized Markdown
@@ -22,5 +23,5 @@ export function FormMarkdownField({ field, id = field.name, label, placeholder =
         if (value === "write" || value === "preview")
             setMode(value);
     }
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(ToggleGroup, { type: "single", value: mode, onValueChange: handleModeChange, variant: "outline", size: "sm", spacing: 0, "aria-label": `${label} mode`, children: [_jsx(ToggleGroupItem, { value: "write", children: "Write" }), _jsx(ToggleGroupItem, { value: "preview", children: "Preview" })] })] }), mode === "write" ? (_jsx(Textarea, { id: id, value: field.state.value, onChange: onChange, onBlur: field.handleBlur, placeholder: placeholder, rows: rows, "aria-invalid": errorText ? true : undefined })) : (_jsx("div", { className: "min-h-16 rounded-none border border-input bg-background px-3 py-2", "aria-live": "polite", children: trimmed ? (_jsx(Markdown, { content: trimmed })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to preview" })) })), showError ? _jsx(FieldError, { text: errorText }) : null] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx(Label, { htmlFor: id, children: label }), _jsxs(ToggleGroup, { type: "single", value: mode, onValueChange: handleModeChange, variant: "outline", size: "sm", spacing: 0, "aria-label": `${label} mode`, children: [_jsx(ToggleGroupItem, { value: "write", children: "Write" }), _jsx(ToggleGroupItem, { value: "preview", children: "Preview" })] })] }), mode === "write" ? (_jsx(Textarea, { id: id, value: field.state.value, onChange: onChange, onBlur: field.handleBlur, placeholder: placeholder, rows: rows, "aria-invalid": errorText ? true : undefined })) : (_jsx("div", { className: cn(fieldSurface, "min-h-16"), "aria-live": "polite", children: trimmed ? (_jsx(Markdown, { content: trimmed })) : (_jsx("p", { className: "text-sm text-muted-foreground", children: "Nothing to preview" })) })), showError ? _jsx(FieldError, { text: errorText }) : null] }));
 }

package/dist/info-tip.js

@@ -3,6 +3,7 @@ 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 { focusRing } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * True when a mouse can hover. Touch and coarse pointers must use click;
@@ -52,7 +53,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
             }
             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
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { type: "button", "aria-label": label, "data-slot": "info-tip-trigger", "data-layout": layout, className: cn(focusRing, "relative inline-flex shrink-0 items-center justify-center rounded-none text-muted-foreground hover:text-selected-foreground focus-visible:text-selected-foreground", 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] })] }));
 }

package/dist/input.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { disabledState, fieldSurface, focusRing, invalidState, } from "./internal/styles.js";
 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 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(fieldSurface, focusRing, invalidState, disabledState, "h-10 file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground", 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 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:text-foreground 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 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:text-foreground 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/styles.d.ts

@@ -0,0 +1,50 @@
+/**
+ * State classes shared by the kit's controls. Components add these with
+ * `cn()` instead of retyping them, so a state looks the same everywhere and
+ * a change (such as the WCAG focus ring) happens here once. Tailwind only
+ * generates class names it finds as literals, so each state attribute gets
+ * its own complete string. `test/dry.test.ts` fails when a component types
+ * one of these by hand.
+ */
+/** Keyboard focus: a ring-colored border plus a solid 2px ring (WCAG 1.4.11). */
+export declare const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring";
+/** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
+export declare const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Native `disabled`: dimmed, with no hover or click. */
+export declare const disabledState = "disabled:pointer-events-none disabled:opacity-50";
+/** Radix `data-disabled` (menu and list items, slider). */
+export declare const dataDisabledState = "data-disabled:pointer-events-none data-disabled:opacity-50";
+/** The text-field surface, so Input, Textarea, and SelectTrigger line up. */
+export declare const fieldSurface = "w-full min-w-0 rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground md:text-sm";
+/**
+ * Selected chrome: the wash, selected text, and a selected border, because
+ * the wash alone is 1.2:1 against the page. One string per state attribute.
+ */
+export declare const selectedState: {
+    /**
+     * Toggle and ToggleGroupItem. Radix Toggle sets `data-state=on` and
+     * `aria-pressed`; group items always set `data-state=on`, add
+     * `aria-pressed` in multiple mode, and are radios with `aria-checked` in
+     * single mode. All three get the same chrome.
+     */
+    toggle: string;
+    /** Tab trigger and TabsNav link (`data-state="active"`). */
+    active: string;
+    /** Current page (`data-active="true"`). */
+    current: string;
+    /** Trigger whose menu or popover is open. */
+    expanded: string;
+    /** Quiet buttons and toggles on hover. */
+    hover: string;
+};
+/** Options in menus and listboxes. */
+export declare const optionState: {
+    /** Highlight as focus moves: grey fill plus a 2px ring bar (the fill alone is 1.1:1). */
+    focus: string;
+    /** The same highlight for lists that track the active option in state. */
+    active: string;
+    /** The chosen value (`data-state="checked"`); a check icon marks it too. */
+    checked: string;
+    /** The chosen value in lists that track selection in state. */
+    selected: string;
+};

package/dist/internal/styles.js

@@ -0,0 +1,50 @@
+/**
+ * State classes shared by the kit's controls. Components add these with
+ * `cn()` instead of retyping them, so a state looks the same everywhere and
+ * a change (such as the WCAG focus ring) happens here once. Tailwind only
+ * generates class names it finds as literals, so each state attribute gets
+ * its own complete string. `test/dry.test.ts` fails when a component types
+ * one of these by hand.
+ */
+/** Keyboard focus: a ring-colored border plus a solid 2px ring (WCAG 1.4.11). */
+export const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring";
+/** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
+export const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Native `disabled`: dimmed, with no hover or click. */
+export const disabledState = "disabled:pointer-events-none disabled:opacity-50";
+/** Radix `data-disabled` (menu and list items, slider). */
+export const dataDisabledState = "data-disabled:pointer-events-none data-disabled:opacity-50";
+/** The text-field surface, so Input, Textarea, and SelectTrigger line up. */
+export const fieldSurface = "w-full min-w-0 rounded-none border border-input bg-background px-3 py-2 text-base shadow-xs transition-[color,box-shadow] placeholder:text-muted-foreground md:text-sm";
+/**
+ * Selected chrome: the wash, selected text, and a selected border, because
+ * the wash alone is 1.2:1 against the page. One string per state attribute.
+ */
+export const selectedState = {
+    /**
+     * Toggle and ToggleGroupItem. Radix Toggle sets `data-state=on` and
+     * `aria-pressed`; group items always set `data-state=on`, add
+     * `aria-pressed` in multiple mode, and are radios with `aria-checked` in
+     * single mode. All three get the same chrome.
+     */
+    toggle: "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",
+    /** Tab trigger and TabsNav link (`data-state="active"`). */
+    active: "data-[state=active]:border-selected-foreground data-[state=active]:bg-selected data-[state=active]:text-selected-foreground",
+    /** Current page (`data-active="true"`). */
+    current: "data-[active=true]:border-selected-foreground data-[active=true]:bg-selected data-[active=true]:text-selected-foreground",
+    /** Trigger whose menu or popover is open. */
+    expanded: "aria-expanded:border-selected-foreground aria-expanded:bg-selected aria-expanded:text-selected-foreground",
+    /** Quiet buttons and toggles on hover. */
+    hover: "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground",
+};
+/** Options in menus and listboxes. */
+export const optionState = {
+    /** Highlight as focus moves: grey fill plus a 2px ring bar (the fill alone is 1.1:1). */
+    focus: "focus:bg-accent focus:text-accent-foreground focus:shadow-[inset_2px_0_0_var(--color-ring)]",
+    /** The same highlight for lists that track the active option in state. */
+    active: "bg-accent text-accent-foreground shadow-[inset_2px_0_0_var(--color-ring)]",
+    /** The chosen value (`data-state="checked"`); a check icon marks it too. */
+    checked: "data-[state=checked]:bg-selected data-[state=checked]:text-selected-foreground",
+    /** The chosen value in lists that track selection in state. */
+    selected: "bg-selected text-selected-foreground",
+};

package/dist/internal/tabs-styles.js

@@ -1,4 +1,5 @@
 import { cva } from "class-variance-authority";
+import { disabledState, focusRing, selectedState } from "./styles.js";
 const tabsListVariants = cva('group/tabs-list inline-flex w-fit items-stretch justify-center p-0 text-muted-foreground group-data-[orientation="horizontal"]/tabs:h-11 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col', {
     variants: {
         variant: {
@@ -11,9 +12,11 @@ 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: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',
+    focusRing,
+    disabledState,
+    '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 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',
+    selectedState.active,
     '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/pagination.js

@@ -2,6 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { ChevronLeftIcon, ChevronRightIcon, MoreHorizontalIcon, } from "lucide-react";
 import { buttonVariants } from "./button.js";
+import { selectedState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Page links for long lists and tables. Links are plain anchors so the page
@@ -21,7 +22,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-selected-foreground data-[active=true]:bg-selected data-[active=true]:text-selected-foreground", className), ...props }));
+        }), selectedState.current, "font-medium tracking-normal normal-case tabular-nums", 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

@@ -2,6 +2,7 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { RadioGroup as RadioGroupPrimitive } from "radix-ui";
+import { disabledState, focusRing, invalidState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * One choice from a short, visible list. Arrow keys move the selection.
@@ -15,6 +16,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 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(focusRing, invalidState, disabledState, "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 after:absolute after:-inset-x-3 after:-inset-y-2 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.js

@@ -3,6 +3,7 @@ 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 { optionState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 const LISTBOX_PAGE_SIZE = 10;
 /**
@@ -92,7 +93,7 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
                     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 &&
+                    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 && 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));
                 })) })] }));

package/dist/select.js

@@ -2,6 +2,7 @@
 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 { cn } from "./utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 function Select({ ...props }) {
@@ -14,7 +15,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 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(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" }) })] }));
 }
 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 +25,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 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 })] }));
+    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 })] }));
 }
 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.js

@@ -1,6 +1,7 @@
 "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 { cn } from "./utils.js";
 /**
  * Single-thumb range on Radix Slider. Square track and thumb, primary fill,
@@ -15,6 +16,6 @@ function Slider({ value, onValueChange, onValueCommit, min = 0, max = 100, step
             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" })] }));
+        }, 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") })] }));
 }
 export { Slider };

package/dist/sonner.d.ts

@@ -1,4 +1,8 @@
-import * as React from "react";
-import { type ToasterProps } from "sonner";
-declare const Toaster: ({ ...props }: ToasterProps) => React.JSX.Element;
-export { Toaster };
+import { toast, type ToasterProps } from "sonner";
+/**
+ * Mount one near the app root and call `toast()` from this module (not from
+ * `sonner` directly), so the app and the toaster always share one Sonner.
+ */
+declare const Toaster: ({ toastOptions, ...props }: ToasterProps) => import("react").JSX.Element;
+export { Toaster, toast };
+export type { ToasterProps };

package/dist/sonner.js

@@ -1,15 +1,61 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
-import * as React from "react";
+import { CircleAlertIcon, CircleCheckIcon, InfoIcon, LoaderCircleIcon, XIcon, } from "lucide-react";
 import { useTheme } from "next-themes";
-import { Toaster as Sonner } from "sonner";
-const Toaster = ({ ...props }) => {
+import { Toaster as Sonner, toast } from "sonner";
+import { buttonVariants } from "./button.js";
+import { cn } from "./utils.js";
+/**
+ * Toasts drawn entirely with kit classes. Sonner's own styles are unlayered
+ * CSS that Tailwind utilities cannot override, so the toaster runs Sonner
+ * `unstyled` and styles every part here: the popover surface, Alert-style
+ * status icons (the tone colors the icon, title, and border, not the body
+ * text), kit buttons for actions, and a labelled close button with the
+ * shared focus ring.
+ */
+const classNames = {
+    toast: "flex w-(--width) flex-wrap items-start justify-end gap-3 rounded-none border border-border bg-popover p-4 pr-10 text-sm text-popover-foreground shadow-lg",
+    // Fills the row beside the icon, so action buttons wrap to their own row
+    // (aligned right by the toast's justify-end).
+    content: "flex min-w-0 flex-1 basis-[calc(100%-1.75rem)] flex-col gap-0.5",
+    title: "font-medium leading-5",
+    description: "leading-5 text-muted-foreground",
+    icon: "mt-0.5 flex size-4 shrink-0 items-center justify-center [&_svg]:size-4",
+    actionButton: cn(buttonVariants({ size: "xs" }), "shrink-0"),
+    cancelButton: cn(buttonVariants({ variant: "outline", size: "xs" }), "shrink-0"),
+    closeButton: cn(buttonVariants({ variant: "ghost", size: "icon-xs" }), "absolute top-2 right-2 text-muted-foreground"),
+    success: "border-success/40 [&_[data-title]]:text-success",
+    warning: "border-warning/40 [&_[data-title]]:text-warning",
+    error: "border-destructive/40 [&_[data-title]]:text-destructive",
+};
+const icons = {
+    success: _jsx(CircleCheckIcon, { "aria-hidden": true, className: "text-success" }),
+    info: _jsx(InfoIcon, { "aria-hidden": true, className: "text-foreground" }),
+    warning: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-warning" }),
+    error: _jsx(CircleAlertIcon, { "aria-hidden": true, className: "text-destructive" }),
+    loading: (_jsx(LoaderCircleIcon, { "aria-hidden": true, className: "animate-spin text-muted-foreground" })),
+    close: _jsx(XIcon, { "aria-hidden": true }),
+};
+/** Merge app class names onto the kit's, part by part. */
+function mergeClassNames(extra) {
+    if (!extra)
+        return classNames;
+    const merged = { ...classNames };
+    for (const [part, value] of Object.entries(extra)) {
+        merged[part] = cn(classNames[part], value);
+    }
+    return merged;
+}
+/**
+ * Mount one near the app root and call `toast()` from this module (not from
+ * `sonner` directly), so the app and the toaster always share one Sonner.
+ */
+const Toaster = ({ toastOptions, ...props }) => {
     const { theme = "system" } = useTheme();
-    return (_jsx(Sonner, { theme: theme, className: "toaster group", style: {
-            "--normal-bg": "var(--popover)",
-            "--normal-text": "var(--popover-foreground)",
-            "--normal-border": "var(--border)",
-            "--border-radius": "0px",
-        }, ...props }));
+    return (_jsx(Sonner, { theme: theme, className: "toaster group", closeButton: true, icons: icons, ...props, toastOptions: {
+            ...toastOptions,
+            unstyled: true,
+            classNames: mergeClassNames(toastOptions?.classNames),
+        } }));
 };
-export { Toaster };
+export { Toaster, toast };

package/dist/switch.js

@@ -2,6 +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 { cn } from "./utils.js";
 /**
  * On/off setting that applies immediately (notifications, dark mode). Use
@@ -9,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("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" }) }));
+    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" }) }));
 }
 export { Switch };

package/dist/table.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { focusRing } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * True while the element's content is wider than its box. Re-checked when
@@ -32,7 +33,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", 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 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 }) }));
 }
 function TableHeader({ className, ...props }) {
     return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));

package/dist/textarea.js

@@ -1,7 +1,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { disabledState, fieldSurface, focusRing, invalidState, } from "./internal/styles.js";
 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 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(fieldSurface, focusRing, invalidState, disabledState, "flex field-sizing-content min-h-16 resize-none", className), ...props }));
 }
 export { Textarea };

package/dist/toggle.d.ts

@@ -2,15 +2,11 @@ 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.
+ * Selected chrome shared by Toggle and ToggleGroupItem (see
+ * `selectedState.toggle`): the wash, selected text, and a selected border
+ * for `data-state=on`, `aria-pressed`, and `aria-checked`.
  */
-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 selectedToggleChrome: string;
 declare const toggleVariants: (props?: ({
     variant?: "default" | "outline" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;

package/dist/toggle.js

@@ -3,18 +3,22 @@ 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 { cn } from "./utils.js";
 /**
- * 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.
+ * Selected chrome shared by Toggle and ToggleGroupItem (see
+ * `selectedState.toggle`): the wash, selected text, and a selected border
+ * for `data-state=on`, `aria-pressed`, and `aria-checked`.
  */
-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`, {
+const selectedToggleChrome = selectedState.toggle;
+const toggleVariants = cva([
+    focusRing,
+    selectedState.hover,
+    selectedToggleChrome,
+    invalidState,
+    disabledState,
+    "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors focus-visible:text-selected-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+], {
     variants: {
         variant: {
             default: "border border-transparent bg-transparent",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",
@@ -245,6 +245,7 @@
     "build": "tsc",
     "check": "npm run build && prettier --check .",
     "test": "npm run build && vitest run",
+    "test:coverage": "npm run build && vitest run --coverage",
     "prepack": "npm run build"
   },
   "engines": {
@@ -286,6 +287,7 @@
     "@types/node": "^25.5.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "4.1.11",
     "jsdom": "^29.1.1",
     "next": "16.2.6",
     "prettier": "^3.8.1",

package/skills/atlas-react-kit/SKILL.md

@@ -39,8 +39,8 @@ and tells Tailwind to scan the kit's compiled files:
 
 Dark mode needs `ThemeProvider` from `atlas-react-kit/theme-provider` near the
 root (or a `dark` class on an ancestor). Toasts need one `<Toaster />` from
-`atlas-react-kit/sonner`; call `toast()` from the `sonner` package, which the
-app should list as its own dependency. Fix missing setup rather than working
+`atlas-react-kit/sonner`; import `toast` from `atlas-react-kit/sonner` too,
+never from `sonner` (a second copy of Sonner never reaches the kit's toaster). Fix missing setup rather than working
 around unstyled components.
 
 ## 3. Pick the kit component for the job