@nous-research/ui 0.15.0 → 0.17.0

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

@@ -0,0 +1,68 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { expect } from 'storybook/test'
+
+import { Button } from './button'
+import { ArrowIcon, LinkIcon, SearchIcon } from './icons'
+
+const meta: Meta<typeof Button> = {
+  argTypes: {
+    children: { control: 'text' },
+    disabled: { control: 'boolean' },
+    invert: { control: 'boolean' },
+    outlined: { control: 'boolean' }
+  },
+  args: { children: 'Normal', disabled: false, invert: false, outlined: false },
+  component: Button,
+  title: 'Components/Forms/Button'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Button>
+
+export const Playground: Story = {
+  args: { prefix: <ArrowIcon direction="right" /> }
+}
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button prefix={<ArrowIcon direction="right" />}>Normal</Button>
+      <Button invert prefix={<ArrowIcon direction="right" />}>
+        Inverted
+      </Button>
+      <Button outlined prefix={<ArrowIcon direction="right" />}>
+        Outlined
+      </Button>
+      <Button invert outlined prefix={<ArrowIcon direction="right" />}>
+        Out + Inv
+      </Button>
+    </div>
+  )
+}
+
+export const WithIcons: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-2">
+      <Button suffix={<LinkIcon />}>Suffix</Button>
+      <Button
+        prefix={<SearchIcon />}
+        suffix={<ArrowIcon direction="right" />}
+      >
+        Prefix + Suffix
+      </Button>
+      <Button disabled prefix={<ArrowIcon direction="right" />}>
+        Disabled
+      </Button>
+    </div>
+  )
+}
+
+export const CssCheck: Story = {
+  args: { children: 'Danger', destructive: true },
+  play: async ({ canvas }) => {
+    const button = canvas.getByRole('button', { name: /danger/i })
+
+    await expect(getComputedStyle(button).backgroundColor).toBe('rgb(251, 44, 54)')
+  }
+}

package/src/ui/components/button.tsx

@@ -0,0 +1,170 @@
+import { cva, type VariantProps } from 'class-variance-authority'
+import { cloneElement } from 'react'
+
+import { cn } from '../../utils'
+
+import { Typography } from './typography'
+
+const SHADOW_DEFAULT =
+  'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff80]'
+const SHADOW_INVERT =
+  'shadow-[inset_-1px_-1px_0_0_#00000080,inset_1px_1px_0_0_#ffffff29]'
+const SHADOW_INVERT_OUTLINED =
+  'shadow-[inset_-1px_-1px_0_0_#ffffff12,inset_1px_1px_0_0_#ffffff29]'
+const ACTIVE_FILTER =
+  'active:[filter:invert(1)_brightness(calc(100-99*var(--foreground-alpha,0)))]'
+
+const buttonVariants = cva(
+  [
+    'group relative grid cursor-pointer grid-cols-[auto_1fr_auto] items-center',
+    'text-display leading-0 font-bold tracking-[0.2em]',
+    'disabled:pointer-events-none disabled:bg-midground/15 disabled:text-midground disabled:shadow-none'
+  ],
+  {
+    compoundVariants: [
+      // ── invert × outlined matrix (default surface, no ghost/destructive) ──
+      {
+        class: `bg-midground text-background-base active:invert ${SHADOW_DEFAULT}`,
+        destructive: false,
+        ghost: false,
+        invert: false,
+        outlined: false
+      },
+      {
+        class: `bg-midground/15 text-midground ${SHADOW_INVERT} ${ACTIVE_FILTER}`,
+        destructive: false,
+        ghost: false,
+        invert: true,
+        outlined: false
+      },
+      {
+        class: `shadow-midground ${SHADOW_DEFAULT} ${ACTIVE_FILTER}`,
+        destructive: false,
+        ghost: false,
+        invert: false,
+        outlined: true
+      },
+      {
+        class: `${SHADOW_INVERT_OUTLINED} ${ACTIVE_FILTER}`,
+        destructive: false,
+        ghost: false,
+        invert: true,
+        outlined: true
+      },
+      // ── ghost: no chrome, hover bg only ──
+      {
+        class: 'bg-transparent text-current hover:bg-midground/10 shadow-none',
+        destructive: false,
+        ghost: true
+      },
+      {
+        class:
+          'bg-transparent text-destructive hover:bg-destructive/10 shadow-none',
+        destructive: true,
+        ghost: true
+      },
+      // ── solid destructive ──
+      {
+        class: `bg-destructive text-destructive-foreground hover:bg-destructive/90 ${SHADOW_INVERT}`,
+        destructive: true,
+        ghost: false,
+        outlined: false
+      },
+      // ── outlined destructive ──
+      {
+        class:
+          'border border-destructive/40 bg-transparent text-destructive hover:bg-destructive/10 shadow-none',
+        destructive: true,
+        ghost: false,
+        outlined: true
+      }
+    ],
+    defaultVariants: {
+      destructive: false,
+      ghost: false,
+      invert: false,
+      outlined: false,
+      size: 'default'
+    },
+    variants: {
+      destructive: { true: '' },
+      ghost: { true: '' },
+      invert: { true: '' },
+      outlined: { true: 'text-midground bg-transparent' },
+      size: {
+        default: 'px-[.9em_.75em] py-[1.25em]',
+        icon: 'p-2 aspect-square grid-cols-1 place-items-center [&>svg]:size-3.5',
+        sm: 'px-3 py-1.5 text-[0.7rem] tracking-[0.15em] [&>svg]:size-3',
+        xs: 'p-1 aspect-square grid-cols-1 place-items-center [&>svg]:size-3'
+      }
+    }
+  }
+)
+
+const IconSlot = ({
+  icon,
+  side
+}: {
+  icon: React.ReactNode
+  side: 'left' | 'right'
+}) => (
+  <>
+    <span className="w-5" />
+
+    <span
+      className={cn(
+        'absolute top-1/2 -translate-y-1/2',
+        side === 'left' ? 'left-3' : 'right-3'
+      )}
+    >
+      {typeof icon === 'object'
+        ? cloneElement(icon as React.ReactElement<any>, {
+            className: 'size-3.5'
+          })
+        : icon}
+    </span>
+  </>
+)
+
+export const Button = ({
+  children,
+  className,
+  destructive,
+  ghost,
+  invert,
+  outlined,
+  prefix,
+  size,
+  suffix,
+  ...props
+}: ButtonProps) => (
+  <Typography
+    as="button"
+    className={cn(
+      buttonVariants({ destructive, ghost, invert, outlined, size }),
+      className
+    )}
+    mono
+    {...props}
+  >
+    {!ghost && (
+      <span
+        aria-hidden
+        className="arc-border opacity-0 transition-opacity duration-200 group-hover:opacity-100 group-focus-visible:opacity-100 group-active:opacity-100"
+      />
+    )}
+    {prefix && <IconSlot icon={prefix} side="left" />}
+    {children}
+    {suffix && <IconSlot icon={suffix} side="right" />}
+  </Typography>
+)
+
+interface ButtonProps
+  extends Omit<
+      React.ButtonHTMLAttributes<HTMLButtonElement>,
+      'prefix' | 'suffix'
+    >,
+    VariantProps<typeof buttonVariants> {
+  prefix?: React.ReactNode
+  suffix?: React.ReactNode
+}

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} />
+}