@nous-research/ui 0.16.0 → 0.17.0

package/src/hooks/use-toast.ts

@@ -0,0 +1,29 @@
+'use client'
+
+import { useCallback, useEffect, useRef, useState } from 'react'
+
+export function useToast(duration = 3000) {
+  const [toast, setToast] = useState<{
+    message: string
+    type: 'error' | 'success'
+  } | null>(null)
+
+  const timerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  useEffect(() => {
+    return () => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+    }
+  }, [])
+
+  const showToast = useCallback(
+    (message: string, type: 'error' | 'success') => {
+      if (timerRef.current) clearTimeout(timerRef.current)
+      setToast({ message, type })
+      timerRef.current = setTimeout(() => setToast(null), duration)
+    },
+    [duration]
+  )
+
+  return { showToast, toast }
+}

package/src/index.ts

@@ -1,13 +1,16 @@
 export { AnimatedCount, useAnimatedCount } from './ui/components/animated-count'
 export { AsciiSkeleton, Scramble as AsciiScramble } from './ui/components/ascii'
 export { Badge } from './ui/components/badge'
+export { BottomSheet } from './ui/components/bottom-sheet'
 export { NousGirlBadge } from './ui/components/badges/nous-girl'
 export { BlendMode, useBlendMode, withBlendMode } from './ui/components/blend-mode'
 export type { BlendModeProps } from './ui/components/blend-mode'
 export { Blink } from './ui/components/blink'
 export { Button } from './ui/components/button'
+export { Card, CardContent, CardDescription, CardHeader, CardTitle } from './ui/components/card'
 export { Checkbox } from './ui/components/checkbox'
 export { CommandBlock, CopyButton } from './ui/components/command-block'
+export { ConfirmDialog } from './ui/components/confirm-dialog'
 export { Cursor } from './ui/components/cursor'
 export { DropdownMenu } from './ui/components/dropdown-menu'
 export { FitText } from './ui/components/fit-text'
@@ -19,9 +22,22 @@ export { DiscordIcon } from './ui/components/icons/discord'
 export { GitHubIcon } from './ui/components/icons/github'
 export { ImageDistortion } from './ui/components/image-distortion'
 export type { AutoPlayPattern } from './ui/components/image-distortion'
+export { Input } from './ui/components/input'
+export { Label } from './ui/components/label'
 export { LevaClient } from './ui/components/leva-client'
 export { ListItem } from './ui/components/list-item'
-export { Modal } from './ui/components/modal'
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+} from './ui/components/dialog'
 export { FilterGroup, Segmented } from './ui/components/segmented'
 export { Switch } from './ui/components/switch'
 export { Tabs, TabsList, TabsTrigger } from './ui/components/tabs'
@@ -56,12 +72,14 @@ export { SceneCanvas } from './ui/components/scene-canvas'
 export { Scramble } from './ui/components/scramble'
 export { Select, SelectOption } from './ui/components/select'
 export { SelectionSwitcher } from './ui/components/selection-switcher'
+export { Separator } from './ui/components/separator'
 export { Spinner } from './ui/components/spinner'
 export { Stats } from './ui/components/stats'
 export { TerminalDemo } from './ui/components/terminal-demo'
 export type { TerminalDemoStep } from './ui/components/terminal-demo'
 export { ThemeToggle } from './ui/components/theme-toggle'
 export { TierCard } from './ui/components/tier-card'
+export { Toast } from './ui/components/toast'
 export type { TierCardPrice, TierCardProps } from './ui/components/tier-card'
 export { TV } from './ui/components/tv'
 export { Watchlist } from './ui/components/watchlist'
@@ -99,7 +117,9 @@ export { polyRef } from './utils'
 export type { PolyComponent, PolyProps, PolyRef } from './utils'
 export { hexToRgb, rgbToHex, colorDodge, colorMix } from './utils/color'
 
+export { useBelowBreakpoint } from './hooks/use-below-breakpoint'
 export { useCappedFrame } from './hooks/use-capped-frame'
