@particle-academy/react-fancy 5.12.0 → 5.14.0

package/dist/chunk-32AJIHBZ.js

@@ -0,0 +1,201 @@
+import { useRef, useState, useCallback } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+// src/components/MoodMeter/MoodMeter.tsx
+function MoodMeter({
+  min,
+  max,
+  step,
+  value,
+  confidence,
+  onChange,
+  posted,
+  width = 320,
+  height = 220,
+  showGrid = true,
+  color = "#0ea5e9",
+  postedColor = "#a855f7",
+  prefix = "",
+  suffix = "",
+  formatValue,
+  className
+}) {
+  const ref = useRef(null);
+  const [dragging, setDragging] = useState(false);
+  const snapStep = step ?? (max - min) / 100;
+  const fmt = useCallback(
+    (v) => {
+      if (formatValue) return formatValue(v);
+      const num = snapStep < 1 ? v.toFixed(2) : Math.round(v).toString();
+      return `${prefix}${num}${suffix}`;
+    },
+    [formatValue, snapStep, prefix, suffix]
+  );
+  const set = useCallback(
+    (clientX, clientY) => {
+      const el = ref.current;
+      if (!el) return;
+      const rect = el.getBoundingClientRect();
+      const x = clamp((clientX - rect.left) / rect.width, 0, 1);
+      const y = clamp((clientY - rect.top) / rect.height, 0, 1);
+      const raw = min + x * (max - min);
+      const snapped = round(raw, snapStep, min);
+      const c = clamp(1 - y, 0, 1);
+      onChange(snapped, Math.round(c * 100) / 100);
+    },
+    [min, max, snapStep, onChange]
+  );
+  const onPointerDown = (e) => {
+    e.target.setPointerCapture?.(e.pointerId);
+    setDragging(true);
+    set(e.clientX, e.clientY);
+  };
+  const onPointerMove = (e) => {
+    if (!dragging) return;
+    set(e.clientX, e.clientY);
+  };
+  const onPointerUp = () => setDragging(false);
+  const xPct = (value - min) / (max - min) * 100;
+  const yPct = (1 - confidence) * 100;
+  const haloR = 18 + (1 - confidence) * 70;
+  const pxPct = posted ? (posted.value - min) / (max - min) * 100 : 0;
+  const pyPct = posted ? (1 - posted.confidence) * 100 : 0;
+  const pHaloR = posted ? 16 + (1 - posted.confidence) * 60 : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      onPointerDown,
+      onPointerMove,
+      onPointerUp,
+      onPointerCancel: onPointerUp,
+      className: `relative cursor-crosshair touch-none select-none overflow-hidden rounded-md border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 ${className ?? ""}`,
+      style: { width, height },
+      children: [
+        showGrid && /* @__PURE__ */ jsxs("svg", { className: "pointer-events-none absolute inset-0 h-full w-full", "aria-hidden": true, children: [
+          [0.25, 0.5, 0.75].map((p, i) => /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: `${p * 100}%`,
+              x2: `${p * 100}%`,
+              y1: "0",
+              y2: "100%",
+              stroke: "#a1a1aa",
+              strokeOpacity: 0.18,
+              strokeDasharray: "3 4"
+            },
+            `v${i}`
+          )),
+          [0.25, 0.5, 0.75].map((p, i) => /* @__PURE__ */ jsx(
+            "line",
+            {
+              x1: "0",
+              x2: "100%",
+              y1: `${p * 100}%`,
+              y2: `${p * 100}%`,
+              stroke: "#a1a1aa",
+              strokeOpacity: 0.18,
+              strokeDasharray: "3 4"
+            },
+            `h${i}`
+          ))
+        ] }),
+        showGrid && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute left-1.5 top-1.5 text-[10px] uppercase tracking-wider text-zinc-400", children: "\u2191 sure" }),
+          /* @__PURE__ */ jsx("div", { className: "pointer-events-none absolute bottom-1.5 left-1.5 text-[10px] uppercase tracking-wider text-zinc-400", children: "\u2193 unsure" }),
+          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute right-1.5 top-1.5 text-[10px] uppercase tracking-wider text-zinc-400", children: [
+            fmt(max),
+            " \u2192"
+          ] }),
+          /* @__PURE__ */ jsxs("div", { className: "pointer-events-none absolute bottom-1.5 right-1.5 text-[10px] uppercase tracking-wider text-zinc-400", children: [
+            "\u2190 ",
+            fmt(min)
+          ] })
+        ] }),
+        posted && /* @__PURE__ */ jsx(
+          Handle,
+          {
+            xPct: pxPct,
+            yPct: pyPct,
+            haloR: pHaloR,
+            color: postedColor,
+            dashed: true,
+            label: "agent"
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Handle,
+          {
+            xPct,
+            yPct,
+            haloR,
+            color,
+            label: fmt(value)
+          }
+        )
+      ]
+    }
+  );
+}
+function Handle({
+  xPct,
+  yPct,
+  haloR,
+  color,
+  dashed = false,
+  label
+}) {
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full",
+        style: {
+          left: `${xPct}%`,
+          top: `${yPct}%`,
+          width: haloR * 2,
+          height: haloR * 2,
+          background: color + (dashed ? "11" : "22"),
+          border: dashed ? `1px dashed ${color}` : "none"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-white dark:ring-zinc-900",
+        style: {
+          left: `${xPct}%`,
+          top: `${yPct}%`,
+          width: 14,
+          height: 14,
+          background: color,
+          opacity: dashed ? 0.6 : 1
+        }
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: "pointer-events-none absolute -translate-x-1/2 rounded px-1.5 py-0.5 font-mono text-[10px]",
+        style: {
+          left: `${xPct}%`,
+          top: `calc(${yPct}% + 14px)`,
+          color
+        },
+        children: label
+      }
+    )
+  ] });
+}
+function clamp(n, lo, hi) {
+  return Math.max(lo, Math.min(hi, n));
+}
+function round(n, step, min) {
+  if (step >= 1) return Math.round(n);
+  return Math.round((n - min) / step) * step + min;
+}
+
+export { MoodMeter };
+//# sourceMappingURL=chunk-32AJIHBZ.js.map
+//# sourceMappingURL=chunk-32AJIHBZ.js.map

