@nous-research/ui 0.14.2 → 0.16.0

package/src/ui/components/switch.stories.tsx

@@ -0,0 +1,77 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Switch } from './switch'
+import { Small } from './typography/small'
+
+function Demo({ disabled }: { disabled?: boolean }) {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <Switch checked={checked} disabled={disabled} onCheckedChange={setChecked} />
+  )
+}
+
+const meta: Meta<typeof Switch> = {
+  component: Switch,
+  title: 'Components/Switch'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Switch>
+
+export const Playground: Story = { render: () => <Demo /> }
+
+export const Disabled: Story = { render: () => <Demo disabled /> }
+
+export const NextToLabel: Story = {
+  render: () => {
+    function LabeledDemo() {
+      const [checked, setChecked] = useState(true)
+
+      return (
+        <label className="flex items-center gap-3">
+          <Small className="opacity-60 uppercase tracking-wider">
+            Enable feature
+          </Small>
+
+          <Switch checked={checked} onCheckedChange={setChecked} />
+        </label>
+      )
+    }
+
+    return <LabeledDemo />
+  }
+}
+
+export const Stack: Story = {
+  render: () => {
+    function StackDemo() {
+      const [a, setA] = useState(true)
+      const [b, setB] = useState(false)
+      const [c, setC] = useState(true)
+
+      return (
+        <div className="grid w-64 gap-3">
+          <label className="flex items-center justify-between">
+            <Small className="opacity-60 uppercase tracking-wider">Logging</Small>
+            <Switch checked={a} onCheckedChange={setA} />
+          </label>
+
+          <label className="flex items-center justify-between">
+            <Small className="opacity-60 uppercase tracking-wider">Telemetry</Small>
+            <Switch checked={b} onCheckedChange={setB} />
+          </label>
+
+          <label className="flex items-center justify-between">
+            <Small className="opacity-60 uppercase tracking-wider">Auto-update</Small>
+            <Switch checked={c} onCheckedChange={setC} />
+          </label>
+        </div>
+      )
+    }
+
+    return <StackDemo />
+  }
+}

package/src/ui/components/switch.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { type ButtonHTMLAttributes, forwardRef } from 'react'
+
+import { cn } from '../../utils'
+
+export const Switch = forwardRef<HTMLButtonElement, SwitchProps>(function Switch(
+  { checked, className, disabled, id, onCheckedChange, ...props },
+  ref
+) {
+  return (
+    <button
+      aria-checked={checked}
+      className={cn(
+        'peer inline-flex h-5 w-9 shrink-0 items-center border transition-colors cursor-pointer',
+        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        checked
+          ? 'bg-midground/15 border-midground/30'
+          : 'bg-background border-midground/20',
+        className
+      )}
+      disabled={disabled}
+      id={id}
+      onClick={() => onCheckedChange(!checked)}
+      ref={ref}
+      role="switch"
+      type="button"
+      {...props}
+    >
+      <span
+        aria-hidden
+        className={cn(
+          'pointer-events-none block h-3.5 w-3.5 transition-transform',
+          checked
+            ? 'translate-x-4 bg-midground'
+            : 'translate-x-0.5 bg-midground/40'
+        )}
+      />
+    </button>
+  )
+})
+
+interface SwitchProps
+  extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onChange'> {
+  checked: boolean
+  onCheckedChange: (checked: boolean) => void
+}

package/src/ui/components/tabs.stories.tsx

