react-marketing-ui 0.0.1

package/dist/sparkles-text.d.cts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+export type SparklesTextProps = {
+    /** The text to sparkle. Rendered inline, so it inherits the surrounding type. */
+    children: ReactNode;
+    className?: string;
+    /** How many sparkles orbit the text at once. @default 10 */
+    sparklesCount?: number;
+    /** The two colors sparkles alternate between. */
+    colors?: {
+        first: string;
+        second: string;
+    };
+};
+/**
+ * Wraps a word or phrase in continuously respawning sparkles.
+ *
+ * Sparkles are generated on the client only — the exported HTML ships the bare
+ * text, so nothing about the layout depends on JS having run. Readers who ask
+ * for reduced motion get that same bare text.
+ */
+export declare function SparklesText({ children, className, sparklesCount, colors }: SparklesTextProps): import("react").JSX.Element;
+//# sourceMappingURL=sparkles-text.d.ts.map

package/dist/sparkles-text.d.ts

@@ -0,0 +1,22 @@
+import { type ReactNode } from 'react';
+export type SparklesTextProps = {
+    /** The text to sparkle. Rendered inline, so it inherits the surrounding type. */
+    children: ReactNode;
+    className?: string;
+    /** How many sparkles orbit the text at once. @default 10 */
+    sparklesCount?: number;
+    /** The two colors sparkles alternate between. */
+    colors?: {
+        first: string;
+        second: string;
+    };
+};
+/**
+ * Wraps a word or phrase in continuously respawning sparkles.
+ *
+ * Sparkles are generated on the client only — the exported HTML ships the bare
+ * text, so nothing about the layout depends on JS having run. Readers who ask
+ * for reduced motion get that same bare text.
+ */
+export declare function SparklesText({ children, className, sparklesCount, colors }: SparklesTextProps): import("react").JSX.Element;
+//# sourceMappingURL=sparkles-text.d.ts.map

package/dist/sparkles-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"sparkles-text.d.ts","sourceRoot":"","sources":["../../src/components/sparkles-text.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,KAAK,SAAS,EAAuB,MAAM,OAAO,CAAC;AAkD5D,MAAM,MAAM,iBAAiB,GAAG;IAC9B,iFAAiF;IACjF,QAAQ,EAAE,SAAS,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,4DAA4D;IAC5D,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,iDAAiD;IACjD,MAAM,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,MAAM,EAAE,MAAM,CAAA;KAAE,CAAC;CAC5C,CAAC;AAEF;;;;;;GAMG;AACH,wBAAgB,YAAY,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,aAAkB,EAAE,MAAuB,EAAE,EAAE,iBAAiB,+BA0CnH"}

package/dist/sparkles-text.js

@@ -0,0 +1,87 @@
+'use strict';
+
+var framerMotion = require('framer-motion');
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function useMediaQuery(query, defaultState = false) {
+  const [matches, setMatches] = react.useState(defaultState);
+  react.useEffect(() => {
+    const mql = globalThis.matchMedia(query);
+    setMatches(mql.matches);
+    const onChange = (e) => setMatches(e.matches);
+    mql.addEventListener("change", onChange);
+    return () => mql.removeEventListener("change", onChange);
+  }, [query]);
+  return matches;
+}
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var STAR_PATH = "M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z";
+var DEFAULT_COLORS = {
+  first: "var(--color-accent-brand)",
+  second: "var(--color-accent-brand-soft)"
+};
+function SparkleStar({ x, y, color, delay, scale }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.svg,
+    {
+      className: "pointer-events-none absolute z-20",
+      initial: { opacity: 0, left: x, top: y },
+      animate: {
+        opacity: [0, 1, 0],
+        scale: [0, scale, 0],
+        rotate: [75, 120, 150]
+      },
+      transition: {
+        duration: 0.8,
+        repeat: Number.POSITIVE_INFINITY,
+        delay
+      },
+      width: "21",
+      height: "21",
+      viewBox: "0 0 21 21",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: STAR_PATH, fill: color })
+    }
+  );
+}
+function SparklesText({ children, className, sparklesCount = 10, colors = DEFAULT_COLORS }) {
+  const reducedMotion = useMediaQuery("(prefers-reduced-motion: reduce)");
+  const [sparkles, setSparkles] = react.useState([]);
+  const { first, second } = colors;
+  react.useEffect(() => {
+    if (reducedMotion) {
+      setSparkles([]);
+      return;
+    }
+    const spawn = () => ({
+      x: `${Math.random() * 100}%`,
+      y: `${Math.random() * 100}%`,
+      color: Math.random() > 0.5 ? first : second,
+      delay: Math.random() * 2,
+      scale: Math.random() + 0.3,
+      expiresAt: performance.now() + (Math.random() * 10 + 5) * 1e3
+    });
+    setSparkles(Array.from({ length: sparklesCount }, spawn));
+    const interval = setInterval(() => {
+      setSparkles((current) => {
+        const now = performance.now();
+        if (!current.some((sparkle) => sparkle.expiresAt <= now)) return current;
+        return current.map((sparkle) => sparkle.expiresAt <= now ? spawn() : sparkle);
+      });
+    }, 500);
+    return () => clearInterval(interval);
+  }, [first, second, sparklesCount, reducedMotion]);
+  return /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn("relative inline-block", className), children: [
+    sparkles.map((sparkle) => /* @__PURE__ */ jsxRuntime.jsx(SparkleStar, { ...sparkle }, `${sparkle.x}-${sparkle.y}-${sparkle.expiresAt}`)),
+    children
+  ] });
+}
+
+exports.SparklesText = SparklesText;
+//# sourceMappingURL=sparkles-text.js.map
+//# sourceMappingURL=sparkles-text.js.map

