atlas-react-kit 1.0.0 → 1.2.0

package/dist/picker-shell.js

@@ -5,7 +5,7 @@ import { CalendarIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { toDate, } from "./internal/date-like.js";
 import { PICKER_COLLISION_PADDING, pickerContentClassName, pickerTriggerClassName, pickerValueId, } from "./internal/form-control.js";
-import { preloadCalendar } from "./lazy-calendar.js";
+import { LazyCalendar, preloadCalendar } from "./lazy-calendar.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "./utils.js";
 /**
@@ -13,7 +13,7 @@ import { cn } from "./utils.js";
  * any `disabled` matchers, and they bound paging unless `startMonth` /
  * `endMonth` are set.
  */
-export function limitCalendarProps(calendarProps, minDate, maxDate) {
+function limitCalendarProps(calendarProps, minDate, maxDate) {
     const min = toDate(minDate);
     const max = toDate(maxDate);
     if (!min && !max)
@@ -35,15 +35,17 @@ export function limitCalendarProps(calendarProps, minDate, maxDate) {
         endMonth: calendarProps?.endMonth ?? max,
     };
 }
-/** Form-control trigger plus the viewport-clamped calendar popover. */
-export function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, empty, label, dialogLabel, open, onOpenChange, onInteractOutside, children, }) {
-    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-empty": empty, className: cn(pickerTriggerClassName, className), onPointerEnter: preloadCalendar, onFocus: preloadCalendar, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), _jsx("span", { "data-slot": "date-picker-value", className: "min-w-0 text-left whitespace-normal", id: id ? pickerValueId(id) : undefined, children: label })] }) }), _jsx(PopoverContent, { align: "start", side: side, collisionPadding: PICKER_COLLISION_PADDING, "aria-label": dialogLabel, 
+/**
+ * Form-control trigger plus the viewport-clamped popover holding the
+ * calendar, any extra rows, and an optional Clear row.
+ */
+export function PickerShell({ id, disabled, className, contentClassName, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, side, defaultMonth, minDate, maxDate, calendarProps, empty, label, dialogLabel, open, onOpenChange, calendar, onClear, clearDisabled = false, children, }) {
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "aria-invalid": ariaInvalid, "aria-labelledby": ariaLabelledBy, "aria-describedby": ariaDescribedBy, "data-empty": empty, className: cn(pickerTriggerClassName, className), onPointerEnter: preloadCalendar, onFocus: preloadCalendar, children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), _jsx("span", { "data-slot": "date-picker-value", className: "min-w-0 text-left whitespace-normal", id: id ? pickerValueId(id) : undefined, children: label })] }) }), _jsxs(PopoverContent, { align: "start", side: side, collisionPadding: PICKER_COLLISION_PADDING, "aria-label": dialogLabel, 
                 // The calendar's `autoFocus` puts focus on the selected day (or
                 // today) once it loads, as the APG date picker dialog does; Radix
                 // focusing the popover first would leave it on the container.
-                onOpenAutoFocus: (event) => event.preventDefault(), onInteractOutside: onInteractOutside, className: cn("w-auto min-w-0", pickerContentClassName, contentClassName), children: children })] }));
-}
-/** Clear button row under the calendar. */
-export function PickerClearFooter({ disabled, onClear, }) {
-    return (_jsx("div", { "data-slot": "date-picker-footer", className: "flex justify-end border-t p-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: disabled, onClick: onClear, children: "Clear" }) }));
+                onOpenAutoFocus: (event) => event.preventDefault(), className: cn("w-auto min-w-0", pickerContentClassName, contentClassName), children: [_jsx(LazyCalendar, { ...limitCalendarProps(calendarProps, minDate, maxDate), ...calendar, autoFocus: true, defaultMonth: defaultMonth }), children, onClear ? (_jsx("div", { "data-slot": "date-picker-footer", className: "flex justify-end border-t p-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: clearDisabled, onClick: () => {
+                                onClear();
+                                onOpenChange(false);
+                            }, children: "Clear" }) })) : null] })] }));
 }

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

@@ -1,33 +1,44 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 import { Tabs as TabsPrimitive } from "radix-ui";
+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;
 declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
