@mova-ui/react 0.4.7 → 0.4.8

package/registry/btn-30.json

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

package/registry/btn-31.json

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

package/registry/btn-32.json

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

package/registry/btn-33.json

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

package/registry/btn-34.json

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

package/registry/btn-35.json

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

package/registry/btn-36.json

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

package/registry/btn-37.json

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

package/registry/btn-4.json

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

package/registry/btn-5.json

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

package/registry/btn-6.json

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

package/registry/btn-7.json

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

package/registry/btn-8.json

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

package/registry/btn-9.json

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

package/registry/button-slide-arrow.json

@@ -1,7 +1,7 @@
 {
   "id": "button-slide-arrow",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "button-slide-arrow.tsx",
   "registryFile": "button-slide-arrow.json",
   "exports": [

package/registry/cacheable-bandwidth-cost.json

@@ -1,7 +1,7 @@
 {
   "id": "cacheable-bandwidth-cost",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "cacheable-bandwidth-cost.tsx",
   "registryFile": "cacheable-bandwidth-cost.json",
   "exports": [

package/registry/calendar-day-card.json

@@ -1,20 +1,19 @@
 {
   "id": "calendar-day-card",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "calendar-day-card.tsx",
   "sourcePath": "ui/cards/calendar-day-card.tsx",
   "registryFile": "calendar-day-card.json",
   "exports": [
     "CalendarDay",
+    "CalendarDayAttendee",
     "CalendarDayCard",
     "CalendarDayCardProps",
     "CalendarDayEvent"
   ],
-  "dependencies": [
-    "lucide-react"
-  ],
+  "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\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\n\nexport interface CalendarDayEvent { id: string; title: string; time: string; location?: string; color?: string }\nexport interface CalendarDay { id: string; weekday: string; day: number; dateLabel: string; events: CalendarDayEvent[] }\nexport interface CalendarDayCardProps { days?: CalendarDay[]; defaultSelectedDay?: string; onDayChange?: (day: CalendarDay) => void; onEventClick?: (event: CalendarDayEvent) => void; theme?: \"light\" | \"dark\"; className?: string; style?: React.CSSProperties }\nconst weekdays = [\"Monday\", \"Tuesday\", \"Wednesday\", \"Thursday\", \"Friday\"];\nconst meetingTitles = [[\"Weekly planning\", \"Design critique\"], [\"Roadmap review\", \"Lunch with Priya\", \"Hiring sync\"], [\"Customer call\", \"Sprint demo\"], [\"Standup\", \"Product review\", \"1:1 with Maya\"], [\"Retro\", \"Team drinks\"]];\nconst meetingTimes = [[\"9:30 – 10:15\", \"14:00 – 15:00\"], [\"10:00 – 11:00\", \"13:30 – 14:30\", \"16:00 – 16:30\"], [\"11:00 – 11:30\", \"15:00 – 16:00\"], [\"9:00 – 9:15\", \"11:30 – 12:30\", \"16:00 – 16:30\"], [\"10:00 – 10:45\", \"15:30 – 16:30\"]];\nconst defaultDays: CalendarDay[] = weekdays.map((weekday, index) => ({ id: `${index + 11}`, weekday, day: index + 11, dateLabel: `March ${index + 11}`, events: meetingTitles[index].map((title, event) => ({ id: `${index}-${event}`, title, time: meetingTimes[index][event], location: [\"Zoom\", \"Room 2\", \"Café\"][event], color: [\"#7894e3\", \"#d7a265\", \"#b18ad1\"][event] })) }));\nexport function CalendarDayCard({ days = defaultDays, defaultSelectedDay = \"14\", onDayChange, onEventClick, theme = \"light\", className = \"\", style }: CalendarDayCardProps = {}) {\n  const [selected, setSelected] = React.useState(defaultSelectedDay);\n  const currentIndex = Math.max(0, days.findIndex(day => day.id === selected));\n  const current = days[currentIndex];\n  const labelId = React.useId();\n  function select(index: number) { const day = days[index]; if (day) { setSelected(day.id); onDayChange?.(day); } }\n  return <section className={`mova-calendar ${className}`} data-theme={theme} style={style} aria-label=\"Calendar day\">\n    <style>{css}</style><header><div><h2 id={labelId}>{current?.weekday ?? \"Your calendar\"}</h2><p>{current ? `${current.dateLabel} · ${current.events.length} ${current.events.length === 1 ? \"meeting\" : \"meetings\"}` : \"No days available\"}</p></div><div className=\"mcd-arrows\"><button type=\"button\" aria-label=\"Previous day\" disabled={!current || currentIndex === 0} onClick={() => select(currentIndex - 1)}><ChevronLeft size={16} /></button><button type=\"button\" aria-label=\"Next day\" disabled={!current || currentIndex === days.length - 1} onClick={() => select(currentIndex + 1)}><ChevronRight size={16} /></button></div></header>\n    <div className=\"mcd-days\" role=\"group\" aria-label=\"Select a day\">{days.map((day, index) => <button type=\"button\" key={day.id} aria-pressed={current?.id === day.id} aria-label={`${day.weekday}, ${day.dateLabel}`} onClick={() => select(index)}><span>{day.weekday.slice(0, 3)}</span><strong>{day.day}</strong></button>)}</div>\n    <div className=\"mcd-agenda\" aria-labelledby={labelId} aria-live=\"polite\" key={current?.id}>{current?.events.length ? current.events.map(event => <button type=\"button\" className=\"mcd-event\" key={event.id} onClick={() => onEventClick?.(event)} disabled={!onEventClick} style={{ \"--mcd-event\": event.color ?? \"#7894e3\" } as React.CSSProperties}><span className=\"mcd-event-line\" aria-hidden=\"true\" /><span><strong>{event.title}</strong><small>{event.time}{event.location ? ` · ${event.location}` : \"\"}</small></span></button>) : <p className=\"mcd-empty\">Nothing scheduled. Enjoy your day.</p>}</div>\n  </section>;\n}\nconst css = `\n.mova-calendar{--mcd-bg:#fff;--mcd-fg:#222;--mcd-muted:#737373;--mcd-chip:#f4f4f4;width:300px;max-width:100%;box-sizing:border-box;padding:24px;border-radius:24px;color:var(--mcd-fg);background:var(--mcd-bg);font:400 13px/20px -apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;border:1px solid #88888818;box-shadow:0 8px 32px -4px #0000000c}.mova-calendar[data-theme=dark]{--mcd-bg:#1d1d1d;--mcd-fg:#f2f2f2;--mcd-muted:#aaa;--mcd-chip:#2b2b2b;color-scheme:dark}.mova-calendar *{box-sizing:border-box}.mova-calendar h2,.mova-calendar p{margin:0}.mova-calendar h2{font-size:16px;line-height:22px;font-weight:500}.mova-calendar header{display:flex;align-items:center;gap:8px}.mova-calendar header>div:first-child{min-width:0;flex:1}.mova-calendar header p{font-size:12px;color:var(--mcd-muted);margin-top:2px}.mova-calendar button{font:inherit;color:inherit;border:0;background:transparent;cursor:pointer}.mova-calendar button:focus-visible{outline:2px solid #6d8ee6;outline-offset:3px}.mcd-arrows{display:flex;flex:none}.mcd-arrows button{width:28px;height:32px;display:grid;place-items:center;border-radius:8px}.mcd-arrows button:hover{background:var(--mcd-chip)}.mcd-arrows button:disabled{opacity:.3;cursor:default}.mcd-days{display:flex;gap:4px;margin:20px 0 16px;overflow:auto;padding:3px}.mcd-days button{min-width:38px;flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;padding:8px 4px;border-radius:12px;transition:background 180ms,color 180ms}.mcd-days span{font-size:11px;color:var(--mcd-muted)}.mcd-days strong{font-size:16px;font-weight:500}.mcd-days button[aria-pressed=true]{background:var(--mcd-fg);color:var(--mcd-bg)}.mcd-days button[aria-pressed=true] span{color:inherit;opacity:.75}.mcd-days button:not([aria-pressed=true]):hover{background:var(--mcd-chip)}.mcd-agenda{border-top:1px solid #88888820;padding-top:12px;min-height:174px;animation:mcd-enter 220ms ease-out}.mcd-event{width:100%;display:flex;gap:12px;padding:8px 0!important;text-align:left;border-radius:5px}.mcd-event:disabled{opacity:1;cursor:default}.mcd-event-line{width:3px;align-self:stretch;background:var(--mcd-event);border-radius:4px;flex:none}.mcd-event>span:last-child{min-width:0}.mcd-event strong{display:block;font-size:13px;font-weight:500;overflow-wrap:anywhere}.mcd-event small{display:block;font-size:12px;color:var(--mcd-muted)}.mcd-empty{padding-top:12px;color:var(--mcd-muted)}@keyframes mcd-enter{from{opacity:0;transform:translateY(5px)}to{opacity:1;transform:none}}@media(prefers-reduced-motion:reduce){.mova-calendar *{animation:none!important;transition:none!important}}\n`;\n"
+  "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 CalendarDayAttendee { name: string; image?: string; color?: string }\nexport interface CalendarDayEvent { id: string; title: string; time: string; location?: string; color?: string; attendees?: CalendarDayAttendee[] }\nexport interface CalendarDay { id: string; weekday: string; day: number; dateLabel: string; events: CalendarDayEvent[] }\nexport interface CalendarDayCardProps { days?: CalendarDay[]; defaultSelectedDay?: string; onDayChange?: (day: CalendarDay) => void; onEventClick?: (event: CalendarDayEvent) => void; theme?: \"light\" | \"dark\"; className?: string; style?: React.CSSProperties }\n\nconst portrait = (name: string, photo: string): CalendarDayAttendee => ({ name, image: `https://images.unsplash.com/${photo}?auto=format&fit=crop&q=80&w=48&h=48` });\nconst people = {\n  leo: portrait(\"Leo Park\", \"photo-1500648767791-00dcc994a43e\"),\n  maya: portrait(\"Maya Chen\", \"photo-1534528741775-53994a69daeb\"),\n  tom: portrait(\"Tom Hale\", \"photo-1506794778202-cad84cf45f1d\"),\n  ana: portrait(\"Ana Ruiz\", \"photo-1438761681033-6461ffad8d80\"),\n  jade: portrait(\"Jade Wu\", \"photo-1580489944761-15a19d654956\"),\n  priya: portrait(\"Priya Nair\", \"photo-1544005313-94ddf0286df2\"),\n  sam: portrait(\"Sam Okafor\", \"photo-1570158268183-d296b2892211\"),\n  nina: portrait(\"Nina Brooks\", \"photo-1632765854612-9b02b6ec2b15\"),\n};\nconst defaultDays: CalendarDay[] = [\n  { id: \"11\", weekday: \"Monday\", day: 11, dateLabel: \"March 11\", events: [\n    { id: \"0-0\", title: \"Weekly planning\", time: \"9:30 – 10:15\", location: \"Room 2\", color: \"#1C5FFB\" },\n    { id: \"0-1\", title: \"Design critique\", time: \"14:00 – 15:00\", location: \"Studio\", color: \"#B01CFB\", attendees: [people.maya, people.sam] },\n  ] },\n  { id: \"12\", weekday: \"Tuesday\", day: 12, dateLabel: \"March 12\", events: [\n    { id: \"1-0\", title: \"Roadmap review\", time: \"10:00 – 11:00\", location: \"Zoom\", color: \"#EF8121\", attendees: [people.leo, people.ana, people.nina] },\n    { id: \"1-1\", title: \"Lunch with Priya\", time: \"13:30 – 14:30\", location: \"Café\", color: \"#1EBB26\", attendees: [people.priya] },\n    { id: \"1-2\", title: \"Hiring sync\", time: \"16:00 – 16:30\", location: \"Room 4\", color: \"#1C5FFB\" },\n  ] },\n  { id: \"13\", weekday: \"Wednesday\", day: 13, dateLabel: \"March 13\", events: [\n    { id: \"2-0\", title: \"Customer call\", time: \"11:00 – 11:30\", location: \"Zoom\", color: \"#EC4A4A\", attendees: [people.tom, people.jade] },\n    { id: \"2-1\", title: \"Sprint demo\", time: \"15:00 – 16:00\", location: \"Studio\", color: \"#B01CFB\" },\n  ] },\n  { id: \"14\", weekday: \"Thursday\", day: 14, dateLabel: \"March 14\", events: [\n    { id: \"3-0\", title: \"Standup\", time: \"9:00 – 9:15\", location: \"Zoom\", color: \"#1C5FFB\" },\n    { id: \"3-1\", title: \"Product review\", time: \"11:30 – 12:30\", location: \"Room 2\", color: \"#B01CFB\", attendees: [people.jade, people.leo, people.tom] },\n    { id: \"3-2\", title: \"1:1 with Maya\", time: \"16:00 – 16:30\", location: \"Café\", color: \"#1EBB26\", attendees: [people.maya] },\n  ] },\n  { id: \"15\", weekday: \"Friday\", day: 15, dateLabel: \"March 15\", events: [\n    { id: \"4-0\", title: \"Retro\", time: \"10:00 – 10:45\", location: \"Studio\", color: \"#EF8121\", attendees: [people.ana, people.sam, people.nina] },\n    { id: \"4-1\", title: \"Team drinks\", time: \"15:30 – 16:30\", location: \"Rooftop\", color: \"#1EBB26\" },\n  ] },\n];\n\nfunction SoftText({ text, className = \"\" }: { text: string; className?: string }) {\n  const root = React.useRef<HTMLSpanElement>(null);\n  const incoming = React.useRef<HTMLSpanElement>(null);\n  const last = React.useRef(text);\n  const [content, setContent] = React.useState({ old: \"\", next: text });\n  const [swapping, setSwapping] = React.useState(false);\n  const [width, setWidth] = React.useState<number>();\n  React.useLayoutEffect(() => {\n    if (last.current === text) return;\n    const old = last.current;\n    last.current = text;\n    setWidth(root.current?.getBoundingClientRect().width);\n    setSwapping(false);\n    setContent({ old, next: text });\n    const frame = requestAnimationFrame(() => {\n      setWidth(incoming.current?.getBoundingClientRect().width);\n      setSwapping(true);\n    });\n    const timer = setTimeout(() => { setContent({ old: \"\", next: text }); setWidth(undefined); setSwapping(false); }, 280);\n    return () => { cancelAnimationFrame(frame); clearTimeout(timer); };\n  }, [text]);\n  return <span ref={root} className={`mcd-soft ${className}`} data-swapping={swapping} data-changing={!!content.old} style={{ width }}>\n    {content.old && <span className=\"mcd-soft-old\" aria-hidden=\"true\">{content.old}</span>}\n    <span ref={incoming} className=\"mcd-soft-new\">{content.next}</span>\n  </span>;\n}\n\nfunction Attendees({ people: attendees }: { people: CalendarDayAttendee[] }) {\n  const [active, setActive] = React.useState<number | null>(null);\n  const [returning, setReturning] = React.useState(false);\n  const shift = (index: number) => active === null ? 0 : -4 * Math.pow(.45, Math.abs(index - active));\n  function activate(index: number) { setReturning(false); setActive(index); }\n  function reset() { setReturning(true); setActive(null); }\n  return <div className=\"mcd-attendees\" role=\"group\" aria-label={`Attendees: ${attendees.map(person => person.name).join(\", \")}`} onMouseLeave={reset}>\n    {attendees.map((person, index) => <span key={`${person.name}-${index}`} className=\"mcd-avatar\" role=\"img\" aria-label={person.name} tabIndex={0} onMouseEnter={() => activate(index)} onFocus={() => activate(index)} onBlur={reset} data-returning={returning} style={{ \"--mcd-shift\": `${shift(index)}px`, \"--mcd-scale\": active === index ? 1.05 : 1, \"--mcd-cut-dy\": `${index < attendees.length - 1 ? shift(index + 1) - shift(index) : 0}px`, \"--mcd-avatar-color\": person.color ?? \"#c6b7d8\" } as React.CSSProperties}>\n      {person.image ? <img src={person.image} alt=\"\" width={24} height={24} /> : <span className=\"mcd-initials\" aria-hidden=\"true\">{person.name.split(/\\s+/).map(part => part[0]).slice(0, 2).join(\"\")}</span>}\n    </span>)}\n  </div>;\n}\n\nexport function CalendarDayCard({ days = defaultDays, defaultSelectedDay = \"14\", onDayChange, onEventClick, theme = \"light\", className = \"\", style }: CalendarDayCardProps = {}) {\n  const [selected, setSelected] = React.useState(defaultSelectedDay);\n  const currentIndex = Math.max(0, days.findIndex(day => day.id === selected));\n  const current = days[currentIndex];\n  const id = React.useId();\n  const tabs = React.useRef<(HTMLButtonElement | null)[]>([]);\n  const dayStrip = React.useRef<HTMLDivElement>(null);\n  const measured = React.useRef(false);\n  const [pill, setPill] = React.useState({ left: 0, width: 0, animate: false });\n  React.useLayoutEffect(() => {\n    const tab = tabs.current[currentIndex];\n    if (tab) setPill({ left: tab.offsetLeft, width: tab.offsetWidth, animate: measured.current });\n    measured.current = true;\n  }, [currentIndex, days]);\n  React.useLayoutEffect(() => {\n    const measure = () => {\n      const tab = dayStrip.current?.querySelector<HTMLButtonElement>('[aria-selected=\"true\"]');\n      if (tab) setPill({ left: tab.offsetLeft, width: tab.offsetWidth, animate: false });\n    };\n    const observer = typeof ResizeObserver === \"undefined\" ? undefined : new ResizeObserver(measure);\n    if (dayStrip.current) observer?.observe(dayStrip.current);\n    return () => observer?.disconnect();\n  }, [days.length]);\n  const [pressedDay, setPressedDay] = React.useState<number | null>(null);\n  const pressStart = React.useRef(0);\n  const pressTimer = React.useRef<ReturnType<typeof setTimeout> | undefined>(undefined);\n  React.useEffect(() => () => clearTimeout(pressTimer.current), []);\n  function startPress(event: React.PointerEvent<HTMLButtonElement>, index: number) {\n    if (event.pointerType === \"mouse\") return;\n    clearTimeout(pressTimer.current);\n    pressStart.current = performance.now();\n    setPressedDay(index);\n    event.currentTarget.setPointerCapture?.(event.pointerId);\n  }\n  function endPress() {\n    pressTimer.current = setTimeout(() => setPressedDay(null), Math.max(0, 150 - (performance.now() - pressStart.current)));\n  }\n  function select(index: number, focus = false) {\n    const day = days[index];\n    if (!day) return;\n    if (focus) tabs.current[index]?.focus();\n    if (current?.id === day.id) return;\n    setSelected(day.id);\n    onDayChange?.(day);\n  }\n  function handleKey(event: React.KeyboardEvent<HTMLButtonElement>, index: number) {\n    const next = event.key === \"ArrowRight\" ? (index + 1) % days.length : event.key === \"ArrowLeft\" ? (index - 1 + days.length) % days.length : event.key === \"Home\" ? 0 : event.key === \"End\" ? days.length - 1 : null;\n    if (next !== null) { event.preventDefault(); select(next, true); }\n  }\n  return <section className={`mova-calendar ${className}`} data-theme={theme} style={style} aria-label=\"Calendar\">\n    <style>{css}</style>\n    <header className=\"mcd-head\"><h2><SoftText text={current?.weekday ?? \"Your calendar\"} /></h2><p className=\"mcd-meta\" aria-live=\"polite\" aria-atomic=\"true\">{current ? <><SoftText text={current.dateLabel} /><span> · </span><SoftText text={String(current.events.length)} className=\"mcd-number\" /><span>{current.events.length === 1 ? \" meeting\" : \" meetings\"}</span></> : \"No days available\"}</p></header>\n    {!!days.length && <div ref={dayStrip} className=\"mcd-days\" role=\"tablist\" aria-label={`Week of ${days[0].dateLabel}`} style={{ \"--mcd-count\": days.length, \"--mcd-index\": currentIndex } as React.CSSProperties}>\n      <span className=\"mcd-pill\" aria-hidden=\"true\" style={{ width: pill.width, transform: `translateX(${pill.left}px)`, transition: pill.animate ? undefined : \"none\" }} />\n      {days.map((day, index) => <button type=\"button\" role=\"tab\" key={day.id} ref={element => { tabs.current[index] = element; }} id={`${id}-tab-${index}`} aria-selected={current?.id === day.id} aria-controls={`${id}-panel-${index}`} aria-label={`${day.weekday}, ${day.dateLabel}`} tabIndex={current?.id === day.id ? 0 : -1} data-pressed={pressedDay === index} onPointerDown={event => startPress(event, index)} onPointerUp={endPress} onPointerCancel={endPress} onKeyDown={event => handleKey(event, index)} onClick={() => select(index)}><span>{day.weekday.slice(0, 3)}</span><strong>{day.day}</strong></button>)}\n    </div>}\n    <div className=\"mcd-agenda\">\n      {days.map((day, index) => <section className=\"mcd-page\" key={day.id} role=\"tabpanel\" aria-label={`${day.weekday} meetings`} id={`${id}-panel-${index}`} aria-labelledby={`${id}-tab-${index}`} aria-hidden={index !== currentIndex} inert={index !== currentIndex || undefined} data-active={index === currentIndex} style={{ \"--mcd-side\": index < currentIndex ? \"-8px\" : \"8px\" } as React.CSSProperties}>\n        {day.events.length ? <ul>{day.events.map(event => <li className=\"mcd-event\" key={event.id} style={{ \"--mcd-event\": event.color ?? \"#1C5FFB\" } as React.CSSProperties}>\n          {onEventClick ? <button type=\"button\" className=\"mcd-event-main\" onClick={() => onEventClick(event)}><span className=\"mcd-event-line\" aria-hidden=\"true\" /><span className=\"mcd-event-text\"><strong>{event.title}</strong><small><span>{event.time}</span>{event.location ? ` · ${event.location}` : \"\"}</small></span></button> : <div className=\"mcd-event-main\"><span className=\"mcd-event-line\" aria-hidden=\"true\" /><span className=\"mcd-event-text\"><strong>{event.title}</strong><small><span>{event.time}</span>{event.location ? ` · ${event.location}` : \"\"}</small></span></div>}\n          {!!event.attendees?.length && <Attendees people={event.attendees} />}\n        </li>)}</ul> : <p className=\"mcd-empty\">Nothing scheduled. Enjoy your day.</p>}\n      </section>)}\n      {!current && <p className=\"mcd-empty\">Nothing scheduled. Enjoy your day.</p>}\n    </div>\n  </section>;\n}\nconst css = `\n@property --mcd-cut-dy{syntax:'<length>';inherits:false;initial-value:0px}\n.mova-calendar{--mcd-bg:#fff;--mcd-fg:#0d0d0d;--mcd-muted:#6c6c6c;--mcd-track:#0000000a;--mcd-hover:#0000000a;--mcd-pill:#fff;--mcd-tint:7%;--mcd-pill-shadow:0 0 0 1px #0000000f,0 2px 6px #0000000d,0 1px 2px #0000000a;--mcd-ease:cubic-bezier(.22,1,.36,1);width:300px;max-width:100%;box-sizing:border-box;padding:24px;border-radius:24px;color:var(--mcd-fg);background:var(--mcd-bg);font:400 13px/20px \"Inter Variable\",Inter,-apple-system,BlinkMacSystemFont,\"Segoe UI\",sans-serif;letter-spacing:0;font-optical-sizing:auto;font-feature-settings:'liga' 1,'calt' 1;-webkit-font-smoothing:antialiased;box-shadow:0 0 0 1px #0000000a,0 8px 32px -4px #0000000f,0 1px 3px #0000000a;display:flex;flex-direction:column;gap:16px}.mova-calendar[data-theme=dark]{--mcd-bg:#1d1d1d;--mcd-fg:#f2f2f2;--mcd-muted:rgba(202,202,202,.7);--mcd-track:#ffffff0a;--mcd-hover:rgba(255,255,255,.065);--mcd-pill:#ffffff1a;--mcd-tint:14%;--mcd-pill-shadow:0 1px 3px #0000003d,inset 0 0 0 1px #ffffff0f,inset 0 1px 0 #ffffff0f;color-scheme:dark}.mova-calendar *{box-sizing:border-box}.mova-calendar h2,.mova-calendar p,.mova-calendar ul{margin:0;padding:0}.mova-calendar button{font:inherit;letter-spacing:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none}.mova-calendar button:focus-visible,.mcd-avatar:focus-visible{outline:2px solid var(--mcd-fg);outline-offset:2px}.mcd-head{display:flex;flex-direction:column;gap:4px}.mova-calendar h2{font-size:28px;line-height:34px;font-weight:500}.mcd-meta{display:flex;white-space:pre;font-size:12px;line-height:16px;color:var(--mcd-muted)}.mcd-number,.mcd-event small span{font-variant-numeric:tabular-nums}.mcd-soft{display:inline-grid;justify-items:start;transition:width 240ms var(--mcd-ease)}.mcd-soft>span{grid-area:1/1;white-space:pre;transition:filter 200ms ease-in-out,opacity 200ms ease-in-out}.mcd-soft[data-changing=true] .mcd-soft-new{opacity:0;filter:blur(2px)}.mcd-soft[data-swapping=true] .mcd-soft-old{opacity:0;filter:blur(2px)}.mcd-soft[data-swapping=true] .mcd-soft-new{opacity:1;filter:blur(0)}.mcd-days{position:relative;display:flex;align-items:center;gap:2px;padding:4px;border-radius:16px;background:var(--mcd-track)}.mcd-days button{position:relative;flex:1;min-width:0;height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border-radius:12px;z-index:1;transition:color 250ms var(--mcd-ease),background-color 250ms var(--mcd-ease),transform 150ms var(--mcd-ease)}.mcd-days button>span{font-size:12px;line-height:16px;color:var(--mcd-muted)}.mcd-days strong{font-size:15px;line-height:20px;font-weight:400;font-variant-numeric:tabular-nums}.mcd-days button:is(:active,[data-pressed=true]){transform:scale(.95)}.mcd-days button:focus-visible{outline:none;box-shadow:0 0 0 2px var(--mcd-bg),0 0 0 4px var(--mcd-fg)}.mcd-pill{position:absolute;top:4px;left:0;height:52px;background:var(--mcd-pill);box-shadow:var(--mcd-pill-shadow);border-radius:12px;transition:transform 250ms var(--mcd-ease),width 250ms var(--mcd-ease);pointer-events:none}.mcd-agenda{display:grid;position:relative}.mcd-page{grid-area:1/1;min-width:0;opacity:0;pointer-events:none;transform:translateX(var(--mcd-side));filter:blur(3px);transition:opacity 250ms var(--mcd-ease),transform 250ms var(--mcd-ease),filter 250ms var(--mcd-ease)}.mcd-page[data-active=true]{opacity:1;pointer-events:auto;transform:translateX(0);filter:blur(0)}.mcd-page ul{list-style:none;display:flex;flex-direction:column;gap:8px}.mcd-event{display:flex;align-items:center;gap:12px;padding:8px 12px 8px 8px;border-radius:12px;background:color-mix(in srgb,var(--mcd-event) var(--mcd-tint),transparent)}.mcd-event-main{flex:1;min-width:0;display:flex;align-self:stretch;align-items:center;gap:12px;text-align:left;border-radius:4px}.mcd-event-line{flex:none;align-self:stretch;width:3px;border-radius:2px;background:var(--mcd-event)}.mcd-event-text{min-width:0;flex:1}.mcd-event strong{display:block;font-size:13px;line-height:20px;font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mcd-event small{display:block;font-size:12px;line-height:16px;color:var(--mcd-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.mcd-attendees{display:flex;align-items:center;flex:none;align-self:center}.mcd-avatar{display:flex;flex:none;width:24px;height:24px;border-radius:50%;transform-origin:center;transform:translateY(var(--mcd-shift,0px)) scale(var(--mcd-scale,1));transition:transform 320ms var(--mcd-ease),--mcd-cut-dy 320ms var(--mcd-ease)}.mcd-avatar[data-returning=true]{transition-timing-function:cubic-bezier(.34,3.85,.64,1)}.mcd-avatar+.mcd-avatar{margin-left:-6px}.mcd-avatar:not(:last-child){-webkit-mask:radial-gradient(58.333% 58.333% at 125% calc(50% + var(--mcd-cut-dy)),transparent calc(100% - .5px),#000 calc(100% + .5px));mask:radial-gradient(58.333% 58.333% at 125% calc(50% + var(--mcd-cut-dy)),transparent calc(100% - .5px),#000 calc(100% + .5px))}.mcd-avatar img{display:block;width:24px;height:24px;border-radius:50%;object-fit:cover;outline:1px solid #00000014;outline-offset:-1px}.mova-calendar[data-theme=dark] .mcd-avatar img{outline-color:#ffffff14}.mcd-initials{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:10px;line-height:1;background:var(--mcd-avatar-color);color:#25212b}.mcd-empty{font-size:12px;color:var(--mcd-muted);padding:8px 0!important;min-height:52px}@media(hover:hover) and (pointer:fine){.mcd-days button:not([aria-selected=true]):hover{background:var(--mcd-hover)}}@media(prefers-reduced-motion:reduce){.mova-calendar *{animation:none!important;transition:none!important}.mcd-days button:is(:active,[data-pressed=true]),.mcd-avatar{transform:none!important}.mcd-page{transform:none;filter:none}}\n`;\n"
 }

package/registry/card-arc-5.json

@@ -1,7 +1,7 @@
 {
   "id": "card-arc-5",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-arc-5.tsx",
   "registryFile": "card-arc-5.json",
   "exports": [

package/registry/card-arc-7.json

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

package/registry/card-carousel-mono.json

@@ -1,7 +1,7 @@
 {
   "id": "card-carousel-mono",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-carousel-mono.tsx",
   "registryFile": "card-carousel-mono.json",
   "exports": [

package/registry/card-carousel.json

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

package/registry/card-cascade-stagger.json

@@ -1,7 +1,7 @@
 {
   "id": "card-cascade-stagger",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-cascade-stagger.tsx",
   "registryFile": "card-cascade-stagger.json",
   "exports": [

package/registry/card-corner-fan.json

@@ -1,7 +1,7 @@
 {
   "id": "card-corner-fan",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-corner-fan.tsx",
   "registryFile": "card-corner-fan.json",
   "exports": [

package/registry/card-cover-flow-mono.json

@@ -1,7 +1,7 @@
 {
   "id": "card-cover-flow-mono",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-cover-flow-mono.tsx",
   "registryFile": "card-cover-flow-mono.json",
   "exports": [

package/registry/card-cover-flow.json

@@ -1,7 +1,7 @@
 {
   "id": "card-cover-flow",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-cover-flow.tsx",
   "registryFile": "card-cover-flow.json",
   "exports": [

package/registry/card-deck-cascade.json

@@ -1,7 +1,7 @@
 {
   "id": "card-deck-cascade",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-deck-cascade.tsx",
   "sourcePath": "components/css-animations/whimsical/ConceptTrios3.tsx",
   "registryFile": "card-deck-cascade.json",

package/registry/card-glance-preview.json

@@ -1,7 +1,7 @@
 {
   "id": "card-glance-preview",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-glance-preview.tsx",
   "sourcePath": "components/css-animations/yui-components/RedesignedUiTrios.tsx",
   "registryFile": "card-glance-preview.json",

package/registry/card-hover.json

@@ -1,7 +1,7 @@
 {
   "id": "card-hover",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-hover.tsx",
   "sourcePath": "ui/hover/card-hover.tsx",
   "registryFile": "card-hover.json",

package/registry/card-linear-spread.json

@@ -1,7 +1,7 @@
 {
   "id": "card-linear-spread",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-linear-spread.tsx",
   "registryFile": "card-linear-spread.json",
   "exports": [

package/registry/card-long-arc-5.json

@@ -1,7 +1,7 @@
 {
   "id": "card-long-arc-5",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-long-arc-5.tsx",
   "registryFile": "card-long-arc-5.json",
   "exports": [

package/registry/card-scatter-spread.json

@@ -1,7 +1,7 @@
 {
   "id": "card-scatter-spread",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-scatter-spread.tsx",
   "registryFile": "card-scatter-spread.json",
   "exports": [

package/registry/card-stack-peel.json

@@ -1,7 +1,7 @@
 {
   "id": "card-stack-peel",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-stack-peel.tsx",
   "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
   "registryFile": "card-stack-peel.json",

package/registry/card-stamp-arc.json

@@ -1,7 +1,7 @@
 {
   "id": "card-stamp-arc",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-stamp-arc.tsx",
   "registryFile": "card-stamp-arc.json",
   "exports": [

package/registry/card-time-machine-mono.json

@@ -1,7 +1,7 @@
 {
   "id": "card-time-machine-mono",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-time-machine-mono.tsx",
   "registryFile": "card-time-machine-mono.json",
   "exports": [

package/registry/card-time-machine.json

@@ -1,7 +1,7 @@
 {
   "id": "card-time-machine",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-time-machine.tsx",
   "registryFile": "card-time-machine.json",
   "exports": [

package/registry/card-wheel-fan.json

@@ -1,7 +1,7 @@
 {
   "id": "card-wheel-fan",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "card-wheel-fan.tsx",
   "registryFile": "card-wheel-fan.json",
   "exports": [

package/registry/category-select.json

@@ -1,7 +1,7 @@
 {
   "id": "category-select",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "category-select.tsx",
   "sourcePath": "components/css-animations/yui-components/YuiUiKit1.tsx",
   "registryFile": "category-select.json",

package/registry/character-stagger.json

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

package/registry/checkbox-draw.json

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

package/registry/checkmark-draw.json

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

package/registry/circle-toggle.json

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

package/registry/circuit-trace-draw.json

@@ -1,7 +1,7 @@
 {
   "id": "circuit-trace-draw",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "circuit-trace-draw.tsx",
   "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
   "registryFile": "circuit-trace-draw.json",

package/registry/circular-bars.json

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

package/registry/circular-create-button.json

@@ -1,7 +1,7 @@
 {
   "id": "circular-create-button",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "circular-create-button.tsx",
   "registryFile": "circular-create-button.json",
   "exports": [

package/registry/classic-spinner.json

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

package/registry/classic-toggle.json

@@ -1,7 +1,7 @@
 {
   "id": "classic-toggle",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "classic-toggle.tsx",
   "sourcePath": "ui/toggles/classic-toggle.tsx",
   "registryFile": "classic-toggle.json",

package/registry/clock-spinner.json

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

package/registry/comet-spinner.json

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

package/registry/compass-needle-deflect.json

@@ -1,7 +1,7 @@
 {
   "id": "compass-needle-deflect",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "compass-needle-deflect.tsx",
   "sourcePath": "components/css-animations/whimsical/RedesignedPhysicsTrios.tsx",
   "registryFile": "compass-needle-deflect.json",

package/registry/concentric-pulse.json

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

package/registry/concentric-ring.json

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

package/registry/concentric-squares.json

@@ -1,7 +1,7 @@
 {
   "id": "concentric-squares",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "concentric-squares.tsx",
   "sourcePath": "ui/loading/concentric-squares.tsx",
   "registryFile": "concentric-squares.json",

package/registry/context-menu.json

@@ -1,7 +1,7 @@
 {
   "id": "context-menu",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "context-menu.tsx",
   "sourcePath": "components/css-animations/yui-components/YuiUiKit2.tsx",
   "registryFile": "context-menu.json",

package/registry/conveyor-loop.json

@@ -1,7 +1,7 @@
 {
   "id": "conveyor-loop",
   "tier": "free",
-  "version": "0.4.7",
+  "version": "0.4.8",
   "file": "conveyor-loop.tsx",
   "sourcePath": "ui/loading/conveyor-loop.tsx",
   "registryFile": "conveyor-loop.json",