atlas-react-kit 0.10.0 → 0.11.0

package/COMPONENTS.md

@@ -37,11 +37,11 @@ theme from `next-themes`, so toast consumers install that too.
 | `button`                      | `Button`, `buttonVariants`, `quietButtonInteraction`; `variant`, `size`, `asChild`; outline/ghost hover is brand purple + selected wash, not muted grey                                                                                                                                                                                                                                  |
 | `badge`                       | `Badge`, `badgeVariants`; `variant`, `tone`, `asChild`                                                                                                                                                                                                                                                                                                                                   |
 | `calendar`                    | `Calendar`, `CalendarDayButton`; React Day Picker props and `buttonVariant`                                                                                                                                                                                                                                                                                                              |
-| `card`                        | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`; `Card` supports `flush`; root uses `min-h-min shrink-0` so flex columns do not collapse it, and `min-w-0` so nested tables scroll; `CardContent className="px-0"` overrides padding without `!`                                                                                         |
+| `card`                        | `Card`, `CardHeader`, `CardTitle`, `CardDescription`, `CardAction`, `CardContent`, `CardFooter`; `Card` supports `flush`; `CardTitle as="h2"` (up to `h4`) makes it a section heading; root uses `min-h-min shrink-0` so flex columns do not collapse it, and `min-w-0` so nested tables scroll; `CardContent className="px-0"` overrides padding without `!`                            |
 | `checkbox`                    | `Checkbox`                                                                                                                                                                                                                                                                                                                                                                               |
 | `color-legend`                | `ColorLegend`; `title`, `items` as `{ color, range?, label }[]`, optional `caption`, `children`, `aria-label`, `className` (overlay chrome). No attribution.                                                                                                                                                                                                                             |
 | `combobox`                    | `Combobox`; `options` as `{ value, label }[]`, `value`, `onValueChange`; optional placeholder, search, empty text, `creatable`, `normalizeCreateValue` (query → value or `null`), `createLabel`; trigger matches Input/SelectTrigger chrome; keyboard highlight scrolls into view; create is a listbox option selected with Enter                                                        |
-| `date-picker`                 | `DatePickerButton`, `toDate`, `formatLocalDate`, `DateRange`; `mode` `"single"` (default) or `"range"`; single `value` is `Date` or `yyyy-MM-dd`; range `value` is `{ from, to }`; trigger matches Input chrome; optional `numberOfMonths` (range default 1 below `md`, 2 at `md+`) and `side`                                                                                           |
+| `date-picker`                 | `DatePickerButton`, `toDate`, `formatLocalDate`, `DateRange`; `mode` `"single"` (default) or `"range"`; single `value` is `Date` or `yyyy-MM-dd`; range `value` is `{ from, to }`; trigger matches Input chrome; optional `numberOfMonths` (range default 1 below `md`, 2 at `md+`), `side`, `aria-labelledby`, and `aria-describedby`                                                   |
 | `date-time-picker`            | `DateTimePickerButton`, `resolveTimeStep`, `DEFAULT_TIME_STEP`; controlled `value` is `Date` or `null`; `onChange` emits `Date \                                                                                                                                                                                                                                                         |
 | `dialog`                      | `Dialog`, trigger, portal, overlay, content, close, header, footer, title, description; `DialogContent` supports `showCloseButton`                                                                                                                                                                                                                                                       |
 | `dropdown-menu`               | `DropdownMenu` family (trigger, content, item, checkbox/radio items, label, separator, shortcut, sub menus); item `variant="destructive"` and `inset`; for commands, not values                                                                                                                                                                                                          |
