atlas-react-kit 1.1.0 → 1.2.1

package/dist/internal/active-link.d.ts

@@ -0,0 +1,7 @@
+/** How NavLink and TabsNavLink mark the current page (`selectedState.active`). */
+export declare function activeLinkAttributes(active: boolean): {
+    "data-state": string;
+    "aria-current": "page" | undefined;
+};
+/** A link marked by `activeLinkAttributes`, or an active Radix tab. */
+export declare const activeLinkSelector = "[aria-current=\"page\"], [data-state=\"active\"]";

package/dist/internal/active-link.js

@@ -0,0 +1,9 @@
+/** How NavLink and TabsNavLink mark the current page (`selectedState.active`). */
+export function activeLinkAttributes(active) {
+    return {
+        "data-state": active ? "active" : "inactive",
+        "aria-current": active ? "page" : undefined,
+    };
+}
+/** A link marked by `activeLinkAttributes`, or an active Radix tab. */
+export const activeLinkSelector = '[aria-current="page"], [data-state="active"]';

package/dist/internal/calendar-size.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Calendar cell size and padding, shared with LazyCalendar's placeholder
+ * (here, not in calendar.tsx, so the placeholder skips Day Picker).
+ */
+export declare const calendarSize = "[--cell-size:--spacing(8)] [--calendar-padding:--spacing(3)]";

package/dist/internal/calendar-size.js

@@ -0,0 +1,5 @@
+/**
+ * Calendar cell size and padding, shared with LazyCalendar's placeholder
+ * (here, not in calendar.tsx, so the placeholder skips Day Picker).
+ */
+export const calendarSize = "[--cell-size:--spacing(8)] [--calendar-padding:--spacing(3)]";

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

@@ -12,7 +12,7 @@ export declare const formControlTriggerClassName = "h-10 w-full border-input bg-
  * with muted text while empty (`data-empty`). Intrinsic padding makes one
  * line 40px tall while longer values wrap and consumer height classes work.
  */
-export declare const pickerTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-[empty=true]:text-muted-foreground";
+export declare const pickerTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:text-foreground aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-placeholder:text-muted-foreground data-[empty=true]:text-muted-foreground";
 /** Calendar popover body: fits the viewport height and scrolls inside it. */
 export declare const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
 /** Gutter used when a calendar popover collides with the viewport. */

package/dist/internal/form-control.js

@@ -1,3 +1,4 @@
+import { emptyValueText } from "./styles.js";
 /**
  * Chrome that makes a Button-based picker trigger match Input / SelectTrigger:
  * 40px height, px-3, body text (16px below md so iOS does not zoom), border-input,
@@ -12,7 +13,7 @@ export const formControlTriggerClassName = "h-10 w-full border-input bg-backgrou
  * with muted text while empty (`data-empty`). Intrinsic padding makes one
  * line 40px tall while longer values wrap and consumer height classes work.
  */
-export const pickerTriggerClassName = `${formControlTriggerClassName} h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] data-[empty=true]:text-muted-foreground`;
+export const pickerTriggerClassName = `${formControlTriggerClassName} h-auto justify-start py-[calc((--spacing(10)_-_1lh_-_2px)/2)] ${emptyValueText}`;
 /** Calendar popover body: fits the viewport height and scrolls inside it. */
 export const pickerContentClassName = "max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0";
 /** Gutter used when a calendar popover collides with the viewport. */

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

@@ -1,4 +1,16 @@
 import * as React from "react";