+/**
+ * Tab-styled link for `TabsNav`. Pass `active` from the route: the active
+ * link gets the trigger's selected chrome (`data-state="active"`) and
+ * `aria-current="page"`. `asChild` wraps a router `Link` with these styles,
+ * like `NavLink`; Next apps can import `next/tabs-nav-link` instead.
+ */
+declare function TabsNavLink({ asChild, active, className, ...props }: React.ComponentProps<"a"> & AsChildProps & {
+    /** This link is the current view: `aria-current="page"` and the active chrome. */
+    active: boolean;
+}): React.JSX.Element;
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not
  * `Tabs` + `TabsTrigger asChild`, when there are no `TabsContent` panels:
- * tabs would point assistive tech at panels that don't exist. Style each link
- * with `tabsTriggerVariants()` and mark the active one with
- * `data-state="active"` and `aria-current="page"` (the Next adapter
- * `TabsNavLink` does this for you).
+ * tabs would point assistive tech at panels that don't exist. Each link is
+ * a `TabsNavLink` with `active` from the app (`asChild` for a router link,
+ * or the Next adapter `next/tabs-nav-link`).
  *
  * Overflow is handled here: the row scrolls horizontally only, with padding
  * for active borders and focus rings counted in the scroller height (so the
- * list cannot overflow on y), an edge fade while it overflows, and the
- * active link scrolled into view on mount. Do not wrap it in
+ * list cannot overflow on y), an edge fade while it overflows, the
+ * active link scrolled into view on mount, and a mouse drag that scrolls
+ * the row (a plain click still follows the link). Do not wrap it in
  * `overflow-x-auto`. `scrollerClassName` styles that scroller and
  * `listClassName` the row of links inside it.
  */
@@ -37,4 +48,4 @@ declare function TabsNav({ className, scrollerClassName, listClassName, children
     /** Classes for the row of links inside the scroller. */
     listClassName?: string;
 }): React.JSX.Element;
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, TabsNavLink, tabsListVariants, tabsTriggerVariants, };

package/dist/tabs.js

@@ -2,13 +2,14 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import {} from "class-variance-authority";
-import { Tabs as TabsPrimitive } from "radix-ui";
+import { Slot, Tabs as TabsPrimitive } from "radix-ui";
 import { focusRing } from "./internal/styles.js";
 import { tabsListVariants, tabsScrollerVariants, tabsTriggerVariants, } from "./internal/tabs-styles.js";
+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.
  */