@@ -52,7 +52,7 @@ theme from `next-themes`, so toast consumers install that too.
 | `input`, `textarea`, `label`  | `Input`, `Textarea`, `Label`                                                                                                                                                                                                                                                                                                                                                             |
 | `markdown`                    | `Markdown`, `MarkdownContent`; `content`, optional `className`. GFM via `react-markdown` + `remark-gfm` in this subpath only. Sanitized (no raw HTML; http/https/mailto/#/`/` URLs). Token styles, no typography plugin.                                                                                                                                                                 |
 | `meter`                       | `Meter`; `value`, `max`, optional `min` (default 0), `fillClassName`, `markers` as `{ position, className? }[]`, required `aria-label`, `className`. `role="meter"`. Not `Progress`.                                                                                                                                                                                                     |
-| `pagination`                  | `Pagination`, `PaginationContent`, `PaginationItem`, `PaginationLink` (`isActive` sets `aria-current`, the selected wash, and a selected border), `PaginationPrevious`, `PaginationNext`, `PaginationEllipsis`                                                                                                                                                                           |
+| `pagination`                  | `Pagination`, `PaginationContent`, `PaginationItem`, `PaginationLink` (`isActive` sets `aria-current`, the selected wash, and a selected border; `disabled` drops the `href` for a page that does not exist, such as Previous on page 1), `PaginationPrevious`, `PaginationNext` (custom text becomes the link name), `PaginationEllipsis`                                               |
 | `popover`                     | `Popover`, trigger, anchor, content, header, title, description                                                                                                                                                                                                                                                                                                                          |
 | `progress`                    | `Progress`; Radix props, `value` 0–100; label it with `aria-label` or `aria-labelledby`. For a value against a scale with ticks, use `Meter`.                                                                                                                                                                                                                                            |
 | `radio-group`                 | `RadioGroup`, `RadioGroupItem`; short visible lists; arrow keys move the selection; round dots                                                                                                                                                                                                                                                                                           |
@@ -77,7 +77,7 @@ theme from `next-themes`, so toast consumers install that too.
 | `form/select-field`           | `FormSelectField`; `value`, `onValueChange`, `label`, optional `meta` and placeholder; select item children                                                                                                                                                                                                                                                                              |
 | `form/date-picker-field`      | `FormDatePickerField`; `value`, `onValueChange`, `label`, optional `meta`, placeholder, and `className` (forwarded to the trigger)                                                                                                                                                                                                                                                       |
 | `form/date-time-picker-field` | `FormDateTimePickerField`; `value` is `Date` or `null`; `onValueChange` emits `Date \                                                                                                                                                                                                                                                                                                    |
-| `form/field-error`            | `FieldError`, `getFieldErrorMessage`; types `FieldErrorMessage`, `FieldMetaState`                                                                                                                                                                                                                                                                                                        |
+| `form/field-error`            | `FieldError` (optional `id`), `getFieldErrorMessage`; types `FieldErrorMessage`, `FieldMetaState`                                                                                                                                                                                                                                                                                        |
 | `form/feedback-field`         | `FormFeedbackField`; nullable `message`                                                                                                                                                                                                                                                                                                                                                  |
 | `next/tabs-nav-link`          | `TabsNavLink`; Next Link props and required `active` boolean; requires Next.js 16                                                                                                                                                                                                                                                                                                        |
 | `utils`                       | `cn`, `onInputChange`                                                                                                                                                                                                                                                                                                                                                                    |
@@ -96,6 +96,34 @@ changelog calls out every change: `accordion`, `alert`, `avatar`,
 `markdown`, `meter`, `pagination`, `progress`, `radio-group`, `search-picker`,
 `slider`, `spinner`, `stat-tile`, `switch`, `tooltip`.
 
+## Styling parts
+
+Every component takes `className` for its root and passes other HTML props
+through to it. Where a part sits inside a component, a prop names it, and
+each part carries a `data-slot` for parent selectors such as
+`*:data-[slot=stat-tile-value]:text-2xl`.
+
+| Component                                          | Part props                                                                                                                               | Slots                                                                                                                     |
+| -------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- |
+| `DialogContent`                                    | `overlayClassName`, `closeButtonClassName`                                                                                               | `dialog-close-button` (the built-in X; your own `DialogClose` keeps `dialog-close`)                                       |
+| `SelectTrigger`                                    | a `className` height replaces `size`                                                                                                     | `select-icon`, `select-viewport`, `select-item-indicator`                                                                 |
+| `TooltipContent`                                   | `arrowClassName`                                                                                                                         | `tooltip-arrow`                                                                                                           |
+| `Combobox`                                         | `contentClassName` (panel, default trigger width), `listClassName`; button props go to trigger                                           | `combobox-search`, `combobox-list`, `combobox-option`                                                                     |
+| `SearchPicker`                                     | `listClassName`; div props go to the root                                                                                                | `search-picker-option`, `search-picker-empty`                                                                             |
+| `InfoTip`                                          | `contentClassName`; button props go to the trigger                                                                                       |                                                                                                                           |
+| `DatePickerButton`, `DateTimePickerButton`         | `contentClassName`, `calendarProps` (disabled days, `startMonth`, `endMonth`, `weekStartsOn`, `locale`)                                  | `date-picker-value`, `date-picker-footer`, `date-time-picker-time`                                                        |
+| `form/*` fields                                    | `fieldClassName` (wrapper); `className` styles the control; `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`                                                | `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`                                                                                                      |
+| `Meter`                                            | `fillClassName`                                                                                                                          | `meter-fill`, `meter-marker`                                                                                              |
+| `StatTile`                                         |                                                                                                                                          | `stat-tile-label`, `stat-tile-value`, `stat-tile-sub`                                                                     |
+| `ColorLegend`                                      |                                                                                                                                          | `color-legend-title`, `-list`, `-item`, `-swatch`, `-range`, `-label`, `-caption`                                         |
+| `RadioGroupItem`                                   |                                                                                                                                          | `radio-group-dot`                                                                                                         |
+| `EmptyPanel`, `ErrorFallback`, `TableBodySkeleton` | `className`                                                                                                                              | `empty-panel`, `error-boundary`                                                                                           |
+
 ## Forms
 
 `TextFieldApi` is a structural interface, with no form library dependency:
@@ -120,7 +148,12 @@ for a Write / Preview GFM body. `FormSelectField`, `FormDatePickerField`, and
 `FormDatePickerField` takes a `Date` or `yyyy-MM-dd` string and calls
 `onValueChange` with `Date | undefined`. `FormDateTimePickerField` takes a
 `Date` or `null` and calls `onValueChange` with `Date | null`. `FieldError`
-accepts either `message` or pre-resolved `text`.
+accepts either `message` or pre-resolved `text`, and an `id` to point the
+control's `aria-describedby` at. Every `form/*` field does that for you: the
+error text (and `FormTextField`'s `description`) is the control's accessible
+description. The date fields label their trigger with `aria-labelledby` (the
+label, then the trigger) rather than `<label for>`, so the picked date is
+part of its name.
 
 `DatePickerButton` is single-day by default. For a from/to range, set
 `mode="range"`; `value` is `{ from, to }` (each side `Date` or `yyyy-MM-dd`)
@@ -130,6 +163,12 @@ one month below `md` and two months at `md+` unless `numberOfMonths` is set,
 clamps to the viewport with collision padding and scroll, stays `w-auto` so
 it does not collapse to the default popover width, and includes a Clear
 action. Pass `side` to prefer a placement; Radix still flips on collision.
+The popover is a dialog named "Choose date" ("Choose dates" in range mode),
+and focus moves to the selected day, or today, when it opens. Pass
+`aria-labelledby` and `aria-describedby` to name and describe the trigger;
+to keep the date in its name, list the label's id and then `${id}-value`,
+the trigger text's id (a `<label for>` alone names the button by the label
+only).
 `FormDatePickerField` forwards `className` to that trigger.
 
 `DateTimePickerButton` is the date-and-time control. `value` is a `Date` or
@@ -139,7 +178,9 @@ pair (24-hour, stepped by `timeStep`, default 15), and Clear. Picking a day
 keeps the popover open so the time can be set; the time selects stay
 disabled until a day is chosen. The panel is `w-auto`, sized by the
 calendar, and clamped to the viewport so it stays on-screen at 390px. Pass
-`side` to prefer a placement. `FormDateTimePickerField` forwards `className`
+`side` to prefer a placement. Like `DatePickerButton`, the popover is a
+named dialog ("Choose date and time") that focuses the selected day or
+today, and the trigger takes `aria-labelledby` and `aria-describedby`. `FormDateTimePickerField` forwards `className`
 and `timeStep` to that control.
 
 Outline and ghost `Button` hover uses `border-selected-foreground`,
@@ -205,8 +246,9 @@ export function Providers({ children }: { children: React.ReactNode }) {
 ```
 
 `ThemeProvider` is a client component and does not import Next.js. It stores the
-choice under `atlas-theme` unless `storageKey` is set. Pass `enableShortcut={false}`
-to disable the `d` dark/light toggle.
+choice under `atlas-theme` unless `storageKey` is set. The `d` dark/light toggle
+is off by default; pass `enableShortcut` to turn it on, and give people a setting
+to turn it off again, since a single-key shortcut can fire by accident (WCAG 2.1.4).
 
 ## URL navigation in Next.js
 

package/DESIGN_RULES.md

@@ -121,6 +121,18 @@ flex row; add `w-full` to stretch it there. `Tooltip` keeps a `max-w-xs` reading
 `min-h-16` starting height, and toasts their 356px width; override the first
 two with `className`.
 
+Parents do not force sizes on their children. A vertical `Field` stretches
+its controls through the flex column, so a control's own width class (such
+as `w-32`) wins; `Field`, `Alert`, and `Pagination` set no width of their
+own. `FieldGroup` keeps `w-full` because its inline-size container has no
+intrinsic width. Size classes that `className` should be able to replace are
+plain classes picked from props (`Avatar` `size`, `Separator` orientation,
+`SelectTrigger` `size`, tab orientation), never `data-*` variants, which sort
+after plain classes and would win. Every part an app may want to style is
+reachable: through `className` on the part, a named `*ClassName` prop when the
+part sits inside a component (listed in COMPONENTS.md under "Styling parts"),
+or its `data-slot`.
+
 `Input`, `SelectTrigger`, `DatePickerButton`, `DateTimePickerButton`, and
 `Combobox` share form-control chrome: 40px height, `px-3`,
 `text-base md:text-sm`, `border-input`, and `shadow-xs`. Do not restyle those

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/tabs-nav-link`.
 
 ```sh
-npm install --save-exact atlas-react-kit@0.10.0
+npm install --save-exact atlas-react-kit@0.11.0
 ```
 
 Import components by subpath:
@@ -128,7 +128,7 @@ artifact with the package owner's npm login:
 ```sh
 mkdir -p release-artifacts
 npm pack --pack-destination release-artifacts
-npm publish ./release-artifacts/atlas-react-kit-0.10.0.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.11.0.tgz --access public
 ```
 
 Pin an exact package version in consuming applications. Roll back an upgrade by

package/dist/accordion.d.ts

@@ -3,6 +3,13 @@ import { Accordion as AccordionPrimitive } from "radix-ui";
 /** Stacked sections that expand in place (FAQs, settings groups). */
 declare function Accordion({ ...props }: React.ComponentProps<typeof AccordionPrimitive.Root>): React.JSX.Element;
 declare function AccordionItem({ className, ...props }: React.ComponentProps<typeof AccordionPrimitive.Item>): React.JSX.Element;
-declare function AccordionTrigger({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger>): React.JSX.Element;
+/** `headerClassName` styles the heading wrapper (`data-slot="accordion-header"`). */
+declare function AccordionTrigger({ className, headerClassName, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Trigger> & {
+    headerClassName?: string;
+}): React.JSX.Element;
+/**
+ * `className` styles the padded inner box (`data-slot="accordion-content-inner"`);
+ * the outer region animates height and clips.
+ */
 declare function AccordionContent({ className, children, ...props }: React.ComponentProps<typeof AccordionPrimitive.Content>): React.JSX.Element;
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/accordion.js

@@ -12,10 +12,15 @@ function Accordion({ ...props }) {
 function AccordionItem({ className, ...props }) {
     return (_jsx(AccordionPrimitive.Item, { "data-slot": "accordion-item", className: cn("border-b last:border-b-0", className), ...props }));
 }
-function AccordionTrigger({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Header, { className: "flex", children: _jsxs(AccordionPrimitive.Trigger, { "data-slot": "accordion-trigger", className: cn(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" })] }) }));
+/** `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" })] }) }));
 }
+/**
+ * `className` styles the padded inner box (`data-slot="accordion-content-inner"`);
+ * the outer region animates height and clips.
+ */
 function AccordionContent({ className, children, ...props }) {
-    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { className: cn("pt-0 pb-4", className), children: children }) }));
+    return (_jsx(AccordionPrimitive.Content, { "data-slot": "accordion-content", className: "overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down", ...props, children: _jsx("div", { "data-slot": "accordion-content-inner", className: cn("pt-0 pb-4", className), children: children }) }));
 }
 export { Accordion, AccordionContent, AccordionItem, AccordionTrigger };

package/dist/alert.js

@@ -7,7 +7,7 @@ import { cn } from "./utils.js";
  * `text-muted-foreground` on the card face, so body text keeps its contrast
  * (the destructive tint is too faint for text in light mode).
  */
-const alertVariants = cva("relative grid w-full grid-cols-[0_1fr] items-start gap-y-1 rounded-none border bg-card px-4 py-3 text-sm text-card-foreground has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5", {
+const alertVariants = cva("relative grid grid-cols-[0_1fr] items-start gap-y-1 rounded-none border bg-card px-4 py-3 text-sm text-card-foreground has-[>svg]:grid-cols-[--spacing(4)_1fr] has-[>svg]:gap-x-3 [&>svg]:size-4 [&>svg]:translate-y-0.5", {
     variants: {
         variant: {
             default: "[&>svg]:text-foreground",

package/dist/avatar.d.ts

@@ -1,6 +1,10 @@
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
-/** Person or workspace image with initials while loading or on error. Round by design. */
+/**
+ * Person or workspace image with initials while loading or on error. Round
+ * by design. `size` picks a plain size class, so `className="size-12"`
+ * replaces it.
+ */
 declare function Avatar({ className, size, ...props }: React.ComponentProps<typeof AvatarPrimitive.Root> & {
     size?: "sm" | "default" | "lg";
 }): React.JSX.Element;

package/dist/avatar.js

@@ -3,9 +3,14 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { Avatar as AvatarPrimitive } from "radix-ui";
 import { cn } from "./utils.js";
-/** Person or workspace image with initials while loading or on error. Round by design. */
+const avatarSizes = { sm: "size-6", default: "size-8", lg: "size-10" };
+/**
+ * Person or workspace image with initials while loading or on error. Round
+ * by design. `size` picks a plain size class, so `className="size-12"`
+ * replaces it.
+ */
 function Avatar({ className, size = "default", ...props }) {
-    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("relative flex shrink-0 overflow-hidden rounded-full select-none data-[size=default]:size-8 data-[size=lg]:size-10 data-[size=sm]:size-6", className), ...props }));
+    return (_jsx(AvatarPrimitive.Root, { "data-slot": "avatar", "data-size": size, className: cn("relative flex shrink-0 overflow-hidden rounded-full select-none", avatarSizes[size], className), ...props }));
 }
 function AvatarImage({ className, ...props }) {
     return (_jsx(AvatarPrimitive.Image, { "data-slot": "avatar-image", className: cn("aspect-square size-full object-cover", className), ...props }));

package/dist/badge.js

@@ -7,7 +7,7 @@ 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]: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 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",
 ], {
     variants: {
         variant: {

package/dist/breadcrumb.js

@@ -2,6 +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 { cn } from "./utils.js";
 /**
  * Where the current page sits in a hierarchy. The last item is
@@ -19,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("transition-colors outline-none hover:text-selected-foreground focus-visible:text-selected-foreground focus-visible:underline focus-visible:underline-offset-4", className), ...props }));
+    return (_jsx(Comp, { "data-slot": "breadcrumb-link", className: cn(focusRing, "transition-colors hover:text-selected-foreground focus-visible:text-selected-foreground", className), ...props }));
 }
 function BreadcrumbPage({ className, ...props }) {
     return (_jsx("span", { "data-slot": "breadcrumb-page", "aria-current": "page", className: cn("font-medium text-foreground", className), ...props }));
@@ -28,6 +29,6 @@ function BreadcrumbSeparator({ children, className, ...props }) {
     return (_jsx("li", { "data-slot": "breadcrumb-separator", role: "presentation", "aria-hidden": "true", className: cn("[&>svg]:size-3.5", className), ...props, children: children ?? _jsx(ChevronRightIcon, {}) }));
 }
 function BreadcrumbEllipsis({ className, ...props }) {
-    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", role: "presentation", "aria-hidden": "true", className: cn("flex size-6 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontalIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "More" })] }));
+    return (_jsxs("span", { "data-slot": "breadcrumb-ellipsis", className: cn("flex size-6 items-center justify-center", className), ...props, children: [_jsx(MoreHorizontalIcon, { className: "size-4", "aria-hidden": "true" }), _jsx("span", { className: "sr-only", children: "More" })] }));
 }
 export { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, };

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 { disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
+import { controlSize, disabledState, focusRing, invalidState, selectedState, } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Outline and ghost hover/focus: selected-foreground border, selected wash, and
@@ -24,17 +24,17 @@ const buttonVariants = cva([
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/80",
-            outline: `border-border bg-transparent ${quietButtonInteraction}`,
+            outline: `border-input bg-transparent ${quietButtonInteraction}`,
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
             ghost: quietButtonInteraction,
-            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/20 dark:hover:bg-destructive/30",
+            destructive: "bg-destructive/10 text-destructive hover:bg-destructive/15 dark:bg-destructive/20 dark:hover:bg-destructive/25",
             link: "text-selected-foreground underline underline-offset-4 hover:underline",
         },
         size: {
-            default: "h-10 gap-1.5 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",
+            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",
-            sm: "h-9 gap-1 px-4 has-data-[icon=inline-end]:pr-3 has-data-[icon=inline-start]:pl-3",
-            lg: "h-11 gap-1.5 px-8 has-data-[icon=inline-end]:pr-5 has-data-[icon=inline-start]:pl-5",
+            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-sm": "size-9",

package/dist/calendar.js

@@ -4,9 +4,19 @@ import * as React from "react";
 import { DayPicker, getDefaultClassNames, } from "react-day-picker";
 import { cn } from "./utils.js";
 import { Button, buttonVariants } from "./button.js";
-import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon, } from "lucide-react";
+import { ariaDisabledState } from "./internal/styles.js";
+import { ChevronDownIcon, ChevronLeftIcon, ChevronRightIcon, ChevronUpIcon, } from "lucide-react";
+/** Previous / next month buttons share one look. */
+const navButtonClassName = cn("size-(--cell-size) p-0 select-none", ariaDisabledState);
+const chevronIcons = {
+    left: ChevronLeftIcon,
+    right: ChevronRightIcon,
+    up: ChevronUpIcon,
+    down: ChevronDownIcon,
+};
 function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, labels, components, ...props }) {
     const defaultClassNames = getDefaultClassNames();
+    const navButton = cn(buttonVariants({ variant: buttonVariant }), navButtonClassName);
     return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-3 [--cell-radius:0] [--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
             formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
             ...formatters,
@@ -33,11 +43,13 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
             month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
             nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
-            button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
-            button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
+            button_previous: cn(navButton, defaultClassNames.button_previous),
+            button_next: cn(navButton, defaultClassNames.button_next),
             month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
             dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
-            dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
+            // The native select is invisible over the caption, so its wrapper
+            // shows keyboard focus with the kit's solid ring.
+            dropdown_root: cn("relative rounded-(--cell-radius) has-focus-visible:ring-2 has-focus-visible:ring-ring", defaultClassNames.dropdown_root),
             dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
             caption_label: cn("font-medium select-none", captionLayout === "label"
                 ? "text-sm"
@@ -63,14 +75,9 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
             Root: ({ className, rootRef, ...props }) => {
                 return (_jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props }));
             },
-            Chevron: ({ className, orientation, ...props }) => {
-                if (orientation === "left") {
-                    return (_jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props }));
-                }
-                if (orientation === "right") {
-                    return (_jsx(ChevronRightIcon, { className: cn("size-4", className), ...props }));
-                }
-                return (_jsx(ChevronDownIcon, { className: cn("size-4", className), ...props }));
+            Chevron: ({ className, orientation = "down", ...props }) => {
+                const Icon = chevronIcons[orientation];
+                return _jsx(Icon, { className: cn("size-4", className), ...props });
             },
             DayButton: ({ ...props }) => (_jsx(CalendarDayButton, { locale: locale, ...props })),
             WeekNumber: ({ children, ...props }) => {

package/dist/card.d.ts

@@ -13,7 +13,7 @@ declare function Card({ className, size, flush, ...props }: React.ComponentProps
 }): React.JSX.Element;
 declare function CardHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardTitle({ as: Component, className, ...props }: React.ComponentProps<"div"> & {
-    as?: "div" | "h1";
+    as?: "div" | "h1" | "h2" | "h3" | "h4";
 }): React.JSX.Element;
 declare function CardDescription({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
 declare function CardAction({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;

package/dist/checkbox.js

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

package/dist/color-legend.d.ts

@@ -5,7 +5,7 @@ export type ColorLegendItem = {
     range?: string;
     label: string;
 };
-export type ColorLegendProps = {
+export type ColorLegendProps = Omit<React.ComponentProps<"figure">, "children" | "title"> & {
     title?: string;
     items: ColorLegendItem[];
     caption?: React.ReactNode;
@@ -15,8 +15,10 @@ export type ColorLegendProps = {
 };
 /**
  * Key for a color scale: swatch, optional range, and label. Overlay chrome
- * (absolute position, card fill) is the caller's `className`. Attribution
- * and license lines stay in the app.
+ * (absolute position, card fill) is the caller's `className`; other props go
+ * to the `figure`. Parts carry `data-slot="color-legend-*"` (title, list,
+ * item, swatch, range, label, caption). Attribution and license lines stay
+ * in the app.
  */
-declare function ColorLegend({ title, items, caption, children, "aria-label": ariaLabel, className, }: ColorLegendProps): React.JSX.Element;
+declare function ColorLegend({ title, items, caption, children, className, ...props }: ColorLegendProps): React.JSX.Element;
 export { ColorLegend };

package/dist/color-legend.js

@@ -1,11 +1,14 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { sectionLabel } from "./internal/styles.js";
 import { cn } from "./utils.js";
 /**
  * Key for a color scale: swatch, optional range, and label. Overlay chrome
- * (absolute position, card fill) is the caller's `className`. Attribution
- * and license lines stay in the app.
+ * (absolute position, card fill) is the caller's `className`; other props go
+ * to the `figure`. Parts carry `data-slot="color-legend-*"` (title, list,
+ * item, swatch, range, label, caption). Attribution and license lines stay
+ * in the app.
  */
-function ColorLegend({ title, items, caption, children, "aria-label": ariaLabel, className, }) {
-    return (_jsxs("figure", { "data-slot": "color-legend", "aria-label": ariaLabel, className: cn("flex flex-col gap-2 text-sm", className), children: [title ? (_jsx("figcaption", { className: "font-heading text-xs font-semibold tracking-widest text-muted-foreground uppercase", children: title })) : null, _jsx("ul", { className: "flex flex-col gap-1.5", children: items.map((item) => (_jsxs("li", { className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, className: "size-3.5 shrink-0 border border-input", style: { backgroundColor: item.color } }), item.range ? (_jsx("span", { className: "w-16 shrink-0 tabular-nums text-muted-foreground", children: item.range })) : null, _jsx("span", { children: item.label })] }, `${item.color}-${item.range ?? ""}-${item.label}`))) }), caption ? (_jsx("p", { className: "text-xs text-muted-foreground", children: caption })) : null, children] }));
+function ColorLegend({ title, items, caption, children, className, ...props }) {
+    return (_jsxs("figure", { "data-slot": "color-legend", className: cn("flex flex-col gap-2 text-sm", className), ...props, children: [title ? (_jsx("figcaption", { "data-slot": "color-legend-title", className: cn("font-heading", sectionLabel), children: title })) : null, _jsx("ul", { "data-slot": "color-legend-list", className: "flex flex-col gap-1.5", children: items.map((item) => (_jsxs("li", { "data-slot": "color-legend-item", className: "flex items-center gap-2", children: [_jsx("span", { "aria-hidden": true, "data-slot": "color-legend-swatch", className: "size-3.5 shrink-0 border border-input", style: { backgroundColor: item.color } }), item.range ? (_jsx("span", { "data-slot": "color-legend-range", className: "w-16 shrink-0 tabular-nums text-muted-foreground", children: item.range })) : null, _jsx("span", { "data-slot": "color-legend-label", children: item.label })] }, `${item.color}-${item.range ?? ""}-${item.label}`))) }), caption ? (_jsx("p", { "data-slot": "color-legend-caption", className: "text-xs text-muted-foreground", children: caption })) : null, children] }));
 }
 export { ColorLegend };

package/dist/combobox.d.ts

@@ -16,6 +16,11 @@ type ComboboxProps = {
     className?: string;
     /** Classes for the listbox, e.g. its height. Defaults to `max-h-60`. */
     listClassName?: string;
+    /**
+     * Classes for the popover panel, e.g. a width other than the trigger's.
+     * Defaults to the trigger width.
+     */
+    contentClassName?: string;
     "aria-invalid"?: boolean;
     /** Name the trigger when there is no `<Label htmlFor={id}>`. */
     "aria-label"?: string;
@@ -36,7 +41,7 @@ type ComboboxProps = {
      * `Create "{value}"`.
      */
     createLabel?: (value: string) => string;
-};
+} & Omit<React.ComponentProps<"button">, "value" | "defaultValue" | "children" | "type" | "role" | "aria-expanded" | "aria-controls" | "onKeyDown">;
 /**
  * Searchable single-select built from Button, Popover, and Input.
  * The trigger uses the same form-control chrome as Input and SelectTrigger.
@@ -46,5 +51,5 @@ type ComboboxProps = {
  * Opt-in `creatable` appends a create action when the query is not already
  * an option; choosing it calls `onValueChange` like a normal selection.
  */
-export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, id, className, listClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable, normalizeCreateValue, createLabel, }: ComboboxProps): React.JSX.Element;
+export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, id, className, listClassName, contentClassName, "aria-invalid": ariaInvalid, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, creatable, normalizeCreateValue, createLabel, ...props }: ComboboxProps): React.JSX.Element;
 export {};