@otfdashkit/ui 0.1.0

package/src/nav/CommandPalette.tsx

@@ -0,0 +1,197 @@
+// @ts-nocheck — cmdk compiled against @types/react@19 but project uses @types/react@18
+'use client'
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useState,
+} from 'react'
+import { Command } from 'cmdk'
+import { Search, X } from 'lucide-react'
+import { cn } from '../utils/cn'
+
+/* ── Types ───────────────────────────────────────────────────────── */
+
+export interface CommandItem {
+  id: string
+  label: string
+  icon?: React.ReactNode
+  shortcut?: string
+  description?: string
+  onSelect: () => void
+}
+
+export interface CommandGroup {
+  heading: string
+  items: CommandItem[]
+}
+
+export interface CommandPaletteProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  groups: CommandGroup[]
+  placeholder?: string
+  className?: string
+}
+
+/* ── Global open/close context ───────────────────────────────────── */
+
+interface CommandPaletteContextValue {
+  open: boolean
+  setOpen: (open: boolean) => void
+  toggle: () => void
+}
+
+const CommandPaletteCtx = createContext<CommandPaletteContextValue>({
+  open: false,
+  setOpen: () => {},
+  toggle: () => {},
+})
+
+export function CommandPaletteProvider({
+  children,
+}: {
+  children: React.ReactNode
+}) {
+  const [open, setOpen] = useState(false)
+  const toggle = useCallback(() => setOpen((v) => !v), [])
+
+  useEffect(() => {
+    const down = (e: KeyboardEvent) => {
+      if ((e.key === 'k' && (e.metaKey || e.ctrlKey)) || e.key === '/') {
+        // Don't hijack '/' in inputs
+        if (e.key === '/' && (e.target as HTMLElement).tagName !== 'BODY') return
+        e.preventDefault()
+        toggle()
+      }
+    }
+    window.addEventListener('keydown', down)
+    return () => window.removeEventListener('keydown', down)
+  }, [toggle])
+
+  return (
+    <CommandPaletteCtx.Provider value={{ open, setOpen, toggle }}>
+      {children}
+    </CommandPaletteCtx.Provider>
+  )
+}
+
+export function useCommandPalette() {
+  return useContext(CommandPaletteCtx)
+}
+
+/* ── CommandPalette component ────────────────────────────────────── */
+
+export function CommandPalette({
+  open,
+  onOpenChange,
+  groups,
+  placeholder = 'Search or type a command…',
+  className,
+}: CommandPaletteProps) {
+  if (!open) return null
+
+  return (
+    <>
+      {/* Backdrop */}
+      <div
+        className="fixed inset-0 z-50 bg-black/60 backdrop-blur-sm"
+        onClick={() => onOpenChange(false)}
+        aria-hidden="true"
+      />
+
+      {/* Dialog */}
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Command palette"
+        className={cn(
+          'fixed left-1/2 top-[20%] z-50 w-full max-w-lg -translate-x-1/2',
+          'overflow-hidden rounded-xl border border-border',
+          'bg-popover shadow-2xl',
+          'animate-in fade-in-0 zoom-in-95 duration-150',
+          className
+        )}
+      >
+        <Command className="flex flex-col">
+          {/* Search input */}
+          <div className="flex items-center gap-3 border-b border-border px-4 py-3">
+            <Search className="h-4 w-4 shrink-0 text-muted-foreground" />
+            <Command.Input
+              className={cn(
+                'flex-1 bg-transparent text-sm text-foreground outline-none',
+                'placeholder:text-muted-foreground',
+              )}
+              placeholder={placeholder}
+            />
+            <button
+              onClick={() => onOpenChange(false)}
+              className="rounded-sm opacity-60 hover:opacity-100 transition-opacity focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+              aria-label="Close"
+            >
+              <X className="h-4 w-4" />
+            </button>
+          </div>
+
+          {/* Results */}
+          <Command.List className="max-h-[320px] overflow-y-auto p-2">
+            <Command.Empty className="py-8 text-center text-sm text-muted-foreground">
+              No results found.
+            </Command.Empty>
+
+            {groups.map((group) => (
+              <Command.Group
+                key={group.heading}
+                heading={group.heading}
+                className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-semibold [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group-heading]]:uppercase [&_[cmdk-group-heading]]:tracking-wider"
+              >
+                {group.items.map((item) => (
+                  <Command.Item
+                    key={item.id}
+                    value={item.label}
+                    onSelect={() => {
+                      item.onSelect()
+                      onOpenChange(false)
+                    }}
+                    className={cn(
+                      'flex items-center gap-3 rounded-md px-3 py-2 text-sm cursor-pointer',
+                      'data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground',
+                      'hover:bg-accent hover:text-accent-foreground',
+                      'transition-colors outline-none',
+                    )}
+                  >
+                    {item.icon && (
+                      <span className="shrink-0 flex items-center justify-center w-4 h-4 text-muted-foreground">
+                        {item.icon}
+                      </span>
+                    )}
+                    <span className="flex-1 min-w-0 truncate">{item.label}</span>
+                    {item.description && (
+                      <span className="text-xs text-muted-foreground truncate max-w-[120px]">
+                        {item.description}
+                      </span>
+                    )}
+                    {item.shortcut && (
+                      <kbd className="ml-auto pointer-events-none flex items-center gap-0.5 rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] font-mono text-muted-foreground">
+                        {item.shortcut}
+                      </kbd>
+                    )}
+                  </Command.Item>
+                ))}
+              </Command.Group>
+            ))}
+          </Command.List>
+
+          {/* Footer */}
+          <div className="border-t border-border px-4 py-2 flex items-center gap-4 text-[11px] text-muted-foreground">
+            <span><kbd className="font-mono">↑↓</kbd> navigate</span>
+            <span><kbd className="font-mono">↵</kbd> select</span>
+            <span><kbd className="font-mono">esc</kbd> close</span>
+          </div>
+        </Command>
+      </div>
+    </>
+  )
+}

