@glyphui/ui 0.2.0 → 0.4.0

package/src/components/password-input/password-input.tsx

@@ -0,0 +1,127 @@
+import { useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { Input, type InputProps } from '../input/input'
+import { passwordInputStyles } from './password-input.styles'
+
+export type PasswordStrength = 'weak' | 'fair' | 'strong'
+
+/**
+ * A quick strength estimate from length and character variety. A hint for users,
+ * not a security check: enforce real rules on the server.
+ */
+export function passwordStrength(password: string): { score: number; strength: PasswordStrength } {
+  let score = 0
+  if (password.length >= 8) score++
+  if (password.length >= 12) score++
+  if (/[a-z]/.test(password) && /[A-Z]/.test(password)) score++
+  if (/\d/.test(password)) score++
+  if (/[^A-Za-z0-9]/.test(password)) score++
+  const strength: PasswordStrength = score >= 4 ? 'strong' : score >= 3 ? 'fair' : 'weak'
+  return { score, strength }
+}
+
+const filled: Record<PasswordStrength, number> = { weak: 1, fair: 2, strong: 3 }
+const barColor: Record<PasswordStrength, string> = {
+  weak: 'bg-danger',
+  fair: 'bg-warning',
+  strong: 'bg-success',
+}
+const labels: Record<PasswordStrength, string> = { weak: 'Weak', fair: 'Fair', strong: 'Strong' }
+
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'suffix'> {
+  /** Show a strength meter under the field once the user starts typing. */
+  showStrength?: boolean
+  /** Start with the password visible. */
+  defaultVisible?: boolean
+}
+
+function EyeIcon({ off }: { off: boolean }) {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      {off ? (
+        <>
+          <path d="M10.7 5.1A10.4 10.4 0 0 1 12 5c7 0 10 7 10 7a13 13 0 0 1-1.7 2.7M6.6 6.6A13.5 13.5 0 0 0 2 12s3 7 10 7a9.7 9.7 0 0 0 5.4-1.6" />
+          <path d="M9.9 9.9a3 3 0 1 0 4.2 4.2M2 2l20 20" />
+        </>
+      ) : (
+        <>
+          <path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7S2 12 2 12Z" />
+          <circle cx="12" cy="12" r="3" />
+        </>
+      )}
+    </svg>
+  )
+}
+
+/** A password field with a show/hide toggle and an optional strength meter. */
+export function PasswordInput(inProps: PasswordInputProps) {
+  const [props, slots] = useComponentConfig('PasswordInput', inProps)
+  const {
+    showStrength = false,
+    defaultVisible = false,
+    value,
+    defaultValue,
+    onChange,
+    className,
+    ...rest
+  } = props
+  const [visible, setVisible] = useState(defaultVisible)
+  const [typed, setTyped] = useState(String(defaultValue ?? ''))
+  const current = value !== undefined ? String(value) : typed
+  const { strength } = passwordStrength(current)
+  const s = passwordInputStyles({ strength })
+
+  return (
+    <div data-slot="password-input" className={s.root({ class: [slots.root, className] })}>
+      <Input
+        {...rest}
+        {...(value !== undefined && { value })}
+        {...(defaultValue !== undefined && { defaultValue })}
+        type={visible ? 'text' : 'password'}
+        autoComplete={rest.autoComplete ?? 'current-password'}
+        spellCheck={false}
+        onChange={(event) => {
+          setTyped(event.target.value)
+          onChange?.(event)
+        }}
+        suffix={
+          <button
+            type="button"
+            aria-label={visible ? 'Hide password' : 'Show password'}
+            aria-pressed={visible}
+            disabled={rest.disabled}
+            className={s.toggle({ class: slots.toggle })}
+            onClick={() => setVisible((v) => !v)}
+          >
+            <EyeIcon off={visible} />
+          </button>
+        }
+      />
+      {showStrength && current.length > 0 && (
+        <div className={s.meter({ class: slots.meter })}>
+          <div className={s.bars({ class: slots.bars })} aria-hidden="true">
+            {[1, 2, 3].map((n) => (
+              <span
+                key={n}
+                className={s.bar({
+                  class: [slots.bar, n <= filled[strength] && barColor[strength]],
+                })}
+              />
+            ))}
+          </div>
+          <span className={s.label({ class: slots.label })} aria-live="polite">
+            {labels[strength]}
+          </span>
+        </div>
+      )}
+    </div>
+  )
+}

