motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-IUBUAIQZ.js

@@ -0,0 +1,321 @@
+"use client";
+import {
+  ChevronLeftIcon
+} from "./chunk-LNBTWX4J.js";
+import {
+  ChevronRightIcon
+} from "./chunk-XH6YNONO.js";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/month-calendar/month-calendar.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  LayoutGroup,
+  motion,
+  useReducedMotion
+} from "motion/react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var GLIDE = [0.22, 1, 0.36, 1];
+var DISC = { type: "spring", stiffness: 480, damping: 36 };
+var startOfDay = (d) => new Date(d.getFullYear(), d.getMonth(), d.getDate());
+var addDays = (d, n) => new Date(d.getFullYear(), d.getMonth(), d.getDate() + n);
+var addMonths = (d, n) => {
+  const last = new Date(d.getFullYear(), d.getMonth() + n + 1, 0).getDate();
+  return new Date(
+    d.getFullYear(),
+    d.getMonth() + n,
+    Math.min(d.getDate(), last)
+  );
+};
+var sameDay = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+var sameMonth = (a, b) => a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth();
+var keyOf = (d) => `${d.getFullYear()}-${d.getMonth()}-${d.getDate()}`;
+function weeksFor(month, weekStartsOn) {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1);
+  const lead = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = addDays(first, -lead);
+  return Array.from({ length: 42 }, (_, i) => addDays(start, i));
+}
+function defaultEvents() {
+  const t = /* @__PURE__ */ new Date();
+  return [3, 9, 14, 22, 28].map(
+    (d) => new Date(t.getFullYear(), t.getMonth(), d)
+  );
+}
+var MonthCalendar = React.forwardRef(function MonthCalendar2({
+  value,
+  defaultValue,
+  onChange,
+  events,
+  weekStartsOn = 1,
+  locale = "en-US",
+  className
+}, ref) {
+  const still = !!useReducedMotion();
+  const id = React.useId();
+  const [inner, setInner] = React.useState(
+    () => startOfDay(defaultValue ?? /* @__PURE__ */ new Date())
+  );
+  const selected = value ? startOfDay(value) : inner;
+  const [month, setMonth] = React.useState(
+    () => new Date(selected.getFullYear(), selected.getMonth(), 1)
+  );
+  const [dir, setDir] = React.useState(0);
+  const [hovered, setHovered] = React.useState(null);
+  const [focusDay, setFocusDay] = React.useState(selected);
+  const grid = React.useRef(null);
+  const today = React.useMemo(() => startOfDay(/* @__PURE__ */ new Date()), []);
+  const marks = React.useMemo(
+    () => new Set((events ?? defaultEvents()).map((d) => keyOf(d))),
+    [events]
+  );
+  const days = React.useMemo(
+    () => weeksFor(month, weekStartsOn),
+    [month, weekStartsOn]
+  );
+  const weekdays = React.useMemo(
+    () => days.slice(0, 7).map((d) => ({
+      short: d.toLocaleDateString(locale, { weekday: "short" }).slice(0, 2),
+      long: d.toLocaleDateString(locale, { weekday: "long" })
+    })),
+    [days, locale]
+  );
+  const label = month.toLocaleDateString(locale, {
+    month: "long",
+    year: "numeric"
+  });
+  const go = (n) => {
+    setDir(n);
+    setMonth((m) => new Date(m.getFullYear(), m.getMonth() + n, 1));
+    setHovered(null);
+  };
+  const pick = (d) => {
+    if (!sameMonth(d, month)) go(d < month ? -1 : 1);
+    if (!value) setInner(d);
+    setFocusDay(d);
+    onChange?.(d);
+  };
+  React.useEffect(() => {
+    if (!sameMonth(focusDay, month))
+      setFocusDay(
+        sameMonth(selected, month) ? selected : sameMonth(today, month) ? today : month
+      );
+  }, [month]);
+  const moveFocus = (d) => {
+    if (!sameMonth(d, month)) go(d < month ? -1 : 1);
+    setFocusDay(d);
+    requestAnimationFrame(
+      () => grid.current?.querySelector(`[data-day="${keyOf(d)}"]`)?.focus()
+    );
+  };
+  const onKey = (e) => {
+    const d = focusDay;
+    const dow = (d.getDay() - weekStartsOn + 7) % 7;
+    const next = {
+      ArrowLeft: () => addDays(d, -1),
+      ArrowRight: () => addDays(d, 1),
+      ArrowUp: () => addDays(d, -7),
+      ArrowDown: () => addDays(d, 7),
+      PageUp: () => addMonths(d, -1),
+      PageDown: () => addMonths(d, 1),
+      Home: () => addDays(d, -dow),
+      End: () => addDays(d, 6 - dow)
+    };
+    const f = next[e.key];
+    if (!f) return;
+    e.preventDefault();
+    moveFocus(f());
+  };
+  const slide = {
+    enter: (d) => still ? { opacity: 0 } : { opacity: 0, x: d * 28, filter: "blur(4px)" },
+    center: { opacity: 1, x: 0, filter: "blur(0px)" },
+    exit: (d) => still ? { opacity: 0 } : { opacity: 0, x: d * -28, filter: "blur(4px)" }
+  };
+  const arrow = "group grid size-9 cursor-pointer place-items-center rounded-full text-zinc-500 outline-none transition-colors hover:bg-zinc-100 hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-zinc-400 dark:text-zinc-400 dark:hover:bg-white/8 dark:hover:text-zinc-100";
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(
+        "w-[340px] max-w-full rounded-3xl bg-white p-5 text-zinc-900 shadow-[0_1px_2px_rgba(0,0,0,0.04),0_12px_32px_-16px_rgba(0,0,0,0.18)] dark:bg-zinc-900 dark:text-zinc-100",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
+          /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              type: "button",
+              "aria-label": "Previous month",
+              onClick: () => go(-1),
+              whileTap: still ? void 0 : { scale: 0.9 },
+              className: arrow,
+              children: /* @__PURE__ */ jsx(
+                ChevronLeftIcon,
+                {
+                  className: "size-5 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:-translate-x-0.5",
+                  strokeWidth: 2
+                }
+              )
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "h3",
+            {
+              id: `${id}-label`,
+              "aria-live": "polite",
+              className: "relative grid flex-1 place-items-center overflow-hidden text-base font-semibold tracking-tight",
+              children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: dir, children: /* @__PURE__ */ jsx(
+                motion.span,
+                {
+                  custom: dir,
+                  variants: slide,
+                  initial: "enter",
+                  animate: "center",
+                  exit: "exit",
+                  transition: { duration: 0.35, ease: GLIDE },
+                  className: "whitespace-nowrap",
+                  children: label
+                },
+                label
+              ) })
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            motion.button,
+            {
+              type: "button",
+              "aria-label": "Next month",
+              onClick: () => go(1),
+              whileTap: still ? void 0 : { scale: 0.9 },
+              className: arrow,
+              children: /* @__PURE__ */ jsx(
+                ChevronRightIcon,
+                {
+                  className: "size-5 transition-transform duration-300 ease-[cubic-bezier(0.22,1,0.36,1)] group-hover:translate-x-0.5",
+                  strokeWidth: 2
+                }
+              )
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            role: "grid",
+            "aria-labelledby": `${id}-label`,
+            className: "mt-4",
+            onKeyDown: onKey,
+            children: [
+              /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: weekdays.map((w) => /* @__PURE__ */ jsx(
+                "span",
+                {
+                  role: "columnheader",
+                  "aria-label": w.long,
+                  className: "grid h-8 place-items-center text-xs font-medium text-zinc-500 dark:text-zinc-400",
+                  children: w.short
+                },
+                w.long
+              )) }),
+              /* @__PURE__ */ jsx("div", { className: "relative overflow-hidden", children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: dir, children: /* @__PURE__ */ jsx(
+                motion.div,
+                {
+                  ref: grid,
+                  custom: dir,
+                  variants: slide,
+                  initial: "enter",
+                  animate: "center",
+                  exit: "exit",
+                  transition: { duration: 0.35, ease: GLIDE },
+                  onPointerLeave: () => setHovered(null),
+                  children: /* @__PURE__ */ jsx(LayoutGroup, { id: `${id}-${label}`, children: Array.from({ length: 6 }, (_, w) => /* @__PURE__ */ jsx("div", { role: "row", className: "grid grid-cols-7", children: days.slice(w * 7, w * 7 + 7).map((d) => {
+                    const k = keyOf(d);
+                    const inMonth = sameMonth(d, month);
+                    const on = sameDay(d, selected);
+                    const isToday = sameDay(d, today);
+                    const focusable = sameDay(d, focusDay);
+                    return /* @__PURE__ */ jsx(
+                      "div",
+                      {
+                        role: "gridcell",
+                        className: "grid h-11 place-items-center",
+                        children: /* @__PURE__ */ jsxs(
+                          motion.button,
+                          {
+                            type: "button",
+                            "data-day": k,
+                            "aria-selected": on,
+                            "aria-current": isToday ? "date" : void 0,
+                            "aria-label": `${d.toLocaleDateString(locale, { weekday: "long", month: "long", day: "numeric", year: "numeric" })}${marks.has(k) ? ", has events" : ""}`,
+                            tabIndex: focusable ? 0 : -1,
+                            onClick: () => pick(d),
+                            onFocus: () => setFocusDay(d),
+                            onPointerEnter: () => setHovered(k),
+                            whileTap: still ? void 0 : { scale: 0.9 },
+                            className: cn(
+                              "relative grid size-10 cursor-pointer place-items-center rounded-full text-sm tabular-nums outline-none focus-visible:ring-2 focus-visible:ring-zinc-400",
+                              !inMonth && "text-zinc-300 dark:text-zinc-600"
+                            ),
+                            children: [
+                              hovered === k && !on && /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  layoutId: "hover",
+                                  className: "absolute inset-0 rounded-full bg-zinc-100 dark:bg-white/8",
+                                  transition: still ? { duration: 0 } : DISC
+                                }
+                              ),
+                              on && /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  layoutId: "selected",
+                                  className: "absolute inset-0 rounded-full bg-[#242423] dark:bg-white",
+                                  transition: still ? { duration: 0 } : DISC
+                                }
+                              ),
+                              isToday && !on && /* @__PURE__ */ jsx("span", { className: "absolute inset-0 rounded-full ring-1 ring-inset ring-zinc-300 dark:ring-white/20" }),
+                              /* @__PURE__ */ jsx(
+                                "span",
+                                {
+                                  className: cn(
+                                    "relative transition-colors duration-200",
+                                    on && "font-medium text-white dark:text-zinc-900"
+                                  ),
+                                  children: d.getDate()
+                                }
+                              ),
+                              marks.has(k) && /* @__PURE__ */ jsx(
+                                motion.span,
+                                {
+                                  className: cn(
+                                    "absolute bottom-1 size-1 rounded-full",
+                                    on ? "bg-white dark:bg-zinc-900" : inMonth ? "bg-[#242423] dark:bg-white" : "bg-zinc-300 dark:bg-zinc-600"
+                                  ),
+                                  animate: { y: on && !still ? -1 : 0 },
+                                  transition: DISC
+                                }
+                              )
+                            ]
+                          }
+                        )
+                      },
+                      k
+                    );
+                  }) }, w)) })
+                },
+                label
+              ) }) })
+            ]
+          }
+        )
+      ]
+    }
+  );
+});
+
+export {
+  MonthCalendar
+};

