@nous-research/ui 0.15.0 → 0.17.0

package/src/ui/components/stats.tsx

@@ -0,0 +1,53 @@
+import React, { ReactNode } from 'react'
+
+import { cn } from '../../utils'
+
+import { Typography } from './typography'
+
+export function Stats({ className, items, flip, ...props }: StatsProps) {
+  return (
+    <div className={cn('flex w-full flex-col gap-5', className)} {...props}>
+      {items.map(({ label, value }) => {
+        const valueText = (
+          <Typography
+            className="text-xs leading-[1.4] tracking-widest"
+            expanded
+          >
+            {typeof value === 'string' ? value : value.node}
+          </Typography>
+        )
+        const labelText = (
+          <Typography className="leading-none tracking-[0.2em] opacity-60" mono>
+            {typeof label === 'string' ? label : label.node}
+          </Typography>
+        )
+
+        return (
+          <div
+            className="text-midground text-display grid grid-cols-[auto_1fr_auto] items-center gap-2.5"
+            key={(typeof label === 'string' ? label : label.key ) + '@@@'+(typeof value === 'string' ? value : value.key)}
+          >
+            {flip ? labelText : valueText}
+
+            <Typography
+              className="min-w-0 overflow-hidden text-[13px] leading-[1.4] tracking-[0.4em] opacity-20"
+              expanded
+            >
+              {'·'.repeat(100)}
+            </Typography>
+
+            {flip ? valueText : labelText}
+          </div>
+        )
+      })}
+    </div>
+  )
+}
+
+interface StatsProps extends React.ComponentProps<'div'> {
+  items: {
+    label: string | {key: string, node: ReactNode}
+    value: string | {key: string, node: ReactNode}
+  }[]
+  flip?: boolean
+}

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/Forms/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/Forms/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/Data Display/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/Layout/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>
+    )
+  }
+}