atlas-react-kit 0.3.0 → 0.4.1

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; 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 }`; optional `numberOfMonths` (range default 2) |
-| `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, and `min-w-0` so nested tables scroll; `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; root scroller is `min-w-0 overflow-x-auto` with a fade cue; cells are `px-2` below `sm`                                                                                                                                                   |
+| `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
 
@@ -64,9 +64,17 @@ accept the same error meta shape. `FormDatePickerField` takes a `Date` or
 
 `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 popover shows two months
-unless `numberOfMonths` is set, stays `w-auto` so it does not collapse to the
-default popover width, and includes a Clear action.
+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"

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,19 @@ 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. `Table` scrolls wide
+columns inside itself (`min-w-0 overflow-x-auto`) and tightens cell padding
+below `sm`. `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, and `min-w-0` so nested tables scroll instead of widening the card.
+`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

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.3.0
+npm install --save-exact atlas-react-kit@0.4.1
 ```
 
 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.2.1 is already on npm. Bumping the version in `package.json` and
+0.4.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.3.0.tgz --access public
+npm publish ./release-artifacts/atlas-react-kit-0.4.1.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. `min-w-0` lets nested tables
+ * scroll instead of widening the card. `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. `min-w-0` lets nested tables
+ * scroll instead of widening the card. `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 min-w-0 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 min-w-0 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: cn("min-w-0", 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 min-w-0 items-center", className), ...props }));
 }
 export { Card, CardHeader, CardFooter, CardTitle, CardAction, CardDescription, CardContent, };

package/dist/combobox.d.ts

@@ -17,6 +17,7 @@ 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.

package/dist/combobox.js

@@ -4,6 +4,7 @@ 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";
 /**
@@ -14,6 +15,7 @@ import { cn, onInputChange } from "./utils.js";
 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.
@@ -100,7 +102,7 @@ export function Combobox({ options, value, onValueChange, placeholder = "Select"
             setHighlight((index) => Math.max(index - LISTBOX_PAGE_SIZE, 0));
         }
     };
-    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("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;

package/dist/date-picker.d.ts

@@ -1,5 +1,6 @@
 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`. */
