atlas-react-kit 0.2.1 → 0.4.0

package/COMPONENTS.md

@@ -5,39 +5,39 @@ underlying element or Radix props, including `className`, alongside their option
 Form helpers and `TableBodySkeleton` accept only their documented props. There is
 no root component barrel.
 
-| Subpath                      | Main exports and options                                                                                                           |
-| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------- |
-| `button`                     | `Button`, `buttonVariants`; `variant`, `size`, `asChild`                                                                           |
-| `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`           |
-| `checkbox`                   | `Checkbox`                                                                                                                         |
-| `combobox`                   | `Combobox`; `options` as `{ value, label }[]`, `value`, `onValueChange`; optional placeholder, search, empty text                  |
-| `date-picker`                | `DatePickerButton`, `toDate`, `formatLocalDate`; `value` is `Date` or `yyyy-MM-dd`                                                 |
-| `dialog`                     | `Dialog`, trigger, portal, overlay, content, close, header, footer, title, description; `DialogContent` supports `showCloseButton` |
-| `empty-panel`                | `EmptyPanel`; required `children`; optional `size`, `muted`, `className`                                                           |
-| `error-boundary`             | `ErrorBoundary`, `ErrorFallback`; optional `message`; retry resets, reload refreshes the page                                      |
-| `field`                      | Field, label, legend, description, group, set, title, content, separator, error; `Field` supports `orientation`                    |
-| `input`, `textarea`, `label` | `Input`, `Textarea`, `Label`                                                                                                       |
-| `popover`                    | `Popover`, trigger, anchor, content, header, title, description                                                                    |
-| `select`                     | Select, trigger, value, content, group, label, item, separator, scroll buttons; trigger `size`                                     |
-| `separator`, `skeleton`      | `Separator`, `Skeleton`                                                                                                            |
-| `sortable-table-head`        | `SortableTableHead`; `sorted`, `direction` (`asc` \| `desc`), `onClick`; sets `aria-sort`                                          |
-| `sonner`                     | `Toaster`; Sonner props, with `next-themes` theme defaults                                                                         |
-| `table`                      | Table, header, body, footer, row, head, cell, caption                                                                              |
-| `table-body-skeleton`        | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                        |
-| `tabs`                       | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`; list `variant` is `default` or `line`             |
-| `toggle`                     | `Toggle`, `toggleVariants`; `variant`, `size`                                                                                      |
-| `toggle-group`               | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`                                                                                |
-| `theme-provider`             | `ThemeProvider`, `useTheme`; optional `storageKey` (default `atlas-theme`), `enableShortcut` for the `d` toggle                    |
-| `form/text-field`            | `FormTextField`, type `TextFieldApi`; controlled field, label, multiline, description, input constraints                           |
-| `form/select-field`          | `FormSelectField`; `value`, `onValueChange`, `label`, optional `meta` and placeholder; select item children                        |
-| `form/date-picker-field`     | `FormDatePickerField`; `value`, `onValueChange`, `label`, optional `meta` and placeholder                                          |
-| `form/field-error`           | `FieldError`, `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`                                                                                                              |
-| `theme.css`                  | Tailwind 4 theme; installation in [README](./README.md)                                                                            |
+| Subpath                      | Main exports and options                                                                                                                                                                                                                                                                       |
+| ---------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `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; `CardContent className="px-0"` overrides padding without `!`                                      |
+| `checkbox`                   | `Checkbox`                                                                                                                                                                                                                                                                                     |
+| `combobox`                   | `Combobox`; `options` as `{ value, label }[]`, `value`, `onValueChange`; optional placeholder, search, empty text; trigger matches Input/SelectTrigger chrome; keyboard highlight scrolls into view                                                                                            |
+| `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` |
+| `dialog`                     | `Dialog`, trigger, portal, overlay, content, close, header, footer, title, description; `DialogContent` supports `showCloseButton`                                                                                                                                                             |
+| `empty-panel`                | `EmptyPanel`; required `children`; optional `size`, `muted`, `className`                                                                                                                                                                                                                       |
+| `error-boundary`             | `ErrorBoundary`, `ErrorFallback`; optional `message`; retry resets, reload refreshes the page                                                                                                                                                                                                  |
+| `field`                      | Field, label, legend, description, group, set, title, content, separator, error; `Field` supports `orientation`                                                                                                                                                                                |
+| `input`, `textarea`, `label` | `Input`, `Textarea`, `Label`                                                                                                                                                                                                                                                                   |
+| `popover`                    | `Popover`, trigger, anchor, content, header, title, description                                                                                                                                                                                                                                |
+| `select`                     | Select, trigger, value, content, group, label, item, separator, scroll buttons; trigger `size`; trigger text is `text-base md:text-sm` like Input                                                                                                                                              |
+| `separator`, `skeleton`      | `Separator`, `Skeleton`                                                                                                                                                                                                                                                                        |
+| `sortable-table-head`        | `SortableTableHead`; `sorted`, `direction` (`asc` \| `desc`), `onClick`; sets `aria-sort`                                                                                                                                                                                                      |
+| `sonner`                     | `Toaster`; Sonner props, with `next-themes` theme defaults                                                                                                                                                                                                                                     |
+| `table`                      | Table, header, body, footer, row, head, cell, caption                                                                                                                                                                                                                                          |
+| `table-body-skeleton`        | `TableBodySkeleton`; `columns`, optional `rows` (default 5)                                                                                                                                                                                                                                    |
+| `tabs`                       | `Tabs`, `TabsList`, `TabsTrigger`, `TabsContent`, `TabsNav`, `tabsListVariants`; list `variant` is `default` or `line`                                                                                                                                                                         |
+| `toggle`                     | `Toggle`, `toggleVariants`; `variant`, `size`                                                                                                                                                                                                                                                  |
+| `toggle-group`               | `ToggleGroup`, `ToggleGroupItem`; `variant`, `size`                                                                                                                                                                                                                                            |
+| `theme-provider`             | `ThemeProvider`, `useTheme`; optional `storageKey` (default `atlas-theme`), `enableShortcut` for the `d` toggle                                                                                                                                                                                |
+| `form/text-field`            | `FormTextField`, type `TextFieldApi`; controlled field, label, multiline, description, input constraints                                                                                                                                                                                       |
+| `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/field-error`           | `FieldError`, `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`                                                                                                                                                                                                                                                                          |
+| `theme.css`                  | Tailwind 4 theme; installation in [README](./README.md)                                                                                                                                                                                                                                        |
 
 ## Forms
 
@@ -62,6 +62,42 @@ accept the same error meta shape. `FormDatePickerField` takes a `Date` or
 `yyyy-MM-dd` string and calls `onValueChange` with `Date | undefined`.
 `FieldError` accepts either `message` or pre-resolved `text`.
 
+`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`)
+and `onChange` receives `DateRange | undefined`. The trigger uses the same
+form-control chrome as `Input` and `SelectTrigger`. The range popover shows
+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.
+`FormDatePickerField` forwards `className` to that trigger.
+
+Outline and ghost `Button` hover and focus use `border-primary`,
+`text-primary`, and `bg-selected`. They do not use a muted grey fill, including
+when the control sits on a selected row (for example "Clear selection").
+
+```tsx
+import { DatePickerButton, type DateRange } from "atlas-react-kit/date-picker"
+
+export function ExportRange({
+  value,
+  onChange,
+}: {
+  value: DateRange | undefined
+  onChange: (range: DateRange | undefined) => void
+}) {
+  return (
+    <DatePickerButton
+      mode="range"
+      value={value}
+      onChange={onChange}
+      numberOfMonths={2}
+      placeholder="Export range"
+    />
+  )
+}
+```
+
 ## Theme
 
 ```tsx