@@ -0,0 +1,101 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Tabs, TabsList, TabsTrigger } from './tabs'
+import { Small } from './typography/small'
+
+const meta: Meta<typeof Tabs> = {
+  component: Tabs,
+  title: 'Components/Tabs'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Tabs>
+
+export const Playground: Story = {
+  render: () => (
+    <div className="w-[28rem]">
+      <Tabs defaultValue="overview">
+        {(active, setActive) => (
+          <>
+            <TabsList>
+              <TabsTrigger
+                active={active === 'overview'}
+                onClick={() => setActive('overview')}
+                value="overview"
+              >
+                Overview
+              </TabsTrigger>
+
+              <TabsTrigger
+                active={active === 'metrics'}
+                onClick={() => setActive('metrics')}
+                value="metrics"
+              >
+                Metrics
+              </TabsTrigger>
+
+              <TabsTrigger
+                active={active === 'logs'}
+                onClick={() => setActive('logs')}
+                value="logs"
+              >
+                Logs
+              </TabsTrigger>
+
+              <TabsTrigger
+                active={active === 'settings'}
+                onClick={() => setActive('settings')}
+                value="settings"
+              >
+                Settings
+              </TabsTrigger>
+            </TabsList>
+
+            <div className="p-4 border border-midground/10 bg-background-base">
+              <Small className="opacity-60">
+                Active panel: <span className="opacity-100">{active}</span>
+              </Small>
+            </div>
+          </>
+        )}
+      </Tabs>
+    </div>
+  )
+}
+
+export const TwoTabs: Story = {
+  render: () => (
+    <div className="w-80">
+      <Tabs defaultValue="local">
+        {(active, setActive) => (
+          <>
+            <TabsList>
+              <TabsTrigger
+                active={active === 'local'}
+                onClick={() => setActive('local')}
+                value="local"
+              >
+                Local
+              </TabsTrigger>
+
+              <TabsTrigger
+                active={active === 'remote'}
+                onClick={() => setActive('remote')}
+                value="remote"
+              >
+                Remote
+              </TabsTrigger>
+            </TabsList>
+
+            <div className="p-4 border border-midground/10 bg-background-base">
+              <Small className="opacity-60">
+                Active panel: <span className="opacity-100">{active}</span>
+              </Small>
+            </div>
+          </>
+        )}
+      </Tabs>
+    </div>
+  )
+}

package/src/ui/components/tabs.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import {
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+  useState
+} from 'react'
+
+import { cn } from '../../utils'
+
+export function Tabs({ children, className, defaultValue }: TabsProps) {
+  const [active, setActive] = useState(defaultValue)
+
+  return (
+    <div className={cn('flex flex-col gap-4', className)}>
+      {children(active, setActive)}
+    </div>
+  )
+}
+
+export function TabsList({ className, ...props }: HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'inline-flex h-9 items-center justify-start border-b border-midground/15 text-text-secondary',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function TabsTrigger({
+  active,
+  className,
+  value: _value,
+  ...props
+}: TabsTriggerProps) {
+  return (
+    <button
+      className={cn(
+        'relative inline-flex items-center justify-center whitespace-nowrap px-3 py-1.5',
+        'font-mondwest text-display text-xs tracking-[0.1em] transition-all cursor-pointer',
+        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30',
+        active
+          ? 'text-midground after:absolute after:bottom-0 after:left-0 after:right-0 after:h-px after:bg-midground'
+          : 'text-text-secondary hover:text-midground',
+        className
+      )}
+      type="button"
+      {...props}
+    />
+  )
+}
+
+interface TabsProps {
+  children: (active: string, setActive: (value: string) => void) => ReactNode
+  className?: string
+  defaultValue: string
+}
+
+interface TabsTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  active: boolean
+  value: string
+}

package/src/ui/components/terminal-demo.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  TerminalDemo,
+  type TerminalDemoStep
+} from './terminal-demo'
+
+const SEQUENCE: TerminalDemoStep[] = [
+  { text: '❯ ', type: 'prompt' },
+  {
+    delay: 30,
+    text: 'Research the latest approaches to GRPO training and write a summary',
+    type: 'type'
+  },
+  { ms: 600, type: 'pause' },
+  {
+    lines: [
+      '',
+      '<span class="opacity-50">  web_search "GRPO reinforcement learning"         1.2s</span>',
+      '<span class="opacity-50">  web_extract arxiv.org/abs/2402.03300             3.1s</span>',
+      '<span class="opacity-50">  write_file ~/research/grpo-summary.md            0.1s</span>'
+    ],
+    type: 'output'
+  },
+  { ms: 500, type: 'pause' },
+  {
+    lines: [
+      '',
+      '<span class="opacity-70">Done! I\'ve written a summary covering:</span>',
+      '',
+      '<span class="opacity-70">  <span class="text-midground">✓</span> GRPO\'s group-relative advantage</span>',
+      '<span class="opacity-70">  <span class="text-midground">✓</span> Comparison with PPO/DPO</span>',
+      '',
+      '<span class="opacity-70">Saved to</span> <span class="text-midground">~/research/grpo-summary.md</span>'
+    ],
+    type: 'output'
+  },
+  { ms: 2500, type: 'pause' },
+  { type: 'clear' }
+]
+
+const meta: Meta<typeof TerminalDemo> = {
+  args: { label: 'Hermes', sequence: SEQUENCE },
+  component: TerminalDemo,
+  title: 'Components/TerminalDemo'
+}
+
+export default meta
+
+type Story = StoryObj<typeof TerminalDemo>
+
+export const Default: Story = {
+  render: args => (
+    <div className="w-[640px]">
+      <TerminalDemo {...args} />
+    </div>
+  )
+}
+
+export const TallerWindow: Story = {
+  args: { height: 480, label: 'shell' },
+  render: args => (
+    <div className="w-[640px]">
+      <TerminalDemo {...args} />
+    </div>
+  )
+}

