{ "$schema": "https://ui.shadcn.com/schema/registry-item.json", "name": "metal-prompt-bar", "title": "Metal Prompt Bar", "description": "An AI prompt bar with a live liquid-metal send button that reflects onto the chips beside it.", "dependencies": [ "metal-fx", "lucide-react" ], "registryDependencies": [ "@spectrumui/use-surface-theme" ], "files": [ { "path": "components/spectrumui/metal-prompt-bar.tsx", "content": "/**\n * Spectrum UI — MetalPromptBar\n *\n * An AI prompt bar whose send button wears a live liquid-metal ring painted by\n * `metal-fx` (Jakub Antalík, MIT, https://metal.jakubantalik.com). The chips\n * beside it are passed to MetalFx as reflection targets, so in dark mode they\n * pick up a soft mirrored glint of the ring — the composer from the metal-fx\n * showcase, wired for React state: auto-growing textarea, Enter to send,\n * Shift+Enter for newlines, and a disabled send state while empty.\n *\n * Dependencies: metal-fx, lucide-react, @/lib/utils\n *\n * @example\n * ask(text)} />\n */\n\n'use client';\n\nimport * as React from 'react';\nimport { MetalFx, type MetalFxPreset } from 'metal-fx';\nimport { ArrowUp, Paperclip } from 'lucide-react';\n\nimport { cn } from '@/lib/utils';\nimport { useSurfaceTheme, type SurfaceTheme } from '@/components/spectrumui/use-surface-theme';\n\nexport interface MetalPromptBarProps {\n /** Placeholder for the empty composer. Default \"Build anything…\" */\n placeholder?: string;\n /** Pills shown bottom-left; each one reflects the metal ring in dark mode. Default [\"Agent\", \"Auto\"] */\n chips?: string[];\n /** Metal palette for the send ring. Default \"chromatic\" */\n preset?: MetalFxPreset;\n /** \"auto\" follows a `.dark`/`.light` class on , then the OS. Default \"auto\" */\n theme?: SurfaceTheme;\n /** Fires with the trimmed text on Enter or the send button; the field clears afterwards */\n onSubmit?: (text: string) => void;\n /** Fires when a chip is clicked */\n onChipClick?: (chip: string) => void;\n /** Max textarea rows before it scrolls. Default 6 */\n maxRows?: number;\n className?: string;\n}\n\nexport function MetalPromptBar({\n placeholder = 'Build anything…',\n chips = ['Agent', 'Auto'],\n preset = 'chromatic',\n theme = 'auto',\n onSubmit,\n onChipClick,\n maxRows = 6,\n className,\n}: MetalPromptBarProps) {\n const resolved = useSurfaceTheme(theme);\n const [text, setText] = React.useState('');\n const textareaRef = React.useRef(null);\n // Stable refs per chip so MetalFx can paint reflections onto them\n const chipRefs = React.useMemo(\n () => chips.map(() => React.createRef()),\n [chips],\n );\n const canSend = text.trim().length > 0;\n\n const resize = (el: HTMLTextAreaElement) => {\n el.style.height = '0px';\n const line = parseFloat(getComputedStyle(el).lineHeight) || 24;\n el.style.height = `${Math.min(el.scrollHeight, line * maxRows)}px`;\n };\n\n const submit = () => {\n if (!canSend) return;\n onSubmit?.(text.trim());\n setText('');\n const el = textareaRef.current;\n if (el) {\n el.value = '';\n resize(el);\n }\n };\n\n return (\n \n {\n setText(event.target.value);\n resize(event.target);\n }}\n onKeyDown={(event) => {\n if (event.key === 'Enter' && !event.shiftKey && !event.nativeEvent.isComposing) {\n event.preventDefault();\n submit();\n }\n }}\n className=\"block w-full resize-none bg-transparent px-1 pt-1 text-[15px] leading-6 text-neutral-900 outline-hidden placeholder:text-neutral-400 dark:text-neutral-100 dark:placeholder:text-neutral-500\"\n />\n

\n \n \n \n {chips.map((chip, index) => (\n onChipClick?.(chip)}\n className=\"h-9 rounded-full border border-black/8 px-3.5 text-[13px] font-medium text-neutral-700 transition-colors hover:bg-black/4 dark:border-white/10 dark:text-neutral-200 dark:hover:bg-white/6\"\n >\n {chip}\n \n ))}\n \n \n \n \n \n \n

\n \n );\n}\n", "type": "registry:component", "target": "components/spectrumui/metal-prompt-bar.tsx" } ], "type": "registry:component" }