package/DESIGN_RULES.md

@@ -11,8 +11,10 @@ Use semantic colors, radii, and fonts: `bg-primary`, `text-muted-foreground`,
 light/dark color pairs; tokens already switch with the theme.
 
 Selected or active navigation, tabs, toggles, chips, rows, and labels use
-`bg-selected text-selected-foreground`. Hover stays neutral with `hover:bg-muted`
-or `hover:bg-accent`. The shipped controls apply this distinction.
+`bg-selected text-selected-foreground`. Outline and ghost buttons hover and
+focus with `border-primary text-primary` and the selected wash, not a muted
+grey fill. Table row hover can stay `hover:bg-muted`. The shipped controls
+apply this distinction.
 
 Use `success`, `warning`, and `destructive` for good, caution, and bad states.
 For tinted status chips, use `Badge variant="soft" tone="success"` or
@@ -28,8 +30,16 @@ other circles. Card and dialog titles already use uppercase, tracked
 `font-heading` styling.
 
 Use `EmptyPanel` for empty states, `TableBodySkeleton` for loading table bodies,
-and `<Card flush>` for an edge-to-edge list or table. `Dialog` already scrolls
-inside the viewport on small screens; avoid additional height limits.
+and `<Card flush>` for an edge-to-edge list or table. `CardContent className="px-0"`
+overrides body padding without `!px-0` when only the body should go flush. Cards
+keep `min-h-min shrink-0` so they do not collapse inside a bounded flex
+column. `Dialog` already scrolls inside the viewport on small screens; avoid
+additional height limits.
+
+`Input`, `SelectTrigger`, `DatePickerButton`, and `Combobox` share form-control
+chrome: 40px height, `px-3`, `text-base md:text-sm`, `border-input`, and
+`shadow-xs`. Do not restyle those triggers as outline buttons in application
+code.
 
 Use `Tabs` with actual `TabsContent` panels. For URL view switches, use a labelled
 `TabsNav` with links and `aria-current="page"` on the active link. The optional
@@ -37,7 +47,8 @@ Next adapter provides `TabsNavLink` with this behavior.
 
 Use `FormTextField`, `FormSelectField`, `FormDatePickerField`, and
 `FormFeedbackField` for portable form controls, and `FieldError` for field