package/dist/sparkles-text.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/use-media-query.ts","../src/lib/utils.ts","../src/components/sparkles-text.tsx"],"names":["useState","useEffect","twMerge","clsx","jsx","motion"],"mappings":"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","file":"sparkles-text.js","sourcesContent":["'use client';\n\nimport { useEffect, useState } from 'react';\n\n/**\n * Tracks a CSS media query, returning `true` when it matches.\n *\n * The default return before hydration is `false`; pass `defaultState`\n * to set a different initial value (e.g. `true` for dark-mode queries\n * whose SSR default is dark).\n */\nexport function useMediaQuery(query: string, defaultState = false): boolean {\n  const [matches, setMatches] = useState(defaultState);\n\n  // biome-ignore lint/plugin: subscribes to a matchMedia listener — an imperative side effect with no derived-state equivalent.\n  useEffect(() => {\n    const mql = globalThis.matchMedia(query);\n    setMatches(mql.matches);\n\n    const onChange = (e: MediaQueryListEvent) => setMatches(e.matches);\n    mql.addEventListener('change', onChange);\n    return () => mql.removeEventListener('change', onChange);\n  }, [query]);\n\n  return matches;\n}\n","import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","'use client';\n\nimport { motion } from 'framer-motion';\nimport { type ReactNode, useEffect, useState } from 'react';\nimport { useMediaQuery } from '../lib/use-media-query.js';\nimport { cn } from '../lib/utils.js';\n\n/** Four-pointed star, drawn once and reused by every sparkle. */\nconst STAR_PATH =\n  'M9.82531 0.843845C10.0553 0.215178 10.9446 0.215178 11.1746 0.843845L11.8618 2.72026C12.4006 4.19229 12.3916 6.39157 13.5 7.5C14.6084 8.60843 16.8077 8.59935 18.2797 9.13822L20.1561 9.82534C20.7858 10.0553 20.7858 10.9447 20.1561 11.1747L18.2797 11.8618C16.8077 12.4007 14.6084 12.3916 13.5 13.5C12.3916 14.6084 12.4006 16.8077 11.8618 18.2798L11.1746 20.1562C10.9446 20.7858 10.0553 20.7858 9.82531 20.1562L9.13819 18.2798C8.59932 16.8077 8.60843 14.6084 7.5 13.5C6.39157 12.3916 4.19225 12.4007 2.72023 11.8618L0.843814 11.1747C0.215148 10.9447 0.215148 10.0553 0.843814 9.82534L2.72023 9.13822C4.19225 8.59935 6.39157 8.60843 7.5 7.5C8.60843 6.39157 8.59932 4.19229 9.13819 2.72026L9.82531 0.843845Z';\n\nconst DEFAULT_COLORS = {\n  first: 'var(--color-accent-brand)',\n  second: 'var(--color-accent-brand-soft)',\n};\n\ntype Sparkle = {\n  /** Position within the text's box, as percentages. */\n  x: string;\n  y: string;\n  color: string;\n  /** Offsets the twinkle so the group never pulses in unison. */\n  delay: number;\n  scale: number;\n  /** `performance.now()` timestamp after which this sparkle is replaced by a fresh one. */\n  expiresAt: number;\n};\n\nfunction SparkleStar({ x, y, color, delay, scale }: Omit<Sparkle, 'expiresAt'>) {\n  return (\n    <motion.svg\n      className=\"pointer-events-none absolute z-20\"\n      initial={{ opacity: 0, left: x, top: y }}\n      animate={{\n        opacity: [0, 1, 0],\n        scale: [0, scale, 0],\n        rotate: [75, 120, 150],\n      }}\n      transition={{\n        duration: 0.8,\n        repeat: Number.POSITIVE_INFINITY,\n        delay,\n      }}\n      width=\"21\"\n      height=\"21\"\n      viewBox=\"0 0 21 21\"\n      aria-hidden={true}\n    >\n      <path d={STAR_PATH} fill={color} />\n    </motion.svg>\n  );\n}\n\nexport type SparklesTextProps = {\n  /** The text to sparkle. Rendered inline, so it inherits the surrounding type. */\n  children: ReactNode;\n  className?: string;\n  /** How many sparkles orbit the text at once. @default 10 */\n  sparklesCount?: number;\n  /** The two colors sparkles alternate between. */\n  colors?: { first: string; second: string };\n};\n\n/**\n * Wraps a word or phrase in continuously respawning sparkles.\n *\n * Sparkles are generated on the client only — the exported HTML ships the bare\n * text, so nothing about the layout depends on JS having run. Readers who ask\n * for reduced motion get that same bare text.\n */\nexport function SparklesText({ children, className, sparklesCount = 10, colors = DEFAULT_COLORS }: SparklesTextProps) {\n  const reducedMotion = useMediaQuery('(prefers-reduced-motion: reduce)');\n  const [sparkles, setSparkles] = useState<Sparkle[]>([]);\n  const { first, second } = colors;\n\n  // biome-ignore lint/plugin: spawns and retires sparkles on a timer — an imperative animation loop with no derived-state equivalent.\n  useEffect(() => {\n    if (reducedMotion) {\n      setSparkles([]);\n      return;\n    }\n\n    const spawn = (): Sparkle => ({\n      x: `${Math.random() * 100}%`,\n      y: `${Math.random() * 100}%`,\n      color: Math.random() > 0.5 ? first : second,\n      delay: Math.random() * 2,\n      scale: Math.random() + 0.3,\n      expiresAt: performance.now() + (Math.random() * 10 + 5) * 1000,\n    });\n\n    setSparkles(Array.from({ length: sparklesCount }, spawn));\n\n    const interval = setInterval(() => {\n      setSparkles((current) => {\n        const now = performance.now();\n        if (!current.some((sparkle) => sparkle.expiresAt <= now)) return current;\n        return current.map((sparkle) => (sparkle.expiresAt <= now ? spawn() : sparkle));\n      });\n    }, 500);\n\n    return () => clearInterval(interval);\n  }, [first, second, sparklesCount, reducedMotion]);\n\n  return (\n    <span className={cn('relative inline-block', className)}>\n      {sparkles.map((sparkle) => (\n        <SparkleStar key={`${sparkle.x}-${sparkle.y}-${sparkle.expiresAt}`} {...sparkle} />\n      ))}\n      {children}\n    </span>\n  );\n}\n"]}

package/dist/sparkles-text.mjs

@@ -0,0 +1,5 @@
+export { SparklesText } from './chunk-OCZFHVVD.mjs';
+import './chunk-EYHT2EWJ.mjs';
+import './chunk-QAWSH567.mjs';
+//# sourceMappingURL=sparkles-text.mjs.map
+//# sourceMappingURL=sparkles-text.mjs.map

package/dist/sparkles-text.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"sparkles-text.mjs"}

package/dist/tabs.d.cts

