atlas-react-kit 1.1.0 → 1.2.0

package/COMPONENTS.md

@@ -75,7 +75,7 @@ theme from `next-themes`, so toast consumers install that too.
 | `table-body-skeleton`         | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             |
 | `tabs`                        | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `TabsNavLink`, `tabsListVariants`, `tabsTriggerVariants`; list `variant` is `default` or `line`; `TabsNavLink` is the link inside `TabsNav` (required `active`, `asChild` for a router link); `TabsNav` / `TabsList` scroll horizontally only (`overflow-y` hidden, `p-1` counted in the scroller height, edge fade, active item into view, mouse drag scrolls the row) — do not wrap them in `overflow-x-auto`                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `toast`                       | `Toaster`, `toast`; mount one `Toaster` (`position`, `closeButton` (default on), `expand`, `visibleToasts`, `duration`), then `toast(message, options)`. The stack expands on hover and while keyboard focus is inside it; collapsed toasts behind the front one are hidden, `.success`, `.info`, `.warning`, `.error`, `.loading`, `.dismiss(id?)`. Options: `id` (replaces that toast), `description`, `duration`, `action` / `cancel` as `{ label, onClick }`. Kit-owned API: no toast library is exposed                                                                                                                                                                                                                                                                                                                                                                                                            |
