@glyphui/ui 0.2.0 → 0.3.0

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/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/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 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',
+      },
+    },
+    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'

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

@@ -0,0 +1,39 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+import { fieldControl } from '../input/input.styles'
+
+export const tagInputStyles = tv({
+  slots: {
+    root: 'grid gap-1.5',
+    frame: [
+      ...fieldControl,
+      'flex cursor-text flex-wrap items-center gap-1.5 px-2 py-1',
+      'focus-within:border-ring focus-within:ring-3 focus-within:ring-ring/20',
+      'data-invalid:focus-within:ring-danger/20',
+      'has-[input:disabled]:cursor-not-allowed has-[input:disabled]:opacity-50',
+    ],
+    tag: 'inline-flex h-6 max-w-full items-center gap-1 rounded-pill bg-muted pr-1 pl-2.5 text-caption text-foreground',
+    tagLabel: 'truncate',
+    remove:
+      'inline-flex size-4 shrink-0 cursor-pointer items-center justify-center rounded-pill text-muted-foreground hover:bg-border-strong/40 hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring [&>svg]:size-3',
+    input:
+      'h-7 min-w-24 flex-1 bg-transparent px-1 text-foreground outline-none placeholder:text-faint-foreground disabled:cursor-not-allowed',
+    message: 'text-small font-medium text-danger',
+  },
+  variants: {
+    size: {
+      sm: { frame: 'min-h-(--glyph-control-sm) text-small' },
+      md: { frame: 'min-h-(--glyph-control-md) text-small' },
+      lg: { frame: 'min-h-(--glyph-control-lg) text-body' },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type TagInputVariants = VariantProps<typeof tagInputStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    TagInput: StylesEntry<typeof tagInputStyles>
+  }
+}

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

@@ -0,0 +1,198 @@
+import { type ClipboardEvent, type KeyboardEvent, useId, useRef, useState } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { useFieldControl } from '../field/field-context'
+import { type TagInputVariants, tagInputStyles } from './tag-input.styles'
+
+export interface TagInputProps extends TagInputVariants {
+  value?: string[]
+  defaultValue?: string[]
+  onValueChange?: (tags: string[]) => void
+  placeholder?: string
+  /** Stop accepting tags after this many. */
+  maxTags?: number
+  /** Return an error message to reject a tag, or `true` to accept it. */
+  validate?: (tag: string, tags: readonly string[]) => string | true
+  /** Allow the same tag more than once. Default false. */
+  allowDuplicates?: boolean
+  /** Keys (besides Enter) that turn the typed text into a tag. Default `[',']`. */
+  separators?: readonly string[]
+  disabled?: boolean
+  /** Submits each tag as its own hidden input with this name. */
+  name?: string
+  id?: string
+  className?: string
+  'aria-label'?: string
+  'aria-describedby'?: string
+  'aria-invalid'?: boolean
+}
+
+function XIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth="2.5"
+      strokeLinecap="round"
+      aria-hidden="true"
+    >
+      <path d="M18 6 6 18M6 6l12 12" />
+    </svg>
+  )
+}
+
+/**
+ * Free-form multi-value input. Enter or a comma turns the text into a removable tag;
+ * Backspace on an empty input removes the last one. Pasting a comma-separated list adds them all.
+ */
+export function TagInput(inProps: TagInputProps) {
+  const [props, slots] = useComponentConfig('TagInput', useFieldControl(inProps))
+  const {
+    value: valueProp,
+    defaultValue = [],
+    onValueChange,
+    placeholder = 'Add a tag…',
+    maxTags,
+    validate,
+    allowDuplicates = false,
+    separators = [','],
+    disabled,
+    name,
+    id,
+    size,
+    className,
+    'aria-label': ariaLabel,
+    'aria-describedby': ariaDescribedBy,
+    'aria-invalid': ariaInvalid,
+  } = props
+  const [tags, setTags] = useControllableState<string[]>({
+    value: valueProp,
+    defaultValue,
+    onChange: onValueChange,
+  })
+  const [draft, setDraft] = useState('')
+  const [error, setError] = useState<string | null>(null)
+  const inputRef = useRef<HTMLInputElement>(null)
+  const errorId = useId()
+  const s = tagInputStyles({ size })
+  const full = maxTags !== undefined && tags.length >= maxTags
+  const invalid = Boolean(error) || ariaInvalid === true
+
+  const add = (raw: readonly string[]) => {
+    let next = [...tags]
+    let problem: string | null = null
+    for (const candidate of raw.map((t) => t.trim()).filter(Boolean)) {
+      if (maxTags !== undefined && next.length >= maxTags) {
+        problem = `You can add up to ${maxTags} tags.`
+        break
+      }
+      if (!allowDuplicates && next.includes(candidate)) {
+        problem = `“${candidate}” is already added.`
+        continue
+      }
+      const verdict = validate?.(candidate, next) ?? true
+      if (verdict !== true) {
+        problem = verdict
+        continue
+      }
+      next = [...next, candidate]
+    }
+    if (next.length !== tags.length) setTags(next)
+    setError(problem)
+    return problem === null
+  }
+
+  const commitDraft = () => {
+    if (!draft.trim()) return
+    if (add([draft])) setDraft('')
+  }
+
+  const remove = (index: number) => {
+    setTags(tags.filter((_, i) => i !== index))
+    setError(null)
+    inputRef.current?.focus()
+  }
+
+  const handleKeyDown = (event: KeyboardEvent<HTMLInputElement>) => {
+    if (event.key === 'Enter' || separators.includes(event.key)) {
+      if (event.key === 'Enter' && !draft.trim()) return
+      event.preventDefault()
+      commitDraft()
+    } else if (event.key === 'Backspace' && draft === '' && tags.length > 0) {
+      event.preventDefault()
+      remove(tags.length - 1)
+    }
+  }
+
+  const handlePaste = (event: ClipboardEvent<HTMLInputElement>) => {
+    const text = event.clipboardData.getData('text')
+    const pattern = new RegExp(
+      `[${['\n', ...separators].map((s) => s.replace(/[-\\^\]]/g, '\\$&')).join('')}]`,
+    )
+    if (!pattern.test(text)) return
+    event.preventDefault()
+    add(text.split(pattern))
+  }
+
+  const describedBy =
+    [ariaDescribedBy, error ? errorId : undefined].filter(Boolean).join(' ') || undefined
+
+  return (
+    <div data-slot="tag-input" className={s.root({ class: [slots.root, className] })}>
+      {/* biome-ignore lint/a11y/noStaticElementInteractions: clicking the frame focuses the input, a convenience; the input itself is focusable */}
+      {/* biome-ignore lint/a11y/useKeyWithClickEvents: keyboard users reach the input directly */}
+      <div
+        data-invalid={invalid || undefined}
+        className={s.frame({ class: slots.frame })}
+        onClick={() => inputRef.current?.focus()}
+      >
+        {tags.map((tag, index) => (
+          <span key={`${tag}-${index}`} data-slot="tag" className={s.tag({ class: slots.tag })}>
+            <span className={s.tagLabel({ class: slots.tagLabel })}>{tag}</span>
+            {!disabled && (
+              <button
+                type="button"
+                aria-label={`Remove ${tag}`}
+                className={s.remove({ class: slots.remove })}
+                onClick={(event) => {
+                  event.stopPropagation()
+                  remove(index)
+                }}
+              >
+                <XIcon />
+              </button>
+            )}
+          </span>
+        ))}
+        <input
+          ref={inputRef}
+          id={id}
+          value={draft}
+          disabled={disabled || full}
+          placeholder={full ? undefined : tags.length === 0 ? placeholder : undefined}
+          aria-label={ariaLabel}
+          aria-describedby={describedBy}
+          aria-invalid={invalid || undefined}
+          className={s.input({ class: slots.input })}
+          onChange={(event) => {
+            setDraft(event.target.value)
+            if (error) setError(null)
+          }}
+          onKeyDown={handleKeyDown}
+          onPaste={handlePaste}
+          onBlur={commitDraft}
+        />
+      </div>
+      {error && (
+        <p id={errorId} role="alert" className={s.message({ class: slots.message })}>
+          {error}
+        </p>
+      )}
+      {name &&
+        tags.map((tag, index) => (
+          <input key={`${tag}-${index}`} type="hidden" name={name} value={tag} />
+        ))}
+    </div>
+  )
+}