package/dist/chunk-32AJIHBZ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/MoodMeter/MoodMeter.tsx"],"names":[],"mappings":"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","file":"chunk-32AJIHBZ.js","sourcesContent":["import { useCallback, useRef, useState } from \"react\";\n\n/**\n * MoodMeter — a 2D draggable pad that captures a value AND the\n * confidence in that value on the same handle.\n *\n *   <MoodMeter\n *     min={0} max={1}\n *     value={value} confidence={confidence}\n *     onChange={(v, c) => { setValue(v); setConfidence(c); }}\n *   />\n *\n *   • x-axis maps to [min..max]\n *   • y-axis maps to [0..1] confidence (top = sure)\n *   • the halo around the handle scales inversely with confidence —\n *     uncertain readings literally look fuzzier\n *\n * Why pair them in one control? When AIs post a number, humans\n * immediately ask \"how sure are you?\". Making confidence an explicit\n * sibling of value — and letting the user drag either independently —\n * turns vague \"AI suggestion\" UX into something you can argue with\n * precisely.\n *\n * The agent's posted value/confidence renders as a dashed ghost\n * handle alongside the live user handle, so the human can see where\n * the agent landed and how far they've drifted.\n */\nexport interface MoodMeterProps {\n  /** Range minimum. */\n  min: number;\n  /** Range maximum. */\n  max: number;\n  /** Step for value snapping. Defaults to (max-min)/100. */\n  step?: number;\n  /** Current value (controlled). */\n  value: number;\n  /** Current confidence 0..1 (controlled). */\n  confidence: number;\n  /** Called with (value, confidence) on drag / pointer events. */\n  onChange: (value: number, confidence: number) => void;\n  /** Optional agent post — renders as a dashed ghost handle. */\n  posted?: { value: number; confidence: number };\n  /** Pixel width of the pad. Defaults to 320. */\n  width?: number;\n  /** Pixel height of the pad. Defaults to 220. */\n  height?: number;\n  /** Show the grid + axis labels. Defaults to true. */\n  showGrid?: boolean;\n  /** Color of the user handle. Defaults to sky blue. */\n  color?: string;\n  /** Color of the posted-ghost handle. Defaults to violet. */\n  postedColor?: string;\n  /** Optional prefix for the value label (e.g. \"$\"). */\n  prefix?: string;\n  /** Optional suffix for the value label (e.g. \"k\", \"%\"). */\n  suffix?: string;\n  /** Optional label text override. Falls back to formatted value. */\n  formatValue?: (v: number) => string;\n  /** Optional className applied to the outer pad. */\n  className?: string;\n}\n\nexport function MoodMeter({\n  min,\n  max,\n  step,\n  value,\n  confidence,\n  onChange,\n  posted,\n  width = 320,\n  height = 220,\n  showGrid = true,\n  color = \"#0ea5e9\",\n  postedColor = \"#a855f7\",\n  prefix = \"\",\n  suffix = \"\",\n  formatValue,\n  className,\n}: MoodMeterProps) {\n  const ref = useRef<HTMLDivElement>(null);\n  const [dragging, setDragging] = useState(false);\n\n  const snapStep = step ?? (max - min) / 100;\n\n  const fmt = useCallback(\n    (v: number) => {\n      if (formatValue) return formatValue(v);\n      const num = snapStep < 1 ? v.toFixed(2) : Math.round(v).toString();\n      return `${prefix}${num}${suffix}`;\n    },\n    [formatValue, snapStep, prefix, suffix],\n  );\n\n  const set = useCallback(\n    (clientX: number, clientY: number) => {\n      const el = ref.current;\n      if (!el) return;\n      const rect = el.getBoundingClientRect();\n      const x = clamp((clientX - rect.left) / rect.width, 0, 1);\n      const y = clamp((clientY - rect.top) / rect.height, 0, 1);\n      const raw = min + x * (max - min);\n      const snapped = round(raw, snapStep, min);\n      const c = clamp(1 - y, 0, 1);\n      onChange(snapped, Math.round(c * 100) / 100);\n    },\n    [min, max, snapStep, onChange],\n  );\n\n  const onPointerDown = (e: React.PointerEvent<HTMLDivElement>) => {\n    (e.target as Element).setPointerCapture?.(e.pointerId);\n    setDragging(true);\n    set(e.clientX, e.clientY);\n  };\n  const onPointerMove = (e: React.PointerEvent<HTMLDivElement>) => {\n    if (!dragging) return;\n    set(e.clientX, e.clientY);\n  };\n  const onPointerUp = () => setDragging(false);\n\n  const xPct = ((value - min) / (max - min)) * 100;\n  const yPct = (1 - confidence) * 100;\n  const haloR = 18 + (1 - confidence) * 70;\n\n  const pxPct = posted ? ((posted.value - min) / (max - min)) * 100 : 0;\n  const pyPct = posted ? (1 - posted.confidence) * 100 : 0;\n  const pHaloR = posted ? 16 + (1 - posted.confidence) * 60 : 0;\n\n  return (\n    <div\n      ref={ref}\n      onPointerDown={onPointerDown}\n      onPointerMove={onPointerMove}\n      onPointerUp={onPointerUp}\n      onPointerCancel={onPointerUp}\n      className={`relative cursor-crosshair touch-none select-none overflow-hidden rounded-md border border-zinc-200 bg-zinc-50 dark:border-zinc-800 dark:bg-zinc-950 ${className ?? \"\"}`}\n      style={{ width, height }}\n    >\n      {showGrid && (\n        <svg className=\"pointer-events-none absolute inset-0 h-full w-full\" aria-hidden>\n          {[0.25, 0.5, 0.75].map((p, i) => (\n            <line\n              key={`v${i}`}\n              x1={`${p * 100}%`}\n              x2={`${p * 100}%`}\n              y1=\"0\"\n              y2=\"100%\"\n              stroke=\"#a1a1aa\"\n              strokeOpacity={0.18}\n              strokeDasharray=\"3 4\"\n            />\n          ))}\n          {[0.25, 0.5, 0.75].map((p, i) => (\n            <line\n              key={`h${i}`}\n              x1=\"0\"\n              x2=\"100%\"\n              y1={`${p * 100}%`}\n              y2={`${p * 100}%`}\n              stroke=\"#a1a1aa\"\n              strokeOpacity={0.18}\n              strokeDasharray=\"3 4\"\n            />\n          ))}\n        </svg>\n      )}\n\n      {showGrid && (\n        <>\n          <div className=\"pointer-events-none absolute left-1.5 top-1.5 text-[10px] uppercase tracking-wider text-zinc-400\">\n            ↑ sure\n          </div>\n          <div className=\"pointer-events-none absolute bottom-1.5 left-1.5 text-[10px] uppercase tracking-wider text-zinc-400\">\n            ↓ unsure\n          </div>\n          <div className=\"pointer-events-none absolute right-1.5 top-1.5 text-[10px] uppercase tracking-wider text-zinc-400\">\n            {fmt(max)} →\n          </div>\n          <div className=\"pointer-events-none absolute bottom-1.5 right-1.5 text-[10px] uppercase tracking-wider text-zinc-400\">\n            ← {fmt(min)}\n          </div>\n        </>\n      )}\n\n      {posted && (\n        <Handle\n          xPct={pxPct}\n          yPct={pyPct}\n          haloR={pHaloR}\n          color={postedColor}\n          dashed\n          label=\"agent\"\n        />\n      )}\n      <Handle\n        xPct={xPct}\n        yPct={yPct}\n        haloR={haloR}\n        color={color}\n        label={fmt(value)}\n      />\n    </div>\n  );\n}\n\nfunction Handle({\n  xPct,\n  yPct,\n  haloR,\n  color,\n  dashed = false,\n  label,\n}: {\n  xPct: number;\n  yPct: number;\n  haloR: number;\n  color: string;\n  dashed?: boolean;\n  label: string;\n}) {\n  return (\n    <>\n      <div\n        className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full\"\n        style={{\n          left: `${xPct}%`,\n          top: `${yPct}%`,\n          width: haloR * 2,\n          height: haloR * 2,\n          background: color + (dashed ? \"11\" : \"22\"),\n          border: dashed ? `1px dashed ${color}` : \"none\",\n        }}\n      />\n      <div\n        className=\"pointer-events-none absolute -translate-x-1/2 -translate-y-1/2 rounded-full ring-2 ring-white dark:ring-zinc-900\"\n        style={{\n          left: `${xPct}%`,\n          top: `${yPct}%`,\n          width: 14,\n          height: 14,\n          background: color,\n          opacity: dashed ? 0.6 : 1,\n        }}\n      />\n      <div\n        className=\"pointer-events-none absolute -translate-x-1/2 rounded px-1.5 py-0.5 font-mono text-[10px]\"\n        style={{\n          left: `${xPct}%`,\n          top: `calc(${yPct}% + 14px)`,\n          color,\n        }}\n      >\n        {label}\n      </div>\n    </>\n  );\n}\n\nfunction clamp(n: number, lo: number, hi: number) {\n  return Math.max(lo, Math.min(hi, n));\n}\n\nfunction round(n: number, step: number, min: number) {\n  if (step >= 1) return Math.round(n);\n  return Math.round((n - min) / step) * step + min;\n}\n"]}

package/dist/chunk-3DJGPNUI.js

@@ -0,0 +1,39 @@
+import { labelSizeClasses } from './chunk-GFYSELJF.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+function Field({
+  label,
+  description,
+  error,
+  required,
+  htmlFor,
+  size = "md",
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxs("div", { ...rest, "data-react-fancy-field": "", className: cn("flex flex-col gap-2", className), children: [
+    label && /* @__PURE__ */ jsxs(
+      "label",
+      {
+        htmlFor,
+        className: cn(
+          "font-medium text-zinc-700 dark:text-zinc-100",
+          labelSizeClasses[size]
+        ),
+        children: [
+          label,
+          required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
+        ]
+      }
+    ),
+    children,
+    description && !error && /* @__PURE__ */ jsx("p", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: description }),
+    error && /* @__PURE__ */ jsx("p", { className: "text-xs text-red-500", children: error })
+  ] });
+}
+
+export { Field };
+//# sourceMappingURL=chunk-3DJGPNUI.js.map
+//# sourceMappingURL=chunk-3DJGPNUI.js.map

package/dist/chunk-3DJGPNUI.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/Field/Field.tsx"],"names":[],"mappings":";;;;AAIO,SAAS,KAAA,CAAM;AAAA,EACpB,KAAA;AAAA,EACA,WAAA;AAAA,EACA,KAAA;AAAA,EACA,QAAA;AAAA,EACA,OAAA;AAAA,EACA,IAAA,GAAO,IAAA;AAAA,EACP,QAAA;AAAA,EACA,SAAA;AAAA,EACA,GAAG;AACL,CAAA,EAAe;AACb,EAAA,uBACE,IAAA,CAAC,KAAA,EAAA,EAAK,GAAG,IAAA,EAAM,wBAAA,EAAuB,IAAG,SAAA,EAAW,EAAA,CAAG,qBAAA,EAAuB,SAAS,CAAA,EACpF,QAAA,EAAA;AAAA,IAAA,KAAA,oBACC,IAAA;AAAA,MAAC,OAAA;AAAA,MAAA;AAAA,QACC,OAAA;AAAA,QACA,SAAA,EAAW,EAAA;AAAA,UACT,8CAAA;AAAA,UACA,iBAAiB,IAAI;AAAA,SACvB;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA;AAAA,UACA,QAAA,oBAAY,GAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,uBAAsB,QAAA,EAAA,GAAA,EAAC;AAAA;AAAA;AAAA,KACtD;AAAA,IAED,QAAA;AAAA,IACA,eAAe,CAAC,KAAA,wBACd,GAAA,EAAA,EAAE,SAAA,EAAU,4CACV,QAAA,EAAA,WAAA,EACH,CAAA;AAAA,IAED,KAAA,oBAAS,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,wBAAwB,QAAA,EAAA,KAAA,EAAM;AAAA,GAAA,EACvD,CAAA;AAEJ","file":"chunk-3DJGPNUI.js","sourcesContent":["import { cn } from \"../../../utils/cn\";\nimport { labelSizeClasses } from \"../inputs.utils\";\nimport type { FieldProps } from \"./Field.types\";\n\nexport function Field({\n  label,\n  description,\n  error,\n  required,\n  htmlFor,\n  size = \"md\",\n  children,\n  className,\n  ...rest\n}: FieldProps) {\n  return (\n    <div {...rest} data-react-fancy-field=\"\" className={cn(\"flex flex-col gap-2\", className)}>\n      {label && (\n        <label\n          htmlFor={htmlFor}\n          className={cn(\n            \"font-medium text-zinc-700 dark:text-zinc-100\",\n            labelSizeClasses[size],\n          )}\n        >\n          {label}\n          {required && <span className=\"ml-0.5 text-red-500\">*</span>}\n        </label>\n      )}\n      {children}\n      {description && !error && (\n        <p className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n          {description}\n        </p>\n      )}\n      {error && <p className=\"text-xs text-red-500\">{error}</p>}\n    </div>\n  );\n}\n"]}

