@nous-research/ui 0.16.0 → 0.17.0

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

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Button } from './button'
+import { Checkbox } from './checkbox'
+import { Input } from './input'
+import { Label } from './label'
+import { Select, SelectOption } from './select'
+import { Separator } from './separator'
+import { Switch } from './switch'
+
+const meta: Meta = {
+  title: 'Components/Forms/All Forms'
+}
+
+export default meta
+
+type Story = StoryObj
+
+export const AllFormControls: Story = {
+  render: () => {
+    function FormDemo() {
+      const [name, setName] = useState('Hermes')
+      const [email, setEmail] = useState('hermes@nousresearch.com')
+      const [provider, setProvider] = useState('anthropic')
+      const [logging, setLogging] = useState(true)
+      const [telemetry, setTelemetry] = useState(false)
+      const [terms, setTerms] = useState(false)
+      const [newsletter, setNewsletter] = useState(true)
+
+      return (
+        <div className="flex w-full max-w-lg flex-col gap-6">
+          <div className="flex flex-col gap-1">
+            <h2 className="font-expanded text-sm font-bold tracking-[0.08em] uppercase">
+              Form Controls
+            </h2>
+
+            <p className="font-mondwest text-xs text-midground/60">
+              All form primitives from the design system.
+            </p>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Text Inputs</Label>
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="form-name">Name</Label>
+              <Input
+                id="form-name"
+                onChange={e => setName(e.target.value)}
+                placeholder="Enter your name"
+                value={name}
+              />
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="form-email">Email</Label>
+              <Input
+                id="form-email"
+                onChange={e => setEmail(e.target.value)}
+                placeholder="Enter your email"
+                type="email"
+                value={email}
+              />
+            </div>
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="form-disabled">Disabled Input</Label>
+              <Input
+                disabled
+                id="form-disabled"
+                placeholder="Cannot edit"
+                value="Read-only value"
+              />
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Select</Label>
+
+            <div className="flex flex-col gap-1.5">
+              <Label htmlFor="form-provider">Provider</Label>
+
+              <Select
+                onValueChange={setProvider}
+                placeholder="Choose a provider…"
+                value={provider}
+              >
+                <SelectOption value="openai">OpenAI</SelectOption>
+                <SelectOption value="anthropic">Anthropic</SelectOption>
+                <SelectOption value="google">Google</SelectOption>
+                <SelectOption value="mistral">Mistral</SelectOption>
+              </Select>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Switches</Label>
+
+            <label className="flex items-center justify-between">
+              <span className="text-sm">Enable logging</span>
+              <Switch checked={logging} onCheckedChange={setLogging} />
+            </label>
+
+            <label className="flex items-center justify-between">
+              <span className="text-sm">Send telemetry</span>
+              <Switch checked={telemetry} onCheckedChange={setTelemetry} />
+            </label>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Checkboxes</Label>
+
+            <div className="flex items-center gap-2.5">
+              <Checkbox
+                checked={terms}
+                id="form-terms"
+                onCheckedChange={setTerms}
+              />
+
+              <label className="cursor-pointer text-sm" htmlFor="form-terms">
+                Accept terms and conditions
+              </label>
+            </div>
+
+            <div className="flex items-center gap-2.5">
+              <Checkbox
+                checked={newsletter}
+                id="form-newsletter"
+                onCheckedChange={setNewsletter}
+              />
+
+              <label className="cursor-pointer text-sm" htmlFor="form-newsletter">
+                Subscribe to newsletter
+              </label>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex flex-col gap-4">
+            <Label className="text-midground/50">Buttons</Label>
+
+            <div className="flex flex-wrap gap-2">
+              <Button>Primary</Button>
+              <Button outlined>Outlined</Button>
+              <Button invert>Inverted</Button>
+              <Button destructive>Destructive</Button>
+              <Button disabled>Disabled</Button>
+            </div>
+          </div>
+
+          <Separator />
+
+          <div className="flex items-center justify-end gap-2">
+            <Button outlined>Cancel</Button>
+            <Button>Save Changes</Button>
+          </div>
+        </div>
+      )
+    }
+
+    return <FormDemo />
+  }
+}

package/src/ui/components/graphs/index.stories.tsx