package/src/components/timeline/index.ts

@@ -0,0 +1,8 @@
+export {
+  Timeline,
+  TimelineItem,
+  type TimelineItemData,
+  type TimelineItemProps,
+  type TimelineProps,
+} from './timeline'
+export { type TimelineVariants, timelineStyles } from './timeline.styles'

package/src/components/timeline/timeline.styles.ts

@@ -0,0 +1,56 @@
+import type { StylesEntry } from '../../utils/registry'
+import { themedBorder } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const timelineStyles = tv({
+  slots: {
+    root: 'grid',
+    item: 'group/item relative grid grid-cols-[auto_1fr] gap-x-3',
+    rail: 'flex flex-col items-center',
+    marker: [
+      'z-10 flex size-6 shrink-0 items-center justify-center rounded-pill bg-surface [&>svg]:size-3.5',
+      themedBorder,
+    ],
+    dot: 'size-2 rounded-pill bg-current',
+    connector: 'my-1 w-px flex-1 bg-border group-last/item:hidden',
+    content: 'grid min-w-0 gap-0.5 pt-0.5 pb-6 group-last/item:pb-0',
+    header: 'flex flex-wrap items-baseline justify-between gap-x-3 gap-y-0.5',
+    title: 'text-small font-medium text-foreground',
+    time: 'font-mono text-caption text-faint-foreground tabular-nums',
+    description: 'text-small text-muted-foreground',
+  },
+  variants: {
+    tone: {
+      neutral: { marker: 'border-border text-muted-foreground' },
+      primary: {
+        marker:
+          'border-primary/40 text-[color-mix(in_oklab,var(--color-primary)_80%,var(--color-foreground))]',
+      },
+      info: {
+        marker:
+          'border-info/40 text-[color-mix(in_oklab,var(--color-info)_80%,var(--color-foreground))]',
+      },
+      success: {
+        marker:
+          'border-success/40 text-[color-mix(in_oklab,var(--color-success)_80%,var(--color-foreground))]',
+      },
+      warning: {
+        marker:
+          'border-warning/50 text-[color-mix(in_oklab,var(--color-warning)_80%,var(--color-foreground))]',
+      },
+      danger: {
+        marker:
+          'border-danger/40 text-[color-mix(in_oklab,var(--color-danger)_80%,var(--color-foreground))]',
+      },
+    },
+  },
+  defaultVariants: { tone: 'neutral' },
+})
+
+export type TimelineVariants = VariantProps<typeof timelineStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Timeline: StylesEntry<typeof timelineStyles>
+  }
+}