motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-K6ET254T.js

@@ -0,0 +1,398 @@
+"use client";
+import {
+  ArrowUpRightIcon
+} from "./chunk-I7KTTOOJ.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/mix-chart/mix-chart.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  animate,
+  motion,
+  useInView,
+  useMotionValue,
+  useMotionValueEvent,
+  useReducedMotion
+} from "motion/react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_SERIES = [
+  { key: "solar", label: "Solar", color: "#ffad1f" },
+  { key: "battery", label: "Battery", color: "#16c79a" },
+  { key: "grid", label: "Grid", color: "#7b61ff" }
+];
+var WEEK = [
+  { label: "Mon", detail: "Monday", values: [14.2, 5.1, 6.8] },
+  { label: "Tue", detail: "Tuesday", values: [11.5, 4.2, 9.3] },
+  { label: "Wed", detail: "Wednesday", values: [16.8, 6, 4.1] },
+  { label: "Thu", detail: "Thursday", values: [9.4, 3.6, 11.2] },
+  { label: "Fri", detail: "Friday", values: [17.9, 6.4, 3.2] },
+  { label: "Sat", detail: "Saturday", values: [19.6, 7.1, 2.4] },
+  { label: "Sun", detail: "Sunday", values: [18.3, 6.8, 3.9] }
+];
+var YEAR = [
+  ["Jan", "January", 180, 60, 310],
+  ["Feb", "February", 220, 75, 260],
+  ["Mar", "March", 320, 110, 190],
+  ["Apr", "April", 410, 140, 130],
+  ["May", "May", 480, 165, 90],
+  ["Jun", "June", 530, 180, 70],
+  ["Jul", "July", 550, 185, 65],
+  ["Aug", "August", 500, 170, 80],
+  ["Sep", "September", 400, 140, 120],
+  ["Oct", "October", 300, 105, 180],
+  ["Nov", "November", 210, 80, 250],
+  ["Dec", "December", 160, 55, 320]
+].map(([label, detail, a, b, c]) => ({
+  label,
+  detail,
+  values: [a, b, c]
+}));
+var MONTH = [
+  { label: "W1", detail: "Week 1, Oct 20 to 26", values: [96.4, 34.8, 58.2] },
+  { label: "W2", detail: "Week 2, Oct 27 to Nov 2", values: [88.1, 31.5, 66.7] },
+  { label: "W3", detail: "Week 3, Nov 3 to 9", values: [102.6, 37.2, 49.9] },
+  { label: "W4", detail: "Week 4, Nov 10 to 16", values: [107.7, 39.2, 40.9] }
+];
+var DEFAULT_RANGES = [
+  { id: "week", label: "Week", points: WEEK, change: 12.4, caption: "used this week" },
+  { id: "month", label: "Month", points: MONTH, change: 6.8, caption: "used in the last four weeks" },
+  { id: "year", label: "Year", points: YEAR, change: 18.2, caption: "used this year" }
+];
+var EASE = [0.22, 1, 0.36, 1];
+var GROW = { type: "spring", stiffness: 210, damping: 24 };
+var PILL = { type: "spring", stiffness: 500, damping: 38 };
+var SEG_GAP = 3;
+var CHART_H = 168;
+function niceScale(max) {
+  if (max <= 0) return { top: 4, step: 1 };
+  const raw = max / 4;
+  const pow = 10 ** Math.floor(Math.log10(raw));
+  const step = [1, 2, 2.5, 5, 10].map((m) => m * pow).find((s) => s >= raw);
+  return { top: step * 4, step };
+}
+var fmt = (n, d) => n.toLocaleString("en-US", { minimumFractionDigits: d, maximumFractionDigits: d });
+var short = (n) => n >= 1e3 ? `${fmt(n / 1e3, n % 1e3 ? 1 : 0)}k` : fmt(n, n % 1 ? 1 : 0);
+function Total({ value, decimals, run, still }) {
+  const mv = useMotionValue(still ? value : 0);
+  const [text, setText] = React.useState(() => fmt(still ? value : 0, decimals));
+  useMotionValueEvent(mv, "change", (v) => setText(fmt(v, decimals)));
+  const first = React.useRef(true);
+  React.useEffect(() => {
+    if (!run) return;
+    if (still) return mv.set(value);
+    const c = animate(mv, value, { duration: first.current ? 1.2 : 0.6, delay: first.current ? 0.2 : 0, ease: EASE });
+    first.current = false;
+    return () => c.stop();
+  }, [value, run, still, mv]);
+  return /* @__PURE__ */ jsx("span", { className: "tabular-nums", children: text });
+}
+var MixChart = React.forwardRef(function MixChart2({
+  title = "Home energy",
+  series = DEFAULT_SERIES,
+  ranges = DEFAULT_RANGES,
+  unit = "kWh",
+  decimals = 1,
+  className
+}, forwardedRef) {
+  const ref = React.useRef(null);
+  React.useImperativeHandle(forwardedRef, () => ref.current);
+  const inView = useInView(ref, { once: true, amount: 0.35 });
+  const still = !!useReducedMotion();
+  const shown = still || inView;
+  const uid = React.useId();
+  const [rangeId, setRangeId] = React.useState(ranges[0]?.id);
+  const range = ranges.find((r) => r.id === rangeId) ?? ranges[0];
+  const points = range.points;
+  const dp = points.every((pt) => pt.values.every(Number.isInteger)) ? 0 : decimals;
+  const [off, setOff] = React.useState(() => /* @__PURE__ */ new Set());
+  const visible = series.map((s) => !off.has(s.key));
+  const [picked, setPicked] = React.useState(null);
+  const resting = points.length - 1;
+  const active = picked?.bar ?? resting;
+  React.useEffect(() => setPicked(null), [rangeId]);
+  const stackOf = (p2) => p2.values.reduce((a, v, i) => a + (visible[i] ? v : 0), 0);
+  const total = points.reduce((a, p2) => a + stackOf(p2), 0);
+  const { top, step } = niceScale(Math.max(...points.map(stackOf)));
+  const toggle = (key) => setOff((prev) => {
+    const next = new Set(prev);
+    if (next.has(key)) next.delete(key);
+    else if (next.size < series.length - 1) next.add(key);
+    return next;
+  });
+  const onSeries = series.map((_, i) => i).filter((i) => visible[i]);
+  const topSeg = onSeries[onSeries.length - 1] ?? 0;
+  const segOf = (seg) => visible[seg] ? seg : topSeg;
+  const bars = React.useRef([]);
+  const onKey = (e, i) => {
+    const seg = segOf(picked?.seg ?? topSeg);
+    const at = onSeries.indexOf(seg);
+    if (e.key === "ArrowUp" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = onSeries[Math.max(0, Math.min(onSeries.length - 1, at + (e.key === "ArrowUp" ? 1 : -1)))];
+      setPicked({ bar: i, seg: next });
+      return;
+    }
+    const to = { ArrowRight: i + 1, ArrowLeft: i - 1, Home: 0, End: points.length - 1 }[e.key];
+    if (to === void 0) return;
+    e.preventDefault();
+    const n = Math.max(0, Math.min(points.length - 1, to));
+    setPicked({ bar: n, seg });
+    bars.current[n]?.focus();
+  };
+  const tipSeg = picked ? segOf(picked.seg) : topSeg;
+  const p = points[active];
+  const below = onSeries.filter((i) => i <= tipSeg);
+  const tipValue = below.reduce((a, i) => a + (p.values[i] ?? 0), 0);
+  const tipLeft = Math.min(84, Math.max(16, (active + 0.5) / points.length * 100));
+  const tipTop = CHART_H - tipValue / top * CHART_H - (below.length - 1) * SEG_GAP;
+  const tipSeries = series[tipSeg];
+  return /* @__PURE__ */ jsxs(
+    motion.div,
+    {
+      ref,
+      initial: still ? false : { opacity: 0, y: 16 },
+      animate: shown ? { opacity: 1, y: 0 } : void 0,
+      transition: { duration: 0.6, ease: EASE },
+      className: cn(
+        "relative w-[440px] max-w-full rounded-3xl bg-white p-5 text-[#242423] shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] sm:p-6 dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+          /* @__PURE__ */ jsx("h3", { className: "text-base font-semibold tracking-tight", children: title }),
+          /* @__PURE__ */ jsx("div", { role: "radiogroup", "aria-label": "Range", className: "flex rounded-full bg-[#242423]/[0.06] p-0.5 dark:bg-white/[0.08]", children: ranges.map((r) => /* @__PURE__ */ jsxs(
+            "button",
+            {
+              type: "button",
+              role: "radio",
+              "aria-checked": r.id === range.id,
+              onClick: () => setRangeId(r.id),
+              className: "relative h-7 rounded-full px-3 text-xs font-medium text-zinc-500 outline-none transition-colors focus-visible:ring-2 focus-visible:ring-zinc-400 aria-checked:text-[#242423] dark:text-zinc-400 dark:aria-checked:text-zinc-100",
+              children: [
+                r.id === range.id && /* @__PURE__ */ jsx(
+                  motion.span,
+                  {
+                    layoutId: `${uid}-range`,
+                    transition: still ? { duration: 0 } : PILL,
+                    className: "absolute inset-0 rounded-full bg-white shadow-[0_1px_3px_rgba(0,0,0,0.12)] dark:bg-zinc-700"
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: "relative", children: r.label })
+              ]
+            },
+            r.id
+          )) })
+        ] }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-x-2.5 gap-y-1", children: [
+          /* @__PURE__ */ jsxs("p", { className: "text-[32px] font-semibold leading-none tracking-[-0.03em]", children: [
+            /* @__PURE__ */ jsx(Total, { value: total, decimals: dp, run: shown, still }),
+            /* @__PURE__ */ jsx("span", { className: "ml-1.5 text-base font-medium tracking-normal text-zinc-400 dark:text-zinc-500", children: unit })
+          ] }),
+          range.change !== void 0 && /* @__PURE__ */ jsxs(
+            motion.span,
+            {
+              initial: still ? false : { opacity: 0, scale: 0.8 },
+              animate: shown ? { opacity: 1, scale: 1 } : void 0,
+              transition: { type: "spring", stiffness: 500, damping: 26, delay: still ? 0 : 0.4 },
+              className: cn(
+                "inline-flex h-6 items-center gap-0.5 rounded-full px-2 text-xs font-semibold tabular-nums",
+                range.change >= 0 ? "bg-[#16c79a]/15 text-[#0e9c78]" : "bg-[#ff5d73]/15 text-[#e0405a]"
+              ),
+              children: [
+                range.change >= 0 ? "+" : "",
+                range.change,
+                "%",
+                /* @__PURE__ */ jsx(ArrowUpRightIcon, { className: cn("size-3.5", range.change < 0 && "rotate-90"), active: shown, strokeWidth: 2.5 })
+              ]
+            },
+            range.id
+          )
+        ] }),
+        range.caption && /* @__PURE__ */ jsx("p", { className: "mt-1 text-sm text-zinc-500 dark:text-zinc-400", children: range.caption }),
+        /* @__PURE__ */ jsx("div", { className: "mt-4 flex flex-wrap gap-1.5", children: series.map((s, i) => /* @__PURE__ */ jsxs(
+          "button",
+          {
+            type: "button",
+            "aria-pressed": visible[i],
+            onClick: () => toggle(s.key),
+            className: "group/chip inline-flex h-7 items-center gap-1.5 rounded-full bg-[#242423]/[0.05] pl-2 pr-2.5 text-xs font-medium outline-none transition-colors hover:bg-[#242423]/[0.09] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.06] dark:hover:bg-white/[0.1]",
+            children: [
+              /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  className: "size-2.5 rounded-full",
+                  animate: {
+                    backgroundColor: visible[i] ? s.color : "rgba(0,0,0,0)",
+                    boxShadow: `inset 0 0 0 1.5px ${s.color}`,
+                    scale: visible[i] ? 1 : 0.8
+                  },
+                  transition: { type: "spring", stiffness: 500, damping: 28 }
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: cn("transition-colors", visible[i] ? "text-[#242423] dark:text-zinc-100" : "text-zinc-400 dark:text-zinc-500"), children: s.label })
+            ]
+          },
+          s.key
+        )) }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-4 flex gap-2", children: [
+          /* @__PURE__ */ jsx("div", { className: "relative w-8 shrink-0 text-right text-[12px] tabular-nums text-zinc-400 dark:text-zinc-500", style: { height: CHART_H }, children: [0, 1, 2, 3, 4].map((k) => /* @__PURE__ */ jsx(
+            motion.span,
+            {
+              initial: still ? false : { opacity: 0 },
+              animate: shown ? { opacity: 1 } : void 0,
+              transition: { duration: 0.4, delay: still ? 0 : 0.1 + k * 0.05 },
+              className: "absolute right-0 -translate-y-1/2 leading-none",
+              style: { top: CHART_H - k * step * CHART_H / top },
+              children: short(k * step)
+            },
+            `${top}-${k}`
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "@container relative min-w-0 flex-1", children: [
+            /* @__PURE__ */ jsx("div", { "aria-hidden": true, className: "pointer-events-none absolute inset-x-0 top-0", style: { height: CHART_H }, children: [0, 1, 2, 3, 4].map((k) => /* @__PURE__ */ jsx(
+              motion.span,
+              {
+                initial: still ? false : { scaleX: 0 },
+                animate: shown ? { scaleX: 1 } : void 0,
+                transition: { duration: 0.8, delay: still ? 0 : k * 0.06, ease: EASE },
+                className: cn(
+                  "absolute inset-x-0 origin-left border-t",
+                  k === 0 ? "border-[#242423]/15 dark:border-white/15" : "border-dashed border-[#242423]/10 dark:border-white/10"
+                ),
+                style: { top: CHART_H - k * CHART_H / 4 }
+              },
+              k
+            )) }),
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                role: "toolbar",
+                "aria-label": `${title}, ${range.label.toLowerCase()}`,
+                onPointerLeave: () => setPicked(null),
+                className: "relative flex items-end",
+                style: { height: CHART_H, gap: points.length > 9 ? 4 : 8 },
+                children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: points.map((pt, i) => {
+                  const on = i === active;
+                  const stack = stackOf(pt);
+                  return /* @__PURE__ */ jsx(
+                    motion.button,
+                    {
+                      ref: (el) => {
+                        bars.current[i] = el;
+                      },
+                      type: "button",
+                      tabIndex: on ? 0 : -1,
+                      "aria-pressed": on,
+                      "aria-label": `${pt.detail ?? pt.label}: ${fmt(stack, dp)} ${unit}. Up and down read each source.`,
+                      onPointerEnter: () => setPicked((x) => ({ bar: i, seg: x?.seg ?? topSeg })),
+                      onFocus: () => setPicked((x) => ({ bar: i, seg: x?.seg ?? topSeg })),
+                      onClick: () => setPicked((x) => ({ bar: i, seg: x?.seg ?? topSeg })),
+                      onKeyDown: (e) => onKey(e, i),
+                      exit: { opacity: 0, transition: { duration: 0.15 } },
+                      className: "flex h-full min-w-0 flex-1 cursor-pointer flex-col-reverse items-stretch rounded-lg outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:focus-visible:ring-offset-zinc-900",
+                      style: { gap: SEG_GAP },
+                      children: series.map((s, si) => {
+                        const v = visible[si] ? pt.values[si] ?? 0 : 0;
+                        const h = shown ? v / top * CHART_H : 0;
+                        return /* @__PURE__ */ jsxs(
+                          motion.span,
+                          {
+                            initial: still ? false : { height: 0 },
+                            animate: { height: h, marginTop: v ? 0 : -SEG_GAP },
+                            transition: still ? { duration: 0 } : { ...GROW, delay: shown && !picked ? 0.15 + i * 0.05 + si * 0.08 : 0 },
+                            onPointerEnter: () => v && setPicked({ bar: i, seg: si }),
+                            className: "relative block w-full shrink-0 overflow-hidden rounded-[6px]",
+                            children: [
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: "absolute inset-0",
+                                  style: {
+                                    backgroundColor: `color-mix(in srgb, ${s.color} 16%, transparent)`,
+                                    backgroundImage: `repeating-linear-gradient(135deg, color-mix(in srgb, ${s.color} 38%, transparent) 0 1.5px, transparent 1.5px 6px)`
+                                  }
+                                }
+                              ),
+                              /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  className: "absolute inset-0",
+                                  style: { backgroundColor: s.color },
+                                  animate: { opacity: on && (picked === null || si === tipSeg) ? 1 : 0 },
+                                  transition: { duration: still ? 0 : 0.25, ease: EASE }
+                                }
+                              )
+                            ]
+                          },
+                          s.key
+                        );
+                      })
+                    },
+                    `${range.id}-${pt.label}`
+                  );
+                }) })
+              }
+            ),
+            /* @__PURE__ */ jsx(AnimatePresence, { children: shown && picked !== null && /* @__PURE__ */ jsxs(
+              motion.div,
+              {
+                "aria-live": "polite",
+                initial: still ? false : { opacity: 0, y: 6, left: `${tipLeft}%`, top: Math.max(0, tipTop - 8) },
+                exit: { opacity: 0, y: 4, transition: { duration: 0.12 } },
+                animate: {
+                  opacity: 1,
+                  y: 0,
+                  left: `${tipLeft}%`,
+                  top: Math.max(0, tipTop - 8)
+                },
+                transition: still ? { duration: 0 } : { type: "spring", stiffness: 420, damping: 34, opacity: { duration: 0.15 } },
+                className: "pointer-events-none absolute z-10 w-max -translate-x-1/2 -translate-y-full rounded-xl bg-white px-3 py-2 text-xs shadow-[0_2px_6px_rgba(0,0,0,0.06),0_16px_32px_-12px_rgba(0,0,0,0.22)] dark:bg-zinc-800",
+                children: [
+                  /* @__PURE__ */ jsx("p", { className: "text-zinc-400 dark:text-zinc-500", children: p.detail ?? p.label }),
+                  /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxs(
+                    motion.p,
+                    {
+                      initial: still ? false : { opacity: 0, y: 4, filter: "blur(2px)" },
+                      animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+                      exit: { opacity: 0, y: -4, filter: "blur(2px)" },
+                      transition: { duration: 0.16, ease: EASE },
+                      className: "mt-1 flex items-center gap-1.5 whitespace-nowrap",
+                      children: [
+                        /* @__PURE__ */ jsx("span", { className: "size-2 rounded-full", style: { backgroundColor: tipSeries.color } }),
+                        /* @__PURE__ */ jsx("span", { className: "text-zinc-500 dark:text-zinc-400", children: tipSeries.label }),
+                        /* @__PURE__ */ jsxs("span", { className: "font-semibold tabular-nums text-[#242423] dark:text-zinc-100", children: [
+                          fmt(p.values[tipSeg] ?? 0, dp),
+                          " ",
+                          unit
+                        ] })
+                      ]
+                    },
+                    tipSeries.key
+                  ) })
+                ]
+              },
+              "tip"
+            ) }),
+            /* @__PURE__ */ jsx("div", { className: "mt-2 flex text-[12px] text-zinc-400 dark:text-zinc-500", style: { gap: points.length > 9 ? 4 : 8 }, children: points.map((pt, i) => /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn("min-w-0 flex-1 truncate text-center transition-colors", i === active && "font-medium text-[#242423] dark:text-zinc-100"),
+                children: points.length > 9 ? pt.label.slice(0, 1) : /* @__PURE__ */ jsxs(Fragment, { children: [
+                  /* @__PURE__ */ jsx("span", { className: "@[18rem]:hidden", children: pt.label.length <= 2 ? pt.label : pt.label.slice(0, 1) }),
+                  /* @__PURE__ */ jsx("span", { className: "hidden @[18rem]:inline", children: pt.label })
+                ] })
+              },
+              `${range.id}-${pt.label}`
+            )) })
+          ] })
+        ] })
+      ]
+    }
+  );
+});
+
+export {
+  MixChart
+};