package/src/components/prose/prose.tsx

@@ -20,7 +20,7 @@ export const proseStyles = tv({
       // Text
       '[&_p]:my-[1em] [&_p]:text-pretty',
       '[&_strong]:font-semibold [&_strong]:text-foreground',
-      '[&_a]:font-medium [&_a]:text-primary [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary',
+      '[&_a]:font-medium [&_a]:text-primary-text [&_a]:underline [&_a]:decoration-primary/40 [&_a]:underline-offset-4 [&_a:hover]:decoration-primary',
       // Lists
       '[&_ul]:my-[1em] [&_ul]:list-disc [&_ul]:pl-[1.5em] [&_ol]:my-[1em] [&_ol]:list-decimal [&_ol]:pl-[1.5em]',
       '[&_li]:my-[0.35em] [&_li]:pl-[0.25em] [&_li::marker]:text-faint-foreground',

package/src/components/resizable/index.ts

@@ -0,0 +1,9 @@
+export {
+  ResizableHandle,
+  type ResizableHandleProps,
+  ResizablePanel,
+  ResizablePanelGroup,
+  type ResizablePanelGroupProps,
+  type ResizablePanelProps,
+} from './resizable'
+export { type ResizableVariants, resizableStyles } from './resizable.styles'

package/src/components/resizable/resizable.styles.ts

@@ -0,0 +1,28 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const resizableStyles = tv({
+  slots: {
+    group: 'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
+    panel: 'min-w-0',
+    // A 1px divider with a wider invisible hit area. Highlights while hovered, focused or dragged.
+    handle: [
+      'relative flex w-px shrink-0 items-center justify-center bg-border outline-none',
+      'transition-colors duration-(--glyph-duration-fast)',
+      'after:absolute after:inset-y-0 after:left-1/2 after:w-2 after:-translate-x-1/2',
+      'hover:bg-border-strong data-[resize-handle-state=drag]:bg-primary',
+      'focus-visible:bg-primary focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1 focus-visible:ring-offset-background',
+      'data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full',
+      'data-[panel-group-direction=vertical]:after:inset-x-0 data-[panel-group-direction=vertical]:after:inset-y-auto data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:top-1/2 data-[panel-group-direction=vertical]:after:h-2 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 data-[panel-group-direction=vertical]:after:-translate-y-1/2',
+    ],
+    grip: 'z-10 flex h-5 w-3 items-center justify-center rounded-xs border border-border bg-surface text-faint-foreground shadow-xs in-data-[panel-group-direction=vertical]:h-3 in-data-[panel-group-direction=vertical]:w-5 [&>svg]:size-2.5 in-data-[panel-group-direction=vertical]:[&>svg]:rotate-90',
+  },
+})
+
+export type ResizableVariants = VariantProps<typeof resizableStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Resizable: StylesEntry<typeof resizableStyles>
+  }
+}

package/src/components/resizable/resizable.tsx

@@ -0,0 +1,69 @@
+import type { ComponentProps } from 'react'
+import { Panel, PanelGroup, PanelResizeHandle } from 'react-resizable-panels'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { resizableStyles } from './resizable.styles'
+
+const s = resizableStyles()
+
+function useSlots() {
+  return useComponentConfig('Resizable', {})[1]
+}
+
+export type ResizablePanelGroupProps = ComponentProps<typeof PanelGroup>
+
+/**
+ * Panels separated by draggable, keyboard-accessible dividers, for editors and split views.
+ * Set `direction` to "horizontal" or "vertical"; pass `autoSaveId` to remember sizes.
+ */
+export function ResizablePanelGroup({ className, ...props }: ResizablePanelGroupProps) {
+  const slots = useSlots()
+  return (
+    <PanelGroup
+      data-slot="resizable-group"
+      className={s.group({ class: [slots.group, className] })}
+      {...props}
+    />
+  )
+}
+
+export type ResizablePanelProps = ComponentProps<typeof Panel>
+
+export function ResizablePanel({ className, ...props }: ResizablePanelProps) {
+  const slots = useSlots()
+  return (
+    <Panel
+      data-slot="resizable-panel"
+      className={s.panel({ class: [slots.panel, className] })}
+      {...props}
+    />
+  )
+}
+
+export interface ResizableHandleProps extends ComponentProps<typeof PanelResizeHandle> {
+  /** Show a visible grip on the divider. */
+  withHandle?: boolean
+}
+
+export function ResizableHandle({ withHandle, className, ...props }: ResizableHandleProps) {
+  const slots = useSlots()
+  return (
+    <PanelResizeHandle
+      data-slot="resizable-handle"
+      className={s.handle({ class: [slots.handle, className] })}
+      {...props}
+    >
+      {withHandle && (
+        <div className={s.grip({ class: slots.grip })} aria-hidden="true">
+          <svg viewBox="0 0 24 24" fill="currentColor" aria-hidden="true">
+            <circle cx="9" cy="6" r="1.5" />
+            <circle cx="15" cy="6" r="1.5" />
+            <circle cx="9" cy="12" r="1.5" />
+            <circle cx="15" cy="12" r="1.5" />
+            <circle cx="9" cy="18" r="1.5" />
+            <circle cx="15" cy="18" r="1.5" />
+          </svg>
+        </div>
+      )}
+    </PanelResizeHandle>
+  )
+}