+export { useConfirmDelete } from './hooks/use-confirm-delete'
 export { useCssVarDims } from './hooks/use-css-var-dims'
 export { $gpuTier, useGpuTier } from './hooks/use-gpu-tier'
 export {
@@ -107,3 +127,4 @@ export {
   getControlAtom,
   setControlValue
 } from './hooks/use-smooth-controls'
+export { useToast } from './hooks/use-toast'

package/src/ui/components/animated-count.stories.tsx

@@ -12,7 +12,7 @@ import { Small } from './typography/small'
 const meta = {
   args: { damping: 1, duration: 1600, value: 84210 },
   component: AnimatedCount,
-  title: 'Components/AnimatedCount'
+  title: 'Components/Feedback/AnimatedCount'
 } satisfies Meta<typeof AnimatedCount>
 
 export default meta

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

@@ -4,7 +4,7 @@ import { AsciiSkeleton, Scramble } from './ascii'
 import { Typography } from './typography'
 
 const meta = {
-  title: 'Components/Ascii'
+  title: 'Components/Effects/Ascii'
 } satisfies Meta
 
 export default meta

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

@@ -6,7 +6,7 @@ import { NousGirlBadge } from './badges/nous-girl'
 const meta = {
   args: { children: 'LIVE' },
   component: Badge,
-  title: 'Components/Badge'
+  title: 'Components/Feedback/Badge'
 } satisfies Meta<typeof Badge>
 
 export default meta

package/src/ui/components/blend-mode.stories.tsx

@@ -4,7 +4,7 @@ import { BlendMode } from './blend-mode'
 
 const meta: Meta<typeof BlendMode> = {
   component: BlendMode,
-  title: 'Components/BlendMode'
+  title: 'Components/Effects/BlendMode'
 }
 
 export default meta

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

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

package/src/ui/components/bottom-sheet.stories.tsx

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { BottomSheet } from './bottom-sheet'
+import { Button } from './button'
+import { ListItem } from './list-item'
+
+const meta: Meta<typeof BottomSheet> = {
+  component: BottomSheet,
+  title: 'Components/Overlays/BottomSheet'
+}
+
+export default meta
+
+type Story = StoryObj<typeof BottomSheet>
+
+export const Default: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(false)
+
+      return (
+        <>
+          <Button onClick={() => setOpen(true)}>Open sheet</Button>
+
+          <BottomSheet
+            onClose={() => setOpen(false)}
+            open={open}
+            title="Pick an option"
+          >
+            {['Alpha', 'Beta', 'Gamma', 'Delta'].map(item => (
+              <ListItem key={item} onClick={() => setOpen(false)}>
+                {item}
+              </ListItem>
+            ))}
+          </BottomSheet>
+        </>
+      )
+    }
+
+    return <Demo />
+  }
+}

package/src/ui/components/bottom-sheet.tsx

