motion-brew 0.0.0-stage → 0.1.0

package/dist/chunk-5IAO5YQA.js

@@ -0,0 +1,373 @@
+"use client";
+import {
+  cn
+} from "./chunk-2TQSHVXA.js";
+
+// src/components/privacy-banner/privacy-banner.tsx
+import * as React from "react";
+import {
+  AnimatePresence,
+  motion,
+  useInView,
+  useReducedMotion
+} from "motion/react";
+import { ArrowRight } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+var DEFAULT_KINDS = [
+  {
+    id: "essential",
+    label: "Essential",
+    description: "Sign in, security and your basket.",
+    required: true
+  },
+  {
+    id: "analytics",
+    label: "Analytics",
+    description: "Helps us see which pages work."
+  },
+  {
+    id: "marketing",
+    label: "Marketing",
+    description: "Ads that match what you like."
+  }
+];
+var GLIDE = [0.22, 1, 0.36, 1];
+var SPRING = { type: "spring", stiffness: 420, damping: 34 };
+function CookieIcon({ hover, still }) {
+  const chips = [
+    [8.5, 8.5],
+    [16, 15.5],
+    [12, 17],
+    [11, 12],
+    [7, 14.5]
+  ];
+  return /* @__PURE__ */ jsxs(
+    motion.svg,
+    {
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 1.75,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      className: "size-5 overflow-visible",
+      initial: still ? false : { rotate: -120, x: -14, opacity: 0 },
+      animate: {
+        rotate: hover && !still ? [0, -10, 6, 0] : 0,
+        x: 0,
+        opacity: 1
+      },
+      transition: { type: "spring", stiffness: 220, damping: 16, delay: 0.2 },
+      children: [
+        /* @__PURE__ */ jsx(
+          motion.path,
+          {
+            initial: false,
+            animate: {
+              d: hover && !still ? "M12 2a10 10 0 1 0 10 10 5.2 5.2 0 0 1-6-6 5.2 5.2 0 0 1-4-4" : "M12 2a10 10 0 1 0 10 10 4 4 0 0 1-5-5 4 4 0 0 1-5-5"
+            },
+            transition: { type: "spring", stiffness: 300, damping: 18 }
+          }
+        ),
+        chips.map(([cx, cy], i) => /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx,
+            cy,
+            r: 0.6,
+            fill: "currentColor",
+            initial: false,
+            animate: { y: hover && !still ? [0, -2, 0] : 0 },
+            transition: { duration: 0.35, delay: i * 0.05 }
+          },
+          i
+        )),
+        [0, 1].map((i) => /* @__PURE__ */ jsx(
+          motion.circle,
+          {
+            cx: 19 + i * 2,
+            cy: 7 + i,
+            r: 0.6,
+            fill: "currentColor",
+            stroke: "none",
+            initial: false,
+            animate: hover && !still ? { y: [0, 8], opacity: [1, 0] } : { y: 0, opacity: 0 },
+            transition: { duration: 0.6, delay: 0.1 + i * 0.08, ease: "easeIn" }
+          },
+          `c${i}`
+        ))
+      ]
+    }
+  );
+}
+function Switch({
+  on,
+  disabled,
+  onChange,
+  label,
+  still
+}) {
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      role: "switch",
+      "aria-checked": on,
+      "aria-label": label,
+      disabled,
+      onClick: () => onChange(!on),
+      className: cn(
+        "relative flex h-6 w-10 shrink-0 cursor-pointer items-center rounded-full p-0.5 outline-none transition-colors duration-300 focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 disabled:cursor-not-allowed",
+        on ? "justify-end bg-[#242423] dark:bg-zinc-100" : "justify-start bg-[#242423]/15 dark:bg-white/15",
+        disabled && "opacity-50"
+      ),
+      children: /* @__PURE__ */ jsx(
+        motion.span,
+        {
+          layout: true,
+          transition: still ? { duration: 0 } : { type: "spring", stiffness: 600, damping: 32 },
+          className: "size-5 rounded-full bg-white shadow-[0_1px_2px_rgba(0,0,0,0.2)] dark:bg-zinc-900"
+        }
+      )
+    }
+  );
+}
+var PrivacyBanner = React.forwardRef(function PrivacyBanner2({
+  title = "Cookies, your call",
+  description = "We use a few cookies to keep things running and to learn what works. Pick what you are happy with; you can change it any time.",
+  kinds = DEFAULT_KINDS,
+  onAccept,
+  onReject,
+  onSave,
+  className
+}, ref) {
+  const still = !!useReducedMotion();
+  const root = React.useRef(null);
+  React.useImperativeHandle(ref, () => root.current);
+  const inView = useInView(root, { once: true, amount: 0.4 });
+  const shown = inView || still;
+  const all = (v) => Object.fromEntries(
+    kinds.map((k) => [k.id, k.required ? true : v])
+  );
+  const [choices, setChoices] = React.useState(() => all(false));
+  const [custom, setCustom] = React.useState(false);
+  const [done, setDone] = React.useState(null);
+  const [cookieHover, setCookieHover] = React.useState(false);
+  const finish = (kind) => {
+    if (kind === "accept") {
+      const c = all(true);
+      setChoices(c);
+      onAccept?.(c);
+    } else if (kind === "reject") {
+      const c = all(false);
+      setChoices(c);
+      onReject?.(c);
+    } else onSave?.(choices);
+    setDone(kind);
+  };
+  const on = kinds.filter((k) => choices[k.id]).length;
+  const summary = done === "accept" ? "All cookies are on." : on <= kinds.filter((k) => k.required).length ? "Only the essentials are on." : `${on} of ${kinds.length} kinds are on.`;
+  const fade = {
+    initial: still ? false : { opacity: 0, y: 8, filter: "blur(4px)" },
+    animate: { opacity: 1, y: 0, filter: "blur(0px)" },
+    exit: still ? void 0 : { opacity: 0, y: -6, filter: "blur(4px)" },
+    transition: { duration: 0.3, ease: GLIDE }
+  };
+  return /* @__PURE__ */ jsx(
+    motion.div,
+    {
+      ref: root,
+      layout: true,
+      role: "region",
+      "aria-label": "Cookie settings",
+      initial: still ? false : { opacity: 0, y: 40 },
+      animate: shown ? { opacity: 1, y: 0 } : void 0,
+      transition: { ...SPRING, layout: still ? { duration: 0 } : SPRING },
+      className: cn(
+        "w-[400px] max-w-full overflow-hidden rounded-3xl bg-white p-6 text-[#242423] 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
+      ),
+      style: { borderRadius: 24 },
+      children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: done ? /* @__PURE__ */ jsxs(motion.div, { ...fade, className: "flex items-center gap-4", children: [
+        /* @__PURE__ */ jsx("span", { className: "grid size-11 shrink-0 place-items-center rounded-full bg-[#269a5a]/10 text-[#269a5a]", children: /* @__PURE__ */ jsx(
+          "svg",
+          {
+            viewBox: "0 0 24 24",
+            className: "size-6",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: 2,
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            "aria-hidden": true,
+            children: /* @__PURE__ */ jsx(
+              motion.path,
+              {
+                d: "M5 12.5l4.5 4.5L19 7.5",
+                initial: still ? false : { pathLength: 0 },
+                animate: { pathLength: 1 },
+                transition: { duration: 0.45, delay: 0.15, ease: GLIDE }
+              }
+            )
+          }
+        ) }),
+        /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+          /* @__PURE__ */ jsx("p", { className: "text-base font-semibold tracking-tight", children: "You are all set" }),
+          /* @__PURE__ */ jsx(
+            "p",
+            {
+              className: "mt-0.5 text-sm text-zinc-500 dark:text-zinc-400",
+              role: "status",
+              children: summary
+            }
+          )
+        ] }),
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: () => {
+              setDone(null);
+              setCustom(true);
+            },
+            className: "h-9 shrink-0 cursor-pointer rounded-full px-3 text-sm font-medium text-zinc-500 outline-none transition-colors hover:bg-[#242423]/[0.05] hover:text-[#242423] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:text-zinc-400 dark:hover:text-zinc-100",
+            children: "Change"
+          }
+        )
+      ] }, "done") : /* @__PURE__ */ jsxs(
+        motion.div,
+        {
+          ...fade,
+          transition: { ...fade.transition, delay: 0 },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3", children: [
+              /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: "grid size-10 shrink-0 place-items-center rounded-full bg-[#242423]/[0.06] dark:bg-white/[0.08]",
+                  onPointerEnter: () => setCookieHover(true),
+                  onPointerLeave: () => setCookieHover(false),
+                  children: /* @__PURE__ */ jsx(CookieIcon, { hover: cookieHover, still })
+                }
+              ),
+              /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold tracking-tight", children: title })
+            ] }),
+            /* @__PURE__ */ jsx("p", { className: "mt-3 text-base leading-relaxed text-zinc-500 dark:text-zinc-400", children: description }),
+            /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: custom && /* @__PURE__ */ jsx(
+              motion.div,
+              {
+                initial: still ? false : { height: 0, opacity: 0 },
+                animate: { height: "auto", opacity: 1 },
+                exit: still ? void 0 : { height: 0, opacity: 0 },
+                transition: { ...SPRING, opacity: { duration: 0.2 } },
+                className: "overflow-hidden",
+                children: /* @__PURE__ */ jsx("div", { className: "mt-5 divide-y divide-black/5 rounded-2xl bg-[#242423]/[0.04] px-4 dark:divide-white/10 dark:bg-white/[0.04]", children: kinds.map((k, i) => /* @__PURE__ */ jsxs(
+                  motion.div,
+                  {
+                    className: "flex items-center gap-3 py-3",
+                    initial: still ? false : { opacity: 0, x: -8 },
+                    animate: { opacity: 1, x: 0 },
+                    transition: {
+                      duration: 0.3,
+                      delay: 0.08 + i * 0.05,
+                      ease: GLIDE
+                    },
+                    children: [
+                      /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+                        /* @__PURE__ */ jsxs("p", { className: "text-sm font-medium", children: [
+                          k.label,
+                          k.required && /* @__PURE__ */ jsx("span", { className: "ml-2 text-xs font-normal text-zinc-500", children: "Always on" })
+                        ] }),
+                        /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: k.description })
+                      ] }),
+                      /* @__PURE__ */ jsx(
+                        Switch,
+                        {
+                          on: !!choices[k.id],
+                          disabled: k.required,
+                          label: k.label,
+                          still,
+                          onChange: (v) => setChoices((c) => ({ ...c, [k.id]: v }))
+                        }
+                      )
+                    ]
+                  },
+                  k.id
+                )) })
+              },
+              "panel"
+            ) }),
+            /* @__PURE__ */ jsxs("div", { className: "mt-6 flex items-center gap-2", children: [
+              /* @__PURE__ */ jsx(
+                motion.button,
+                {
+                  type: "button",
+                  onClick: () => custom ? finish("save") : setCustom(true),
+                  whileTap: still ? void 0 : { scale: 0.96 },
+                  className: "shrink-0 whitespace-nowrap relative h-10 cursor-pointer overflow-hidden rounded-full px-4 text-sm font-medium text-[#242423] outline-none transition-colors hover:bg-[#242423]/[0.05] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:text-zinc-100 dark:hover:bg-white/[0.06]",
+                  children: /* @__PURE__ */ jsx(AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsx(
+                    motion.span,
+                    {
+                      className: "inline-block",
+                      initial: still ? false : { y: 16, opacity: 0 },
+                      animate: { y: 0, opacity: 1 },
+                      exit: still ? void 0 : { y: -16, opacity: 0 },
+                      transition: SPRING,
+                      children: custom ? "Save choices" : "Customize"
+                    },
+                    custom ? "save" : "custom"
+                  ) })
+                }
+              ),
+              /* @__PURE__ */ jsx("span", { className: "flex-1" }),
+              /* @__PURE__ */ jsx(
+                motion.button,
+                {
+                  type: "button",
+                  onClick: () => finish("reject"),
+                  whileTap: still ? void 0 : { scale: 0.96 },
+                  className: "shrink-0 whitespace-nowrap h-10 cursor-pointer rounded-full bg-[#242423]/[0.06] px-4 text-sm font-medium text-[#242423] outline-none transition-colors hover:bg-[#242423]/[0.1] focus-visible:ring-2 focus-visible:ring-zinc-400 dark:bg-white/[0.08] dark:text-zinc-100",
+                  children: "Reject all"
+                }
+              ),
+              /* @__PURE__ */ jsxs(
+                motion.button,
+                {
+                  type: "button",
+                  onClick: () => finish("accept"),
+                  whileTap: still ? void 0 : { scale: 0.96 },
+                  className: "shrink-0 whitespace-nowrap group/accept flex h-10 cursor-pointer items-center gap-1.5 overflow-hidden rounded-full bg-[#242423] pl-4 pr-3.5 text-sm font-medium text-white outline-none focus-visible:ring-2 focus-visible:ring-zinc-400 focus-visible:ring-offset-2 dark:bg-zinc-100 dark:text-[#242423]",
+                  children: [
+                    "Accept all",
+                    /* @__PURE__ */ jsxs("span", { className: "relative size-4 overflow-hidden", children: [
+                      /* @__PURE__ */ jsx(
+                        ArrowRight,
+                        {
+                          "aria-hidden": true,
+                          className: "absolute inset-0 size-4 transition-transform duration-300 ease-out group-hover/accept:translate-x-5"
+                        }
+                      ),
+                      /* @__PURE__ */ jsx(
+                        ArrowRight,
+                        {
+                          "aria-hidden": true,
+                          className: "absolute inset-0 size-4 -translate-x-5 transition-transform duration-300 ease-out group-hover/accept:translate-x-0"
+                        }
+                      )
+                    ] })
+                  ]
+                }
+              )
+            ] })
+          ]
+        },
+        "ask"
+      ) })
+    }
+  );
+});
+
+export {
+  PrivacyBanner
+};