@windforge/ui 0.1.0

package/src/components/accordion.tsx

@@ -0,0 +1,91 @@
+import * as React from 'react'
+import * as AccordionPrimitive from '@radix-ui/react-accordion'
+import { ChevronDown } from 'lucide-react'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { focusRingInset } from '../lib/recipes'
+
+/**
+ * Accordion — pass an `items` array for the common case (the component renders
+ * each item, trigger, and panel), or compose `AccordionItem`/`AccordionTrigger`/
+ * `AccordionContent` by hand. `type`/`collapsible`/`defaultValue` pass through
+ * to the underlying Radix root.
+ *
+ *   <Accordion type="single" collapsible items={[
+ *     { value: 'a', trigger: 'What is Windforge?', content: <p>…</p> },
+ *   ]} />
+ */
+export interface AccordionItemData {
+  value: string
+  trigger: React.ReactNode
+  content: React.ReactNode
+  disabled?: boolean
+}
+
+// Keep the raw Radix union (single | multiple) and intersect — intersection
+// distributes over the union, so the `type`/`collapsible` correlation survives.
+export type AccordionProps = React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Root> & {
+  /** Declarative items. Omit to compose the primitives as children instead. */
+  items?: AccordionItemData[]
+}
+
+export const Accordion = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Root>,
+  AccordionProps
+>(({ items, children, ...props }, ref) => {
+  if (!items) return <AccordionPrimitive.Root ref={ref} {...props}>{children}</AccordionPrimitive.Root>
+  return (
+    <AccordionPrimitive.Root ref={ref} {...props}>
+      {items.map((item) => (
+        <AccordionItem key={item.value} value={item.value} disabled={item.disabled}>
+          <AccordionTrigger>{item.trigger}</AccordionTrigger>
+          <AccordionContent>{item.content}</AccordionContent>
+        </AccordionItem>
+      ))}
+    </AccordionPrimitive.Root>
+  )
+})
+Accordion.displayName = 'Accordion'
+
+export const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>>
+>(({ ...props }, ref) => (
+  <AccordionPrimitive.Item ref={ref} className={cn('border-b border-border')} {...props} />
+))
+AccordionItem.displayName = 'AccordionItem'
+
+export const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>>
+>(({ children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        'flex flex-1 items-center justify-between py-4 text-sm font-medium text-primary transition-all',
+        'rounded-sm hover:text-link', focusRingInset,
+        '[&[data-state=open]>svg]:rotate-180',
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-secondary transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+export const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>>
+>(({ children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm text-primary data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn('pb-4 pt-0')}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName

package/src/components/alert.tsx

@@ -0,0 +1,58 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+
+// Text stays the normal foreground in every variant — only the icon carries the
+// status hue. The fill is a faint status tint (the `-subtle` token), paired with
+// a status-colored outline in both modes so the alert reads as a distinct
+// surface — light over white, dark over the near-black background.
+const alertVariants = cva(
+  'relative w-full rounded-xl border p-4 flex gap-3 text-primary [&_svg]:size-5 [&_svg]:shrink-0 [&_svg]:mt-0.5',
+  {
+    variants: {
+      variant: {
+        neutral: 'border-border bg-surface [&_svg]:text-secondary',
+        info:    'border-info bg-info-subtle [&_svg]:text-info',
+        success: 'border-success bg-success-subtle [&_svg]:text-success',
+        warning: 'border-warning bg-warning-subtle [&_svg]:text-warning',
+        error:   'border-error bg-error-subtle [&_svg]:text-error',
+      },
+    },
+    defaultVariants: { variant: 'neutral' },
+  },
+)
+
+/**
+ * Alert — an inline status message. Pass `title`, `description`, an optional
+ * leading `icon`, and optional `actions`; there are no sub-components to
+ * assemble. For a fully custom body, use `children` instead of `description`.
+ *
+ *   <Alert variant="info" icon={<Info />} title="Heads up"
+ *          description="Your trial ends in 5 days." />
+ */
+export interface AlertProps
+  extends Omit<NoStyle<React.HTMLAttributes<HTMLDivElement>>, 'title'>,
+    VariantProps<typeof alertVariants> {
+  title?: React.ReactNode
+  description?: React.ReactNode
+  /** Leading status icon (a lucide element). Inherits the variant hue. */
+  icon?: React.ReactNode
+  /** Trailing actions — typically buttons or links. */
+  actions?: React.ReactNode
+}
+
+export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
+  ({ variant, title, description, icon, actions, children, ...props }, ref) => (
+    <div ref={ref} role="alert" className={cn(alertVariants({ variant }))} {...props}>
+      {icon}
+      <div className="min-w-0 flex-1">
+        {title && <h5 className={cn('mb-0.5 font-semibold leading-snug')}>{title}</h5>}
+        {description && <div className={cn('text-sm text-primary')}>{description}</div>}
+        {children}
+        {actions && <div className="mt-3 flex flex-wrap items-center gap-3">{actions}</div>}
+      </div>
+    </div>
+  ),
+)
+Alert.displayName = 'Alert'

package/src/components/autocomplete.tsx

@@ -0,0 +1,174 @@
+import * as React from 'react'
+import * as Popover from '@radix-ui/react-popover'
+import { Check, ChevronsUpDown } from 'lucide-react'
+import { cn } from '../lib/utils'
+import { floatingPanel, menuItem } from '../lib/recipes'
+
+/**
+ * Autocomplete — a searchable single-select combobox. Type to filter; arrow keys
+ * move the highlight, Enter selects, Escape closes. Controlled via
+ * `value`/`onValueChange`. Positioning/portalling come from the shared Radix
+ * popper (same engine as Select/Tooltip/Popover); the combobox logic and
+ * `listbox`/`option` ARIA are ours.
+ */
+export interface AutocompleteOption {
+  value: string
+  label: string
+}
+export interface AutocompleteProps {
+  options: AutocompleteOption[]
+  value?: string | null
+  onValueChange?: (value: string | null) => void
+  placeholder?: string
+  emptyText?: string
+  disabled?: boolean
+  id?: string
+  /** Error state — red field outline + aria-invalid. Usually set by FormField. */
+  invalid?: boolean
+  'aria-describedby'?: string
+}
+
+export function Autocomplete({
+  options, value, onValueChange, placeholder = 'Search…', emptyText = 'No results', disabled, id,
+  invalid, 'aria-describedby': ariaDescribedBy,
+}: AutocompleteProps) {
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+  const [highlight, setHighlight] = React.useState(0)
+  const anchorRef = React.useRef<HTMLDivElement>(null)
+  const listId = React.useId()
+
+  const selected = options.find((option) => option.value === value) ?? null
+  // When closed, the field shows the selected label; when open, the live query.
+  const display = open ? query : selected?.label ?? ''
+  const filtered = React.useMemo(
+    () =>
+      open && query
+        ? options.filter((option) => option.label.toLowerCase().includes(query.toLowerCase()))
+        : options,
+    [open, query, options],
+  )
+  const optionId = (index: number) => `${listId}-opt-${index}`
+
+  // Keep the highlight in range when the filtered set shrinks, so Enter never
+  // selects a stale index and the highlighted row stays valid.
+  React.useEffect(() => {
+    setHighlight((current) => Math.min(current, Math.max(0, filtered.length - 1)))
+  }, [filtered.length])
+
+  const choose = (opt: AutocompleteOption) => {
+    onValueChange?.(opt.value)
+    setQuery('')
+    setOpen(false)
+  }
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      if (!open) setOpen(true)
+      setHighlight((current) => Math.min(current + 1, filtered.length - 1))
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      setHighlight((current) => Math.max(current - 1, 0))
+    } else if (event.key === 'Enter') {
+      if (open && filtered[highlight]) {
+        event.preventDefault()
+        choose(filtered[highlight])
+      }
+    } else if (event.key === 'Escape') {
+      setOpen(false)
+    }
+  }
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Anchor asChild>
+        <div
+          ref={anchorRef}
+          className={cn(
+            'flex h-10 items-center gap-2 rounded-lg border border-strong bg-surface px-3 text-sm text-primary',
+            'focus-within:border-focus focus-within:ring-2 focus-within:ring-ring',
+            disabled && 'opacity-50 pointer-events-none',
+            invalid && 'border-error focus-within:border-error',
+          )}
+        >
+          <input
+            id={id}
+            role="combobox"
+            aria-expanded={open}
+            aria-controls={listId}
+            aria-invalid={invalid || undefined}
+            aria-describedby={ariaDescribedBy}
+            aria-autocomplete="list"
+            aria-activedescendant={open && filtered[highlight] ? optionId(highlight) : undefined}
+            disabled={disabled}
+            value={display}
+            placeholder={placeholder}
+            onChange={(event) => {
+              setQuery(event.target.value)
+              setHighlight(0)
+              setOpen(true)
+            }}
+            onFocus={() => setOpen(true)}
+            onKeyDown={onKeyDown}
+            className="w-full bg-transparent placeholder:text-tertiary outline-none"
+          />
+          <ChevronsUpDown className="size-4 shrink-0 text-tertiary" />
+        </div>
+      </Popover.Anchor>
+
+      <Popover.Portal>
+        <Popover.Content
+          // Override Radix's default role="dialog" — this is a combobox listbox.
+          role="listbox"
+          id={listId}
+          align="start"
+          sideOffset={4}
+          // Keep focus on the input (it's the combobox); don't let the popover grab it.
+          onOpenAutoFocus={(event) => event.preventDefault()}
+          onCloseAutoFocus={(event) => event.preventDefault()}
+          // Clicking/focusing the field itself isn't "outside" — only real outside
+          // interaction should dismiss.
+          onInteractOutside={(event) => {
+            const target = event.detail.originalEvent.target as Node | null
+            if (target && anchorRef.current?.contains(target)) event.preventDefault()
+          }}
+          className={cn(
+            floatingPanel,
+            'max-h-60 w-[var(--radix-popover-trigger-width)] overflow-auto p-1 shadow-lg animate-scale-in',
+          )}
+        >
+          {filtered.length === 0 ? (
+            <div className="px-2 py-1.5 text-sm text-tertiary">{emptyText}</div>
+          ) : (
+            filtered.map((option, index) => {
+              const isSelected = option.value === value
+              return (
+                <div
+                  key={option.value}
+                  id={optionId(index)}
+                  role="option"
+                  aria-selected={isSelected}
+                  onMouseEnter={() => setHighlight(index)}
+                  // preventDefault keeps focus on the input through the click.
+                  onMouseDown={(event) => {
+                    event.preventDefault()
+                    choose(option)
+                  }}
+                  className={cn(
+                    menuItem,
+                    'gap-2 px-2 py-1.5',
+                    index === highlight ? 'bg-surface-inset text-primary' : 'text-secondary',
+                  )}
+                >
+                  <Check className={cn('size-4 shrink-0', isSelected ? 'opacity-100 text-primary' : 'opacity-0')} />
+                  {option.label}
+                </div>
+              )
+            })
+          )}
+        </Popover.Content>
+      </Popover.Portal>
+    </Popover.Root>
+  )
+}

package/src/components/avatar.tsx

@@ -0,0 +1,60 @@
+import * as React from 'react'
+import * as AvatarPrimitive from '@radix-ui/react-avatar'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+
+/**
+ * Avatar — a circular image or initials fallback. `size` is a closed scale
+ * (sm·md·lg·xl); the fallback's text scales with it automatically.
+ */
+const avatar = cva('relative flex shrink-0 overflow-hidden rounded-full', {
+  variants: {
+    size: {
+      sm: 'h-8 w-8',
+      md: 'h-10 w-10',
+      lg: 'h-12 w-12',
+      xl: 'h-16 w-16',
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+type AvatarSize = NonNullable<VariantProps<typeof avatar>['size']>
+const FALLBACK_TEXT: Record<AvatarSize, string> = {
+  sm: 'text-sm', md: 'text-sm', lg: 'text-base', xl: 'text-lg',
+}
+const AvatarSizeContext = React.createContext<AvatarSize>('md')
+
+export const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>> & VariantProps<typeof avatar>
+>(({ size, ...props }, ref) => (
+  <AvatarSizeContext.Provider value={size ?? 'md'}>
+    <AvatarPrimitive.Root ref={ref} className={cn(avatar({ size }))} {...props} />
+  </AvatarSizeContext.Provider>
+))
+Avatar.displayName = AvatarPrimitive.Root.displayName
+
+export const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>>
+>(({ ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full object-cover')} {...props} />
+))
+AvatarImage.displayName = AvatarPrimitive.Image.displayName
+
+export const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>>
+>(({ ...props }, ref) => {
+  const size = React.useContext(AvatarSizeContext)
+  return (
+    <AvatarPrimitive.Fallback
+      ref={ref}
+      className={cn('flex h-full w-full items-center justify-center rounded-full bg-surface-inset font-medium text-primary', FALLBACK_TEXT[size])}
+      {...props}
+    />
+  )
+})
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName

package/src/components/badge.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+
+const badgeVariants = cva(
+  'inline-flex items-center gap-1 rounded-lg border font-medium transition-colors [&_svg]:size-3',
+  {
+    variants: {
+      variant: {
+        brand:   'border-transparent bg-brand text-contrast',
+        subtle:  'border-transparent bg-brand-subtle text-brand',
+        neutral: 'border-border bg-surface-subtle text-secondary',
+        outline: 'border-strong text-primary',
+        success: 'border-transparent bg-success-subtle text-primary',
+        warning: 'border-transparent bg-warning-subtle text-primary',
+        error:   'border-transparent bg-error-subtle text-primary',
+        info:    'border-transparent bg-info-subtle text-primary',
+      },
+      size: {
+        sm: 'px-2 py-0.5 text-sm',
+        md: 'px-2.5 py-0.5 text-sm',
+      },
+    },
+    defaultVariants: { variant: 'neutral', size: 'md' },
+  },
+)
+
+export interface BadgeProps
+  extends NoStyle<React.HTMLAttributes<HTMLSpanElement>>,
+    VariantProps<typeof badgeVariants> {}
+
+export function Badge({ variant, size, ...props }: BadgeProps) {
+  return <span className={cn(badgeVariants({ variant, size }))} {...props} />
+}
+
+export { badgeVariants }

package/src/components/breadcrumb.tsx

@@ -0,0 +1,62 @@
+import * as React from 'react'
+import { ChevronRight } from 'lucide-react'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { Text } from './text'
+
+/**
+ * Breadcrumb — the path to the current page. Pass an `items` array; the last
+ * item renders as the (non-link) current page, the rest as links. `label` is a
+ * ReactNode, so a crumb can carry an icon. Override `separator` to change the
+ * glyph between crumbs.
+ *
+ *   <Breadcrumb items={[
+ *     { label: 'Home', href: '/' },
+ *     { label: 'Projects', href: '/projects' },
+ *     { label: 'Windforge' },
+ *   ]} />
+ */
+export interface BreadcrumbItemData {
+  label: React.ReactNode
+  /** Link target. Omit on the final crumb (the current page). */
+  href?: string
+}
+
+export interface BreadcrumbProps extends NoStyle<React.ComponentPropsWithoutRef<'nav'>> {
+  items: BreadcrumbItemData[]
+  /** Separator between crumbs; defaults to a chevron. */
+  separator?: React.ReactNode
+}
+
+export const Breadcrumb = React.forwardRef<HTMLElement, BreadcrumbProps>(
+  ({ items, separator, ...props }, ref) => (
+    <nav ref={ref} aria-label="breadcrumb" {...props}>
+      <ol className={cn('flex flex-wrap items-center gap-1.5 text-sm text-secondary')}>
+        {items.map((item, index) => {
+          const isLast = index === items.length - 1
+          return (
+            <React.Fragment key={index}>
+              <li className={cn('inline-flex items-center gap-1.5')}>
+                {isLast || item.href == null ? (
+                  <Text span size="sm" weight="medium" role="link" aria-disabled="true" aria-current="page">
+                    {item.label}
+                  </Text>
+                ) : (
+                  <a href={item.href} className={cn('transition-colors hover:text-link cursor-pointer')}>
+                    {item.label}
+                  </a>
+                )}
+              </li>
+              {!isLast && (
+                <li role="presentation" aria-hidden="true" className={cn('[&_svg]:size-3.5 text-tertiary')}>
+                  {separator ?? <ChevronRight />}
+                </li>
+              )}
+            </React.Fragment>
+          )
+        })}
+      </ol>
+    </nav>
+  ),
+)
+Breadcrumb.displayName = 'Breadcrumb'

package/src/components/button-group.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+
+/**
+ * ButtonGroup — joins a row of Buttons into one segmented control: shared edges,
+ * single outer radius, collapsed seams. Put `<Button>`s (any variant) inside.
+ */
+export const ButtonGroup = React.forwardRef<HTMLDivElement, NoStyle<React.HTMLAttributes<HTMLDivElement>>>(
+  ({ ...props }, ref) => (
+    <div
+      ref={ref}
+      role="group"
+      className={cn(
+        'inline-flex isolate',
+        '[&>*]:rounded-none [&>*:first-child]:rounded-l-lg [&>*:last-child]:rounded-r-lg',
+        '[&>*:not(:first-child)]:-ml-px hover:[&>*]:z-10 focus-visible:[&>*]:z-10',
+      )}
+      {...props}
+    />
+  ),
+)
+ButtonGroup.displayName = 'ButtonGroup'

package/src/components/button.tsx

@@ -0,0 +1,53 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { focusRing } from '../lib/recipes'
+
+/**
+ * Button — emphasis comes from a three-tier hierarchy (primary / secondary /
+ * tertiary), never from hue. `destructive` is the one semantic exception.
+ * Every colour is a token; nothing here is a raw value.
+ */
+const buttonVariants = cva(
+  'inline-flex items-center justify-center gap-nbsp whitespace-nowrap rounded-lg font-medium ' +
+    'transition-colors duration-normal ' + focusRing + ' ' +
+    'disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+  {
+    variants: {
+      variant: {
+        primary:     'bg-brand text-contrast hover:bg-brand-hover active:bg-brand-active shadow-xs',
+        secondary:   'border-[length:var(--wf-border-width-control)] border-strong bg-surface text-primary hover:bg-surface-subtle active:bg-surface-inset',
+        tertiary:    'text-primary hover:bg-surface-inset active:bg-surface-inset',
+        link:        'text-link underline-offset-4 hover:underline hover:text-link-hover',
+        destructive: 'border-[length:var(--wf-border-width-control)] border-error bg-surface text-error hover:bg-error-subtle active:bg-error-muted',
+      },
+      size: {
+        sm:   'h-8 px-3 text-sm',
+        md:   'h-10 px-4 text-sm',
+        lg:   'h-12 px-6 text-base',
+        icon: 'h-10 w-10',
+      },
+    },
+    defaultVariants: { variant: 'primary', size: 'md' },
+  },
+)
+
+export interface ButtonProps
+  extends NoStyle<React.ButtonHTMLAttributes<HTMLButtonElement>>,
+    VariantProps<typeof buttonVariants> {
+  asChild?: boolean
+}
+
+export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+  ({ variant, size, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'button'
+    return (
+      <Comp ref={ref} className={cn(buttonVariants({ variant, size }))} {...props} />
+    )
+  },
+)
+Button.displayName = 'Button'
+
+export { buttonVariants }

package/src/components/calendar.tsx

@@ -0,0 +1,61 @@
+import * as React from 'react'
+import { DayPicker } from 'react-day-picker'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '../lib/utils'
+import { focusRingInset } from '../lib/recipes'
+
+/**
+ * Calendar — the date grid (react-day-picker), styled entirely from tokens (no
+ * vendor CSS imported). Use it directly for inline pickers and ranges, or via the
+ * DatePicker (which pairs it with a Popover + field). Pass any react-day-picker
+ * prop — `mode="single" | "range" | "multiple"`, `selected`, `onSelect`, etc.
+ */
+export type CalendarProps = React.ComponentProps<typeof DayPicker>
+
+const navButton = cn(
+  'inline-flex h-7 w-7 items-center justify-center rounded-md border border-strong bg-surface text-primary',
+  'transition-colors hover:bg-surface-subtle disabled:opacity-40 disabled:pointer-events-none',
+  focusRingInset,
+)
+
+export function Calendar({ showOutsideDays = true, classNames, ...props }: CalendarProps) {
+  return (
+    <DayPicker
+      showOutsideDays={showOutsideDays}
+      className="p-3"
+      classNames={{
+        months: 'flex flex-col gap-4',
+        month: 'flex flex-col gap-3',
+        month_caption: 'relative flex h-7 items-center justify-center',
+        caption_label: 'text-sm font-medium text-primary',
+        nav: 'absolute inset-x-0 flex items-center justify-between',
+        button_previous: navButton,
+        button_next: navButton,
+        month_grid: 'w-full border-collapse',
+        weekdays: 'flex',
+        weekday: 'w-9 text-sm font-normal text-tertiary',
+        week: 'mt-1 flex w-full',
+        day: 'relative h-9 w-9 p-0 text-center text-sm text-primary',
+        day_button: cn(
+          'inline-flex h-9 w-9 items-center justify-center rounded-md transition-colors',
+          'hover:bg-surface-inset', focusRingInset,
+        ),
+        today: 'font-semibold underline underline-offset-4',
+        selected: '[&_button]:bg-surface-inverse [&_button]:text-inverse [&_button:hover]:bg-surface-inverse',
+        outside: 'text-disabled',
+        disabled: 'text-disabled opacity-50',
+        range_start: 'rounded-l-md bg-surface-inset [&_button]:bg-surface-inverse [&_button]:text-inverse',
+        range_end: 'rounded-r-md bg-surface-inset [&_button]:bg-surface-inverse [&_button]:text-inverse',
+        range_middle: 'rounded-none bg-surface-inset [&_button]:bg-transparent [&_button]:text-primary',
+        hidden: 'invisible',
+        ...classNames,
+      }}
+      components={{
+        Chevron: ({ orientation }) =>
+          orientation === 'left' ? <ChevronLeft className="size-4" /> : <ChevronRight className="size-4" />,
+      }}
+      {...props}
+    />
+  )
+}
+Calendar.displayName = 'Calendar'