@nous-research/ui 0.15.0 → 0.17.0

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

@@ -0,0 +1,113 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+import { useState } from 'react'
+
+import { Checkbox } from './checkbox'
+import { Small } from './typography/small'
+
+function Demo({ disabled }: { disabled?: boolean }) {
+  const [checked, setChecked] = useState(false)
+
+  return (
+    <div className="flex items-center gap-2.5">
+      <Checkbox
+        checked={checked}
+        disabled={disabled}
+        id="checkbox-demo"
+        onCheckedChange={setChecked}
+      />
+
+      <label className="cursor-pointer text-sm" htmlFor="checkbox-demo">
+        Accept terms
+      </label>
+    </div>
+  )
+}
+
+const meta: Meta<typeof Checkbox> = {
+  component: Checkbox,
+  title: 'Components/Forms/Checkbox'
+}
+
+export default meta
+
+type Story = StoryObj<typeof Checkbox>
+
+export const Playground: Story = { render: () => <Demo /> }
+
+export const Disabled: Story = { render: () => <Demo disabled /> }
+
+export const Checked: Story = {
+  render: () => (
+    <div className="flex items-center gap-2.5">
+      <Checkbox defaultChecked id="checkbox-checked" />
+
+      <label className="cursor-pointer text-sm" htmlFor="checkbox-checked">
+        Clone from default profile
+      </label>
+    </div>
+  )
+}
+
+export const Stack: Story = {
+  render: () => {
+    function StackDemo() {
+      const [a, setA] = useState(true)
+      const [b, setB] = useState(false)
+      const [c, setC] = useState(true)
+
+      return (
+        <div className="grid w-72 gap-3">
+          <div className="flex items-center gap-2.5">
+            <Checkbox checked={a} id="opt-a" onCheckedChange={setA} />
+
+            <label className="cursor-pointer text-sm" htmlFor="opt-a">
+              Logging
+            </label>
+          </div>
+
+          <div className="flex items-center gap-2.5">
+            <Checkbox checked={b} id="opt-b" onCheckedChange={setB} />
+
+            <label className="cursor-pointer text-sm" htmlFor="opt-b">
+              Telemetry
+            </label>
+          </div>
+
+          <div className="flex items-center gap-2.5">
+            <Checkbox checked={c} id="opt-c" onCheckedChange={setC} />
+
+            <label className="cursor-pointer text-sm" htmlFor="opt-c">
+              Auto-update
+            </label>
+          </div>
+        </div>
+      )
+    }
+
+    return <StackDemo />
+  }
+}
+
+export const NextToLabel: Story = {
+  render: () => {
+    function LabeledDemo() {
+      const [checked, setChecked] = useState(true)
+
+      return (
+        <div className="flex items-center gap-3">
+          <Small className="opacity-60 uppercase tracking-wider">
+            Persist globally
+          </Small>
+
+          <Checkbox
+            checked={checked}
+            id="persist-global"
+            onCheckedChange={setChecked}
+          />
+        </div>
+      )
+    }
+
+    return <LabeledDemo />
+  }
+}

package/src/ui/components/checkbox.tsx