package/dist/chunk-IYZOANPX.js

@@ -0,0 +1,159 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/receipt.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 DOLLAR_MAIN_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    transition: {
+      duration: 0.4,
+      opacity: { duration: 0.1 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    transition: {
+      duration: 0.6,
+      opacity: { duration: 0.1 }
+    }
+  }
+};
+var DOLLAR_SECONDARY_VARIANTS = {
+  normal: {
+    opacity: 1,
+    pathLength: 1,
+    pathOffset: 0,
+    transition: {
+      delay: 0.3,
+      duration: 0.3,
+      opacity: { duration: 0.1, delay: 0.3 }
+    }
+  },
+  animate: {
+    opacity: [0, 1],
+    pathLength: [0, 1],
+    pathOffset: [1, 0],
+    transition: {
+      delay: 0.5,
+      duration: 0.4,
+      opacity: { duration: 0.1, delay: 0.5 }
+    }
+  }
+};
+var ReceiptIcon = 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(
+          motion.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: "M12 17V7",
+                  initial: "normal",
+                  variants: DOLLAR_SECONDARY_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M16 8h-6a2 2 0 0 0 0 4h4a2 2 0 0 1 0 4H8",
+                  initial: "normal",
+                  variants: DOLLAR_MAIN_VARIANTS
+                }
+              ),
+              /* @__PURE__ */ jsx("path", { d: "M4 3a1 1 0 0 1 1-1 1.3 1.3 0 0 1 .7.2l.933.6a1.3 1.3 0 0 0 1.4 0l.934-.6a1.3 1.3 0 0 1 1.4 0l.933.6a1.3 1.3 0 0 0 1.4 0l.933-.6a1.3 1.3 0 0 1 1.4 0l.934.6a1.3 1.3 0 0 0 1.4 0l.933-.6A1.3 1.3 0 0 1 19 2a1 1 0 0 1 1 1v18a1 1 0 0 1-1 1 1.3 1.3 0 0 1-.7-.2l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.934.6a1.3 1.3 0 0 1-1.4 0l-.933-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-1.4 0l-.934-.6a1.3 1.3 0 0 0-1.4 0l-.933.6a1.3 1.3 0 0 1-.7.2 1 1 0 0 1-1-1z" })
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+ReceiptIcon.displayName = "ReceiptIcon";
+
+export {
+  ReceiptIcon
+};