@@ -20,14 +21,16 @@ 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`.
+ * same cue as `Table`. While it overflows, a mouse can also drag the row
+ * sideways (`useDragScroll`); touch, wheel and keyboard scroll as before.
  */
 function TabsScroller({ variant = "default", orientation = "horizontal", className, children, }) {
     const ref = React.useRef(null);
     const revealed = React.useRef(null);
     const overflowing = useHorizontalOverflow(ref);
+    useDragScroll(ref, overflowing);
     // Runs after every render, not just mount: TabsNav usually sits in a
     // persistent layout, so a route change updates the active link in place.
     React.useLayoutEffect(() => {
@@ -47,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);
@@ -63,22 +66,32 @@ function TabsTrigger({ className, ...props }) {
 function TabsContent({ className, ...props }) {
     return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 text-sm", focusRing, className), ...props }));
 }
+/**
+ * Tab-styled link for `TabsNav`. Pass `active` from the route: the active
+ * link gets the trigger's selected chrome (`data-state="active"`) and
+ * `aria-current="page"`. `asChild` wraps a router `Link` with these styles,
+ * like `NavLink`; Next apps can import `next/tabs-nav-link` instead.
+ */
+function TabsNavLink({ asChild, active, className, ...props }) {
+    const Comp = asChild ? Slot.Root : "a";
+    return (_jsx(Comp, { "data-slot": "tabs-nav-link", "data-state": active ? "active" : "inactive", "aria-current": active ? "page" : undefined, className: cn(tabsTriggerVariants(), className), ...props }));
+}
 /**
  * Tab-styled links for a view switcher that changes the URL. Use this, not
  * `Tabs` + `TabsTrigger asChild`, when there are no `TabsContent` panels:
- * tabs would point assistive tech at panels that don't exist. Style each link
- * with `tabsTriggerVariants()` and mark the active one with
- * `data-state="active"` and `aria-current="page"` (the Next adapter
- * `TabsNavLink` does this for you).
+ * tabs would point assistive tech at panels that don't exist. Each link is
+ * a `TabsNavLink` with `active` from the app (`asChild` for a router link,
+ * or the Next adapter `next/tabs-nav-link`).
  *
  * Overflow is handled here: the row scrolls horizontally only, with padding
  * for active borders and focus rings counted in the scroller height (so the
- * list cannot overflow on y), an edge fade while it overflows, and the
- * active link scrolled into view on mount. Do not wrap it in
+ * list cannot overflow on y), an edge fade while it overflows, the
+ * active link scrolled into view on mount, and a mouse drag that scrolls
+ * the row (a plain click still follows the link). Do not wrap it in
  * `overflow-x-auto`. `scrollerClassName` styles that scroller and
  * `listClassName` the row of links inside it.
  */
 function TabsNav({ className, scrollerClassName, listClassName, children, ...props }) {
     return (_jsx("nav", { "data-slot": "tabs-nav", "data-orientation": "horizontal", className: cn("group/tabs min-w-0 max-w-full", className), ...props, children: _jsx(TabsScroller, { className: scrollerClassName, children: _jsx("div", { "data-slot": "tabs-list", "data-variant": "default", className: cn(tabsListVariants({ orientation: "horizontal" }), "bg-transparent", listClassName), children: children }) }) }));
 }
-export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, tabsListVariants, tabsTriggerVariants, };
+export { Tabs, TabsList, TabsTrigger, TabsContent, TabsNav, TabsNavLink, tabsListVariants, tabsTriggerVariants, };

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.0.0",
+  "version": "1.2.0",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",
@@ -252,6 +252,10 @@
       "types": "./dist/form/field-error.d.ts",
       "default": "./dist/form/field-error.js"
     },
+    "./form/focus-first-invalid": {
+      "types": "./dist/form/focus-first-invalid.d.ts",
+      "default": "./dist/form/focus-first-invalid.js"
+    },
     "./form/markdown-field": {
       "types": "./dist/form/markdown-field.d.ts",
       "default": "./dist/form/markdown-field.js"
@@ -295,11 +299,11 @@
     "docs:check": "node scripts/check-doc-links.mjs",
     "lint": "oxlint --type-aware --deny-warnings",
     "knip": "knip",
-    "sast": "node scripts/sast.mjs",
+    "sast": "semgrep scan --config .semgrep.yml --metrics=off --disable-version-check --error --quiet src",
     "secrets": "secretlint \"**/*\"",
     "size": "size-limit",
     "gate:static": "npm run lint && npm run knip && npm run sast && npm run secrets",
-    "gate": "npm run check && npm run gate:static && npm run size && vitest run",
+    "gate": "npm run check && npm run gate:static && npm run size && vitest run --coverage",
     "test": "npm run build && vitest run",
     "test:coverage": "npm run build && vitest run --coverage",
     "prepack": "npm run build",

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

@@ -42,10 +42,9 @@ root (or a `dark` class on an ancestor). Toasts need one `<Toaster />` from
 `atlas-react-kit/toast`; show them with `toast()` from the same module, using
 only the options it declares. Never import a toast library such as `sonner`
 directly: the kit owns the toast API, and a second copy never reaches its
-toaster. Markdown, dates, toasts, and `ThemeProvider` are optional peers —
-install the extras listed in `COMPONENTS.md` when you import those entry
-points. Fix missing setup rather than working
-around unstyled components.
+toaster. Some entry points need optional peers; install the extras from the
+"Optional peer dependencies" table in `COMPONENTS.md` when you import them.
+Fix missing setup rather than working around unstyled components.
 
 ## 3. Pick the kit component for the job
 
@@ -53,42 +52,49 @@ Import each component from its subpath, e.g.
 `import { Button } from "atlas-react-kit/button"`. There is no root barrel, and
 `dist/` or `internal/` paths are not public API.
 
-| Need                                            | Use                                                                                                                     |
-| ----------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
-| Short fixed list (a handful of options)         | `Select` family from `select`                                                                                           |
-| Long or searchable list (timezones, currencies) | `Combobox` from `combobox` with `{ value, label }[]` options; set `creatable` to invent a value the catalog lacks       |
-| Always-visible searchable list (places)         | `SearchPicker` from `search-picker`                                                                                     |
-| One date, or a from/to range                    | `DatePickerButton` from `date-picker` (`mode="range"` for ranges)                                                       |
-| Date and time (not `datetime-local`)            | `DateTimePickerButton` from `date-time-picker`                                                                          |
-| Labelled field with error text                  | `FormTextField`, `FormSelectField`, `FormDatePickerField`, `FormDateTimePickerField`, `FormMarkdownField` from `form/*` |
-| Labelled custom control (combobox) in a form    | `FormControlField` from `form/control-field`                                                                            |
-| Form-level error (save failed)                  | `FormFeedbackField` from `form/feedback-field`                                                                          |
-| Content panels on one page                      | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` from `tabs`                                                            |
-| View switch that changes the URL                | `TabsNav` with links: `TabsNavLink` from `next/tabs-nav-link` in Next, else `tabsTriggerVariants()`                     |
-| App shell nav (Calendar, Tasks, Settings)       | `NavLink` from `nav-link` (`asChild` for a router link); Next: `next/nav-link`                                          |
-| Status chip (paid, pending, failed)             | `Badge variant="soft"` with `tone="success"`, `"warning"`, `"destructive"`, or `"neutral"`                              |
-| Data table                                      | `Table` family from `table`; `SortableTableHead`; `TableBodySkeleton` while loading                                     |
-| Nothing to show yet                             | `EmptyPanel` from `empty-panel`                                                                                         |
-| Grouped content                                 | `Card` family from `card`; `<Card flush>` for an edge-to-edge table or list                                             |
-| Modal                                           | `Dialog` family from `dialog`                                                                                           |
-| Label for an icon button, or a short hint       | `Tooltip` from `tooltip`; keep `aria-label` on icon buttons                                                             |
-| Longer help from a glyph                        | `InfoTip` / `InlineTip` from `info-tip` (not `Tooltip`)                                                                 |
-| Color scale key                                 | `ColorLegend` from `color-legend`                                                                                       |
-| GitHub-flavoured Markdown                       | `Markdown` from `markdown`; write/preview with `FormMarkdownField`                                                      |
-| Summary figure in a strip                       | `StatTile` from `stat-tile` (`statTileGrid`, `sectionLabel`)                                                            |
-| Value against a scale, optional ticks           | `Meter` from `meter` (not `Progress`)                                                                                   |
-| Number on a continuous scale                    | `Slider` from `slider`                                                                                                  |
-| Row actions or an overflow menu of commands     | `DropdownMenu` family from `dropdown-menu`                                                                              |
-| Setting that applies immediately                | `Switch` from `switch`; `Checkbox` for choices submitted with a form                                                    |
-| One choice from a few visible options           | `RadioGroup` and `RadioGroupItem` from `radio-group`                                                                    |
-| Inline message about a page or section          | `Alert` from `alert` (`success`, `warning`, `destructive` variants)                                                     |
-| Person or workspace image                       | `Avatar`, `AvatarImage`, `AvatarFallback` from `avatar`                                                                 |
-| Sections that expand in place                   | `Accordion` family from `accordion`                                                                                     |
-| Pages of a long list                            | `Pagination` family from `pagination`                                                                                   |
-| Where the page sits in a hierarchy              | `Breadcrumb` family from `breadcrumb`                                                                                   |
-| Work in progress                                | `Progress` from `progress` when the percent is known, else `Spinner` from `spinner`                                     |
-| Crash recovery around a section                 | `ErrorBoundary` from `error-boundary`                                                                                   |
-| Conditional classes                             | `cn` from `utils`                                                                                                       |
+| Need                                                       | Use                                                                                                                     |
+| ---------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------- |
+| Short fixed list (a handful of options)                    | `Select` family from `select`                                                                                           |
+| Long or searchable list (timezones, currencies)            | `Combobox` from `combobox` with `{ value, label }[]` options; set `creatable` to invent a value the catalog lacks       |
+| Always-visible searchable list (places)                    | `SearchPicker` from `search-picker`                                                                                     |
+| One date, or a from/to range                               | `DatePickerButton` from `date-picker` (`mode="range"` for ranges)                                                       |
+| Date and time (not `datetime-local`)                       | `DateTimePickerButton` from `date-time-picker`                                                                          |
+| Labelled field with error text                             | `FormTextField`, `FormSelectField`, `FormDatePickerField`, `FormDateTimePickerField`, `FormMarkdownField` from `form/*` |
+| Checkbox, checkbox group, toggle group, combobox in a form | `FormCheckboxField`, `FormCheckboxGroupField`, `FormToggleGroupField`, `FormComboboxField` from `form/*`                |
+| Custom control the kit has no form field for               | `FormControlField` from `form/control-field`                                                                            |
+| Form-level error (save failed)                             | `FormFeedbackField` from `form/feedback-field`                                                                          |
+| Content panels on one page                                 | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent` from `tabs`                                                            |
+| View switch that changes the URL                           | `TabsNav` with `TabsNavLink` from `tabs` (`asChild` for a router link); Next: `next/tabs-nav-link`                      |
+| App shell nav (Calendar, Tasks, Settings)                  | `NavLink` from `nav-link` (`asChild` for a router link); Next: `next/nav-link`; `active={isNavActive(pathname, href)}`  |
+| Focus the first invalid field when a submit fails          | `focusFirstInvalid(formId)` from `form/focus-first-invalid`; give fields `id={field.name}`                              |
+| Skip-to-content link                                       | `SkipLink` from `skip-link`                                                                                             |
+| Page title row with actions                                | `PageHeader` from `page-header`                                                                                         |
+| Previous / today / next period                             | `PeriodStepper` from `period-stepper`; `next/period-stepper` for URL periods                                            |
+| Cards in columns that drag                                 | `KanbanBoard` from `kanban`; `KanbanSkeleton` while loading                                                             |
+| SVG chart axes, grid, tooltip, legend                      | `chart` helpers (`chartFrame`, `ChartYAxisGrid`, `ChartTooltip`, `ChartLegend`)                                         |
+| Status chip (paid, pending, failed)                        | `Badge variant="soft"` with `tone="success"`, `"warning"`, `"destructive"`, or `"neutral"`                              |
+| Data table                                                 | `Table` family from `table`; `SortableTableHead`; `TableBodySkeleton` while loading                                     |
+| Nothing to show yet                                        | `EmptyPanel` from `empty-panel`                                                                                         |
+| Grouped content                                            | `Card` family from `card`; `<Card flush>` for an edge-to-edge table or list                                             |
+| Modal                                                      | `Dialog` family from `dialog`                                                                                           |
+| Label for an icon button, or a short hint                  | `Tooltip` from `tooltip`; keep `aria-label` on icon buttons                                                             |
+| Longer help from a glyph                                   | `InfoTip` / `InlineTip` from `info-tip` (not `Tooltip`)                                                                 |
+| Color scale key                                            | `ColorLegend` from `color-legend`                                                                                       |
+| GitHub-flavoured Markdown                                  | `Markdown` from `markdown`; write/preview with `FormMarkdownField`                                                      |
+| Summary figure in a strip                                  | `StatTile` from `stat-tile` (`statTileGrid`, `sectionLabel`)                                                            |
+| Value against a scale, optional ticks                      | `Meter` from `meter` (not `Progress`)                                                                                   |
+| Number on a continuous scale                               | `Slider` from `slider`                                                                                                  |
+| Row actions or an overflow menu of commands                | `DropdownMenu` family from `dropdown-menu`                                                                              |
+| Setting that applies immediately                           | `Switch` from `switch`; `Checkbox` for choices submitted with a form                                                    |
+| One choice from a few visible options                      | `RadioGroup` and `RadioGroupItem` from `radio-group`                                                                    |
+| Inline message about a page or section                     | `Alert` from `alert` (`success`, `warning`, `destructive` variants)                                                     |
+| Person or workspace image                                  | `Avatar`, `AvatarImage`, `AvatarFallback` from `avatar`                                                                 |
+| Sections that expand in place                              | `Accordion` family from `accordion`                                                                                     |
+| Pages of a long list                                       | `Pagination` family from `pagination`                                                                                   |
+| Where the page sits in a hierarchy                         | `Breadcrumb` family from `breadcrumb`                                                                                   |
+| Work in progress                                           | `Progress` from `progress` when the percent is known, else `Spinner` from `spinner`                                     |
+| Crash recovery around a section                            | `ErrorBoundary` from `error-boundary`                                                                                   |
+| Conditional classes                                        | `cn` from `utils`                                                                                                       |
 
 If nothing fits, build the piece in the app from kit primitives and semantic
 tokens. Do not copy kit source into the app; a missing shared component belongs

package/theme.css

@@ -90,6 +90,7 @@
 }
 
 :root {
+  color-scheme: light;
   --background: oklch(1 0 0);
   --foreground: oklch(0.145 0 0);
   --card: oklch(1 0 0);
@@ -142,6 +143,7 @@
 }
 
 .dark {
+  color-scheme: dark;
   --background: oklch(0.145 0 0);
   --foreground: oklch(0.985 0 0);
   --card: oklch(0.205 0 0);