@nadicodeai/ui 12.1.102 → 12.1.104

package/dist/components/button.js

@@ -1,65 +1,190 @@
-import { jsx as _jsx } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 import { Button as ButtonPrimitive } from "@base-ui/react/button";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
 import { cva } from "class-variance-authority";
+import { Children, isValidElement } from "react";
+import { PendingLabel } from "./pending-label.js";
 import { cn } from "../lib/utils.js";
-const buttonClasses = cva("group/button inline-flex min-h-touch-target min-w-touch-target shrink-0 items-center justify-center rounded-sm border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-[background-color,border-color,color,scale] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] select-none motion-safe:active:not-aria-[haspopup]:scale-[0.97] disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
+const heldNeutral = "disabled:border-border disabled:bg-muted disabled:text-muted-foreground aria-disabled:border-border aria-disabled:bg-muted aria-disabled:text-muted-foreground";
+const heldDim = "disabled:opacity-50 aria-disabled:not-aria-busy:opacity-50";
+const buttonClasses = cva("group/button inline-flex min-h-touch-target min-w-touch-target shrink-0 items-center justify-center rounded-sm border border-transparent bg-clip-padding text-button font-medium whitespace-nowrap transition-[background-color,border-color,color] duration-[var(--nc-duration-confirm)] ease-[var(--nc-ease-out-strong)] select-none disabled:pointer-events-none aria-disabled:pointer-events-none aria-invalid:border-destructive [@media(hover:hover)_and_(pointer:fine)]:min-h-0 [@media(hover:hover)_and_(pointer:fine)]:min-w-0 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", {
     variants: {
         variant: {
-            default: "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-active",
-            outline: "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-            secondary: "border-border bg-secondary text-secondary-foreground hover:bg-accent aria-expanded:bg-accent aria-expanded:text-accent-foreground",
-            ghost: "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground",
-            brandGhost: "text-nc-identity-white hover:bg-nc-identity-white/10 hover:text-nc-identity-white aria-expanded:bg-nc-identity-white/10 aria-expanded:text-nc-identity-white",
-            brandSolid: "bg-nc-identity-white text-nc-identity-ink hover:bg-nc-identity-white/90 hover:text-nc-identity-ink active:bg-nc-identity-white/80 active:text-nc-identity-ink",
-            destructive: "bg-destructive text-destructive-foreground hover:brightness-95",
-            link: "text-primary underline-offset-4 hover:underline",
+            default: [
+                "bg-primary text-primary-foreground hover:bg-primary-hover active:bg-primary-hover aria-expanded:bg-primary-hover",
+                heldNeutral,
+            ],
+            outline: [
+                "border-border bg-(--nc-field,var(--background)) hover:bg-muted hover:text-foreground active:bg-muted aria-expanded:bg-muted aria-expanded:text-foreground",
+                heldNeutral,
+            ],
+            secondary: [
+                "border-border bg-secondary text-secondary-foreground hover:bg-accent active:bg-accent aria-expanded:bg-accent aria-expanded:text-accent-foreground",
+                heldNeutral,
+            ],
+            ghost: [
+                "hover:bg-muted hover:text-foreground active:bg-muted aria-expanded:bg-muted aria-expanded:text-foreground",
+                heldDim,
+            ],
+            brandGhost: [
+                "text-nc-identity-white hover:bg-nc-identity-white/10 hover:text-nc-identity-white aria-expanded:bg-nc-identity-white/10 aria-expanded:text-nc-identity-white",
+                heldDim,
+            ],
+            brandSolid: [
+                "bg-nc-identity-white text-nc-identity-ink hover:bg-nc-identity-white/90 hover:text-nc-identity-ink active:bg-nc-identity-white/90 active:text-nc-identity-ink",
+                heldDim,
+            ],
+            destructive: [
+                "bg-destructive text-destructive-foreground hover:brightness-90 active:brightness-90",
+                heldNeutral,
+            ],
+            warning: [
+                "bg-warning text-warning-foreground hover:brightness-90 active:brightness-90",
+                heldNeutral,
+            ],
+            link: ["text-(--nc-link) underline-offset-4 hover:underline", heldDim],
         },
         size: {
-            default: "h-control-height gap-1.5 px-control-padding-inline has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2 [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height",
-            xs: "h-nadicode-control-height-xs gap-1 px-2 text-xs in-data-[slot=button-group]:rounded-sm has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
-            sm: "h-nadicode-control-height-sm gap-1 px-control-padding-inline text-xs in-data-[slot=button-group]:rounded-sm has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
-            lg: "h-nadicode-control-height-lg gap-1.5 px-control-padding-inline has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+            default: "h-control-height gap-0.75 px-button-padding-inline [@media(hover:hover)_and_(pointer:fine)]:min-h-control-height [&_[data-icon]_svg:not([class*='size-'])]:size-3.5",
+            xs: "h-nadicode-control-height-xs gap-1 px-2 text-button-xs in-data-[slot=button-group]:rounded-sm has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+            sm: "h-nadicode-control-height-sm gap-0.75 px-button-padding-inline-sm in-data-[slot=button-group]:rounded-sm [&_svg:not([class*='size-'])]:size-3.5",
+            lg: "h-nadicode-control-height-lg gap-0.75 rounded-md px-button-padding-inline-lg text-button-lg",
             icon: "size-control-height",
-            "icon-xs": "size-nadicode-control-height-xs in-data-[slot=button-group]:rounded-sm [&_svg:not([class*='size-'])]:size-3",
+            "icon-xs": "size-nadicode-control-height-xs rounded-xs-plus in-data-[slot=button-group]:rounded-sm",
             "icon-sm": "size-nadicode-control-height-sm in-data-[slot=button-group]:rounded-sm",
-            "icon-lg": "size-nadicode-control-height-lg",
+            "icon-lg": "size-nadicode-control-height-lg rounded-md",
+        },
+        shape: {
+            square: "",
+            rounded: "rounded-full px-3",
+            circle: "rounded-full",
         },
     },
     defaultVariants: {
         variant: "default",
         size: "default",
+        shape: "square",
     },
 });
 /**
- * The button classes for an element that is not a `Button`, such as a link
- * drawn as one. They pass through `cn` as `Button`'s do, so a variant's
- * border, fill or text replaces the base one instead of losing to it in the
- * stylesheet: unmerged, the base `border-transparent` hides every outline edge.
+ * The button classes for an element that is not a `Button`, such as a calendar's
+ * day arrows. They pass through `cn` as `Button`'s do, so a variant's border,
+ * fill or text replaces the base one instead of losing to it in the stylesheet:
+ * unmerged, the base `border-transparent` hides every outline edge. A link
+ * drawn as a button is a `ButtonLink`.
  */
 function buttonVariants(props) {
     return cn(buttonClasses(props));
 }
+function isIconSize(size) {
+    return size.startsWith("icon");
+}
+function isText(children) {
+    const parts = Children.toArray(children);
+    return parts.length > 0 && parts.every((part) => !isValidElement(part));
+}
+function ButtonLabel({ children, className, loading, loadingLabel, }) {
+    if (loadingLabel !== undefined) {
+        return (_jsx(PendingLabel, { className: className, pending: loading === true, pendingLabel: loadingLabel, children: children }));
+    }
+    return className === undefined ? children : _jsx("span", { className: className, children: children });
+}
+function ButtonContent({ children, loading, loadingLabel, prefix, size, suffix, }) {
+    const labelled = size !== "xs" && !isIconSize(size);
+    const labelBox = labelled && (loadingLabel !== undefined || isText(children));
+    return (_jsxs(_Fragment, { children: [prefix ? (_jsx("span", { className: cn("inline-flex shrink-0", labelled && "w-5 items-center justify-center"), "data-icon": "inline-start", children: prefix })) : null, _jsx(ButtonLabel, { className: labelBox ? "flex min-w-0 items-center gap-1.5 px-1.5" : undefined, loading: loading, loadingLabel: loadingLabel, children: children }), suffix ? (_jsx("span", { className: cn("inline-flex shrink-0", labelled && "me-0.75 w-3.5 items-center justify-center"), "data-icon": "inline-end", children: suffix })) : null] }));
+}
+/**
+ * The package's one button: a command, its label naming the result.
+ *
+ * @family Actions
+ * @when "Use `Button` for actions that mutate state (deploy, save, delete); use `ButtonLink` for navigation that changes the URL." (https://vercel.com/geist/button)
+ * Ours: one `default` per surface, the thing this page or dialog is for.
+ * @instead "Switch to a `Menu` or `Split Button` when more than one related action shares a row." (https://vercel.com/geist/button)
+ * Ours: a link inside a sentence is `TextLink`. A record's secondary commands go in `ActionMenu`. Appending to a list is a
+ * `LoadMoreButton`. An on/off value is a `Switch`.
+ * @behaviour "Default `Button` is primary." (https://vercel.com/geist/button)
+ * "Pass `type="secondary"` for the supporting action and `type="error"` for destructive confirmations." (https://vercel.com/geist/button)
+ * "`primary`, `success`, `ghost`, and `violet` are not valid `type` values." (https://vercel.com/geist/button)
+ * "For form submits, use `typeName="submit"`." (https://vercel.com/geist/button)
+ * "The HTML `type` attribute lives on `typeName`, not on `type`, which controls the visual variant." (https://vercel.com/geist/button)
+ * Ours: the look is `variant` (`default`, `secondary`, `outline`, `ghost`, `link`, `destructive` for
+ * Geist's error, `warning`) and `type` is the HTML type, `button` unless it submits.
+ * "The default size is medium." (https://vercel.com/geist/button)
+ * Ours: `xs`, `sm`, `default` (medium) and `lg`; `sm` and `xs` are for a control nested in dense
+ * content, such as a composer or an input group, never for chrome.
+ * "Pass `loading` instead of swapping in a spinner so the button stays focusable and announces the busy state to assistive tech." (https://vercel.com/geist/button)
+ * Ours: `loading` is the only busy state: the button keeps its place and focus, says `loadingLabel`
+ * in the label's place, ignores a second press and shows no spinner.
+ * "Disable a button only when the action is impossible right now (missing input, insufficient permission); pair with a `Tooltip` that explains why." (https://vercel.com/geist/button)
+ * Ours: the reason is written beside the button.
+ * "Icon-only buttons should include the `svgOnly` prop and an `aria-label`." (https://vercel.com/geist/button)
+ * Ours: an icon-only button takes an `icon` size and its icon as the child; `shape="circle"` is only
+ * for it. An icon with text passes as `prefix` or `suffix`.
+ * "Combination of `shape="rounded"` and the `shadow` prop, often used on marketing pages." (https://vercel.com/geist/button)
+ * Ours: `shape="rounded"` is a pill for a call to action that stands apart (a banner's or a
+ * scroller's), with no `shadow` prop.
+ * Ours: text children sit in a label box that adds 6 px each side to the padding; an element child
+ * (a `render` target, a row with a trailing `Kbd`) lays itself out and gets no box. Colour sits on
+ * the whole button for three looks: `default` is ink, `destructive` is the error fill for permanent
+ * loss (Delete project), `warning` is the amber fill for a disruptive command that can be undone
+ * (Pause project). `link` is the link colour as text, with the arrow as `suffix` when the
+ * destination is outside the product. `outline` and `secondary` are neutral with a hairline edge,
+ * `ghost` has no chrome, and no look puts a hue on its edge. Held (disabled or `loading`), a filled
+ * look drops its hue to the muted fill, the muted text and the hairline, so it reads as unavailable;
+ * `ghost` and `link` dim instead. Pressed looks like hover, with no movement.
+ * @words "Title Case the label and name what happens: `Deploy Project`, `Invite Member`, `Rotate Key`." (https://vercel.com/geist/button)
+ * "Avoid bare verbs (`Submit`) and generic confirms (`OK`, `Confirm`)." (https://vercel.com/geist/button)
+ * "Destructive buttons follow `Verb + Noun` and pair 1:1 with their toast: `Delete Project` then `Project deleted`." (https://vercel.com/geist/button)
+ * "Mode-switch buttons append `Instead`: `Use a Recovery Code Instead`." (https://vercel.com/geist/button)
+ * Ours: sentence case, not Title Case: *Invite member*, *Remove mailbox* then *Mailbox removed*, *Use a
+ * recovery code instead*. `loadingLabel` is the same words in the -ing form: *Inviting member*. Italian
+ * runs about a third longer (*Rimuovi casella*), so a footer leaves room and a label never wraps.
+ * @access "Icon-only buttons require both `svgOnly` and `aria-label`; the validator throws without them." (https://vercel.com/geist/button)
+ * "The `aria-label` names the action and the target (`Copy deployment URL`), not the icon (`Copy`)." (https://vercel.com/geist/button)
+ * "Don’t set `aria-label` on a button that already has visible text; it overrides the label and creates a screen-reader mismatch." (https://vercel.com/geist/button)
+ * Ours: the type requires `aria-label` or `aria-labelledby` on an icon-only button. A native
+ * `button`, `type="button"` unless it submits. `loading` sets `aria-busy`. Focus shows the base
+ * outline in one colour for every look; nothing repaints it.
+ */
+function Button({ children, className, disabled, focusableWhenDisabled, loading, loadingLabel, prefix, shape = "square", size = "default", suffix, variant = "default", ...props }) {
+    const busy = loading === true;
+    return (_jsx(ButtonPrimitive, { "data-slot": "button", "data-size": size, "data-variant": variant, "aria-busy": busy || undefined, className: buttonVariants({ variant, size, shape, className }), disabled: disabled || busy, focusableWhenDisabled: focusableWhenDisabled || busy, ...props, children: _jsx(ButtonContent, { loading: loading, loadingLabel: loadingLabel, prefix: prefix, size: size, suffix: suffix, children: children }) }));
+}
+function refuseClick(event) {
+    event.preventDefault();
+}
 /**
- * The package's one button: five looks at 36 px, the label naming the result.
+ * A link drawn as a button, with the props of `Button`.
  *
  * @family Actions
- * @when A command that changes something or opens a surface. One `default` per surface: the thing
- * this page or dialog is for.
- * @instead Going somewhere is a link drawn with `buttonVariants`, and a link inside a sentence is
- * `TextLink`, blue and underlined. A record's secondary commands go in `ActionMenu`. An on/off
- * value is a `Switch`.
- * @behaviour Enter and Space run it. A press settles at 97% scale in 180 ms, except on a trigger
- * that opens a popup. Disabled is 50% and ignores the pointer, and its reason is written beside it.
- * On touch the target grows to 44 px while the drawing stays 36. `sm` and `xs` are for a control
- * nested in dense content, such as a composer or an input group, never for chrome.
- * @words Sentence case, verb + noun naming the result: *Invite member*, *Remove mailbox*; never OK,
- * Submit or Confirm. Italian runs about a third longer (*Rimuovi casella*), so a footer leaves room
- * and a label never wraps.
- * @access A native `button`, `type="button"` unless it submits. An icon-only button carries an
- * `aria-label` naming action and target. Focus is the 2 px ink outline at 2 px offset, drawn once
- * by the base layer, never repainted.
+ * @when "Use `Button` for actions that mutate state (deploy, save, delete); use `ButtonLink` for navigation that changes the URL." (https://vercel.com/geist/button)
+ * Ours: a sign-in, a download, a record's page. It is read as a link and drawn as a button.
+ * @instead A command that changes something is a `Button`. A link inside a sentence is `TextLink`.
+ * The product's router link keeps its own behaviour through `render`: `render={<Link href="/agents" />}`.
+ * @behaviour "Use `ButtonLink` for links with the same props as `Button`." (https://vercel.com/geist/button)
+ * Ours: takes the looks, sizes, `prefix`, `suffix` and `loading` of `Button`. While it is `loading`
+ * or `disabled` it ignores a click and stays focusable.
+ * @words Sentence case, verb + noun naming the destination or the result: *Open Portal*, *Download
+ * invoice*. A destination outside the product ends in the arrow as `suffix`.
+ * @access A native `a` with an `href`, never `role="button"`. An icon-only link carries an
+ * `aria-label` or `aria-labelledby` naming destination, and the type requires it.
  */
-function Button({ className, variant = "default", size = "default", ...props }) {
-    return (_jsx(ButtonPrimitive, { "data-slot": "button", className: buttonVariants({ variant, size, className }), ...props }));
+function ButtonLink({ children, className, disabled, loading, loadingLabel, onClick, prefix, render, shape = "square", size = "default", suffix, variant = "default", ...props }) {
+    const busy = loading === true;
+    const blocked = busy || disabled === true;
+    return useRender({
+        defaultTagName: "a",
+        render,
+        state: { slot: "button", size, variant },
+        props: mergeProps({
+            "aria-busy": busy || undefined,
+            "aria-disabled": blocked || undefined,
+            className: buttonVariants({ variant, size, shape, className }),
+            children: (_jsx(ButtonContent, { loading: loading, loadingLabel: loadingLabel, prefix: prefix, size: size, suffix: suffix, children: children })),
+            onClick: blocked ? refuseClick : onClick,
+        }, props),
+    });
 }
-export { Button, buttonVariants };
+export { Button, ButtonLink, buttonVariants };

package/dist/components/calendar.d.ts

@@ -1,24 +1,35 @@
 import * as React from "react";
-import { DayPicker, type DayButton, type Locale } from "react-day-picker";
-import { Button } from "./button.js";
+import { type DayButton, type Locale, type PropsBase, type PropsRange, type PropsSingle } from "react-day-picker";
+import { buttonVariants } from "./button.js";
+type Controlled<Props extends PropsSingle | PropsRange> = Omit<Props, "onSelect" | "selected"> & {
+    /** The chosen day or range, `undefined` before the first choice. */
+    selected: Props["selected"];
+    /** Called with the new choice. */
+    onSelect: NonNullable<Props["onSelect"]>;
+};
+type CalendarProps = PropsBase & (Controlled<PropsSingle> | Controlled<PropsRange>) & {
+    buttonVariant?: NonNullable<Parameters<typeof buttonVariants>[0]>["variant"];
+    /** The first day that can be picked. */
+    minValue?: Date | undefined;
+    /** The last day that can be picked. */
+    maxValue?: Date | undefined;
+};
 /**
  * A month grid for choosing a day or a range of days.
  *
  * @family Inputs
- * @when A date or a window whose day and month matter. A chart or a report's window is one
- * `DateRangeControl` in its toolbar, which opens this calendar from its *Custom* preset.
- * @instead A row of range buttons is never drawn; the presets live in one select. A time of day or
- * a recurring schedule is its own field, not a calendar.
- * @behaviour The first click starts a range, the second ends it. 28 px days, Monday first in
- * Italian, ends in ink, today in the muted fill. Arrow keys move by day, Page Up and Down by month.
- * @words Dates are written in the reader's locale (*7 Oct – 13 Oct*, *7–13 ott*), never the ISO
- * pair a URL stores.
- * @access A grid of day buttons, each named with its full date. Focus goes into the grid when it
- * opens and back to its trigger when it closes, and the chosen range is read out.
+ * @when "Pick `<Calendar>` for analytics ranges and any picker where day-of-week and month context matter." "Provide `<Calendar.Presets>` for the common ranges (`Last 7 Days`, `Month to Date`) so users land on the right window in one click." (https://vercel.com/geist/calendar)
+ * Ours: a chart or a report's window is one `DateRangeControl` in its toolbar, which puts the common windows as buttons beside this grid.
+ * @instead "For ISO dates pasted whole or relative shorthand like `7d`, use a free-form `Input`." (https://vercel.com/geist/calendar)
+ * Ours: a time of day or a recurring schedule is its own field, not a calendar.
+ * @behaviour "Set `min` and `max` to the data window so users can’t pick outside the retention range." "Support arrow-key day navigation, `Shift` + arrow for week jumps, and `Page Up` / `Page Down` for month jumps." (https://vercel.com/geist/calendar)
+ * Ours: `min` and `max` are `minValue` and `maxValue`: a day outside the window cannot be picked and the month arrows stop at it. Up and Down move a week without `Shift`, Left and Right a day, Page Up and Page Down a month. `mode`, `selected` and `onSelect` are required: the grid always chooses and is controlled. The month's name sits left, the round previous and next buttons right, and the weekday letters start 42 px below the top; a day is a 32 px square centred in its column of a 256 px grid, 8 px between weeks and 15 px between the weekday letters and the first week. The first click starts a range, the second ends it. Monday first in Italian. Colour: the ends of a range are ink over a muted band, today is the one blue day (a solid info fill, unless selected), everything else is neutral, Saturday and Sunday are a step lighter than the weekdays and days of other months lighter still, and hover draws only a hairline edge. A calendar that opens from a trigger sits 8 px below it, 280 px wide with its own 12 px padding and no padding of the popover around it.
+ * @words "Default to the user’s locale and timezone; never silently render UTC for a US-Pacific viewer." (https://vercel.com/geist/calendar)
+ * Ours: dates are written in the reader's locale (*7 Oct – 13 Oct*, *7–13 ott*), never the ISO pair a URL stores.
+ * @access "Trap focus inside the popover so Tab cycles day cells and presets instead of the page behind it." "Announce range changes through `aria-live="polite"` so a screen reader hears `From Apr 1 to Apr 28` after the second click." (https://vercel.com/geist/calendar)
+ * Ours: a grid of day buttons, each named with its full date. Focus goes into the grid when it opens and back to its trigger when it closes. The selected days are marked as selected; the control that owns the grid announces the range.
  */
-declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, ...props }: React.ComponentProps<typeof DayPicker> & {
-    buttonVariant?: React.ComponentProps<typeof Button>["variant"];
-}): React.JSX.Element;
+declare function Calendar({ className, classNames, showOutsideDays, captionLayout, buttonVariant, locale, formatters, components, disabled, maxValue, minValue, ...props }: CalendarProps): React.JSX.Element;
 declare function CalendarDayButton({ className, day, modifiers, locale, ...props }: React.ComponentProps<typeof DayButton> & {
     locale?: Partial<Locale>;
 }): React.JSX.Element;

