@glyphui/ui 0.2.0 → 0.4.0

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-text',
+  },
+  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/text/text.styles.ts

@@ -13,10 +13,10 @@ export const textStyles = tv({
       default: { base: 'text-foreground' },
       muted: { base: 'text-muted-foreground' },
       faint: { base: 'text-faint-foreground' },
-      primary: { base: 'text-primary' },
-      success: { base: 'text-success' },
-      warning: { base: 'text-warning' },
-      danger: { base: 'text-danger' },
+      primary: { base: 'text-primary-text' },
+      success: { base: 'text-success-text' },
+      warning: { base: 'text-warning-text' },
+      danger: { base: 'text-danger-text' },
     },
     weight: {
       regular: { base: 'font-normal' },

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>
+  }
+}

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