@mova-ui/react 0.4.5 → 0.4.7

package/registry/use-stagger.json

@@ -1,7 +1,7 @@
 {
   "id": "use-stagger",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "use-stagger.ts",
   "sourcePath": "hooks/use-stagger.ts",
   "registryFile": "use-stagger.json",

package/registry/use-web-haptics.json

@@ -1,7 +1,7 @@
 {
   "id": "use-web-haptics",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "use-web-haptics.ts",
   "sourcePath": "hooks/use-web-haptics.ts",
   "registryFile": "use-web-haptics.json",

package/registry/users-growth-pill-progress.json

@@ -1,7 +1,7 @@
 {
   "id": "users-growth-pill-progress",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "users-growth-pill-progress.tsx",
   "registryFile": "users-growth-pill-progress.json",
   "exports": [

package/registry/utils.json

@@ -1,7 +1,7 @@
 {
   "id": "utils",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "utils.ts",
   "sourcePath": "lib/utils.ts",
   "registryFile": "utils.json",

package/registry/vertical-wheel-counter.json

@@ -1,7 +1,7 @@
 {
   "id": "vertical-wheel-counter",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "vertical-wheel-counter.tsx",
   "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
   "registryFile": "vertical-wheel-counter.json",

package/registry/views-hourly-wave-chart.json

@@ -1,7 +1,7 @@
 {
   "id": "views-hourly-wave-chart",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "views-hourly-wave-chart.tsx",
   "registryFile": "views-hourly-wave-chart.json",
   "exports": [

package/registry/voice-assistant-card.json

@@ -0,0 +1,19 @@
+{
+  "id": "voice-assistant-card",
+  "tier": "free",
+  "version": "0.4.7",
+  "file": "voice-assistant-card.tsx",
+  "sourcePath": "ui/cards/voice-assistant-card.tsx",
+  "registryFile": "voice-assistant-card.json",
+  "exports": [
+    "VoiceAssistantCard",
+    "VoiceAssistantCardProps",
+    "VoiceAssistantChat"
+  ],
+  "dependencies": [
+    "lucide-react"
+  ],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n/** Original Mova implementation. Voice is a local simulation and never requests microphone access. */\nimport * as React from \"react\";\nimport { ArrowUp, ImagePlus, Menu, Plus, X } from \"lucide-react\";\n\nexport interface VoiceAssistantChat { id: string; title: string; preview: string; time?: string }\nexport interface VoiceAssistantCardProps {\n  name?: string; chats?: VoiceAssistantChat[]; simulatedTranscript?: string;\n  onSend?: (message: string, image?: File) => void | Promise<void>; onChatChange?: (chat: VoiceAssistantChat) => void;\n  theme?: \"light\" | \"dark\"; className?: string; style?: React.CSSProperties;\n}\nconst recentChats: VoiceAssistantChat[] = [{ id: \"cafe\", title: \"Quiet café nearby\", preview: \"A little room to think\", time: \"Now\" }, { id: \"trip\", title: \"A weekend away\", preview: \"Plan a slow Sunday\", time: \"Yesterday\" }, { id: \"ideas\", title: \"Ideas for the studio\", preview: \"A fresh perspective\", time: \"Monday\" }];\nexport function VoiceAssistantCard({ name = \"Aria\", chats = recentChats, simulatedTranscript = \"Find me a quiet café nearby with good wifi for this afternoon\", onSend, onChatChange, theme = \"light\", className = \"\", style }: VoiceAssistantCardProps = {}) {\n  const [list, setList] = React.useState(false);\n  const [chatId, setChatId] = React.useState<string | undefined>(chats[0]?.id);\n  const [draft, setDraft] = React.useState(\"\");\n  const [transcript, setTranscript] = React.useState(\"\");\n  const [phase, setPhase] = React.useState<\"idle\" | \"listening\" | \"sending\" | \"sent\" | \"error\">(\"idle\");\n  const [attachment, setAttachment] = React.useState<File | undefined>();\n  const [imageUrl, setImageUrl] = React.useState(\"\");\n  const fileInput = React.useRef<HTMLInputElement>(null);\n  const input = React.useRef<HTMLInputElement>(null);\n  const generation = React.useRef(0);\n  const sending = React.useRef(false);\n  const menu = React.useRef<HTMLButtonElement>(null);\n  const listRef = React.useRef<HTMLDivElement>(null);\n  const pendingFocus = React.useRef(false);\n  const currentChat = chats.find(chat => chat.id === chatId);\n  React.useEffect(() => { if (!attachment) { setImageUrl(\"\"); return; } const url = URL.createObjectURL(attachment); setImageUrl(url); return () => URL.revokeObjectURL(url); }, [attachment]);\n  React.useEffect(() => () => { generation.current++; }, []);\n  React.useEffect(() => {\n    if (phase !== \"listening\") return;\n    let index = 0;\n    const words = simulatedTranscript.split(/\\s+/).filter(Boolean);\n    const timer = window.setInterval(() => { index++; setTranscript(words.slice(0, index).join(\" \")); if (index >= words.length) { window.clearInterval(timer); setDraft(simulatedTranscript); setPhase(\"idle\"); } }, 160);\n    return () => window.clearInterval(timer);\n  }, [phase, simulatedTranscript]);\n  React.useEffect(() => { if (list) listRef.current?.querySelector<HTMLButtonElement>(\"button\")?.focus(); else if (pendingFocus.current) { input.current?.focus(); pendingFocus.current = false; } }, [list]);\n  async function send(event?: React.FormEvent) {\n    event?.preventDefault();\n    if ((!draft.trim() && !attachment) || sending.current) return;\n    const text = draft.trim();\n    const run = ++generation.current;\n    sending.current = true; setTranscript(text); setPhase(\"sending\");\n    try { await onSend?.(text, attachment); if (generation.current === run) { setDraft(\"\"); setPhase(\"sent\"); } }\n    catch { if (generation.current === run) setPhase(\"error\"); }\n    finally { sending.current = false; }\n  }\n  function reset() { pendingFocus.current = true; setChatId(undefined); generation.current++; setDraft(\"\"); setTranscript(\"\"); setAttachment(undefined); setPhase(\"idle\"); setList(false); }\n  const caption = { idle: \"Type, or try the voice preview\", listening: \"Voice preview · listening…\", sending: \"Sending…\", sent: onSend ? \"Message sent\" : \"Message preview ready\", error: \"Could not send. Please try again.\" }[phase];\n  return <section className={`mova-voice ${className}`} data-theme={theme} data-listening={phase === \"listening\"} style={style} aria-label={`${name} voice assistant`}>\n    <style>{css}</style><header><button ref={menu} type=\"button\" aria-label={list ? \"Close conversations\" : \"Open conversations\"} aria-expanded={list} disabled={phase === \"sending\"} onClick={() => { setList(!list); if (phase === \"listening\") setPhase(\"idle\"); }}>{list ? <X size={17} /> : <Menu size={17} />}</button><div><strong>{name}</strong><small>{list ? \"Your conversations\" : currentChat?.title ?? \"New conversation\"}</small></div></header>\n    {list ? <div className=\"mvc-list\" ref={listRef} onKeyDown={event => { if (event.key === \"Escape\") { setList(false); menu.current?.focus(); } }}><button type=\"button\" className=\"mvc-new\" onClick={reset}><Plus size={16} />New conversation</button>{chats.map(chat => <button type=\"button\" key={chat.id} className=\"mvc-chat\" onClick={() => { reset(); setChatId(chat.id); onChatChange?.(chat); }}><span><strong>{chat.title}</strong><small>{chat.preview}</small></span><small>{chat.time}</small></button>)}</div> : <><div className=\"mvc-body\"><p className=\"mvc-greeting\">How can I help you today?</p><div className=\"mvc-transcript\" role=\"status\" aria-live={phase === \"listening\" ? \"off\" : \"polite\"}>{imageUrl && <img src={imageUrl} alt=\"Attached image preview\" />}{transcript && <p>{transcript}</p>}</div></div><footer><div className=\"mvc-caption\" role=\"status\">{caption}</div><form onSubmit={event => void send(event)}><button type=\"button\" aria-label={attachment ? \"Remove image\" : \"Attach image\"} disabled={phase === \"sending\"} onClick={() => attachment ? setAttachment(undefined) : fileInput.current?.click()}>{attachment ? <X size={16} /> : <ImagePlus size={16} />}</button><input ref={fileInput} hidden type=\"file\" accept=\"image/*\" onChange={event => { const file = event.target.files?.[0]; if (file?.type.startsWith(\"image/\") && file.size <= 10 * 1024 * 1024) setAttachment(file); event.target.value = \"\"; }} /><input ref={input} type=\"text\" aria-label={`Message ${name}`} placeholder={`Ask ${name} anything`} value={draft} disabled={phase === \"listening\" || phase === \"sending\"} maxLength={2000} onChange={event => setDraft(event.target.value)} />{draft.trim() || attachment ? <button type=\"submit\" className=\"mvc-action\" aria-label=\"Send message\" disabled={phase === \"sending\"}><ArrowUp size={17} /></button> : <button type=\"button\" className=\"mvc-action\" aria-label={phase === \"listening\" ? \"Stop voice preview\" : \"Start voice preview\"} aria-pressed={phase === \"listening\"} onClick={() => { if (phase === \"listening\") { setDraft(transcript); setPhase(\"idle\"); } else { setTranscript(\"\"); setPhase(\"listening\"); } }}><span className=\"mvc-wave\" aria-hidden=\"true\">{[8, 13, 19, 11, 6].map((height, index) => <i key={index} style={{ height, animationDelay: `${index * 90}ms` }} />)}</span></button>}</form></footer></>}\n  </section>;\n}\nconst css = `\n.mova-voice{--mvc-bg:#fff;--mvc-fg:#252525;--mvc-muted:#777;--mvc-chip:#f0f0f0;position:relative;box-sizing:border-box;width:360px;max-width:100%;height:340px;border-radius:24px;border:1px solid #8888881a;background:var(--mvc-bg);color:var(--mvc-fg);font:400 13px/20px -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;display:flex;flex-direction:column;box-shadow:0 8px 32px -4px #0000000c;isolation:isolate}.mova-voice[data-theme=dark]{--mvc-bg:#1d1d1d;--mvc-fg:#f2f2f2;--mvc-muted:#999;--mvc-chip:#303030;color-scheme:dark}.mova-voice:after{content:\"\";position:absolute;z-index:-1;bottom:-1px;left:18%;right:18%;height:2px;background:linear-gradient(90deg,transparent,#b9dbbc,#b294ce,#efaf84,transparent);filter:blur(5px);opacity:.7;transition:opacity 250ms,filter 250ms}.mova-voice[data-listening=true]:after{opacity:1;filter:blur(7px);height:6px}.mova-voice *{box-sizing:border-box}.mova-voice button,.mova-voice input{font:inherit;color:inherit}.mova-voice button{border:0;background:none;cursor:pointer}.mova-voice button:disabled{opacity:.5;cursor:default}.mova-voice :focus-visible{outline:2px solid #7898e8;outline-offset:2px}.mova-voice header{padding:12px;display:flex;gap:8px;align-items:center;border-bottom:1px solid #88888818;flex:none}.mova-voice header>button{width:30px;height:32px;border-radius:50%;display:grid;place-items:center;flex:none}.mova-voice header>div{min-width:0}.mova-voice header strong{display:block;font-size:16px;line-height:22px;font-weight:500}.mova-voice header small{display:block;font-size:12px;line-height:16px;color:var(--mvc-muted);overflow-wrap:anywhere}.mvc-body{flex:1;min-height:0;overflow:auto;padding:20px 24px}.mvc-greeting{margin:0;padding:8px 12px;background:var(--mvc-chip);border-radius:18px 18px 18px 4px;display:inline-block}.mvc-transcript{margin-top:16px}.mvc-transcript p{margin:0;overflow-wrap:anywhere;animation:mvc-in 200ms ease-out}.mvc-transcript img{width:40px;height:40px;object-fit:cover;border-radius:8px;margin-bottom:8px}.mova-voice footer{padding:0 12px 12px}.mvc-caption{text-align:center;min-height:20px;font-size:11px;color:var(--mvc-muted);margin-bottom:6px}.mova-voice form{display:flex;align-items:center;gap:6px;padding:4px;border:1px solid #88888830;border-radius:24px}.mova-voice form>button{flex:none;width:32px;height:32px;border-radius:50%;display:grid;place-items:center}.mova-voice button:hover{background:var(--mvc-chip)}.mova-voice form>input[type=text]{min-width:0;width:100%;border:0;background:none;outline:none;padding:4px 2px;font-size:12px}.mova-voice form:focus-within{outline:2px solid #7898e8;outline-offset:2px}.mova-voice .mvc-action{background:var(--mvc-chip)}.mvc-wave{height:20px;display:flex;align-items:center;gap:2px}.mvc-wave i{display:block;width:2px;background:currentColor;border-radius:2px}.mova-voice[data-listening=true] .mvc-wave i{animation:mvc-wave 700ms ease-in-out infinite alternate}.mvc-list{padding:12px;overflow:auto;flex:1}.mvc-new{display:flex;gap:8px;align-items:center;width:100%;padding:10px;border-radius:10px}.mvc-chat{display:flex;align-items:center;gap:8px;text-align:left;width:100%;padding:12px 10px;border-radius:12px}.mvc-chat>span{flex:1;min-width:0}.mvc-chat strong{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}.mvc-chat small{display:block;color:var(--mvc-muted);font-size:11px}.mvc-chat>small{flex:none;font-size:10px}@keyframes mvc-wave{to{transform:scaleY(.35)}}@keyframes mvc-in{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mova-voice *,.mova-voice:after{animation:none!important;transition:none!important}}\n`;\n"
+}

package/registry/wandering-cube.json

@@ -1,7 +1,7 @@
 {
   "id": "wandering-cube",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "wandering-cube.tsx",
   "sourcePath": "ui/loading/wandering-cube.tsx",
   "registryFile": "wandering-cube.json",

package/registry/wandering-eyes.json

@@ -1,7 +1,7 @@
 {
   "id": "wandering-eyes",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "wandering-eyes.tsx",
   "sourcePath": "ui/loading/wandering-eyes.tsx",
   "registryFile": "wandering-eyes.json",

package/registry/watch-spinner.json

@@ -1,7 +1,7 @@
 {
   "id": "watch-spinner",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "watch-spinner.tsx",
   "sourcePath": "ui/loading/watch-spinner.tsx",
   "registryFile": "watch-spinner.json",

package/registry/wave-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "wave-dots",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "wave-dots.tsx",
   "sourcePath": "ui/loading/wave-dots.tsx",
   "registryFile": "wave-dots.json",

package/registry/wave-physics-loader.json

@@ -1,7 +1,7 @@
 {
   "id": "wave-physics-loader",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "wave-physics-loader.tsx",
   "sourcePath": "ui/loading/wave-physics-loader.tsx",
   "registryFile": "wave-physics-loader.json",

package/registry/wave-reveal.json

@@ -1,7 +1,7 @@
 {
   "id": "wave-reveal",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "wave-reveal.tsx",
   "registryFile": "wave-reveal.json",
   "exports": [

package/registry/waveform-loader.json

@@ -1,7 +1,7 @@
 {
   "id": "waveform-loader",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "waveform-loader.tsx",
   "sourcePath": "ui/loading/waveform-loader.tsx",
   "registryFile": "waveform-loader.json",

package/registry/word-reveal.json

@@ -1,7 +1,7 @@
 {
   "id": "word-reveal",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "word-reveal.tsx",
   "sourcePath": "ui/text/word-reveal.tsx",
   "registryFile": "word-reveal.json",

package/registry/zig-zag-pulse.json

@@ -1,7 +1,7 @@
 {
   "id": "zig-zag-pulse",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "zig-zag-pulse.tsx",
   "sourcePath": "ui/loading/zig-zag-pulse.tsx",
   "registryFile": "zig-zag-pulse.json",

package/registry/zoom-in-text.json

@@ -1,7 +1,7 @@
 {
   "id": "zoom-in-text",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "zoom-in-text.tsx",
   "registryFile": "zoom-in-text.json",
   "exports": [

package/registry/zoom-in.json

@@ -1,7 +1,7 @@
 {
   "id": "zoom-in",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "zoom-in.tsx",
   "sourcePath": "ui/entrance/zoom-in.tsx",
   "registryFile": "zoom-in.json",

package/registry/zoom-out-text.json

@@ -1,7 +1,7 @@
 {
   "id": "zoom-out-text",
   "tier": "free",
-  "version": "0.4.5",
+  "version": "0.4.7",
   "file": "zoom-out-text.tsx",
   "registryFile": "zoom-out-text.json",
   "exports": [