+/**
+ * ARIA for the search input of a listbox; the input sets `aria-controls`
+ * itself, where the linter can see it.
+ */
+export declare function listboxInputAria(listId: string, activeIndex: number | undefined): {
+    "aria-autocomplete": "list";
+    "aria-activedescendant": string | undefined;
+};
+/** The scrolling listbox; sr-only while `ListboxEmptyStatus` shows. */
+export declare function Listbox({ empty, className, ...props }: Omit<React.ComponentProps<"ul">, "role"> & {
+    empty: boolean;
+}): React.JSX.Element;
 type PickerOptionProps<T> = {
     item: T;
     getLabel: (item: T) => string;
@@ -16,9 +28,10 @@ type PickerOptionProps<T> = {
 declare function PickerOptionInner<T>({ item, getLabel, onSelect, onHighlight, showCheck, ...props }: PickerOptionProps<T>): React.JSX.Element;
 export declare const PickerOption: typeof PickerOptionInner;
 /**
- * The "No results" status. It sits outside the listbox, which may own only
- * options, and stays mounted (sr-only when not empty) so screen readers
- * announce the empty state as the query changes.
+ * The "No results" status (`children`, default "No results"). It sits
+ * outside the listbox, which may own only options, and stays mounted
+ * (sr-only when not empty) so screen readers announce the empty state as
+ * the query changes.
  */
 export declare function ListboxEmptyStatus({ empty, className, children, ...props }: Omit<React.ComponentProps<"div">, "role"> & {
     empty: boolean;

package/dist/internal/listbox-option.js

@@ -4,7 +4,23 @@ import { CheckIcon } from "lucide-react";
 import { cn } from "../utils.js";
 import { listboxOptionId, scrollOptionIntoView } from "./listbox-navigation.js";
 import { optionRow } from "./overlay-styles.js";
-import { listboxEmpty, optionState } from "./styles.js";
+import { listboxEmpty, listboxScroll, optionState } from "./styles.js";
+/**
+ * ARIA for the search input of a listbox; the input sets `aria-controls`
+ * itself, where the linter can see it.
+ */
+export function listboxInputAria(listId, activeIndex) {
+    return {
+        "aria-autocomplete": "list",
+        "aria-activedescendant": activeIndex === undefined
+            ? undefined
+            : listboxOptionId(listId, activeIndex),
+    };
+}
+/** The scrolling listbox; sr-only while `ListboxEmptyStatus` shows. */
+export function Listbox({ empty, className, ...props }) {
+    return (_jsx("ul", { role: "listbox", className: empty ? "sr-only" : cn(listboxScroll, className), ...props }));
+}
 /**
  * One option of a search-driven listbox (Combobox, SearchPicker): a
  * non-focusable button in a presentational `li`, highlighted by state and
@@ -20,10 +36,11 @@ function PickerOptionInner({ item, getLabel, onSelect, onHighlight, showCheck, .
 }
 export const PickerOption = React.memo(PickerOptionInner);
 /**
- * The "No results" status. It sits outside the listbox, which may own only
- * options, and stays mounted (sr-only when not empty) so screen readers
- * announce the empty state as the query changes.
+ * The "No results" status (`children`, default "No results"). It sits
+ * outside the listbox, which may own only options, and stays mounted
+ * (sr-only when not empty) so screen readers announce the empty state as
+ * the query changes.
  */
-export function ListboxEmptyStatus({ empty, className, children, ...props }) {
+export function ListboxEmptyStatus({ empty, className, children = "No results", ...props }) {
     return (_jsx("div", { role: "status", className: empty ? cn(listboxEmpty, className) : "sr-only", ...props, children: empty ? children : null }));
 }

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

@@ -1,9 +1,10 @@
 /**
- * Classes shared by the kit's floating surfaces (Popover, DropdownMenu,
- * Select, Dialog, Tooltip) and the option rows inside them. Components add
- * these with `cn()` instead of retyping them, so the panels and rows look
- * and move the same everywhere. Tailwind only generates class names it
- * finds as literals, so every class appears here in full.
+ * Classes and placement defaults shared by the kit's floating surfaces
+ * (Popover, DropdownMenu, Select, Dialog, Tooltip) and the option rows
+ * inside them. Components use these instead of retyping them, so the
+ * panels and rows look, sit, and move the same everywhere. Tailwind only
+ * generates class names it finds as literals, so every class appears here
+ * in full.
  */
 /** The panel: square corners, popover colors, shadow, and a hairline ring. */
 export declare const overlaySurface = "rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10";
@@ -22,7 +23,9 @@ 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";
+/** Default gap in px between a trigger and its panel (Radix `sideOffset`). */
+export declare const OVERLAY_SIDE_OFFSET = 4;
+/** Default px a panel keeps from the viewport edge (Radix `collisionPadding`). */
+export declare const OVERLAY_COLLISION_PADDING = 8;

package/dist/internal/overlay-styles.js

@@ -1,9 +1,10 @@
 /**
- * Classes shared by the kit's floating surfaces (Popover, DropdownMenu,
- * Select, Dialog, Tooltip) and the option rows inside them. Components add
- * these with `cn()` instead of retyping them, so the panels and rows look
- * and move the same everywhere. Tailwind only generates class names it
- * finds as literals, so every class appears here in full.
+ * Classes and placement defaults shared by the kit's floating surfaces
+ * (Popover, DropdownMenu, Select, Dialog, Tooltip) and the option rows
+ * inside them. Components use these instead of retyping them, so the
+ * panels and rows look, sit, and move the same everywhere. Tailwind only
+ * generates class names it finds as literals, so every class appears here
+ * in full.
  */
 /** The panel: square corners, popover colors, shadow, and a hairline ring. */
 export const overlaySurface = "rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10";
@@ -22,7 +23,9 @@ 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";
+/** Default gap in px between a trigger and its panel (Radix `sideOffset`). */
+export const OVERLAY_SIDE_OFFSET = 4;
+/** Default px a panel keeps from the viewport edge (Radix `collisionPadding`). */
+export const OVERLAY_COLLISION_PADDING = 8;

package/dist/internal/search.d.ts

@@ -1,8 +1,16 @@
+/**
+ * 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;
 }[];
+/**
+ * The items whose folded label includes `needle` (a `normalizeSearchQuery`
+ * result), in order; every item when `needle` is empty.
+ */
 export declare function filterSearchIndex<T>(index: ReturnType<typeof createSearchIndex<T>>, needle: string): T[];

package/dist/internal/search.js

@@ -1,16 +1,25 @@
-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)) }));
 }