@@ -0,0 +1,16 @@
+/** One segment. `id` is the value handed back to `onChange`. */
+export type Tab<T extends string = string> = {
+    id: T;
+    label: string;
+    badge?: string;
+};
+export type TabsProps<T extends string> = {
+    tabs: readonly Tab<T>[];
+    value: T;
+    onChange: (v: T) => void;
+    /** Accessible name for the group, e.g. "Billing period". */
+    label: string;
+    className?: string;
+};
+export declare function Tabs<T extends string>({ tabs, value, onChange, label, className }: TabsProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/tabs.d.ts

@@ -0,0 +1,16 @@
+/** One segment. `id` is the value handed back to `onChange`. */
+export type Tab<T extends string = string> = {
+    id: T;
+    label: string;
+    badge?: string;
+};
+export type TabsProps<T extends string> = {
+    tabs: readonly Tab<T>[];
+    value: T;
+    onChange: (v: T) => void;
+    /** Accessible name for the group, e.g. "Billing period". */
+    label: string;
+    className?: string;
+};
+export declare function Tabs<T extends string>({ tabs, value, onChange, label, className }: TabsProps<T>): import("react").JSX.Element;
+//# sourceMappingURL=tabs.d.ts.map

package/dist/tabs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.d.ts","sourceRoot":"","sources":["../../src/components/tabs.tsx"],"names":[],"mappings":"AAkBA,gEAAgE;AAChE,MAAM,MAAM,GAAG,CAAC,CAAC,SAAS,MAAM,GAAG,MAAM,IAAI;IAC3C,EAAE,EAAE,CAAC,CAAC;IACN,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC;CAChB,CAAC;AA4BF,MAAM,MAAM,SAAS,CAAC,CAAC,SAAS,MAAM,IAAI;IACxC,IAAI,EAAE,SAAS,GAAG,CAAC,CAAC,CAAC,EAAE,CAAC;IACxB,KAAK,EAAE,CAAC,CAAC;IACT,QAAQ,EAAE,CAAC,CAAC,EAAE,CAAC,KAAK,IAAI,CAAC;IACzB,4DAA4D;IAC5D,KAAK,EAAE,MAAM,CAAC;IACd,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EAAE,EAAE,IAAI,EAAE,KAAK,EAAE,QAAQ,EAAE,KAAK,EAAE,SAAS,EAAE,EAAE,SAAS,CAAC,CAAC,CAAC,+BAwG/F"}

package/dist/tabs.js

@@ -0,0 +1,121 @@
+'use strict';
+
+var framerMotion = require('framer-motion');
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var PULL = 0.035;
+function pillTarget(activeIdx, hoverIdx, rects, pull) {
+  const active = rects[activeIdx];
+  if (!active) throw new Error(`No rect at index ${activeIdx}`);
+  if (hoverIdx === null || hoverIdx === activeIdx) return active;
+  const hover = rects[hoverIdx];
+  if (!hover) return active;
+  const activeRight = active.left + active.width;
+  const hoverRight = hover.left + hover.width;
+  const left = Math.min(active.left, active.left + (hover.left - active.left) * pull);
+  const right = Math.max(activeRight, activeRight + (hoverRight - activeRight) * pull);
+  return { left, width: right - left };
+}
+var labelBox = "flex items-center gap-2.5 px-5 py-1.5 font-semibold text-[13px]";
+var badgeBox = "font-bold text-(--color-accent-brand-soft) text-[11px] whitespace-nowrap";
+function Tabs({ tabs, value, onChange, label, className }) {
+  const reduced = framerMotion.useReducedMotion();
+  const pull = reduced ? 0 : PULL;
+  const trackRef = react.useRef(null);
+  const [rects, setRects] = react.useState([]);
+  const [trackWidth, setTrackWidth] = react.useState(0);
+  const [hovered, setHovered] = react.useState(null);
+  const [ready, setReady] = react.useState(false);
+  const foundIdx = tabs.findIndex((t) => t.id === value);
+  const activeIdx = foundIdx === -1 ? 0 : foundIdx;
+  const springConfig = reduced ? { stiffness: 700, damping: 60 } : { stiffness: 420, damping: 34, mass: 0.7 };
+  const pillLeft = framerMotion.useSpring(0, springConfig);
+  const pillWidth = framerMotion.useSpring(0, springConfig);
+  const innerX = framerMotion.useTransform(pillLeft, (v) => -v);
+  const measure = react.useCallback(() => {
+    const track = trackRef.current;
+    if (!track) return;
+    setTrackWidth(track.offsetWidth);
+    const btns = track.querySelectorAll("button[data-index]");
+    setRects(
+      Array.from(btns, (el) => ({
+        left: el.offsetLeft,
+        width: el.offsetWidth
+      }))
+    );
+  }, []);
+  react.useEffect(() => {
+    measure();
+    const track = trackRef.current;
+    if (!track) return;
+    const ro = new ResizeObserver(measure);
+    ro.observe(track);
+    return () => ro.disconnect();
+  }, [measure]);
+  react.useEffect(() => {
+    if (rects.length !== tabs.length) return;
+    const target = pillTarget(activeIdx, hovered, rects, pull);
+    if (ready) {
+      pillLeft.set(target.left);
+      pillWidth.set(target.width);
+    } else {
+      pillLeft.jump(target.left);
+      pillWidth.jump(target.width);
+      setReady(true);
+    }
+  }, [rects, tabs.length, activeIdx, hovered, pull, ready, pillLeft, pillWidth]);
+  const handleClick = react.useCallback(
+    (e) => onChange(tabs[Number(e.currentTarget.dataset.index)].id),
+    [onChange, tabs]
+  );
+  const handleEnter = react.useCallback((e) => setHovered(Number(e.currentTarget.dataset.index)), []);
+  const handleLeave = react.useCallback(() => setHovered(null), []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "fieldset",
+    {
+      "aria-label": label,
+      className: cn("inline-flex items-center rounded-full border border-(--color-border) bg-(--color-surface) p-1", className),
+      children: /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: trackRef, className: "relative inline-flex items-center", children: [
+        tabs.map((tab, i) => /* @__PURE__ */ jsxRuntime.jsxs(
+          "button",
+          {
+            type: "button",
+            "data-index": i,
+            onClick: handleClick,
+            onMouseEnter: handleEnter,
+            onMouseLeave: handleLeave,
+            "aria-pressed": value === tab.id,
+            className: cn(labelBox, "text-(--color-muted-foreground) hover:text-(--color-foreground)"),
+            children: [
+              tab.label,
+              tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeBox, children: tab.badge }) : null
+            ]
+          },
+          tab.id
+        )),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.div,
+          {
+            "aria-hidden": true,
+            className: "pointer-events-none absolute inset-y-0 select-none overflow-hidden rounded-full bg-(--color-foreground)",
+            style: { left: pillLeft, width: pillWidth, opacity: ready ? 1 : 0 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.motion.div, { className: "absolute inset-y-0 left-0 flex items-center", style: { width: trackWidth, x: innerX }, children: tabs.map((tab) => /* @__PURE__ */ jsxRuntime.jsxs("span", { className: cn(labelBox, "text-(--color-surface)"), children: [
+              tab.label,
+              tab.badge ? /* @__PURE__ */ jsxRuntime.jsx("span", { className: badgeBox, children: tab.badge }) : null
+            ] }, tab.id)) })
+          }
+        )
+      ] })
+    }
+  );
+}
+
+exports.Tabs = Tabs;
+//# sourceMappingURL=tabs.js.map
+//# sourceMappingURL=tabs.js.map

