@sableui/react 0.6.2 → 0.7.1

package/dist/components/button/button.meta.js

@@ -0,0 +1,302 @@
+// src/components/button/button.meta.ts
+var buttonMeta = {
+  name: "Button",
+  summary: "Pill-shaped action primitive (theme-driven radius via --button-radius, defaults to full). Neutral tiers (primary/secondary/ghost/outline), plus destructive and link, and three on-color tiers (on-color/on-color-outline/on-color-ghost) that paint with the surrounding ink so a button reads on any tone or brand fill. Optional loading state shows a spinner and disables the button.",
+  keywords: [
+    "button",
+    "action",
+    "cta",
+    "submit",
+    "save",
+    "cancel",
+    "destructive",
+    "loading",
+    "link",
+    "icon button",
+    "on color",
+    "inverse",
+    "band",
+    "brand fill",
+    "tone fill",
+    "bleed",
+    "optical alignment",
+    "align label to edge",
+    "negative margin",
+    "view all"
+  ],
+  usage: {
+    description: "Use Button when the user commits an action, submits a form, opens UI, or confirms a decision. Use the visual tier to communicate priority: one primary action per local decision area, then secondary, ghost, outline, or link for lower-emphasis choices.",
+    bestPractices: [
+      {
+        guidance: "do",
+        description: "Use a single primary button in a view or dense panel so the action hierarchy stays obvious."
+      },
+      {
+        guidance: "do",
+        description: 'Write labels as actions, such as "Save changes" or "Delete draft", instead of vague labels like "OK".'
+      },
+      {
+        guidance: "do",
+        description: "Use loading with loadingLabel for async work so the action cannot double-fire and the state is announced."
+      },
+      {
+        guidance: "do",
+        description: "Put icons in iconStart / iconEnd rather than as children, so the button applies its optical padding. Start icons say what the action is (plus, share); end icons say where it goes (chevron-right, external)."
+      },
+      {
+        guidance: "do",
+        description: `Set bleed on a ghost or link button that sits at the start or end of a row, so its LABEL lines up with the content edge the row shares ("View all" over a grid, "Add task" under a list, "Resend code" at a card footer's end). The box moves out by exactly its own padding; the hit area and hover fill stay full size and run past the edge. SectionHeader, PageHeader (back and actions) and CardAction already do this for their outermost ghost/link child \u2014 don't add it there, and use bleed="none" to opt one out.`
+      },
+      {
+        guidance: "dont",
+        description: "Pull a ghost button onto an edge with -ms-3 / -me-3 classNames. That number is one size's padding: it is wrong at xs, md and cta, wrong on a side carrying an icon, and wrong once a preset retunes the spacing. bleed reads the button's own padding var. And don't bleed a filled or outlined button \u2014 its visible edge is what aligns, so bleed is a no-op there."
+      },
+      {
+        guidance: "dont",
+        description: "Use destructive for reversible or low-risk actions; reserve it for operations with real loss or danger."
+      },
+      {
+        guidance: "dont",
+        description: "Use a button for plain navigation. Compose with render={<a />} when the element should behave like a link."
+      },
+      {
+        guidance: "dont",
+        description: "Use secondary on a tinted surface \u2014 inside a Note, a soft Banner, or any tone fill. `secondary` is a near-background surface token (in some themes within 2% of the page), so on a tint it reads as a hole punched in the fill rather than as a control sitting on it. On a soft tint use outline or ghost; on a full-strength fill use the on-color tiers."
+      },
+      {
+        guidance: "do",
+        description: `On a coloured fill \u2014 a solid Banner, a bg-tone-* or bg-primary band, an inverse (bg-foreground) section, a brand panel \u2014 use variant="on-color" for the main action and on-color-outline / on-color-ghost for the rest. They paint with the band's inherited ink (currentColor), so the surface must set its paired ink (text-tone-info-foreground, text-primary-foreground, text-background\u2026), which it already should. Name the fill once on the surface, e.g. [--on-color-fill:var(--tone-info)], and the solid button's label takes the fill colour; unnamed, it falls back to black or white against the ink. Both clear 4.5:1 in every shipped theme and mode.`
+      },
+      {
+        guidance: "dont",
+        description: "Use the on-color tiers on the page, a Card, a Note, or a soft tint \u2014 there the ink is the page foreground and the normal tiers already fit. And don't restyle a normal variant with bg-*/text-* classNames to make it read on a band; that hard-codes colours per theme and skips the contrast and focus handling on-color carries."
+      }
+    ],
+    anatomy: [
+      {
+        name: "Container",
+        required: true,
+        description: "The rounded hit target that carries the visual tier, focus ring, disabled state, and loading affordance."
+      },
+      {
+        name: "Label",
+        required: true,
+        description: "Visible action text and the default accessible name. Icon-only buttons still need an aria-label."
+      },
+      {
+        name: "Leading icon",
+        required: false,
+        description: "An optional semantic Icon that reinforces the label without replacing it."
+      },
+      {
+        name: "Spinner",
+        required: false,
+        description: "Displayed during loading and paired with aria-busy plus disabled activation."
+      }
+    ]
+  },
+  related: {
+    components: ["Menu", "OverflowMenu", "Icon", "Banner"],
+    patterns: ["SettingsPage", "AuthPage", "DashboardPage"]
+  },
+  status: "stable",
+  props: [
+    {
+      name: "variant",
+      type: '"primary" | "secondary" | "ghost" | "outline" | "destructive" | "link" | "floating" | "field" | "on-color" | "on-color-outline" | "on-color-ghost"',
+      default: '"primary"',
+      description: "Visual emphasis tier. One primary per screen. The on-color tiers are for buttons ON a coloured fill: they paint with the inherited text colour (the fill's ink) \u2014 on-color is solid (ink background, fill-coloured label via the optional --on-color-fill var, else black/white), on-color-outline and on-color-ghost are transparent with an ink label. Never use them on page or card surfaces. floating is for a control that sits OVER content (carousel arrows, a marquee pause, a jump-to-latest over a conversation): its own edge, lift and translucent popover fill, so it reads on arbitrary content beneath. field is for a button docked in a workspace panel among xs fields: the inset panel-field fill and the field's corner, so a picker trigger or an add action reads as one of the row's controls; pair it with size xs or icon-xs."
+    },
+    {
+      name: "size",
+      type: '"xs" | "sm" | "md" | "cta" | "icon" | "icon-sm" | "icon-xs"',
+      default: '"md"',
+      description: "Reads the density ladder, so every value differs by register: page 28/32/40/44, workspace 24/28/32/36. xs and icon-xs were added in 0.31.0 for the workspace control floor and are the sizes tool chrome wants; md is the default everywhere. icon/icon-sm/icon-xs are square."
+    },
+    {
+      name: "render",
+      type: "ReactElement | (props, state) => ReactElement",
+      description: "Compose with another element/component through the Base UI render prop."
+    },
+    {
+      name: "loading",
+      type: "boolean",
+      default: "false",
+      description: "Disable the button and show a leading Spinner while an action is in flight. Sets aria-busy; a native button is disabled, a render element (e.g. an <a>) gets aria-disabled."
+    },
+    {
+      name: "badge",
+      type: "ReactNode",
+      description: "A corner indicator (usually <NotificationBadge dot /> or a count) overlaid on the top-end corner of the glyph. For icon-only sizes; never hand-position a badge over a Button with absolute offsets."
+    },
+    {
+      name: "loadingLabel",
+      type: "ReactNode",
+      description: "Optional text shown in place of children while loading."
+    },
+    {
+      name: "iconStart",
+      type: "ReactNode",
+      description: "Icon before the label. The button takes one 2px step off its start padding so icon + label read as centred. Replaced by the spinner while loading."
+    },
+    {
+      name: "iconEnd",
+      type: "ReactNode",
+      description: "Icon after the label (disclosure, external link, next). Same optical correction on the end side."
+    },
+    {
+      name: "bleed",
+      type: '"start" | "end" | "both" | "none"',
+      description: `Optical alignment for a borderless button (ghost, link, on-color-ghost): a negative inline margin of exactly its own padding on that side \u2014 --button-px, or the icon side's optical padding when an icon sits there; an icon-only size bleeds by its inset to the glyph \u2014 so the label (or glyph) lands on the content edge. Hit area and hover/focus fill keep their full size. Logical sides, so it mirrors in RTL. A no-op on variants with a visible edge (primary, secondary, outline, destructive, floating, field, on-color, on-color-outline): a filled button aligns its edge, not its label. Unset, a borderless button renders data-bleed="auto" and SectionHeader, PageHeader and CardAction bleed it when it is their outermost child; none opts out.`
+    }
+  ],
+  variants: {
+    variant: [
+      "primary",
+      "secondary",
+      "ghost",
+      "outline",
+      "destructive",
+      "link",
+      "floating",
+      "field",
+      "on-color",
+      "on-color-outline",
+      "on-color-ghost"
+    ],
+    size: ["xs", "sm", "md", "cta", "icon", "icon-sm", "icon-xs"]
+  },
+  tokensUsed: [
+    "primary",
+    "primary-foreground",
+    "secondary",
+    "secondary-foreground",
+    "accent",
+    "accent-foreground",
+    "input",
+    "destructive",
+    "destructive-foreground",
+    "ring",
+    "panel-field",
+    "panel-field-hover",
+    "panel-foreground"
+  ],
+  motion: [
+    {
+      slot: "arrival",
+      recipe: "none",
+      part: "Root",
+      why: "A button belongs to the layout it ships in. Whatever staged that region owns the entrance; a button that fades in on its own is a button that is briefly un-clickable for no stated reason."
+    },
+    {
+      slot: "response",
+      recipe: "motion-interactive",
+      part: "Root",
+      why: "Hover, focus ring and disabled fade all ease on one declaration. This is the reference case for the whole recipe: it lists scale and translate alongside the colours specifically so motion-press can add a transform without a second, conflicting transition-property."
+    },
+    {
+      slot: "response",
+      recipe: "motion-press",
+      part: "Root",
+      why: "The 0.97 settle on pointer-down is the only confirmation the press registered before the action's own result arrives \u2014 which on a slow network is the difference between waiting and clicking again. It skips disabled elements, so a dead button stays visibly dead."
+    },
+    {
+      slot: "transition",
+      recipe: "none",
+      part: "Root",
+      why: "A button has no state of its own to move between. A control that toggles is a Switch or a Toggle, and those carry the transition."
+    },
+    {
+      slot: "activity",
+      recipe: "none",
+      part: "Root",
+      why: "Pending work is passed in via `loading`, which renders a Spinner \u2014 the activity motion lives there rather than being duplicated here."
+    }
+  ],
+  a11y: [
+    "Renders a native <button> by default (keyboard + role free).",
+    "Focus-visible ring uses the --ring token at 50% opacity.",
+    "Use render={<a/>} for link semantics rather than onClick navigation.",
+    "On-color tiers replace the --ring focus ring with one drawn in the band's ink past a transparent 2px gap, so focus stays visible on any fill (ink-on-fill is the theme's own tested pair).",
+    "On-color contrast is measured in button.test.tsx for every shipped theme and mode on each tone, primary, destructive, success, highlight and inverse fill: solid label at rest and hover, and outline/ghost label on the hover wash, all at least 4.5:1.",
+    "bleed moves only the box, never the hit target: the full padded area stays clickable and the focus ring still draws around the whole button, past the content edge.",
+    "loading sets aria-busy and disables activation (disabled on a native button, aria-disabled on a render element) so the action can't double-fire."
+  ],
+  examples: [
+    { label: "Primary", code: "<Button>Collect</Button>" },
+    {
+      label: "Secondary + ghost",
+      code: '<Row gap={1}><Button variant="secondary">Cancel</Button><Button variant="ghost">Skip</Button></Row>'
+    },
+    {
+      label: "Loading",
+      code: '<Button loading loadingLabel="Saving\u2026">Save</Button>'
+    },
+    {
+      label: "Main action with options",
+      code: '<Row gap={2}><Button onClick={deploy}>Deploy</Button><Menu><MenuTrigger render={<Button variant="secondary" size="icon" aria-label="Deploy options"><Icon name="chevron-down" /></Button>} /><MenuContent align="end"><MenuItem>Deploy to preview</MenuItem><MenuItem>Deploy to production</MenuItem></MenuContent></Menu></Row>'
+    },
+    {
+      label: "Copy to clipboard",
+      code: 'const { copy, copied } = useCopy(address)\n<Button variant="ghost" size="icon-sm" aria-label="Copy address" onClick={copy}><Icon name={copied ? "check" : "copy"} /></Button>'
+    },
+    {
+      label: "As link",
+      code: '<Button render={<a href="/explore" />}>Explore</Button>'
+    },
+    {
+      label: "Primary + secondary decision row",
+      code: '<Row gap={1}><Button>Publish</Button><Button variant="secondary">Save draft</Button><Button variant="ghost">Cancel</Button></Row>'
+    },
+    {
+      label: "Destructive with confirmation copy",
+      code: '<Row gap={1}><Button variant="secondary">Cancel</Button><Button variant="destructive">Delete edition</Button></Row>'
+    },
+    {
+      label: "Leading icon",
+      code: '<Button iconStart={<Icon name="plus" />}>New project</Button>'
+    },
+    {
+      label: "Trailing icon",
+      code: '<Button variant="secondary" iconEnd={<Icon name="chevron-right" />}>Continue</Button>'
+    },
+    {
+      label: "Both icons",
+      code: '<Button variant="outline" iconStart={<Icon name="file" />} iconEnd={<Icon name="chevron-down" />}>Export</Button>'
+    },
+    {
+      label: "Icon-only",
+      code: '<Button size="icon" variant="ghost" aria-label="Share"><Icon name="share" /></Button>'
+    },
+    {
+      label: "Optically aligned to the row's edges",
+      code: `<Stack gap={1.5}>
+  <Row justify="between">
+    <span className="text-title-md">Tasks</span>
+    <Button variant="ghost" size="sm" bleed="end">View all</Button>
+  </Row>
+  <span className="text-body-sm text-muted-foreground">Ship the release notes</span>
+  <Button variant="ghost" size="sm" bleed="start" iconStart={<Icon name="plus" />} className="self-start">Add task</Button>
+</Stack>`
+    },
+    {
+      label: "Icon button with an unread badge",
+      code: '<Button size="icon" variant="ghost" aria-label="Notifications" badge={<NotificationBadge dot />}><Icon name="bell" /></Button>'
+    },
+    {
+      label: "Field button in a panel row",
+      code: '<PanelSection title="Text">\n  <PropertyRow label="Font">\n    <Button variant="field" size="xs" className="w-full justify-between" iconEnd={<Icon name="chevron-down" />}>Figtree</Button>\n  </PropertyRow>\n</PanelSection>'
+    },
+    {
+      label: "On a coloured band",
+      code: '<div className="flex gap-3 bg-tone-info p-6 text-tone-info-foreground [--on-color-fill:var(--tone-info)]"><Button variant="on-color">Join the beta</Button><Button variant="on-color-outline">Read the notes</Button></div>'
+    },
+    {
+      label: "Action in a solid Banner",
+      code: '<Banner tone="warning" appearance="solid" action={<Button variant="on-color" size="sm">Reconnect</Button>}>Wallet connection paused.</Banner>'
+    }
+  ]
+};
+export {
+  buttonMeta
+};

