@otfdashkit/ui 0.1.0

package/src/text/Caption.tsx

@@ -0,0 +1,32 @@
+'use client'
+
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../utils/cn'
+
+const captionVariants = cva('font-sans text-[11px] font-semibold uppercase tracking-[0.08em]', {
+  variants: {
+    tone: {
+      default: 'text-muted-foreground',
+      accent:  'text-primary',
+      subtle:  'text-muted-foreground/60',
+    },
+  },
+  defaultVariants: { tone: 'default' },
+})
+
+export interface CaptionProps
+  extends React.HTMLAttributes<HTMLSpanElement>,
+    VariantProps<typeof captionVariants> {}
+
+export const Caption = React.forwardRef<HTMLSpanElement, CaptionProps>(
+  ({ tone, className, ...props }, ref) => (
+    <span
+      ref={ref}
+      data-slot="caption"
+      className={cn(captionVariants({ tone }), className)}
+      {...props}
+    />
+  )
+)
+Caption.displayName = 'Caption'

package/src/text/Code.tsx

@@ -0,0 +1,43 @@
+'use client'
+
+import React from 'react'
+import { cn } from '../utils/cn'
+
+export interface CodeProps extends React.HTMLAttributes<HTMLElement> {
+  /** Render as a block <pre><code> instead of inline */
+  block?: boolean
+}
+
+export const Code = React.forwardRef<HTMLElement, CodeProps>(
+  ({ block, className, children, ...props }, ref) => {
+    if (block) {
+      return (
+        <pre
+          data-slot="code-block"
+          className={cn(
+            'rounded-md border border-border bg-muted/40 px-3 py-2.5 font-mono text-sm text-foreground overflow-x-auto',
+            className
+          )}
+        >
+          <code ref={ref as React.Ref<HTMLElement>} {...props}>
+            {children}
+          </code>
+        </pre>
+      )
+    }
+    return (
+      <code
+        ref={ref as React.Ref<HTMLElement>}
+        data-slot="code-inline"
+        className={cn(
+          'rounded bg-muted/50 px-[0.3em] py-[0.15em] font-mono text-[0.9em] text-foreground',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </code>
+    )
+  }
+)
+Code.displayName = 'Code'

package/src/text/GradientHeading.tsx

@@ -0,0 +1,90 @@
+import React from 'react'
+import { cn } from '../utils/cn'
+
+type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+export type GradientPreset =
+  | 'primary'      // primary → primary/60
+  | 'slate'        // indigo → violet
+  | 'warm'         // violet → pink
+  | 'cosmic'       // magenta → violet → blue
+  | 'terminal'     // white → muted (mono)
+  | 'aurora'       // cyan → indigo → violet
+  | 'sunset'       // orange → rose → purple
+  | 'custom'       // use `from` / `via` / `to` props
+
+export interface GradientHeadingProps extends React.HTMLAttributes<HTMLHeadingElement> {
+  as?: HeadingLevel
+  preset?: GradientPreset
+  /** Tailwind gradient `from-` color class e.g. "from-indigo-400" */
+  from?: string
+  /** Tailwind gradient `via-` color class (optional) */
+  via?: string
+  /** Tailwind gradient `to-` color class e.g. "to-violet-400" */
+  to?: string
+  /** Direction — default 'br' (bottom-right) */
+  direction?: 'r' | 'br' | 'b' | 'bl' | 'l'
+  /** Whether to animate the gradient position */
+  animate?: boolean
+}
+
+const presetClasses: Record<GradientPreset, string> = {
+  primary:  'from-[hsl(var(--primary))] to-[hsl(var(--primary)/0.6)]',
+  slate:    'from-indigo-400 to-violet-400',
+  warm:     'from-violet-400 via-purple-400 to-pink-400',
+  cosmic:   'from-fuchsia-400 via-violet-400 to-indigo-400',
+  terminal: 'from-white to-white/60',
+  aurora:   'from-cyan-400 via-indigo-400 to-violet-500',
+  sunset:   'from-orange-400 via-rose-400 to-purple-500',
+  custom:   '',
+}
+
+const directionClasses: Record<NonNullable<GradientHeadingProps['direction']>, string> = {
+  r:  'bg-gradient-to-r',
+  br: 'bg-gradient-to-br',
+  b:  'bg-gradient-to-b',
+  bl: 'bg-gradient-to-bl',
+  l:  'bg-gradient-to-l',
+}
+
+export const GradientHeading = React.forwardRef<HTMLHeadingElement, GradientHeadingProps>(
+  (
+    {
+      as: Tag = 'h2',
+      preset = 'primary',
+      from,
+      via,
+      to,
+      direction = 'br',
+      animate = false,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const gradientColors =
+      preset === 'custom'
+        ? cn(from, via, to)
+        : presetClasses[preset]
+
+    return (
+      <Tag
+        ref={ref}
+        data-slot="gradient-heading"
+        className={cn(
+          directionClasses[direction],
+          gradientColors,
+          'bg-clip-text text-transparent',
+          'font-heading font-semibold tracking-tight',
+          animate && 'bg-[length:200%_200%] animate-gradient-shift',
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </Tag>
+    )
+  }
+)
+GradientHeading.displayName = 'GradientHeading'

package/src/text/Heading.tsx

@@ -0,0 +1,44 @@
+'use client'
+
+import React from 'react'
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cn } from '../utils/cn'
+
+const headingVariants = cva('font-heading tracking-tight text-foreground', {
+  variants: {
+    size: {
+      display: 'text-[clamp(2.5rem,6vw,4.5rem)] leading-[1.05] font-bold',
+      xl:      'text-4xl md:text-5xl leading-tight font-bold',
+      lg:      'text-3xl md:text-4xl leading-tight font-semibold',
+      md:      'text-2xl leading-snug font-semibold',
+      sm:      'text-xl leading-snug font-semibold',
+      xs:      'text-lg leading-snug font-semibold',
+    },
+    tone: {
+      default: 'text-foreground',
+      muted:   'text-muted-foreground',
+      accent:  'text-primary',
+    },
+  },
+  defaultVariants: { size: 'lg', tone: 'default' },
+})
+
+type HeadingTag = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6'
+
+export interface HeadingProps
+  extends React.HTMLAttributes<HTMLHeadingElement>,
+    VariantProps<typeof headingVariants> {
+  as?: HeadingTag
+}
+
+export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
+  ({ as: Tag = 'h2', size, tone, className, ...props }, ref) => {
+    return React.createElement(Tag, {
+      ref,
+      'data-slot': 'heading',
+      className: cn(headingVariants({ size, tone }), className),
+      ...props,
+    })
+  }
+)
+Heading.displayName = 'Heading'

package/src/text/TextReveal.tsx

@@ -0,0 +1,96 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { cn } from '../utils/cn'
+
+export interface TextRevealProps {
+  /** The text to reveal */
+  text: string
+  /** Reveal mode */
+  mode?: 'words' | 'chars' | 'lines'
+  /** Delay between each word/char in ms (default 50) */
+  stagger?: number
+  /** Individual item animation duration in ms (default 500) */
+  duration?: number
+  /** Whether to start on intersection (default true) */
+  autoStart?: boolean
+  /** Base animation delay before first unit starts (ms) */
+  delay?: number
+  as?: 'p' | 'span' | 'div' | 'h1' | 'h2' | 'h3' | 'h4'
+  className?: string
+  style?: React.CSSProperties
+}
+
+export function TextReveal({
+  text,
+  mode = 'words',
+  stagger = 50,
+  duration = 500,
+  autoStart = true,
+  delay = 0,
+  as: Tag = 'span',
+  className,
+  style,
+}: TextRevealProps) {
+  const [revealed, setRevealed] = useState(false)
+  const containerRef = useRef<HTMLElement | null>(null)
+
+  useEffect(() => {
+    if (!autoStart) return undefined
+
+    const el = containerRef.current
+    if (!el) return undefined
+
+    if (typeof IntersectionObserver !== 'undefined') {
+      const observer = new IntersectionObserver(
+        (entries) => {
+          if (entries[0]?.isIntersecting) {
+            setTimeout(() => setRevealed(true), delay)
+            observer.disconnect()
+          }
+        },
+        { threshold: 0.1 }
+      )
+      observer.observe(el)
+      return () => observer.disconnect()
+    } else {
+      setTimeout(() => setRevealed(true), delay)
+      return undefined
+    }
+  }, [autoStart, delay])
+
+  const units =
+    mode === 'chars'
+      ? text.split('')
+      : mode === 'words'
+        ? text.split(' ')
+        : [text]
+
+  return React.createElement(
+    Tag,
+    {
+      ref: containerRef,
+      'data-slot': 'text-reveal',
+      className: cn('inline', className),
+      'aria-label': text,
+      style,
+    },
+    units.map((unit, i) => (
+      <span key={i} className="inline-block overflow-hidden">
+        <span
+          aria-hidden="true"
+          className="inline-block"
+          style={{
+            transform: revealed ? 'translateY(0)' : 'translateY(110%)',
+            opacity: revealed ? 1 : 0,
+            transition: `transform ${duration}ms cubic-bezier(0.16,1,0.3,1) ${i * stagger}ms, opacity ${Math.round(duration * 0.6)}ms ease ${i * stagger}ms`,
+          }}
+        >
+          {unit}
+          {mode === 'words' && i < units.length - 1 ? '\u00a0' : ''}
+        </span>
+      </span>
+    ))
+  )
+}
+TextReveal.displayName = 'TextReveal'

package/src/text/Typewriter.tsx

@@ -0,0 +1,107 @@
+'use client'
+
+import React, { useEffect, useRef, useState } from 'react'
+import { cn } from '../utils/cn'
+
+export interface TypewriterProps {
+  /** Array of strings to cycle through */
+  words: string[]
+  /** Typing speed in ms per character (default 60) */
+  typeSpeed?: number
+  /** Deleting speed in ms per character (default 30) */
+  deleteSpeed?: number
+  /** Pause after finishing a word in ms (default 1800) */
+  pauseAfter?: number
+  /** Whether to loop (default true) */
+  loop?: boolean
+  /** Show cursor (default true) */
+  cursor?: boolean
+  /** Custom cursor character (default '|') */
+  cursorChar?: string
+  as?: 'span' | 'p' | 'div' | 'h1' | 'h2' | 'h3'
+  className?: string
+  style?: React.CSSProperties
+}
+
+type Phase = 'typing' | 'pausing' | 'deleting'
+
+export function Typewriter({
+  words,
+  typeSpeed = 60,
+  deleteSpeed = 30,
+  pauseAfter = 1800,
+  loop = true,
+  cursor = true,
+  cursorChar = '|',
+  as: Tag = 'span',
+  className,
+  style,
+}: TypewriterProps) {
+  const [display, setDisplay] = useState('')
+  const [phase, setPhase] = useState<Phase>('typing')
+  const [wordIdx, setWordIdx] = useState(0)
+  const [cursorVisible, setCursorVisible] = useState(true)
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  // Cursor internal
+  useEffect(() => {
+    const id = setInterval(() => setCursorVisible((v) => !v), 530)
+    return () => clearInterval(id)
+  }, [])
+
+  // Typing machine
+  useEffect(() => {
+    if (!words.length) return undefined
+    const word = words[wordIdx] ?? ''
+
+    if (phase === 'typing') {
+      if (display.length < word.length) {
+        timerRef.current = setTimeout(
+          () => setDisplay(word.slice(0, display.length + 1)),
+          typeSpeed
+        )
+      } else {
+        timerRef.current = setTimeout(() => setPhase('pausing'), pauseAfter)
+      }
+    } else if (phase === 'pausing') {
+      setPhase('deleting')
+    } else if (phase === 'deleting') {
+      if (display.length > 0) {
+        timerRef.current = setTimeout(
+          () => setDisplay(display.slice(0, -1)),
+          deleteSpeed
+        )
+      } else {
+        const nextIdx = (wordIdx + 1) % words.length
+        if (!loop && nextIdx === 0) return undefined
+        setWordIdx(nextIdx)
+        setPhase('typing')
+      }
+    }
+
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [display, phase, wordIdx, words, typeSpeed, deleteSpeed, pauseAfter, loop])
+
+  return React.createElement(
+    Tag,
+    {
+      'data-slot': 'typewriter',
+      className: cn('inline', className),
+      'aria-label': words[wordIdx],
+      style,
+    },
+    <span aria-hidden="true">{display}</span>,
+    cursor && (
+      <span
+        aria-hidden="true"
+        className="inline-block w-[1px] ml-[1px] align-middle"
+        style={{ opacity: cursorVisible ? 1 : 0, transition: 'opacity 0.1s' }}
+      >
+        {cursorChar}
+      </span>
+    )
+  )
+}
+Typewriter.displayName = 'Typewriter'

package/src/text/index.ts

@@ -0,0 +1,8 @@
+export * from './GradientHeading'
+export * from './AnimatedNumber'
+export * from './TextReveal'
+export * from './Typewriter'
+export * from './Heading'
+export * from './Body'
+export * from './Caption'
+export * from './Code'

package/src/theme/ColorSchemeSelect.tsx

@@ -0,0 +1,74 @@
+'use client'
+
+import React from 'react'
+import { Combobox, type ComboboxOption } from '../forms/combobox'
+
+/**
+ * ColorSchemeSelect — pick an OTF theme class and apply it to
+ * <html>. Persists in localStorage under `otf-theme`. Theme classes
+ * live in `@otfdashkit/ui/styles` (linear, glass, midnight, minimal, etc.).
+ */
+
+const STORAGE_KEY = 'otf-theme'
+
+export interface ColorSchemeSelectProps {
+  options?: ComboboxOption[]
+  defaultValue?: string
+  onChange?: (themeClass: string) => void
+  className?: string
+}
+
+const DEFAULT_OPTIONS: ComboboxOption[] = [
+  { value: 'theme-linear',   label: 'Linear',   description: 'Indigo palette, Linear-like' },
+  { value: 'theme-glass',    label: 'Glass',    description: 'Warm purple glassmorphism' },
+  { value: 'theme-midnight', label: 'Midnight', description: 'Deep cosmic dark' },
+  { value: 'theme-minimal',  label: 'Minimal',  description: 'Mono/terminal palette' },
+]
+
+function readInitial(fallback: string): string {
+  if (typeof window === 'undefined') return fallback
+  try {
+    const v = localStorage.getItem(STORAGE_KEY)
+    if (v) return v
+  } catch {}
+  return fallback
+}
+
+function apply(themeClass: string) {
+  if (typeof document === 'undefined') return
+  const root = document.documentElement
+  // Strip any existing theme-* class, preserve `dark` if present
+  const preserved = Array.from(root.classList).filter(c => !c.startsWith('theme-'))
+  root.className = [...preserved, themeClass].join(' ').trim()
+}
+
+export function ColorSchemeSelect({
+  options = DEFAULT_OPTIONS,
+  defaultValue,
+  onChange,
+  className,
+}: ColorSchemeSelectProps) {
+  const fallback = defaultValue ?? options[0]?.value ?? ''
+  const [value, setValue] = React.useState<string>(() => readInitial(fallback))
+  const didMount = React.useRef(false)
+
+  React.useEffect(() => {
+    // Skip on initial mount — the app-level init script (index.html) already
+    // applied the persisted theme class. Only re-apply when the user changes it.
+    if (!didMount.current) { didMount.current = true; return }
+    apply(value)
+    try { localStorage.setItem(STORAGE_KEY, value) } catch {}
+    onChange?.(value)
+  }, [value, onChange])
+
+  return (
+    <Combobox
+      options={options}
+      value={value}
+      onChange={setValue}
+      placeholder="Select theme"
+      searchPlaceholder="Search themes"
+      className={className}
+    />
+  )
+}

package/src/theme/ThemeSwitch.tsx

@@ -0,0 +1,116 @@
+'use client'
+
+import React from 'react'
+import { Moon, Sun, Monitor } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+type Mode = 'light' | 'dark' | 'system'
+const STORAGE_KEY = 'otf-color-scheme'
+
+function readInitial(): Mode {
+  if (typeof window === 'undefined') return 'system'
+  try {
+    const v = localStorage.getItem(STORAGE_KEY)
+    if (v === 'light' || v === 'dark' || v === 'system') return v
+  } catch {}
+  return 'system'
+}
+
+function apply(mode: Mode) {
+  if (typeof document === 'undefined') return
+  const isDark =
+    mode === 'dark' ||
+    (mode === 'system' && window.matchMedia?.('(prefers-color-scheme: dark)').matches)
+  document.documentElement.classList.toggle('dark', isDark)
+}
+
+export interface ThemeSwitchProps {
+  /** Controlled initial mode. Falls back to localStorage + system. */
+  defaultMode?: Mode
+  onChange?: (mode: Mode) => void
+  className?: string
+  /** Render as a three-way segmented control (default) or a single cycling button. */
+  variant?: 'segmented' | 'button'
+}
+
+export function ThemeSwitch({ defaultMode, onChange, className, variant = 'segmented' }: ThemeSwitchProps) {
+  const [mode, setMode] = React.useState<Mode>(() => defaultMode ?? readInitial())
+  const didMount = React.useRef(false)
+
+  React.useEffect(() => {
+    // Skip on initial mount — the app-level init script (index.html) already
+    // applied the persisted preference. Only re-apply when the user changes it.
+    if (!didMount.current) { didMount.current = true; return }
+    apply(mode)
+    try { localStorage.setItem(STORAGE_KEY, mode) } catch {}
+    onChange?.(mode)
+  }, [mode, onChange])
+
+  // Re-apply when the system preference flips, if we're following it.
+  React.useEffect(() => {
+    if (mode !== 'system' || typeof window === 'undefined') return
+    const mql = window.matchMedia('(prefers-color-scheme: dark)')
+    const handler = () => apply('system')
+    mql.addEventListener('change', handler)
+    return () => mql.removeEventListener('change', handler)
+  }, [mode])
+
+  if (variant === 'button') {
+    const next: Mode = mode === 'light' ? 'dark' : mode === 'dark' ? 'system' : 'light'
+    const Icon = mode === 'light' ? Sun : mode === 'dark' ? Moon : Monitor
+    return (
+      <button
+        type="button"
+        data-slot="theme-switch"
+        aria-label={`Switch to ${next} theme`}
+        onClick={() => setMode(next)}
+        className={cn(
+          'h-9 w-9 inline-flex items-center justify-center rounded-md border border-border bg-background text-foreground hover:bg-accent transition-colors',
+          'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+          className
+        )}
+      >
+        <Icon className="h-4 w-4" />
+      </button>
+    )
+  }
+
+  const ITEMS: { mode: Mode; label: string; Icon: typeof Sun }[] = [
+    { mode: 'light',  label: 'Light',  Icon: Sun },
+    { mode: 'dark',   label: 'Dark',   Icon: Moon },
+    { mode: 'system', label: 'System', Icon: Monitor },
+  ]
+
+  return (
+    <div
+      role="radiogroup"
+      aria-label="Color scheme"
+      data-slot="theme-switch"
+      className={cn('inline-flex rounded-md border border-border bg-background p-0.5', className)}
+    >
+      {ITEMS.map(({ mode: m, label, Icon }) => {
+        const active = mode === m
+        return (
+          <button
+            key={m}
+            type="button"
+            role="radio"
+            aria-checked={active}
+            aria-label={label}
+            onClick={() => setMode(m)}
+            className={cn(
+              'inline-flex items-center justify-center gap-1.5 px-2.5 h-7 text-xs rounded transition-colors',
+              'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+              active
+                ? 'bg-foreground text-background'
+                : 'text-muted-foreground hover:text-foreground'
+            )}
+          >
+            <Icon className="h-3.5 w-3.5" />
+            {label}
+          </button>
+        )
+      })}
+    </div>
+  )
+}

package/src/theme/index.ts

@@ -0,0 +1,2 @@
+export * from './ThemeSwitch'
+export * from './ColorSchemeSelect'

package/src/themes/base.css

@@ -0,0 +1,25 @@
+/* OTF UI — shared base resets applied by every theme */
+
+*,
+*::before,
+*::after {
+  border-color: hsl(var(--border, 0 0% 89.8%));
+}
+
+body {
+  background-color: hsl(var(--background, 0 0% 100%));
+  color: hsl(var(--foreground, 0 0% 3.9%));
+  font-family: var(--font-sans, system-ui, sans-serif);
+  font-size: var(--font-size-base, 0.9375rem);
+  line-height: var(--line-height-normal, 1.5);
+  letter-spacing: var(--letter-spacing-body, 0em);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+h1, h2, h3, h4, h5, h6 {
+  font-family: var(--font-heading, var(--font-sans));
+  letter-spacing: var(--letter-spacing-heading, -0.02em);
+  line-height: var(--line-height-heading, 1.2);
+  font-weight: var(--font-weight-heading, 600);
+}