package/dist/tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/lib/utils.ts","../src/components/tabs.tsx"],"names":["twMerge","clsx","useReducedMotion","useRef","useState","useSpring","useTransform","useCallback","useEffect","jsx","jsxs","motion"],"mappings":";;;;;;;;AAIO,SAAS,MAAM,MAAA,EAAsB;AAC1C,EAAA,OAAOA,qBAAA,CAAQC,SAAA,CAAK,MAAM,CAAC,CAAA;AAC7B;ACoBA,IAAM,IAAA,GAAO,KAAA;AAMb,SAAS,UAAA,CAAW,SAAA,EAAmB,QAAA,EAAyB,KAAA,EAAe,IAAA,EAAoB;AACjG,EAAA,MAAM,MAAA,GAAS,MAAM,SAAS,CAAA;AAC9B,EAAA,IAAI,CAAC,MAAA,EAAQ,MAAM,IAAI,KAAA,CAAM,CAAA,iBAAA,EAAoB,SAAS,CAAA,CAAE,CAAA;AAC5D,EAAA,IAAI,QAAA,KAAa,IAAA,IAAQ,QAAA,KAAa,SAAA,EAAW,OAAO,MAAA;AAExD,EAAA,MAAM,KAAA,GAAQ,MAAM,QAAQ,CAAA;AAC5B,EAAA,IAAI,CAAC,OAAO,OAAO,MAAA;AACnB,EAAA,MAAM,WAAA,GAAc,MAAA,CAAO,IAAA,GAAO,MAAA,CAAO,KAAA;AACzC,EAAA,MAAM,UAAA,GAAa,KAAA,CAAM,IAAA,GAAO,KAAA,CAAM,KAAA;AAEtC,EAAA,MAAM,IAAA,GAAO,IAAA,CAAK,GAAA,CAAI,MAAA,CAAO,IAAA,EAAM,MAAA,CAAO,IAAA,GAAA,CAAQ,KAAA,CAAM,IAAA,GAAO,MAAA,CAAO,IAAA,IAAQ,IAAI,CAAA;AAClF,EAAA,MAAM,QAAQ,IAAA,CAAK,GAAA,CAAI,aAAa,WAAA,GAAA,CAAe,UAAA,GAAa,eAAe,IAAI,CAAA;AACnF,EAAA,OAAO,EAAE,IAAA,EAAM,KAAA,EAAO,KAAA,GAAQ,IAAA,EAAK;AACrC;AAGA,IAAM,QAAA,GAAW,iEAAA;AACjB,IAAM,QAAA,GAAW,0EAAA;AAWV,SAAS,KAAuB,EAAE,IAAA,EAAM,OAAO,QAAA,EAAU,KAAA,EAAO,WAAU,EAAiB;AAChG,EAAA,MAAM,UAAUC,6BAAA,EAAiB;AACjC,EAAA,MAAM,IAAA,GAAO,UAAU,CAAA,GAAI,IAAA;AAE3B,EAAA,MAAM,QAAA,GAAWC,aAAuB,IAAI,CAAA;AAE5C,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIC,cAAA,CAAiB,EAAE,CAAA;AAC7C,EAAA,MAAM,CAAC,UAAA,EAAY,aAAa,CAAA,GAAIA,eAAS,CAAC,CAAA;AAC9C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAwB,IAAI,CAAA;AAC1D,EAAA,MAAM,CAAC,KAAA,EAAO,QAAQ,CAAA,GAAIA,eAAS,KAAK,CAAA;AAExC,EAAA,MAAM,WAAW,IAAA,CAAK,SAAA,CAAU,CAAC,CAAA,KAAM,CAAA,CAAE,OAAO,KAAK,CAAA;AACrD,EAAA,MAAM,SAAA,GAAY,QAAA,KAAa,EAAA,GAAK,CAAA,GAAI,QAAA;AAExC,EAAA,MAAM,YAAA,GAAe,OAAA,GAAU,EAAE,SAAA,EAAW,KAAK,OAAA,EAAS,EAAA,EAAG,GAAI,EAAE,SAAA,EAAW,GAAA,EAAK,OAAA,EAAS,EAAA,EAAI,MAAM,GAAA,EAAI;AAC1G,EAAA,MAAM,QAAA,GAAWC,sBAAA,CAAU,CAAA,EAAG,YAAY,CAAA;AAC1C,EAAA,MAAM,SAAA,GAAYA,sBAAA,CAAU,CAAA,EAAG,YAAY,CAAA;AAC3C,EAAA,MAAM,SAASC,yBAAA,CAAa,QAAA,EAAU,CAAC,CAAA,KAAM,CAAC,CAAC,CAAA;AAE/C,EAAA,MAAM,OAAA,GAAUC,kBAAY,MAAM;AAChC,IAAA,MAAM,QAAQ,QAAA,CAAS,OAAA;AACvB,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,aAAA,CAAc,MAAM,WAAW,CAAA;AAC/B,IAAA,MAAM,IAAA,GAAO,KAAA,CAAM,gBAAA,CAAoC,oBAAoB,CAAA;AAC3E,IAAA,QAAA;AAAA,MACE,KAAA,CAAM,IAAA,CAAK,IAAA,EAAM,CAAC,EAAA,MAAQ;AAAA,QACxB,MAAM,EAAA,CAAG,UAAA;AAAA,QACT,OAAO,EAAA,CAAG;AAAA,OACZ,CAAE;AAAA,KACJ;AAAA,EACF,CAAA,EAAG,EAAE,CAAA;AAGL,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,OAAA,EAAQ;AACR,IAAA,MAAM,QAAQ,QAAA,CAAS,OAAA;AACvB,IAAA,IAAI,CAAC,KAAA,EAAO;AACZ,IAAA,MAAM,EAAA,GAAK,IAAI,cAAA,CAAe,OAAO,CAAA;AACrC,IAAA,EAAA,CAAG,QAAQ,KAAK,CAAA;AAChB,IAAA,OAAO,MAAM,GAAG,UAAA,EAAW;AAAA,EAC7B,CAAA,EAAG,CAAC,OAAO,CAAC,CAAA;AAGZ,EAAAA,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,KAAA,CAAM,MAAA,KAAW,IAAA,CAAK,MAAA,EAAQ;AAClC,IAAA,MAAM,MAAA,GAAS,UAAA,CAAW,SAAA,EAAW,OAAA,EAAS,OAAO,IAAI,CAAA;AACzD,IAAA,IAAI,KAAA,EAAO;AACT,MAAA,QAAA,CAAS,GAAA,CAAI,OAAO,IAAI,CAAA;AACxB,MAAA,SAAA,CAAU,GAAA,CAAI,OAAO,KAAK,CAAA;AAAA,IAC5B,CAAA,MAAO;AACL,MAAA,QAAA,CAAS,IAAA,CAAK,OAAO,IAAI,CAAA;AACzB,MAAA,SAAA,CAAU,IAAA,CAAK,OAAO,KAAK,CAAA;AAC3B,MAAA,QAAA,CAAS,IAAI,CAAA;AAAA,IACf;AAAA,EACF,CAAA,EAAG,CAAC,KAAA,EAAO,IAAA,CAAK,MAAA,EAAQ,SAAA,EAAW,OAAA,EAAS,IAAA,EAAM,KAAA,EAAO,QAAA,EAAU,SAAS,CAAC,CAAA;AAE7E,EAAA,MAAM,WAAA,GAAcD,iBAAA;AAAA,IAClB,CAAC,CAAA,KAAqC,QAAA,CAAS,IAAA,CAAK,MAAA,CAAO,CAAA,CAAE,aAAA,CAAc,OAAA,CAAQ,KAAK,CAAC,CAAA,CAAG,EAAE,CAAA;AAAA,IAC9F,CAAC,UAAU,IAAI;AAAA,GACjB;AACA,EAAA,MAAM,WAAA,GAAcA,iBAAA,CAAY,CAAC,CAAA,KAAqC,UAAA,CAAW,MAAA,CAAO,CAAA,CAAE,aAAA,CAAc,OAAA,CAAQ,KAAK,CAAC,CAAA,EAAG,EAAE,CAAA;AAC3H,EAAA,MAAM,cAAcA,iBAAA,CAAY,MAAM,WAAW,IAAI,CAAA,EAAG,EAAE,CAAA;AAE1D,EAAA,uBACEE,cAAA;AAAA,IAAC,UAAA;AAAA,IAAA;AAAA,MACC,YAAA,EAAY,KAAA;AAAA,MACZ,SAAA,EAAW,EAAA,CAAG,+FAAA,EAAiG,SAAS,CAAA;AAAA,MAExH,QAAA,kBAAAC,eAAA,CAAC,KAAA,EAAA,EAAI,GAAA,EAAK,QAAA,EAAU,WAAU,mCAAA,EAE3B,QAAA,EAAA;AAAA,QAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,EAAK,CAAA,qBACdA,eAAA;AAAA,UAAC,QAAA;AAAA,UAAA;AAAA,YAEC,IAAA,EAAK,QAAA;AAAA,YACL,YAAA,EAAY,CAAA;AAAA,YACZ,OAAA,EAAS,WAAA;AAAA,YACT,YAAA,EAAc,WAAA;AAAA,YACd,YAAA,EAAc,WAAA;AAAA,YACd,cAAA,EAAc,UAAU,GAAA,CAAI,EAAA;AAAA,YAC5B,SAAA,EAAW,EAAA,CAAG,QAAA,EAAU,iEAAiE,CAAA;AAAA,YAExF,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,KAAA;AAAA,cACJ,GAAA,CAAI,wBAAQD,cAAA,CAAC,MAAA,EAAA,EAAK,WAAW,QAAA,EAAW,QAAA,EAAA,GAAA,CAAI,OAAM,CAAA,GAAU;AAAA;AAAA,WAAA;AAAA,UAVxD,GAAA,CAAI;AAAA,SAYZ,CAAA;AAAA,wBAGDA,cAAA;AAAA,UAACE,mBAAA,CAAO,GAAA;AAAA,UAAP;AAAA,YACC,aAAA,EAAa,IAAA;AAAA,YACb,SAAA,EAAU,yGAAA;AAAA,YACV,KAAA,EAAO,EAAE,IAAA,EAAM,QAAA,EAAU,OAAO,SAAA,EAAW,OAAA,EAAS,KAAA,GAAQ,CAAA,GAAI,CAAA,EAAE;AAAA,YAElE,QAAA,kBAAAF,cAAA,CAACE,oBAAO,GAAA,EAAP,EAAW,WAAU,6CAAA,EAA8C,KAAA,EAAO,EAAE,KAAA,EAAO,UAAA,EAAY,CAAA,EAAG,QAAO,EACvG,QAAA,EAAA,IAAA,CAAK,GAAA,CAAI,CAAC,GAAA,qBACTD,eAAA,CAAC,UAAkB,SAAA,EAAW,EAAA,CAAG,QAAA,EAAU,wBAAwB,CAAA,EAChE,QAAA,EAAA;AAAA,cAAA,GAAA,CAAI,KAAA;AAAA,cACJ,GAAA,CAAI,wBAAQD,cAAA,CAAC,MAAA,EAAA,EAAK,WAAW,QAAA,EAAW,QAAA,EAAA,GAAA,CAAI,OAAM,CAAA,GAAU;AAAA,aAAA,EAAA,EAFpD,GAAA,CAAI,EAGf,CACD,CAAA,EACH;AAAA;AAAA;AACF,OAAA,EACF;AAAA;AAAA,GACF;AAEJ","file":"tabs.js","sourcesContent":["import { type ClassValue, clsx } from 'clsx';\nimport type { CSSProperties } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\nexport function cn(...inputs: ClassValue[]) {\n  return twMerge(clsx(inputs));\n}\n\n/**\n * A style object that may carry CSS custom properties (CSS variables)\n * such as `--duration`. React's `CSSProperties` intentionally drops\n * its index signature, so custom properties are not accepted without help.\n */\nexport type CSSPropertiesWithVars = CSSProperties & Record<`--${string}`, string | number>;\n\n/**\n * Builds a {@link CSSProperties} value that also allows CSS custom properties,\n * so `style` props can be written without an `as React.CSSProperties` cast while\n * still type-checking both the known style keys and the custom-property values.\n *\n * @example\n * <div style={validCssVars({ '--duration': '0.35s', color: 'red' })} />\n */\nexport function validCssVars(style: CSSPropertiesWithVars): CSSProperties {\n  return style;\n}\n\n/**\n * Narrows a union to the member(s) that declare `key` — a type-guard\n * replacement for the `in` operator's discriminated-union narrowing.\n */\nexport function hasKey<K extends PropertyKey>(key: K, obj: unknown): obj is Record<K, unknown> {\n  return obj !== null && typeof obj === 'object' && Object.hasOwn(obj, key);\n}\n\nexport function noop(): void {\n  // intentional no-op\n}\n","'use client';\n\nimport { motion, useReducedMotion, useSpring, useTransform } from 'framer-motion';\nimport { type MouseEvent, useCallback, useEffect, useRef, useState } from 'react';\nimport { cn } from '../lib/utils.js';\n\n/* ── Tabs ───────────────────────────────────────────────────────────────\n * A segmented control whose active pill slides between tabs and, while an\n * inactive tab is hovered, stretches (\"pulls\") toward the cursor for a\n * magnetic feel. A clipped, inverted duplicate of the labels stays glued to\n * the base labels underneath, so text flips colour exactly as the pill\n * passes over it — including the partial reveal during the pull.\n *\n * Single-select only: it switches one value, so the buttons carry\n * `aria-pressed` rather than the tab/tabpanel roles, which would promise\n * associated panels and arrow-key navigation this control doesn't provide.\n */\n\n/** One segment. `id` is the value handed back to `onChange`. */\nexport type Tab<T extends string = string> = {\n  id: T;\n  label: string;\n  badge?: string;\n};\n\n// How far the pill reaches toward the hovered tab (fraction of the gap).\nconst PULL = 0.035;\n\ntype Rect = { left: number; width: number };\n\n// Target pill rect: the active tab at rest, or stretched toward a hovered\n// neighbour so its leading edge reaches partway across the gap.\nfunction pillTarget(activeIdx: number, hoverIdx: number | null, rects: Rect[], pull: number): Rect {\n  const active = rects[activeIdx];\n  if (!active) throw new Error(`No rect at index ${activeIdx}`);\n  if (hoverIdx === null || hoverIdx === activeIdx) return active;\n\n  const hover = rects[hoverIdx];\n  if (!hover) return active;\n  const activeRight = active.left + active.width;\n  const hoverRight = hover.left + hover.width;\n\n  const left = Math.min(active.left, active.left + (hover.left - active.left) * pull);\n  const right = Math.max(activeRight, activeRight + (hoverRight - activeRight) * pull);\n  return { left, width: right - left };\n}\n\n// Shared box so the base labels and the inverted duplicate measure identically.\nconst labelBox = 'flex items-center gap-2.5 px-5 py-1.5 font-semibold text-[13px]';\nconst badgeBox = 'font-bold text-(--color-accent-brand-soft) text-[11px] whitespace-nowrap';\n\nexport type TabsProps<T extends string> = {\n  tabs: readonly Tab<T>[];\n  value: T;\n  onChange: (v: T) => void;\n  /** Accessible name for the group, e.g. \"Billing period\". */\n  label: string;\n  className?: string;\n};\n\nexport function Tabs<T extends string>({ tabs, value, onChange, label, className }: TabsProps<T>) {\n  const reduced = useReducedMotion();\n  const pull = reduced ? 0 : PULL;\n\n  const trackRef = useRef<HTMLDivElement>(null);\n\n  const [rects, setRects] = useState<Rect[]>([]);\n  const [trackWidth, setTrackWidth] = useState(0);\n  const [hovered, setHovered] = useState<number | null>(null);\n  const [ready, setReady] = useState(false);\n\n  const foundIdx = tabs.findIndex((t) => t.id === value);\n  const activeIdx = foundIdx === -1 ? 0 : foundIdx;\n\n  const springConfig = reduced ? { stiffness: 700, damping: 60 } : { stiffness: 420, damping: 34, mass: 0.7 };\n  const pillLeft = useSpring(0, springConfig);\n  const pillWidth = useSpring(0, springConfig);\n  const innerX = useTransform(pillLeft, (v) => -v);\n\n  const measure = useCallback(() => {\n    const track = trackRef.current;\n    if (!track) return;\n    setTrackWidth(track.offsetWidth);\n    const btns = track.querySelectorAll<HTMLButtonElement>('button[data-index]');\n    setRects(\n      Array.from(btns, (el) => ({\n        left: el.offsetLeft,\n        width: el.offsetWidth,\n      })),\n    );\n  }, []);\n\n  // biome-ignore lint/plugin: measures live DOM layout under a ResizeObserver — post-render measurement, no render-time equivalent.\n  useEffect(() => {\n    measure();\n    const track = trackRef.current;\n    if (!track) return;\n    const ro = new ResizeObserver(measure);\n    ro.observe(track);\n    return () => ro.disconnect();\n  }, [measure]);\n\n  // biome-ignore lint/plugin: imperatively drives the pill's spring motion values toward a layout-derived target.\n  useEffect(() => {\n    if (rects.length !== tabs.length) return;\n    const target = pillTarget(activeIdx, hovered, rects, pull);\n    if (ready) {\n      pillLeft.set(target.left);\n      pillWidth.set(target.width);\n    } else {\n      pillLeft.jump(target.left);\n      pillWidth.jump(target.width);\n      setReady(true);\n    }\n  }, [rects, tabs.length, activeIdx, hovered, pull, ready, pillLeft, pillWidth]);\n\n  const handleClick = useCallback(\n    (e: MouseEvent<HTMLButtonElement>) => onChange(tabs[Number(e.currentTarget.dataset.index)]!.id),\n    [onChange, tabs],\n  );\n  const handleEnter = useCallback((e: MouseEvent<HTMLButtonElement>) => setHovered(Number(e.currentTarget.dataset.index)), []);\n  const handleLeave = useCallback(() => setHovered(null), []);\n\n  return (\n    <fieldset\n      aria-label={label}\n      className={cn('inline-flex items-center rounded-full border border-(--color-border) bg-(--color-surface) p-1', className)}\n    >\n      <div ref={trackRef} className=\"relative inline-flex items-center\">\n        {/* Base labels — muted at rest; hidden wherever the opaque pill sits over them. */}\n        {tabs.map((tab, i) => (\n          <button\n            key={tab.id}\n            type=\"button\"\n            data-index={i}\n            onClick={handleClick}\n            onMouseEnter={handleEnter}\n            onMouseLeave={handleLeave}\n            aria-pressed={value === tab.id}\n            className={cn(labelBox, 'text-(--color-muted-foreground) hover:text-(--color-foreground)')}\n          >\n            {tab.label}\n            {tab.badge ? <span className={badgeBox}>{tab.badge}</span> : null}\n          </button>\n        ))}\n\n        {/* Sliding, pulling pill carrying a clipped inverted copy of the labels. */}\n        <motion.div\n          aria-hidden={true}\n          className=\"pointer-events-none absolute inset-y-0 select-none overflow-hidden rounded-full bg-(--color-foreground)\"\n          style={{ left: pillLeft, width: pillWidth, opacity: ready ? 1 : 0 }}\n        >\n          <motion.div className=\"absolute inset-y-0 left-0 flex items-center\" style={{ width: trackWidth, x: innerX }}>\n            {tabs.map((tab) => (\n              <span key={tab.id} className={cn(labelBox, 'text-(--color-surface)')}>\n                {tab.label}\n                {tab.badge ? <span className={badgeBox}>{tab.badge}</span> : null}\n              </span>\n            ))}\n          </motion.div>\n        </motion.div>\n      </div>\n    </fieldset>\n  );\n}\n"]}

package/dist/tabs.mjs

@@ -0,0 +1,4 @@
+export { Tabs } from './chunk-MJYBPJBA.mjs';
+import './chunk-QAWSH567.mjs';
+//# sourceMappingURL=tabs.mjs.map
+//# sourceMappingURL=tabs.mjs.map

package/dist/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"tabs.mjs"}