package/src/components/scroll-area/scroll-area.tsx

@@ -1,5 +1,5 @@
 import { ScrollArea as ScrollAreaPrimitive } from 'radix-ui'
-import type { ComponentProps } from 'react'
+import { type ComponentProps, useEffect, useRef, useState } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
 import type { StylesEntry } from '../../utils/registry'
 import { focusRing } from '../../utils/styles'
@@ -31,6 +31,24 @@ export interface ScrollAreaProps extends ComponentProps<typeof ScrollAreaPrimiti
   viewportClassName?: string
 }
 
+/** True while the element's content overflows it, so keyboard users need to reach it. */
+function useOverflowing<E extends HTMLElement>() {
+  const ref = useRef<E>(null)
+  const [overflowing, setOverflowing] = useState(false)
+  useEffect(() => {
+    const el = ref.current
+    if (!el) return
+    const measure = () =>
+      setOverflowing(el.scrollHeight > el.clientHeight || el.scrollWidth > el.clientWidth)
+    measure()
+    const observer = new ResizeObserver(measure)
+    observer.observe(el)
+    if (el.firstElementChild) observer.observe(el.firstElementChild)
+    return () => observer.disconnect()
+  }, [])
+  return [ref, overflowing] as const
+}
+
 /**
  * A scrollable region with slim, theme-colored scrollbars. Give it a height (or width)
  * with `className`, e.g. `h-72`.
@@ -39,6 +57,7 @@ export function ScrollArea(inProps: ScrollAreaProps) {
   const [props, slots] = useComponentConfig('ScrollArea', inProps)
   const { orientation = 'vertical', viewportClassName, className, children, ...rest } = props
   const s = scrollAreaStyles()
+  const [viewportRef, overflowing] = useOverflowing<HTMLDivElement>()
   const bar = (o: 'vertical' | 'horizontal') => (
     <ScrollAreaPrimitive.Scrollbar
       data-slot="scroll-area-scrollbar"
@@ -55,7 +74,10 @@ export function ScrollArea(inProps: ScrollAreaProps) {
       {...rest}
     >
       <ScrollAreaPrimitive.Viewport
+        ref={viewportRef}
         data-slot="scroll-area-viewport"
+        // Scrollable regions must be reachable by keyboard to scroll with arrow keys.
+        tabIndex={overflowing ? 0 : undefined}
         className={s.viewport({ class: [slots.viewport, viewportClassName] })}
       >
         {children}

package/src/components/segmented-control/segmented-control.tsx

@@ -1,8 +1,10 @@
 import { ToggleGroup } from 'radix-ui'
-import type { ReactNode } from 'react'
+import { type ReactNode, useContext } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
+import { warnOnce } from '../../internal/dev'
 import { focusRing, themedBorder, transition } from '../../utils/styles'
 import { tv, type VariantProps } from '../../utils/tv'
+import { FieldContext } from '../field/field-context'
 
 export const segmentedControlStyles = tv({
   slots: {
@@ -40,7 +42,9 @@ export interface SegmentedControlProps<T extends string>
   value?: T
   defaultValue?: T
   onValueChange?: (value: T) => void
-  'aria-label': string
+  /** Required unless the control sits in a `<Field label>`, which labels it. */
+  'aria-label'?: string
+  'aria-labelledby'?: string
   className?: string
   id?: string
 }