package/src/ui/components/terminal-demo.tsx

@@ -0,0 +1,189 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+import { cn } from '../../utils'
+
+function sleep(ms: number) {
+  return new Promise<void>(resolve => setTimeout(resolve, ms))
+}
+
+export function TerminalDemo({
+  ariaLabel = 'Terminal Demo',
+  className,
+  height = 320,
+  label = 'Terminal',
+  loopDelayMs = 1000,
+  outputLineDelayMs = 50,
+  sequence
+}: TerminalDemoProps) {
+  const bodyRef = useRef<HTMLDivElement>(null)
+  const startedRef = useRef(false)
+  const [html, setHtml] = useState('')
+
+  const runDemo = useCallback(async () => {
+    if (startedRef.current) {
+      return
+    }
+
+    startedRef.current = true
+    let content = ''
+
+    const render = (h: string) => {
+      content = h
+      setHtml(h)
+    }
+
+    for (;;) {
+      for (const step of sequence) {
+        switch (step.type) {
+          case 'clear':
+            content = ''
+            render('')
+
+            break
+
+          case 'output':
+            for (const line of step.lines) {
+              render(content + '\n' + line)
+              await sleep(outputLineDelayMs)
+            }
+
+            break
+
+          case 'pause':
+            await sleep(step.ms)
+
+            break
+
+          case 'prompt':
+            render(content + `<span class="text-midground">${step.text}</span>`)
+
+            break
+
+          case 'type':
+            for (const char of step.text) {
+              render(content + char)
+              await sleep(step.delay ?? 30)
+            }
+
+            break
+        }
+      }
+
+      content = ''
+      render('')
+      await sleep(loopDelayMs)
+    }
+  }, [loopDelayMs, outputLineDelayMs, sequence])
+
+  useEffect(() => {
+    const el = bodyRef.current?.closest('[data-demo-root]')
+
+    if (!el) {
+      return
+    }
+
+    const observer = new IntersectionObserver(
+      entries => {
+        entries.forEach(entry => {
+          if (entry.isIntersecting) {
+            runDemo()
+          }
+        })
+      },
+      { threshold: 0.3 }
+    )
+
+    observer.observe(el)
+
+    return () => observer.disconnect()
+  }, [runDemo])
+
+  useEffect(() => {
+    if (bodyRef.current) {
+      bodyRef.current.scrollTop = bodyRef.current.scrollHeight
+    }
+  }, [html])
+
+  return (
+    <div
+      aria-label={ariaLabel}
+      className={cn('border-4 border-double border-inherit', className)}
+      data-demo-root
+      role="img"
+    >
+      <div className="flex items-center gap-3 border-b border-current/10 px-3 py-2">
+        <div className="flex gap-1.5">
+          <span
+            className="bg-midground size-2 rounded-full"
+            style={{ mixBlendMode: 'plus-lighter' }}
+          />
+
+          <span className="bg-midground/60 size-2 rounded-full" />
+          <span className="bg-midground/30 size-2 rounded-full" />
+        </div>
+
+        <span className="font-courier text-display text-xs tracking-widest text-text-tertiary">
+          {label}
+        </span>
+      </div>
+
+      <div
+        className={cn(
+          'overflow-x-hidden overflow-y-auto whitespace-pre-wrap',
+          'font-courier p-4 text-[0.75rem] leading-[1.7] normal-case'
+        )}
+        dangerouslySetInnerHTML={{
+          __html:
+            html +
+            '<span class="blink inline-block dither ml-0.5 h-[1em] w-[1ch]"></span>'
+        }}
+        ref={bodyRef}
+        style={{ height }}
+      />
+    </div>
+  )
+}
+
+interface ClearStep {
+  type: 'clear'
+}
+
+interface OutputStep {
+  lines: string[]
+  type: 'output'
+}
+
+interface PauseStep {
+  ms: number
+  type: 'pause'
+}
+
+interface PromptStep {
+  text: string
+  type: 'prompt'
+}
+
+interface TerminalDemoProps {
+  ariaLabel?: string
+  className?: string
+  height?: number | string
+  label?: string
+  loopDelayMs?: number
+  outputLineDelayMs?: number
+  sequence: TerminalDemoStep[]
+}
+
+export type TerminalDemoStep =
+  | ClearStep
+  | OutputStep
+  | PauseStep
+  | PromptStep
+  | TypeStep
+
+interface TypeStep {
+  delay?: number
+  text: string
+  type: 'type'
+}