package/dist/chunk-JFTD3YAL.js

@@ -0,0 +1,163 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/icons/delete.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 LID_VARIANTS = {
+  normal: { y: 0 },
+  animate: { y: -1.1 }
+};
+var SPRING_TRANSITION = {
+  type: "spring",
+  stiffness: 500,
+  damping: 30
+};
+var DeleteIcon = 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__ */ jsxs(
+                motion.g,
+                {
+                  animate: controls,
+                  transition: SPRING_TRANSITION,
+                  variants: LID_VARIANTS,
+                  children: [
+                    /* @__PURE__ */ jsx("path", { d: "M3 6h18" }),
+                    /* @__PURE__ */ jsx("path", { d: "M8 6V4c0-1 1-2 2-2h4c1 0 2 1 2 2v2" })
+                  ]
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.path,
+                {
+                  animate: controls,
+                  d: "M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8",
+                  transition: SPRING_TRANSITION,
+                  variants: {
+                    normal: { d: "M19 8v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V8" },
+                    animate: { d: "M19 9v12c0 1-1 2-2 2H7c-1 0-2-1-2-2V9" }
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.line,
+                {
+                  animate: controls,
+                  transition: SPRING_TRANSITION,
+                  variants: {
+                    normal: { y1: 11, y2: 17 },
+                    animate: { y1: 11.5, y2: 17.5 }
+                  },
+                  x1: "10",
+                  x2: "10",
+                  y1: "11",
+                  y2: "17"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                motion.line,
+                {
+                  animate: controls,
+                  transition: SPRING_TRANSITION,
+                  variants: {
+                    normal: { y1: 11, y2: 17 },
+                    animate: { y1: 11.5, y2: 17.5 }
+                  },
+                  x1: "14",
+                  x2: "14",
+                  y1: "11",
+                  y2: "17"
+                }
+              )
+            ]
+          }
+        )
+      }
+    );
+  }
+);
+DeleteIcon.displayName = "DeleteIcon";
+
+export {
+  DeleteIcon
+};