-| `toggle`                      | `Toggle`, `toggleVariants`, `selectedToggleChrome`; `variant`, `size`. Pressed state is the selected wash, text, and border via `data-state=on`, `aria-pressed`, and `aria-checked`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
+| `toggle`                      | `Toggle`, `toggleVariants`; `variant`, `size`. `selectedToggleChrome` is deprecated: `toggleVariants()` already includes it. Pressed state is the selected wash, text, and border via `data-state=on`, `aria-pressed`, and `aria-checked`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               |
 | `toggle-group`                | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`. Items share `toggleVariants`, so single (radio) and multiple selections match a pressed `Toggle`                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   |
 | `theme-provider`              | `ThemeProvider`, `useTheme`; optional `storageKey` (default `atlas-theme`), `enableShortcut` for the `d` toggle                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         |
 | `tooltip`                     | `Tooltip`, `TooltipTrigger`, `TooltipContent`, `TooltipProvider`; opens on hover and focus; short labels only; content keeps a `max-w-xs` reading width (override with `className`)                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     |
@@ -124,7 +124,7 @@ each part carries a `data-slot` for parent selectors such as
 | `Combobox`                                         | `contentClassName` (panel, default trigger width), `listClassName` (default `max-h-60`); button props go to trigger                                                                                                                                                     | `combobox-search`, `combobox-list`, `combobox-option`                                                                                                                                                                                                                                            |
 | `SearchPicker`                                     | `listClassName` (default `max-h-60`); div props go to the root                                                                                                                                                                                                          | `search-picker-option`, `search-picker-empty`                                                                                                                                                                                                                                                    |
 | `InfoTip`                                          | `contentClassName` (default `w-72`); button props go to the trigger                                                                                                                                                                                                     |                                                                                                                                                                                                                                                                                                  |
-| `KanbanBoard`                                      | `scrollerClassName`, `columnClassName` (default `w-72 min-w-72` and a drop-area min height), `cardClassName` (cards and the drag overlay); div props go to the root                                                                                                     | `kanban-board`, `kanban-scroller`, `kanban-column`, `kanban-column-header`, `kanban-column-empty`, `kanban-card`, `kanban-card-handle`, `kanban-card-body`, `kanban-drag-overlay`, `kanban-action-rail`, `kanban-action-zone`, `kanban-scroll-button`, `kanban-overflow-fade`, `kanban-skeleton` |
+| `KanbanBoard`                                      | `scrollerClassName`, `columnClassName` (default `flex-1 basis-72 min-w-72` and a drop-area min height; columns grow to fill the board and keep an 18rem minimum so a long row still scrolls), `cardClassName` (cards and the drag overlay); div props go to the root    | `kanban-board`, `kanban-scroller`, `kanban-column`, `kanban-column-header`, `kanban-column-empty`, `kanban-card`, `kanban-card-handle`, `kanban-card-body`, `kanban-drag-overlay`, `kanban-action-rail`, `kanban-action-zone`, `kanban-scroll-button`, `kanban-overflow-fade`, `kanban-skeleton` |
 | `chart` pieces                                     | `ChartTooltip` and `ChartLegend` take div props; `ChartLegendKey` `className`                                                                                                                                                                                           | `chart-y-axis`, `chart-tooltip`, `chart-tooltip-row`, `chart-legend`, `chart-legend-key`                                                                                                                                                                                                         |
 | `PageHeader`, `PeriodStepper`, `SkipLink`          | `PageHeader` `titleClassName`; `PeriodStepper` `labelClassName`                                                                                                                                                                                                         | `page-header`, `page-header-heading`, `page-header-title`, `page-header-description`, `page-header-actions`, `period-stepper`, `period-stepper-label`, `skip-link`                                                                                                                               |
 | `FormCheckboxGroupField`                           | `className` (the options box), `fieldClassName` (the fieldset)                                                                                                                                                                                                          | `form-checkbox-group-options`                                                                                                                                                                                                                                                                    |
@@ -132,7 +132,7 @@ each part carries a `data-slot` for parent selectors such as
 | `DatePickerButton`, `DateTimePickerButton`         | `contentClassName`, `calendarProps` (`disabled` / `hidden` days, `startMonth`, `endMonth`, `weekStartsOn`, date-fns `locale`, `showOutsideDays`, `fixedWeeks`, `showWeekNumber`, `captionLayout`, `today`, `className`); `minDate` / `maxDate` add to its disabled days | `date-picker-value`, `date-picker-footer`, `date-time-picker-time`                                                                                                                                                                                                                               |
 | `form/*` fields                                    | `fieldClassName` (wrapper); `className` styles the control (on `FormControlField`, the wrapper); `FormSelectField` `contentClassName`; `FormMarkdownField` `previewClassName`                                                                                           | `form-field`, `form-field-header`, `form-field-description`, `form-field-error`, `form-feedback`, `form-markdown-preview`                                                                                                                                                                        |
 | `Table`                                            | `containerClassName` (the scroll box, e.g. `max-h-96 overflow-y-auto`); `className` styles the `<table>`                                                                                                                                                                |                                                                                                                                                                                                                                                                                                  |
-| `TabsList`, `TabsNav`                              | `scrollerClassName`; `TabsNav` `listClassName`; a list `className` height replaces `h-11`; `TabsNav` sizes to its links in a flex row, so add `w-full` to stretch it                                                                                                    | `tabs-scroller`                                                                                                                                                                                                                                                                                  |
+| `TabsList`, `TabsNav`                              | `scrollerClassName`; `TabsNav` `listClassName`; a list `className` height replaces `h-7`; default scroller is `h-9` (`p-1` + list `h-7`) to match `Button` `size="sm"`; `TabsNav` sizes to its links in a flex row, so add `w-full` to stretch it                       | `tabs-scroller`                                                                                                                                                                                                                                                                                  |
 | `SortableTableHead`                                | `buttonClassName`                                                                                                                                                                                                                                                       | `sortable-table-head-button`                                                                                                                                                                                                                                                                     |
 | `AccordionTrigger`, `AccordionContent`             | `headerClassName`; `AccordionContent` `className` styles the inner box                                                                                                                                                                                                  | `accordion-header`, `accordion-content-inner`                                                                                                                                                                                                                                                    |
 | `Progress`                                         | `indicatorClassName`                                                                                                                                                                                                                                                    | `progress-indicator`                                                                                                                                                                                                                                                                             |

package/README.md

@@ -8,7 +8,7 @@ React 19, Tailwind 4, and Node >=20.19 are required. Next 16 is needed only
 when using `next/nav-link`, `next/period-stepper`, or `next/tabs-nav-link`.
 
 ```sh
-npm install --save-exact atlas-react-kit@1.1.0
+npm install --save-exact atlas-react-kit@1.2.0
 ```
 
 Import components by subpath:

package/dist/accordion.js

@@ -3,7 +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 { disabledState, focusRing, quietTextHover } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /** Stacked sections that expand in place (FAQs, settings groups). */
 function Accordion({ ...props }) {
@@ -14,7 +14,7 @@ function AccordionItem({ className, ...props }) {
 }
 /** `headerClassName` styles the heading wrapper (`data-slot="accordion-header"`). */
 function AccordionTrigger({ className, headerClassName, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { "data-slot": "accordion-header", className: cn("flex", headerClassName), 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" })] }) }));
+    return (_jsx(AccordionPrimitive.Header, { "data-slot": "accordion-header", className: cn("flex", headerClassName), 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", quietTextHover, "[&[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" })] }) }));
 }
 /**
  * `className` styles the padded inner box (`data-slot="accordion-content-inner"`);

package/dist/badge.js

@@ -2,12 +2,15 @@ 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 { controlText, focusRing, invalidState } from "./internal/styles.js";
 import { cn } from "./utils.js";
 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:not([class*='size-'])]:size-3",
+    "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",
+    controlText,
+    // Smaller than `controlText`'s `text-xs`; tailwind-merge keeps this one.
+    "text-[0.625rem] transition-colors has-data-[icon=inline-end]:pr-0 has-data-[icon=inline-start]:pl-0 [&>svg]:pointer-events-none [&>svg:not([class*='size-'])]:size-3",
 ], {
     variants: {
         variant: {

package/dist/breadcrumb.js

@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Slot } from "radix-ui";
 import { ChevronRightIcon, MoreHorizontalIcon } from "lucide-react";
-import { focusRing } from "./internal/styles.js";
+import { focusRing, quietTextHover } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Where the current page sits in a hierarchy. The last item is
@@ -20,7 +20,7 @@ function BreadcrumbItem({ className, ...props }) {
 /** Pass `asChild` to render a router link (e.g. Next `Link`) with these styles. */
 function BreadcrumbLink({ asChild, className, ...props }) {
     const Comp = asChild ? Slot.Root : "a";
-    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn(focusRing, "transition-colors hover:text-selected-foreground focus-visible:text-selected-foreground", className), ...props }));
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn(focusRing, "transition-colors", quietTextHover, className), ...props }));
 }
 function BreadcrumbPage({ className, ...props }) {
     return (_jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", className: cn("font-medium text-foreground", className), ...props }));

package/dist/button.js

@@ -2,7 +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 { controlSize, disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
+import { controlSize, controlText, disabledState, focusRing, inlineIcon, invalidState, selectedState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Outline and ghost hover/focus: selected-foreground border, selected wash, and
@@ -19,7 +19,10 @@ 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",
+    "group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding",
+    controlText,
+    "transition-all select-none active:not-aria-[haspopup]:translate-y-px",
+    inlineIcon.default,
 ], {
     variants: {
         variant: {
@@ -32,11 +35,11 @@ const buttonVariants = cva([
         },
         size: {
             default: `${controlSize.default} gap-1.5`,
-            xs: "h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [&_svg:not([class*='size-'])]:size-3",
+            xs: `h-7 gap-1 px-3 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 ${inlineIcon.sm}`,
             sm: `${controlSize.sm} gap-1`,
             lg: `${controlSize.lg} gap-1.5`,
             icon: "size-10",
-            "icon-xs": "size-7 [&_svg:not([class*='size-'])]:size-3",
+            "icon-xs": `size-7 ${inlineIcon.sm}`,
             "icon-sm": "size-9",
             "icon-lg": "size-11",
         },

package/dist/combobox.js

@@ -5,9 +5,10 @@ import { ChevronDownIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
 import { formControlTriggerClassName } from "./internal/form-control.js";
-import { foldSearchText, handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
+import { handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
 import { ListboxEmptyStatus, PickerOption } from "./internal/listbox-option.js";
-import { createSearchIndex, filterSearchIndex, normalizeSearchQuery, } from "./internal/search.js";
+import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
+import { listboxScroll } from "./internal/styles.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn, onInputChange } from "./utils.js";
 const CREATE_OPTION_KEY = "__atlas-combobox-create";
@@ -134,9 +135,7 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             },
         });
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ...props, id: triggerId, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled: disabled, onKeyDown: onTriggerKeyDown, 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: cn("w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", contentClassName), children: [_jsx("div", { "data-slot": "combobox-search", className: "border-b p-2", children: _jsx(Input, { value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption ? listboxOptionId(listId, highlight) : undefined }) }), _jsx("ul", { id: listId, role: "listbox", "data-slot": "combobox-list", "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-labelledby": ariaLabelledBy ?? (ariaLabel ? undefined : triggerId), className: empty
-                            ? "sr-only"
-                            : cn("max-h-60 overflow-y-auto p-1", listClassName), children: list.map((option, index) => {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { ...props, id: triggerId, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, disabled: disabled, onKeyDown: onTriggerKeyDown, 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: cn("w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", contentClassName), children: [_jsx("div", { "data-slot": "combobox-search", className: "border-b p-2", children: _jsx(Input, { value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-label": searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption ? listboxOptionId(listId, highlight) : undefined }) }), _jsx("ul", { id: listId, role: "listbox", "data-slot": "combobox-list", "aria-label": ariaLabelledBy ? undefined : ariaLabel, "aria-labelledby": ariaLabelledBy ?? (ariaLabel ? undefined : triggerId), className: empty ? "sr-only" : cn(listboxScroll, "p-1", listClassName), children: list.map((option, index) => {
                             const isCreate = createOption != null && option === createOption;
                             const isSelected = option.value === value && !isCreate;
                             return (_jsx(PickerOption, { "data-slot": "combobox-option", listId: listId, index: index, active: index === highlight, selected: isSelected, showCheck: true, item: option, getLabel: getOptionLabel, onHighlight: setHighlight, onSelect: selectOption }, isCreate ? CREATE_OPTION_KEY : option.value));

package/dist/dropdown-menu.js

@@ -3,11 +3,11 @@ 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 { menuLabel, optionIcon, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
-import { dataDisabledState, optionState } from "./internal/styles.js";
+import { menuLabel, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
+import { dataDisabledState, inlineIcon, optionState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /** Menu row: the shared option row with menu padding and the inset slot. */
-const menuItemClassName = cn(optionRow, optionState.focus, dataDisabledState, optionIcon, "pr-3 data-inset:pl-9");
+const menuItemClassName = cn(optionRow, optionState.focus, dataDisabledState, inlineIcon.default, "pr-3 data-inset:pl-9");
 const menuContentClassName = cn(overlaySurface, overlaySideSlide, overlayFadeZoom, "z-50 overflow-x-hidden overflow-y-auto p-1");
 /** Action menu for commands (row actions, overflow menus). Use `Select` to pick a value. */
 function DropdownMenu({ ...props }) {

package/dist/info-tip.js

@@ -3,15 +3,9 @@ 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, hitArea44 } from "./internal/styles.js";
+import { focusRing, hitArea44, quietTextHover } from "./internal/styles.js";
+import { HOVER_MEDIA_QUERY, useMediaQuery } from "./internal/use-media-query.js";
 import { cn } from "./utils.js";
-/**
- * True when a mouse can hover. Touch and coarse pointers must use click;
- * a hover-open popover would trap them after the first tap.
- */
-function canHoverOpen() {
-    return window.matchMedia("(hover: hover) and (pointer: fine)").matches;
-}
 /**
  * Longer help than a Tooltip: a Popover with a 20px glyph and a 44px hit
  * area. Hover opens only on a fine pointer; click, tap, and keyboard always
@@ -25,6 +19,8 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
     const openedBy = React.useRef(null);
     const titleId = React.useId();
     const inline = layout === "inline";
+    // Hover opens only for a pointer that can hover; touch must click.
+    const canHoverOpen = useMediaQuery(HOVER_MEDIA_QUERY);
     const cancelClose = () => {
         if (closeTimer.current !== null) {
             window.clearTimeout(closeTimer.current);
@@ -32,7 +28,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
         }
     };
     const openFromHover = () => {
-        if (!canHoverOpen())
+        if (!canHoverOpen)
             return;
         cancelClose();
         if (open)
@@ -41,7 +37,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
         setOpen(true);
     };
     const closeFromHover = () => {
-        if (!canHoverOpen() || openedBy.current !== "hover")
+        if (!canHoverOpen || openedBy.current !== "hover")
             return;
         cancelClose();
         // Leave a beat so the pointer can travel from the glyph into the panel.
@@ -55,7 +51,7 @@ function InfoTip({ label, title, description, children, layout = "box", side = "
             if (next)
                 openedBy.current = "click";
             setOpen(next);
-        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ...props, 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 ? cn("size-5 align-middle", hitArea44) : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, onClick: (event) => {
+        }, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsx("button", { ...props, 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", quietTextHover, inline ? cn("size-5 align-middle", hitArea44) : "size-11", className), onMouseEnter: openFromHover, onMouseLeave: closeFromHover, onClick: (event) => {
                         // Hover already opened the panel; this click pins it instead of
                         // toggling it closed (Playwright and real mice both hover before
                         // they click). Preventing default skips Radix's toggle.

package/dist/internal/listbox-navigation.d.ts

@@ -28,8 +28,3 @@ export declare function handleListboxKey(event: {
     setHighlight: (index: number) => void;
     onEnter: (index: number) => void;
 }): boolean;
-/**
- * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
- * Combobox and SearchPicker (which re-exports it).
- */
-export declare function foldSearchText(value: string): string;

package/dist/internal/listbox-navigation.js

@@ -66,10 +66,3 @@ export function handleListboxKey(event, { highlight, length, setHighlight, onEnt
     }
     return false;
 }
-/**
- * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
- * Combobox and SearchPicker (which re-exports it).
- */
-export function foldSearchText(value) {
-    return value.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
-}

package/dist/internal/overlay-styles.d.ts

@@ -22,7 +22,5 @@ export declare const overlayFadeZoom = "duration-100 data-open:animate-in data-o
  * indicator, plus the highlight from `optionState`.
  */
 export declare const optionRow = "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pl-3 text-left text-sm outline-hidden select-none";
-/** Icons in a row: no pointer events, no shrinking, 14px unless sized. */
-export declare const optionIcon = "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
 /** Group label in a menu or listbox (DropdownMenuLabel, SelectLabel). */
 export declare const menuLabel = "px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase";

package/dist/internal/overlay-styles.js

@@ -22,7 +22,5 @@ export const overlayFadeZoom = `${overlayFade} data-open:zoom-in-95 data-closed:
  * indicator, plus the highlight from `optionState`.
  */
 export const optionRow = "relative flex w-full cursor-default items-center gap-2.5 rounded-none py-2 pl-3 text-left text-sm outline-hidden select-none";
-/** Icons in a row: no pointer events, no shrinking, 14px unless sized. */
-export const optionIcon = "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5";
 /** Group label in a menu or listbox (DropdownMenuLabel, SelectLabel). */
 export const menuLabel = "px-3 py-2 text-xs font-semibold tracking-wider text-muted-foreground uppercase";

package/dist/internal/search.d.ts

@@ -1,6 +1,10 @@
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
+ * Combobox and SearchPicker (which re-exports it).
+ */
+export declare function foldSearchText(value: string): string;
 /** Fold the query once; item labels are folded when their catalog changes. */
 export declare function normalizeSearchQuery(query: string): string;
-export declare function matchesSearchLabel(label: string, needle: string): boolean;
 export declare function createSearchIndex<T>(items: T[], getLabel: (item: T) => string): {
     item: T;
     label: string;

package/dist/internal/search.js

@@ -1,16 +1,19 @@
-import { foldSearchText } from "./listbox-navigation.js";
+/**
+ * Case-fold and strip combining marks so "nino" matches "Niño". Shared by
+ * Combobox and SearchPicker (which re-exports it).
+ */
+export function foldSearchText(value) {
+    return value.normalize("NFD").replace(/\p{M}/gu, "").toLowerCase();
+}
 /** Fold the query once; item labels are folded when their catalog changes. */
 export function normalizeSearchQuery(query) {
     return foldSearchText(query.trim());
 }
-export function matchesSearchLabel(label, needle) {
-    return label.includes(needle);
-}
 export function createSearchIndex(items, getLabel) {
     return items.map((item) => ({ item, label: foldSearchText(getLabel(item)) }));
 }
 export function filterSearchIndex(index, needle) {
     return index
-        .filter(({ label }) => matchesSearchLabel(label, needle))
+        .filter(({ label }) => label.includes(needle))
         .map(({ item }) => item);
 }

package/dist/internal/styles.d.ts

@@ -39,6 +39,11 @@ export declare const selectedState: {
 };
 /** The "No results" row of a listbox. */
 export declare const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
+/**
+ * The scrolling frame of a listbox (Combobox, SearchPicker): about ten rows
+ * tall, then scrolls. A consumer `listClassName` replaces the height.
+ */
+export declare const listboxScroll = "max-h-60 overflow-y-auto";
 /** 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). */
@@ -72,6 +77,28 @@ export declare const controlSize: {
     sm: string;
     lg: string;
 };
+/**
+ * Label text of a control (Button, Toggle, Badge): small, bold, wide-tracked
+ * uppercase on one line. Badge adds its own `text-[0.625rem]` after it;
+ * tailwind-merge then drops the `text-xs`.
+ */
+export declare const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/**
+ * Icons inside a control or row: no pointer events, no shrinking, 14px
+ * unless the icon sets its own `size-*`. `sm` lowers that default to 12px
+ * for the xs controls; it goes after `default`, and tailwind-merge keeps
+ * the later size.
+ */
+export declare const inlineIcon: {
+    default: string;
+    sm: string;
+};
+/**
+ * Brand-colored text on hover and keyboard focus for quiet links and
+ * triggers (BreadcrumbLink, AccordionTrigger, InfoTip). DESIGN_RULES.md,
+ * "Tokens": brand text is `text-selected-foreground`, never `text-primary`.
+ */
+export declare const quietTextHover = "hover:text-selected-foreground focus-visible:text-selected-foreground";
 /**
  * Uppercase muted label used on tiles, legends, and thin section chrome.
  * Re-exported publicly from `atlas-react-kit/stat-tile`.

package/dist/internal/styles.js

@@ -39,6 +39,11 @@ export const selectedState = {
 };
 /** The "No results" row of a listbox. */
 export const listboxEmpty = "px-3 py-4 text-center text-sm text-muted-foreground";
+/**
+ * The scrolling frame of a listbox (Combobox, SearchPicker): about ten rows
+ * tall, then scrolls. A consumer `listClassName` replaces the height.
+ */
+export const listboxScroll = "max-h-60 overflow-y-auto";
 /** 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). */
@@ -72,6 +77,28 @@ export const controlSize = {
     sm: "h-9 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
     lg: "h-11 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
 };
+/**
+ * Label text of a control (Button, Toggle, Badge): small, bold, wide-tracked
+ * uppercase on one line. Badge adds its own `text-[0.625rem]` after it;
+ * tailwind-merge then drops the `text-xs`.
+ */
+export const controlText = "text-xs font-semibold tracking-widest whitespace-nowrap uppercase";
+/**
+ * Icons inside a control or row: no pointer events, no shrinking, 14px
+ * unless the icon sets its own `size-*`. `sm` lowers that default to 12px
+ * for the xs controls; it goes after `default`, and tailwind-merge keeps
+ * the later size.
+ */
+export const inlineIcon = {
+    default: "[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5",
+    sm: "[&_svg:not([class*='size-'])]:size-3",
+};
+/**
+ * Brand-colored text on hover and keyboard focus for quiet links and
+ * triggers (BreadcrumbLink, AccordionTrigger, InfoTip). DESIGN_RULES.md,
+ * "Tokens": brand text is `text-selected-foreground`, never `text-primary`.
+ */
+export const quietTextHover = "hover:text-selected-foreground focus-visible:text-selected-foreground";
 /**
  * Uppercase muted label used on tiles, legends, and thin section chrome.
  * Re-exported publicly from `atlas-react-kit/stat-tile`.

package/dist/internal/tabs-styles.d.ts

@@ -10,13 +10,14 @@ declare const tabsListVariants: (props?: ({
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Horizontal scroller around a tab row. `p-1` leaves room for the active
- * border and focus ring; the height is the `h-11` list plus that padding
- * (`h-13` = 44px + 8px) so the list fits the content box. Putting padding
- * on an overflow box without this height makes `scrollHeight` 4px taller
- * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
- * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
- * (`h-14` = 44px + 4px + 8px). A block, so it fills its parent without
- * `w-full`. `theme.css` hides the scrollbar and draws the edge fades.
+ * border and focus ring; the height is the `h-7` list plus that padding
+ * (`h-9` = 28px + 8px) so the list fits the content box and the outer
+ * row matches `Button` `size="sm"`. Putting padding on an overflow box
+ * without this height makes `scrollHeight` taller than `clientHeight`
+ * and a vertical scrollbar appears if `overflow-y` is not hidden. Line
+ * variant adds `pb-2` for the underline (`h-10` = 28px + 4px + 8px). A
+ * block, so it fills its parent without `w-full`. `theme.css` hides the
+ * scrollbar and draws the edge fades.
  */
 declare const tabsScrollerVariants: (props?: ({
     variant?: "default" | "line" | null | undefined;

package/dist/internal/tabs-styles.js

@@ -1,5 +1,5 @@
 import { cva } from "class-variance-authority";
-import { disabledState, focusRing, selectedState } from "./styles.js";
+import { disabledState, focusRing, inlineIcon, selectedState, } from "./styles.js";
 /**
  * Tab row. `TabsList` and `TabsNav` pass `orientation`, which picks plain
  * size classes so a consumer `className` (`h-9`) replaces them. Called
@@ -13,8 +13,8 @@ const tabsListVariants = cva("group/tabs-list inline-flex w-max min-w-full items
             line: "gap-1 bg-transparent",
         },
         orientation: {
-            auto: 'group-data-[orientation="horizontal"]/tabs:h-11 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col',
-            horizontal: "h-11",
+            auto: 'group-data-[orientation="horizontal"]/tabs:h-7 group-data-[orientation="vertical"]/tabs:h-fit group-data-[orientation="vertical"]/tabs:flex-col',
+            horizontal: "h-7",
             vertical: "h-fit flex-col",
         },
     },
@@ -25,13 +25,14 @@ const tabsListVariants = cva("group/tabs-list inline-flex w-max min-w-full items
 });
 /**
  * Horizontal scroller around a tab row. `p-1` leaves room for the active
- * border and focus ring; the height is the `h-11` list plus that padding
- * (`h-13` = 44px + 8px) so the list fits the content box. Putting padding
- * on an overflow box without this height makes `scrollHeight` 4px taller
- * than `clientHeight` (48 vs 44) and a vertical scrollbar appears if
- * `overflow-y` is not hidden. Line variant adds `pb-2` for the underline
- * (`h-14` = 44px + 4px + 8px). A block, so it fills its parent without
- * `w-full`. `theme.css` hides the scrollbar and draws the edge fades.
+ * border and focus ring; the height is the `h-7` list plus that padding
+ * (`h-9` = 28px + 8px) so the list fits the content box and the outer
+ * row matches `Button` `size="sm"`. Putting padding on an overflow box
+ * without this height makes `scrollHeight` taller than `clientHeight`
+ * and a vertical scrollbar appears if `overflow-y` is not hidden. Line
+ * variant adds `pb-2` for the underline (`h-10` = 28px + 4px + 8px). A
+ * block, so it fills its parent without `w-full`. `theme.css` hides the
+ * scrollbar and draws the edge fades.
  */
 const tabsScrollerVariants = cva("relative box-border min-w-0 max-w-full overflow-x-auto overflow-y-hidden overscroll-x-contain p-1", {
     variants: {
@@ -45,8 +46,8 @@ const tabsScrollerVariants = cva("relative box-border min-w-0 max-w-full overflo
         },
     },
     compoundVariants: [
-        { variant: "default", orientation: "horizontal", className: "h-13" },
-        { variant: "line", orientation: "horizontal", className: "h-14" },
+        { variant: "default", orientation: "horizontal", className: "h-9" },
+        { variant: "line", orientation: "horizontal", className: "h-10" },
     ],
     defaultVariants: {
         variant: "default",
@@ -59,7 +60,8 @@ const tabsTriggerVariants = cva([
     // flex-none + px-4: every trigger and TabsNav link keeps the same
     // horizontal padding. flex-1 used to grow short labels and make the
     // longest (e.g. Apple Reminders) look tighter. No last-child padding.
-    'relative inline-flex h-full min-w-max flex-none 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',
+    'relative inline-flex h-full min-w-max flex-none 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',
+    inlineIcon.default,
     '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',
     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',

package/dist/internal/use-media-query.d.ts

@@ -1,5 +1,10 @@
 /** Tailwind `md` breakpoint. Used for range calendars that stack on small screens. */
 export declare const MD_MEDIA_QUERY = "(min-width: 768px)";
+/**
+ * A pointer that can hover (a mouse or trackpad). Touch and coarse pointers
+ * must use click; a hover-open popover would trap them after the first tap.
+ */
+export declare const HOVER_MEDIA_QUERY = "(hover: hover) and (pointer: fine)";
 /**
  * Subscribe to a CSS media query with `useSyncExternalStore`. The server
  * render and hydration use `defaultMatches`, so the markup always agrees;

package/dist/internal/use-media-query.js

@@ -2,6 +2,11 @@
 import * as React from "react";
 /** Tailwind `md` breakpoint. Used for range calendars that stack on small screens. */
 export const MD_MEDIA_QUERY = "(min-width: 768px)";
+/**
+ * A pointer that can hover (a mouse or trackpad). Touch and coarse pointers
+ * must use click; a hover-open popover would trap them after the first tap.
+ */
+export const HOVER_MEDIA_QUERY = "(hover: hover) and (pointer: fine)";
 function hasMatchMedia() {
     return (typeof window !== "undefined" && typeof window.matchMedia === "function");
 }

package/dist/kanban.d.ts

@@ -59,7 +59,7 @@ export type KanbanBoardProps<T extends {
     deleteLabel?: string;
     /** Classes for the horizontal scroller that holds the columns. */
     scrollerClassName?: string;
-    /** Classes for every column, e.g. its width. */
+    /** Classes for every column, e.g. to pin a width instead of growing. */
     columnClassName?: string;
     /** Classes for every card, including the one under the pointer while dragging. */
     cardClassName?: string;

package/dist/kanban.js

@@ -13,7 +13,8 @@ import { cn } from "./utils.js";
 const COLUMN_DROP_PRIORITY = 1;
 /** Rail zones beat columns when both are under the pointer. */
 const ACTION_ZONE_PRIORITY = 10;
-const columnSize = "w-72 min-w-72 min-h-[min(70vh,32rem)]";
+/** Grow to fill the board; 18rem floor so a long row still scrolls. */
+const columnSize = "flex-1 basis-72 min-w-72 min-h-[min(70vh,32rem)]";
 /**
  * Drag-and-drop board built on dnd-kit. The consumer owns `items` and maps
  * each to a column; the board derives its layout from them, so an optimistic
@@ -123,7 +124,7 @@ function KanbanColumnView({ column, count, emptyLabel, loading, className, child
         collisionPriority: COLUMN_DROP_PRIORITY,
     });
     const empty = count === 0;
-    return (_jsxs("div", { ref: ref, "data-slot": "kanban-column", "data-drop-target": isDropTarget || undefined, className: cn("flex shrink-0 snap-start flex-col gap-3 p-3", "bg-muted/40 ring-1 ring-foreground/5", "data-drop-target:bg-muted/60 data-drop-target:ring-2 data-drop-target:ring-ring/60", columnSize, className), children: [_jsxs("header", { "data-slot": "kanban-column-header", className: "flex items-start justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-widest uppercase", children: [column.color ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { backgroundColor: column.color } })) : null, _jsx("span", { className: "leading-tight", children: column.label })] }), _jsxs("span", { className: "flex shrink-0 flex-col items-end gap-0.5 text-muted-foreground tabular-nums", children: [_jsx("span", { className: "text-xs", children: count }), column.badge ? (_jsx("span", { className: "text-[10px] font-medium", children: column.badge })) : null] })] }), _jsx("div", { className: "flex min-h-32 flex-1 flex-col gap-2 overflow-y-auto pr-1", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20" }), _jsx(Skeleton, { className: "h-16" })] })) : (_jsxs(_Fragment, { children: [children, _jsx("p", { "data-slot": "kanban-column-empty", "aria-hidden": !empty, className: cn("border border-dashed px-3 py-6 text-center text-xs text-muted-foreground", !empty && "hidden"), children: emptyLabel })] })) })] }));
+    return (_jsxs("div", { ref: ref, "data-slot": "kanban-column", "data-drop-target": isDropTarget || undefined, className: cn("flex snap-start flex-col gap-3 p-3", "bg-muted/40 ring-1 ring-foreground/5", "data-drop-target:bg-muted/60 data-drop-target:ring-2 data-drop-target:ring-ring/60", columnSize, className), children: [_jsxs("header", { "data-slot": "kanban-column-header", className: "flex items-start justify-between gap-2", children: [_jsxs("span", { className: "flex items-center gap-2 text-xs font-semibold tracking-widest uppercase", children: [column.color ? (_jsx("span", { "aria-hidden": true, className: "size-2 shrink-0 rounded-full", style: { backgroundColor: column.color } })) : null, _jsx("span", { className: "leading-tight", children: column.label })] }), _jsxs("span", { className: "flex shrink-0 flex-col items-end gap-0.5 text-muted-foreground tabular-nums", children: [_jsx("span", { className: "text-xs", children: count }), column.badge ? (_jsx("span", { className: "text-[10px] font-medium", children: column.badge })) : null] })] }), _jsx("div", { className: "flex min-h-32 flex-1 flex-col gap-2 overflow-y-auto pr-1", children: loading ? (_jsxs(_Fragment, { children: [_jsx(Skeleton, { className: "h-20" }), _jsx(Skeleton, { className: "h-16" })] })) : (_jsxs(_Fragment, { children: [children, _jsx("p", { "data-slot": "kanban-column-empty", "aria-hidden": !empty, className: cn("border border-dashed px-3 py-6 text-center text-xs text-muted-foreground", !empty && "hidden"), children: emptyLabel })] })) })] }));
 }
 const cardChrome = cn("flex border border-border bg-card text-card-foreground");
 const handleChrome = cn("flex shrink-0 items-center self-stretch border-r border-border", "bg-muted/30 px-1.5 text-muted-foreground");
@@ -192,6 +193,6 @@ function OverflowFade({ side, visible, }) {
 }
 /** Board-shaped placeholder for a route `loading` file. */
 function KanbanSkeleton({ columnCount = 4, className, columnClassName, ...props }) {
-    return (_jsx("div", { "data-slot": "kanban-skeleton", className: cn("flex gap-4 overflow-hidden", className), ...props, children: Array.from({ length: columnCount }, (_, index) => (_jsx(Skeleton, { className: cn("shrink-0", columnSize, columnClassName) }, index))) }));
+    return (_jsx("div", { "data-slot": "kanban-skeleton", className: cn("flex gap-4 overflow-hidden", className), ...props, children: Array.from({ length: columnCount }, (_, index) => (_jsx(Skeleton, { className: cn(columnSize, columnClassName) }, index))) }));
 }
 export { KanbanBoard, KanbanSkeleton };

package/dist/search-picker.d.ts

@@ -1,5 +1,5 @@
 import * as React from "react";
-import { foldSearchText } from "./internal/listbox-navigation.js";
+import { foldSearchText } from "./internal/search.js";
 export { foldSearchText };
 /**
  * Default SearchPicker filter: the folded label includes the folded query.

package/dist/search-picker.js

@@ -3,9 +3,10 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Input } from "./input.js";
 import { Label } from "./label.js";
-import { foldSearchText, handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
+import { handleListboxKey, listboxOptionId, } from "./internal/listbox-navigation.js";
 import { ListboxEmptyStatus, PickerOption } from "./internal/listbox-option.js";
-import { createSearchIndex, filterSearchIndex, matchesSearchLabel, normalizeSearchQuery, } from "./internal/search.js";
+import { createSearchIndex, filterSearchIndex, foldSearchText, normalizeSearchQuery, } from "./internal/search.js";
+import { listboxScroll } from "./internal/styles.js";
 import { cn } from "./utils.js";
 export { foldSearchText };
 /**
@@ -15,7 +16,7 @@ export function defaultSearchFilter(item, query, getLabel) {
     const needle = normalizeSearchQuery(query);
     if (!needle)
         return true;
-    return matchesSearchLabel(foldSearchText(getLabel(item)), needle);
+    return foldSearchText(getLabel(item)).includes(needle);
 }
 /** Frame shared by the listbox and the empty state that replaces it. */
 const listFrame = "border border-input bg-background";
@@ -84,8 +85,6 @@ function SearchPicker({ items, getValue, getLabel, filter = defaultSearchFilter,
         }
         event.currentTarget.blur();
     };
-    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? listboxOptionId(listId, highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: empty
-                    ? "sr-only"
-                    : cn("max-h-60 overflow-y-auto", listFrame, listClassName), children: rows.map(({ item, value: itemValue }, index) => (_jsx(PickerOption, { "data-slot": "search-picker-option", listId: listId, index: index, active: index === highlight, selected: itemValue === value, disabled: disabled, item: item, getLabel: getLabel, onHighlight: setHighlight, onSelect: selectItem }, itemValue))) }), _jsx(ListboxEmptyStatus, { "data-slot": "search-picker-empty", empty: empty, className: listFrame, children: emptyText })] }));
+    return (_jsxs("div", { "data-slot": "search-picker", className: cn("flex flex-col gap-1.5", className), ...props, children: [_jsx(Label, { htmlFor: inputId, children: label }), _jsx(Input, { id: inputId, role: "combobox", "aria-expanded": true, "aria-controls": listId, "aria-autocomplete": "list", "aria-activedescendant": active ? listboxOptionId(listId, highlight) : undefined, value: query, disabled: disabled, placeholder: placeholder, onChange: (event) => setQuery(event.target.value), onKeyDown: onKeyDown }), _jsx("ul", { id: listId, role: "listbox", "aria-label": listLabel ?? label, className: empty ? "sr-only" : cn(listboxScroll, listFrame, listClassName), children: rows.map(({ item, value: itemValue }, index) => (_jsx(PickerOption, { "data-slot": "search-picker-option", listId: listId, index: index, active: index === highlight, selected: itemValue === value, disabled: disabled, item: item, getLabel: getLabel, onHighlight: setHighlight, onSelect: selectItem }, itemValue))) }), _jsx(ListboxEmptyStatus, { "data-slot": "search-picker-empty", empty: empty, className: listFrame, children: emptyText })] }));
 }
 export { SearchPicker };

package/dist/select.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Select as SelectPrimitive } from "radix-ui";
-import { dataDisabledState, disabledState, fieldSurface, focusRing, invalidState, optionState, } from "./internal/styles.js";
-import { menuLabel, optionIcon, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
+import { dataDisabledState, disabledState, fieldSurface, focusRing, inlineIcon, invalidState, optionState, } from "./internal/styles.js";
+import { menuLabel, optionRow, overlayFadeZoom, overlaySideSlide, overlaySurface, } from "./internal/overlay-styles.js";
 import { cn } from "./utils.js";
 import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
 /**
@@ -11,7 +11,7 @@ import { ChevronDownIcon, CheckIcon, ChevronUpIcon } from "lucide-react";
  * replaces them (a `data-[size=*]:` variant would outrank it).
  */
 const triggerHeight = { default: "h-10", sm: "h-9" };
-const scrollButtonClassName = "z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-3.5";
+const scrollButtonClassName = cn("z-10 flex cursor-default items-center justify-center bg-popover py-1", inlineIcon.default);
 function Select({ ...props }) {
     return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
 }
@@ -22,7 +22,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(fieldSurface, focusRing, invalidState, disabledState, optionIcon, triggerHeight[size], "flex items-center justify-between gap-1.5 whitespace-nowrap data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { "data-slot": "select-icon", asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn(fieldSurface, focusRing, invalidState, disabledState, inlineIcon.default, triggerHeight[size], "flex items-center justify-between gap-1.5 whitespace-nowrap data-placeholder:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { "data-slot": "select-icon", asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, position = "popper", align = "center", sideOffset = 4, collisionPadding = 8, ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn(overlaySurface, overlaySideSlide, overlayFadeZoom, "relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto data-[align-trigger=true]:animate-none", position === "popper" &&
@@ -32,7 +32,7 @@ function SelectLabel({ className, ...props }) {
     return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn(menuLabel, className), ...props }));
 }
 function SelectItem({ className, children, ...props }) {
-    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionRow, optionState.focus, optionState.checked, dataDisabledState, optionIcon, "pr-8 not-data-[variant=destructive]:focus:**:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { "data-slot": "select-item-indicator", children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
+    return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn(optionRow, optionState.focus, optionState.checked, dataDisabledState, inlineIcon.default, "pr-8 not-data-[variant=destructive]:focus:**:text-accent-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { "data-slot": "select-item-indicator", children: _jsx(CheckIcon, { className: "pointer-events-none" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
 }
 function SelectSeparator({ className, ...props }) {
     return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1.5 my-1.5 h-px bg-border", className), ...props }));

package/dist/tabs.d.ts

@@ -5,14 +5,14 @@ import type { AsChildProps } from "./internal/as-child.js";
 import { tabsListVariants, tabsTriggerVariants } from "./internal/tabs-styles.js";
 /** Props `TabsList` and `TabsNav` share for the scroller around their row. */
 type TabsScrollerClassNameProps = {
-    /** Classes for the scroller around the tab row (`h-13` with `p-1` by default). */
+    /** Classes for the scroller around the tab row (`h-9` with `p-1` by default). */
     scrollerClassName?: string;
 };
 declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
 /**
- * The tab row inside its scroller. `className` styles the list (its `h-11`
+ * The tab row inside its scroller. `className` styles the list (its `h-7`
  * height, fill, gap); `scrollerClassName` styles the scroller around it
- * (`h-13` with `p-1` for the active border and focus ring).
+ * (`h-9` with `p-1` for the active border and focus ring).
  */
 declare function TabsList({ className, scrollerClassName, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & Omit<VariantProps<typeof tabsListVariants>, "orientation"> & TabsScrollerClassNameProps): React.JSX.Element;
 declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;

package/dist/tabs.js

@@ -9,7 +9,7 @@ import { useDragScroll } from "./internal/use-drag-scroll.js";
 import { useHorizontalOverflow } from "./internal/use-horizontal-overflow.js";
 import { cn } from "./utils.js";
 /**
- * The root's orientation, so the list can pick plain size classes (`h-11`)
+ * The root's orientation, so the list can pick plain size classes (`h-7`)
  * that a consumer `className` replaces, instead of `group-data-*` variants
  * that would beat it.
  */
@@ -21,7 +21,7 @@ function Tabs({ className, orientation = "horizontal", ...props }) {
  * Horizontal scroller around a tab row. `overflow-x: auto` alone would
  * compute `overflow-y` to `auto` as well (CSS overflow pairing), so the
  * active tab's border and focus ring grow a vertical scrollbar. Pad for
- * those strokes *inside* the box (`h-13` = `h-11` list + `p-1`), clip the
+ * those strokes *inside* the box (`h-9` = `h-7` list + `p-1`), clip the
  * y axis as a backstop, and fade the edges while the row overflows —
  * same cue as `Table`. While it overflows, a mouse can also drag the row
  * sideways (`useDragScroll`); touch, wheel and keyboard scroll as before.
@@ -50,9 +50,9 @@ function TabsScroller({ variant = "default", orientation = "horizontal", classNa
     return (_jsx("div", { ref: ref, "data-slot": "tabs-scroller", "data-variant": variant, tabIndex: overflowing ? 0 : undefined, className: cn(focusRing, tabsScrollerVariants({ variant, orientation }), className), children: children }));
 }
 /**
- * The tab row inside its scroller. `className` styles the list (its `h-11`
+ * The tab row inside its scroller. `className` styles the list (its `h-7`
  * height, fill, gap); `scrollerClassName` styles the scroller around it
- * (`h-13` with `p-1` for the active border and focus ring).
+ * (`h-9` with `p-1` for the active border and focus ring).
  */
 function TabsList({ className, scrollerClassName, variant = "default", ...props }) {
     const orientation = React.useContext(TabsOrientationContext);

package/dist/toggle.d.ts

@@ -5,6 +5,8 @@ import { Toggle as TogglePrimitive } from "radix-ui";
  * 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`.
+ *
+ * @deprecated `toggleVariants()` already includes this chrome. Removed in 2.0.
  */
 declare const selectedToggleChrome: string;
 declare const toggleVariants: (props?: ({

package/dist/toggle.js

@@ -3,21 +3,26 @@ 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 { controlSize, disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
+import { controlSize, controlText, disabledState, focusRing, inlineIcon, invalidState, selectedState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * 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`.
+ *
+ * @deprecated `toggleVariants()` already includes this chrome. Removed in 2.0.
  */
 const selectedToggleChrome = selectedState.toggle;
 const toggleVariants = cva([
     focusRing,
     selectedState.hover,
-    selectedToggleChrome,
+    selectedState.toggle,
     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",
+    "group/toggle inline-flex items-center justify-center gap-1.5 rounded-none",
+    controlText,
+    "transition-colors focus-visible:text-selected-foreground",
+    inlineIcon.default,
 ], {
     variants: {
         variant: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "atlas-react-kit",
-  "version": "1.1.0",
+  "version": "1.2.0",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",