package/dist/chunk-3ETOEEVN.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var VideoViewer = react.forwardRef(
+  ({
+    src,
+    poster,
+    controls = true,
+    autoPlay = false,
+    loop = false,
+    muted = false,
+    fit = "contain",
+    onError,
+    className,
+    style
+  }, ref) => {
+    const [errored, setErrored] = react.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "data-react-fancy-video-viewer": "",
+        className: chunk3Z6ALUWP_cjs.cn(
+          "relative flex items-center justify-center overflow-hidden rounded-md bg-black",
+          className
+        ),
+        style,
+        children: errored ? /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col items-center justify-center gap-1 p-4 text-center text-sm text-zinc-400", children: [
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Couldn't load video" }),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate text-xs opacity-70", children: src })
+        ] }) : /* @__PURE__ */ jsxRuntime.jsx(
+          "video",
+          {
+            src,
+            poster,
+            controls,
+            autoPlay,
+            loop,
+            muted,
+            playsInline: true,
+            onError: () => {
+              setErrored(true);
+              onError?.();
+            },
+            className: chunk3Z6ALUWP_cjs.cn(
+              "max-h-full max-w-full",
+              fit === "cover" ? "h-full w-full object-cover" : "object-contain"
+            )
+          }
+        )
+      }
+    );
+  }
+);
+VideoViewer.displayName = "VideoViewer";
+
+exports.VideoViewer = VideoViewer;
+//# sourceMappingURL=chunk-3ETOEEVN.cjs.map
+//# sourceMappingURL=chunk-3ETOEEVN.cjs.map

package/dist/chunk-3ETOEEVN.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/VideoViewer/VideoViewer.tsx"],"names":["forwardRef","useState","jsx","cn","jsxs"],"mappings":";;;;;;AAYO,IAAM,WAAA,GAAcA,gBAAA;AAAA,EACzB,CACE;AAAA,IACE,GAAA;AAAA,IACA,MAAA;AAAA,IACA,QAAA,GAAW,IAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,IAAA,GAAO,KAAA;AAAA,IACP,KAAA,GAAQ,KAAA;AAAA,IACR,GAAA,GAAM,SAAA;AAAA,IACN,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE5C,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,+BAAA,EAA8B,EAAA;AAAA,QAC9B,SAAA,EAAWC,oBAAA;AAAA,UACT,+EAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEC,QAAA,EAAA,OAAA,mBACCC,eAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,uFAAA,EACb,QAAA,EAAA;AAAA,0BAAAF,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,aAAA,EAAc,QAAA,EAAA,qBAAA,EAAwB,CAAA;AAAA,0BACtDA,cAAA,CAAC,MAAA,EAAA,EAAK,SAAA,EAAU,wCAAA,EAA0C,QAAA,EAAA,GAAA,EAAI;AAAA,SAAA,EAChE,CAAA,mBAEAA,cAAA;AAAA,UAAC,OAAA;AAAA,UAAA;AAAA,YACC,GAAA;AAAA,YACA,MAAA;AAAA,YACA,QAAA;AAAA,YACA,QAAA;AAAA,YACA,IAAA;AAAA,YACA,KAAA;AAAA,YACA,WAAA,EAAW,IAAA;AAAA,YACX,SAAS,MAAM;AACb,cAAA,UAAA,CAAW,IAAI,CAAA;AACf,cAAA,OAAA,IAAU;AAAA,YACZ,CAAA;AAAA,YACA,SAAA,EAAWC,oBAAA;AAAA,cACT,uBAAA;AAAA,cACA,GAAA,KAAQ,UAAU,4BAAA,GAA+B;AAAA;AACnD;AAAA;AACF;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-3ETOEEVN.cjs","sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { VideoViewerProps } from \"./VideoViewer.types\";\n\n/**\n * A standalone video viewer — native controls, optional poster, fit-to-box, and\n * dark-aware framing. Renders for video sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <VideoViewer src=\"/clip.mp4\" poster=\"/clip.jpg\" style={{ height: 360 }} />\n * ```\n */\nexport const VideoViewer = forwardRef<HTMLDivElement, VideoViewerProps>(\n  (\n    {\n      src,\n      poster,\n      controls = true,\n      autoPlay = false,\n      loop = false,\n      muted = false,\n      fit = \"contain\",\n      onError,\n      className,\n      style,\n    },\n    ref,\n  ) => {\n    const [errored, setErrored] = useState(false);\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-video-viewer=\"\"\n        className={cn(\n          \"relative flex items-center justify-center overflow-hidden rounded-md bg-black\",\n          className,\n        )}\n        style={style}\n      >\n        {errored ? (\n          <div className=\"flex flex-col items-center justify-center gap-1 p-4 text-center text-sm text-zinc-400\">\n            <span className=\"font-medium\">Couldn&apos;t load video</span>\n            <span className=\"max-w-full truncate text-xs opacity-70\">{src}</span>\n          </div>\n        ) : (\n          <video\n            src={src}\n            poster={poster}\n            controls={controls}\n            autoPlay={autoPlay}\n            loop={loop}\n            muted={muted}\n            playsInline\n            onError={() => {\n              setErrored(true);\n              onError?.();\n            }}\n            className={cn(\n              \"max-h-full max-w-full\",\n              fit === \"cover\" ? \"h-full w-full object-cover\" : \"object-contain\",\n            )}\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nVideoViewer.displayName = \"VideoViewer\";\n"]}