-messages. `Combobox`, `DatePickerButton`, `ThemeProvider`, `ErrorBoundary`, and
-`SortableTableHead` are first-class kit pieces. Domain data and application
-shells stay with the application: currency or timezone option lists, query-library
-error views, markdown editors, kanban boards, and dashboard widgets.
+messages. `Combobox`, `DatePickerButton` (including `mode="range"`),
+`ThemeProvider`, `ErrorBoundary`, and `SortableTableHead` are first-class kit
+pieces. Domain data and application shells stay with the application: currency
+or timezone option lists, query-library error views, markdown editors, kanban
+boards, and dashboard widgets.

package/README.md

@@ -4,7 +4,7 @@ Shared React components and a Tailwind theme with square corners, semantic
 colors, and distinct selected states. React 19 and Tailwind 4 are required.
 
 ```sh
-npm install --save-exact atlas-react-kit@0.2.1
+npm install --save-exact atlas-react-kit@0.4.0
 ```
 
 Import components by subpath:
@@ -59,7 +59,7 @@ without compilation and processed by the consuming application's Tailwind build.
 The optional Next.js 16 adapter requires Next only when imported. The package
 does not bundle React.
 
-0.1.0 and 0.2.0 are already on npm. Bumping the version in `package.json` and
+0.3.0 is already on npm. Bumping the version in `package.json` and
 merging to `main` (path-filtered to package files) or running
 `workflow_dispatch` publishes through npm OIDC trusted publishing after
 check, test, and pack gates. Versions already on npm are skipped.
