@windforge/ui 0.1.0

package/src/components/layout.tsx

@@ -0,0 +1,179 @@
+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'
+
+/**
+ * DETERMINISTIC LAYOUT PRIMITIVES — `Box` and `Stack`.
+ *
+ * Layout is a CLOSED set of intent-named, conventionally-named props, not free-form
+ * CSS. An AI (or a human) picks from a finite vocabulary — `direction="row"`,
+ * `gap="card"`, `padding="lg"`, `borderRadius="xl"` — and `cva` maps each choice to
+ * exactly one on-scale Tailwind class at build time. There is no path to an
+ * off-scale value like `padding-[13px]` or a random hex, so output is always
+ * on-system and reviewable.
+ *
+ * No JS runtime: thin wrappers that concatenate class strings — no `sx`-style
+ * computation at render.
+ *
+ * Spacing accepts the generic steps (none·xs·sm·md·lg·xl·2xl) AND the practical
+ * Windforge spacing tokens (nbsp·card·gutter·section·page).
+ *
+ *   <Box padding="lg" background="subtle" borderRadius="xl" border="default">…</Box>
+ *   <Stack direction="row" gap="card" align="center" justify="between">…</Stack>
+ *
+ * `asChild` makes either polymorphic (the replacement for MUI `component=`):
+ *   <Box asChild padding="md"><section/></Box>
+ */
+
+// NOTE: every class below is a complete literal string — required so Tailwind's
+// content scanner emits it. Do not build these with template strings.
+
+// ── shared surface vocabulary (padding + the box look) ──────────────────────────
+const surface = cva('', {
+  variants: {
+    padding: {
+      none: 'p-none', xs: 'p-xs', sm: 'p-sm', md: 'p-md', lg: 'p-lg', xl: 'p-xl', '2xl': 'p-2xl',
+      nbsp: 'p-nbsp', card: 'p-card', gutter: 'p-gutter', section: 'p-section', page: 'p-page',
+    },
+    paddingX: {
+      none: 'px-none', xs: 'px-xs', sm: 'px-sm', md: 'px-md', lg: 'px-lg', xl: 'px-xl', '2xl': 'px-2xl',
+      nbsp: 'px-nbsp', card: 'px-card', gutter: 'px-gutter', section: 'px-section', page: 'px-page',
+    },
+    paddingY: {
+      none: 'py-none', xs: 'py-xs', sm: 'py-sm', md: 'py-md', lg: 'py-lg', xl: 'py-xl', '2xl': 'py-2xl',
+      nbsp: 'py-nbsp', card: 'py-card', gutter: 'py-gutter', section: 'py-section', page: 'py-page',
+    },
+    background: {
+      none:    '',
+      surface: 'bg-surface',
+      subtle:  'bg-surface-subtle',
+      inset:   'bg-surface-inset',
+      inverse: 'bg-surface-inverse text-inverse',
+      brand:   'bg-brand-subtle',
+    },
+    border:       { none: '', default: 'border border-border', subtle: 'border border-subtle', strong: 'border border-strong' },
+    borderRadius: { none: 'rounded-none', sm: 'rounded-sm', md: 'rounded-md', lg: 'rounded-lg', xl: 'rounded-xl', '2xl': 'rounded-2xl', full: 'rounded-full' },
+    boxShadow:    { none: 'shadow-none', sm: 'shadow-sm', md: 'shadow-md', lg: 'shadow-lg', xl: 'shadow-xl' },
+    // Page-width constraint (absorbs the old Container). Pair with className="mx-auto" to center.
+    maxWidth:     { sm: 'max-w-2xl', md: 'max-w-4xl', lg: 'max-w-6xl', xl: 'max-w-7xl', prose: 'max-w-prose', full: 'max-w-none' },
+  },
+})
+
+type SurfaceProps = VariantProps<typeof surface>
+
+// ── flex vocabulary (Stack only) ────────────────────────────────────────────────
+const flex = cva('flex', {
+  variants: {
+    direction: { row: 'flex-row', column: 'flex-col' },
+    gap: {
+      none: 'gap-none', xs: 'gap-xs', sm: 'gap-sm', md: 'gap-md', lg: 'gap-lg', xl: 'gap-xl', '2xl': 'gap-2xl',
+      nbsp: 'gap-nbsp', card: 'gap-card', gutter: 'gap-gutter', section: 'gap-section', page: 'gap-page',
+    },
+    align:   { start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch', baseline: 'items-baseline' },
+    justify: { start: 'justify-start', center: 'justify-center', end: 'justify-end', between: 'justify-between', around: 'justify-around' },
+    wrap:    { true: 'flex-wrap', false: 'flex-nowrap' },
+  },
+  defaultVariants: { direction: 'column', gap: 'md' },
+})
+
+type FlexProps = VariantProps<typeof flex>
+
+// ── Box: a padded, optionally-surfaced container (the everyday <div>) ────────────
+export interface BoxProps extends React.HTMLAttributes<HTMLDivElement>, SurfaceProps {
+  asChild?: boolean
+}
+
+export const Box = React.forwardRef<HTMLDivElement, BoxProps>(
+  ({ className, asChild, padding, paddingX, paddingY, background, border, borderRadius, boxShadow, maxWidth, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div'
+    return (
+      <Comp
+        ref={ref}
+        className={cn(surface({ padding, paddingX, paddingY, background, border, borderRadius, boxShadow, maxWidth }), className)}
+        {...props}
+      />
+    )
+  },
+)
+Box.displayName = 'Box'
+
+// ── Stack: a flex Box — the deterministic way to arrange items ───────────────────
+export interface StackProps extends React.HTMLAttributes<HTMLDivElement>, FlexProps, SurfaceProps {
+  asChild?: boolean
+}
+
+export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
+  (
+    { className, asChild, direction, gap, align, justify, wrap,
+      padding, paddingX, paddingY, background, border, borderRadius, boxShadow, maxWidth, ...props },
+    ref,
+  ) => {
+    const Comp = asChild ? Slot : 'div'
+    return (
+      <Comp
+        ref={ref}
+        className={cn(
+          flex({ direction, gap, align, justify, wrap }),
+          surface({ padding, paddingX, paddingY, background, border, borderRadius, boxShadow, maxWidth }),
+          className,
+        )}
+        {...props}
+      />
+    )
+  },
+)
+Stack.displayName = 'Stack'
+
+// ── Grid: a closed-vocabulary CSS grid (responsive cols + on-scale gap) ──────────
+const grid = cva('grid', {
+  variants: {
+    cols: {
+      1: 'grid-cols-1', 2: 'grid-cols-2', 3: 'grid-cols-3', 4: 'grid-cols-4',
+      5: 'grid-cols-5', 6: 'grid-cols-6', 12: 'grid-cols-12',
+    },
+    // responsive breakpoint at md — the common "stack on mobile, grid on desktop"
+    mdCols: {
+      1: 'md:grid-cols-1', 2: 'md:grid-cols-2', 3: 'md:grid-cols-3', 4: 'md:grid-cols-4',
+      5: 'md:grid-cols-5', 6: 'md:grid-cols-6', 12: 'md:grid-cols-12',
+    },
+    gap: {
+      none: 'gap-none', xs: 'gap-xs', sm: 'gap-sm', md: 'gap-md', lg: 'gap-lg', xl: 'gap-xl', '2xl': 'gap-2xl',
+      nbsp: 'gap-nbsp', card: 'gap-card', gutter: 'gap-gutter', section: 'gap-section', page: 'gap-page',
+    },
+    align:   { start: 'items-start', center: 'items-center', end: 'items-end', stretch: 'items-stretch' },
+    justify: { start: 'justify-items-start', center: 'justify-items-center', end: 'justify-items-end', stretch: 'justify-items-stretch' },
+  },
+  defaultVariants: { cols: 1, gap: 'md' },
+})
+
+export interface GridProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof grid> {
+  asChild?: boolean
+}
+
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(
+  ({ className, asChild, cols, mdCols, gap, align, justify, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'div'
+    return <Comp ref={ref} className={cn(grid({ cols, mdCols, gap, align, justify }), className)} {...props} />
+  },
+)
+Grid.displayName = 'Grid'
+
+/**
+ * The machine-readable layout contract. An AI/registry reads this to know the
+ * exact allowed values for every layout prop — so generated layouts are picked
+ * from a closed set, never invented. Spacing mixes generic steps with the
+ * practical Windforge spacing tokens.
+ */
+export const layoutVocabulary = {
+  spacing:      ['none', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', 'nbsp', 'card', 'gutter', 'section', 'page'],
+  direction:    ['row', 'column'],
+  align:        ['start', 'center', 'end', 'stretch', 'baseline'],
+  justify:      ['start', 'center', 'end', 'between', 'around'],
+  background:   ['none', 'surface', 'subtle', 'inset', 'inverse', 'brand'],
+  border:       ['none', 'default', 'subtle', 'strong'],
+  borderRadius: ['none', 'sm', 'md', 'lg', 'xl', '2xl', 'full'],
+  boxShadow:    ['none', 'sm', 'md', 'lg', 'xl'],
+  maxWidth:     ['sm', 'md', 'lg', 'xl', 'prose', 'full'],
+  gridCols: [1, 2, 3, 4, 5, 6, 12],
+} as const

package/src/components/link.tsx

@@ -0,0 +1,37 @@
+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 { focusRingInset } from '../lib/recipes'
+
+/**
+ * Link — an inline anchor in the link color (blue). Use `asChild` to wrap a
+ * router link while keeping the styling:  <Link asChild><RouterLink to="…"/></Link>
+ */
+const link = cva(
+  'text-link underline-offset-2 hover:text-link-hover hover:underline rounded-sm ' +
+    'transition-colors ' + focusRingInset,
+  {
+    variants: {
+      underline: { hover: '', always: 'underline', none: 'no-underline hover:no-underline' },
+    },
+    defaultVariants: { underline: 'hover' },
+  },
+)
+
+export interface LinkProps
+  extends NoStyle<React.AnchorHTMLAttributes<HTMLAnchorElement>>,
+    VariantProps<typeof link> {
+  asChild?: boolean
+}
+
+export const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ asChild, underline, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a'
+    return <Comp ref={ref} className={cn(link({ underline }))} {...props} />
+  },
+)
+Link.displayName = 'Link'
+
+export { link as linkVariants }

package/src/components/modal.tsx

@@ -0,0 +1,67 @@
+import * as React from 'react'
+import * as DialogPrimitive from '@radix-ui/react-dialog'
+import { X } from 'lucide-react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { overlayBackdrop, dismissButton, focusRingInset } from '../lib/recipes'
+
+/**
+ * Modal — the low-level, fully composable overlay primitive (Radix Dialog under
+ * the hood). Compose freely: `Modal > ModalTrigger + ModalContent`. For the
+ * common title/description/actions case, reach for `Dialog`, the props-based
+ * convenience built on this — there are no header/title/footer sub-components.
+ */
+export const Modal = DialogPrimitive.Root
+export const ModalTrigger = DialogPrimitive.Trigger
+export const ModalClose = DialogPrimitive.Close
+export const ModalPortal = DialogPrimitive.Portal
+
+export const ModalOverlay = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Overlay>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>>
+>(({ ...props }, ref) => (
+  <DialogPrimitive.Overlay ref={ref} className={cn(overlayBackdrop)} {...props} />
+))
+ModalOverlay.displayName = DialogPrimitive.Overlay.displayName
+
+const modalContent = cva(
+  'fixed left-1/2 top-1/2 z-50 grid w-full -translate-x-1/2 -translate-y-1/2 gap-4 ' +
+    'rounded-2xl border border-border bg-surface p-6 shadow-xl animate-scale-in',
+  {
+    variants: {
+      size: { sm: 'max-w-sm', md: 'max-w-lg', lg: 'max-w-2xl', xl: 'max-w-4xl' },
+    },
+    defaultVariants: { size: 'md' },
+  },
+)
+
+export interface ModalContentProps
+  extends NoStyle<React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>>,
+    VariantProps<typeof modalContent> {
+  /** Hide the default corner close button. */
+  hideClose?: boolean
+}
+
+export const ModalContent = React.forwardRef<
+  React.ElementRef<typeof DialogPrimitive.Content>,
+  ModalContentProps
+>(({ children, size, hideClose, ...props }, ref) => (
+  <ModalPortal>
+    <ModalOverlay />
+    <DialogPrimitive.Content ref={ref} className={cn(modalContent({ size }))} {...props}>
+      {children}
+      {!hideClose && (
+        <DialogPrimitive.Close
+          className={cn(dismissButton, 'hover:bg-surface-inset focus:outline-none', focusRingInset)}
+          aria-label="Close"
+        >
+          <X className="h-4 w-4" />
+        </DialogPrimitive.Close>
+      )}
+    </DialogPrimitive.Content>
+  </ModalPortal>
+))
+ModalContent.displayName = DialogPrimitive.Content.displayName
+
+export { modalContent }

package/src/components/multi-select.tsx

@@ -0,0 +1,175 @@
+import * as React from 'react'
+import * as Popover from '@radix-ui/react-popover'
+import { Check, ChevronsUpDown, X } from 'lucide-react'
+import { cn } from '../lib/utils'
+import { floatingPanel, menuItem } from '../lib/recipes'
+
+/**
+ * MultiSelect — a searchable multi-value combobox. Selected values render as
+ * removable tags in the field; the dropdown filters as you type and toggles
+ * options with the keyboard (↑/↓ move, Enter toggles, Backspace removes the last
+ * tag on an empty query). Controlled via `value`/`onValueChange`. Shares the Radix
+ * popper and floating-panel recipe with Select/Autocomplete.
+ */
+export interface MultiSelectOption {
+  value: string
+  label: string
+}
+
+export interface MultiSelectProps {
+  options: MultiSelectOption[]
+  value: string[]
+  onValueChange: (value: string[]) => void
+  placeholder?: string
+  emptyText?: string
+  disabled?: boolean
+  invalid?: boolean
+  id?: string
+  'aria-describedby'?: string
+}
+
+export function MultiSelect({
+  options, value, onValueChange, placeholder = 'Select…', emptyText = 'No results',
+  disabled, invalid, id, 'aria-describedby': ariaDescribedBy,
+}: MultiSelectProps) {
+  const [open, setOpen] = React.useState(false)
+  const [query, setQuery] = React.useState('')
+  const [highlight, setHighlight] = React.useState(0)
+  const inputRef = React.useRef<HTMLInputElement>(null)
+  const anchorRef = React.useRef<HTMLDivElement>(null)
+  const listId = React.useId()
+
+  const selectedOptions = value
+    .map((v) => options.find((o) => o.value === v))
+    .filter((o): o is MultiSelectOption => !!o)
+  const filtered = React.useMemo(
+    () => (query ? options.filter((o) => o.label.toLowerCase().includes(query.toLowerCase())) : options),
+    [query, options],
+  )
+
+  React.useEffect(() => {
+    setHighlight((c) => Math.min(c, Math.max(0, filtered.length - 1)))
+  }, [filtered.length])
+
+  const toggle = (v: string) =>
+    onValueChange(value.includes(v) ? value.filter((x) => x !== v) : [...value, v])
+
+  const onKeyDown = (event: React.KeyboardEvent) => {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      if (!open) setOpen(true)
+      setHighlight((c) => Math.min(c + 1, filtered.length - 1))
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      setHighlight((c) => Math.max(c - 1, 0))
+    } else if (event.key === 'Enter' && open && filtered[highlight]) {
+      event.preventDefault()
+      toggle(filtered[highlight].value)
+    } else if (event.key === 'Backspace' && !query && value.length) {
+      onValueChange(value.slice(0, -1))
+    } else if (event.key === 'Escape') {
+      setOpen(false)
+    }
+  }
+
+  const optionId = (i: number) => `${listId}-opt-${i}`
+
+  return (
+    <Popover.Root open={open} onOpenChange={setOpen}>
+      <Popover.Anchor asChild>
+        <div
+          ref={anchorRef}
+          className={cn(
+            'flex min-h-10 w-full flex-wrap items-center gap-1.5 rounded-lg border border-strong bg-surface px-2 py-1.5 text-sm text-primary',
+            'focus-within:border-focus focus-within:ring-2 focus-within:ring-ring',
+            disabled && 'pointer-events-none opacity-50',
+            invalid && 'border-error focus-within:border-error',
+          )}
+          onMouseDown={(e) => {
+            // Clicking the field (not a tag's ✕) focuses the input and opens.
+            if (e.target === e.currentTarget) inputRef.current?.focus()
+          }}
+        >
+          {selectedOptions.map((o) => (
+            <span
+              key={o.value}
+              className="inline-flex items-center gap-1 rounded-full border border-transparent bg-surface-inset px-2 py-0.5 text-sm text-primary"
+            >
+              {o.label}
+              <button
+                type="button"
+                aria-label={`Remove ${o.label}`}
+                onMouseDown={(e) => { e.preventDefault(); e.stopPropagation() }}
+                onClick={() => toggle(o.value)}
+                className="rounded-full opacity-70 transition-opacity hover:opacity-100 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring [&_svg]:size-3"
+              >
+                <X />
+              </button>
+            </span>
+          ))}
+          <input
+            ref={inputRef}
+            id={id}
+            role="combobox"
+            aria-expanded={open}
+            aria-controls={listId}
+            aria-autocomplete="list"
+            aria-invalid={invalid || undefined}
+            aria-describedby={ariaDescribedBy}
+            aria-activedescendant={open && filtered[highlight] ? optionId(highlight) : undefined}
+            disabled={disabled}
+            value={query}
+            placeholder={selectedOptions.length ? '' : placeholder}
+            onChange={(e) => { setQuery(e.target.value); setHighlight(0); setOpen(true) }}
+            onFocus={() => setOpen(true)}
+            onKeyDown={onKeyDown}
+            className="min-w-16 flex-1 bg-transparent placeholder:text-tertiary outline-none"
+          />
+          <ChevronsUpDown className="size-4 shrink-0 text-tertiary" />
+        </div>
+      </Popover.Anchor>
+
+      <Popover.Portal>
+        <Popover.Content
+          role="listbox"
+          aria-multiselectable
+          id={listId}
+          align="start"
+          sideOffset={4}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+          onCloseAutoFocus={(e) => e.preventDefault()}
+          // Clicking/typing in the field itself isn't "outside" — only a real
+          // outside interaction should dismiss. Without this the open-on-focus and
+          // the click's pointer-down race, so the list flashes open then closes.
+          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 = value.includes(option.value)
+              return (
+                <div
+                  key={option.value}
+                  id={optionId(index)}
+                  role="option"
+                  aria-selected={isSelected}
+                  onMouseEnter={() => setHighlight(index)}
+                  onMouseDown={(e) => { e.preventDefault(); toggle(option.value) }}
+                  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/pagination.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react'
+import { ChevronLeft, ChevronRight } from 'lucide-react'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { focusRingInset } from '../lib/recipes'
+
+/**
+ * Pagination — controlled page navigation. `page` is 1-based; `count` is the
+ * total number of pages. Renders first/last, a window of siblings around the
+ * current page, and ellipses. Emits `onPageChange`.
+ */
+export interface PaginationProps extends NoStyle<Omit<React.HTMLAttributes<HTMLElement>, 'onChange'>> {
+  page: number
+  count: number
+  onPageChange: (page: number) => void
+  siblingCount?: number
+}
+
+const DOTS = 'dots'
+
+function range(start: number, end: number) {
+  return Array.from({ length: end - start + 1 }, (_, i) => start + i)
+}
+
+function usePageItems(page: number, count: number, siblingCount: number): (number | typeof DOTS)[] {
+  return React.useMemo(() => {
+    const total = siblingCount * 2 + 5 // first, last, current, 2 dots
+    if (count <= total) return range(1, count)
+    const left = Math.max(page - siblingCount, 1)
+    const right = Math.min(page + siblingCount, count)
+    const showLeftDots = left > 2
+    const showRightDots = right < count - 1
+    if (!showLeftDots && showRightDots) return [...range(1, 3 + siblingCount * 2), DOTS, count]
+    if (showLeftDots && !showRightDots) return [1, DOTS, ...range(count - (2 + siblingCount * 2), count)]
+    return [1, DOTS, ...range(left, right), DOTS, count]
+  }, [page, count, siblingCount])
+}
+
+const cell =
+  'inline-flex h-9 min-w-9 items-center justify-center rounded-md px-2 text-sm font-medium transition-colors ' +
+  'disabled:opacity-40 disabled:pointer-events-none [&_svg]:size-4 ' + focusRingInset
+
+export function Pagination({ page, count, onPageChange, siblingCount = 1, ...props }: PaginationProps) {
+  const pageItems = usePageItems(page, count, siblingCount)
+  const goToPage = (targetPage: number) => onPageChange(Math.min(count, Math.max(1, targetPage)))
+
+  return (
+    <nav role="navigation" aria-label="Pagination" className={cn('flex items-center gap-1')} {...props}>
+      <button type="button" className={cn(cell, 'text-secondary hover:bg-surface-inset hover:text-primary')} onClick={() => goToPage(page - 1)} disabled={page <= 1} aria-label="Previous page">
+        <ChevronLeft />
+      </button>
+      {pageItems.map((pageItem, index) =>
+        pageItem === DOTS ? (
+          <span key={`dots-${index}`} className="inline-flex h-9 min-w-9 items-center justify-center text-tertiary">…</span>
+        ) : (
+          <button
+            key={pageItem}
+            type="button"
+            aria-current={pageItem === page ? 'page' : undefined}
+            onClick={() => goToPage(pageItem)}
+            className={cn(cell, pageItem === page ? 'bg-surface-inverse text-inverse' : 'text-secondary hover:bg-surface-inset hover:text-primary')}
+          >
+            {pageItem}
+          </button>
+        ),
+      )}
+      <button type="button" className={cn(cell, 'text-secondary hover:bg-surface-inset hover:text-primary')} onClick={() => goToPage(page + 1)} disabled={page >= count} aria-label="Next page">
+        <ChevronRight />
+      </button>
+    </nav>
+  )
+}

package/src/components/popover.tsx

@@ -0,0 +1,25 @@
+import * as React from 'react'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { floatingPanel } from '../lib/recipes'
+
+export const Popover = PopoverPrimitive.Root
+export const PopoverTrigger = PopoverPrimitive.Trigger
+export const PopoverAnchor = PopoverPrimitive.Anchor
+
+export const PopoverContent = React.forwardRef<
+  React.ElementRef<typeof PopoverPrimitive.Content>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof PopoverPrimitive.Content>>
+>(({ align = 'center', sideOffset = 6, ...props }, ref) => (
+  <PopoverPrimitive.Portal>
+    <PopoverPrimitive.Content
+      ref={ref}
+      align={align}
+      sideOffset={sideOffset}
+      className={cn(floatingPanel, 'w-72 rounded-xl p-4 shadow-lg animate-scale-in')}
+      {...props}
+    />
+  </PopoverPrimitive.Portal>
+))
+PopoverContent.displayName = PopoverPrimitive.Content.displayName

package/src/components/progress.tsx

@@ -0,0 +1,31 @@
+import * as React from 'react'
+import * as ProgressPrimitive from '@radix-ui/react-progress'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+
+export const Progress = React.forwardRef<
+  React.ElementRef<typeof ProgressPrimitive.Root>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof ProgressPrimitive.Root>> & {
+    value?: number
+    /** Looping animation for work of unknown duration; ignores `value`. */
+    indeterminate?: boolean
+  }
+>(({ value = 0, indeterminate, ...props }, ref) => (
+  <ProgressPrimitive.Root
+    ref={ref}
+    value={indeterminate ? null : value}
+    className={cn('relative h-2 w-full overflow-hidden rounded-full bg-surface-track')}
+    {...props}
+  >
+    <ProgressPrimitive.Indicator
+      className={cn(
+        'h-full bg-surface-inverse',
+        indeterminate
+          ? 'w-2/5 rounded-full animate-progress-indeterminate'
+          : 'w-full flex-1 transition-transform duration-slow',
+      )}
+      style={indeterminate ? undefined : { transform: `translateX(-${100 - (value || 0)}%)` }}
+    />
+  </ProgressPrimitive.Root>
+))
+Progress.displayName = ProgressPrimitive.Root.displayName

package/src/components/radio-group.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react'
+import * as RadioGroupPrimitive from '@radix-ui/react-radio-group'
+import { Circle } from 'lucide-react'
+import { cn } from '../lib/utils'
+import type { NoStyle } from '../lib/types'
+import { focusRing } from '../lib/recipes'
+
+export const RadioGroup = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Root>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Root>>
+>(({ ...props }, ref) => (
+  <RadioGroupPrimitive.Root ref={ref} className={cn('grid gap-2.5')} {...props} />
+))
+RadioGroup.displayName = RadioGroupPrimitive.Root.displayName
+
+export const RadioGroupItem = React.forwardRef<
+  React.ElementRef<typeof RadioGroupPrimitive.Item>,
+  NoStyle<React.ComponentPropsWithoutRef<typeof RadioGroupPrimitive.Item>>
+>(({ ...props }, ref) => (
+  <RadioGroupPrimitive.Item
+    ref={ref}
+    className={cn(
+      'aspect-square h-5 w-5 rounded-full border border-strong text-primary transition-colors',
+      focusRing,
+      'disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:border-strong',
+    )}
+    {...props}
+  >
+    <RadioGroupPrimitive.Indicator className="flex items-center justify-center">
+      <Circle className="h-2.5 w-2.5 fill-primary text-primary" />
+    </RadioGroupPrimitive.Indicator>
+  </RadioGroupPrimitive.Item>
+))
+RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName