@nous-research/ui 0.15.0 → 0.17.0

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

@@ -0,0 +1,169 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Button } from './button'
+import {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
+} from './dialog'
+import { Input } from './input'
+import { Label } from './label'
+
+const meta: Meta<typeof Dialog> = {
+  component: Dialog,
+  title: 'Components/Overlays/Dialog'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Dialog>
+
+export const Default: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Open Dialog</Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Dialog Title</DialogTitle>
+          <DialogDescription>
+            A description of the dialog content and its purpose.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="p-4">
+          <p className="font-courier text-sm text-midground/80">
+            This is a general-purpose dialog built on Radix UI primitives. It
+            handles focus trapping, ESC to close, and backdrop click
+            automatically.
+          </p>
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button outlined>Close</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const Controlled: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(false)
+
+      return (
+        <>
+          <Button onClick={() => setOpen(true)}>Controlled Open</Button>
+
+          <Dialog onOpenChange={setOpen} open={open}>
+            <DialogContent>
+              <DialogHeader>
+                <DialogTitle>Controlled Dialog</DialogTitle>
+                <DialogDescription>
+                  This dialog is controlled via external state.
+                </DialogDescription>
+              </DialogHeader>
+
+              <div className="p-4">
+                <p className="font-courier text-sm text-midground/80">
+                  Open state is managed by the parent component. Useful when
+                  you need to open the dialog programmatically.
+                </p>
+              </div>
+
+              <DialogFooter>
+                <Button onClick={() => setOpen(false)} outlined>
+                  Cancel
+                </Button>
+
+                <Button onClick={() => setOpen(false)}>
+                  Save
+                </Button>
+              </DialogFooter>
+            </DialogContent>
+          </Dialog>
+        </>
+      )
+    }
+
+    return <Demo />
+  }
+}
+
+export const WithForm: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Edit Profile</Button>
+      </DialogTrigger>
+
+      <DialogContent>
+        <DialogHeader>
+          <DialogTitle>Edit Profile</DialogTitle>
+          <DialogDescription>
+            Make changes to your profile. Click save when you are done.
+          </DialogDescription>
+        </DialogHeader>
+
+        <div className="flex flex-col gap-4 p-4">
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="name">Name</Label>
+            <Input defaultValue="Hermes" id="name" />
+          </div>
+
+          <div className="flex flex-col gap-1.5">
+            <Label htmlFor="email">Email</Label>
+            <Input defaultValue="hermes@nousresearch.com" id="email" type="email" />
+          </div>
+        </div>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button outlined>Cancel</Button>
+          </DialogClose>
+
+          <DialogClose asChild>
+            <Button>Save Changes</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}
+
+export const NoCloseButton: Story = {
+  render: () => (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button>Without Close Button</Button>
+      </DialogTrigger>
+
+      <DialogContent showCloseButton={false}>
+        <DialogHeader>
+          <DialogTitle>Minimal Dialog</DialogTitle>
+          <DialogDescription>
+            This dialog hides the X close button. Users can still close it
+            by pressing ESC or clicking the backdrop.
+          </DialogDescription>
+        </DialogHeader>
+
+        <DialogFooter>
+          <DialogClose asChild>
+            <Button>Got it</Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  )
+}

package/src/ui/components/dialog.tsx

@@ -0,0 +1,177 @@
+'use client'
+
+import * as React from 'react'
+import { Dialog as DialogPrimitive } from 'radix-ui'
+
+import { cn } from '../../utils'
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      className={cn(
+        'fixed inset-0 z-50',
+        'bg-black/60 backdrop-blur-sm',
+        'data-[state=open]:animate-in data-[state=open]:fade-in-0',
+        'data-[state=closed]:animate-out data-[state=closed]:fade-out-0',
+        className
+      )}
+      data-slot="dialog-overlay"
+      {...props}
+    />
+  )
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+
+      <DialogPrimitive.Content
+        className={cn(
+          'fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
+          'grid w-full max-w-md gap-0',
+          'border border-midground/15 bg-background-base text-foreground-base shadow-lg outline-none',
+          'data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95',
+          'data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95',
+          'duration-150',
+          className
+        )}
+        data-slot="dialog-content"
+        {...props}
+      >
+        {children}
+
+        {showCloseButton && (
+          <DialogPrimitive.Close
+            className={cn(
+              'absolute top-3 right-3',
+              'flex h-6 w-6 items-center justify-center',
+              'text-midground/50 transition-colors hover:text-midground',
+              'focus:outline-none focus-visible:ring-1 focus-visible:ring-midground/30',
+              'disabled:pointer-events-none'
+            )}
+            data-slot="dialog-close"
+          >
+            <XIcon className="h-3.5 w-3.5" />
+            <span className="sr-only">Close</span>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  )
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'flex flex-col gap-1 p-4 border-b border-midground/15',
+        className
+      )}
+      data-slot="dialog-header"
+      {...props}
+    />
+  )
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div
+      className={cn(
+        'flex items-center justify-end gap-2 p-3',
+        className
+      )}
+      data-slot="dialog-footer"
+      {...props}
+    />
+  )
+}
+
+function DialogTitle({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      className={cn(
+        'font-expanded text-sm font-bold tracking-[0.08em] uppercase',
+        className
+      )}
+      data-slot="dialog-title"
+      {...props}
+    />
+  )
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      className={cn(
+        'font-mondwest text-xs text-midground/60 leading-relaxed',
+        className
+      )}
+      data-slot="dialog-description"
+      {...props}
+    />
+  )
+}
+
+function XIcon({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      <line x1="18" x2="6" y1="6" y2="18" />
+      <line x1="6" x2="18" y1="6" y2="18" />
+    </svg>
+  )
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger
+}

