@glyphui/ui 0.1.1 → 0.3.0

package/src/components/timeline/timeline.tsx

@@ -0,0 +1,91 @@
+import { type ComponentProps, createContext, type ReactNode, useContext } from 'react'
+import { type SlotClasses, useComponentConfig } from '../../hooks/use-component-config'
+import { type TimelineVariants, timelineStyles } from './timeline.styles'
+
+const TimelineContext = createContext<SlotClasses<'Timeline'>>({})
+
+export interface TimelineItemData extends TimelineVariants {
+  /** Stable key. Falls back to the index. */
+  id?: string
+  title: ReactNode
+  /** Display text for when it happened, e.g. "2h ago" or "Oct 12". */
+  time?: ReactNode
+  /** Machine-readable date for the `<time>` element, e.g. "2026-10-12T09:41". */
+  dateTime?: string
+  description?: ReactNode
+  /** Replaces the dot in the marker. */
+  icon?: ReactNode
+}
+
+export interface TimelineProps extends Omit<ComponentProps<'ol'>, 'children'> {
+  /** Data-driven items. Use `children` with TimelineItem for custom content. */
+  items?: readonly TimelineItemData[]
+  children?: ReactNode
+}
+
+/** A vertical list of events in order, for activity feeds, changelogs and order tracking. */
+export function Timeline(inProps: TimelineProps) {
+  const [props, slots] = useComponentConfig('Timeline', inProps)
+  const { items, className, children, ...rest } = props
+  const s = timelineStyles()
+  return (
+    <TimelineContext.Provider value={slots}>
+      <ol data-slot="timeline" className={s.root({ class: [slots.root, className] })} {...rest}>
+        {items
+          ? items.map(({ id, description, ...item }, index) => (
+              <TimelineItem key={id ?? index} {...item}>
+                {description}
+              </TimelineItem>
+            ))
+          : children}
+      </ol>
+    </TimelineContext.Provider>
+  )
+}
+
+export interface TimelineItemProps
+  extends Omit<ComponentProps<'li'>, 'title'>,
+    Omit<TimelineItemData, 'id' | 'description'> {
+  /** Description below the title. */
+  children?: ReactNode
+}
+
+export function TimelineItem({
+  title,
+  time,
+  dateTime,
+  icon,
+  tone,
+  className,
+  children,
+  ...props
+}: TimelineItemProps) {
+  const slots = useContext(TimelineContext)
+  const s = timelineStyles({ tone })
+  return (
+    <li
+      data-slot="timeline-item"
+      data-tone={tone ?? 'neutral'}
+      className={s.item({ class: [slots.item, className] })}
+      {...props}
+    >
+      <div className={s.rail({ class: slots.rail })} aria-hidden="true">
+        <span className={s.marker({ class: slots.marker })}>
+          {icon ?? <span className={s.dot({ class: slots.dot })} />}
+        </span>
+        <span className={s.connector({ class: slots.connector })} />
+      </div>
+      <div className={s.content({ class: slots.content })}>
+        <div className={s.header({ class: slots.header })}>
+          <p className={s.title({ class: slots.title })}>{title}</p>
+          {time && (
+            <time dateTime={dateTime} className={s.time({ class: slots.time })}>
+              {time}
+            </time>
+          )}
+        </div>
+        {children && <div className={s.description({ class: slots.description })}>{children}</div>}
+      </div>
+    </li>
+  )
+}

package/src/components/toast/index.ts

@@ -0,0 +1 @@
+export { Toaster, type ToasterProps, toast, toastStyles } from './toast'

package/src/components/toast/toast.tsx