package/src/ui/components/theme-toggle.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { HamburgerIcon } from './icons'
+import { ThemeToggle } from './theme-toggle'
+import { Small } from './typography/small'
+
+const meta: Meta<typeof ThemeToggle> = {
+  component: ThemeToggle,
+  title: 'Components/ThemeToggle'
+}
+
+export default meta
+
+type Story = StoryObj<typeof ThemeToggle>
+
+export const Default: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <Small className="opacity-50">Theme</Small>
+
+      <ThemeToggle />
+    </div>
+  )
+}
+
+export const WithHamburger: Story = {
+  name: 'Beside Hamburger',
+  render: () => {
+    const [open, setOpen] = useState(false)
+
+    return (
+      <div className="flex items-center gap-3">
+        <ThemeToggle />
+
+        <button
+          aria-label={open ? 'Close menu' : 'Open menu'}
+          className="cursor-pointer bg-transparent p-2"
+          onClick={() => setOpen(v => !v)}
+          type="button"
+        >
+          <HamburgerIcon open={open} />
+        </button>
+      </div>
+    )
+  }
+}

package/src/ui/components/theme-toggle.tsx

@@ -0,0 +1,66 @@
+'use client'
+
+import { useStore } from '@nanostores/react'
+
+import { cn } from '../../utils'
+
+import { $lightMode, toggleLens } from './overlays'
+
+export function ThemeToggle({ className, style }: ThemeToggleProps) {
+  const light = useStore($lightMode)
+
+  return (
+    <button
+      aria-label={light ? 'Switch to dark mode' : 'Switch to light mode'}
+      className={cn(
+        'relative flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full',
+        'border border-current/25 bg-current/8 transition-colors',
+        'hover:bg-current/15',
+        className
+      )}
+      onClick={toggleLens}
+      style={style}
+      type="button"
+    >
+      <svg
+        className="absolute left-1 size-3.5 opacity-40"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        viewBox="0 0 24 24"
+      >
+        <circle cx={12} cy={12} r={5} />
+
+        <path d="M12 1v2M12 21v2M4.22 4.22l1.42 1.42M18.36 18.36l1.42 1.42M1 12h2M21 12h2M4.22 19.78l1.42-1.42M18.36 5.64l1.42-1.42" />
+      </svg>
+
+      <svg
+        className="absolute right-1 size-3.5 opacity-40"
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth={2}
+        viewBox="0 0 24 24"
+      >
+        <path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z" />
+      </svg>
+
+      <span
+        aria-hidden
+        className={cn(
+          'bg-midground absolute size-4 rounded-full',
+          'transition-transform duration-200 ease-out'
+        )}
+        style={{ transform: `translateX(${light ? 2 : 22}px)` }}
+      />
+    </button>
+  )
+}
+
+interface ThemeToggleProps {
+  className?: string
+  style?: React.CSSProperties
+}