@refraction-ui/react 0.19.1 → 0.20.0

package/dist/react-mascot.js

@@ -0,0 +1,367 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-mascot/dist/index.js
+import * as React from "react";
+
+// ../mascot/dist/index.js
+function getMascotMoodStyles(mood) {
+  switch (mood) {
+    case "happy":
+      return {
+        "--rfr-mascot-shell": "var(--primary, 138 60% 51%)",
+        "--rfr-mascot-shell-rim": "var(--primary-700, 138 58% 36%)",
+        "--rfr-mascot-belly": "var(--primary-200, 138 60% 83%)",
+        "--rfr-mascot-skin": "var(--primary-400, 138 59% 63%)",
+        "--rfr-mascot-skin-d": "var(--primary-600, 138 58% 43%)",
+        "--rfr-mascot-scute": "var(--sunshine, 42 100% 62%)",
+        "--rfr-mascot-scute-alt": "var(--primary-300, 138 59% 74%)",
+        "--rfr-mascot-cheek": "var(--accent-solid, 26 100% 67%)"
+      };
+    case "think":
+      return {
+        // Indigo / purple tones
+        "--rfr-mascot-shell": "250 65% 55%",
+        "--rfr-mascot-shell-rim": "250 65% 40%",
+        "--rfr-mascot-belly": "250 65% 85%",
+        "--rfr-mascot-skin": "250 65% 72%",
+        "--rfr-mascot-skin-d": "250 65% 62%",
+        "--rfr-mascot-scute": "280 65% 60%",
+        "--rfr-mascot-scute-alt": "280 65% 50%",
+        "--rfr-mascot-cheek": "320 80% 65%"
+      };
+    case "wave":
+      return {
+        // Orange / warm tones
+        "--rfr-mascot-shell": "24 85% 50%",
+        "--rfr-mascot-shell-rim": "24 85% 40%",
+        "--rfr-mascot-belly": "24 85% 85%",
+        "--rfr-mascot-skin": "24 85% 68%",
+        "--rfr-mascot-skin-d": "24 85% 58%",
+        "--rfr-mascot-scute": "160 60% 45%",
+        "--rfr-mascot-scute-alt": "160 60% 35%",
+        "--rfr-mascot-cheek": "15 90% 65%"
+      };
+  }
+}
+function startMascotBlinkInterval(onBlinkChange, intervalMs = 4e3, durationMs = 150) {
+  const timer = setInterval(() => {
+    onBlinkChange(true);
+    setTimeout(() => {
+      onBlinkChange(false);
+    }, durationMs);
+  }, intervalMs);
+  return () => {
+    clearInterval(timer);
+  };
+}
+function createMascot(props = {}) {
+  const { mood = "happy", animation = "none", size = "md", animate = true } = props;
+  const ariaProps = {
+    role: "img",
+    "aria-label": `Tobi the Tortoise feeling ${mood}`
+  };
+  const dataAttributes = {
+    "data-slot": "mascot",
+    "data-mood": mood,
+    "data-animation": animation,
+    "data-size": size,
+    "data-animate": animate ? "true" : "false"
+  };
+  return {
+    ariaProps,
+    dataAttributes,
+    state: {
+      mood,
+      animation,
+      size,
+      animate
+    },
+    style: getMascotMoodStyles(mood)
+  };
+}
+var mascotVariants = cva({
+  base: "inline-block select-none transition-all duration-300",
+  variants: {
+    size: {
+      sm: "w-24 h-auto",
+      md: "w-36 h-auto",
+      lg: "w-48 h-auto",
+      xl: "w-64 h-auto"
+    },
+    animation: {
+      none: "",
+      bounce: "motion-safe:animate-bounce",
+      float: "rfr-mascot-float"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    animation: "none"
+  }
+});
+
+// ../react-mascot/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var Mascot = React.forwardRef(
+  function Mascot2({
+    mood = "happy",
+    animation = "none",
+    size = "md",
+    animate = true,
+    animateBobbing,
+    animateBlinking,
+    animateSprout,
+    className,
+    style,
+    ...props
+  }, ref) {
+    const [isBlinking, setIsBlinking] = React.useState(false);
+    const shouldBob = animateBobbing ?? animate;
+    const shouldSway = animateSprout ?? animate;
+    const shouldBlink = animateBlinking ?? animate;
+    React.useEffect(() => {
+      if (!shouldBlink) {
+        setIsBlinking(false);
+        return;
+      }
+      const cleanup = startMascotBlinkInterval(setIsBlinking);
+      return cleanup;
+    }, [shouldBlink]);
+    const api = createMascot({ mood, animation, size, animate });
+    const combinedStyle = {
+      ...api.style,
+      ...style
+    };
+    return /* @__PURE__ */ jsxs(
+      "svg",
+      {
+        ref,
+        className: cn("mascot", mascotVariants({ size, animation }), className),
+        viewBox: "0 0 340 300",
+        xmlns: "http://www.w3.org/2000/svg",
+        style: combinedStyle,
+        ...api.ariaProps,
+        ...api.dataAttributes,
+        "data-blinking": isBlinking ? "true" : "false",
+        "data-bobbing": shouldBob ? "true" : "false",
+        "data-sprout": shouldSway ? "true" : "false",
+        "data-waving": animate ? "true" : "false",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx("style", { children: `
+              /* Base styles and fallback HSL values */
+              svg.mascot {
+                --primary: 138 60% 51%;
+                --primary-200: 138 60% 83%;
+                --primary-300: 138 59% 74%;
+                --primary-400: 138 59% 63%;
+                --primary-600: 138 58% 43%;
+                --primary-700: 138 58% 36%;
+                --primary-800: 138 58% 29%;
+                --primary-900: 138 58% 22%;
+                --primary-950: 139 59% 16%;
+                --sunshine: 42 100% 62%;
+                --accent-solid: 26 100% 67%;
+
+                fill: none;
+                stroke-linecap: round;
+                stroke-linejoin: round;
+              }
+
+              /* Mapping elements to tokens */
+              svg.mascot .shadow {
+                fill: hsl(var(--primary-900) / 0.15);
+              }
+              svg.mascot .stem {
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 3px;
+                fill: none;
+              }
+              svg.mascot .leaf {
+                fill: hsl(var(--rfr-mascot-leaf, var(--primary-400)));
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 3px;
+              }
+              svg.mascot .skin-d {
+                fill: hsl(var(--rfr-mascot-skin-d, var(--primary-400)));
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 3px;
+              }
+              svg.mascot .skin {
+                fill: hsl(var(--rfr-mascot-skin, var(--primary-300)));
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 3px;
+              }
+              svg.mascot .shell-rim {
+                fill: hsl(var(--rfr-mascot-shell-rim, var(--primary-800)));
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 3px;
+              }
+              svg.mascot .shell {
+                fill: hsl(var(--rfr-mascot-shell, var(--primary-600)));
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 3px;
+              }
+              svg.mascot .belly {
+                fill: hsl(var(--rfr-mascot-belly, var(--primary-200)));
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 3px;
+              }
+              svg.mascot .scute {
+                fill: hsl(var(--rfr-mascot-scute, var(--primary-700)));
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 2.5px;
+              }
+              svg.mascot .scute.alt {
+                fill: hsl(var(--rfr-mascot-scute-alt, var(--primary-800)));
+              }
+              svg.mascot .ln {
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 3px;
+                fill: none;
+              }
+              svg.mascot .eye-w {
+                fill: #ffffff;
+                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+                stroke-width: 3px;
+              }
+              svg.mascot .pupil {
+                fill: hsl(var(--rfr-mascot-stroke, var(--primary-950)));
+              }
+              svg.mascot .glint {
+                fill: #ffffff;
+              }
+              svg.mascot .cheek {
+                fill: hsl(var(--rfr-mascot-cheek, var(--accent-solid)));
+              }
+
+              /* Float Animation keyframes */
+              @keyframes rfrMascotFloat {
+                0%, 100% {
+                  transform: translateY(0);
+                }
+                50% {
+                  transform: translateY(-8px);
+                }
+              }
+
+              /* Sway/antenna animation keyframes */
+              @keyframes rfrMascotSway {
+                0%, 100% {
+                  transform: rotate(0deg);
+                }
+                50% {
+                  transform: rotate(4deg);
+                }
+              }
+
+              /* Waving animation keyframes */
+              @keyframes rfrMascotWave {
+                0%, 100% {
+                  transform: rotate(0deg);
+                }
+                50% {
+                  transform: rotate(-18deg);
+                }
+              }
+
+              /* Bounce animation keyframes */
+              @keyframes rfrMascotBounce {
+                0%, 100% {
+                  transform: translateY(0) scaleY(1);
+                }
+                50% {
+                  transform: translateY(-16px) scaleY(0.96);
+                }
+              }
+
+              /* Animation hook connections */
+              .rfr-mascot-float[data-bobbing="true"] .m-bob {
+                animation: rfrMascotFloat 3s ease-in-out infinite;
+              }
+              .rfr-mascot-float[data-sprout="true"] .m-sprout {
+                animation: rfrMascotSway 3s ease-in-out infinite;
+                transform-origin: 158px 92px;
+              }
+              .rfr-mascot-float[data-waving="true"] .m-wave {
+                animation: rfrMascotWave 1.2s ease-in-out infinite;
+                transform-origin: 250px 120px;
+              }
+
+              .motion-safe\\:animate-bounce[data-bobbing="true"] .m-bob {
+                animation: rfrMascotBounce 1.2s ease-in-out infinite;
+              }
+              .motion-safe\\:animate-bounce[data-sprout="true"] .m-sprout {
+                animation: rfrMascotSway 1.2s ease-in-out infinite;
+                transform-origin: 158px 92px;
+              }
+
+              /* Stationary wave arm if not floating */
+              .mascot:not(.rfr-mascot-float)[data-waving="true"] .m-wave {
+                animation: rfrMascotWave 1.2s ease-in-out infinite;
+                transform-origin: 250px 120px;
+              }
+            ` }) }),
+          /* @__PURE__ */ jsx("ellipse", { className: "shadow", cx: "166", cy: "280", rx: "116", ry: "16" }),
+          /* @__PURE__ */ jsxs("g", { className: "m-bob", children: [
+            /* @__PURE__ */ jsxs("g", { className: "m-sprout", children: [
+              /* @__PURE__ */ jsx("path", { className: "stem", d: "M158 92 C158 70 158 58 158 44" }),
+              /* @__PURE__ */ jsx("path", { className: "leaf", d: "M158 56 C140 50 126 58 128 74 C146 76 158 70 158 56 Z" }),
+              /* @__PURE__ */ jsx("path", { className: "leaf", d: "M158 50 C176 42 192 50 190 66 C172 70 158 64 158 50 Z" })
+            ] }),
+            /* @__PURE__ */ jsx("ellipse", { className: "skin-d", cx: "96", cy: "222", rx: "27", ry: "32" }),
+            /* @__PURE__ */ jsx("ellipse", { className: "skin-d", cx: "214", cy: "224", rx: "27", ry: "32" }),
+            /* @__PURE__ */ jsx("path", { className: "skin-d", d: "M58 176 C40 178 28 190 26 204 C44 206 60 196 66 182 Z" }),
+            /* @__PURE__ */ jsx("path", { className: "shell-rim", d: "M36 196 C30 86 92 70 162 70 C232 70 294 86 288 196 C288 210 252 220 162 220 C72 220 36 210 36 196 Z" }),
+            /* @__PURE__ */ jsx("path", { className: "shell", d: "M44 190 C40 92 96 78 162 78 C228 78 284 92 280 190 C280 200 246 206 162 206 C78 206 44 200 44 190 Z" }),
+            /* @__PURE__ */ jsx("path", { className: "belly", d: "M50 192 C92 206 232 206 274 192 C274 202 240 210 162 210 C84 210 50 202 50 192 Z" }),
+            /* @__PURE__ */ jsx("polygon", { className: "scute", points: "162,86 190,102 190,134 162,150 134,134 134,102" }),
+            /* @__PURE__ */ jsx("polygon", { className: "scute alt", points: "162,150 186,162 186,184 162,196 138,184 138,162" }),
+            /* @__PURE__ */ jsx("polygon", { className: "scute alt", points: "104,108 126,120 126,148 104,160 82,148 82,120" }),
+            /* @__PURE__ */ jsx("polygon", { className: "scute alt", points: "220,108 242,120 242,148 220,160 198,148 198,120" }),
+            /* @__PURE__ */ jsx("polygon", { className: "scute", points: "108,162 126,172 126,190 108,200 90,190 90,172" }),
+            /* @__PURE__ */ jsx("polygon", { className: "scute", points: "216,162 234,172 234,190 216,200 198,190 198,172" }),
+            /* @__PURE__ */ jsx("ellipse", { className: "skin", cx: "116", cy: "232", rx: "25", ry: "31" }),
+            mood !== "wave" && /* @__PURE__ */ jsx("ellipse", { className: "skin", cx: "236", cy: "234", rx: "25", ry: "31" }),
+            /* @__PURE__ */ jsx("path", { className: "ln", d: mood === "wave" ? "M104 250 H128" : "M104 250 H128 M224 252 H248", opacity: 0.4 }),
+            mood === "wave" && /* @__PURE__ */ jsxs("g", { className: "m-wave", children: [
+              /* @__PURE__ */ jsx("ellipse", { className: "skin", cx: "250", cy: "120", rx: "15", ry: "22" }),
+              /* @__PURE__ */ jsx("path", { className: "ln", d: "M244 104 Q250 96 256 104", opacity: 0.4 })
+            ] }),
+            /* @__PURE__ */ jsx("path", { className: "skin", d: "M262 150 C276 142 296 142 310 150 L312 176 C300 188 274 188 262 178 Z" }),
+            /* @__PURE__ */ jsx("ellipse", { className: "skin", cx: "296", cy: "156", rx: "40", ry: "36" }),
+            /* @__PURE__ */ jsx("ellipse", { className: "cheek", cx: "280", cy: "174", rx: "11", ry: "8" }),
+            isBlinking ? /* @__PURE__ */ jsxs("g", { className: "mascot-face-blinking", children: [
+              /* @__PURE__ */ jsx("path", { className: "ln", d: "M275 150 C280 155 292 155 297 150" }),
+              /* @__PURE__ */ jsx("path", { className: "ln", d: "M304 152 C309 157 319 157 324 152" }),
+              mood === "think" ? /* @__PURE__ */ jsx("path", { className: "ln", d: "M280 174 Q290 169 298 175" }) : /* @__PURE__ */ jsx("path", { className: "ln", d: "M286 172 C294 180 306 180 314 171" })
+            ] }) : mood === "think" ? /* @__PURE__ */ jsxs("g", { className: "mascot-face-think", children: [
+              /* @__PURE__ */ jsx("ellipse", { className: "eye-w", cx: "286", cy: "150", rx: "11", ry: "13" }),
+              /* @__PURE__ */ jsx("ellipse", { className: "eye-w", cx: "314", cy: "152", rx: "10", ry: "12" }),
+              /* @__PURE__ */ jsx("circle", { className: "pupil", cx: "288", cy: "146", r: 5.5 }),
+              /* @__PURE__ */ jsx("circle", { className: "pupil", cx: "315", cy: "148", r: 5 }),
+              /* @__PURE__ */ jsx("circle", { className: "glint", cx: "290", cy: "143", r: 1.9 }),
+              /* @__PURE__ */ jsx("circle", { className: "glint", cx: "317", cy: "145", r: 1.7 }),
+              /* @__PURE__ */ jsx("path", { className: "ln", d: "M280 174 Q290 169 298 175" })
+            ] }) : /* @__PURE__ */ jsxs("g", { className: "mascot-face-happy", children: [
+              /* @__PURE__ */ jsx("ellipse", { className: "eye-w", cx: "286", cy: "150", rx: "11", ry: "13" }),
+              /* @__PURE__ */ jsx("ellipse", { className: "eye-w", cx: "314", cy: "152", rx: "10", ry: "12" }),
+              /* @__PURE__ */ jsx("circle", { className: "pupil", cx: "289", cy: "152", r: 5.5 }),
+              /* @__PURE__ */ jsx("circle", { className: "pupil", cx: "316", cy: "154", r: 5 }),
+              /* @__PURE__ */ jsx("circle", { className: "glint", cx: "291", cy: "149", r: 1.9 }),
+              /* @__PURE__ */ jsx("circle", { className: "glint", cx: "318", cy: "151", r: 1.7 }),
+              /* @__PURE__ */ jsx("path", { className: "ln", d: "M286 172 C294 180 306 180 314 171" })
+            ] })
+          ] })
+        ]
+      }
+    );
+  }
+);
+export {
+  Mascot
+};
+//# sourceMappingURL=react-mascot.js.map