package/dist/chunk-3F66SAE7.js

@@ -0,0 +1,40 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var StatList = forwardRef(
+  ({ items, align = "right", className, ...props }, ref) => {
+    if (items.length === 0) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        ...props,
+        "data-react-fancy-stat-list": "",
+        "data-align": align,
+        className: cn(
+          "flex flex-col gap-0.5 font-mono text-[11.5px] text-zinc-500 dark:text-zinc-400",
+          align === "right" ? "items-end text-right" : "items-start text-left",
+          className
+        ),
+        children: items.map((item, i) => /* @__PURE__ */ jsxs(
+          "span",
+          {
+            "data-stat": item.key ?? (typeof item.label === "string" ? item.label : void 0),
+            children: [
+              /* @__PURE__ */ jsx("b", { className: "font-medium text-zinc-900 dark:text-zinc-100", children: item.value }),
+              " ",
+              item.label
+            ]
+          },
+          item.key ?? (typeof item.label === "string" ? item.label : i)
+        ))
+      }
+    );
+  }
+);
+StatList.displayName = "StatList";
+
+export { StatList };
+//# sourceMappingURL=chunk-3F66SAE7.js.map
+//# sourceMappingURL=chunk-3F66SAE7.js.map

package/dist/chunk-3F66SAE7.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/StatList/StatList.tsx"],"names":[],"mappings":";;;;AAoBO,IAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,EAAE,KAAA,EAAO,KAAA,GAAQ,SAAS,SAAA,EAAW,GAAG,KAAA,EAAM,EAAG,GAAA,KAAQ;AACxD,IAAA,IAAI,KAAA,CAAM,MAAA,KAAW,CAAA,EAAG,OAAO,IAAA;AAE/B,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACC,GAAG,KAAA;AAAA,QACJ,4BAAA,EAA2B,EAAA;AAAA,QAC3B,YAAA,EAAY,KAAA;AAAA,QACZ,SAAA,EAAW,EAAA;AAAA,UACT,gFAAA;AAAA,UACA,KAAA,KAAU,UAAU,sBAAA,GAAyB,uBAAA;AAAA,UAC7C;AAAA,SACF;AAAA,QAEC,QAAA,EAAA,KAAA,CAAM,GAAA,CAAI,CAAC,IAAA,EAAM,CAAA,qBAChB,IAAA;AAAA,UAAC,MAAA;AAAA,UAAA;AAAA,YAEC,WAAA,EAAW,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,MAAA,CAAA;AAAA,YAEtE,QAAA,EAAA;AAAA,8BAAA,GAAA,CAAC,GAAA,EAAA,EAAE,SAAA,EAAU,8CAAA,EAAgD,QAAA,EAAA,IAAA,CAAK,KAAA,EAAM,CAAA;AAAA,cAAK,GAAA;AAAA,cAC5E,IAAA,CAAK;AAAA;AAAA,WAAA;AAAA,UAJD,KAAK,GAAA,KAAQ,OAAO,KAAK,KAAA,KAAU,QAAA,GAAW,KAAK,KAAA,GAAQ,CAAA;AAAA,SAMnE;AAAA;AAAA,KACH;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-3F66SAE7.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { StatListProps } from \"./StatList.types\";\n\n/**\n * The mono figure stack — `70 packages / 261 components / MIT licensed`.\n *\n * The Inspiration index and `/packages` each hand-rolled this from tokens, which\n * is the gallery working as intended: it stress-tests the kit, and what it\n * hand-rolls is the gap list. The list only pays off when the gap comes back\n * here, otherwise every surface keeps a copy and they drift apart.\n *\n * Takes `items` as DATA rather than children. What those surfaces repeat is a\n * shape, not a layout, so there is nothing to assemble at the call site — and a\n * data prop is what an agent can emit, which children are not.\n *\n * The value is a `<b>` rather than a colour, because in most of these stacks the\n * figure is the only part that is not muted, and expressing that structurally\n * keeps it meaningful when a design replaces the styling wholesale.\n */\nexport const StatList = forwardRef<HTMLDivElement, StatListProps>(\n  ({ items, align = \"right\", className, ...props }, ref) => {\n    if (items.length === 0) return null;\n\n    return (\n      <div\n        ref={ref}\n        {...props}\n        data-react-fancy-stat-list=\"\"\n        data-align={align}\n        className={cn(\n          \"flex flex-col gap-0.5 font-mono text-[11.5px] text-zinc-500 dark:text-zinc-400\",\n          align === \"right\" ? \"items-end text-right\" : \"items-start text-left\",\n          className,\n        )}\n      >\n        {items.map((item, i) => (\n          <span\n            key={item.key ?? (typeof item.label === \"string\" ? item.label : i)}\n            data-stat={item.key ?? (typeof item.label === \"string\" ? item.label : undefined)}\n          >\n            <b className=\"font-medium text-zinc-900 dark:text-zinc-100\">{item.value}</b>{\" \"}\n            {item.label}\n          </span>\n        ))}\n      </div>\n    );\n  },\n);\n\nStatList.displayName = \"StatList\";\n"]}

package/dist/chunk-3GRC5J2L.cjs