package/src/nav/HotkeysProvider.tsx

@@ -0,0 +1,223 @@
+'use client'
+
+import React, {
+  createContext,
+  useCallback,
+  useContext,
+  useEffect,
+  useRef,
+  useState,
+} from 'react'
+
+/* ── Types ───────────────────────────────────────────────────────── */
+
+export interface HotkeyDef {
+  /** Key combo: e.g. 'c', '?', '⌘k', 'g d', 'Escape' */
+  key: string
+  /** Human-readable label shown in help sheet */
+  label: string
+  handler: () => void
+  group?: string
+}
+
+interface HotkeysContextValue {
+  hotkeys: HotkeyDef[]
+  registerHotkeys: (hotkeys: HotkeyDef[]) => () => void
+}
+
+const HotkeysCtx = createContext<HotkeysContextValue>({
+  hotkeys: [],
+  registerHotkeys: () => () => {},
+})
+
+/* ── Helpers ─────────────────────────────────────────────────────── */
+
+function normalizeKey(key: string): string {
+  return key.toLowerCase().replace('⌘', 'meta+')
+}
+
+function matchesEvent(pattern: string, e: KeyboardEvent): boolean {
+  const parts = normalizeKey(pattern).split('+').map((p) => p.trim())
+
+  const key = parts[parts.length - 1]
+  const needsMeta = parts.includes('meta')
+  const needsCtrl = parts.includes('ctrl')
+  const needsShift = parts.includes('shift')
+  const needsAlt = parts.includes('alt')
+
+  const eKey = e.key.toLowerCase()
+
+  return (
+    eKey === key &&
+    !!e.metaKey === needsMeta &&
+    !!e.ctrlKey === needsCtrl &&
+    !!e.shiftKey === needsShift &&
+    !!e.altKey === needsAlt
+  )
+}
+
+/* ── Sequence buffer for multi-key combos like "g d" ──────────────── */
+const SEQUENCE_TIMEOUT = 1000
+
+/* ── Provider ────────────────────────────────────────────────────── */
+
+export function HotkeysProvider({
+  children,
+  hotkeys: initialHotkeys = [],
+}: {
+  children: React.ReactNode
+  hotkeys?: HotkeyDef[]
+}) {
+  const [hotkeys, setHotkeys] = useState<HotkeyDef[]>(initialHotkeys)
+  const seqRef = useRef<string[]>([])
+  const seqTimerRef = useRef<ReturnType<typeof setTimeout> | null>(null)
+
+  const registerHotkeys = useCallback((newHotkeys: HotkeyDef[]) => {
+    setHotkeys((prev) => [...prev, ...newHotkeys])
+    return () => {
+      setHotkeys((prev) => prev.filter((h) => !newHotkeys.includes(h)))
+    }
+  }, [])
+
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      // Skip when typing in an input/textarea/select/contenteditable
+      const target = e.target as HTMLElement
+      if (
+        target.tagName === 'INPUT' ||
+        target.tagName === 'TEXTAREA' ||
+        target.tagName === 'SELECT' ||
+        target.isContentEditable
+      ) {
+        return
+      }
+
+      const key = e.key.toLowerCase()
+
+      // Extend sequence buffer
+      seqRef.current = [...seqRef.current, key]
+
+      // Clear buffer after timeout
+      if (seqTimerRef.current) clearTimeout(seqTimerRef.current)
+      seqTimerRef.current = setTimeout(() => {
+        seqRef.current = []
+      }, SEQUENCE_TIMEOUT)
+
+      // Check all registered hotkeys
+      for (const def of hotkeys) {
+        const pattern = def.key.trim().toLowerCase()
+
+        // Multi-key sequence (e.g. "g d")
+        if (pattern.includes(' ')) {
+          const seqParts = pattern.split(' ')
+          const buf = seqRef.current
+          if (
+            buf.length >= seqParts.length &&
+            seqParts.every((p, i) => buf[buf.length - seqParts.length + i] === p)
+          ) {
+            e.preventDefault()
+            seqRef.current = []
+            def.handler()
+            return
+          }
+        } else if (matchesEvent(def.key, e)) {
+          // Single-key or modifier combo
+          // Don't match plain letters if meta/ctrl is held (those are system shortcuts)
+          if ((e.metaKey || e.ctrlKey) && !def.key.includes('⌘') && !def.key.includes('meta') && !def.key.includes('ctrl')) {
+            continue
+          }
+          e.preventDefault()
+          seqRef.current = []
+          def.handler()
+          return
+        }
+      }
+    }
+
+    window.addEventListener('keydown', handleKeyDown)
+    return () => window.removeEventListener('keydown', handleKeyDown)
+  }, [hotkeys])
+
+  return (
+    <HotkeysCtx.Provider value={{ hotkeys, registerHotkeys }}>
+      {children}
+    </HotkeysCtx.Provider>
+  )
+}
+
+export function useHotkeys() {
+  return useContext(HotkeysCtx)
+}
+
+/* ── HelpSheet ───────────────────────────────────────────────────── */
+
+export function HelpSheet({
+  open,
+  onClose,
+}: {
+  open: boolean
+  onClose: () => void
+}) {
+  const { hotkeys } = useHotkeys()
+
+  useEffect(() => {
+    const handleEsc = (e: KeyboardEvent) => {
+      if (e.key === 'Escape' && open) onClose()
+    }
+    window.addEventListener('keydown', handleEsc)
+    return () => window.removeEventListener('keydown', handleEsc)
+  }, [open, onClose])
+
+  if (!open) return null
+
+  // Group hotkeys
+  const groups: Record<string, HotkeyDef[]> = {}
+  for (const hk of hotkeys) {
+    const g = hk.group ?? 'General'
+    if (!groups[g]) groups[g] = []
+    groups[g].push(hk)
+  }
+
+  return (
+    <>
+      <div
+        className="fixed inset-0 z-50 bg-black/50 backdrop-blur-sm"
+        onClick={onClose}
+        aria-hidden="true"
+      />
+      <div
+        role="dialog"
+        aria-modal="true"
+        aria-label="Keyboard shortcuts"
+        className="fixed left-1/2 top-1/2 z-50 w-full max-w-md -translate-x-1/2 -translate-y-1/2 rounded-xl border border-border bg-popover p-6 shadow-2xl animate-in fade-in-0 zoom-in-95 duration-150"
+      >
+        <div className="flex items-center justify-between mb-4">
+          <h2 className="text-sm font-semibold text-foreground">Keyboard Shortcuts</h2>
+          <button
+            onClick={onClose}
+            className="text-xs text-muted-foreground hover:text-foreground transition-colors"
+          >
+            <kbd className="font-mono rounded border border-border bg-muted px-1.5 py-0.5 text-[10px]">esc</kbd>
+          </button>
+        </div>
+        <div className="space-y-4">
+          {Object.entries(groups).map(([group, items]) => (
+            <div key={group}>
+              <p className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-2">{group}</p>
+              <div className="space-y-1">
+                {items.map((hk, i) => (
+                  <div key={i} className="flex items-center justify-between text-sm">
+                    <span className="text-foreground">{hk.label}</span>
+                    <kbd className="font-mono rounded border border-border bg-muted px-1.5 py-0.5 text-[10px] text-muted-foreground">
+                      {hk.key}
+                    </kbd>
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    </>
+  )
+}

package/src/nav/index.ts

@@ -0,0 +1,2 @@
+export * from './CommandPalette'
+export * from './HotkeysProvider'

package/src/primitives/Accordion/Accordion.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Accordion } from './Accordion'
+
+// TODO: add all variants
+const meta: Meta<typeof Accordion> = {
+  title: 'Primitives/Accordion',
+  component: Accordion,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Accordion>
+
+export const Default: Story = {}

package/src/primitives/Accordion/Accordion.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Accordion } from './Accordion'
+
+// TODO: add full a11y + variant tests
+describe('Accordion', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Accordion />)).not.toThrow()
+  })
+})