package/dist/components/button/button.variants.js

@@ -0,0 +1,137 @@
+// src/components/button/button.variants.ts
+import { cva } from "class-variance-authority";
+var ON_COLOR_FOCUS = "focus-visible:ring-current focus-visible:ring-offset-2 focus-visible:ring-offset-transparent";
+var buttonVariants = cva(
+  "inline-flex items-center justify-center gap-(--control-gap) whitespace-nowrap rounded-[var(--button-radius,9999px)] motion-interactive motion-press focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:shrink-0 [&_svg]:size-(--button-icon)",
+  {
+    variants: {
+      variant: {
+        /*
+         * Primary's hover reads `--primary-hover` — another OPTIONAL,
+         * mode-dependent var outside the `_contract.ts` token set, with the
+         * previous expression as its fallback. `hover:bg-primary/90` compiles
+         * to exactly the `color-mix(in oklab, …, transparent)` written below,
+         * so a theme that says nothing renders byte-identical to before.
+         *
+         * Why a hook rather than a constant: darkening on hover is a house
+         * convention, not a law. A dark-first reference commonly does the
+         * opposite — its brand fill BRIGHTENS under the pointer,
+         * because on a near-black ground a darker fill reads as disabled
+         * rather than as pressed. A theme sets `--primary-hover: <colour>` once
+         * (both modes if they differ) and the whole primary tier follows.
+         */
+        primary: "bg-primary text-primary-foreground hover:bg-[var(--primary-hover,color-mix(in_oklab,var(--primary)_90%,transparent))]",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
+        outline: "border border-input bg-transparent text-foreground hover:bg-accent hover:text-accent-foreground",
+        destructive: "bg-destructive text-destructive-foreground hover:bg-destructive/90",
+        link: "bg-transparent text-foreground underline-offset-4 hover:underline",
+        /*
+         * A control that floats OVER content — a carousel's arrows over its
+         * slides, a marquee's pause over its strip, a scroller's "jump to
+         * latest" over the conversation. It needs its own edge and lift
+         * because the content under it is arbitrary; the page tiers assume
+         * the page behind them. One look for all of them: three components
+         * restyling secondary/ghost three different ways was the alternative.
+         */
+        floating: "border border-border-floating bg-popover/90 text-popover-foreground shadow-md backdrop-blur hover:bg-popover",
+        /*
+         * A button docked in a panel among compact fields — a picker that
+         * opens a popover, "Add fill", a swatch's trigger. It wears the xs
+         * field rung's shell (lib/field-shell → FIELD_SHELL_XS): the inset
+         * `panel-field` fill, no border, the field's corner rather than the
+         * button's pill, so it reads as one of the row's controls. Secondary
+         * or ghost there read as page buttons dropped into tool chrome.
+         */
+        field: "rounded-[var(--panel-field-radius,var(--radius-xs))] bg-panel-field text-panel-foreground hover:bg-panel-field-hover",
+        /*
+         * On-colour tiers — for a button sitting ON a coloured fill (a tone
+         * band, a solid Banner, a brand panel, a dark section in a light
+         * page). Every tier above paints fixed page tokens, so on a fill
+         * they read as holes (secondary), vanish (ghost/outline ink is
+         * `foreground`, not the band's ink) or clash (primary).
+         *
+         * These derive everything from the SURFACE'S INK instead: the
+         * button keeps the colour it inherits (`currentColor` = the band's
+         * `text-*-foreground`) and paints with it, so one variant works on
+         * any fill, in any theme and mode, with no per-theme token.
+         *
+         * - `on-color`: solid. Background = the ink; label = the fill.
+         *   The button cannot see its parent's background, so the fill is
+         *   read from `--on-color-fill` when the surface names it (then
+         *   label/background contrast is exactly the theme's own tested
+         *   ink-on-fill pair, inverted). Unnamed, the label falls back to
+         *   black or white derived from the ink's OKLCH lightness — the
+         *   0.565 split is where both sides clear 4.5:1 against the ink.
+         *   Hover pushes the ink a quarter-step further from the fill (toward
+         *   white if the ink is light, black if dark) — never toward the
+         *   fill, because the themes' tone pairs sit close to 4.5:1 and any
+         *   fade toward the fill (the `/90` other tiers use) drops below it.
+         *   The label colour is set on the CHILDREN (`*:`), never on the
+         *   button: `bg-current` must keep reading the inherited ink, and
+         *   `trimLabel` wraps every text child in a span, so text, icons
+         *   and the loading spinner are all direct children.
+         * - `on-color-outline`: transparent, ink label, ink hairline.
+         * - `on-color-ghost`: transparent, ink label.
+         *   Both hover by washing the fill 12% toward the ink's OPPOSITE (a
+         *   shade under a light ink, a tint under a dark one). An ink-coloured
+         *   wash — the obvious `bg-current/10` — pulls the fill toward the
+         *   label and measured below 4.5:1 on twelve shipped pairs.
+         *
+         * Focus: `--ring` is tuned for page surfaces and can disappear on
+         * a fill, so these ring in the ink, offset by a transparent gap
+         * that shows the fill through — the ink-on-fill pair again.
+         */
+        // design-lint-disable-next-line inline-color -- derives a contrast ink FROM currentColor (relative colour syntax); no literal colour is introduced
+        "on-color": `${ON_COLOR_FOCUS} bg-current *:text-[color:var(--on-color-fill,oklch(from_currentColor_calc((0.565_-_l)*1000)_0_0))] hover:bg-[color:color-mix(in_oklab,currentColor_75%,oklch(from_currentColor_calc((l_-_0.565)*1000)_0_0))]`,
+        // design-lint-disable-next-line inline-color -- the hover wash is derived FROM currentColor (relative colour syntax); no literal colour
+        "on-color-outline": `${ON_COLOR_FOCUS} border border-current/50 bg-transparent hover:border-current hover:bg-[color:oklch(from_currentColor_calc((0.565_-_l)*1000)_0_0_/_0.12)]`,
+        // design-lint-disable-next-line inline-color -- the hover wash is derived FROM currentColor (relative colour syntax); no literal colour
+        "on-color-ghost": `${ON_COLOR_FOCUS} bg-transparent hover:bg-[color:oklch(from_currentColor_calc((0.565_-_l)*1000)_0_0_/_0.12)]`
+      },
+      /**
+       * Heights read the density ladder (`--control-*`) rather than hardcoding
+       * px, which is what makes the two registers work: a
+       * `data-density="compact"` scope redefines the vars and every control
+       * follows, with no selector overriding a height after the fact. See
+       * styles.css → Density and themes/_contract.ts → DENSITY_TOKENS.
+       *
+       * Comfortable values are exactly the previous literals (sm 32, md 40,
+       * cta 44, icon 40, icon-sm 32), so the page register is unchanged.
+       * `xs` / `icon-xs` are new and exist for the workspace floor — 24px icon
+       * buttons in a 240px panel, which is what Paper and Figma both run.
+       */
+      size: {
+        /*
+         * --button-icon: icons render a step LARGER than the label. A
+         * 24-grid glyph shrunk to label size (14px) thins its 1.5px strokes
+         * to ~0.9px against a ~1.7px type stem — the icon reads faint and
+         * small beside its word. One size per step keeps glyph and label at
+         * matching weight; icon-only sizes run a step larger again.
+         */
+        /*
+         * --button-px: the inline padding, named so `bleed` can pull the box
+         * outward by exactly this much and land the label on the edge. The
+         * padding READS it, so the two cannot drift; to retune a button's
+         * padding set the var (`[--button-px:--spacing(2)]`), not px-*.
+         * Icon-only sizes have no padding — the glyph is centred in a
+         * square — so theirs is the inset from the box edge to the glyph's.
+         */
+        xs: "h-(--control-xs) px-(--button-px) [--button-px:--spacing(2)] [--button-icon:0.875rem]",
+        sm: "h-(--control-sm) px-(--button-px) [--button-px:--spacing(3)] [--button-icon:1rem]",
+        md: "h-(--control-md) px-(--button-px) [--button-px:--spacing(4)] [--button-icon:1.125rem]",
+        cta: "h-(--control-cta) px-(--button-px) [--button-px:--spacing(5)] [--button-icon:1.25rem]",
+        icon: "h-(--control-md) w-(--control-md) [--button-icon:1.25rem] [--button-px:calc((var(--control-md)-var(--button-icon))/2)]",
+        "icon-sm": "h-(--control-sm) w-(--control-sm) [--button-icon:1.125rem] [--button-px:calc((var(--control-sm)-var(--button-icon))/2)]",
+        "icon-xs": "h-(--control-xs) w-(--control-xs) p-0 [--button-icon:1rem] [--button-px:calc((var(--control-xs)-var(--button-icon))/2)]"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "md"
+    }
+  }
+);
+export {
+  buttonVariants
+};

package/dist/components/button/index.js

@@ -0,0 +1,9 @@
+// src/components/button/index.ts
+import { Button } from "./button.js";
+import { buttonVariants } from "./button.variants.js";
+import { buttonMeta } from "./button.meta.js";
+export {
+  Button,
+  buttonMeta,
+  buttonVariants
+};

package/dist/components/calendar/calendar.js

@@ -0,0 +1,89 @@
+"use client";
+
+// src/components/calendar/calendar.tsx
+import { Icon } from "../../icon/index.js";
+import { cn } from "../../lib/cn.js";
+import { buttonVariants } from "../button/button.variants.js";
+import {
+  DayPicker
+} from "react-day-picker";
+import { jsx } from "react/jsx-runtime";
+function CalendarChevron({ orientation }) {
+  return /* @__PURE__ */ jsx(
+    Icon,
+    {
+      name: orientation === "left" ? "chevron-left" : "chevron-right",
+      className: "text-sm"
+    }
+  );
+}
+function Calendar({
+  className,
+  classNames,
+  showOutsideDays = true,
+  components,
+  bare = false,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    DayPicker,
+    {
+      "data-slot": "calendar",
+      showOutsideDays,
+      className: cn(
+        // relative: the nav is absolutely positioned (react-day-picker v9
+        // renders it inside `months`, not inside each month), and with no
+        // positioned ancestor of our own the chevrons escaped to whatever
+        // the host page had positioned — top of the page, in the docs.
+        "relative inline-block",
+        !bare && "rounded-lg border border-border bg-card p-3 text-card-foreground",
+        className
+      ),
+      classNames: {
+        months: "relative flex flex-col gap-4 sm:flex-row",
+        month: "relative flex flex-col gap-4",
+        nav: "absolute inset-x-0 top-0 z-10 flex items-center justify-between px-1",
+        // The month arrows are Sable's ghost icon button — same height ladder,
+        // radius (--button-radius), hover and focus ring — not a lookalike.
+        button_previous: buttonVariants({ variant: "ghost", size: "icon-sm" }),
+        button_next: buttonVariants({ variant: "ghost", size: "icon-sm" }),
+        month_caption: "relative flex h-(--control-sm) items-center justify-center px-(--control-sm)",
+        caption_label: "text-title-sm",
+        month_grid: "w-full border-collapse",
+        weekdays: "flex",
+        weekday: "flex size-9 items-center justify-center text-caption text-muted-foreground",
+        week: "mt-1 flex w-full",
+        day: "p-0 text-center",
+        day_button: "inline-flex size-9 items-center justify-center rounded-md text-body-sm motion-interactive outline-none hover:bg-accent hover:text-accent-foreground focus-visible:ring-2 focus-visible:ring-ring",
+        // Range fill lives on the CELL so it forms one continuous bar; only the
+        // outer ends are rounded. The selected (primary) endpoint buttons sit on
+        // top — their rounded corners reveal the accent fill, connecting them to
+        // the middle instead of leaving a card-colored gap.
+        range_start: "rounded-s-md bg-accent",
+        // `selected` also lands on every middle day, so its primary fill/text
+        // competes with ours at equal specificity (and Tailwind's alphabetical
+        // utility order lets `text-primary-foreground` win). Force the in-range
+        // button to stay transparent with accent-foreground text so it always
+        // wins — otherwise the numbers render near-invisible (primary-on-accent).
+        range_middle: "rounded-none bg-accent [&>button]:rounded-none [&>button]:bg-transparent! [&>button]:text-accent-foreground! [&>button]:hover:bg-transparent! [&>button]:hover:text-accent-foreground!",
+        range_end: "rounded-e-md bg-accent",
+        selected: "[&>button]:bg-primary [&>button]:text-primary-foreground [&>button]:hover:bg-primary [&>button]:hover:text-primary-foreground",
+        // Today is a dot under the number, in the button's own ink — never a
+        // ring, which is what keyboard focus draws and would be mistaken for it.
+        today: "[&>button]:relative [&>button]:after:absolute [&>button]:after:bottom-1 [&>button]:after:size-1 [&>button]:after:rounded-full [&>button]:after:bg-current",
+        // Muted ink alone (4.5:1+): these are live, clickable days. At 50%
+        // opacity they measured 2.2:1 and looked exactly like `disabled`.
+        outside: "[&>button]:text-muted-foreground",
+        disabled: "[&>button]:pointer-events-none [&>button]:text-muted-foreground [&>button]:opacity-50",
+        hidden: "invisible",
+        ...classNames
+      },
+      components: { Chevron: CalendarChevron, ...components },
+      ...props
+    }
+  );
+}
+Calendar.displayName = "Calendar";
+export {
+  Calendar
+};