package/dist/theme-toggle.d.cts

@@ -0,0 +1,10 @@
+export type ThemeToggleProps = {
+    /** Current theme — drives which icon/label the roll shows. */
+    theme: 'light' | 'dark';
+    /** Flip handler; the parent persists the new theme. */
+    onToggle: () => void;
+    /** Render the labeled row (mobile drawer) instead of the icon-only square. */
+    showLabel?: boolean;
+};
+export declare function ThemeToggle({ theme, onToggle, showLabel }: ThemeToggleProps): import("react").JSX.Element;
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/theme-toggle.d.ts

@@ -0,0 +1,10 @@
+export type ThemeToggleProps = {
+    /** Current theme — drives which icon/label the roll shows. */
+    theme: 'light' | 'dark';
+    /** Flip handler; the parent persists the new theme. */
+    onToggle: () => void;
+    /** Render the labeled row (mobile drawer) instead of the icon-only square. */
+    showLabel?: boolean;
+};
+export declare function ThemeToggle({ theme, onToggle, showLabel }: ThemeToggleProps): import("react").JSX.Element;
+//# sourceMappingURL=theme-toggle.d.ts.map

package/dist/theme-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme-toggle.d.ts","sourceRoot":"","sources":["../../src/components/theme-toggle.tsx"],"names":[],"mappings":"AAgEA,MAAM,MAAM,gBAAgB,GAAG;IAC7B,8DAA8D;IAC9D,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxB,uDAAuD;IACvD,QAAQ,EAAE,MAAM,IAAI,CAAC;IACrB,8EAA8E;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,wBAAgB,WAAW,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,SAAiB,EAAE,EAAE,gBAAgB,+BAwBnF"}