@@ -0,0 +1,227 @@
+'use client'
+
+import {
+  type PointerEvent as ReactPointerEvent,
+  type ReactNode,
+  useEffect,
+  useRef,
+  useState
+} from 'react'
+import { createPortal } from 'react-dom'
+
+import { cn } from '../../utils'
+import { Typography } from './typography'
+
+const CLOSE_DRAG_MIN_PX = 72
+const CLOSE_DRAG_RATIO = 0.18
+const SHEET_TRANSITION_MS = 280
+
+/**
+ * Mobile-first bottom sheet with slide + fade enter/exit, drag-to-dismiss
+ * handle, body scroll lock, and reduced-motion support. Portaled to
+ * `document.body` to escape ancestor stacking contexts.
+ */
+export function BottomSheet({
+  backdropDismissLabel = 'Dismiss',
+  children,
+  onClose,
+  open,
+  title
+}: BottomSheetProps) {
+  const [renderPortal, setRenderPortal] = useState(open)
+  const [entered, setEntered] = useState(false)
+  const [dragOffsetPx, setDragOffsetPx] = useState(0)
+  const [dragActive, setDragActive] = useState(false)
+
+  const closeTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+  const sheetRef = useRef<HTMLDivElement>(null)
+  const dragTrackingRef = useRef(false)
+  const dragStartYRef = useRef(0)
+  const dragOffsetRef = useRef(0)
+
+  const reducedMotion =
+    typeof window !== 'undefined' &&
+    window.matchMedia('(prefers-reduced-motion: reduce)').matches
+
+  const syncDragPx = (next: number) => {
+    dragOffsetRef.current = next
+    setDragOffsetPx(next)
+  }
+
+  useEffect(() => {
+    if (closeTimerRef.current) {
+      clearTimeout(closeTimerRef.current)
+      closeTimerRef.current = null
+    }
+
+    const ms = reducedMotion ? 0 : SHEET_TRANSITION_MS
+
+    let openRafId = 0
+    let exitRafId = 0
+
+    if (open) {
+      openRafId = requestAnimationFrame(() => {
+        dragTrackingRef.current = false
+        dragOffsetRef.current = 0
+        setDragActive(false)
+        setDragOffsetPx(0)
+        setRenderPortal(true)
+        requestAnimationFrame(() => {
+          requestAnimationFrame(() => setEntered(true))
+        })
+      })
+    } else {
+      exitRafId = requestAnimationFrame(() => {
+        dragTrackingRef.current = false
+        setDragActive(false)
+        setEntered(false)
+        closeTimerRef.current = window.setTimeout(() => {
+          dragOffsetRef.current = 0
+          setDragOffsetPx(0)
+          setRenderPortal(false)
+          closeTimerRef.current = null
+        }, ms)
+      })
+    }
+
+    return () => {
+      cancelAnimationFrame(openRafId)
+      cancelAnimationFrame(exitRafId)
+      if (closeTimerRef.current) {
+        clearTimeout(closeTimerRef.current)
+        closeTimerRef.current = null
+      }
+    }
+  }, [open, reducedMotion])
+
+  useEffect(() => {
+    if (!renderPortal) return
+    const prev = document.body.style.overflow
+    document.body.style.overflow = 'hidden'
+    return () => {
+      document.body.style.overflow = prev
+    }
+  }, [renderPortal])
+
+  if (!renderPortal || typeof document === 'undefined') return null
+
+  const durationClass = reducedMotion ? 'duration-0' : 'duration-[280ms]'
+  const draggingVisual = dragActive || dragOffsetPx > 0
+
+  const onDragPointerDown = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (reducedMotion || !entered) return
+    if (e.pointerType === 'mouse' && e.button !== 0) return
+
+    dragTrackingRef.current = true
+    setDragActive(true)
+    dragStartYRef.current = e.clientY
+    syncDragPx(0)
+    e.currentTarget.setPointerCapture(e.pointerId)
+  }
+
+  const onDragPointerMove = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (!dragTrackingRef.current) return
+    const dy = e.clientY - dragStartYRef.current
+    const next = Math.max(0, dy)
+    const sheetH = sheetRef.current?.offsetHeight ?? 560
+    syncDragPx(Math.min(next, sheetH))
+  }
+
+  const endDrag = (e: ReactPointerEvent<HTMLDivElement>) => {
+    if (!dragTrackingRef.current) return
+    dragTrackingRef.current = false
+    setDragActive(false)
+    try {
+      e.currentTarget.releasePointerCapture(e.pointerId)
+    } catch {
+      /* already released */
+    }
+
+    const sheetH = sheetRef.current?.offsetHeight ?? 560
+    const threshold = Math.max(CLOSE_DRAG_MIN_PX, sheetH * CLOSE_DRAG_RATIO)
+    const d = dragOffsetRef.current
+
+    if (d >= threshold) {
+      onClose()
+      return
+    }
+    syncDragPx(0)
+  }
+
+  return createPortal(
+    <div className="fixed inset-0 z-[200] flex flex-col justify-end">
+      <button
+        aria-label={backdropDismissLabel}
+        className={cn(
+          'absolute inset-0 bg-black/55 backdrop-blur-[2px]',
+          'transition-opacity ease-out motion-reduce:transition-none',
+          durationClass,
+          entered ? 'opacity-100' : 'opacity-0'
+        )}
+        onClick={onClose}
+        type="button"
+      />
+
+      <div
+        aria-label={title}
+        aria-modal="true"
+        className={cn(
+          'relative flex max-h-[85dvh] min-h-0 flex-col rounded-t-xl border border-current/20',
+          'bg-background-base/98 pb-[max(1rem,env(safe-area-inset-bottom))]',
+          'shadow-[0_-12px_40px_-8px_rgba(0,0,0,0.55)] backdrop-blur-md',
+          'ease-out motion-reduce:transition-none transform-gpu',
+          draggingVisual
+            ? 'transition-none'
+            : cn('transition-transform', durationClass),
+          entered ? 'translate-y-0' : 'translate-y-full'
+        )}
+        ref={sheetRef}
+        role="dialog"
+        style={
+          entered && dragOffsetPx > 0
+            ? { transform: `translateY(${dragOffsetPx}px)` }
+            : undefined
+        }
+      >
+        <div
+          className={cn(
+            'flex shrink-0 flex-col gap-2 border-b border-current/15 px-4 pb-3 pt-2',
+            'touch-none select-none',
+            reducedMotion
+              ? 'cursor-default'
+              : 'cursor-grab active:cursor-grabbing'
+          )}
+          onPointerCancel={endDrag}
+          onPointerDown={onDragPointerDown}
+          onPointerMove={onDragPointerMove}
+          onPointerUp={endDrag}
+        >
+          <div
+            aria-hidden
+            className="mx-auto h-1 w-10 shrink-0 rounded-full bg-current/20"
+          />
+
+          <Typography
+            className="text-[0.65rem] tracking-[0.15em] uppercase text-midground/70"
+            mondwest
+          >
+            {title}
+          </Typography>
+        </div>
+
+        <div className="min-h-0 flex-1 overflow-y-auto overscroll-contain">
+          {children}
+        </div>
+      </div>
+    </div>,
+    document.body
+  )
+}
+
+interface BottomSheetProps {
+  backdropDismissLabel?: string
+  children: ReactNode
+  onClose: () => void
+  open: boolean
+  title: string
+}

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