package/src/ui/components/dropdown-menu.stories.tsx

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { DropdownMenu } from './dropdown-menu'
+import { Small } from './typography/small'
+
+const OPTIONS = [
+  { label: 'Option A', value: 'a' as const },
+  { label: 'Option B', value: 'b' as const },
+  { label: 'Option C', value: 'c' as const }
+]
+
+function Demo({ direction }: { direction: 'down' | 'left' | 'right' | 'up' }) {
+  const [value, setValue] = useState<'a' | 'b' | 'c'>('a')
+
+  return (
+    <DropdownMenu
+      direction={direction}
+      onChange={setValue}
+      options={OPTIONS}
+      value={value}
+    />
+  )
+}
+
+const meta: Meta<typeof DropdownMenu> = {
+  component: DropdownMenu,
+  title: 'Components/Overlays/DropdownMenu'
+}
+
+export default meta
+
+type Story = StoryObj<typeof DropdownMenu>
+
+export const Down: Story = { render: () => <Demo direction="down" /> }
+export const Up: Story = { render: () => <Demo direction="up" /> }
+export const Right: Story = { render: () => <Demo direction="right" /> }
+export const Left: Story = { render: () => <Demo direction="left" /> }
+
+export const AllDirections: Story = {
+  render: () => (
+    <div className="flex gap-10">
+      {(['down', 'up', 'right', 'left'] as const).map(direction => (
+        <div className="flex flex-col gap-1" key={direction}>
+          <Small className="capitalize opacity-40">{direction}</Small>
+
+          <Demo direction={direction} />
+        </div>
+      ))}
+    </div>
+  )
+}

package/src/ui/components/dropdown-menu.tsx

@@ -0,0 +1,117 @@
+'use client'
+
+import { useEffect, useId, useRef, useState } from 'react'
+
+import { cn } from '../../utils'
+
+const font = 'font-mondwest text-[.9375rem] leading-[1.4] tracking-[0.1875rem]'
+
+type Direction = 'down' | 'up' | 'left' | 'right'
+
+type AnchorStyle = React.CSSProperties & Record<string, string | number>
+
+export function DropdownMenu<T extends string>({
+  className,
+  direction = 'down',
+  onChange,
+  options,
+  value
+}: {
+  className?: string
+  direction?: Direction
+  onChange: (value: T) => void
+  options: { label: string; value: T }[]
+  value: T
+}) {
+  const id = useId()
+  const [open, setOpen] = useState(false)
+  const ref = useRef<HTMLSpanElement>(null)
+
+  const anchor = `--dropdown-${id.replace(/:/g, '')}`
+
+  const panelStyle: AnchorStyle = {
+    position: 'fixed',
+    positionAnchor: anchor,
+    positionTryFallbacks:
+      direction === 'left' || direction === 'right'
+        ? 'flip-inline, flip-block'
+        : 'flip-block, flip-inline',
+    ...(direction === 'up' && {
+      left: 'calc(anchor(left) - 0.5rem)',
+      top: 'calc(anchor(top) + 1rem)',
+      transform: 'translateY(-100%)'
+    }),
+    ...(direction === 'right' && {
+      left: 'calc(anchor(right))',
+      top: 'calc(anchor(top) - 0.5rem)'
+    }),
+    ...(direction === 'left' && {
+      left: 'calc(anchor(left) - 1px)',
+      top: 'calc(anchor(top) - 0.5rem)',
+      transform: 'translateX(-100%)'
+    }),
+    ...(direction === 'down' && {
+      left: 'calc(anchor(left) - 0.5rem)',
+      top: 'calc(anchor(top) - 0.5rem)'
+    })
+  }
+
+  useEffect(() => {
+    if (!open) {
+      return
+    }
+
+    const ac = new AbortController()
+    document.addEventListener(
+      'mousedown',
+      e => {
+        if (!ref.current?.contains(e.target as Node)) {
+          setOpen(false)
+        }
+      },
+      { signal: ac.signal }
+    )
+
+    return () => ac.abort()
+  }, [open])
+
+  return (
+    <span
+      className={cn('relative inline-block align-top', className)}
+      ref={ref}
+    >
+      <span
+        className={cn(font, 'inline-block cursor-pointer hover:underline')}
+        onClick={() => setOpen(!open)}
+        style={{ anchorName: anchor } as AnchorStyle}
+      >
+        {options.find(o => o.value === value)?.label ?? value}{' '}
+        {open ? '↑' : '↓'}
+      </span>
+
+      {open && (
+        <div
+          className="bg-background-base z-50 flex flex-col"
+          style={panelStyle}
+        >
+          {options.map(o => (
+            <span
+              className={cn(
+                font,
+                'block cursor-pointer p-2 whitespace-nowrap',
+                o.value === value ? 'underline' : 'hover:bg-midground/10'
+              )}
+              key={o.value}
+              onClick={() => {
+                onChange(o.value)
+                setOpen(false)
+              }}
+            >
+              {o.label}
+            </span>
+          ))}
+        </div>
+      )}
+    </span>
+  )
+}