@@ -0,0 +1,91 @@
+import type { ComponentProps } from 'react'
+import { Toaster as Sonner, toast } from 'sonner'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv } from '../../utils/tv'
+
+export const toastStyles = tv({
+  slots: {
+    toast: [
+      'group flex w-(--width) items-start gap-3 rounded-lg border-border bg-raised p-4 text-small text-foreground shadow-lg',
+      themedBorder,
+    ],
+    content: 'flex min-w-0 flex-1 flex-col gap-0.5',
+    title: 'font-medium text-foreground',
+    description: 'text-muted-foreground',
+    icon: 'mt-0.5 flex size-4 shrink-0 items-center justify-center [&>svg]:size-4',
+    actionButton: [
+      'inline-flex h-7 shrink-0 cursor-pointer items-center rounded-sm bg-primary px-2.5 text-caption font-medium text-primary-foreground hover:bg-primary/88',
+      transition,
+      focusRing,
+    ],
+    cancelButton: [
+      'inline-flex h-7 shrink-0 cursor-pointer items-center rounded-sm bg-muted px-2.5 text-caption font-medium text-muted-foreground hover:text-foreground',
+      transition,
+      focusRing,
+    ],
+    closeButton: [
+      'absolute -top-2 -left-2 flex size-5 cursor-pointer items-center justify-center rounded-pill border-border bg-raised text-muted-foreground shadow-xs hover:text-foreground [&>svg]:size-3',
+      themedBorder,
+      focusRing,
+    ],
+    success: '[&_[data-icon]]:text-success',
+    error: '[&_[data-icon]]:text-danger',
+    warning: '[&_[data-icon]]:text-warning',
+    info: '[&_[data-icon]]:text-info',
+    loading: '[&_[data-icon]]:text-muted-foreground',
+  },
+})
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Toast: StylesEntry<typeof toastStyles>
+  }
+}
+
+export type ToasterProps = ComponentProps<typeof Sonner>
+
+/**
+ * Renders toasts sent with `toast()`. Mount once near the root. Styled entirely by the
+ * theme's tokens, so it follows the theme and color mode automatically.
+ *
+ * ```tsx
+ * toast.success('Saved')
+ * toast.promise(save(), { loading: 'Saving…', success: 'Saved', error: 'Couldn’t save' })
+ * ```
+ */
+export function Toaster(inProps: ToasterProps) {
+  const [props, slots] = useComponentConfig('Toast', inProps)
+  const { toastOptions, position = 'bottom-right', ...rest } = props
+  const s = toastStyles()
+  const classNames = toastOptions?.classNames ?? {}
+  return (
+    <Sonner
+      position={position}
+      gap={10}
+      {...rest}
+      toastOptions={{
+        ...toastOptions,
+        unstyled: true,
+        classNames: {
+          toast: s.toast({ class: [slots.toast, classNames.toast] }),
+          content: s.content({ class: [slots.content, classNames.content] }),
+          title: s.title({ class: [slots.title, classNames.title] }),
+          description: s.description({ class: [slots.description, classNames.description] }),
+          icon: s.icon({ class: [slots.icon, classNames.icon] }),
+          actionButton: s.actionButton({ class: [slots.actionButton, classNames.actionButton] }),
+          cancelButton: s.cancelButton({ class: [slots.cancelButton, classNames.cancelButton] }),
+          closeButton: s.closeButton({ class: [slots.closeButton, classNames.closeButton] }),
+          success: s.success({ class: [slots.success, classNames.success] }),
+          error: s.error({ class: [slots.error, classNames.error] }),
+          warning: s.warning({ class: [slots.warning, classNames.warning] }),
+          info: s.info({ class: [slots.info, classNames.info] }),
+          loading: s.loading({ class: [slots.loading, classNames.loading] }),
+        },
+      }}
+    />
+  )
+}
+
+export { toast }

package/src/components/toggle/index.ts

@@ -0,0 +1,9 @@
+export {
+  Toggle,
+  ToggleGroup,
+  ToggleGroupItem,
+  type ToggleGroupItemProps,
+  type ToggleGroupProps,
+  type ToggleProps,
+} from './toggle'
+export { type ToggleVariants, toggleStyles } from './toggle.styles'

package/src/components/toggle/toggle.styles.ts