@@ -22,10 +23,13 @@ type DatePickerSharedProps = {
     className?: string;
     "aria-invalid"?: boolean;
     /**
-     * Visible months in the popover calendar. Defaults to 1 in single mode
-     * and 2 in range mode.
+     * 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;
 };
@@ -41,9 +45,12 @@ export type DatePickerRangeProps = DatePickerSharedProps & {
 };
 export type DatePickerButtonProps = DatePickerSingleProps | DatePickerRangeProps;
 /**
- * Calendar popover trigger. `mode="single"` (default) accepts `Date` or
+ * 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`. Square corners follow
- * the shared shape rules.
+ * `{ 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(props: DatePickerButtonProps): React.JSX.Element;

package/dist/date-picker.js

@@ -5,6 +5,8 @@ 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";
 /**
@@ -54,24 +56,28 @@ function formatRangeTriggerLabel(from, to, placeholder) {
         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, 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("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" }), label] }) }), _jsx(PopoverContent, { align: "start", className: "w-auto rounded-none p-0", children: children })] }));
+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, defaultMonth, }) {
+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 (_jsx(DatePickerShell, { id: id, disabled: disabled, ariaInvalid: ariaInvalid, className: className, empty: !date, label: date ? format(date, "PPP") : placeholder, open: open, onOpenChange: setOpen, children: _jsx(Calendar, { mode: "single", selected: date, defaultMonth: defaultMonth ?? date, numberOfMonths: numberOfMonths, onSelect: (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 = 2, defaultMonth, }) {
+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, children: [_jsx(Calendar, { mode: "range", selected: selected, defaultMonth: defaultMonth ?? from ?? to, numberOfMonths: numberOfMonths, onSelect: (next) => {
+    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.
@@ -84,10 +90,13 @@ function DatePickerRangeButton({ id, value, onChange, placeholder = "Pick a date
                     }, children: "Clear" }) })] }));
 }
 /**
- * Calendar popover trigger. `mode="single"` (default) accepts `Date` or
+ * 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`. Square corners follow
- * the shared shape rules.
+ * `{ 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") {

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

@@ -1,4 +1,9 @@
 import * as React from "react";
+/**
+ * Data table. The root is a `min-w-0 overflow-x-auto` scroller so nowrap
+ * columns scroll inside the table instead of widening a card or panel.
+ * Cell padding is `px-2` below `sm` and the original `p-3` from `sm` up.
+ */
 declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
 declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
 declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;

package/dist/table.js

@@ -2,8 +2,13 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
 import { cn } from "./utils.js";
+/**
+ * Data table. The root is a `min-w-0 overflow-x-auto` scroller so nowrap
+ * columns scroll inside the table instead of widening a card or panel.
+ * Cell padding is `px-2` below `sm` and the original `p-3` from `sm` up.
+ */
 function Table({ className, ...props }) {
-    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
+    return (_jsx("div", { "data-slot": "table-container", className: "relative w-full min-w-0 max-w-full overflow-x-auto overscroll-x-contain", children: _jsx("table", { "data-slot": "table", className: cn("w-full min-w-full caption-bottom text-sm", className), ...props }) }));
 }
 function TableHeader({ className, ...props }) {
     return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
@@ -18,10 +23,10 @@ function TableRow({ className, ...props }) {
     return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-selected", className), ...props }));
 }
 function TableHead({ className, ...props }) {
-    return (_jsx("th", { "data-slot": "table-head", className: cn("h-12 px-3 text-left align-middle text-xs font-medium tracking-wider whitespace-nowrap text-muted-foreground uppercase [&:has([role=checkbox])]:pr-0", className), ...props }));
+    return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle text-xs font-medium tracking-wider whitespace-nowrap text-muted-foreground uppercase sm:h-12 sm:px-3 [&:has([role=checkbox])]:pr-0", className), ...props }));
 }
 function TableCell({ className, ...props }) {
-    return (_jsx("td", { "data-slot": "table-cell", className: cn("p-3 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0", className), ...props }));
+    return (_jsx("td", { "data-slot": "table-cell", className: cn("px-2 py-2 align-middle whitespace-nowrap sm:p-3 [&:has([role=checkbox])]:pr-0", className), ...props }));
 }
 function TableCaption({ className, ...props }) {
     return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));

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.3.0",
+  "version": "0.4.1",
   "description": "Shared React components and Tailwind theme for Atlas",
   "type": "module",
   "license": "MIT",

package/theme.css

@@ -182,3 +182,63 @@
     @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);
+  }
+
+  /*
+   * Horizontal scroll shadows: edge fades stay pinned (`scroll`) while
+   * matching covers ride with the content (`local`), so a clipped column
+   * like LICENSE is visible as overflow instead of looking truncated.
+   */
+  [data-slot="table-container"] {
+    --table-scroll-fade: var(--background);
+    background:
+      linear-gradient(to right, var(--table-scroll-fade) 40%, transparent),
+      linear-gradient(to left, var(--table-scroll-fade) 40%, transparent),
+      linear-gradient(
+        to right,
+        color-mix(in oklch, var(--foreground) 16%, transparent),
+        transparent 80%
+      ),
+      linear-gradient(
+        to left,
+        color-mix(in oklch, var(--foreground) 16%, transparent),
+        transparent 80%
+      );
+    background-repeat: no-repeat;
+    background-size:
+      1.5rem 100%,
+      1.5rem 100%,
+      0.75rem 100%,
+      0.75rem 100%;
+    background-position:
+      left center,
+      right center,
+      left center,
+      right center;
+    background-attachment: local, local, scroll, scroll;
+  }
+
+  /* Covers match the card face so the fade does not flash the page background. */
+  [data-slot="card"] [data-slot="table-container"] {
+    --table-scroll-fade: var(--card);
+  }
+}