@@ -0,0 +1,36 @@
+'use client'
+
+import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react'
+import { Checkbox as CheckboxPrimitive } from 'radix-ui'
+
+import { cn } from '../../utils'
+
+import { CheckIcon } from './icons/check'
+
+export const Checkbox = forwardRef<
+  ElementRef<typeof CheckboxPrimitive.Root>,
+  CheckboxProps
+>(function Checkbox({ className, ...props }, ref) {
+  return (
+    <CheckboxPrimitive.Root
+      className={cn(
+        'peer flex h-4 w-4 shrink-0 cursor-pointer items-center justify-center border transition-colors outline-none',
+        'focus-visible:ring-1 focus-visible:ring-midground/30',
+        'disabled:cursor-not-allowed disabled:opacity-50',
+        'data-[state=unchecked]:border-midground/20 data-[state=unchecked]:bg-background',
+        'data-[state=unchecked]:hover:border-midground/30',
+        'data-[state=checked]:border-midground/30 data-[state=checked]:bg-midground/15',
+        'data-[state=indeterminate]:border-midground/30 data-[state=indeterminate]:bg-midground/15',
+        className
+      )}
+      ref={ref}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className="flex items-center justify-center text-current">
+        <CheckIcon className="h-3 w-3 text-midground" />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+})
+
+type CheckboxProps = ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>

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

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/react-vite'
+
+import {
+  CommandBlock,
+  CopyButton
+} from './command-block'
+
+const meta: Meta<typeof CommandBlock> = {
+  args: {
+    code: 'curl -fsSL https://hermes.nousresearch.com/install.sh | bash',
+    label: '1. Install'
+  },
+  component: CommandBlock,
+  title: 'Components/Data Display/CommandBlock'
+}
+
+export default meta
+
+type Story = StoryObj<typeof CommandBlock>
+
+export const Default: Story = {
+  render: args => (
+    <div className="w-[520px]">
+      <CommandBlock {...args} />
+    </div>
+  )
+}
+
+export const TwoStep: Story = {
+  render: () => (
+    <div className="flex w-[520px] flex-col gap-3">
+      <CommandBlock
+        code="curl -fsSL https://hermes.nousresearch.com/install.sh | bash"
+        label="1. Install"
+      />
+
+      <CommandBlock code="hermes setup" label="2. Configure" />
+    </div>
+  )
+}
+
+export const StandaloneButton: Story = {
+  render: () => (
+    <div className="flex items-center gap-3">
+      <span className="font-courier text-xs opacity-60">
+        echo &quot;hello world&quot;
+      </span>
+
+      <CopyButton text="echo 'hello world'" />
+    </div>
+  )
+}

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

@@ -0,0 +1,86 @@
+'use client'
+
+import { useCallback, useState } from 'react'
+
+import { cn } from '../../utils'
+
+import { Small } from './typography/small'
+
+/**
+ * A "copy to clipboard" button that briefly shows a "Copied!" confirmation.
+ * Designed to sit alongside a short command string, not as a general button.
+ */
+export function CopyButton({
+  children,
+  className,
+  copiedLabel = 'Copied!',
+  label = 'Copy',
+  resetDelayMs = 2000,
+  text
+}: CopyButtonProps) {
+  const [copied, setCopied] = useState(false)
+
+  const handleCopy = useCallback(() => {
+    void navigator.clipboard.writeText(text).then(() => {
+      setCopied(true)
+      setTimeout(() => setCopied(false), resetDelayMs)
+    })
+  }, [resetDelayMs, text])
+
+  return (
+    <button
+      className={cn(
+        'font-courier text-display cursor-pointer border-none bg-transparent text-xs',
+        'tracking-widest',
+        'hover:text-midground tap-highlight-transparent transition-colors',
+        'flex items-center justify-center',
+        copied ? 'text-midground' : 'text-text-secondary',
+        className
+      )}
+      onClick={handleCopy}
+      type="button"
+    >
+      {children ?? (copied ? copiedLabel : label)}
+    </button>
+  )
+}
+
+/**
+ * A labeled, copy-able command (or code) display. Pairs `<CopyButton>` with
+ * a monospace code block. Used for install/setup instructions.
+ */
+export function CommandBlock({ className, code, label }: CommandBlockProps) {
+  return (
+    <div className={cn('flex flex-col gap-1', className)}>
+      <div className="flex items-center justify-between">
+        <Small className="opacity-50">{label}</Small>
+
+        <CopyButton text={code} />
+      </div>
+
+      <div
+        className={cn(
+          'bg-background/40 font-courier border border-current/20',
+          'px-3 py-2 text-[0.6875rem] leading-relaxed lowercase'
+        )}
+      >
+        <code className="break-all">{code}</code>
+      </div>
+    </div>
+  )
+}
+
+interface CommandBlockProps {
+  className?: string
+  code: string
+  label: string
+}
+
+interface CopyButtonProps {
+  children?: React.ReactNode
+  className?: string
+  copiedLabel?: string
+  label?: string
+  resetDelayMs?: number
+  text: string
+}

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/cursor.tsx

@@ -0,0 +1,115 @@
+'use client'
+
+import { useEffect, useRef } from 'react'
+
+const INTERACTIVE =
+  'a, button, [role="button"], input, textarea, select, [data-cursor]'
+
+const HAND =
+  'M6.84 21.83c-.47-.6-1.05-1.82-2.07-3.34-.58-.83-2.01-2.41-2.45-3.23a2.1 2.1 0 0 1-.25-1.67 2.2 2.2 0 0 1 2.39-1.67c.85.18 1.63.6 2.25 1.2.43.41.82.85 1.18 1.32.27.34.33.47.63.85.3.39.5.77.35.2-.11-.83-.31-2.23-.6-3.48-.21-.95-.26-1.1-.46-1.82s-.32-1.32-.54-2.13c-.2-.8-.35-1.62-.46-2.44a4.7 4.7 0 0 1 .43-3.08c.58-.55 1.44-.7 2.17-.37a4.4 4.4 0 0 1 1.57 2.17c.43 1.07.72 2.19.86 3.33.27 1.67.79 4.1.8 4.6 0-.61-.11-1.91 0-2.5.12-.6.54-1.1 1.12-1.33.5-.15 1.02-.19 1.53-.1.52.1.98.4 1.29.83.38.98.6 2 .63 3.05.04-.91.2-1.82.47-2.7.28-.39.68-.67 1.15-.8.55-.1 1.11-.1 1.66 0 .46.15.85.44 1.14.82.35.88.56 1.82.63 2.77 0 .23.12-.65.48-1.24a1.67 1.67 0 1 1 3.17 1.07v3.77c-.06.97-.2 1.94-.4 2.9-.29.85-.7 1.65-1.2 2.38-.8.9-1.48 1.92-1.98 3.02a6.67 6.67 0 0 0 .03 3.2c-.68.07-1.37.07-2.05 0-.65-.1-1.45-1.4-1.67-1.8a.63.63 0 0 0-1.13 0c-.37.64-1.18 1.79-1.75 1.85-1.12.14-3.42 0-5.23 0 0 0 .3-1.66-.39-2.27-.68-.6-1.38-1.3-1.9-1.76l-1.4-1.6Z'
+
+export function Cursor({ scale = 0.8 }: { scale?: number }) {
+  const $root = useRef<HTMLDivElement>(null)
+  const $arrow = useRef<HTMLDivElement>(null)
+  const $ptr = useRef<HTMLDivElement>(null)
+
+  useEffect(() => {
+    const [root, arrow, ptr] = [$root.current, $arrow.current, $ptr.current]
+
+    if (!root || !arrow || !ptr) {
+      return
+    }
+
+    const on = (
+      el: EventTarget,
+      ev: string,
+      fn: EventListener,
+      opts?: AddEventListenerOptions
+    ) => {
+      el.addEventListener(ev, fn, opts)
+
+      return () => el.removeEventListener(ev, fn)
+    }
+
+    return [
+      on(
+        document,
+        'mousemove',
+        (e: Event) => {
+          const { clientX: x, clientY: y } = e as MouseEvent
+          root.style.translate = `${x}px ${y}px`
+          root.style.opacity = '1'
+        },
+        { passive: true }
+      ),
+
+      on(
+        document,
+        'mouseover',
+        (e: Event) => {
+          const isPtr = !!(e.target as HTMLElement).closest?.(INTERACTIVE)
+          arrow.style.opacity = isPtr ? '0' : '1'
+          ptr.style.opacity = isPtr ? '1' : '0'
+        },
+        { passive: true }
+      ),
+
+      on(document, 'mousedown', () => {
+        root.style.transform = 'translate(1px, 1px)'
+      }),
+      on(document, 'mouseup', () => {
+        root.style.transform = ''
+      }),
+      on(document.documentElement, 'mouseleave', () => {
+        root.style.opacity = '0'
+      }),
+      on(document.documentElement, 'mouseenter', () => {
+        root.style.opacity = '1'
+      })
+    ].reduce((_, fn) => fn, undefined as unknown as void)
+  }, [])
+
+  return (
+    <div
+      aria-hidden
+      ref={$root}
+      style={{
+        filter: 'drop-shadow(1px 2px 0 #000)',
+        height: 32 * scale,
+        left: 0,
+        opacity: 0,
+        pointerEvents: 'none',
+        position: 'fixed',
+        top: 0,
+        width: 32 * scale,
+        willChange: 'translate',
+        zIndex: 9999
+      }}
+    >
+      <div ref={$arrow} style={{ inset: 0, position: 'absolute' }}>
+        <svg viewBox="0 0 16 16">
+          <path
+            d="M1 1L1 14L5 10L8 15L10 14L7 9L12 9L1 1Z"
+            fill="#fff"
+            stroke="#000"
+            strokeLinejoin="round"
+            strokeWidth={1}
+          />
+        </svg>
+      </div>
+
+      <div ref={$ptr} style={{ inset: 0, opacity: 0, position: 'absolute' }}>
+        <svg viewBox="0 0 28 29">
+          <path
+            d={HAND}
+            fill="#fff"
+            stroke="#000"
+            strokeLinejoin="round"
+            strokeWidth={2}
+            style={{ paintOrder: 'stroke fill' }}
+          />
+        </svg>
+      </div>
+    </div>
+  )
+}