@@ -24,7 +24,7 @@ const BAR_DATA = (() => {
 
 const meta = {
   parameters: { layout: 'padded' },
-  title: 'Components/Graphs'
+  title: 'Components/Data Display/Graphs'
 } satisfies Meta
 
 export default meta

package/src/ui/components/hover-bg.stories.tsx

@@ -5,7 +5,7 @@ import { Typography } from './typography'
 
 const meta = {
   component: HoverBg,
-  title: 'Components/HoverBg'
+  title: 'Components/Layout/HoverBg'
 } satisfies Meta<typeof HoverBg>
 
 export default meta

package/src/ui/components/image-distortion.stories.tsx

@@ -8,7 +8,7 @@ import { ImageDistortion } from './image-distortion'
 const meta: Meta<typeof ImageDistortion> = {
   args: { active: true, src: fillerBg.src ?? (fillerBg as unknown as string) },
   component: ImageDistortion,
-  title: 'Components/ImageDistortion'
+  title: 'Components/Effects/ImageDistortion'
 }
 
 export default meta

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

@@ -0,0 +1,39 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Input } from './input'
+import { Label } from './label'
+
+const meta: Meta<typeof Input> = {
+  component: Input,
+  title: 'Components/Forms/Input'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Input>
+
+export const Playground: Story = {
+  render: () => <Input placeholder="Enter a value…" />
+}
+
+export const Disabled: Story = {
+  render: () => <Input disabled placeholder="Disabled" value="locked" />
+}
+
+export const WithLabel: Story = {
+  render: () => (
+    <div className="grid w-64 gap-1.5">
+      <Label htmlFor="demo-input">Model name</Label>
+      <Input id="demo-input" placeholder="e.g. gpt-4o" />
+    </div>
+  )
+}
+
+export const NumberInput: Story = {
+  render: () => (
+    <div className="grid w-40 gap-1.5">
+      <Label htmlFor="demo-number">Temperature</Label>
+      <Input id="demo-number" type="number" step={0.1} defaultValue={0.7} />
+    </div>
+  )
+}

package/src/ui/components/input.tsx

@@ -0,0 +1,20 @@
+import { cn } from '../../utils'
+
+export function Input({
+  className,
+  ...props
+}: React.InputHTMLAttributes<HTMLInputElement>) {
+  return (
+    <input
+      className={cn(
+        'flex h-9 w-full border border-midground/15 bg-background/40 px-3 py-1 font-courier text-sm transition-colors',
+        'placeholder:text-midground/50',
+        'focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-midground/30 focus-visible:border-midground/25',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Input } from './input'
+import { Label } from './label'
+
+const meta: Meta<typeof Label> = {
+  component: Label,
+  title: 'Components/Forms/Label'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Label>
+
+export const Playground: Story = {
+  render: () => <Label>Field label</Label>
+}
+
+export const WithInput: Story = {
+  render: () => (
+    <div className="grid w-64 gap-1.5">
+      <Label htmlFor="label-demo">API key</Label>
+      <Input id="label-demo" type="password" placeholder="sk-…" />
+    </div>
+  )
+}

package/src/ui/components/label.tsx

@@ -0,0 +1,16 @@
+import { cn } from '../../utils'
+
+export function Label({
+  className,
+  ...props
+}: React.LabelHTMLAttributes<HTMLLabelElement>) {
+  return (
+    <label
+      className={cn(
+        'font-mondwest text-xs tracking-[0.1em] uppercase leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
+        className
+      )}
+      {...props}
+    />
+  )
+}

package/src/ui/components/list-item.stories.tsx

@@ -34,7 +34,7 @@ function Demo() {
 
 const meta: Meta<typeof ListItem> = {
   component: ListItem,
-  title: 'Components/ListItem'
+  title: 'Components/Data Display/ListItem'
 }
 
 export default meta

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

@@ -115,7 +115,7 @@ const meta: Meta<typeof Poster> = {
     },
     layout: 'centered'
   },
-  title: 'Components/Poster'
+  title: 'Components/Data Display/Poster'
 }
 
 export default meta

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

@@ -7,7 +7,7 @@ import { Progress } from './progress'
 const meta: Meta<typeof Progress> = {
   args: { animate: true, speed: 0.4, value: 42 },
   component: Progress,
-  title: 'Components/Progress'
+  title: 'Components/Feedback/Progress'
 }
 
 export default meta

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

@@ -7,7 +7,7 @@ import { Small } from './typography/small'
 
 const meta: Meta<typeof Scramble> = {
   component: Scramble,
-  title: 'Components/Scramble'
+  title: 'Components/Effects/Scramble'
 }
 
 export default meta

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

@@ -37,7 +37,7 @@ function Demo({ size }: { size?: 'md' | 'sm' }) {
 
 const meta: Meta<typeof Segmented> = {
   component: Segmented,
-  title: 'Components/Segmented'
+  title: 'Components/Forms/Segmented'
 }
 
 export default meta

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

@@ -41,7 +41,7 @@ function Demo({
 
 const meta: Meta<typeof Select> = {
   component: Select,
-  title: 'Components/Select'
+  title: 'Components/Forms/Select'
 }
 
 export default meta

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Separator } from './separator'
+import { Small } from './typography/small'
+
+const meta: Meta<typeof Separator> = {
+  component: Separator,
+  title: 'Components/Layout/Separator'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Separator>
+
+export const Horizontal: Story = {
+  render: () => (
+    <div className="grid w-64 gap-3">
+      <Small className="opacity-60 uppercase tracking-wider">Section A</Small>
+      <Separator />
+      <Small className="opacity-60 uppercase tracking-wider">Section B</Small>
+    </div>
+  )
+}
+
+export const Vertical: Story = {
+  render: () => (
+    <div className="flex h-8 items-center gap-3">
+      <Small className="opacity-60 uppercase tracking-wider">Left</Small>
+      <Separator orientation="vertical" />
+      <Small className="opacity-60 uppercase tracking-wider">Right</Small>
+    </div>
+  )
+}

package/src/ui/components/separator.tsx

@@ -0,0 +1,24 @@
+import { cn } from '../../utils'
+
+export function Separator({
+  className,
+  orientation = 'horizontal',
+  ...props
+}: SeparatorProps) {
+  return (
+    <div
+      aria-orientation={orientation}
+      role="separator"
+      className={cn(
+        'shrink-0 bg-midground/15',
+        orientation === 'horizontal' ? 'h-px w-full' : 'h-full w-px',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+interface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: 'horizontal' | 'vertical'
+}

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

@@ -26,7 +26,7 @@ const NAMES = [
 
 const meta: Meta<typeof Spinner> = {
   component: Spinner,
-  title: 'Components/Spinner'
+  title: 'Components/Feedback/Spinner'
 }
 
 export default meta

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

@@ -4,7 +4,7 @@ import { Stats } from './stats'
 
 const meta = {
   component: Stats,
-  title: 'Components/Stats'
+  title: 'Components/Feedback/Stats'
 } satisfies Meta<typeof Stats>
 
 export default meta

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

@@ -14,7 +14,7 @@ function Demo({ disabled }: { disabled?: boolean }) {
 
 const meta: Meta<typeof Switch> = {
   component: Switch,
-  title: 'Components/Switch'
+  title: 'Components/Forms/Switch'
 }
 
 export default meta

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

@@ -5,7 +5,7 @@ import { Small } from './typography/small'
 
 const meta: Meta<typeof Tabs> = {
   component: Tabs,
-  title: 'Components/Tabs'
+  title: 'Components/Forms/Tabs'
 }
 
 export default meta

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

@@ -42,7 +42,7 @@ const SEQUENCE: TerminalDemoStep[] = [
 const meta: Meta<typeof TerminalDemo> = {
   args: { label: 'Hermes', sequence: SEQUENCE },
   component: TerminalDemo,
-  title: 'Components/TerminalDemo'
+  title: 'Components/Data Display/TerminalDemo'
 }
 
 export default meta

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

@@ -7,7 +7,7 @@ import { Small } from './typography/small'
 
 const meta: Meta<typeof ThemeToggle> = {
   component: ThemeToggle,
-  title: 'Components/ThemeToggle'
+  title: 'Components/Layout/ThemeToggle'
 }
 
 export default meta

package/src/ui/components/tier-card.stories.tsx

@@ -121,7 +121,7 @@ const meta = {
     },
     layout: 'fullscreen'
   },
-  title: 'Components/TierCard'
+  title: 'Components/Data Display/TierCard'
 } satisfies Meta<typeof TierCard>
 
 export default meta

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

@@ -0,0 +1,55 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { useToast } from '../../hooks/use-toast'
+import { Button } from './button'
+import { Toast } from './toast'
+
+const meta: Meta<typeof Toast> = {
+  component: Toast,
+  title: 'Components/Feedback/Toast'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Toast>
+
+export const Success: Story = {
+  render: () => {
+    function Demo() {
+      const { showToast, toast } = useToast()
+
+      return (
+        <>
+          <Button onClick={() => showToast('Operation succeeded', 'success')}>
+            Show success toast
+          </Button>
+          <Toast toast={toast} />
+        </>
+      )
+    }
+
+    return <Demo />
+  }
+}
+
+export const Error: Story = {
+  render: () => {
+    function Demo() {
+      const { showToast, toast } = useToast()
+
+      return (
+        <>
+          <Button
+            destructive
+            onClick={() => showToast('Something went wrong', 'error')}
+          >
+            Show error toast
+          </Button>
+          <Toast toast={toast} />
+        </>
+      )
+    }
+
+    return <Demo />
+  }
+}

package/src/ui/components/toast.tsx

@@ -0,0 +1,49 @@
+'use client'
+
+import { useEffect, useState } from 'react'
+import { createPortal } from 'react-dom'
+
+import { cn } from '../../utils'
+
+export function Toast({ toast }: ToastProps) {
+  const [visible, setVisible] = useState(false)
+  const [current, setCurrent] = useState(toast)
+
+  useEffect(() => {
+    if (toast) {
+      setCurrent(toast)
+      setVisible(true)
+    } else {
+      setVisible(false)
+      const timer = setTimeout(() => setCurrent(null), 200)
+      return () => clearTimeout(timer)
+    }
+  }, [toast])
+
+  if (!current || typeof document === 'undefined') return null
+
+  return createPortal(
+    <div
+      aria-live="polite"
+      className={cn(
+        'fixed top-16 right-4 z-50 border px-4 py-2.5 font-courier text-xs tracking-wider uppercase backdrop-blur-sm',
+        current.type === 'success'
+          ? 'bg-success/15 text-success border-success/30'
+          : 'bg-destructive/15 text-destructive border-destructive/30'
+      )}
+      role="status"
+      style={{
+        animation: visible
+          ? 'toast-in 200ms ease-out forwards'
+          : 'toast-out 200ms ease-in forwards'
+      }}
+    >
+      {current.message}
+    </div>,
+    document.body
+  )
+}
+
+interface ToastProps {
+  toast: { message: string; type: 'error' | 'success' } | null
+}

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

@@ -13,7 +13,7 @@ const meta = {
       }
     }
   },
-  title: 'Components/TV'
+  title: 'Components/Effects/TV'
 } satisfies Meta<typeof TV>
 
 export default meta

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

@@ -11,7 +11,7 @@ const ADDRESSES = [
 
 const meta = {
   component: Watchlist,
-  title: 'Components/Watchlist'
+  title: 'Components/Data Display/Watchlist'
 } satisfies Meta<typeof Watchlist>
 
 export default meta

package/src/ui/globals.css

@@ -1,8 +1,6 @@
 @source ".";
 @import './components/fit-text/fit-text.css' layer(components);
 @import './components/grid/grid.css' layer(components);
-@import './components/modal/modal.css' layer(components);
-
 @view-transition {
   navigation: auto;
 }
@@ -253,6 +251,20 @@
   text-underline-position: from-font;
 }
 
+@keyframes toast-in {
+  from {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
+@keyframes toast-out {
+  to {
+    opacity: 0;
+    transform: translateX(1rem);
+  }
+}
+
 @keyframes gradient-stroke {
   0% {
     background-position: 15% 15%;

package/dist/ui/components/modal/index.d.ts

@@ -1,8 +0,0 @@
-export declare function Modal({ children, className, id, trigger, ...props }: ModalProps): import("react").JSX.Element;
-interface ModalProps extends Omit<React.ComponentProps<'dialog'>, 'open'> {
-    trigger: (controls: {
-        close: () => void;
-        open: () => void;
-    }) => React.ReactNode;
-}
-export {};