@@ -0,0 +1,39 @@
+import type { StylesEntry } from '../../utils/registry'
+import { focusRing, themedBorder, transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const toggleStyles = tv({
+  slots: {
+    base: [
+      'inline-flex shrink-0 cursor-pointer select-none items-center justify-center gap-2 whitespace-nowrap rounded-md font-medium text-muted-foreground',
+      transition,
+      focusRing,
+      'hover:bg-muted hover:text-foreground',
+      'data-[state=on]:bg-muted data-[state=on]:text-foreground',
+      'disabled:pointer-events-none disabled:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0',
+    ],
+    group: 'inline-flex items-center gap-1',
+  },
+  variants: {
+    variant: {
+      default: { base: 'bg-transparent' },
+      outline: {
+        base: ['border-border bg-transparent shadow-xs hover:border-border-strong', themedBorder],
+      },
+    },
+    size: {
+      sm: { base: 'h-(--glyph-control-sm) min-w-(--glyph-control-sm) px-2 text-caption' },
+      md: { base: 'h-(--glyph-control-md) min-w-(--glyph-control-md) px-2.5 text-small' },
+      lg: { base: 'h-(--glyph-control-lg) min-w-(--glyph-control-lg) px-3 text-small' },
+    },
+  },
+  defaultVariants: { variant: 'default', size: 'md' },
+})
+
+export type ToggleVariants = VariantProps<typeof toggleStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    Toggle: StylesEntry<typeof toggleStyles>
+  }
+}

package/src/components/toggle/toggle.tsx

@@ -0,0 +1,61 @@
+import { ToggleGroup as ToggleGroupPrimitive, Toggle as TogglePrimitive } from 'radix-ui'
+import { type ComponentProps, createContext, useContext } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { type ToggleVariants, toggleStyles } from './toggle.styles'
+
+export interface ToggleProps extends ComponentProps<typeof TogglePrimitive.Root>, ToggleVariants {}
+
+/**
+ * A two-state button, e.g. Bold in a toolbar. Use Switch for settings that take effect
+ * immediately, and Checkbox inside forms.
+ */
+export function Toggle(inProps: ToggleProps) {
+  const [props, slots] = useComponentConfig('Toggle', inProps)
+  const { variant, size, className, ...rest } = props
+  return (
+    <TogglePrimitive.Root
+      data-slot="toggle"
+      className={toggleStyles({ variant, size }).base({ class: [slots.base, className] })}
+      {...rest}
+    />
+  )
+}
+
+const ToggleGroupContext = createContext<ToggleVariants>({})
+
+export type ToggleGroupProps = ComponentProps<typeof ToggleGroupPrimitive.Root> & ToggleVariants
+
+/**
+ * A set of toggles. `type="single"` behaves like a radio group (text alignment),
+ * `type="multiple"` like checkboxes (bold, italic, underline). Arrow keys move between items.
+ */
+export function ToggleGroup(inProps: ToggleGroupProps) {
+  const [props, slots] = useComponentConfig('Toggle', inProps)
+  const { variant, size, className, ...rest } = props
+  return (
+    <ToggleGroupContext.Provider value={{ variant, size }}>
+      <ToggleGroupPrimitive.Root
+        data-slot="toggle-group"
+        className={toggleStyles().group({ class: [slots.group, className] })}
+        {...rest}
+      />
+    </ToggleGroupContext.Provider>
+  )
+}
+
+export interface ToggleGroupItemProps
+  extends ComponentProps<typeof ToggleGroupPrimitive.Item>,
+    ToggleVariants {}
+
+export function ToggleGroupItem({ variant, size, className, ...props }: ToggleGroupItemProps) {
+  const group = useContext(ToggleGroupContext)
+  const [, slots] = useComponentConfig('Toggle', {})
+  const s = toggleStyles({ variant: variant ?? group.variant, size: size ?? group.size })
+  return (
+    <ToggleGroupPrimitive.Item
+      data-slot="toggle-group-item"
+      className={s.base({ class: [slots.base, className] })}
+      {...props}
+    />
+  )
+}

package/src/components/tree-view/index.ts

@@ -0,0 +1,2 @@
+export { type TreeNode, TreeView, type TreeViewProps } from './tree-view'
+export { type TreeViewVariants, treeViewStyles } from './tree-view.styles'