@@ -13,7 +13,7 @@ const meta: Meta<typeof Button> = {
   },
   args: { children: 'Normal', disabled: false, invert: false, outlined: false },
   component: Button,
-  title: 'Components/Button'
+  title: 'Components/Forms/Button'
 }
 
 export default meta

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

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { Button } from './button'
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle
+} from './card'
+import { Input } from './input'
+import { Label } from './label'
+import { Separator } from './separator'
+
+const meta: Meta<typeof Card> = {
+  component: Card,
+  title: 'Components/Data Display/Card'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Card>
+
+export const Default: Story = {
+  render: () => (
+    <Card className="max-w-sm">
+      <CardHeader>
+        <CardTitle>Card title</CardTitle>
+        <CardDescription>A brief description of this card.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-midground/70">
+          Card body content goes here.
+        </p>
+      </CardContent>
+    </Card>
+  )
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <Card className="max-w-sm">
+      <CardHeader>
+        <CardTitle>Settings</CardTitle>
+        <CardDescription>Configure your preferences.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <div className="grid gap-3">
+          <div className="grid gap-1.5">
+            <Label htmlFor="card-name">Name</Label>
+            <Input id="card-name" placeholder="Enter name…" />
+          </div>
+
+          <Separator />
+
+          <div className="flex justify-end">
+            <Button>Save</Button>
+          </div>
+        </div>
+      </CardContent>
+    </Card>
+  )
+}

package/src/ui/components/card.tsx

@@ -0,0 +1,85 @@
+import { cn } from '../../utils'
+
+/**
+ * Themeable card primitive. Themes can restyle every card by setting CSS
+ * custom properties:
+ *
+ *   --component-card-clip-path
+ *   --component-card-border-image
+ *   --component-card-background
+ *   --component-card-box-shadow
+ *
+ * All are optional — unset vars compute to their CSS initial value.
+ */
+const CARD_STYLE: React.CSSProperties = {
+  background: 'var(--component-card-background)',
+  borderImage: 'var(--component-card-border-image)',
+  boxShadow: 'var(--component-card-box-shadow)',
+  clipPath: 'var(--component-card-clip-path)'
+}
+
+export function Card({
+  className,
+  style,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'border border-midground/15 bg-background-base/80 text-midground w-full',
+        className
+      )}
+      style={{ ...CARD_STYLE, ...style }}
+      {...props}
+    />
+  )
+}
+
+export function CardHeader({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-1.5 p-4 border-b border-midground/15',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function CardTitle({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLHeadingElement>) {
+  return (
+    <h3
+      className={cn(
+        'font-expanded text-sm font-bold tracking-[0.08em] uppercase',
+        className
+      )}
+      {...props}
+    />
+  )
+}
+
+export function CardDescription({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLParagraphElement>) {
+  return (
+    <p
+      className={cn('font-mondwest text-xs text-midground/60', className)}
+      {...props}
+    />
+  )
+}
+
+export function CardContent({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('p-4', className)} {...props} />
+}

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

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

package/src/ui/components/checkbox.tsx

@@ -1,7 +1,7 @@
 'use client'
 
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox'
 import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react'
+import { Checkbox as CheckboxPrimitive } from 'radix-ui'
 
 import { cn } from '../../utils'
 

package/src/ui/components/command-block.stories.tsx

@@ -11,7 +11,7 @@ const meta: Meta<typeof CommandBlock> = {
     label: '1. Install'
   },
   component: CommandBlock,
-  title: 'Components/CommandBlock'
+  title: 'Components/Data Display/CommandBlock'
 }
 
 export default meta