package/dist/theme-toggle.js

@@ -0,0 +1,251 @@
+'use strict';
+
+var framerMotion = require('framer-motion');
+var react = require('react');
+var clsx = require('clsx');
+var tailwindMerge = require('tailwind-merge');
+var jsxRuntime = require('react/jsx-runtime');
+var classVarianceAuthority = require('class-variance-authority');
+
+// src/lib/ease.ts
+var EASE_OUT = [0.16, 1, 0.3, 1];
+var EASE_OUT_CSS = "cubic-bezier(0.16, 1, 0.3, 1)";
+var SPRING_SWAP = { type: "spring", stiffness: 460, damping: 30, mass: 0.55 };
+function cn(...inputs) {
+  return tailwindMerge.twMerge(clsx.clsx(inputs));
+}
+var ROLL_EXIT_TRANSITION = { duration: 0.14, ease: EASE_OUT };
+var ROLL_BLUR = "blur(3px)";
+var AT_REST = { opacity: 1, y: 0, filter: "blur(0px)" };
+var TEXT_VARIANTS = {
+  initial: { opacity: 0, y: "90%", filter: ROLL_BLUR },
+  animate: { opacity: 1, y: "0%", filter: "blur(0px)", transition: SPRING_SWAP },
+  exit: { opacity: 0, y: "-90%", filter: ROLL_BLUR, transition: ROLL_EXIT_TRANSITION }
+};
+var ICON_VARIANTS = {
+  initial: { opacity: 0, y: 12, filter: ROLL_BLUR },
+  animate: { opacity: 1, y: 0, filter: "blur(0px)", transition: SPRING_SWAP },
+  exit: { opacity: 0, y: -12, filter: ROLL_BLUR, transition: ROLL_EXIT_TRANSITION }
+};
+function ActionSwapRollText({ value, children, className }) {
+  const reduce = framerMotion.useReducedMotion() ?? false;
+  const measureRef = react.useRef(null);
+  const [width, setWidth] = react.useState();
+  react.useLayoutEffect(() => {
+    const nextWidth = measureRef.current?.offsetWidth;
+    if (!nextWidth) return;
+    setWidth((current) => current === nextWidth ? current : nextWidth);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "span",
+    {
+      className: cn("relative inline-block overflow-hidden whitespace-nowrap align-bottom", className),
+      style: { width, transition: reduce ? void 0 : `width 220ms ${EASE_OUT_CSS}` },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("span", { ref: measureRef, "aria-hidden": true, className: "invisible inline-block whitespace-nowrap", children }),
+        /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+          framerMotion.motion.span,
+          {
+            variants: TEXT_VARIANTS,
+            initial: reduce ? false : "initial",
+            animate: reduce ? AT_REST : "animate",
+            exit: reduce ? void 0 : "exit",
+            className: "absolute top-0 left-0 inline-block will-change-[opacity,filter,transform]",
+            children
+          },
+          value
+        ) })
+      ]
+    }
+  );
+}
+function ActionSwapRollIcon({ value, children, className }) {
+  const reduce = framerMotion.useReducedMotion() ?? false;
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { className: cn("relative inline-grid shrink-0 place-items-center overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx(framerMotion.AnimatePresence, { mode: "popLayout", initial: false, children: /* @__PURE__ */ jsxRuntime.jsx(
+    framerMotion.motion.span,
+    {
+      "aria-hidden": true,
+      variants: ICON_VARIANTS,
+      initial: reduce ? false : "initial",
+      animate: reduce ? AT_REST : "animate",
+      exit: reduce ? void 0 : "exit",
+      className: "col-start-1 row-start-1 inline-flex items-center justify-center will-change-[opacity,filter,transform]",
+      children
+    },
+    value
+  ) }) });
+}
+var buttonVariants = classVarianceAuthority.cva(
+  "group inline-flex items-center justify-center gap-1.5 font-medium [transition:opacity_.24s_80ms,transform_.15s_cubic-bezier(.4,0,.2,1),box-shadow_.15s_cubic-bezier(.4,0,.2,1),filter_.15s_cubic-bezier(.4,0,.2,1)] disabled:[transition:opacity_.1s]",
+  {
+    variants: {
+      variant: {
+        filled: "bg-(--foreground) text-(--primary-foreground) shadow-elevated-3 hover:opacity-90",
+        bordered: "border border-(--border-hi) bg-surface-3 text-foreground shadow-elevated-3 hover:bg-(--muted)",
+        ghost: "text-(--foreground-secondary) hover:bg-(--surface-hover) hover:text-(--foreground)"
+      },
+      size: {
+        sm: "h-8 px-3.5 text-[15px]",
+        md: "h-9 px-5 text-[17px]",
+        lg: "h-11 px-6 text-[17px]",
+        icon: "size-11"
+      },
+      shape: {
+        rounded: "rounded-interactive",
+        pill: "rounded-full"
+      }
+    },
+    // Pill is the house standard — every CTA is fully rounded.
+    defaultVariants: { variant: "filled", size: "md", shape: "pill" }
+  }
+);
+function Button({
+  variant,
+  size,
+  shape,
+  showArrow = false,
+  external = false,
+  title,
+  actionOrLink,
+  children,
+  className,
+  "aria-label": ariaLabel,
+  "aria-expanded": ariaExpanded
+}) {
+  const buttonClassName = cn(buttonVariants({ variant, size, shape }), className);
+  const arrowSlot = showArrow && /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      viewBox: "0 0 14 14",
+      width: "14",
+      height: "14",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      className: "shrink-0",
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "line",
+          {
+            x1: "0",
+            y1: "7",
+            x2: "9",
+            y2: "7",
+            strokeDasharray: "9",
+            className: "[stroke-dashoffset:9] [transition:stroke-dashoffset_.08s_cubic-bezier(.22,1,.36,1)] group-hover:[stroke-dashoffset:0] group-hover:[transition-duration:.22s]"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M5 3l4 4-4 4",
+            className: "[transform:translateX(0)] [transition:transform_.22s_cubic-bezier(.22,1,.36,1)] group-hover:[transform:translateX(2px)]"
+          }
+        )
+      ]
+    }
+  );
+  if (typeof actionOrLink === "string")
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "a",
+      {
+        href: actionOrLink,
+        className: cn(buttonClassName, "no-underline"),
+        "aria-label": ariaLabel,
+        title,
+        ...external ? { target: "_blank", rel: "noopener noreferrer" } : {},
+        children: [
+          children,
+          arrowSlot
+        ]
+      }
+    );
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      type: "button",
+      className: buttonClassName,
+      onClick: actionOrLink,
+      "aria-label": ariaLabel,
+      "aria-expanded": ariaExpanded,
+      title,
+      children: [
+        children,
+        arrowSlot
+      ]
+    }
+  );
+}
+var ICON_LAYOUT = "w-8 p-0";
+var LABELED_LAYOUT = "gap-2 px-3 text-[13px]";
+function SunIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 14,
+      height: 14,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "3", x2: "12", y2: "1" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "12", y1: "23", x2: "12", y2: "21" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "3", y1: "12", x2: "1", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "23", y1: "12", x2: "21", y2: "12" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "5", y1: "5", x2: "3.5", y2: "3.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "20.5", y1: "20.5", x2: "19", y2: "19" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "19", y1: "5", x2: "20.5", y2: "3.5" }),
+        /* @__PURE__ */ jsxRuntime.jsx("line", { x1: "4.5", y1: "20.5", x2: "3", y2: "19" })
+      ]
+    }
+  );
+}
+function MoonIcon() {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: 14,
+      height: 14,
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: 2,
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": true,
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M21 12.8A9 9 0 1 1 11.2 3 7 7 0 0 0 21 12.8z" })
+    }
+  );
+}
+function ThemeToggle({ theme, onToggle, showLabel = false }) {
+  const size = showLabel ? "md" : "sm";
+  const layoutClassName = showLabel ? LABELED_LAYOUT : ICON_LAYOUT;
+  const isDark = theme === "dark";
+  const label = isDark ? "Switch to light mode" : "Switch to dark mode";
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    Button,
+    {
+      variant: "filled",
+      size,
+      actionOrLink: onToggle,
+      className: layoutClassName,
+      "aria-label": label,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(ActionSwapRollIcon, { value: theme, className: "h-4 w-4", children: isDark ? /* @__PURE__ */ jsxRuntime.jsx(SunIcon, {}) : /* @__PURE__ */ jsxRuntime.jsx(MoonIcon, {}) }),
+        showLabel ? /* @__PURE__ */ jsxRuntime.jsx(ActionSwapRollText, { value: theme, children: label }) : null
+      ]
+    }
+  );
+}
+
+exports.ThemeToggle = ThemeToggle;
+//# sourceMappingURL=theme-toggle.js.map
+//# sourceMappingURL=theme-toggle.js.map