package/dist/components/calendar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/components/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAAE,SAAS,EAAwB,KAAK,SAAS,EAAE,KAAK,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAGhG,OAAO,EAAE,MAAM,EAAkB,MAAM,qBAAqB,CAAC;AAG7D;;;;;;;;;;;;;;GAcG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,MAAM,EACN,UAAU,EACV,UAAU,EACV,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAC1C,aAAa,CAAC,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,MAAM,CAAC,CAAC,SAAS,CAAC,CAAC;CAChE,qBA2HA;AAED,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,qBA+BvE;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}
+{"version":3,"file":"calendar.d.ts","sourceRoot":"","sources":["../../src/components/calendar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,EAKL,KAAK,SAAS,EACd,KAAK,MAAM,EAEX,KAAK,SAAS,EACd,KAAK,UAAU,EACf,KAAK,WAAW,EACjB,MAAM,kBAAkB,CAAC;AAG1B,OAAO,EAAE,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAGrD,KAAK,UAAU,CAAC,KAAK,SAAS,WAAW,GAAG,UAAU,IAAI,IAAI,CAAC,KAAK,EAAE,UAAU,GAAG,UAAU,CAAC,GAAG;IAC/F,oEAAoE;IACpE,QAAQ,EAAE,KAAK,CAAC,UAAU,CAAC,CAAC;IAC5B,kCAAkC;IAClC,QAAQ,EAAE,WAAW,CAAC,KAAK,CAAC,UAAU,CAAC,CAAC,CAAC;CAC1C,CAAC;AAEF,KAAK,aAAa,GAAG,SAAS,GAC5B,CAAC,UAAU,CAAC,WAAW,CAAC,GAAG,UAAU,CAAC,UAAU,CAAC,CAAC,GAAG;IACnD,aAAa,CAAC,EAAE,WAAW,CAAC,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC;IAC7E,wCAAwC;IACxC,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;IAC5B,uCAAuC;IACvC,QAAQ,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CAC7B,CAAC;AAEJ;;;;;;;;;;;;;;GAcG;AACH,iBAAS,QAAQ,CAAC,EAChB,SAAS,EACT,UAAU,EACV,eAAsB,EACtB,aAAuB,EACvB,aAAuB,EACvB,MAAM,EACN,UAAU,EACV,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,aAAa,qBA4Gf;AA4CD,iBAAS,iBAAiB,CAAC,EACzB,SAAS,EACT,GAAG,EACH,SAAS,EACT,MAAM,EACN,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,SAAS,CAAC,GAAG;IAAE,MAAM,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,CAAA;CAAE,qBAkCvE;AAED,OAAO,EAAE,QAAQ,EAAE,iBAAiB,EAAE,CAAC"}

package/dist/components/calendar.js

@@ -1,38 +1,43 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as React from "react";
-import { DayPicker, getDefaultClassNames } from "react-day-picker";
+import { DayPicker, getDefaultClassNames, useDayPicker, } from "react-day-picker";
 import { cn } from "../lib/utils.js";
-import { Button, buttonVariants } from "./button.js";
+import { buttonVariants } from "./button.js";
 import { ChevronLeftIcon, ChevronRightIcon, ChevronDownIcon } from "lucide-react";
 /**
  * A month grid for choosing a day or a range of days.
  *
  * @family Inputs
- * @when A date or a window whose day and month matter. A chart or a report's window is one
- * `DateRangeControl` in its toolbar, which opens this calendar from its *Custom* preset.
- * @instead A row of range buttons is never drawn; the presets live in one select. A time of day or
- * a recurring schedule is its own field, not a calendar.
- * @behaviour The first click starts a range, the second ends it. 28 px days, Monday first in
- * Italian, ends in ink, today in the muted fill. Arrow keys move by day, Page Up and Down by month.
- * @words Dates are written in the reader's locale (*7 Oct – 13 Oct*, *7–13 ott*), never the ISO
- * pair a URL stores.
- * @access A grid of day buttons, each named with its full date. Focus goes into the grid when it
- * opens and back to its trigger when it closes, and the chosen range is read out.
+ * @when "Pick `<Calendar>` for analytics ranges and any picker where day-of-week and month context matter." "Provide `<Calendar.Presets>` for the common ranges (`Last 7 Days`, `Month to Date`) so users land on the right window in one click." (https://vercel.com/geist/calendar)
+ * Ours: a chart or a report's window is one `DateRangeControl` in its toolbar, which puts the common windows as buttons beside this grid.
+ * @instead "For ISO dates pasted whole or relative shorthand like `7d`, use a free-form `Input`." (https://vercel.com/geist/calendar)
+ * Ours: a time of day or a recurring schedule is its own field, not a calendar.
+ * @behaviour "Set `min` and `max` to the data window so users can’t pick outside the retention range." "Support arrow-key day navigation, `Shift` + arrow for week jumps, and `Page Up` / `Page Down` for month jumps." (https://vercel.com/geist/calendar)
+ * Ours: `min` and `max` are `minValue` and `maxValue`: a day outside the window cannot be picked and the month arrows stop at it. Up and Down move a week without `Shift`, Left and Right a day, Page Up and Page Down a month. `mode`, `selected` and `onSelect` are required: the grid always chooses and is controlled. The month's name sits left, the round previous and next buttons right, and the weekday letters start 42 px below the top; a day is a 32 px square centred in its column of a 256 px grid, 8 px between weeks and 15 px between the weekday letters and the first week. The first click starts a range, the second ends it. Monday first in Italian. Colour: the ends of a range are ink over a muted band, today is the one blue day (a solid info fill, unless selected), everything else is neutral, Saturday and Sunday are a step lighter than the weekdays and days of other months lighter still, and hover draws only a hairline edge. A calendar that opens from a trigger sits 8 px below it, 280 px wide with its own 12 px padding and no padding of the popover around it.
+ * @words "Default to the user’s locale and timezone; never silently render UTC for a US-Pacific viewer." (https://vercel.com/geist/calendar)
+ * Ours: dates are written in the reader's locale (*7 Oct – 13 Oct*, *7–13 ott*), never the ISO pair a URL stores.
+ * @access "Trap focus inside the popover so Tab cycles day cells and presets instead of the page behind it." "Announce range changes through `aria-live="polite"` so a screen reader hears `From Apr 1 to Apr 28` after the second click." (https://vercel.com/geist/calendar)
+ * Ours: a grid of day buttons, each named with its full date. Focus goes into the grid when it opens and back to its trigger when it closes. The selected days are marked as selected; the control that owns the grid announces the range.
  */
-function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, ...props }) {
+function Calendar({ className, classNames, showOutsideDays = true, captionLayout = "label", buttonVariant = "ghost", locale, formatters, components, disabled, maxValue, minValue, ...props }) {
     const defaultClassNames = getDefaultClassNames();
-    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, className: cn("group/calendar bg-background p-2 [--cell-radius:var(--radius-sm)] [--cell-size:var(--spacing-touch-target)] [@media(hover:hover)_and_(pointer:fine)]:[--cell-size:--spacing(7)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
+    const disabledDays = disabled === undefined ? [] : [disabled].flat();
+    if (minValue)
+        disabledDays.push({ before: minValue });
+    if (maxValue)
+        disabledDays.push({ after: maxValue });
+    return (_jsx(DayPicker, { showOutsideDays: showOutsideDays, disabled: disabledDays, startMonth: minValue, endMonth: maxValue, className: cn("group/calendar bg-background p-3 [--cell-radius:var(--radius-xs-plus)] [--cell-size:var(--spacing-touch-target)] [@media(hover:hover)_and_(pointer:fine)]:[--cell-size:--spacing(8)] in-data-[slot=card-content]:bg-transparent in-data-[slot=popover-content]:bg-transparent", String.raw `rtl:**:[.rdp-button\_next>svg]:rotate-180`, String.raw `rtl:**:[.rdp-button\_previous>svg]:rotate-180`, className), captionLayout: captionLayout, locale: locale, formatters: {
             formatMonthDropdown: (date) => date.toLocaleString(locale?.code, { month: "short" }),
             ...formatters,
         }, classNames: {
             root: cn("w-fit", defaultClassNames.root),
             months: cn("relative flex flex-col gap-4 md:flex-row", defaultClassNames.months),
-            month: cn("flex w-full flex-col gap-4", defaultClassNames.month),
-            nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-between gap-1", defaultClassNames.nav),
-            button_previous: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_previous),
-            button_next: cn(buttonVariants({ variant: buttonVariant }), "size-(--cell-size) p-0 select-none aria-disabled:opacity-50", defaultClassNames.button_next),
-            month_caption: cn("flex h-(--cell-size) w-full items-center justify-center px-(--cell-size)", defaultClassNames.month_caption),
+            month: cn("flex w-[max(16rem,calc(var(--cell-size)*7))] flex-col gap-2.5", defaultClassNames.month),
+            nav: cn("absolute inset-x-0 top-0 flex w-full items-center justify-end", defaultClassNames.nav),
+            button_previous: cn(buttonVariants({ variant: buttonVariant, size: "icon", shape: "circle" }), "size-(--cell-size) p-0 text-muted-foreground select-none hover:bg-transparent hover:text-foreground aria-disabled:opacity-50", defaultClassNames.button_previous),
+            button_next: cn(buttonVariants({ variant: buttonVariant, size: "icon", shape: "circle" }), "size-(--cell-size) p-0 text-muted-foreground select-none hover:bg-transparent hover:text-foreground aria-disabled:opacity-50", defaultClassNames.button_next),
+            month_caption: cn("flex h-(--cell-size) w-full items-center justify-start", defaultClassNames.month_caption),
             dropdowns: cn("flex h-(--cell-size) w-full items-center justify-center gap-1.5 text-sm font-medium", defaultClassNames.dropdowns),
             dropdown_root: cn("relative rounded-(--cell-radius)", defaultClassNames.dropdown_root),
             dropdown: cn("absolute inset-0 bg-popover opacity-0", defaultClassNames.dropdown),
@@ -40,52 +45,61 @@ function Calendar({ className, classNames, showOutsideDays = true, captionLayout
                 ? "text-sm"
                 : "flex items-center gap-1 rounded-(--cell-radius) text-sm [&>svg]:size-3.5 [&>svg]:text-muted-foreground", defaultClassNames.caption_label),
             month_grid: cn("w-full border-collapse", defaultClassNames.month_grid),
-            weekdays: cn("flex", defaultClassNames.weekdays),
-            weekday: cn("flex-1 rounded-(--cell-radius) text-label-sm font-normal text-muted-foreground select-none", defaultClassNames.weekday),
+            weekdays: cn("mb-1.75 flex", defaultClassNames.weekdays),
+            weekday: cn("flex-1 rounded-(--cell-radius) text-caption leading-4.5 font-normal text-muted-foreground select-none", defaultClassNames.weekday),
             week: cn("mt-2 flex w-full", defaultClassNames.week),
             week_number_header: cn("w-(--cell-size) select-none", defaultClassNames.week_number_header),
             week_number: cn("text-label-sm text-muted-foreground select-none", defaultClassNames.week_number),
-            day: cn("group/day relative aspect-square h-full w-full rounded-(--cell-radius) p-0 text-center select-none [&:last-child[data-selected=true]_button]:rounded-r-(--cell-radius)", props.showWeekNumber
-                ? "[&:nth-child(2)[data-selected=true]_button]:rounded-l-(--cell-radius)"
-                : "[&:first-child[data-selected=true]_button]:rounded-l-(--cell-radius)", defaultClassNames.day),
-            range_start: cn("relative isolate z-0 rounded-l-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:right-0 after:w-4 after:bg-muted", defaultClassNames.range_start),
-            range_middle: cn("rounded-none", defaultClassNames.range_middle),
-            range_end: cn("relative isolate z-0 rounded-r-(--cell-radius) bg-muted after:absolute after:inset-y-0 after:left-0 after:w-4 after:bg-muted", defaultClassNames.range_end),
-            today: cn("rounded-(--cell-radius) bg-muted text-foreground data-[selected=true]:rounded-none", defaultClassNames.today),
+            day: cn("group/day relative flex h-(--cell-size) flex-1 items-center justify-center p-0 text-center select-none [&:last-child[data-selected=true]]:rounded-r-(--cell-radius)", props.showWeekNumber
+                ? "[&:nth-child(2)[data-selected=true]]:rounded-l-(--cell-radius)"
+                : "[&:first-child[data-selected=true]]:rounded-l-(--cell-radius)", defaultClassNames.day),
+            range_start: cn("relative isolate z-0 after:absolute after:inset-y-0 after:start-1/2 after:end-0 after:bg-muted", defaultClassNames.range_start),
+            range_middle: cn("rounded-none bg-muted", defaultClassNames.range_middle),
+            range_end: cn("relative isolate z-0 before:absolute before:inset-y-0 before:start-0 before:end-1/2 before:bg-muted", defaultClassNames.range_end),
             outside: cn("text-muted-foreground aria-selected:text-muted-foreground", defaultClassNames.outside),
             disabled: cn("text-muted-foreground opacity-50", defaultClassNames.disabled),
             hidden: cn("invisible", defaultClassNames.hidden),
             ...classNames,
         }, components: {
-            Root: ({ className, rootRef, ...props }) => {
-                return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props });
-            },
-            Chevron: ({ className, orientation, ...props }) => {
-                if (orientation === "left") {
-                    return _jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props });
-                }
-                if (orientation === "right") {
-                    return _jsx(ChevronRightIcon, { className: cn("size-4", className), ...props });
-                }
-                return _jsx(ChevronDownIcon, { className: cn("size-4", className), ...props });
-            },
-            DayButton: ({ ...props }) => _jsx(CalendarDayButton, { locale: locale, ...props }),
-            WeekNumber: ({ children, ...props }) => {
-                return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
-            },
+            Root: CalendarRoot,
+            Chevron: CalendarChevron,
+            DayButton: CalendarDay,
+            WeekNumber: CalendarWeekNumber,
             ...components,
         }, ...props }));
 }