+/**
+ * The items whose folded label includes `needle` (a `normalizeSearchQuery`
+ * result), in order; every item when `needle` is empty.
+ */
 export function filterSearchIndex(index, needle) {
+    if (!needle)
+        return index.map(({ item }) => item);
     return index
-        .filter(({ label }) => matchesSearchLabel(label, needle))
+        .filter(({ label }) => label.includes(needle))
         .map(({ item }) => item);
 }

package/dist/internal/styles.d.ts

@@ -8,8 +8,12 @@
  */
 /** Keyboard focus: a solid 2px ring separated from filled controls (WCAG 1.4.11). */
 export declare const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+/** The same ring on a wrapper with keyboard focus inside it. */
+export declare const focusRingWithin = "has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background";
 /** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
 export declare const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Muted trigger text while empty (`data-placeholder` or `data-empty`). */
+export declare const emptyValueText = "data-placeholder:text-muted-foreground data-[empty=true]:text-muted-foreground";
 /** Native `disabled`: dimmed, with no hover or click. */
 export declare const disabledState = "disabled:pointer-events-none disabled:opacity-50";
 /** Radix `data-disabled` (menu and list items, slider). */
@@ -37,8 +41,23 @@ export declare const selectedState: {
     /** Quiet buttons and toggles on hover. */
     hover: string;
 };
+/**
+ * Alert and Toast tones: a border, and `--status-tone` for the title and
+ * icon (`text-(--status-tone)`). `neutral` unsets it, so they inherit.
+ */
+export declare const statusTone: {
+    neutral: string;
+    success: string;
+    warning: string;
+    destructive: string;
+};
 /** 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 +91,30 @@ 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";
+/** Field-label text (Label, FieldLegend, FieldTitle, PopoverTitle). */
+export declare const labelText = "text-xs font-semibold tracking-wide 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

@@ -8,8 +8,12 @@
  */
 /** Keyboard focus: a solid 2px ring separated from filled controls (WCAG 1.4.11). */
 export const focusRing = "outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
+/** The same ring on a wrapper with keyboard focus inside it. */
+export const focusRingWithin = "has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background";
 /** `aria-invalid`: destructive border and a soft glow; the error text carries the message. */
 export const invalidState = "aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40";
+/** Muted trigger text while empty (`data-placeholder` or `data-empty`). */
+export const emptyValueText = "data-placeholder:text-muted-foreground data-[empty=true]:text-muted-foreground";
 /** Native `disabled`: dimmed, with no hover or click. */
 export const disabledState = "disabled:pointer-events-none disabled:opacity-50";
 /** Radix `data-disabled` (menu and list items, slider). */
@@ -37,8 +41,23 @@ export const selectedState = {
     /** Quiet buttons and toggles on hover. */
     hover: "hover:border-selected-foreground hover:bg-selected hover:text-selected-foreground",
 };
+/**
+ * Alert and Toast tones: a border, and `--status-tone` for the title and
+ * icon (`text-(--status-tone)`). `neutral` unsets it, so they inherit.
+ */
+export const statusTone = {
+    neutral: "[--status-tone:initial]",
+    success: "border-success/40 [--status-tone:var(--color-success)]",
+    warning: "border-warning/40 [--status-tone:var(--color-warning)]",
+    destructive: "border-destructive/40 [--status-tone:var(--color-destructive)]",
+};
 /** 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 +91,30 @@ 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";
+/** Field-label text (Label, FieldLegend, FieldTitle, PopoverTitle). */
+export const labelText = "text-xs font-semibold tracking-wide 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

@@ -7,13 +7,15 @@ import { CheckCircle2, ChevronLeft, ChevronRight, GripVertical, Trash2, } from "
 import { Button } from "./button.js";
 import { KANBAN_COMPLETE_ID, KANBAN_DELETE_ID, buildKanbanGroups, kanbanOverflowEdges, kanbanScrollBy, resolveKanbanDrop, } from "./internal/kanban-layout.js";
 import { configureCardSortablePlugins, configureKanbanPlugins, } from "./internal/kanban-plugins.js";
+import { focusRingWithin } from "./internal/styles.js";
 import { Skeleton } from "./skeleton.js";
 import { cn } from "./utils.js";
 /** Column droppables lose to cards, so a drop lands between cards. */
 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 +125,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");
