@mova-ui/react 0.4.6 → 0.4.8

package/registry/ai-suggestions.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-suggestions",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "ai-suggestions.tsx",
   "sourcePath": "ui/ai/ai-suggestions.tsx",
   "registryFile": "ai-suggestions.json",

package/registry/ai-task-list.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-task-list",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "ai-task-list.tsx",
   "sourcePath": "ui/ai/ai-task-list.tsx",
   "registryFile": "ai-task-list.json",

package/registry/ai-tool-call.json

@@ -1,7 +1,7 @@
 {
   "id": "ai-tool-call",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "ai-tool-call.tsx",
   "sourcePath": "ui/ai/ai-tool-call.tsx",
   "registryFile": "ai-tool-call.json",

package/registry/analyzing-image.json

@@ -1,7 +1,7 @@
 {
   "id": "analyzing-image",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "analyzing-image.tsx",
   "sourcePath": "ui/loading/analyzing-image.tsx",
   "registryFile": "analyzing-image.json",

package/registry/animated-sidebar.json

@@ -1,7 +1,7 @@
 {
   "id": "animated-sidebar",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "animated-sidebar.tsx",
   "sourcePath": "ui/animated-sidebar.tsx",
   "registryFile": "animated-sidebar.json",

package/registry/animated-tags.json

@@ -1,7 +1,7 @@
 {
   "id": "animated-tags",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "animated-tags.tsx",
   "sourcePath": "ui/patterns/animated-tags.tsx",
   "registryFile": "animated-tags.json",

package/registry/app-icon-load.json

@@ -1,7 +1,7 @@
 {
   "id": "app-icon-load",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "app-icon-load.tsx",
   "sourcePath": "ui/loading/app-icon-load.tsx",
   "registryFile": "app-icon-load.json",

package/registry/apple-breathe.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-breathe",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "apple-breathe.tsx",
   "sourcePath": "ui/loading/apple-breathe.tsx",
   "registryFile": "apple-breathe.json",

package/registry/apple-equalizer.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-equalizer",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "apple-equalizer.tsx",
   "sourcePath": "ui/loading/apple-equalizer.tsx",
   "registryFile": "apple-equalizer.json",

package/registry/apple-icon-morph.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-icon-morph",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "apple-icon-morph.tsx",
   "sourcePath": "ui/loading/apple-icon-morph.tsx",
   "registryFile": "apple-icon-morph.json",

package/registry/apple-pulse-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-pulse-dots",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "apple-pulse-dots.tsx",
   "sourcePath": "ui/loading/apple-pulse-dots.tsx",
   "registryFile": "apple-pulse-dots.json",

package/registry/apple-scale-pulse.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-scale-pulse",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "apple-scale-pulse.tsx",
   "sourcePath": "ui/loading/apple-scale-pulse.tsx",
   "registryFile": "apple-scale-pulse.json",

package/registry/apple-sound-wave.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-sound-wave",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "apple-sound-wave.tsx",
   "sourcePath": "ui/loading/apple-sound-wave.tsx",
   "registryFile": "apple-sound-wave.json",

package/registry/apple-text-reveal.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-text-reveal",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "apple-text-reveal.tsx",
   "sourcePath": "ui/loading/apple-text-reveal.tsx",
   "registryFile": "apple-text-reveal.json",

package/registry/apple-unlock.json

@@ -1,7 +1,7 @@
 {
   "id": "apple-unlock",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "apple-unlock.tsx",
   "sourcePath": "ui/loading/apple-unlock.tsx",
   "registryFile": "apple-unlock.json",

package/registry/arc-tracer.json

@@ -1,7 +1,7 @@
 {
   "id": "arc-tracer",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "arc-tracer.tsx",
   "sourcePath": "ui/loading/arc-tracer.tsx",
   "registryFile": "arc-tracer.json",

package/registry/balance-bar-chart-card.json

@@ -0,0 +1,18 @@
+{
+  "id": "balance-bar-chart-card",
+  "tier": "free",
+  "version": "0.4.8",
+  "file": "balance-bar-chart-card.tsx",
+  "sourcePath": "ui/cards/balance-bar-chart-card.tsx",
+  "registryFile": "balance-bar-chart-card.json",
+  "exports": [
+    "BalanceBarChartCard",
+    "BalanceBarChartCardProps",
+    "BalanceBarPeriod",
+    "BalanceBarPoint"
+  ],
+  "dependencies": [],
+  "license": "MIT",
+  "previewMode": "client",
+  "content": "\"use client\";\n\"use client\";\n\n/** Original Mova implementation; visual reference documented in docs/provenance/interactive-cards.md. */\nimport * as React from \"react\";\n\nexport interface BalanceBarPoint { label: string; value: number }\nexport interface BalanceBarPeriod { id: string; label: string; balance: number; change: string; detail: string; points: BalanceBarPoint[] }\nexport interface BalanceBarChartCardProps { periods?: BalanceBarPeriod[]; defaultPeriod?: string; currency?: string; locale?: string; onPeriodChange?: (period: BalanceBarPeriod) => void; theme?: \"light\" | \"dark\"; className?: string; style?: React.CSSProperties }\nconst periodsDefault: BalanceBarPeriod[] = [\n  { id: \"week\", label: \"Week\", balance: 12480.50, change: \"+8.2%\", detail: \"+$940.20 this week\", points: [\"M\", \"T\", \"W\", \"T\", \"F\", \"S\", \"S\"].map((label, i) => ({ label, value: [96, 142, 88, 210, 175, 120, 109][i] })) },\n  { id: \"month\", label: \"Month\", balance: 12480.50, change: \"+12.4%\", detail: \"+$4,220.60 this month\", points: [\"1\", \"5\", \"10\", \"15\", \"20\", \"25\", \"30\"].map((label, i) => ({ label, value: [420, 610, 380, 720, 560, 890, 640][i] })) },\n  { id: \"year\", label: \"Year\", balance: 12480.50, change: \"+18.6%\", detail: \"+$32,520.00 this year\", points: [\"Jun\", \"Jul\", \"Aug\", \"Sep\", \"Oct\", \"Nov\", \"Dec\"].map((label, i) => ({ label, value: [3120, 4210, 3680, 5020, 4460, 5890, 6140][i] })) },\n];\nconst useLayoutEffect = typeof window === \"undefined\" ? React.useEffect : React.useLayoutEffect;\n\n/** Keep the previous and next strings in the same grid cell during a soft swap. */\nfunction SoftText({ text, className = \"\" }: { text: string; className?: string }) {\n  const element = React.useRef<HTMLSpanElement>(null);\n  const initial = React.useRef(text);\n  useLayoutEffect(() => {\n    const el = element.current;\n    if (!el) return;\n    const previous = el.dataset.text ?? initial.current;\n    if (previous === text) return;\n    el.dataset.text = text;\n    const width = el.getBoundingClientRect().width;\n    const old = document.createElement(\"span\");\n    old.className = \"mbc-soft-old\";\n    old.setAttribute(\"aria-hidden\", \"true\");\n    old.textContent = previous;\n    const next = document.createElement(\"span\");\n    next.className = \"mbc-soft-new\";\n    next.textContent = text;\n    el.classList.remove(\"is-swapping\");\n    el.replaceChildren(old, next);\n    const nextWidth = next.getBoundingClientRect().width;\n    el.style.width = `${width}px`;\n    void el.offsetWidth;\n    el.classList.add(\"is-swapping\");\n    el.style.width = `${nextWidth}px`;\n    const computed = getComputedStyle(el);\n    const duration = Math.max(parseFloat(computed.getPropertyValue(\"--mbc-text-dur\")) || 0, parseFloat(computed.getPropertyValue(\"--mbc-text-resize-dur\")) || 0);\n    const timer = window.setTimeout(() => {\n      el.classList.remove(\"is-swapping\");\n      el.style.removeProperty(\"width\");\n      el.textContent = text;\n    }, duration + 40);\n    return () => window.clearTimeout(timer);\n  }, [text]);\n  return <span ref={element} className={`mbc-soft ${className}`}>{initial.current}</span>;\n}\n\nexport function BalanceBarChartCard({ periods = periodsDefault, defaultPeriod = \"week\", currency = \"USD\", locale = \"en-US\", onPeriodChange, theme = \"light\", className = \"\", style }: BalanceBarChartCardProps = {}) {\n  const [selected, setSelected] = React.useState(defaultPeriod);\n  const [active, setActive] = React.useState<number | null>(null);\n  const root = React.useRef<HTMLElement>(null);\n  const chart = React.useRef<HTMLDivElement>(null);\n  const tooltip = React.useRef<HTMLDivElement>(null);\n  const tooltipText = React.useRef<HTMLSpanElement>(null);\n  const tabs = React.useRef<HTMLDivElement>(null);\n  const pill = React.useRef<HTMLSpanElement>(null);\n  const measuredPill = React.useRef(false);\n  const lastTooltip = React.useRef(\"\");\n  const tipId = React.useId();\n  const chartId = React.useId();\n  const period = periods.find(item => item.id === selected) ?? periods[0];\n  const periodIndex = period ? periods.indexOf(period) : -1;\n  const money = new Intl.NumberFormat(locale, { style: \"currency\", currency });\n  const pointMoney = new Intl.NumberFormat(locale, { style: \"currency\", currency, minimumFractionDigits: 0, maximumFractionDigits: 2 });\n  const amountParts = money.formatToParts(period?.balance ?? 0);\n  const max = Math.max(1, ...(period?.points.map(point => Math.abs(point.value)) ?? []));\n  const signed = period?.points.some(point => point.value < 0) ?? false;\n  const negativeChange = period?.change.trim().startsWith(\"-\");\n  const detail = /^(.*?)(\\$[\\d,.]+)(\\s+this\\s+)(.+)$/.exec(period?.detail ?? \"\");\n  if (active !== null && period?.points[active]) lastTooltip.current = pointMoney.format(period.points[active].value);\n\n  useLayoutEffect(() => {\n    const tip = tooltip.current;\n    if (!tip) return;\n    const trigger = chart.current?.querySelectorAll<HTMLButtonElement>(\".mbc-column\")[active ?? -1];\n    if (active === null || !trigger || !chart.current || !tooltipText.current) {\n      tip.dataset.show = \"false\";\n      tip.setAttribute(\"aria-hidden\", \"true\");\n      return;\n    }\n    const showing = tip.dataset.show === \"true\";\n    const computed = getComputedStyle(tip);\n    const width = Math.ceil(tooltipText.current.scrollWidth + parseFloat(computed.paddingLeft) + parseFloat(computed.paddingRight));\n    const groupRect = chart.current.getBoundingClientRect();\n    const rect = trigger.getBoundingClientRect();\n    const x = Math.max(0, Math.min(rect.left - groupRect.left + rect.width / 2 - width / 2, groupRect.width - width));\n    if (!showing) tip.style.transition = \"none\";\n    tip.style.width = `${width}px`;\n    tip.style.setProperty(\"--mbc-tip-x\", `${x}px`);\n    if (!showing) { void tip.offsetWidth; tip.style.transition = \"\"; }\n    tip.dataset.show = \"true\";\n    tip.setAttribute(\"aria-hidden\", \"false\");\n  }, [active, period, currency, locale]);\n\n  const movePill = React.useCallback((animate: boolean) => {\n      const tab = tabs.current?.querySelector<HTMLButtonElement>('[role=tab][aria-selected=\"true\"]');\n      const el = pill.current;\n      if (!tab || !el) return;\n      if (!animate) el.style.transition = \"none\";\n      el.style.transform = `translateX(${tab.offsetLeft}px)`;\n      el.style.width = `${tab.offsetWidth}px`;\n      if (!animate) { void el.offsetWidth; el.style.transition = \"\"; }\n  }, []);\n\n  useLayoutEffect(() => {\n    movePill(measuredPill.current);\n    measuredPill.current = true;\n  }, [movePill, periodIndex, periods]);\n\n  useLayoutEffect(() => {\n    const resize = () => movePill(false);\n    const observer = typeof ResizeObserver !== \"undefined\" ? new ResizeObserver(resize) : undefined;\n    if (tabs.current) observer?.observe(tabs.current);\n    window.addEventListener(\"resize\", resize);\n    let cancelled = false;\n    document.fonts?.ready.then(() => { if (!cancelled) movePill(false); });\n    return () => { cancelled = true; observer?.disconnect(); window.removeEventListener(\"resize\", resize); };\n  }, []);\n\n  React.useEffect(() => {\n    const el = root.current;\n    if (!el) return;\n    let pressed: HTMLButtonElement | null = null;\n    let started = 0;\n    let timer: ReturnType<typeof setTimeout> | undefined;\n    const clear = () => { if (pressed) delete pressed.dataset.pressed; pressed = null; };\n    const down = (event: PointerEvent) => {\n      if (event.pointerType === \"mouse\") return;\n      const button = (event.target as Element).closest<HTMLButtonElement>(\"button\");\n      if (!button || button.disabled) return;\n      clearTimeout(timer); clear(); pressed = button; started = performance.now(); button.dataset.pressed = \"true\";\n    };\n    const up = () => {\n      if (!pressed) return;\n      const duration = parseFloat(getComputedStyle(pressed).getPropertyValue(\"--mbc-press-dur\")) || 150;\n      timer = setTimeout(clear, Math.max(0, duration - (performance.now() - started)));\n    };\n    el.addEventListener(\"pointerdown\", down);\n    window.addEventListener(\"pointerup\", up); window.addEventListener(\"pointercancel\", up);\n    return () => { clearTimeout(timer); clear(); el.removeEventListener(\"pointerdown\", down); window.removeEventListener(\"pointerup\", up); window.removeEventListener(\"pointercancel\", up); };\n  }, []);\n\n  function selectPeriod(item: BalanceBarPeriod) {\n    if (period?.id === item.id) return;\n    setSelected(item.id); setActive(null); onPeriodChange?.(item);\n  }\n\n  return <section ref={root} className={`mova-balance ${className}`} data-theme={theme} style={style} aria-label=\"Balance chart\">\n    <style>{css}</style>\n    <div className=\"mbc-label\">Balance</div>\n    <div className=\"mbc-summary\">{amountParts.map((part, index) => <span key={index} className={part.type === \"decimal\" || part.type === \"fraction\" ? \"mbc-cents\" : undefined}>{part.value}</span>)}</div>\n    <div className=\"mbc-change-row\">\n      {period && <span className=\"mbc-change\" data-negative={negativeChange}><SoftText text={period.change} /></span>}\n      <span className=\"mbc-detail\">{detail ? <>{detail[1]}<SoftText text={detail[2]} />{detail[3]}<SoftText text={detail[4]} /></> : <SoftText text={period?.detail ?? \"No balance data\"} />}</span>\n    </div>\n    <div ref={chart} id={chartId} className=\"mbc-chart\" role=\"tabpanel\" aria-label={period?.label ?? \"Balance data\"} onPointerLeave={() => setActive(null)}>{period?.points.map((point, index) => <button key={index} type=\"button\" className=\"mbc-column\" aria-label={`${point.label}: ${money.format(point.value)}`} aria-describedby={active === index ? tipId : undefined} onFocus={() => setActive(index)} onBlur={() => setActive(null)} onPointerEnter={() => setActive(index)} onClick={() => setActive(index)} data-current={index === period.points.length - 1}>\n      <span className=\"mbc-track\" data-signed={signed}><span className=\"mbc-bar\" style={{ height: `${Math.max(4, Math.round(Math.abs(point.value) / max * (signed ? 56 : 72)))}px`, ...(signed ? point.value < 0 ? { top: \"50%\", bottom: \"auto\", borderRadius: \"0 0 2px 2px\" } : { bottom: \"50%\" } : {}) }} /></span>\n      <SoftText className=\"mbc-axis\" text={point.label} />\n    </button>)}<div ref={tooltip} id={tipId} role=\"tooltip\" className=\"mbc-tooltip\" data-show=\"false\" aria-hidden=\"true\"><span ref={tooltipText}>{lastTooltip.current}</span></div></div>\n    <div ref={tabs} className=\"mbc-periods\" role=\"tablist\" aria-label=\"Chart period\"><span ref={pill} className=\"mbc-period-pill\" aria-hidden=\"true\" />{periods.map((item, index) => <button type=\"button\" role=\"tab\" key={item.id} aria-selected={period?.id === item.id} aria-controls={chartId} tabIndex={period?.id === item.id ? 0 : -1} onClick={() => selectPeriod(item)} onKeyDown={event => {\n      const next = event.key === \"ArrowRight\" ? (index + 1) % periods.length : event.key === \"ArrowLeft\" ? (index - 1 + periods.length) % periods.length : event.key === \"Home\" ? 0 : event.key === \"End\" ? periods.length - 1 : -1;\n      if (next < 0) return;\n      event.preventDefault(); selectPeriod(periods[next]); tabs.current?.querySelectorAll<HTMLButtonElement>(\"[role=tab]\")[next]?.focus();\n    }}>{item.label}</button>)}</div>\n  </section>;\n}\nconst css = `\n.mova-balance{--mbc-bg:#fff;--mbc-fg:#0d0d0d;--mbc-muted:#6c6c6c;--mbc-bar:rgba(28,95,251,.14);--mbc-bar-hover:rgba(28,95,251,.26);--mbc-bar-current:#1c5ffb;--mbc-chip:rgba(0,0,0,.04);--mbc-pill:#fff;--mbc-tip-bg:#fff;--mbc-tip-fg:#2f2f2f;--mbc-fill:#e7f9f3;--mbc-ink:#216e55;--mbc-ease:cubic-bezier(.22,1,.36,1);--mbc-press-dur:150ms;--mbc-chart-dur:400ms;--mbc-text-dur:200ms;--mbc-text-resize-dur:240ms;--mbc-tabs-dur:250ms;box-sizing:border-box;width:300px;max-width:100%;padding:24px;border-radius:24px;background:var(--mbc-bg);color:var(--mbc-fg);font:400 13px/20px 'Inter Variable',Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;letter-spacing:0;-webkit-font-smoothing:antialiased;box-shadow:0 0 0 1px #0000000a,0 8px 32px -4px #0000000f,0 1px 3px #0000000a}\n.mova-balance[data-theme=dark]{--mbc-bg:#1d1d1d;--mbc-fg:#f2f2f2;--mbc-muted:rgba(202,202,202,.7);--mbc-bar:rgba(92,140,255,.22);--mbc-bar-hover:rgba(92,140,255,.36);--mbc-bar-current:#5c8cff;--mbc-chip:rgba(255,255,255,.07);--mbc-pill:rgba(255,255,255,.12);--mbc-tip-bg:#262626;--mbc-tip-fg:#f2f2f2;--mbc-fill:#12291f;--mbc-ink:#6fd3a8;color-scheme:dark;box-shadow:0 0 0 1px #ffffff0f,0 8px 32px -4px #0000004d,0 1px 3px #0003}\n.mova-balance *{box-sizing:border-box}.mova-balance button{font:inherit;letter-spacing:inherit;margin:0;border:0;padding:0;background:none;color:inherit;-webkit-tap-highlight-color:transparent;touch-action:manipulation;user-select:none;-webkit-touch-callout:none;transition:transform var(--mbc-press-dur) var(--mbc-ease)}.mova-balance button:is(:active,[data-pressed=true]){transform:scale(.97)}.mova-balance button:focus{outline:none}.mova-balance button:focus-visible{box-shadow:0 0 0 2px var(--mbc-bg),0 0 0 4px var(--mbc-fg)}\n.mbc-label{font-size:13px;line-height:20px;color:var(--mbc-muted)}.mbc-summary{margin-top:16px;font-size:28px;line-height:34px;font-weight:500;font-variant-numeric:tabular-nums;white-space:nowrap}.mbc-cents{color:var(--mbc-muted)}.mbc-change-row{margin-top:8px;display:flex;align-items:center;gap:8px;font-size:12px;line-height:16px;color:var(--mbc-muted);min-width:0}.mbc-detail{min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}.mbc-change{flex:none;display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:50px;font-size:11px;line-height:16px;font-weight:500;background:var(--mbc-fill);color:var(--mbc-ink);font-variant-numeric:tabular-nums;box-shadow:0 1px 3px #0000000a,inset 0 0 0 1px color-mix(in srgb,var(--mbc-ink) 14%,transparent),inset 0 -1px 0 color-mix(in srgb,var(--mbc-ink) 10%,transparent)}.mbc-change[data-negative=true]{--mbc-fill:#fbe9e9;--mbc-ink:#ad3c3c}.mova-balance[data-theme=dark] .mbc-change[data-negative=true]{--mbc-fill:#4c2b2b;--mbc-ink:#ffaaaa}\n.mbc-soft{display:inline-grid;justify-items:var(--mbc-text-align,start);transition:width var(--mbc-text-resize-dur) var(--mbc-ease)}.mbc-soft>span{grid-area:1/1;white-space:pre;transition:filter var(--mbc-text-dur) ease-in-out,opacity var(--mbc-text-dur) ease-in-out}.mbc-soft-new{opacity:0;filter:blur(2px)}.mbc-soft.is-swapping .mbc-soft-old{opacity:0;filter:blur(2px)}.mbc-soft.is-swapping .mbc-soft-new{opacity:1;filter:blur(0)}\n.mbc-chart{display:flex;position:relative;width:100%;gap:4px;margin-top:16px}.mova-balance .mbc-column{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:8px;padding-bottom:4px;border-radius:8px;cursor:default}.mbc-track{position:relative;height:112px;width:100%;display:flex;align-items:flex-end;justify-content:center}.mbc-track[data-signed=true]:after{content:\"\";position:absolute;top:50%;left:0;right:0;height:1px;background:#8885}.mbc-track[data-signed=true] .mbc-bar{position:absolute}.mbc-bar{display:block;width:100%;max-width:24px;border-radius:2px 2px 0 0;background:var(--mbc-bar);transition:height var(--mbc-chart-dur) var(--mbc-ease),background-color 150ms var(--mbc-ease)}.mbc-column:focus-visible .mbc-bar{background:var(--mbc-bar-hover)}@media(hover:hover) and (pointer:fine){.mbc-column:hover .mbc-bar{background:var(--mbc-bar-hover)}.mbc-periods button:not([aria-selected=true]):hover{color:var(--mbc-fg)}}.mbc-column[data-current=true] .mbc-bar{background:var(--mbc-bar-current)}.mbc-axis{font-size:12px;line-height:16px;color:var(--mbc-muted);--mbc-text-align:center}.mbc-column[data-current=true] .mbc-axis{color:var(--mbc-fg)}\n.mbc-tooltip{position:absolute;top:0;left:0;z-index:2;display:inline-flex;align-items:center;justify-content:center;width:0;max-width:100%;overflow:hidden;translate:var(--mbc-tip-x,0px) 0;scale:.98;transform-origin:50% 100%;padding:8px 12px;border-radius:8px;background:var(--mbc-tip-bg);color:var(--mbc-tip-fg);white-space:nowrap;box-shadow:0 0 0 1px #0000000f,0 2px 6px #0000000d,0 4px 42px #0000000f;opacity:0;pointer-events:none;font-size:12px;line-height:16px;font-variant-numeric:tabular-nums;transition:opacity 50ms ease-out,scale 50ms ease-out,translate 160ms var(--mbc-ease),width 160ms var(--mbc-ease)}.mbc-tooltip[data-show=true]{opacity:1;scale:1;transition:opacity 150ms ease-out 80ms,scale 150ms ease-out 80ms,translate 160ms var(--mbc-ease),width 160ms var(--mbc-ease)}.mova-balance[data-theme=dark] .mbc-tooltip{box-shadow:0 1px 3px #0000000a,inset 0 1px #ffffff0a,inset 0 0 0 1px #c4c4c414}\n.mbc-periods{position:relative;display:flex;align-items:center;width:100%;gap:3px;background:var(--mbc-chip);padding:3px;border-radius:48px;margin-top:16px}.mova-balance .mbc-periods button{position:relative;flex:1;min-width:0;height:30px;padding:4px 12px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;border-radius:48px;font-size:13px;line-height:20px;font-weight:500;color:var(--mbc-muted);cursor:pointer;z-index:1;transition:color var(--mbc-tabs-dur) var(--mbc-ease),transform var(--mbc-press-dur) var(--mbc-ease)}.mbc-periods button[aria-selected=true]{color:var(--mbc-fg)}.mbc-period-pill{position:absolute;top:3px;left:0;height:30px;width:0;background:var(--mbc-pill);border-radius:48px;box-shadow:0 1px 3px #00000014,0 0 0 1px #0000000a;transform:translateX(0);transition:transform var(--mbc-tabs-dur) var(--mbc-ease),width var(--mbc-tabs-dur) var(--mbc-ease);will-change:transform,width;z-index:0;pointer-events:none}\n@media(prefers-reduced-motion:reduce){.mova-balance *{animation:none!important;transition:none!important}.mova-balance button:is(:active,[data-pressed=true]){transform:none}}\n`;\n"
+}

package/registry/bar-cascade.json

@@ -1,7 +1,7 @@
 {
   "id": "bar-cascade",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bar-cascade.tsx",
   "sourcePath": "ui/loading/bar-cascade.tsx",
   "registryFile": "bar-cascade.json",

package/registry/bar-sweep.json

@@ -1,7 +1,7 @@
 {
   "id": "bar-sweep",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bar-sweep.tsx",
   "sourcePath": "ui/loading/bar-sweep.tsx",
   "registryFile": "bar-sweep.json",

package/registry/blur-text.json

@@ -1,7 +1,7 @@
 {
   "id": "blur-text",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "blur-text.tsx",
   "sourcePath": "ui/text/blur-text.tsx",
   "registryFile": "blur-text.json",

package/registry/blur-up-char.json

@@ -1,7 +1,7 @@
 {
   "id": "blur-up-char",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "blur-up-char.tsx",
   "registryFile": "blur-up-char.json",
   "exports": [

package/registry/blur-up-word.json

@@ -1,7 +1,7 @@
 {
   "id": "blur-up-word",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "blur-up-word.tsx",
   "registryFile": "blur-up-word.json",
   "exports": [

package/registry/bobbing-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "bobbing-dots",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bobbing-dots.tsx",
   "sourcePath": "ui/loading/bobbing-dots.tsx",
   "registryFile": "bobbing-dots.json",

package/registry/bookmark-corner-peel.json

@@ -1,7 +1,7 @@
 {
   "id": "bookmark-corner-peel",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bookmark-corner-peel.tsx",
   "sourcePath": "components/css-animations/whimsical/ConceptTrios1.tsx",
   "registryFile": "bookmark-corner-peel.json",

package/registry/bookmark-save-pill.json

@@ -1,7 +1,7 @@
 {
   "id": "bookmark-save-pill",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bookmark-save-pill.tsx",
   "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
   "registryFile": "bookmark-save-pill.json",

package/registry/bookmark-toggle.json

@@ -1,7 +1,7 @@
 {
   "id": "bookmark-toggle",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bookmark-toggle.tsx",
   "registryFile": "bookmark-toggle.json",
   "exports": [

package/registry/border-trail-loading.json

@@ -1,7 +1,7 @@
 {
   "id": "border-trail-loading",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "border-trail-loading.tsx",
   "sourcePath": "ui/loading/border-trail-loading.tsx",
   "registryFile": "border-trail-loading.json",

package/registry/bounce-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "bounce-dots",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bounce-dots.tsx",
   "sourcePath": "ui/loading/bounce-dots.tsx",
   "registryFile": "bounce-dots.json",

package/registry/bounce-in-char.json

@@ -1,7 +1,7 @@
 {
   "id": "bounce-in-char",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bounce-in-char.tsx",
   "registryFile": "bounce-in-char.json",
   "exports": [

package/registry/bouncing-bars.json

@@ -1,7 +1,7 @@
 {
   "id": "bouncing-bars",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bouncing-bars.tsx",
   "sourcePath": "ui/loading/bouncing-bars.tsx",
   "registryFile": "bouncing-bars.json",

package/registry/bouncing-dots.json

@@ -1,7 +1,7 @@
 {
   "id": "bouncing-dots",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bouncing-dots.tsx",
   "sourcePath": "ui/loading/bouncing-dots.tsx",
   "registryFile": "bouncing-dots.json",

package/registry/bouncing-lines.json

@@ -1,7 +1,7 @@
 {
   "id": "bouncing-lines",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bouncing-lines.tsx",
   "sourcePath": "ui/loading/bouncing-lines.tsx",
   "registryFile": "bouncing-lines.json",

package/registry/bouncing-square.json

@@ -1,7 +1,7 @@
 {
   "id": "bouncing-square",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "bouncing-square.tsx",
   "sourcePath": "ui/loading/bouncing-square.tsx",
   "registryFile": "bouncing-square.json",

package/registry/breathe-ring.json

@@ -1,7 +1,7 @@
 {
   "id": "breathe-ring",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "breathe-ring.tsx",
   "sourcePath": "ui/loading/breathe-ring.tsx",
   "registryFile": "breathe-ring.json",

package/registry/breathing-glow.json

@@ -1,7 +1,7 @@
 {
   "id": "breathing-glow",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "breathing-glow.tsx",
   "sourcePath": "ui/loading/breathing-glow.tsx",
   "registryFile": "breathing-glow.json",

package/registry/breathing-square.json

@@ -1,7 +1,7 @@
 {
   "id": "breathing-square",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "breathing-square.tsx",
   "sourcePath": "ui/loading/breathing-square.tsx",
   "registryFile": "breathing-square.json",

package/registry/btn-1.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-1",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-1.tsx",
   "registryFile": "btn-1.json",
   "exports": [

package/registry/btn-10.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-10",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-10.tsx",
   "registryFile": "btn-10.json",
   "exports": [

package/registry/btn-11.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-11",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-11.tsx",
   "registryFile": "btn-11.json",
   "exports": [

package/registry/btn-12.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-12",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-12.tsx",
   "registryFile": "btn-12.json",
   "exports": [

package/registry/btn-13.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-13",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-13.tsx",
   "registryFile": "btn-13.json",
   "exports": [

package/registry/btn-14.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-14",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-14.tsx",
   "registryFile": "btn-14.json",
   "exports": [

package/registry/btn-15.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-15",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-15.tsx",
   "registryFile": "btn-15.json",
   "exports": [

package/registry/btn-16.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-16",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-16.tsx",
   "registryFile": "btn-16.json",
   "exports": [

package/registry/btn-17.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-17",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-17.tsx",
   "registryFile": "btn-17.json",
   "exports": [

package/registry/btn-18.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-18",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-18.tsx",
   "registryFile": "btn-18.json",
   "exports": [

package/registry/btn-19.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-19",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-19.tsx",
   "registryFile": "btn-19.json",
   "exports": [

package/registry/btn-2.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-2",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-2.tsx",
   "registryFile": "btn-2.json",
   "exports": [

package/registry/btn-20.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-20",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-20.tsx",
   "registryFile": "btn-20.json",
   "exports": [

package/registry/btn-21.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-21",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-21.tsx",
   "registryFile": "btn-21.json",
   "exports": [

package/registry/btn-22.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-22",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-22.tsx",
   "registryFile": "btn-22.json",
   "exports": [

package/registry/btn-23.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-23",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-23.tsx",
   "registryFile": "btn-23.json",
   "exports": [

package/registry/btn-24.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-24",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-24.tsx",
   "registryFile": "btn-24.json",
   "exports": [

package/registry/btn-25.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-25",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-25.tsx",
   "registryFile": "btn-25.json",
   "exports": [

package/registry/btn-26.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-26",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-26.tsx",
   "registryFile": "btn-26.json",
   "exports": [

package/registry/btn-27.json

@@ -1,7 +1,7 @@
 {
   "id": "btn-27",
   "tier": "free",
-  "version": "0.4.6",
+  "version": "0.4.8",
   "file": "btn-27.tsx",
   "registryFile": "btn-27.json",
   "exports": [