@@ -0,0 +1,54 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var AudioViewer = react.forwardRef(
+  ({
+    src,
+    title,
+    controls = true,
+    autoPlay = false,
+    loop = false,
+    onError,
+    className,
+    style
+  }, ref) => {
+    const [errored, setErrored] = react.useState(false);
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-audio-viewer": "",
+        className: chunk3Z6ALUWP_cjs.cn(
+          "flex flex-col gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900",
+          className
+        ),
+        style,
+        children: [
+          title && /* @__PURE__ */ jsxRuntime.jsx("div", { className: "truncate text-sm font-medium text-zinc-700 dark:text-zinc-200", children: title }),
+          errored ? /* @__PURE__ */ jsxRuntime.jsx("div", { className: "text-sm text-zinc-500 dark:text-zinc-400", children: "Couldn't load audio." }) : /* @__PURE__ */ jsxRuntime.jsx(
+            "audio",
+            {
+              src,
+              controls,
+              autoPlay,
+              loop,
+              onError: () => {
+                setErrored(true);
+                onError?.();
+              },
+              className: "w-full"
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+AudioViewer.displayName = "AudioViewer";
+
+exports.AudioViewer = AudioViewer;
+//# sourceMappingURL=chunk-3GRC5J2L.cjs.map
+//# sourceMappingURL=chunk-3GRC5J2L.cjs.map

package/dist/chunk-3GRC5J2L.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/AudioViewer/AudioViewer.tsx"],"names":["forwardRef","useState","jsxs","cn","jsx"],"mappings":";;;;;;AAYO,IAAM,WAAA,GAAcA,gBAAA;AAAA,EACzB,CACE;AAAA,IACE,GAAA;AAAA,IACA,KAAA;AAAA,IACA,QAAA,GAAW,IAAA;AAAA,IACX,QAAA,GAAW,KAAA;AAAA,IACX,IAAA,GAAO,KAAA;AAAA,IACP,OAAA;AAAA,IACA,SAAA;AAAA,IACA;AAAA,KAEF,GAAA,KACG;AACH,IAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIC,eAAS,KAAK,CAAA;AAE5C,IAAA,uBACEC,eAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,+BAAA,EAA8B,EAAA;AAAA,QAC9B,SAAA,EAAWC,oBAAA;AAAA,UACT,0GAAA;AAAA,UACA;AAAA,SACF;AAAA,QACA,KAAA;AAAA,QAEC,QAAA,EAAA;AAAA,UAAA,KAAA,oBACCC,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,+DAAA,EACZ,QAAA,EAAA,KAAA,EACH,CAAA;AAAA,UAED,0BACCA,cAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAU,0CAAA,EAA2C,kCAE1D,CAAA,mBAEAA,cAAA;AAAA,YAAC,OAAA;AAAA,YAAA;AAAA,cACC,GAAA;AAAA,cACA,QAAA;AAAA,cACA,QAAA;AAAA,cACA,IAAA;AAAA,cACA,SAAS,MAAM;AACb,gBAAA,UAAA,CAAW,IAAI,CAAA;AACf,gBAAA,OAAA,IAAU;AAAA,cACZ,CAAA;AAAA,cACA,SAAA,EAAU;AAAA;AAAA;AACZ;AAAA;AAAA,KAEJ;AAAA,EAEJ;AACF;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA","file":"chunk-3GRC5J2L.cjs","sourcesContent":["import { forwardRef, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { AudioViewerProps } from \"./AudioViewer.types\";\n\n/**\n * A standalone audio viewer — a themed card wrapping the native audio player,\n * with an optional title. Renders for audio sources inside `<MediaViewer>`.\n *\n * ```tsx\n * <AudioViewer src=\"/track.mp3\" title=\"track.mp3\" />\n * ```\n */\nexport const AudioViewer = forwardRef<HTMLDivElement, AudioViewerProps>(\n  (\n    {\n      src,\n      title,\n      controls = true,\n      autoPlay = false,\n      loop = false,\n      onError,\n      className,\n      style,\n    },\n    ref,\n  ) => {\n    const [errored, setErrored] = useState(false);\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-audio-viewer=\"\"\n        className={cn(\n          \"flex flex-col gap-2 rounded-lg border border-zinc-200 bg-white p-4 dark:border-zinc-700 dark:bg-zinc-900\",\n          className,\n        )}\n        style={style}\n      >\n        {title && (\n          <div className=\"truncate text-sm font-medium text-zinc-700 dark:text-zinc-200\">\n            {title}\n          </div>\n        )}\n        {errored ? (\n          <div className=\"text-sm text-zinc-500 dark:text-zinc-400\">\n            Couldn&apos;t load audio.\n          </div>\n        ) : (\n          <audio\n            src={src}\n            controls={controls}\n            autoPlay={autoPlay}\n            loop={loop}\n            onError={() => {\n              setErrored(true);\n              onError?.();\n            }}\n            className=\"w-full\"\n          />\n        )}\n      </div>\n    );\n  },\n);\n\nAudioViewer.displayName = \"AudioViewer\";\n"]}

package/dist/chunk-3SQ34IQC.cjs

@@ -0,0 +1,124 @@
+'use strict';
+
+var chunk6BW5BQMN_cjs = require('./chunk-6BW5BQMN.cjs');
+var chunkPPLR2DNC_cjs = require('./chunk-PPLR2DNC.cjs');
+var chunkYLGTDBB2_cjs = require('./chunk-YLGTDBB2.cjs');
+var chunkKJ22KE56_cjs = require('./chunk-KJ22KE56.cjs');
+var chunkL3V3BYVS_cjs = require('./chunk-L3V3BYVS.cjs');
+var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function CheckboxGroup({
+  size = "md",
+  dirty,
+  error,
+  label,
+  description,
+  required,
+  disabled,
+  className,
+  name,
+  list,
+  value: controlledValue,
+  defaultValue = [],
+  onValueChange,
+  orientation = "vertical",
+  mode,
+  ...rest
+}) {
+  const groupId = react.useId();
+  const resolvedMode = chunkL3V3BYVS_cjs.useFieldMode(mode);
+  const { showControl, interactive, enterEdit, exitEdit } = chunkKJ22KE56_cjs.useInlineEdit(resolvedMode, disabled);
+  const [value, setValue] = chunkOUOEQZHY_cjs.useControllableState(
+    controlledValue,
+    defaultValue,
+    onValueChange
+  );
+  const handleToggle = (optionValue) => {
+    const next = value.includes(optionValue) ? value.filter((v) => v !== optionValue) : [...value, optionValue];
+    setValue(next);
+  };
+  const sizeClasses = {
+    xs: "h-3.5 w-3.5",
+    sm: "h-4 w-4",
+    md: "h-[18px] w-[18px]",
+    lg: "h-5 w-5",
+    xl: "h-6 w-6"
+  }[size];
+  const content = !showControl ? /* @__PURE__ */ jsxRuntime.jsx(chunk6BW5BQMN_cjs.DisplayValue, { size, interactive, onActivate: enterEdit, children: list.map(chunkYLGTDBB2_cjs.resolveOption).filter((o) => value.includes(o.value)).map((o) => o.label).join(", ") }) : /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ...rest,
+      "data-react-fancy-checkbox-group": "",
+      onBlur: (e) => {
+        if (interactive && !e.currentTarget.contains(e.relatedTarget)) exitEdit();
+      },
+      className: chunk3Z6ALUWP_cjs.cn(
+        "flex gap-3",
+        orientation === "vertical" ? "flex-col" : "flex-row flex-wrap",
+        className
+      ),
+      children: list.map((option, index) => {
+        const resolved = chunkYLGTDBB2_cjs.resolveOption(option);
+        const optionId = `${groupId}-${index}`;
+        const isChecked = value.includes(resolved.value);
+        return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex items-start gap-2", children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "input",
+            {
+              id: optionId,
+              type: "checkbox",
+              name,
+              value: String(resolved.value),
+              checked: isChecked,
+              disabled: disabled || resolved.disabled,
+              autoFocus: interactive && index === 0,
+              onChange: () => handleToggle(resolved.value),
+              className: chunk3Z6ALUWP_cjs.cn(
+                sizeClasses,
+                "cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 transition-[border-color,box-shadow] duration-150 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-[#1e1e24]",
+                chunkYLGTDBB2_cjs.dirtyRingClasses(dirty),
+                error && "border-red-500"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { className: "flex flex-col", children: [
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "label",
+              {
+                htmlFor: optionId,
+                className: chunk3Z6ALUWP_cjs.cn(
+                  "cursor-pointer text-sm text-zinc-700 dark:text-zinc-100",
+                  (disabled || resolved.disabled) && "cursor-not-allowed opacity-50"
+                ),
+                children: resolved.label
+              }
+            ),
+            resolved.description && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: resolved.description })
+          ] })
+        ] }, optionId);
+      })
+    }
+  );
+  if (label || error || description) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      chunkPPLR2DNC_cjs.Field,
+      {
+        label,
+        description,
+        error,
+        required,
+        size,
+        children: content
+      }
+    );
+  }
+  return content;
+}
+CheckboxGroup.displayName = "CheckboxGroup";
+
+exports.CheckboxGroup = CheckboxGroup;
+//# sourceMappingURL=chunk-3SQ34IQC.cjs.map
+//# sourceMappingURL=chunk-3SQ34IQC.cjs.map