package/src/primitives/Accordion/Accordion.tsx

@@ -0,0 +1,56 @@
+// @ts-nocheck
+import * as React from "react"
+import * as AccordionPrimitive from "@radix-ui/react-accordion"
+import { ChevronDown } from "lucide-react"
+
+import { cn } from "../utils/cn"
+
+const Accordion = AccordionPrimitive.Root
+
+const AccordionItem = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Item>
+>(({ className, ...props }, ref) => (
+  <AccordionPrimitive.Item
+    ref={ref}
+    className={cn("border-b", className)}
+    {...props}
+  />
+))
+AccordionItem.displayName = "AccordionItem"
+
+const AccordionTrigger = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Header className="flex">
+    <AccordionPrimitive.Trigger
+      ref={ref}
+      className={cn(
+        "flex flex-1 items-center justify-between py-4 text-sm font-medium transition-all hover:underline text-left [&[data-state=open]>svg]:rotate-180",
+        className
+      )}
+      {...props}
+    >
+      {children}
+      <ChevronDown className="h-4 w-4 shrink-0 text-muted-foreground transition-transform duration-200" />
+    </AccordionPrimitive.Trigger>
+  </AccordionPrimitive.Header>
+))
+AccordionTrigger.displayName = AccordionPrimitive.Trigger.displayName
+
+const AccordionContent = React.forwardRef<
+  React.ElementRef<typeof AccordionPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof AccordionPrimitive.Content>
+>(({ className, children, ...props }, ref) => (
+  <AccordionPrimitive.Content
+    ref={ref}
+    className="overflow-hidden text-sm data-[state=closed]:animate-accordion-up data-[state=open]:animate-accordion-down"
+    {...props}
+  >
+    <div className={cn("pb-4 pt-0", className)}>{children}</div>
+  </AccordionPrimitive.Content>
+))
+AccordionContent.displayName = AccordionPrimitive.Content.displayName
+
+export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }

package/src/primitives/Accordion/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Accordion'

package/src/primitives/Alert/Alert.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Alert } from './Alert'
+
+// TODO: add all variants
+const meta: Meta<typeof Alert> = {
+  title: 'Primitives/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof Alert>
+
+export const Default: Story = {}

package/src/primitives/Alert/Alert.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { Alert } from './Alert'
+
+// TODO: add full a11y + variant tests
+describe('Alert', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<Alert />)).not.toThrow()
+  })
+})

package/src/primitives/Alert/Alert.tsx

@@ -0,0 +1,60 @@
+// @ts-nocheck
+import * as React from "react"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "../utils/cn"
+
+const alertVariants = cva(
+  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  {
+    variants: {
+      variant: {
+        default: "bg-background text-foreground",
+        destructive:
+          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+)
+
+const Alert = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
+>(({ className, variant, ...props }, ref) => (
+  <div
+    ref={ref}
+    role="alert"
+    className={cn(alertVariants({ variant }), className)}
+    {...props}
+  />
+))
+Alert.displayName = "Alert"
+
+const AlertTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h5
+    ref={ref}
+    className={cn("mb-1 font-medium leading-none tracking-tight", className)}
+    {...props}
+  />
+))
+AlertTitle.displayName = "AlertTitle"
+
+const AlertDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("text-sm [&_p]:leading-relaxed", className)}
+    {...props}
+  />
+))
+AlertDescription.displayName = "AlertDescription"
+
+export { Alert, AlertTitle, AlertDescription }

package/src/primitives/Alert/index.ts

@@ -0,0 +1,2 @@
+// @tier: stub — full checklist in Phase 3
+export * from './Alert'

package/src/primitives/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,14 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { AlertDialog } from './AlertDialog'
+
+// TODO: add all variants
+const meta: Meta<typeof AlertDialog> = {
+  title: 'Primitives/AlertDialog',
+  component: AlertDialog,
+  tags: ['autodocs'],
+}
+
+export default meta
+type Story = StoryObj<typeof AlertDialog>
+
+export const Default: Story = {}

package/src/primitives/AlertDialog/AlertDialog.test.tsx

@@ -0,0 +1,9 @@
+import { render } from '@testing-library/react'
+import { AlertDialog } from './AlertDialog'
+
+// TODO: add full a11y + variant tests
+describe('AlertDialog', () => {
+  it('renders without throwing', () => {
+    expect(() => render(<AlertDialog />)).not.toThrow()
+  })
+})