package/src/components/tree-view/tree-view.styles.ts

@@ -0,0 +1,42 @@
+import type { StylesEntry } from '../../utils/registry'
+import { transition } from '../../utils/styles'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const treeViewStyles = tv({
+  slots: {
+    root: 'grid gap-px text-small',
+    // Focus and selection are drawn on the item's own row only, never on nested rows.
+    item: [
+      'outline-none',
+      'focus-visible:[&>[data-slot=tree-row]]:ring-2 focus-visible:[&>[data-slot=tree-row]]:ring-ring',
+      'aria-selected:[&>[data-slot=tree-row]]:bg-muted aria-selected:[&>[data-slot=tree-row]]:text-foreground aria-selected:[&>[data-slot=tree-row]]:font-medium',
+      'aria-disabled:[&>[data-slot=tree-row]]:pointer-events-none aria-disabled:[&>[data-slot=tree-row]]:opacity-50',
+    ],
+    row: [
+      'group/row flex h-8 cursor-pointer select-none items-center gap-1.5 rounded-sm pr-2 text-muted-foreground',
+      transition,
+      'hover:bg-muted hover:text-foreground',
+    ],
+    chevron:
+      'size-4 shrink-0 text-faint-foreground transition-transform duration-(--glyph-duration-fast) ease-standard group-data-[state=open]/row:rotate-90',
+    spacer: 'size-4 shrink-0',
+    icon: 'flex size-4 shrink-0 items-center justify-center text-faint-foreground [&>svg]:size-4',
+    label: 'min-w-0 flex-1 truncate',
+    group: 'grid gap-px',
+  },
+  variants: {
+    size: {
+      sm: { row: 'h-7 text-caption' },
+      md: {},
+    },
+  },
+  defaultVariants: { size: 'md' },
+})
+
+export type TreeViewVariants = VariantProps<typeof treeViewStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    TreeView: StylesEntry<typeof treeViewStyles>
+  }
+}

package/src/components/tree-view/tree-view.tsx