+// The parts the grid draws are module components, so a render of the calendar keeps its days
+// mounted: a part made anew on each render would remount the grid under the pointer.
+function CalendarRoot({ className, rootRef, ...props }) {
+    return _jsx("div", { "data-slot": "calendar", ref: rootRef, className: cn(className), ...props });
+}
+function CalendarChevron({ className, orientation, ...props }) {
+    if (orientation === "left") {
+        return _jsx(ChevronLeftIcon, { className: cn("size-4", className), ...props });
+    }
+    if (orientation === "right") {
+        return _jsx(ChevronRightIcon, { className: cn("size-4", className), ...props });
+    }
+    return _jsx(ChevronDownIcon, { className: cn("size-4", className), ...props });
+}
+function CalendarDay(props) {
+    const { dayPickerProps } = useDayPicker();
+    return _jsx(CalendarDayButton, { locale: dayPickerProps.locale, ...props });
+}
+function CalendarWeekNumber({ children, ...props }) {
+    return (_jsx("td", { ...props, children: _jsx("div", { className: "flex size-(--cell-size) items-center justify-center text-center", children: children }) }));
+}
 function CalendarDayButton({ className, day, modifiers, locale, ...props }) {
     const defaultClassNames = getDefaultClassNames();
     const ref = React.useRef(null);
+    const weekend = [0, 6].includes(day.date.getDay());
     React.useEffect(() => {
         if (modifiers.focused)
             ref.current?.focus();
     }, [modifiers.focused]);
-    return (_jsx(Button, { ref: ref, variant: "ghost", size: "icon", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected &&
+    return (_jsx("button", { ref: ref, type: "button", "data-day": day.date.toLocaleDateString(locale?.code), "data-selected-single": modifiers.selected &&
             !modifiers.range_start &&
             !modifiers.range_end &&
-            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, className: cn("relative isolate z-10 flex aspect-square size-auto w-full min-w-(--cell-size) flex-col gap-1 border-0 leading-none font-normal group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
+            !modifiers.range_middle, "data-range-start": modifiers.range_start, "data-range-end": modifiers.range_end, "data-range-middle": modifiers.range_middle, "data-today": modifiers.today && !modifiers.selected, "data-weekend": weekend && !modifiers.today && !modifiers.selected && !modifiers.outside, className: cn(buttonVariants({ variant: "ghost", size: "icon" }), "relative isolate z-10 flex size-(--cell-size) shrink-0 flex-col gap-1 border border-transparent leading-none font-normal hover:border-foreground/20 hover:bg-transparent data-[today=true]:bg-info data-[today=true]:text-info-foreground data-[today=true]:hover:bg-info data-[weekend=true]:text-foreground/80 group-data-[focused=true]/day:relative group-data-[focused=true]/day:z-10 data-[range-end=true]:rounded-(--cell-radius) data-[range-end=true]:rounded-r-(--cell-radius) data-[range-end=true]:bg-primary data-[range-end=true]:text-primary-foreground data-[range-middle=true]:rounded-none data-[range-middle=true]:bg-muted data-[range-middle=true]:text-foreground data-[range-start=true]:rounded-(--cell-radius) data-[range-start=true]:rounded-l-(--cell-radius) data-[range-start=true]:bg-primary data-[range-start=true]:text-primary-foreground data-[selected-single=true]:bg-primary data-[selected-single=true]:text-primary-foreground [&>span]:text-xs [&>span]:opacity-70", defaultClassNames.day, className), ...props }));
 }
 export { Calendar, CalendarDayButton };

package/dist/components/card-row.d.ts

@@ -1,5 +1,5 @@
 import { useRender } from "@base-ui/react/use-render";
-type CardRowColumns = 2 | 3 | 4 | "auto";
+type CardRowColumns = 2 | 3 | 4 | 5 | "auto";
 type CardRowFrom = "sm" | "md" | "lg" | "xl";
 /**
  * The row sibling cards sit in.
@@ -14,10 +14,18 @@ type CardRowFrom = "sm" | "md" | "lg" | "xl";
  * the default rhythm is wrong. Appearance stays with `Card`.
  *
  * @family Data
- * @when Two to four sibling cards side by side: the KPIs of an overview, a pair of charts.
- * @instead A list of records is `Item` or a table. A single card needs no row.
- * @behaviour One column below `from`, then `columns` columns; `auto` gives each card an equal
- * share. Each card fills its cell, so the bottom edge is even.
+ * @when Two to five sibling cards side by side: the KPIs of an overview, a pair of charts.
+ * @instead A list of records is `Item` or a table. A single card needs no row. Geist's ruled
+ * `Grid`, with visible guide lines, crosses and cell padding, is not built:
+ * "Use Grid for two-dimensional cell-and-guide layouts in marketing pages, docs landing pages, and feature breakdowns where the rule lines and cell borders are part of the design." (https://vercel.com/geist/grid)
+ * "For plain n-column responsive content (cards, lists), use Tailwind `grid grid-cols-*` utilities directly; Grid is overkill when guides aren’t visible." (https://vercel.com/geist/grid)
+ * Ours: this is that plain n-column case.
+ * @behaviour "Set `columns` and `rows` at all three breakpoints so cells reflow predictably between mobile, tablet, and desktop." (https://vercel.com/geist/grid)
+ * Ours: one column below `from`, then `columns` columns, 16 px apart, with no `rows`; `auto` gives
+ * each card an equal share, and `5` sets two by two with the fifth across, then three over two
+ * from `lg`, then all five in one row from `xl` (1280 px), as OpenRouter's Activity sets its five
+ * tiles, never with a hole beside the last card. Each card fills its cell, so the bottom edge is even. The row is
+ * neutral; it tints nothing.
  * @words None of its own.
  * @access A layout container; reading order is source order.
  */

package/dist/components/card-row.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"card-row.d.ts","sourceRoot":"","sources":["../../src/components/card-row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AACzC,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAkC7C;;;;;;;;;;;;;;;;;;;GAmBG;AACH,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,OAAW,EACX,IAAW,EACX,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,8FAgBA;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}
+{"version":3,"file":"card-row.d.ts","sourceRoot":"","sources":["../../src/components/card-row.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,SAAS,EAAE,MAAM,2BAA2B,CAAC;AAItD,KAAK,cAAc,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,GAAG,MAAM,CAAC;AAC7C,KAAK,WAAW,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAwC7C;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,iBAAS,OAAO,CAAC,EACf,SAAS,EACT,OAAW,EACX,IAAW,EACX,MAAM,EACN,GAAG,KAAK,EACT,EAAE,SAAS,CAAC,cAAc,CAAC,KAAK,CAAC,GAAG;IACnC,OAAO,CAAC,EAAE,cAAc,CAAC;IACzB,IAAI,CAAC,EAAE,WAAW,CAAC;CACpB,8FAgBA;AAED,OAAO,EAAE,OAAO,EAAE,KAAK,cAAc,EAAE,KAAK,WAAW,EAAE,CAAC"}

package/dist/components/card-row.js

@@ -3,33 +3,39 @@ import { useRender } from "@base-ui/react/use-render";
 import { cn } from "../lib/utils.js";
 /**
  * One column below `from`, then `columns` columns — `auto` giving each card an
- * equal share of the row however many there are. Written out so every class
- * string is literal and the Tailwind scanner can see it.
+ * equal share of the row however many there are. `5` steps up as the width allows:
+ * two by two with the fifth across from `from`, three over two from `lg` (the pair
+ * sharing the width of the three), and all five in one row from `xl`, 1280 px.
+ * Written out so every class string is literal and the Tailwind scanner can see it.
  */
 const columnClasses = {
     sm: {
         2: "sm:grid-cols-2",
         3: "sm:grid-cols-3",
         4: "sm:grid-cols-4",
-        auto: "sm:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+        5: "sm:grid-cols-2 sm:max-lg:[&>:nth-child(5)]:col-span-2 lg:grid-cols-6 lg:max-xl:[&>:nth-child(-n+3)]:col-span-2 lg:max-xl:[&>:nth-child(n+4)]:col-span-3 xl:grid-cols-5",
+        auto: "sm:auto-cols-fr sm:grid-flow-col",
     },
     md: {
         2: "md:grid-cols-2",
         3: "md:grid-cols-3",
         4: "md:grid-cols-4",
-        auto: "md:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+        5: "md:grid-cols-2 md:max-lg:[&>:nth-child(5)]:col-span-2 lg:grid-cols-6 lg:max-xl:[&>:nth-child(-n+3)]:col-span-2 lg:max-xl:[&>:nth-child(n+4)]:col-span-3 xl:grid-cols-5",
+        auto: "md:auto-cols-fr md:grid-flow-col",
     },
     lg: {
         2: "lg:grid-cols-2",
         3: "lg:grid-cols-3",
         4: "lg:grid-cols-4",
-        auto: "lg:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+        5: "lg:grid-cols-6 lg:max-xl:[&>:nth-child(-n+3)]:col-span-2 lg:max-xl:[&>:nth-child(n+4)]:col-span-3 xl:grid-cols-5",
+        auto: "lg:auto-cols-fr lg:grid-flow-col",
     },
     xl: {
         2: "xl:grid-cols-2",
         3: "xl:grid-cols-3",
         4: "xl:grid-cols-4",
-        auto: "xl:grid-cols-[repeat(auto-fit,minmax(0,1fr))]",
+        5: "xl:grid-cols-5",
+        auto: "xl:auto-cols-fr xl:grid-flow-col",
     },
 };
 /**
@@ -45,10 +51,18 @@ const columnClasses = {
  * the default rhythm is wrong. Appearance stays with `Card`.
  *
  * @family Data
- * @when Two to four sibling cards side by side: the KPIs of an overview, a pair of charts.
- * @instead A list of records is `Item` or a table. A single card needs no row.
- * @behaviour One column below `from`, then `columns` columns; `auto` gives each card an equal
- * share. Each card fills its cell, so the bottom edge is even.
+ * @when Two to five sibling cards side by side: the KPIs of an overview, a pair of charts.
+ * @instead A list of records is `Item` or a table. A single card needs no row. Geist's ruled
+ * `Grid`, with visible guide lines, crosses and cell padding, is not built:
+ * "Use Grid for two-dimensional cell-and-guide layouts in marketing pages, docs landing pages, and feature breakdowns where the rule lines and cell borders are part of the design." (https://vercel.com/geist/grid)
+ * "For plain n-column responsive content (cards, lists), use Tailwind `grid grid-cols-*` utilities directly; Grid is overkill when guides aren’t visible." (https://vercel.com/geist/grid)
+ * Ours: this is that plain n-column case.
+ * @behaviour "Set `columns` and `rows` at all three breakpoints so cells reflow predictably between mobile, tablet, and desktop." (https://vercel.com/geist/grid)
+ * Ours: one column below `from`, then `columns` columns, 16 px apart, with no `rows`; `auto` gives
+ * each card an equal share, and `5` sets two by two with the fifth across, then three over two
+ * from `lg`, then all five in one row from `xl` (1280 px), as OpenRouter's Activity sets its five
+ * tiles, never with a hole beside the last card. Each card fills its cell, so the bottom edge is even. The row is
+ * neutral; it tints nothing.
  * @words None of its own.
  * @access A layout container; reading order is source order.
  */