@@ -52,7 +56,16 @@ export interface SegmentedControlProps<T extends string>
 export function SegmentedControl<T extends string>(inProps: SegmentedControlProps<T>) {
   const [props, slots] = useComponentConfig('SegmentedControl', inProps)
   const { options, value, defaultValue, onValueChange, size, fullWidth, className, ...rest } = props
+  const field = useContext(FieldContext)
   const s = segmentedControlStyles({ size, fullWidth })
+  const labelledBy = rest['aria-labelledby'] ?? (rest['aria-label'] ? undefined : field?.labelId)
+  if (!rest['aria-label'] && !labelledBy) {
+    warnOnce(
+      'segmented-control-label',
+      'SegmentedControl needs a label: pass aria-label, or place it in a <Field label="…">.',
+    )
+  }
+  const describedBy = [field?.descriptionId, field?.errorId].filter(Boolean).join(' ')
   return (
     <ToggleGroup.Root
       type="single"
@@ -62,6 +75,8 @@ export function SegmentedControl<T extends string>(inProps: SegmentedControlProp
       // Radix emits '' when the active item is clicked again; a segmented control never deselects.
       onValueChange={(next: string) => next && onValueChange?.(next as T)}
       className={s.root({ class: [slots.root, className] })}
+      aria-labelledby={labelledBy}
+      aria-describedby={describedBy || undefined}
       {...rest}
     >
       {options.map((option) => (

package/src/components/sheet/sheet.styles.ts

@@ -4,10 +4,10 @@ import { tv, type VariantProps } from '../../utils/tv'
 
 export const sheetStyles = tv({
   slots: {
-    overlay: 'fixed inset-0 z-50 animate-fade-in bg-overlay',
+    overlay:
+      'fixed inset-0 z-50 bg-overlay data-[state=open]:animate-fade-in data-[state=closed]:animate-fade-out',
     content: [
       'fixed z-50 flex flex-col gap-5 border-border bg-surface p-6 text-foreground shadow-lg outline-none',
-      'transition-[translate] duration-(--glyph-duration-slow) ease-standard',
     ],
     close: [
       'absolute top-4 right-4 inline-flex size-7 cursor-pointer items-center justify-center rounded-sm text-muted-foreground hover:bg-muted hover:text-foreground [&>svg]:size-4',
@@ -21,23 +21,23 @@ export const sheetStyles = tv({
     footer: 'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',
   },
   variants: {
-    // Slide in from the edge using @starting-style (Tailwind's `starting:` variant).
+    // Slides in and out from its edge; Radix keeps it mounted until the exit animation ends.
     side: {
       right: {
         content:
-          'inset-y-0 right-0 h-full w-full border-l-(length:--glyph-border-width) starting:translate-x-full',
+          'inset-y-0 right-0 h-full w-full border-l-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-right data-[state=closed]:animate-sheet-out-right',
       },
       left: {
         content:
-          'inset-y-0 left-0 h-full w-full border-r-(length:--glyph-border-width) starting:-translate-x-full',
+          'inset-y-0 left-0 h-full w-full border-r-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-left data-[state=closed]:animate-sheet-out-left',
       },
       top: {
         content:
-          'inset-x-0 top-0 max-h-[85dvh] border-b-(length:--glyph-border-width) starting:-translate-y-full',
+          'inset-x-0 top-0 max-h-[85dvh] border-b-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-top data-[state=closed]:animate-sheet-out-top',
       },
       bottom: {
         content:
-          'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t-(length:--glyph-border-width) starting:translate-y-full',
+          'inset-x-0 bottom-0 max-h-[85dvh] rounded-t-xl border-t-(length:--glyph-border-width) data-[state=open]:animate-sheet-in-bottom data-[state=closed]:animate-sheet-out-bottom',
       },
     },
     size: { sm: {}, md: {}, lg: {}, xl: {} },

package/src/components/slider/slider.tsx

@@ -1,7 +1,7 @@
 import { Slider as SliderPrimitive } from 'radix-ui'
-import type { ReactNode } from 'react'
+import { type ReactNode, useContext } from 'react'
 import { useComponentConfig } from '../../hooks/use-component-config'
-import { useFieldControl } from '../field/field-context'
+import { FieldContext, useFieldControl } from '../field/field-context'
 import { sliderStyles } from './slider.styles'
 
 export type SliderValue = number | readonly [number, number]
@@ -31,7 +31,9 @@ export interface SliderProps<V extends SliderValue> {
   name?: string
   id?: string
   className?: string
+  /** Accessible name. Inside a `Field`, the field's label is used when this is not set. */
   'aria-label'?: string
+  'aria-labelledby'?: string
   'aria-describedby'?: string
   'aria-invalid'?: boolean
   /** Accessible names for range thumbs. Default: "Minimum", "Maximum". */
@@ -61,9 +63,13 @@ export function Slider<V extends SliderValue = number>(inProps: SliderProps<V>)
     className,
     thumbLabels = ['Minimum', 'Maximum'],
     'aria-label': ariaLabel,
+    'aria-labelledby': ariaLabelledBy,
     'aria-describedby': ariaDescribedBy,
     'aria-invalid': ariaInvalid,
   } = props
+  const field = useContext(FieldContext)
+  // Thumbs are not labelable elements, so a Field's <label for> can't name them.
+  const labelledBy = ariaLabelledBy ?? (ariaLabel ? undefined : field?.labelId)
   const isRange = Array.isArray(value ?? defaultValue)
   const fromArray = (next: number[]) => (isRange ? [next[0], next[1]] : next[0]) as V
   const current = toArray(value) ?? toArray(defaultValue) ?? [min]
@@ -97,6 +103,7 @@ export function Slider<V extends SliderValue = number>(inProps: SliderProps<V>)
             key={index}
             id={index === 0 ? id : undefined}
             aria-label={isRange ? thumbLabels[index] : ariaLabel}
+            aria-labelledby={isRange ? undefined : labelledBy}
             aria-describedby={ariaDescribedBy}
             aria-invalid={ariaInvalid}
             className={s.thumb({ class: slots.thumb })}

package/src/components/stepper/index.ts

@@ -0,0 +1,2 @@
+export { Stepper, type StepperProps, type StepperStep, type StepStatus } from './stepper'
+export { type StepperVariants, stepperStyles } from './stepper.styles'

package/src/components/stepper/stepper.styles.ts

@@ -0,0 +1,74 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const stepperStyles = tv({
+  slots: {
+    root: 'flex w-full list-none p-0',
+    step: 'relative flex min-w-0',
+    trigger: ['flex min-w-0 rounded-md text-left', focusRing],
+    indicator: [
+      'relative z-10 flex size-8 shrink-0 items-center justify-center rounded-pill text-small font-medium tabular-nums [&>svg]:size-4',
+      themedBorder,
+      transition,
+    ],
+    connector: 'absolute transition-colors duration-(--glyph-duration-base)',
+    text: 'grid min-w-0 gap-0.5',
+    title: 'text-small font-medium',
+    description: 'text-caption text-muted-foreground',
+  },
+  variants: {
+    orientation: {
+      horizontal: {
+        root: 'items-start',
+        step: 'flex-1 flex-col items-center text-center',
+        trigger: 'flex-col items-center gap-2 text-center',
+        connector: 'top-4 right-[calc(-50%+1.25rem)] left-[calc(50%+1.25rem)] h-px',
+        text: 'px-2',
+      },
+      vertical: {
+        root: 'flex-col',
+        step: 'gap-3 pb-7 last:pb-0',
+        trigger: 'items-start gap-3',
+        connector: 'top-9.5 bottom-1.5 left-4 w-px -translate-x-1/2',
+        text: 'pt-1.5',
+      },
+    },
+    status: {
+      complete: {
+        indicator: 'border-primary bg-primary text-primary-foreground',
+        connector: 'bg-primary',
+        title: 'text-foreground',
+      },
+      current: {
+        indicator: 'border-primary bg-surface text-primary-text ring-4 ring-primary/15',
+        connector: 'bg-border',
+        title: 'text-foreground',
+      },
+      upcoming: {
+        indicator: 'border-border bg-surface text-muted-foreground',
+        connector: 'bg-border',
+        title: 'text-muted-foreground',
+      },
+      error: {
+        indicator: 'border-danger bg-danger text-danger-foreground',
+        connector: 'bg-border',
+        title: 'text-danger-text',
+      },
+    },
+    clickable: {
+      true: {
+        trigger: 'cursor-pointer hover:[&_[data-slot=stepper-title]]:underline underline-offset-4',
+      },
+    },
+  },
+  defaultVariants: { orientation: 'horizontal', status: 'upcoming' },
+})
+
+export type StepperVariants = VariantProps<typeof stepperStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Stepper: StylesEntry<typeof stepperStyles>
+  }
+}

package/src/components/stepper/stepper.tsx

@@ -0,0 +1,138 @@
+import type { ComponentProps, ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { stepperStyles } from './stepper.styles'
+
+export type StepStatus = 'complete' | 'current' | 'upcoming' | 'error'
+
+export interface StepperStep {
+  title: ReactNode
+  description?: ReactNode
+  /** Override the status derived from `current`, e.g. `'error'` for a failed step. */
+  status?: StepStatus
+}
+
+export interface StepperProps extends Omit<ComponentProps<'ol'>, 'children'> {
+  steps: readonly StepperStep[]
+  /** Index of the current step. Earlier steps are complete, later ones upcoming. */
+  current: number
+  orientation?: 'horizontal' | 'vertical'
+  /** Makes completed steps clickable, e.g. to go back in a wizard. */
+  onStepClick?: (index: number) => void
+}
+
+const statusText: Record<StepStatus, string> = {
+  complete: 'completed',
+  current: 'current step',
+  upcoming: 'not started',
+  error: 'needs attention',
+}
+
+const icon = {
+  xmlns: 'http://www.w3.org/2000/svg',
+  viewBox: '0 0 24 24',
+  fill: 'none',
+  stroke: 'currentColor',
+  strokeWidth: 2.5,
+  strokeLinecap: 'round',
+  strokeLinejoin: 'round',
+} as const
+
+const CheckIcon = () => (
+  <svg aria-hidden="true" {...icon}>
+    <path d="M20 6 9 17l-5-5" />
+  </svg>
+)
+const AlertIcon = () => (
+  <svg aria-hidden="true" {...icon}>
+    <path d="M12 7v6M12 17h.01" />
+  </svg>
+)
+
+function statusOf(step: StepperStep, index: number, current: number): StepStatus {
+  if (step.status) return step.status
+  if (index < current) return 'complete'
+  return index === current ? 'current' : 'upcoming'
+}
+
+/** Progress through a multi-step flow such as onboarding or checkout. */
+export function Stepper(inProps: StepperProps) {
+  const [props, slots] = useComponentConfig('Stepper', inProps)
+  const {
+    steps,
+    current,
+    orientation = 'horizontal',
+    onStepClick,
+    className,
+    'aria-label': ariaLabel = 'Progress',
+    ...rest
+  } = props
+  const root = stepperStyles({ orientation })
+
+  return (
+    <ol
+      data-slot="stepper"
+      data-orientation={orientation}
+      aria-label={ariaLabel}
+      className={root.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      {steps.map((step, index) => {
+        const status = statusOf(step, index, current)
+        const clickable = Boolean(onStepClick) && status === 'complete'
+        const s = stepperStyles({ orientation, status, clickable })
+        const content = (
+          <>
+            <span data-slot="stepper-indicator" className={s.indicator({ class: slots.indicator })}>
+              {status === 'complete' ? (
+                <CheckIcon />
+              ) : status === 'error' ? (
+                <AlertIcon />
+              ) : (
+                index + 1
+              )}
+            </span>
+            <span className={s.text({ class: slots.text })}>
+              <span data-slot="stepper-title" className={s.title({ class: slots.title })}>
+                {step.title}
+              </span>
+              {step.description && (
+                <span className={s.description({ class: slots.description })}>
+                  {step.description}
+                </span>
+              )}
+              <span className="sr-only">, {statusText[status]}</span>
+            </span>
+          </>
+        )
+        return (
+          <li
+            key={index}
+            data-slot="stepper-step"
+            data-status={status}
+            aria-current={status === 'current' ? 'step' : undefined}
+            className={s.step({ class: slots.step })}
+          >
+            {index < steps.length - 1 && (
+              <span
+                data-slot="stepper-connector"
+                aria-hidden="true"
+                className={s.connector({ class: slots.connector })}
+              />
+            )}
+            {clickable ? (
+              <button
+                type="button"
+                onClick={() => onStepClick?.(index)}
+                className={s.trigger({ class: slots.trigger })}
+              >
+                {content}
+              </button>
+            ) : (
+              <span className={s.trigger({ class: slots.trigger })}>{content}</span>
+            )}
+          </li>
+        )
+      })}
+    </ol>
+  )
+}

package/src/components/tag-input/index.ts

@@ -0,0 +1,2 @@
+export { TagInput, type TagInputProps } from './tag-input'
+export { type TagInputVariants, tagInputStyles } from './tag-input.styles'