package/dist/chunk-LBRMNY72.js

@@ -0,0 +1,159 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/clock.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var HAND_TRANSITION = {
+  duration: 0.6,
+  ease: [0.4, 0, 0.2, 1]
+};
+var HAND_VARIANTS = {
+  normal: {
+    rotate: 0,
+    originX: "0%",
+    originY: "100%"
+  },
+  animate: {
+    rotate: 360,
+    originX: "0%",
+    originY: "100%"
+  }
+};
+var MINUTE_HAND_TRANSITION = {
+  duration: 0.5,
+  ease: "easeInOut"
+};
+var MINUTE_HAND_VARIANTS = {
+  normal: {
+    rotate: 0,
+    originX: "0%",
+    originY: "100%"
+  },
+  animate: {
+    rotate: 45,
+    originX: "0%",
+    originY: "100%"
+  }
+};
+var ClockIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: [
+              /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
+              /* @__PURE__ */ jsx(
+                motion.line,
+                {
+                  animate: controls,
+                  initial: "normal",
+                  transition: HAND_TRANSITION,
+                  variants: HAND_VARIANTS,
+                  x1: "12",
+                  x2: "12",
+                  y1: "12",
+                  y2: "6"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.line,
+                {
+                  animate: controls,
+                  initial: "normal",
+                  transition: MINUTE_HAND_TRANSITION,
+                  variants: MINUTE_HAND_VARIANTS,
+                  x1: "12",
+                  x2: "16",
+                  y1: "12",
+                  y2: "12"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ClockIcon.displayName = "ClockIcon";
+
+export {
+  ClockIcon
+};

package/dist/chunk-LNBTWX4J.js

@@ -0,0 +1,114 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/chevron-left.tsx
+import { motion, useAnimation, useReducedMotion } from "motion/react";
+import { forwardRef, useCallback, useEffect, useImperativeHandle, useRef, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var DEFAULT_TRANSITION = {
+  times: [0, 0.4, 1],
+  duration: 0.5
+};
+var ChevronLeftIcon = forwardRef(
+  ({ onMouseEnter, onMouseLeave, className, size, active, style, strokeWidth, ...props }, ref) => {
+    const controls = useAnimation();
+    const isControlledRef = useRef(false);
+    useImperativeHandle(ref, () => {
+      isControlledRef.current = true;
+      return {
+        startAnimation: () => controls.start("animate"),
+        stopAnimation: () => controls.start("normal")
+      };
+    });
+    const handleMouseEnter = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseEnter?.(e);
+        } else {
+          controls.start("animate");
+        }
+      },
+      [controls, onMouseEnter]
+    );
+    const handleMouseLeave = useCallback(
+      (e) => {
+        if (isControlledRef.current) {
+          onMouseLeave?.(e);
+        } else {
+          controls.start("normal");
+        }
+      },
+      [controls, onMouseLeave]
+    );
+    const wrap = useRef(null);
+    const reduced = useReducedMotion();
+    const [hosted, setHosted] = useState(false);
+    useEffect(() => {
+      const fake = {};
+      if (reduced) {
+        setHosted(true);
+        return;
+      }
+      if (active !== void 0) {
+        setHosted(true);
+        (active ? handleMouseEnter : handleMouseLeave)(fake);
+        return;
+      }
+      const host = wrap.current?.parentElement?.closest("button, a, [role=button], [role=menuitem], [role=tab], [role=switch], [role=radio], label");
+      setHosted(!!host);
+      if (!host) return;
+      const on = () => handleMouseEnter(fake);
+      const off = () => handleMouseLeave(fake);
+      host.addEventListener("pointerenter", on);
+      host.addEventListener("pointerleave", off);
+      return () => {
+        host.removeEventListener("pointerenter", on);
+        host.removeEventListener("pointerleave", off);
+      };
+    }, [active, reduced, handleMouseEnter, handleMouseLeave]);
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        ref: wrap,
+        className: cn("inline-grid size-6 shrink-0 place-items-center align-middle [&>svg]:size-full", className),
+        style: size ? { width: size, height: size, ...style } : style,
+        onMouseEnter: hosted ? void 0 : handleMouseEnter,
+        onMouseLeave: hosted ? void 0 : handleMouseLeave,
+        ...props,
+        children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            fill: "none",
+            height: size,
+            stroke: "currentColor",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            strokeWidth: strokeWidth ?? 2,
+            viewBox: "0 0 24 24",
+            width: size,
+            xmlns: "http://www.w3.org/2000/svg",
+            children: /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                animate: controls,
+                d: "m15 18-6-6 6-6",
+                transition: DEFAULT_TRANSITION,
+                variants: {
+                  normal: { x: 0 },
+                  animate: { x: [0, -2, 0] }
+                }
+              }
+            )
+          }
+        )
+      }
+    );
+  }
+);
+ChevronLeftIcon.displayName = "ChevronLeftIcon";
+
+export {
+  ChevronLeftIcon
+};