package/dist/react-mascot.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../mascot/src/mascot.ts", "../../mascot/src/mascot.styles.ts", "../../react-mascot/src/mascot.tsx"],
+  "sourcesContent": ["import type { AccessibilityProps } from '@refraction-ui/shared'\n\nexport type MascotMood = 'happy' | 'think' | 'wave'\nexport type MascotAnimation = 'none' | 'bounce' | 'float'\nexport type MascotSize = 'sm' | 'md' | 'lg' | 'xl'\n\nexport interface MascotProps {\n  mood?: MascotMood\n  animation?: MascotAnimation\n  size?: MascotSize\n  animate?: boolean\n}\n\nexport interface MascotAPI {\n  /** ARIA attributes to spread on the root element */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for CSS styling hooks and states */\n  dataAttributes: Record<string, string>\n  /** Active mascot state configuration */\n  state: {\n    mood: MascotMood\n    animation: MascotAnimation\n    size: MascotSize\n    animate: boolean\n  }\n  /** Mood styles mapping moods to CSS custom properties */\n  style: Record<string, string>\n}\n\n/**\n * Maps mascot moods ('happy', 'think', 'wave') to CSS custom properties (variables).\n */\nexport function getMascotMoodStyles(mood: MascotMood): Record<string, string> {\n  switch (mood) {\n    case 'happy':\n      return {\n        '--rfr-mascot-shell': 'var(--primary, 138 60% 51%)',\n        '--rfr-mascot-shell-rim': 'var(--primary-700, 138 58% 36%)',\n        '--rfr-mascot-belly': 'var(--primary-200, 138 60% 83%)',\n        '--rfr-mascot-skin': 'var(--primary-400, 138 59% 63%)',\n        '--rfr-mascot-skin-d': 'var(--primary-600, 138 58% 43%)',\n        '--rfr-mascot-scute': 'var(--sunshine, 42 100% 62%)',\n        '--rfr-mascot-scute-alt': 'var(--primary-300, 138 59% 74%)',\n        '--rfr-mascot-cheek': 'var(--accent-solid, 26 100% 67%)',\n      }\n    case 'think':\n      return {\n        // Indigo / purple tones\n        '--rfr-mascot-shell': '250 65% 55%',\n        '--rfr-mascot-shell-rim': '250 65% 40%',\n        '--rfr-mascot-belly': '250 65% 85%',\n        '--rfr-mascot-skin': '250 65% 72%',\n        '--rfr-mascot-skin-d': '250 65% 62%',\n        '--rfr-mascot-scute': '280 65% 60%',\n        '--rfr-mascot-scute-alt': '280 65% 50%',\n        '--rfr-mascot-cheek': '320 80% 65%',\n      }\n    case 'wave':\n      return {\n        // Orange / warm tones\n        '--rfr-mascot-shell': '24 85% 50%',\n        '--rfr-mascot-shell-rim': '24 85% 40%',\n        '--rfr-mascot-belly': '24 85% 85%',\n        '--rfr-mascot-skin': '24 85% 68%',\n        '--rfr-mascot-skin-d': '24 85% 58%',\n        '--rfr-mascot-scute': '160 60% 45%',\n        '--rfr-mascot-scute-alt': '160 60% 35%',\n        '--rfr-mascot-cheek': '15 90% 65%',\n      }\n  }\n}\n\n/**\n * Creates a cleanup-enabled interval timer for Tobi's blinking state.\n * Blinks for 150ms every 4000ms.\n */\nexport function startMascotBlinkInterval(\n  onBlinkChange: (isBlinking: boolean) => void,\n  intervalMs = 4000,\n  durationMs = 150,\n): () => void {\n  const timer = setInterval(() => {\n    onBlinkChange(true)\n    setTimeout(() => {\n      onBlinkChange(false)\n    }, durationMs)\n  }, intervalMs)\n\n  return () => {\n    clearInterval(timer)\n  }\n}\n\nexport function createMascot(props: MascotProps = {}): MascotAPI {\n  const { mood = 'happy', animation = 'none', size = 'md', animate = true } = props\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'img',\n    'aria-label': `Tobi the Tortoise feeling ${mood}`,\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-slot': 'mascot',\n    'data-mood': mood,\n    'data-animation': animation,\n    'data-size': size,\n    'data-animate': animate ? 'true' : 'false',\n  }\n\n  return {\n    ariaProps,\n    dataAttributes,\n    state: {\n      mood,\n      animation,\n      size,\n      animate,\n    },\n    style: getMascotMoodStyles(mood),\n  }\n}\n", "import { cva } from '@refraction-ui/shared'\nimport type { TokenContract } from '@refraction-ui/shared'\n\nexport const mascotTokens: TokenContract = {\n  name: 'mascot',\n  tokens: {\n    primary: { variable: '--rfr-mascot-primary', fallback: '138 60% 51%' },\n    secondary: { variable: '--rfr-mascot-secondary', fallback: '138 60% 83%' },\n    accent: { variable: '--rfr-mascot-accent', fallback: '26 100% 67%' },\n    stroke: { variable: '--rfr-mascot-stroke', fallback: '139 59% 16%' },\n  },\n}\n\nexport const mascotVariants = cva({\n  base: 'inline-block select-none transition-all duration-300',\n  variants: {\n    size: {\n      sm: 'w-24 h-auto',\n      md: 'w-36 h-auto',\n      lg: 'w-48 h-auto',\n      xl: 'w-64 h-auto',\n    },\n    animation: {\n      none: '',\n      bounce: 'motion-safe:animate-bounce',\n      float: 'rfr-mascot-float',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n    animation: 'none',\n  },\n})\n", "import * as React from 'react'\nimport {\n  createMascot,\n  startMascotBlinkInterval,\n  mascotVariants,\n  type MascotMood,\n  type MascotAnimation,\n  type MascotSize,\n} from '@refraction-ui/mascot'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { MascotMood, MascotAnimation, MascotSize }\n\nexport interface MascotProps extends Omit<React.SVGProps<SVGSVGElement>, 'size'> {\n  /** The mood of the mascot. Defaults to 'happy'. */\n  mood?: MascotMood\n  /** The active animation style. Defaults to 'none'. */\n  animation?: MascotAnimation\n  /** The size class of the mascot. Defaults to 'md'. */\n  size?: MascotSize\n  /** Master switch for all animations. Defaults to true. */\n  animate?: boolean\n  /** Whether the bobbing animation is enabled. Defaults to null, falling back to animate. */\n  animateBobbing?: boolean\n  /** Whether the blinking timer animation is enabled. Defaults to null, falling back to animate. */\n  animateBlinking?: boolean\n  /** Whether the sprout swaying animation is enabled. Defaults to null, falling back to animate. */\n  animateSprout?: boolean\n}\n\n/**\n * Mascot component displaying Tobi the tortoise.\n *\n * Supports three moods ('happy', 'think', and 'wave') and toggleable animations\n * (breathing bobbing, blinking timers, sprout swaying).\n * States and theme styling are driven by the headless core `@refraction-ui/mascot`.\n */\nexport const Mascot = React.forwardRef<SVGSVGElement, MascotProps>(\n  function Mascot(\n    {\n      mood = 'happy',\n      animation = 'none',\n      size = 'md',\n      animate = true,\n      animateBobbing,\n      animateBlinking,\n      animateSprout,\n      className,\n      style,\n      ...props\n    },\n    ref,\n  ) {\n    const [isBlinking, setIsBlinking] = React.useState(false)\n\n    const shouldBob = animateBobbing ?? animate\n    const shouldSway = animateSprout ?? animate\n    const shouldBlink = animateBlinking ?? animate\n\n    React.useEffect(() => {\n      if (!shouldBlink) {\n        setIsBlinking(false)\n        return\n      }\n      const cleanup = startMascotBlinkInterval(setIsBlinking)\n      return cleanup\n    }, [shouldBlink])\n\n    const api = createMascot({ mood, animation, size, animate })\n\n    // Merge core mood variables with user styles\n    const combinedStyle: React.CSSProperties = {\n      ...api.style,\n      ...style,\n    }\n\n    return (\n      <svg\n        ref={ref}\n        className={cn('mascot', mascotVariants({ size, animation }), className)}\n        viewBox=\"0 0 340 300\"\n        xmlns=\"http://www.w3.org/2000/svg\"\n        style={combinedStyle}\n        {...api.ariaProps}\n        {...api.dataAttributes}\n        data-blinking={isBlinking ? 'true' : 'false'}\n        data-bobbing={shouldBob ? 'true' : 'false'}\n        data-sprout={shouldSway ? 'true' : 'false'}\n        data-waving={animate ? 'true' : 'false'}\n        {...props}\n      >\n        <defs>\n          <style>\n            {`\n              /* Base styles and fallback HSL values */\n              svg.mascot {\n                --primary: 138 60% 51%;\n                --primary-200: 138 60% 83%;\n                --primary-300: 138 59% 74%;\n                --primary-400: 138 59% 63%;\n                --primary-600: 138 58% 43%;\n                --primary-700: 138 58% 36%;\n                --primary-800: 138 58% 29%;\n                --primary-900: 138 58% 22%;\n                --primary-950: 139 59% 16%;\n                --sunshine: 42 100% 62%;\n                --accent-solid: 26 100% 67%;\n\n                fill: none;\n                stroke-linecap: round;\n                stroke-linejoin: round;\n              }\n\n              /* Mapping elements to tokens */\n              svg.mascot .shadow {\n                fill: hsl(var(--primary-900) / 0.15);\n              }\n              svg.mascot .stem {\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 3px;\n                fill: none;\n              }\n              svg.mascot .leaf {\n                fill: hsl(var(--rfr-mascot-leaf, var(--primary-400)));\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 3px;\n              }\n              svg.mascot .skin-d {\n                fill: hsl(var(--rfr-mascot-skin-d, var(--primary-400)));\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 3px;\n              }\n              svg.mascot .skin {\n                fill: hsl(var(--rfr-mascot-skin, var(--primary-300)));\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 3px;\n              }\n              svg.mascot .shell-rim {\n                fill: hsl(var(--rfr-mascot-shell-rim, var(--primary-800)));\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 3px;\n              }\n              svg.mascot .shell {\n                fill: hsl(var(--rfr-mascot-shell, var(--primary-600)));\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 3px;\n              }\n              svg.mascot .belly {\n                fill: hsl(var(--rfr-mascot-belly, var(--primary-200)));\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 3px;\n              }\n              svg.mascot .scute {\n                fill: hsl(var(--rfr-mascot-scute, var(--primary-700)));\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 2.5px;\n              }\n              svg.mascot .scute.alt {\n                fill: hsl(var(--rfr-mascot-scute-alt, var(--primary-800)));\n              }\n              svg.mascot .ln {\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 3px;\n                fill: none;\n              }\n              svg.mascot .eye-w {\n                fill: #ffffff;\n                stroke: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n                stroke-width: 3px;\n              }\n              svg.mascot .pupil {\n                fill: hsl(var(--rfr-mascot-stroke, var(--primary-950)));\n              }\n              svg.mascot .glint {\n                fill: #ffffff;\n              }\n              svg.mascot .cheek {\n                fill: hsl(var(--rfr-mascot-cheek, var(--accent-solid)));\n              }\n\n              /* Float Animation keyframes */\n              @keyframes rfrMascotFloat {\n                0%, 100% {\n                  transform: translateY(0);\n                }\n                50% {\n                  transform: translateY(-8px);\n                }\n              }\n\n              /* Sway/antenna animation keyframes */\n              @keyframes rfrMascotSway {\n                0%, 100% {\n                  transform: rotate(0deg);\n                }\n                50% {\n                  transform: rotate(4deg);\n                }\n              }\n\n              /* Waving animation keyframes */\n              @keyframes rfrMascotWave {\n                0%, 100% {\n                  transform: rotate(0deg);\n                }\n                50% {\n                  transform: rotate(-18deg);\n                }\n              }\n\n              /* Bounce animation keyframes */\n              @keyframes rfrMascotBounce {\n                0%, 100% {\n                  transform: translateY(0) scaleY(1);\n                }\n                50% {\n                  transform: translateY(-16px) scaleY(0.96);\n                }\n              }\n\n              /* Animation hook connections */\n              .rfr-mascot-float[data-bobbing=\"true\"] .m-bob {\n                animation: rfrMascotFloat 3s ease-in-out infinite;\n              }\n              .rfr-mascot-float[data-sprout=\"true\"] .m-sprout {\n                animation: rfrMascotSway 3s ease-in-out infinite;\n                transform-origin: 158px 92px;\n              }\n              .rfr-mascot-float[data-waving=\"true\"] .m-wave {\n                animation: rfrMascotWave 1.2s ease-in-out infinite;\n                transform-origin: 250px 120px;\n              }\n\n              .motion-safe\\\\:animate-bounce[data-bobbing=\"true\"] .m-bob {\n                animation: rfrMascotBounce 1.2s ease-in-out infinite;\n              }\n              .motion-safe\\\\:animate-bounce[data-sprout=\"true\"] .m-sprout {\n                animation: rfrMascotSway 1.2s ease-in-out infinite;\n                transform-origin: 158px 92px;\n              }\n\n              /* Stationary wave arm if not floating */\n              .mascot:not(.rfr-mascot-float)[data-waving=\"true\"] .m-wave {\n                animation: rfrMascotWave 1.2s ease-in-out infinite;\n                transform-origin: 250px 120px;\n              }\n            `}\n          </style>\n        </defs>\n\n        {/* Flat Shadow at the base */}\n        <ellipse className=\"shadow\" cx=\"166\" cy=\"280\" rx=\"116\" ry=\"16\" />\n\n        {/* Main Bobbing Group */}\n        <g className=\"m-bob\">\n          {/* Head Sprout */}\n          <g className=\"m-sprout\">\n            <path className=\"stem\" d=\"M158 92 C158 70 158 58 158 44\" />\n            <path className=\"leaf\" d=\"M158 56 C140 50 126 58 128 74 C146 76 158 70 158 56 Z\" />\n            <path className=\"leaf\" d=\"M158 50 C176 42 192 50 190 66 C172 70 158 64 158 50 Z\" />\n          </g>\n\n          {/* Back Legs & Tail (Rendered behind body) */}\n          <ellipse className=\"skin-d\" cx=\"96\" cy=\"222\" rx=\"27\" ry=\"32\" />\n          <ellipse className=\"skin-d\" cx=\"214\" cy=\"224\" rx=\"27\" ry=\"32\" />\n          <path className=\"skin-d\" d=\"M58 176 C40 178 28 190 26 204 C44 206 60 196 66 182 Z\" />\n\n          {/* Shell Rim */}\n          <path className=\"shell-rim\" d=\"M36 196 C30 86 92 70 162 70 C232 70 294 86 288 196 C288 210 252 220 162 220 C72 220 36 210 36 196 Z\" />\n\n          {/* Main Shell */}\n          <path className=\"shell\" d=\"M44 190 C40 92 96 78 162 78 C228 78 284 92 280 190 C280 200 246 206 162 206 C78 206 44 200 44 190 Z\" />\n\n          {/* Underbelly */}\n          <path className=\"belly\" d=\"M50 192 C92 206 232 206 274 192 C274 202 240 210 162 210 C84 210 50 202 50 192 Z\" />\n\n          {/* Shell Scutes (Plates) */}\n          <polygon className=\"scute\" points=\"162,86 190,102 190,134 162,150 134,134 134,102\" />\n          <polygon className=\"scute alt\" points=\"162,150 186,162 186,184 162,196 138,184 138,162\" />\n          <polygon className=\"scute alt\" points=\"104,108 126,120 126,148 104,160 82,148 82,120\" />\n          <polygon className=\"scute alt\" points=\"220,108 242,120 242,148 220,160 198,148 198,120\" />\n          <polygon className=\"scute\" points=\"108,162 126,172 126,190 108,200 90,190 90,172\" />\n          <polygon className=\"scute\" points=\"216,162 234,172 234,190 216,200 198,190 198,172\" />\n\n          {/* Front Legs */}\n          <ellipse className=\"skin\" cx=\"116\" cy=\"232\" rx=\"25\" ry=\"31\" />\n          {mood !== 'wave' && (\n            <ellipse className=\"skin\" cx=\"236\" cy=\"234\" rx=\"25\" ry=\"31\" />\n          )}\n          <path className=\"ln\" d={mood === 'wave' ? 'M104 250 H128' : 'M104 250 H128 M224 252 H248'} opacity={0.4} />\n\n          {/* Waving Arm (Conditional or animated) */}\n          {mood === 'wave' && (\n            <g className=\"m-wave\">\n              <ellipse className=\"skin\" cx=\"250\" cy=\"120\" rx=\"15\" ry=\"22\" />\n              <path className=\"ln\" d=\"M244 104 Q250 96 256 104\" opacity={0.4} />\n            </g>\n          )}\n\n          {/* Head, Neck, Blush */}\n          <path className=\"skin\" d=\"M262 150 C276 142 296 142 310 150 L312 176 C300 188 274 188 262 178 Z\" />\n          <ellipse className=\"skin\" cx=\"296\" cy=\"156\" rx=\"40\" ry=\"36\" />\n          <ellipse className=\"cheek\" cx=\"280\" cy=\"174\" rx=\"11\" ry=\"8\" />\n\n          {/* Facial Features (Eyes and Mouth) */}\n          {isBlinking ? (\n            <g className=\"mascot-face-blinking\">\n              <path className=\"ln\" d=\"M275 150 C280 155 292 155 297 150\" />\n              <path className=\"ln\" d=\"M304 152 C309 157 319 157 324 152\" />\n              {mood === 'think' ? (\n                <path className=\"ln\" d=\"M280 174 Q290 169 298 175\" />\n              ) : (\n                <path className=\"ln\" d=\"M286 172 C294 180 306 180 314 171\" />\n              )}\n            </g>\n          ) : mood === 'think' ? (\n            <g className=\"mascot-face-think\">\n              <ellipse className=\"eye-w\" cx=\"286\" cy=\"150\" rx=\"11\" ry=\"13\" />\n              <ellipse className=\"eye-w\" cx=\"314\" cy=\"152\" rx=\"10\" ry=\"12\" />\n              <circle className=\"pupil\" cx=\"288\" cy=\"146\" r={5.5} />\n              <circle className=\"pupil\" cx=\"315\" cy=\"148\" r={5} />\n              <circle className=\"glint\" cx=\"290\" cy=\"143\" r={1.9} />\n              <circle className=\"glint\" cx=\"317\" cy=\"145\" r={1.7} />\n              <path className=\"ln\" d=\"M280 174 Q290 169 298 175\" />\n            </g>\n          ) : (\n            <g className=\"mascot-face-happy\">\n              <ellipse className=\"eye-w\" cx=\"286\" cy=\"150\" rx=\"11\" ry=\"13\" />\n              <ellipse className=\"eye-w\" cx=\"314\" cy=\"152\" rx=\"10\" ry=\"12\" />\n              <circle className=\"pupil\" cx=\"289\" cy=\"152\" r={5.5} />\n              <circle className=\"pupil\" cx=\"316\" cy=\"154\" r={5} />\n              <circle className=\"glint\" cx=\"291\" cy=\"149\" r={1.9} />\n              <circle className=\"glint\" cx=\"318\" cy=\"151\" r={1.7} />\n              <path className=\"ln\" d=\"M286 172 C294 180 306 180 314 171\" />\n            </g>\n          )}\n        </g>\n      </svg>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AAgCO,SAAS,oBAAoB,MAA0C;AAC5E,UAAQ,MAAA;IACN,KAAK;AACH,aAAO;QACL,sBAAsB;QACtB,0BAA0B;QAC1B,sBAAsB;QACtB,qBAAqB;QACrB,uBAAuB;QACvB,sBAAsB;QACtB,0BAA0B;QAC1B,sBAAsB;MAAA;IAE1B,KAAK;AACH,aAAO;;QAEL,sBAAsB;QACtB,0BAA0B;QAC1B,sBAAsB;QACtB,qBAAqB;QACrB,uBAAuB;QACvB,sBAAsB;QACtB,0BAA0B;QAC1B,sBAAsB;MAAA;IAE1B,KAAK;AACH,aAAO;;QAEL,sBAAsB;QACtB,0BAA0B;QAC1B,sBAAsB;QACtB,qBAAqB;QACrB,uBAAuB;QACvB,sBAAsB;QACtB,0BAA0B;QAC1B,sBAAsB;MAAA;EACxB;AAEN;AAMO,SAAS,yBACd,eACA,aAAa,KACb,aAAa,KACD;AACZ,QAAM,QAAQ,YAAY,MAAM;AAC9B,kBAAc,IAAI;AAClB,eAAW,MAAM;AACf,oBAAc,KAAK;IACrB,GAAG,UAAU;EACf,GAAG,UAAU;AAEb,SAAO,MAAM;AACX,kBAAc,KAAK;EACrB;AACF;AAEO,SAAS,aAAa,QAAqB,CAAA,GAAe;AAC/D,QAAM,EAAE,OAAO,SAAS,YAAY,QAAQ,OAAO,MAAM,UAAU,KAAA,IAAS;AAE5E,QAAM,YAAuD;IAC3D,MAAM;IACN,cAAc,6BAA6B,IAAI;EAAA;AAGjD,QAAM,iBAAyC;IAC7C,aAAa;IACb,aAAa;IACb,kBAAkB;IAClB,aAAa;IACb,gBAAgB,UAAU,SAAS;EAAA;AAGrC,SAAO;IACL;IACA;IACA,OAAO;MACL;MACA;MACA;MACA;IAAA;IAEF,OAAO,oBAAoB,IAAI;EAAA;AAEnC;AC3GO,IAAM,iBAAiB,IAAI;EAChC,MAAM;EACN,UAAU;IACR,MAAM;MACJ,IAAI;MACJ,IAAI;MACJ,IAAI;MACJ,IAAI;IAAA;IAEN,WAAW;MACT,MAAM;MACN,QAAQ;MACR,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,MAAM;IACN,WAAW;EAAA;AAEf,CAAC;;;;ACKM,IAAM,SAAe;EAC1B,SAASA,QACP;IACE,OAAO;IACP,YAAY;IACZ,OAAO;IACP,UAAU;IACV;IACA;IACA;IACA;IACA;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,CAAC,YAAY,aAAa,IAAU,eAAS,KAAK;AAExD,UAAM,YAAY,kBAAkB;AACpC,UAAM,aAAa,iBAAiB;AACpC,UAAM,cAAc,mBAAmB;AAEjC,IAAA,gBAAU,MAAM;AACpB,UAAI,CAAC,aAAa;AAChB,sBAAc,KAAK;AACnB;MACF;AACA,YAAM,UAAU,yBAAyB,aAAa;AACtD,aAAO;IACT,GAAG,CAAC,WAAW,CAAC;AAEhB,UAAM,MAAM,aAAa,EAAE,MAAM,WAAW,MAAM,QAAA,CAAS;AAG3D,UAAM,gBAAqC;MACzC,GAAG,IAAI;MACP,GAAG;IAAA;AAGL,WACE;MAAC;MAAA;QACC;QACA,WAAW,GAAG,UAAU,eAAe,EAAE,MAAM,UAAA,CAAW,GAAG,SAAS;QACtE,SAAQ;QACR,OAAM;QACN,OAAO;QACN,GAAG,IAAI;QACP,GAAG,IAAI;QACR,iBAAe,aAAa,SAAS;QACrC,gBAAc,YAAY,SAAS;QACnC,eAAa,aAAa,SAAS;QACnC,eAAa,UAAU,SAAS;QAC/B,GAAG;QAEJ,UAAA;UAAA,oBAAC,QAAA,EACC,UAAA,oBAAC,SAAA,EACE,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;cAAA,CA0JH,EAAA,CACF;UAGA,oBAAC,WAAA,EAAQ,WAAU,UAAS,IAAG,OAAM,IAAG,OAAM,IAAG,OAAM,IAAG,KAAA,CAAK;UAG/D,qBAAC,KAAA,EAAE,WAAU,SAEX,UAAA;YAAA,qBAAC,KAAA,EAAE,WAAU,YACX,UAAA;cAAA,oBAAC,QAAA,EAAK,WAAU,QAAO,GAAE,gCAAA,CAAgC;cACzD,oBAAC,QAAA,EAAK,WAAU,QAAO,GAAE,wDAAA,CAAwD;cACjF,oBAAC,QAAA,EAAK,WAAU,QAAO,GAAE,wDAAA,CAAwD;YAAA,EAAA,CACnF;YAGA,oBAAC,WAAA,EAAQ,WAAU,UAAS,IAAG,MAAK,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;YAC7D,oBAAC,WAAA,EAAQ,WAAU,UAAS,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;YAC9D,oBAAC,QAAA,EAAK,WAAU,UAAS,GAAE,wDAAA,CAAwD;YAGnF,oBAAC,QAAA,EAAK,WAAU,aAAY,GAAE,sGAAA,CAAsG;YAGpI,oBAAC,QAAA,EAAK,WAAU,SAAQ,GAAE,sGAAA,CAAsG;YAGhI,oBAAC,QAAA,EAAK,WAAU,SAAQ,GAAE,mFAAA,CAAmF;YAG7G,oBAAC,WAAA,EAAQ,WAAU,SAAQ,QAAO,iDAAA,CAAiD;YACnF,oBAAC,WAAA,EAAQ,WAAU,aAAY,QAAO,kDAAA,CAAkD;YACxF,oBAAC,WAAA,EAAQ,WAAU,aAAY,QAAO,gDAAA,CAAgD;YACtF,oBAAC,WAAA,EAAQ,WAAU,aAAY,QAAO,kDAAA,CAAkD;YACxF,oBAAC,WAAA,EAAQ,WAAU,SAAQ,QAAO,gDAAA,CAAgD;YAClF,oBAAC,WAAA,EAAQ,WAAU,SAAQ,QAAO,kDAAA,CAAkD;YAGpF,oBAAC,WAAA,EAAQ,WAAU,QAAO,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;YAC3D,SAAS,UACR,oBAAC,WAAA,EAAQ,WAAU,QAAO,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;YAE9D,oBAAC,QAAA,EAAK,WAAU,MAAK,GAAG,SAAS,SAAS,kBAAkB,+BAA+B,SAAS,IAAA,CAAK;YAGxG,SAAS,UACR,qBAAC,KAAA,EAAE,WAAU,UACX,UAAA;cAAA,oBAAC,WAAA,EAAQ,WAAU,QAAO,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;cAAA,oBAC3D,QAAA,EAAK,WAAU,MAAK,GAAE,4BAA2B,SAAS,IAAA,CAAK;YAAA,EAAA,CAClE;YAIF,oBAAC,QAAA,EAAK,WAAU,QAAO,GAAE,wEAAA,CAAwE;YACjG,oBAAC,WAAA,EAAQ,WAAU,QAAO,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;YAC5D,oBAAC,WAAA,EAAQ,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,IAAA,CAAI;YAG3D,aACC,qBAAC,KAAA,EAAE,WAAU,wBACX,UAAA;cAAA,oBAAC,QAAA,EAAK,WAAU,MAAK,GAAE,oCAAA,CAAoC;cAC3D,oBAAC,QAAA,EAAK,WAAU,MAAK,GAAE,oCAAA,CAAoC;cAC1D,SAAS,UACR,oBAAC,QAAA,EAAK,WAAU,MAAK,GAAE,4BAAA,CAA4B,IAEnD,oBAAC,QAAA,EAAK,WAAU,MAAK,GAAE,oCAAA,CAAoC;YAAA,EAAA,CAE/D,IACE,SAAS,UACX,qBAAC,KAAA,EAAE,WAAU,qBACX,UAAA;cAAA,oBAAC,WAAA,EAAQ,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;cAC7D,oBAAC,WAAA,EAAQ,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;cAC7D,oBAAC,UAAA,EAAO,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,GAAG,IAAA,CAAK;cACpD,oBAAC,UAAA,EAAO,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,GAAG,EAAA,CAAG;cAClD,oBAAC,UAAA,EAAO,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,GAAG,IAAA,CAAK;cACpD,oBAAC,UAAA,EAAO,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,GAAG,IAAA,CAAK;cACpD,oBAAC,QAAA,EAAK,WAAU,MAAK,GAAE,4BAAA,CAA4B;YAAA,EAAA,CACrD,IAEA,qBAAC,KAAA,EAAE,WAAU,qBACX,UAAA;cAAA,oBAAC,WAAA,EAAQ,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;cAC7D,oBAAC,WAAA,EAAQ,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,IAAG,MAAK,IAAG,KAAA,CAAK;cAC7D,oBAAC,UAAA,EAAO,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,GAAG,IAAA,CAAK;cACpD,oBAAC,UAAA,EAAO,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,GAAG,EAAA,CAAG;cAClD,oBAAC,UAAA,EAAO,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,GAAG,IAAA,CAAK;cACpD,oBAAC,UAAA,EAAO,WAAU,SAAQ,IAAG,OAAM,IAAG,OAAM,GAAG,IAAA,CAAK;cACpD,oBAAC,QAAA,EAAK,WAAU,MAAK,GAAE,oCAAA,CAAoC;YAAA,EAAA,CAC7D;UAAA,EAAA,CAEJ;QAAA;MAAA;IAAA;EAGN;AACF;",
+  "names": ["Mascot"]
+}

