@glyphui/ui 0.1.1 → 0.3.0

package/src/components/stat-card/stat-card.styles.ts

@@ -0,0 +1,24 @@
+import type { StylesEntry } from '../../utils/registry'
+import { tv, type VariantProps } from '../../utils/tv'
+
+export const statCardStyles = tv({
+  slots: {
+    root: 'gap-2',
+    header: 'flex items-center justify-between gap-2',
+    label: 'text-small text-muted-foreground',
+    icon: 'flex size-8 shrink-0 items-center justify-center rounded-md bg-muted text-muted-foreground [&>svg]:size-4',
+    valueRow: 'flex flex-wrap items-baseline gap-x-2 gap-y-1',
+    value: 'font-display text-h2 tabular-nums text-foreground',
+    delta: 'gap-1 [&>svg]:size-3',
+    description: 'text-small text-faint-foreground',
+    chart: 'mt-1 min-w-0 text-primary',
+  },
+})
+
+export type StatCardVariants = VariantProps<typeof statCardStyles>
+
+declare module '@glyphui/tokens' {
+  interface GlyphComponentRegistry {
+    StatCard: StylesEntry<typeof statCardStyles>
+  }
+}

package/src/components/stat-card/stat-card.tsx

@@ -0,0 +1,108 @@
+import type { ReactNode } from 'react'
+import { useComponentConfig } from '../../hooks/use-component-config'
+import { Badge, type BadgeProps } from '../badge'
+import { Card, type CardProps } from '../card'
+import { statCardStyles } from './stat-card.styles'
+
+type Trend = 'up' | 'down' | 'neutral'
+
+export interface StatCardProps extends Omit<CardProps, 'children'> {
+  label: ReactNode
+  value: ReactNode
+  /** Change versus the previous period, e.g. "+12.4%". */
+  delta?: ReactNode
+  /** Direction of the change. Colors the delta: up is good unless `invertTrend` is set. */
+  trend?: Trend
+  /** For metrics where going down is good (churn, latency, cost). */
+  invertTrend?: boolean
+  icon?: ReactNode
+  description?: ReactNode
+  /** A sparkline or small chart under the value. Colored with the primary color by default. */
+  chart?: ReactNode
+}
+
+const ArrowUp = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M7 17 17 7M8 7h9v9" />
+  </svg>
+)
+const ArrowDown = () => (
+  <svg
+    viewBox="0 0 24 24"
+    fill="none"
+    stroke="currentColor"
+    strokeWidth="2.5"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    aria-hidden="true"
+  >
+    <path d="M7 7l10 10M17 8v9H8" />
+  </svg>
+)
+
+function deltaTone(trend: Trend, invert: boolean): BadgeProps['tone'] {
+  if (trend === 'neutral') return 'neutral'
+  const good = (trend === 'up') !== invert
+  return good ? 'success' : 'danger'
+}
+
+/** A key metric with its label, change versus the last period, and an optional chart. */
+export function StatCard(inProps: StatCardProps) {
+  const [props, slots] = useComponentConfig('StatCard', inProps)
+  const {
+    label,
+    value,
+    delta,
+    trend = 'neutral',
+    invertTrend = false,
+    icon,
+    description,
+    chart,
+    className,
+    ...cardProps
+  } = props
+  const s = statCardStyles()
+
+  return (
+    <Card
+      data-slot="stat-card"
+      className={s.root({ class: [slots.root, className] })}
+      {...cardProps}
+    >
+      <div className={s.header({ class: slots.header })}>
+        <p className={s.label({ class: slots.label })}>{label}</p>
+        {icon && (
+          <span className={s.icon({ class: slots.icon })} aria-hidden="true">
+            {icon}
+          </span>
+        )}
+      </div>
+      <div className={s.valueRow({ class: slots.valueRow })}>
+        <p data-slot="stat-card-value" className={s.value({ class: slots.value })}>
+          {value}
+        </p>
+        {delta !== undefined && (
+          <Badge
+            data-trend={trend}
+            tone={deltaTone(trend, invertTrend)}
+            className={s.delta({ class: slots.delta })}
+          >
+            {trend === 'up' && <ArrowUp />}
+            {trend === 'down' && <ArrowDown />}
+            {delta}
+          </Badge>
+        )}
+      </div>
+      {description && <p className={s.description({ class: slots.description })}>{description}</p>}
+      {chart && <div className={s.chart({ class: slots.chart })}>{chart}</div>}
+    </Card>
+  )
+}

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