@nous-research/ui 0.16.0 → 0.17.0

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

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Button } from './button'
+import { ConfirmDialog } from './confirm-dialog'
+
+const meta: Meta<typeof ConfirmDialog> = {
+  component: ConfirmDialog,
+  title: 'Components/Overlays/ConfirmDialog'
+}
+
+export default meta
+
+type Story = StoryObj<typeof ConfirmDialog>
+
+export const Default: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(false)
+
+      return (
+        <>
+          <Button onClick={() => setOpen(true)}>Open dialog</Button>
+
+          <ConfirmDialog
+            description="This action cannot be undone."
+            onCancel={() => setOpen(false)}
+            onConfirm={() => setOpen(false)}
+            open={open}
+            title="Are you sure?"
+          />
+        </>
+      )
+    }
+
+    return <Demo />
+  }
+}
+
+export const Destructive: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(false)
+
+      return (
+        <>
+          <Button destructive onClick={() => setOpen(true)}>
+            Delete item
+          </Button>
+
+          <ConfirmDialog
+            confirmLabel="Delete"
+            description="This will permanently delete the item. This action cannot be undone."
+            destructive
+            onCancel={() => setOpen(false)}
+            onConfirm={() => setOpen(false)}
+            open={open}
+            title="Delete item?"
+          />
+        </>
+      )
+    }
+
+    return <Demo />
+  }
+}
+
+export const Loading: Story = {
+  render: () => {
+    function Demo() {
+      const [open, setOpen] = useState(false)
+
+      return (
+        <>
+          <Button onClick={() => setOpen(true)}>With loading state</Button>
+
+          <ConfirmDialog
+            description="Simulating a loading state."
+            loading
+            onCancel={() => setOpen(false)}
+            onConfirm={() => {}}
+            open={open}
+            title="Processing…"
+          />
+        </>
+      )
+    }
+
+    return <Demo />
+  }
+}

package/src/ui/components/confirm-dialog.tsx

@@ -0,0 +1,130 @@
+'use client'
+
+import { useRef } from 'react'
+import { AlertDialog as AlertDialogPrimitive } from 'radix-ui'
+
+import { cn } from '../../utils'
+import { Button } from './button'
+
+function WarningTriangle({ className }: { className?: string }) {
+  return (
+    <svg
+      aria-hidden
+      className={className}
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={2}
+      viewBox="0 0 24 24"
+    >
+      <path d="m10.29 3.86-8.16 14a2 2 0 0 0 1.73 3h16.28a2 2 0 0 0 1.73-3l-8.16-14a2 2 0 0 0-3.46 0z" />
+      <line x1="12" x2="12" y1="9" y2="13" />
+      <line x1="12" x2="12.01" y1="17" y2="17" />
+    </svg>
+  )
+}
+
+export function ConfirmDialog({
+  cancelLabel = 'Cancel',
+  confirmLabel = 'Confirm',
+  description,
+  destructive = false,
+  loading = false,
+  onCancel,
+  onConfirm,
+  open,
+  title
+}: ConfirmDialogProps) {
+  const confirmedRef = useRef(false)
+
+  return (
+    <AlertDialogPrimitive.Root
+      onOpenChange={v => {
+        if (!v && !confirmedRef.current) onCancel()
+        confirmedRef.current = false
+      }}
+      open={open}
+    >
+      <AlertDialogPrimitive.Portal>
+        <AlertDialogPrimitive.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'
+          )}
+        />
+
+        <AlertDialogPrimitive.Content
+          className={cn(
+            'fixed top-1/2 left-1/2 z-50 -translate-x-1/2 -translate-y-1/2',
+            'w-[calc(100%-2rem)] max-w-md',
+            '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'
+          )}
+        >
+          <div className="flex items-start gap-3 p-4 border-b border-midground/15">
+            {destructive && (
+              <div aria-hidden className="mt-0.5 shrink-0 text-destructive">
+                <WarningTriangle className="h-4 w-4" />
+              </div>
+            )}
+
+            <div className="flex-1 min-w-0 flex flex-col gap-1">
+              <AlertDialogPrimitive.Title
+                className="font-expanded text-sm font-bold tracking-[0.08em] uppercase"
+              >
+                {title}
+              </AlertDialogPrimitive.Title>
+
+              {description && (
+                <AlertDialogPrimitive.Description
+                  className="font-mondwest text-xs text-midground/60 leading-relaxed"
+                >
+                  {description}
+                </AlertDialogPrimitive.Description>
+              )}
+            </div>
+          </div>
+
+          <div className="flex items-center justify-end gap-2 p-3">
+            <AlertDialogPrimitive.Cancel asChild>
+              <Button disabled={loading} outlined type="button">
+                {cancelLabel}
+              </Button>
+            </AlertDialogPrimitive.Cancel>
+
+            <AlertDialogPrimitive.Action asChild>
+              <Button
+                destructive={destructive}
+                disabled={loading}
+                onClick={() => {
+                  confirmedRef.current = true
+                  onConfirm()
+                }}
+                type="button"
+              >
+                {loading ? '…' : confirmLabel}
+              </Button>
+            </AlertDialogPrimitive.Action>
+          </div>
+        </AlertDialogPrimitive.Content>
+      </AlertDialogPrimitive.Portal>
+    </AlertDialogPrimitive.Root>
+  )
+}
+
+interface ConfirmDialogProps {
+  cancelLabel?: string
+  confirmLabel?: string
+  description?: string
+  destructive?: boolean
+  loading?: boolean
+  onCancel: () => void
+  onConfirm: () => void
+  open: boolean
+  title: string
+}

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

@@ -25,7 +25,7 @@ function Demo({ direction }: { direction: 'down' | 'left' | 'right' | 'up' }) {
 
 const meta: Meta<typeof DropdownMenu> = {
   component: DropdownMenu,
-  title: 'Components/DropdownMenu'
+  title: 'Components/Overlays/DropdownMenu'
 }
 
 export default meta

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

@@ -5,7 +5,7 @@ import { FitText } from '../fit-text'
 const meta: Meta<typeof FitText> = {
   args: { children: 'Fit Text', max: 'infinity * 1px', min: '1em' },
   component: FitText,
-  title: 'Components/FitText'
+  title: 'Components/Effects/FitText'
 }
 
 export default meta