package/dist/react-mastery-bar.js

@@ -0,0 +1,97 @@
+import {
+  cn,
+  cva
+} from "./chunk-ZF3OHCGV.js";
+
+// ../react-mastery-bar/dist/index.js
+import * as React from "react";
+
+// ../mastery-bar/dist/index.js
+function clampPercent(value) {
+  if (Number.isNaN(value)) return 0;
+  return Math.min(100, Math.max(0, value));
+}
+function createMasteryBar({ value }) {
+  const clamped = clampPercent(value);
+  const ariaProps = {
+    role: "progressbar",
+    "aria-valuenow": clamped,
+    "aria-valuemin": 0,
+    "aria-valuemax": 100
+  };
+  const dataAttributes = {
+    "data-value": String(clamped)
+  };
+  return { ariaProps, dataAttributes };
+}
+var masteryBarVariants = cva({
+  base: "w-full overflow-hidden rounded-full bg-muted",
+  variants: {
+    size: {
+      sm: "h-1.5",
+      md: "h-2",
+      lg: "h-3"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var masteryBarFillVariants = cva({
+  base: "h-full rounded-full bg-primary",
+  variants: {
+    muted: {
+      true: "bg-primary/70",
+      false: "bg-primary"
+    }
+  },
+  defaultVariants: {
+    muted: "false"
+  }
+});
+var masteryBarLabelClass = "text-xs text-muted-foreground";
+var masteryBarLeadingLabelClass = "text-xs text-muted-foreground";
+var masteryBarHeaderClass = "flex justify-between items-baseline mb-1";
+
+// ../react-mastery-bar/dist/index.js
+import { jsxs, jsx } from "react/jsx-runtime";
+var MasteryBar = React.forwardRef(
+  function MasteryBar2({
+    value,
+    label,
+    leadingLabel,
+    size = "md",
+    muted = false,
+    className,
+    ...props
+  }, ref) {
+    const clamped = clampPercent(value);
+    const { ariaProps, dataAttributes } = createMasteryBar({ value });
+    const hasHeader = leadingLabel != null || label != null;
+    return /* @__PURE__ */ jsxs("div", { ref, className: cn("w-full", className), ...props, children: [
+      hasHeader && /* @__PURE__ */ jsxs("div", { className: masteryBarHeaderClass, children: [
+        leadingLabel != null && /* @__PURE__ */ jsx("span", { className: masteryBarLeadingLabelClass, children: leadingLabel }),
+        label != null && /* @__PURE__ */ jsx("span", { className: masteryBarLabelClass, children: label })
+      ] }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          className: masteryBarVariants({ size }),
+          ...ariaProps,
+          ...dataAttributes,
+          children: /* @__PURE__ */ jsx(
+            "div",
+            {
+              className: masteryBarFillVariants({ muted: muted ? "true" : "false" }),
+              style: { width: `${clamped}%` }
+            }
+          )
+        }
+      )
+    ] });
+  }
+);
+export {
+  MasteryBar
+};
+//# sourceMappingURL=react-mastery-bar.js.map

package/dist/react-mastery-bar.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../mastery-bar/src/mastery-bar.ts", "../../mastery-bar/src/mastery-bar.styles.ts", "../../react-mastery-bar/src/mastery-bar.tsx"],
+  "sourcesContent": ["/** Visual size of a mastery bar. */\nexport type MasteryBarSize = 'sm' | 'md' | 'lg'\n\nexport interface MasteryBarProps {\n  /** Progress value (0–100). Values outside this range are clamped. */\n  value: number\n  /** Label shown on the right side of the header row. */\n  label?: string\n  /** Label shown on the left side of the header row. */\n  leadingLabel?: string\n  /** Visual size of the track. */\n  size?: MasteryBarSize\n  /** Renders the fill at reduced opacity to indicate a muted/secondary state. */\n  muted?: boolean\n}\n\nexport interface MasteryBarAPI {\n  /** ARIA attributes to spread on the progressbar element. */\n  ariaProps: Record<string, string | number | boolean>\n  /** Data attributes for styling hooks. */\n  dataAttributes: Record<string, string>\n}\n\n/**\n * Clamp a raw numeric value to the [0, 100] range.\n *\n * Values below 0 become 0; values above 100 become 100; NaN is treated as 0.\n */\nexport function clampPercent(value: number): number {\n  if (Number.isNaN(value)) return 0\n  return Math.min(100, Math.max(0, value))\n}\n\n/**\n * Build the framework-agnostic progressbar props for a mastery bar.\n *\n * Returns `role=\"progressbar\"` ARIA attributes plus data attributes; adapters\n * spread these onto their track element.\n */\nexport function createMasteryBar({ value }: Pick<MasteryBarProps, 'value'>): MasteryBarAPI {\n  const clamped = clampPercent(value)\n\n  const ariaProps: Record<string, string | number | boolean> = {\n    role: 'progressbar',\n    'aria-valuenow': clamped,\n    'aria-valuemin': 0,\n    'aria-valuemax': 100,\n  }\n\n  const dataAttributes: Record<string, string> = {\n    'data-value': String(clamped),\n  }\n\n  return { ariaProps, dataAttributes }\n}\n", "import { cva } from '@refraction-ui/shared'\n\n/**\n * Track (outer container): rounded, muted background.\n * `size` variant controls the track height.\n */\nexport const masteryBarVariants = cva({\n  base: 'w-full overflow-hidden rounded-full bg-muted',\n  variants: {\n    size: {\n      sm: 'h-1.5',\n      md: 'h-2',\n      lg: 'h-3',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\n/**\n * Fill (inner bar): rounded, primary background.\n * `muted` variant renders at reduced opacity for secondary/inactive states.\n */\nexport const masteryBarFillVariants = cva({\n  base: 'h-full rounded-full bg-primary',\n  variants: {\n    muted: {\n      true: 'bg-primary/70',\n      false: 'bg-primary',\n    },\n  },\n  defaultVariants: {\n    muted: 'false',\n  },\n})\n\n/** Class applied to each text label (leading or trailing). */\nexport const masteryBarLabelClass = 'text-xs text-muted-foreground'\n\n/** Class for the leading (left-side) label. */\nexport const masteryBarLeadingLabelClass = 'text-xs text-muted-foreground'\n\n/** Header row above the track: leading label on the left, label on the right. */\nexport const masteryBarHeaderClass = 'flex justify-between items-baseline mb-1'\n", "import * as React from 'react'\nimport {\n  clampPercent,\n  createMasteryBar,\n  masteryBarVariants,\n  masteryBarFillVariants,\n  masteryBarLabelClass,\n  masteryBarLeadingLabelClass,\n  masteryBarHeaderClass,\n  type MasteryBarSize,\n} from '@refraction-ui/mastery-bar'\nimport { cn } from '@refraction-ui/shared'\n\nexport type { MasteryBarSize }\n\nexport interface MasteryBarProps\n  extends Omit<React.HTMLAttributes<HTMLDivElement>, 'color' | 'content' | 'results'> {\n  /** Progress value (0–100). Values outside this range are clamped. */\n  value: number\n  /** Label shown on the right side of the header row. */\n  label?: string\n  /** Label shown on the left side of the header row. */\n  leadingLabel?: string\n  /** Visual size of the track. */\n  size?: MasteryBarSize\n  /** Renders the fill at reduced opacity to indicate a muted/secondary state. */\n  muted?: boolean\n}\n\n/**\n * MasteryBar — a labelled linear progress bar for skill/concept mastery.\n *\n * Renders `role=\"progressbar\"` with aria-valuenow/min/max. Optionally renders\n * a header row with a leading label (left) and a trailing label (right). Logic\n * and styles come from the headless `@refraction-ui/mastery-bar` core.\n */\nexport const MasteryBar = React.forwardRef<HTMLDivElement, MasteryBarProps>(\n  function MasteryBar(\n    {\n      value,\n      label,\n      leadingLabel,\n      size = 'md',\n      muted = false,\n      className,\n      ...props\n    },\n    ref,\n  ) {\n    const clamped = clampPercent(value)\n    const { ariaProps, dataAttributes } = createMasteryBar({ value })\n    const hasHeader = leadingLabel != null || label != null\n\n    return (\n      <div ref={ref} className={cn('w-full', className)} {...props}>\n        {hasHeader && (\n          <div className={masteryBarHeaderClass}>\n            {leadingLabel != null && (\n              <span className={masteryBarLeadingLabelClass}>{leadingLabel}</span>\n            )}\n            {label != null && (\n              <span className={masteryBarLabelClass}>{label}</span>\n            )}\n          </div>\n        )}\n        <div\n          className={masteryBarVariants({ size })}\n          {...ariaProps}\n          {...dataAttributes}\n        >\n          <div\n            className={masteryBarFillVariants({ muted: muted ? 'true' : 'false' })}\n            style={{ width: `${clamped}%` }}\n          />\n        </div>\n      </div>\n    )\n  },\n)\n"],
+  "mappings": ";;;;;;;;;AA4BO,SAAS,aAAa,OAAuB;AAClD,MAAI,OAAO,MAAM,KAAK,EAAG,QAAO;AAChC,SAAO,KAAK,IAAI,KAAK,KAAK,IAAI,GAAG,KAAK,CAAC;AACzC;AAQO,SAAS,iBAAiB,EAAE,MAAA,GAAwD;AACzF,QAAM,UAAU,aAAa,KAAK;AAElC,QAAM,YAAuD;IAC3D,MAAM;IACN,iBAAiB;IACjB,iBAAiB;IACjB,iBAAiB;EAAA;AAGnB,QAAM,iBAAyC;IAC7C,cAAc,OAAO,OAAO;EAAA;AAG9B,SAAO,EAAE,WAAW,eAAA;AACtB;AChDO,IAAM,qBAAqB,IAAI;EACpC,MAAM;EACN,UAAU;IACR,MAAM;MACJ,IAAI;MACJ,IAAI;MACJ,IAAI;IAAA;EACN;EAEF,iBAAiB;IACf,MAAM;EAAA;AAEV,CAAC;AAMM,IAAM,yBAAyB,IAAI;EACxC,MAAM;EACN,UAAU;IACR,OAAO;MACL,MAAM;MACN,OAAO;IAAA;EACT;EAEF,iBAAiB;IACf,OAAO;EAAA;AAEX,CAAC;AAGM,IAAM,uBAAuB;AAG7B,IAAM,8BAA8B;AAGpC,IAAM,wBAAwB;;;;ACR9B,IAAM,aAAmB;EAC9B,SAASA,YACP;IACE;IACA;IACA;IACA,OAAO;IACP,QAAQ;IACR;IACA,GAAG;EAAA,GAEL,KACA;AACA,UAAM,UAAU,aAAa,KAAK;AAClC,UAAM,EAAE,WAAW,eAAA,IAAmB,iBAAiB,EAAE,MAAA,CAAO;AAChE,UAAM,YAAY,gBAAgB,QAAQ,SAAS;AAEnD,WACE,qBAAC,OAAA,EAAI,KAAU,WAAW,GAAG,UAAU,SAAS,GAAI,GAAG,OACpD,UAAA;MAAA,aACC,qBAAC,OAAA,EAAI,WAAW,uBACb,UAAA;QAAA,gBAAgB,QACf,oBAAC,QAAA,EAAK,WAAW,6BAA8B,UAAA,aAAA,CAAa;QAE7D,SAAS,QACR,oBAAC,QAAA,EAAK,WAAW,sBAAuB,UAAA,MAAA,CAAM;MAAA,EAAA,CAElD;MAEF;QAAC;QAAA;UACC,WAAW,mBAAmB,EAAE,KAAA,CAAM;UACrC,GAAG;UACH,GAAG;UAEJ,UAAA;YAAC;YAAA;cACC,WAAW,uBAAuB,EAAE,OAAO,QAAQ,SAAS,QAAA,CAAS;cACrE,OAAO,EAAE,OAAO,GAAG,OAAO,IAAA;YAAI;UAAA;QAChC;MAAA;IACF,EAAA,CACF;EAEJ;AACF;",
+  "names": ["MasteryBar"]
+}