@@ -70,7 +70,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.2.1.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.4.0.tgz --access public
 ```
 
 Pin an exact package version in consuming applications. Roll back an upgrade by

package/dist/button.d.ts

@@ -1,5 +1,11 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
+/**
+ * Outline and ghost hover/focus: brand purple border and text, optional
+ * selected wash, no muted grey fill. Used by quiet actions such as
+ * "Clear selection" sitting on a selected row.
+ */
+declare const quietButtonInteraction = "hover:border-primary hover:bg-selected hover:text-primary focus-visible:border-primary focus-visible:text-primary focus-visible:ring-primary/30 aria-expanded:border-primary aria-expanded:bg-selected aria-expanded:text-primary";
 declare const buttonVariants: (props?: ({
     variant?: "default" | "secondary" | "destructive" | "outline" | "ghost" | "link" | null | undefined;
     size?: "default" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
@@ -7,4 +13,4 @@ declare const buttonVariants: (props?: ({
 declare function Button({ className, variant, size, asChild, ...props }: React.ComponentProps<"button"> & VariantProps<typeof buttonVariants> & {
     asChild?: boolean;
 }): React.JSX.Element;
-export { Button, buttonVariants };
+export { Button, buttonVariants, quietButtonInteraction };

package/dist/button.js

@@ -3,13 +3,19 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Slot } from "radix-ui";
 import { cn } from "./utils.js";
+/**
+ * Outline and ghost hover/focus: brand purple border and text, optional
+ * selected wash, no muted grey fill. Used by quiet actions such as
+ * "Clear selection" sitting on a selected row.
+ */
+const quietButtonInteraction = "hover:border-primary hover:bg-selected hover:text-primary focus-visible:border-primary focus-visible:text-primary focus-visible:ring-primary/30 aria-expanded:border-primary aria-expanded:bg-selected aria-expanded:text-primary";
 const buttonVariants = cva("group/button inline-flex shrink-0 items-center justify-center rounded-none border border-transparent bg-clip-padding text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
     variants: {
         variant: {
             default: "bg-primary text-primary-foreground hover:bg-primary/80",
-            outline: "border-border bg-transparent hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-input/30",
+            outline: `border-border bg-transparent ${quietButtonInteraction}`,
             secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
-            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+            ghost: quietButtonInteraction,
             destructive: "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
             link: "text-primary underline underline-offset-4 hover:underline",
         },
@@ -33,4 +39,4 @@ function Button({ className, variant = "default", size = "default", asChild = fa
     const Comp = asChild ? Slot.Root : "button";
     return (_jsx(Comp, { "data-slot": "button", "data-variant": variant, "data-size": size, className: cn(buttonVariants({ variant, size, className })), ...props }));
 }
-export { Button, buttonVariants };
+export { Button, buttonVariants, quietButtonInteraction };

package/dist/card.d.ts

@@ -1,8 +1,11 @@
 import * as React from "react";
 /**
- * Padding lives in `--card-p` (set here, read by the sections) so plain
- * `py-*` / `px-*` classes on Card or its sections override it normally.
- * `flush` drops all padding so a list or table runs edge to edge.
+ * Size and flush padding live in `--card-p` (set here, read from `theme.css`
+ * `@layer components`) so a utility `px-0` / `py-0` on Card or its sections
+ * overrides it without `!`. `flush` sets the variable to 0 so lists and
+ * tables can run edge to edge. `min-h-min shrink-0` keeps the card from
+ * collapsing inside a bounded flex column while `overflow-hidden` still
+ * clips media.
  */
 declare function Card({ className, size, flush, ...props }: React.ComponentProps<"div"> & {
     size?: "default" | "sm";

package/dist/card.js

@@ -2,17 +2,20 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./utils.js";
 /**
- * Padding lives in `--card-p` (set here, read by the sections) so plain
- * `py-*` / `px-*` classes on Card or its sections override it normally.
- * `flush` drops all padding so a list or table runs edge to edge.
+ * Size and flush padding live in `--card-p` (set here, read from `theme.css`
+ * `@layer components`) so a utility `px-0` / `py-0` on Card or its sections
+ * overrides it without `!`. `flush` sets the variable to 0 so lists and
+ * tables can run edge to edge. `min-h-min shrink-0` keeps the card from
+ * collapsing inside a bounded flex column while `overflow-hidden` still
+ * clips media.
  */
 function Card({ className, size = "default", flush = false, ...props }) {
-    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex flex-col overflow-hidden bg-card py-(--card-p) text-sm text-card-foreground shadow-sm ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none", size === "sm"
+    return (_jsx("div", { "data-slot": "card", "data-size": size, className: cn("group/card flex min-h-min shrink-0 flex-col overflow-hidden bg-card text-sm text-card-foreground shadow-sm ring-1 ring-foreground/5 has-[>img:first-child]:pt-0 *:[img:first-child]:rounded-none *:[img:last-child]:rounded-none", size === "sm"
             ? "gap-5 [--card-p:--spacing(5)]"
             : "gap-8 [--card-p:--spacing(8)]", flush && "[--card-p:0px]", className), ...props }));
 }
 function CardHeader({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-none px-(--card-p) has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-(--card-p)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-header", className: cn("group/card-header @container/card-header grid auto-rows-min items-start gap-1.5 rounded-none has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto]", className), ...props }));
 }
 function CardTitle({ as: Component = "div", className, ...props }) {
     return (_jsx(Component, { "data-slot": "card-title", className: cn("font-heading text-base font-semibold tracking-wider uppercase", className), ...props }));
@@ -24,9 +27,9 @@ function CardAction({ className, ...props }) {
     return (_jsx("div", { "data-slot": "card-action", className: cn("col-start-2 row-span-2 row-start-1 self-start justify-self-end", className), ...props }));
 }
 function CardContent({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-content", className: cn("px-(--card-p)", className), ...props }));
+    return _jsx("div", { "data-slot": "card-content", className: className, ...props });
 }
 function CardFooter({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center px-(--card-p) [.border-t]:pt-(--card-p)", className), ...props }));
+    return (_jsx("div", { "data-slot": "card-footer", className: cn("flex items-center", className), ...props }));
 }
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/combobox.d.ts

@@ -17,7 +17,10 @@ type ComboboxProps = {
 };
 /**
  * Searchable single-select built from Button, Popover, and Input.
+ * The trigger uses the same form-control chrome as Input and SelectTrigger.
  * Options are a plain `{ value, label }` list; domain data stays in the app.
+ * Keyboard highlight (arrows, Home/End, PageUp/PageDown) scrolls the active
+ * option into view inside the overflow list.
  */
 export declare function Combobox({ options, value, onValueChange, placeholder, searchPlaceholder, emptyText, disabled, id, className, "aria-invalid": ariaInvalid, }: ComboboxProps): React.JSX.Element;
 export {};

package/dist/combobox.js

@@ -4,11 +4,21 @@ import * as React from "react";
 import { CheckIcon, ChevronDownIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { Input } from "./input.js";
+import { formControlTriggerClassName } from "./internal/form-control.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn, onInputChange } from "./utils.js";
+/**
+ * PageUp/PageDown jump size. The option list is `max-h-60`; ten rows is a
+ * bit more than one viewport so long lists (timezones, currencies) move
+ * without requiring an End key.
+ */
+const LISTBOX_PAGE_SIZE = 10;
 /**
  * Searchable single-select built from Button, Popover, and Input.
+ * The trigger uses the same form-control chrome as Input and SelectTrigger.
  * Options are a plain `{ value, label }` list; domain data stays in the app.
+ * Keyboard highlight (arrows, Home/End, PageUp/PageDown) scrolls the active
+ * option into view inside the overflow list.
  */
 export function Combobox({ options, value, onValueChange, placeholder = "Select", searchPlaceholder = "Search", emptyText = "No results", disabled, id, className, "aria-invalid": ariaInvalid, }) {
     const [open, setOpen] = React.useState(false);
@@ -23,18 +33,30 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             return options;
         return options.filter((option) => option.label.toLowerCase().includes(needle));
     }, [options, query]);
-    // Highlight and search reset when the popover opens or closes; options/value
-    // are read for the initial highlight rather than subscribed as deps.
-    React.useEffect(() => {
-        if (!open) {
+    const onOpenChange = (next) => {
+        setOpen(next);
+        if (!next) {
             setQuery("");
             return;
         }
+        // Set the highlight in the same turn as open so the first painted list
+        // already points at the selected option (a timezone at the end of 400
+        // rows) instead of flashing index 0 and scrolling twice.
         const selectedIndex = options.findIndex((option) => option.value === value);
         setHighlight(selectedIndex >= 0 ? selectedIndex : 0);
+    };
+    React.useEffect(() => {
+        if (!open)
+            return;
         const frame = window.requestAnimationFrame(() => inputRef.current?.focus());
         return () => window.cancelAnimationFrame(frame);
     }, [open]);
+    // Callback ref (not an effect) so scroll runs when Radix mounts the list
+    // and when the highlight moves. A layout effect on `open` is too early:
+    // the option node does not exist until the popover content is in the DOM.
+    const scrollHighlightedOption = React.useCallback((node) => {
+        node?.scrollIntoView({ block: "nearest" });
+    }, []);
     const onQueryChange = onInputChange((next) => {
         setQuery(next);
         setHighlight(0);
@@ -59,7 +81,8 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             if (option)
                 selectValue(option.value);
         }
-        // Home/End jump the highlight; preventDefault so the search caret stays put.
+        // Home/End/Page jump the highlight; preventDefault so the search caret
+        // stays put and the page behind the list does not scroll.
         if (event.key === "Home") {
             event.preventDefault();
             setHighlight(0);
@@ -68,12 +91,22 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             event.preventDefault();
             setHighlight(filtered.length === 0 ? 0 : filtered.length - 1);
         }
+        if (event.key === "PageDown") {
+            event.preventDefault();
+            setHighlight((index) => filtered.length === 0
+                ? 0
+                : Math.min(index + LISTBOX_PAGE_SIZE, filtered.length - 1));
+        }
+        if (event.key === "PageUp") {
+            event.preventDefault();
+            setHighlight((index) => Math.max(index - LISTBOX_PAGE_SIZE, 0));
+        }
     };
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, disabled: disabled, className: cn("h-10 w-full justify-between font-normal tracking-normal normal-case", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: selected?.label ?? placeholder }), _jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", className: "w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { ref: inputRef, value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", role: "combobox", "aria-expanded": open, "aria-controls": listId, "aria-invalid": ariaInvalid, disabled: disabled, className: cn(formControlTriggerClassName, "justify-between", !selected && "text-muted-foreground", className), children: [_jsx("span", { className: "truncate", children: selected?.label ?? placeholder }), _jsx(ChevronDownIcon, { "data-icon": "inline-end", className: "opacity-50" })] }) }), _jsxs(PopoverContent, { align: "start", className: "w-[var(--radix-popover-trigger-width)] gap-0 rounded-none p-0", children: [_jsx("div", { className: "border-b p-2", children: _jsx(Input, { ref: inputRef, value: query, onChange: onQueryChange, onKeyDown: onSearchKeyDown, placeholder: searchPlaceholder, "aria-autocomplete": "list", "aria-controls": listId, "aria-activedescendant": activeOption
                                 ? `${listId}-option-${activeOption.value}`
                                 : undefined }) }), _jsx("ul", { id: listId, role: "listbox", className: "max-h-60 overflow-y-auto p-1", children: filtered.length === 0 ? (_jsx("li", { className: "px-3 py-4 text-center text-sm text-muted-foreground", children: emptyText })) : (filtered.map((option, index) => {
                             const isSelected = option.value === value;
                             const isActive = index === highlight;
-                            return (_jsx("li", { role: "none", children: _jsxs("button", { id: `${listId}-option-${option.value}`, type: "button", role: "option", "aria-selected": isSelected, className: cn("relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-3 text-left text-sm outline-hidden select-none", isSelected && "bg-selected text-selected-foreground", isActive && "bg-accent text-accent-foreground"), onMouseEnter: () => setHighlight(index), onClick: () => selectValue(option.value), children: [_jsx("span", { className: "truncate", children: option.label }), isSelected ? (_jsx(CheckIcon, { className: "pointer-events-none absolute right-2 size-3.5" })) : null] }) }, option.value));
+                            return (_jsx("li", { role: "none", children: _jsxs("button", { ref: isActive ? scrollHighlightedOption : undefined, id: `${listId}-option-${option.value}`, type: "button", role: "option", "aria-selected": isSelected, className: cn("relative flex w-full cursor-default items-center gap-2 rounded-none py-2 pr-8 pl-3 text-left text-sm outline-hidden select-none", isSelected && "bg-selected text-selected-foreground", isActive && "bg-accent text-accent-foreground"), onMouseEnter: () => setHighlight(index), onClick: () => selectValue(option.value), children: [_jsx("span", { className: "truncate", children: option.label }), isSelected ? (_jsx(CheckIcon, { className: "pointer-events-none absolute right-2 size-3.5" })) : null] }) }, option.value));
                         })) })] })] }));
 }

package/dist/date-picker.d.ts

@@ -1,5 +1,13 @@
 import * as React from "react";
+import type { DateRange } from "react-day-picker";
+import { PopoverContent } from "./popover.js";
+export type { DateRange };
 export type DateLike = Date | string | number | null | undefined;
+/** From/to value for `DatePickerButton` in range mode; each side is `DateLike`. */
+export type DatePickerRangeValue = {
+    from?: DateLike;
+    to?: DateLike;
+};
 /**
  * Coerce a date-like value to a local `Date`.
  * Plain calendar dates (`yyyy-MM-dd`) parse as local midnight so they do not
@@ -8,18 +16,41 @@ export type DateLike = Date | string | number | null | undefined;
 export declare function toDate(value: DateLike): Date | undefined;
 /** Format a Date as a timezone-safe calendar date (`yyyy-MM-dd`). */
 export declare function formatLocalDate(date: Date): string;
-type DatePickerButtonProps = {
+type DatePickerSharedProps = {
     id?: string;
-    value?: DateLike;
-    onChange: (date: Date | undefined) => void;
     placeholder?: string;
     disabled?: boolean;
     className?: string;
     "aria-invalid"?: boolean;
+    /**
+     * Visible months in the popover calendar. Defaults to 1 in single mode.
+     * In range mode, defaults to 1 below the `md` breakpoint and 2 at `md`
+     * and above so two stacked months do not open off-screen on mobile.
+     */
+    numberOfMonths?: number;
+    /** Popover side. Defaults to `bottom`; Radix still flips on collision. */
+    side?: React.ComponentProps<typeof PopoverContent>["side"];
+    /** Month shown when the popover opens; falls back to the selected date. */
+    defaultMonth?: Date;
+};
+export type DatePickerSingleProps = DatePickerSharedProps & {
+    mode?: "single";
+    value?: DateLike;
+    onChange: (date: Date | undefined) => void;
+};
+export type DatePickerRangeProps = DatePickerSharedProps & {
+    mode: "range";
+    value?: DatePickerRangeValue;
+    onChange: (range: DateRange | undefined) => void;
 };
+export type DatePickerButtonProps = DatePickerSingleProps | DatePickerRangeProps;
 /**
- * Calendar popover trigger. Accepts `Date` or `yyyy-MM-dd` strings; emits
- * `Date | undefined`. Square corners follow the shared shape rules.
+ * Calendar popover trigger styled as a form control (same chrome as Input
+ * and SelectTrigger). `mode="single"` (default) accepts `Date` or
+ * `yyyy-MM-dd` and emits `Date | undefined`. `mode="range"` accepts
+ * `{ from, to }` and emits `DateRange | undefined`. Range mode shows one
+ * month below `md` and two at `md+` unless `numberOfMonths` is set. The
+ * popover clamps to the viewport (`side` is overridable). Square corners
+ * follow the shared shape rules.
  */
-export declare function DatePickerButton({ id, value, onChange, placeholder, disabled, className, "aria-invalid": ariaInvalid, }: DatePickerButtonProps): React.JSX.Element;
-export {};
+export declare function DatePickerButton(props: DatePickerButtonProps): React.JSX.Element;

package/dist/date-picker.js

@@ -1,10 +1,12 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import * as React from "react";
-import { format, parseISO } from "date-fns";
+import { format, isSameDay, parseISO } from "date-fns";
 import { CalendarIcon } from "lucide-react";
 import { Button } from "./button.js";
 import { Calendar } from "./calendar.js";
+import { formControlTriggerClassName } from "./internal/form-control.js";
+import { MD_MEDIA_QUERY, useMediaQuery } from "./internal/use-media-query.js";
 import { Popover, PopoverContent, PopoverTrigger } from "./popover.js";
 import { cn } from "./utils.js";
 /**
@@ -44,14 +46,61 @@ export function formatLocalDate(date) {
     return format(date, "yyyy-MM-dd");
 }
 /**
- * Calendar popover trigger. Accepts `Date` or `yyyy-MM-dd` strings; emits
- * `Date | undefined`. Square corners follow the shared shape rules.
+ * Trigger label for a range: one PPP date while the end is missing or the
+ * same day as the start, otherwise `from – to`.
  */
-export function DatePickerButton({ id, value, onChange, placeholder = "Pick a date", disabled, className, "aria-invalid": ariaInvalid, }) {
+function formatRangeTriggerLabel(from, to, placeholder) {
+    if (!from)
+        return placeholder;
+    if (!to || isSameDay(from, to))
+        return format(from, "PPP");
+    return `${format(from, "PPP")} – ${format(to, "PPP")}`;
+}
+/** Gutter used when the calendar popover collides with the viewport. */
+const DATE_PICKER_COLLISION_PADDING = 16;
+/** Shared trigger + auto-sized popover chrome for single and range modes. */
+function DatePickerShell({ id, disabled, ariaInvalid, className, empty, label, open, onOpenChange, side, 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, "data-empty": empty, className: cn(formControlTriggerClassName, "justify-start data-[empty=true]:text-muted-foreground", className), children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), label] }) }), _jsx(PopoverContent, { align: "start", side: side, collisionPadding: DATE_PICKER_COLLISION_PADDING, className: "w-auto max-h-(--radix-popover-content-available-height) overflow-y-auto rounded-none p-0", children: children })] }));
+}
+function DatePickerSingleButton({ id, value, onChange, placeholder = "Pick a date", disabled, className, "aria-invalid": ariaInvalid, numberOfMonths, side, defaultMonth, }) {
     const [open, setOpen] = React.useState(false);
     const date = toDate(value);
-    return (_jsxs(Popover, { open: open, onOpenChange: setOpen, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { id: id, type: "button", variant: "outline", disabled: disabled, "aria-invalid": ariaInvalid, "data-empty": !date, className: cn("h-10 w-full justify-start font-normal tracking-normal normal-case data-[empty=true]:text-muted-foreground", className), children: [_jsx(CalendarIcon, { "data-icon": "inline-start" }), date ? format(date, "PPP") : placeholder] }) }), _jsx(PopoverContent, { align: "start", className: "w-auto rounded-none p-0", children: _jsx(Calendar, { mode: "single", selected: date, defaultMonth: date, onSelect: (next) => {
-                        onChange(next);
+    return (_jsx(DatePickerShell, { id: id, disabled: disabled, ariaInvalid: ariaInvalid, className: className, empty: !date, label: date ? format(date, "PPP") : placeholder, open: open, onOpenChange: setOpen, side: side, children: _jsx(Calendar, { mode: "single", selected: date, defaultMonth: defaultMonth ?? date, numberOfMonths: numberOfMonths, onSelect: (next) => {
+                onChange(next);
+                setOpen(false);
+            } }) }));
+}
+function DatePickerRangeButton({ id, value, onChange, placeholder = "Pick a date range", disabled, className, "aria-invalid": ariaInvalid, numberOfMonths, side, defaultMonth, }) {
+    const [open, setOpen] = React.useState(false);
+    const mdUp = useMediaQuery(MD_MEDIA_QUERY);
+    const months = numberOfMonths ?? (mdUp ? 2 : 1);
+    const from = toDate(value?.from);
+    const to = toDate(value?.to);
+    const selected = from || to ? { from, to } : undefined;
+    return (_jsxs(DatePickerShell, { id: id, disabled: disabled, ariaInvalid: ariaInvalid, className: className, empty: !from, label: formatRangeTriggerLabel(from, to, placeholder), open: open, onOpenChange: setOpen, side: side, children: [_jsx(Calendar, { mode: "range", selected: selected, defaultMonth: defaultMonth ?? from ?? to, numberOfMonths: months, onSelect: (next) => {
+                    onChange(next);
+                    // First click is a same-day range; keep the popover open so the
+                    // user can set `to`. Close once the ends differ.
+                    if (next?.from && next.to && !isSameDay(next.from, next.to)) {
+                        setOpen(false);
+                    }
+                } }), _jsx("div", { className: "flex justify-end border-t p-2", children: _jsx(Button, { type: "button", variant: "ghost", size: "sm", disabled: !from && !to, onClick: () => {
+                        onChange(undefined);
                         setOpen(false);
-                    } }) })] }));
+                    }, children: "Clear" }) })] }));
+}
+/**
+ * Calendar popover trigger styled as a form control (same chrome as Input
+ * and SelectTrigger). `mode="single"` (default) accepts `Date` or
+ * `yyyy-MM-dd` and emits `Date | undefined`. `mode="range"` accepts
+ * `{ from, to }` and emits `DateRange | undefined`. Range mode shows one
+ * month below `md` and two at `md+` unless `numberOfMonths` is set. The
+ * popover clamps to the viewport (`side` is overridable). Square corners
+ * follow the shared shape rules.
+ */
+export function DatePickerButton(props) {
+    if (props.mode === "range") {
+        return _jsx(DatePickerRangeButton, { ...props });
+    }
+    return _jsx(DatePickerSingleButton, { ...props });
 }

package/dist/form/date-picker-field.d.ts

@@ -7,7 +7,9 @@ type Props = {
     meta?: FieldMetaState;
     placeholder?: string;
     disabled?: boolean;
+    /** Forwarded to the date picker trigger. */
+    className?: string;
 };
 /** Date picker with built-in field error text and invalid styling. */
-export declare function FormDatePickerField({ value, onValueChange, label, meta, placeholder, disabled, }: Props): import("react").JSX.Element;
+export declare function FormDatePickerField({ value, onValueChange, label, meta, placeholder, disabled, className, }: Props): import("react").JSX.Element;
 export {};

package/dist/form/date-picker-field.js

@@ -5,8 +5,8 @@ import { DatePickerButton } from "../date-picker.js";
 import { Label } from "../label.js";
 import { FieldError, getFieldErrorMessage, } from "./field-error.js";
 /** Date picker with built-in field error text and invalid styling. */
-export function FormDatePickerField({ value, onValueChange, label, meta, placeholder, disabled, }) {
+export function FormDatePickerField({ value, onValueChange, label, meta, placeholder, disabled, className, }) {
     const errorText = meta ? getFieldErrorMessage(meta.errors[0]) : undefined;
     const id = useId();
-    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(DatePickerButton, { id: id, value: value, onChange: onValueChange, placeholder: placeholder, disabled: disabled, "aria-invalid": errorText ? true : undefined }), _jsx(FieldError, { text: errorText })] }));
+    return (_jsxs("div", { className: "flex flex-col gap-1.5", children: [_jsx(Label, { htmlFor: id, children: label }), _jsx(DatePickerButton, { id: id, value: value, onChange: onValueChange, placeholder: placeholder, disabled: disabled, className: className, "aria-invalid": errorText ? true : undefined }), _jsx(FieldError, { text: errorText })] }));
 }

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

@@ -0,0 +1,9 @@
+/**
+ * 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,
+ * background, and shadow. Button outline defaults are text-xs semibold uppercase
+ * with px-6 and icon-indented pl-4/pr-4, which reads as a smaller, more indented
+ * control next to real form fields. Hover stays Input-like and cancels the
+ * outline Button's purple selected wash.
+ */
+export declare const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";

package/dist/internal/form-control.js

@@ -0,0 +1,9 @@
+/**
+ * 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,
+ * background, and shadow. Button outline defaults are text-xs semibold uppercase
+ * with px-6 and icon-indented pl-4/pr-4, which reads as a smaller, more indented
+ * control next to real form fields. Hover stays Input-like and cancels the
+ * outline Button's purple selected wash.
+ */
+export const formControlTriggerClassName = "h-10 w-full border-input bg-background px-3 font-normal text-base tracking-normal shadow-xs normal-case md:text-sm hover:border-input hover:bg-background hover:text-foreground focus-visible:border-ring focus-visible:text-foreground focus-visible:ring-ring/30 aria-expanded:border-input aria-expanded:bg-background aria-expanded:text-foreground has-data-[icon=inline-start]:pl-3 has-data-[icon=inline-end]:pr-3 dark:hover:bg-background dark:aria-expanded:bg-background";

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

@@ -0,0 +1,7 @@
+/** Tailwind `md` breakpoint. Used for range calendars that stack on small screens. */
+export declare const MD_MEDIA_QUERY = "(min-width: 768px)";
+/**
+ * Subscribe to a CSS media query. `defaultMatches` covers SSR and environments
+ * without `matchMedia` (jsdom unless the test stubs it).
+ */
+export declare function useMediaQuery(query: string, defaultMatches?: boolean): boolean;

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

@@ -0,0 +1,27 @@
+"use client";
+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)";
+/**
+ * Subscribe to a CSS media query. `defaultMatches` covers SSR and environments
+ * without `matchMedia` (jsdom unless the test stubs it).
+ */
+export function useMediaQuery(query, defaultMatches = false) {
+    const [matches, setMatches] = React.useState(() => {
+        if (typeof window === "undefined" ||
+            typeof window.matchMedia !== "function") {
+            return defaultMatches;
+        }
+        return window.matchMedia(query).matches;
+    });
+    React.useEffect(() => {
+        if (typeof window.matchMedia !== "function")
+            return;
+        const media = window.matchMedia(query);
+        const onChange = () => setMatches(media.matches);
+        onChange();
+        media.addEventListener("change", onChange);
+        return () => media.removeEventListener("change", onChange);
+    }, [query]);
+    return matches;
+}

package/dist/select.js

@@ -14,7 +14,7 @@ function SelectValue({ ...props }) {
     return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
 }
 function SelectTrigger({ className, size = "default", children, ...props }) {
-    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-full min-w-0 items-center justify-between gap-1.5 rounded-none border border-input bg-background px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
+    return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-full min-w-0 items-center justify-between gap-1.5 rounded-none border border-input bg-background px-3 py-2 text-base whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:border-ring focus-visible:ring-2 focus-visible:ring-ring/30 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-2 aria-invalid:ring-destructive/20 data-placeholder:text-muted-foreground data-[size=default]:h-10 data-[size=sm]:h-9 md:text-sm *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "pointer-events-none size-3.5 text-muted-foreground" }) })] }));
 }
 function SelectContent({ className, children, position = "popper", align = "center", sideOffset = 4, collisionPadding = 8, ...props }) {
     return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", "data-align-trigger": position === "item-aligned", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-(--radix-select-trigger-width) origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-none bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95", position === "popper" &&

package/dist/toggle.js

@@ -4,11 +4,11 @@ import * as React from "react";
 import { cva } from "class-variance-authority";
 import { Toggle as TogglePrimitive } from "radix-ui";
 import { cn } from "./utils.js";
-const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-selected aria-pressed:text-selected-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
+const toggleVariants = cva("group/toggle inline-flex items-center justify-center gap-1.5 rounded-none text-xs font-semibold tracking-widest whitespace-nowrap uppercase transition-colors outline-none hover:border-primary hover:bg-selected hover:text-primary focus-visible:border-primary focus-visible:text-primary focus-visible:ring-[3px] focus-visible:ring-primary/30 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-selected aria-pressed:text-selected-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-3.5", {
     variants: {
         variant: {
             default: "bg-transparent",
-            outline: "border border-input bg-transparent hover:bg-muted",
+            outline: "border border-input bg-transparent",
         },
         size: {
             default: "h-10 min-w-10 px-6 has-data-[icon=inline-end]:pr-4 has-data-[icon=inline-start]:pl-4",

package/package.json

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

package/theme.css

@@ -182,3 +182,24 @@
     @apply font-sans;
   }
 }
+
+/*
+ * Card padding in this layer so utility `px-0` / `py-0` override `--card-p`
+ * without `!`. Size and flush still set the variable on `[data-slot=card]`.
+ */
+@layer components {
+  [data-slot="card"] {
+    padding-block: var(--card-p);
+  }
+  [data-slot="card-header"],
+  [data-slot="card-content"],
+  [data-slot="card-footer"] {
+    padding-inline: var(--card-p);
+  }
+  [data-slot="card-header"].border-b {
+    padding-bottom: var(--card-p);
+  }
+  [data-slot="card-footer"].border-t {
+    padding-top: var(--card-p);
+  }
+}