package/dist/chunk-3SQ34IQC.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/CheckboxGroup/CheckboxGroup.tsx"],"names":["useId","useFieldMode","useInlineEdit","useControllableState","jsx","DisplayValue","resolveOption","cn","jsxs","dirtyRingClasses","Field"],"mappings":"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","file":"chunk-3SQ34IQC.cjs","sourcesContent":["import { useId } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { Field } from \"../Field\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { DisplayValue } from \"../mode/DisplayValue\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { dirtyRingClasses, resolveOption } from \"../inputs.utils\";\nimport type { CheckboxGroupProps } from \"./CheckboxGroup.types\";\n\nexport function CheckboxGroup<V = string>({\n  size = \"md\",\n  dirty,\n  error,\n  label,\n  description,\n  required,\n  disabled,\n  className,\n  name,\n  list,\n  value: controlledValue,\n  defaultValue = [],\n  onValueChange,\n  orientation = \"vertical\",\n  mode,\n  ...rest\n}: CheckboxGroupProps<V>) {\n  const groupId = useId();\n  const resolvedMode = useFieldMode(mode);\n  const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n  const [value, setValue] = useControllableState(\n    controlledValue,\n    defaultValue,\n    onValueChange,\n  );\n\n  const handleToggle = (optionValue: V) => {\n    const next = value.includes(optionValue)\n      ? value.filter((v) => v !== optionValue)\n      : [...value, optionValue];\n    setValue(next);\n  };\n\n  const sizeClasses = {\n    xs: \"h-3.5 w-3.5\",\n    sm: \"h-4 w-4\",\n    md: \"h-[18px] w-[18px]\",\n    lg: \"h-5 w-5\",\n    xl: \"h-6 w-6\",\n  }[size];\n\n  const content = !showControl ? (\n    <DisplayValue size={size} interactive={interactive} onActivate={enterEdit}>\n      {list\n        .map(resolveOption)\n        .filter((o) => value.includes(o.value))\n        .map((o) => o.label)\n        .join(\", \")}\n    </DisplayValue>\n  ) : (\n    <div\n      {...rest}\n      data-react-fancy-checkbox-group=\"\"\n      onBlur={(e) => {\n        if (interactive && !e.currentTarget.contains(e.relatedTarget as Node)) exitEdit();\n      }}\n      className={cn(\n        \"flex gap-3\",\n        orientation === \"vertical\" ? \"flex-col\" : \"flex-row flex-wrap\",\n        className,\n      )}\n    >\n      {list.map((option, index) => {\n        const resolved = resolveOption(option);\n        const optionId = `${groupId}-${index}`;\n        const isChecked = value.includes(resolved.value);\n\n        return (\n          <div key={optionId} className=\"flex items-start gap-2\">\n            <input\n              id={optionId}\n              type=\"checkbox\"\n              name={name}\n              value={String(resolved.value)}\n              checked={isChecked}\n              disabled={disabled || resolved.disabled}\n              autoFocus={interactive && index === 0}\n              onChange={() => handleToggle(resolved.value)}\n              className={cn(\n                sizeClasses,\n                \"cursor-pointer rounded border border-zinc-300 bg-white text-blue-600 transition-[border-color,box-shadow] duration-150 focus:ring-2 focus:ring-blue-500/40 focus:ring-offset-0 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:bg-[#1e1e24]\",\n                dirtyRingClasses(dirty),\n                error && \"border-red-500\",\n              )}\n            />\n            <div className=\"flex flex-col\">\n              <label\n                htmlFor={optionId}\n                className={cn(\n                  \"cursor-pointer text-sm text-zinc-700 dark:text-zinc-100\",\n                  (disabled || resolved.disabled) &&\n                    \"cursor-not-allowed opacity-50\",\n                )}\n              >\n                {resolved.label}\n              </label>\n              {resolved.description && (\n                <span className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n                  {resolved.description}\n                </span>\n              )}\n            </div>\n          </div>\n        );\n      })}\n    </div>\n  );\n\n  if (label || error || description) {\n    return (\n      <Field\n        label={label}\n        description={description}\n        error={error}\n        required={required}\n        size={size}\n      >\n        {content}\n      </Field>\n    );\n  }\n\n  return content;\n}\n\nCheckboxGroup.displayName = \"CheckboxGroup\";\n"]}