@@ -0,0 +1,274 @@
+import {
+  type ComponentProps,
+  type KeyboardEvent,
+  type MouseEvent,
+  type ReactNode,
+  useCallback,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+} from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { useControllableState } from '../../hooks/use-controllable-state'
+import { type TreeViewVariants, treeViewStyles } from './tree-view.styles'
+
+export interface TreeNode {
+  id: string
+  label: ReactNode
+  icon?: ReactNode
+  children?: readonly TreeNode[]
+  disabled?: boolean
+  /** Text used for type-to-find when `label` is not a string. */
+  textValue?: string
+}
+
+export interface TreeViewProps
+  extends Omit<ComponentProps<'div'>, 'onSelect' | 'children' | 'defaultValue'>,
+    TreeViewVariants {
+  nodes: readonly TreeNode[]
+  /** Ids of expanded nodes (controlled). */
+  expanded?: readonly string[]
+  defaultExpanded?: readonly string[]
+  onExpandedChange?: (expanded: string[]) => void
+  /** Id of the selected node (controlled). `null` for none. */
+  selected?: string | null
+  defaultSelected?: string | null
+  onSelect?: (id: string, node: TreeNode) => void
+  /** Required: describes the tree, e.g. "Project files". */
+  'aria-label': string
+}
+
+interface VisibleNode {
+  node: TreeNode
+  level: number
+  parentId: string | null
+}
+
+function flattenVisible(nodes: readonly TreeNode[], expanded: ReadonlySet<string>): VisibleNode[] {
+  const out: VisibleNode[] = []
+  const walk = (list: readonly TreeNode[], level: number, parentId: string | null) => {
+    for (const node of list) {
+      out.push({ node, level, parentId })
+      if (node.children?.length && expanded.has(node.id)) walk(node.children, level + 1, node.id)
+    }
+  }
+  walk(nodes, 1, null)
+  return out
+}
+
+function textOf(node: TreeNode): string {
+  return (node.textValue ?? (typeof node.label === 'string' ? node.label : '')).toLowerCase()
+}
+
+const NO_IDS: readonly string[] = []
+
+/**
+ * An accessible tree for file browsers and nested navigation. Arrow keys move and
+ * expand/collapse, Home/End jump, typing a letter finds the next match, Enter or Space selects.
+ */
+export function TreeView(inProps: TreeViewProps) {
+  const [props, slots] = useComponentConfig('TreeView', inProps)
+  const {
+    nodes,
+    expanded: expandedProp,
+    defaultExpanded = NO_IDS,
+    onExpandedChange,
+    selected: selectedProp,
+    defaultSelected = null,
+    onSelect,
+    size,
+    className,
+    ...rest
+  } = props
+
+  const [expandedList, setExpandedList] = useControllableState<readonly string[]>({
+    value: expandedProp,
+    defaultValue: defaultExpanded,
+    onChange: onExpandedChange as ((value: readonly string[]) => void) | undefined,
+  })
+  const [selected, setSelected] = useControllableState<string | null>({
+    value: selectedProp,
+    defaultValue: defaultSelected,
+  })
+  const expanded = useMemo(() => new Set(expandedList), [expandedList])
+  const visible = useMemo(() => flattenVisible(nodes, expanded), [nodes, expanded])
+  const [focusedId, setFocusedId] = useState<string | null>(null)
+  const refs = useRef(new Map<string, HTMLDivElement>())
+  const baseId = useId()
+
+  // The single tabbable item: the focused one, else the selected one if visible, else the first.
+  const tabbableId =
+    (focusedId && visible.some((v) => v.node.id === focusedId) && focusedId) ||
+    (selected && visible.some((v) => v.node.id === selected) && selected) ||
+    visible[0]?.node.id
+
+  const focus = useCallback((id: string | undefined) => {
+    if (!id) return
+    setFocusedId(id)
+    refs.current.get(id)?.focus()
+  }, [])
+
+  const toggle = useCallback(
+    (id: string, open?: boolean) => {
+      const isOpen = expanded.has(id)
+      const next = open ?? !isOpen
+      if (next === isOpen) return
+      setExpandedList(next ? [...expandedList, id] : expandedList.filter((x) => x !== id))
+    },
+    [expanded, expandedList, setExpandedList],
+  )
+
+  const select = useCallback(
+    (node: TreeNode) => {
+      if (node.disabled) return
+      setSelected(node.id)
+      onSelect?.(node.id, node)
+    },
+    [onSelect, setSelected],
+  )
+
+  const onKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    const index = visible.findIndex((v) => v.node.id === tabbableId)
+    const current = visible[index]
+    if (!current) return
+    const { node } = current
+    const hasChildren = Boolean(node.children?.length)
+    const isOpen = expanded.has(node.id)
+    let handled = true
+
+    switch (event.key) {
+      case 'ArrowDown':
+        focus(visible[index + 1]?.node.id)
+        break
+      case 'ArrowUp':
+        focus(visible[index - 1]?.node.id)
+        break
+      case 'ArrowRight':
+        if (hasChildren && !isOpen) toggle(node.id, true)
+        else if (hasChildren) focus(node.children?.[0]?.id)
+        break
+      case 'ArrowLeft':
+        if (hasChildren && isOpen) toggle(node.id, false)
+        else if (current.parentId) focus(current.parentId)
+        break
+      case 'Home':
+        focus(visible[0]?.node.id)
+        break
+      case 'End':
+        focus(visible.at(-1)?.node.id)
+        break
+      case 'Enter':
+      case ' ':
+        select(node)
+        break
+      default:
+        handled = false
+        if (event.key.length === 1 && /\S/.test(event.key) && !event.metaKey && !event.ctrlKey) {
+          const char = event.key.toLowerCase()
+          const ordered = [...visible.slice(index + 1), ...visible.slice(0, index + 1)]
+          const match = ordered.find((v) => textOf(v.node).startsWith(char))
+          if (match) {
+            focus(match.node.id)
+            handled = true
+          }
+        }
+    }
+    if (handled) event.preventDefault()
+  }
+
+  const s = treeViewStyles({ size })
+
+  /** Clicks bubble from nested items; only handle the item whose own row was clicked. */
+  const onItemClick = (event: MouseEvent<HTMLDivElement>, node: TreeNode, hasChildren: boolean) => {
+    const row = (event.target as HTMLElement).closest('[data-slot=tree-row]')
+    if (row?.parentElement !== event.currentTarget) return
+    focus(node.id)
+    if (hasChildren) toggle(node.id)
+    select(node)
+  }
+
+  const renderNodes = (list: readonly TreeNode[], level: number): ReactNode =>
+    list.map((node, i) => {
+      const hasChildren = Boolean(node.children?.length)
+      const isOpen = hasChildren && expanded.has(node.id)
+      return (
+        // Keyboard interaction is handled once on the tree (roving focus), not per item.
+        // biome-ignore lint/a11y/useKeyWithClickEvents: see above
+        <div
+          key={node.id}
+          ref={(el) => {
+            if (el) refs.current.set(node.id, el)
+            else refs.current.delete(node.id)
+          }}
+          role="treeitem"
+          data-slot="tree-item"
+          // Name the item by its label only, not by the nested items it contains.
+          aria-labelledby={`${baseId}-${node.id}`}
+          aria-level={level}
+          aria-setsize={list.length}
+          aria-posinset={i + 1}
+          aria-expanded={hasChildren ? isOpen : undefined}
+          aria-selected={selected === node.id}
+          aria-disabled={node.disabled || undefined}
+          tabIndex={node.id === tabbableId ? 0 : -1}
+          onFocus={(event) => {
+            if (event.target === event.currentTarget) setFocusedId(node.id)
+          }}
+          onClick={(event) => onItemClick(event, node, hasChildren)}
+          className={s.item({ class: slots.item })}
+        >
+          <div
+            data-slot="tree-row"
+            data-state={isOpen ? 'open' : 'closed'}
+            className={s.row({ class: slots.row })}
+            style={{ paddingInlineStart: `calc(${level - 1} * 1rem + 0.25rem)` }}
+          >
+            {hasChildren ? (
+              <svg
+                data-slot="tree-chevron"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                aria-hidden="true"
+                className={s.chevron({ class: slots.chevron })}
+              >
+                <path d="m9 18 6-6-6-6" />
+              </svg>
+            ) : (
+              <span className={s.spacer({ class: slots.spacer })} />
+            )}
+            {node.icon && (
+              <span className={s.icon({ class: slots.icon })} aria-hidden="true">
+                {node.icon}
+              </span>
+            )}
+            <span id={`${baseId}-${node.id}`} className={s.label({ class: slots.label })}>
+              {node.label}
+            </span>
+          </div>
+          {isOpen && (
+            // biome-ignore lint/a11y/useSemanticElements: role="group" is the WAI-ARIA tree pattern for child items
+            <div role="group" className={s.group({ class: slots.group })}>
+              {renderNodes(node.children ?? [], level + 1)}
+            </div>
+          )}
+        </div>
+      )
+    })
+
+  return (
+    <div
+      role="tree"
+      data-slot="tree-view"
+      onKeyDown={onKeyDown}
+      className={s.root({ class: [slots.root, className] })}
+      {...rest}
+    >
+      {renderNodes(nodes, 1)}
+    </div>
+  )
+}

package/src/components/visually-hidden/index.ts

@@ -0,0 +1 @@
+export { VisuallyHidden } from './visually-hidden'

package/src/components/visually-hidden/visually-hidden.tsx

@@ -0,0 +1,10 @@
+import { VisuallyHidden as VisuallyHiddenPrimitive } from 'radix-ui'
+import type { ComponentProps } from 'react'
+
+/**
+ * Hides content visually while keeping it available to screen readers, e.g. a label for an
+ * icon-only control or extra context in a table cell.
+ */
+export function VisuallyHidden(props: ComponentProps<typeof VisuallyHiddenPrimitive.Root>) {
+  return <VisuallyHiddenPrimitive.Root data-slot="visually-hidden" {...props} />
+}