@@ -145,7 +147,7 @@ function KanbanCardViewImpl({ item, index, column, onCardClick, className, rende
         // The overlay moves; the source keeps its slot.
         "data-dragging:pointer-events-none data-dragging:invisible", 
         // One ring on the card for the grip and the body alike.
-        "has-focus-visible:ring-2 has-focus-visible:ring-ring has-focus-visible:ring-offset-2 has-focus-visible:ring-offset-background", onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, "cursor-grab outline-none hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: "min-w-0 flex-1 cursor-pointer p-3 text-left outline-none hover:bg-muted/20", children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
+        focusRingWithin, onCardClick && "hover:border-foreground/15", className), children: [_jsx("button", { type: "button", ref: handleRef, "data-slot": "kanban-card-handle", "aria-label": "Drag to move", onClick: stopClick, className: cn(handleChrome, "cursor-grab outline-none hover:bg-muted/50 active:cursor-grabbing"), children: _jsx(GripVertical, { className: "size-4", "aria-hidden": true }) }), onCardClick ? (_jsx("button", { type: "button", "data-slot": "kanban-card-body", onClick: () => onCardClick(item), className: "min-w-0 flex-1 cursor-pointer p-3 text-left outline-none hover:bg-muted/20", children: children })) : (_jsx("div", { "data-slot": "kanban-card-body", className: "min-w-0 flex-1 p-3", children: children }))] }));
 }
 /**
  * Memoized so a board update re-renders only the cards whose item, index or
@@ -192,6 +194,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/label.js

@@ -2,12 +2,13 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
 import { Label as LabelPrimitive } from "radix-ui";
+import { labelText } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Form label. `required` adds a visible marker; style it with
  * `requiredClassName` or the `label-required` slot.
  */
 function Label({ className, required, requiredClassName, children, ...props }) {
-    return (_jsxs(LabelPrimitive.Root, { "data-slot": "label", className: cn("flex items-center gap-2 text-xs font-semibold tracking-wide uppercase select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-normal peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio-group-item]:text-sm peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=radio-group-item]:tracking-normal peer-data-[slot=radio-group-item]:normal-case peer-data-[slot=switch]:text-sm peer-data-[slot=switch]:font-normal peer-data-[slot=switch]:tracking-normal peer-data-[slot=switch]:normal-case", className), ...props, children: [children, required ? (_jsx("span", { "data-slot": "label-required", "aria-hidden": "true", className: cn("-ml-1.5 text-destructive", requiredClassName), children: "*" })) : null] }));
+    return (_jsxs(LabelPrimitive.Root, { "data-slot": "label", className: cn(labelText, "flex items-center gap-2 select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50 peer-data-[slot=checkbox]:text-sm peer-data-[slot=checkbox]:font-normal peer-data-[slot=checkbox]:tracking-normal peer-data-[slot=checkbox]:normal-case peer-data-[slot=radio-group-item]:text-sm peer-data-[slot=radio-group-item]:font-normal peer-data-[slot=radio-group-item]:tracking-normal peer-data-[slot=radio-group-item]:normal-case peer-data-[slot=switch]:text-sm peer-data-[slot=switch]:font-normal peer-data-[slot=switch]:tracking-normal peer-data-[slot=switch]:normal-case", className), ...props, children: [children, required ? (_jsx("span", { "data-slot": "label-required", "aria-hidden": "true", className: cn("-ml-1.5 text-destructive", requiredClassName), children: "*" })) : null] }));
 }
 export { Label };

package/dist/lazy-calendar.js

@@ -1,6 +1,7 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
+import { calendarSize } from "./internal/calendar-size.js";
 import { Spinner } from "./spinner.js";
 import { cn } from "./utils.js";
 /**
@@ -16,11 +17,11 @@ export function preloadCalendar() {
 const LazyCalendarInner = React.lazy(() => loadCalendar().then((module) => ({ default: module.Calendar })));
 /**
  * While loading, a placeholder the size of a one-month calendar, measured in
- * the calendar's own `--cell-size` (7 columns plus `p-3`; about 9 cells
+ * the calendar's own `calendarSize` (7 columns plus padding; about 9 cells
  * tall), so the popover does not jump. It takes the calendar's `className`,
  * so a `--cell-size` override sizes both.
  */
-const fallbackClassName = "flex h-[calc(var(--cell-size)*9)] w-[calc(var(--cell-size)*7+--spacing(6))] items-center justify-center [--cell-size:--spacing(8)]";
+const fallbackClassName = cn("flex h-[calc(var(--cell-size)*9)] w-[calc(var(--cell-size)*7+var(--calendar-padding)*2)] items-center justify-center", calendarSize);
 export function LazyCalendar(props) {
     return (_jsx(React.Suspense, { fallback: _jsx("div", { className: cn(fallbackClassName, props.className), children: _jsx(Spinner, { "aria-label": "Loading calendar" }) }), children: _jsx(LazyCalendarInner, { ...props }) }));
 }