package/dist/chunk-3WGRVDQR.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var react = require('react');
+
+// src/hooks/use-animation.ts
+function useAnimation({
+  open,
+  enterClass,
+  exitClass
+}) {
+  const [mounted, setMounted] = react.useState(open);
+  const [animClass, setAnimClass] = react.useState(open ? enterClass : "");
+  const ref = react.useRef(null);
+  react.useEffect(() => {
+    if (open) {
+      setMounted(true);
+      setAnimClass(enterClass);
+    } else if (mounted) {
+      setAnimClass(exitClass);
+    }
+  }, [open, enterClass, exitClass, mounted]);
+  const handleAnimationEnd = react.useCallback(() => {
+    if (!open) {
+      setMounted(false);
+      setAnimClass("");
+    }
+  }, [open]);
+  react.useEffect(() => {
+    const el = ref.current;
+    if (!el) return;
+    el.addEventListener("animationend", handleAnimationEnd);
+    return () => el.removeEventListener("animationend", handleAnimationEnd);
+  }, [handleAnimationEnd, mounted]);
+  return { mounted, className: animClass, ref };
+}
+
+exports.useAnimation = useAnimation;
+//# sourceMappingURL=chunk-3WGRVDQR.cjs.map
+//# sourceMappingURL=chunk-3WGRVDQR.cjs.map

package/dist/chunk-3WGRVDQR.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-animation.ts"],"names":["useState","useRef","useEffect","useCallback"],"mappings":";;;;;AAcO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAA4C;AAC1C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAIA,eAAS,IAAI,CAAA;AAC3C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,IAAIA,cAAA,CAAS,IAAA,GAAO,aAAa,EAAE,CAAA;AACjE,EAAA,MAAM,GAAA,GAAMC,aAA2B,IAAI,CAAA;AAE3C,EAAAC,eAAA,CAAU,MAAM;AACd,IAAA,IAAI,IAAA,EAAM;AACR,MAAA,UAAA,CAAW,IAAI,CAAA;AACf,MAAA,YAAA,CAAa,UAAU,CAAA;AAAA,IACzB,WAAW,OAAA,EAAS;AAClB,MAAA,YAAA,CAAa,SAAS,CAAA;AAAA,IACxB;AAAA,EACF,GAAG,CAAC,IAAA,EAAM,UAAA,EAAY,SAAA,EAAW,OAAO,CAAC,CAAA;AAEzC,EAAA,MAAM,kBAAA,GAAqBC,kBAAY,MAAM;AAC3C,IAAA,IAAI,CAAC,IAAA,EAAM;AACT,MAAA,UAAA,CAAW,KAAK,CAAA;AAChB,MAAA,YAAA,CAAa,EAAE,CAAA;AAAA,IACjB;AAAA,EACF,CAAA,EAAG,CAAC,IAAI,CAAC,CAAA;AAET,EAAAD,eAAA,CAAU,MAAM;AACd,IAAA,MAAM,KAAK,GAAA,CAAI,OAAA;AACf,IAAA,IAAI,CAAC,EAAA,EAAI;AAET,IAAA,EAAA,CAAG,gBAAA,CAAiB,gBAAgB,kBAAkB,CAAA;AACtD,IAAA,OAAO,MAAM,EAAA,CAAG,mBAAA,CAAoB,cAAA,EAAgB,kBAAkB,CAAA;AAAA,EACxE,CAAA,EAAG,CAAC,kBAAA,EAAoB,OAAO,CAAC,CAAA;AAEhC,EAAA,OAAO,EAAE,OAAA,EAAS,SAAA,EAAW,SAAA,EAAW,GAAA,EAAI;AAC9C","file":"chunk-3WGRVDQR.cjs","sourcesContent":["import { useCallback, useEffect, useRef, useState } from \"react\";\n\ninterface UseAnimationOptions {\n  open: boolean;\n  enterClass: string;\n  exitClass: string;\n}\n\ninterface UseAnimationReturn {\n  mounted: boolean;\n  className: string;\n  ref: React.RefObject<HTMLElement | null>;\n}\n\nexport function useAnimation({\n  open,\n  enterClass,\n  exitClass,\n}: UseAnimationOptions): UseAnimationReturn {\n  const [mounted, setMounted] = useState(open);\n  const [animClass, setAnimClass] = useState(open ? enterClass : \"\");\n  const ref = useRef<HTMLElement | null>(null);\n\n  useEffect(() => {\n    if (open) {\n      setMounted(true);\n      setAnimClass(enterClass);\n    } else if (mounted) {\n      setAnimClass(exitClass);\n    }\n  }, [open, enterClass, exitClass, mounted]);\n\n  const handleAnimationEnd = useCallback(() => {\n    if (!open) {\n      setMounted(false);\n      setAnimClass(\"\");\n    }\n  }, [open]);\n\n  useEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n\n    el.addEventListener(\"animationend\", handleAnimationEnd);\n    return () => el.removeEventListener(\"animationend\", handleAnimationEnd);\n  }, [handleAnimationEnd, mounted]);\n\n  return { mounted, className: animClass, ref };\n}\n"]}