package/src/ui/components/fit-text/fit-text.css

@@ -0,0 +1,42 @@
+.fit-text {
+  --fit-captured-length: initial;
+  --fit-support-sentinel: var(--fit-captured-length, 9999px);
+
+  display: flex;
+  container-type: inline-size;
+
+  > [aria-hidden] {
+    visibility: hidden;
+  }
+
+  > :not([aria-hidden]) {
+    flex-grow: 1;
+    container-type: inline-size;
+
+    --fit-captured-length: 100cqi;
+    --fit-available-space: var(--fit-captured-length);
+
+    > * {
+      --fit-support-sentinel: inherit;
+      --fit-captured-length: 100cqi;
+      --fit-ratio: tan(
+        atan2(
+          var(--fit-available-space),
+          var(--fit-available-space) - var(--fit-captured-length)
+        )
+      );
+
+      display: block;
+      inline-size: var(--fit-available-space);
+      font-size: clamp(
+        var(--fit-min, 1em),
+        1em * var(--fit-ratio),
+        var(--fit-max, infinity * 1px) - var(--fit-support-sentinel)
+      );
+
+      @container (inline-size > 0) {
+        white-space: nowrap;
+      }
+    }
+  }
+}

package/src/ui/components/fit-text/index.stories.tsx

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import { FitText } from '../fit-text'
+
+const meta: Meta<typeof FitText> = {
+  args: { children: 'Fit Text', max: 'infinity * 1px', min: '1em' },
+  component: FitText,
+  title: 'Components/Effects/FitText'
+}
+
+export default meta
+
+type Story = StoryObj<typeof FitText>
+
+export const Playground: Story = {}
+
+export const Fills: Story = {
+  render: () => (
+    <div className="w-full">
+      <FitText className="font-sans font-bold">Design System</FitText>
+    </div>
+  )
+}
+
+export const CappedMax: Story = {
+  render: () => (
+    <div className="w-full">
+      <FitText className="font-mondwest" max="4rem">
+        Capped max at 4rem
+      </FitText>
+    </div>
+  )
+}

package/src/ui/components/fit-text/index.tsx

@@ -0,0 +1,45 @@
+'use client'
+
+import { createElement } from 'react'
+
+import { cn, type PolyProps, polyRef } from '../../../utils'
+
+export const FitText = polyRef<'span', OwnProps>(
+  (
+    { as, children, className, max, min = '1em', style: baseStyle, ...rest },
+    ref
+  ) => {
+    if (typeof children !== 'string') {
+      return null
+    }
+
+    const style = {
+      '--fit-max': max ?? 'infinity * 1px',
+      '--fit-min': min,
+      ...baseStyle
+    } as React.CSSProperties
+
+    return createElement(
+      (as ?? 'span') as React.ElementType,
+      { ...rest, className: cn('fit-text', className), ref, style },
+      <>
+        <span>
+          <span>{children}</span>
+        </span>
+
+        <span aria-hidden="true">{children}</span>
+      </>
+    )
+  }
+)
+
+interface OwnProps {
+  children: string
+  max?: string
+  min?: string
+}
+
+export type FitTextProps<T extends React.ElementType = 'span'> = PolyProps<
+  T,
+  OwnProps
+>