@particle-academy/react-fancy 5.12.0 → 5.13.1

package/dist/chunk-CHADHN6M.js

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

package/dist/chunk-CHADHN6M.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-animation.ts"],"names":[],"mappings":";;;AAcO,SAAS,YAAA,CAAa;AAAA,EAC3B,IAAA;AAAA,EACA,UAAA;AAAA,EACA;AACF,CAAA,EAA4C;AAC1C,EAAA,MAAM,CAAC,OAAA,EAAS,UAAU,CAAA,GAAI,SAAS,IAAI,CAAA;AAC3C,EAAA,MAAM,CAAC,SAAA,EAAW,YAAY,IAAI,QAAA,CAAS,IAAA,GAAO,aAAa,EAAE,CAAA;AACjE,EAAA,MAAM,GAAA,GAAM,OAA2B,IAAI,CAAA;AAE3C,EAAA,SAAA,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,GAAqB,YAAY,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,EAAA,SAAA,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-CHADHN6M.js","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"]}

package/dist/chunk-CPY7NHXM.js

@@ -0,0 +1,88 @@
+import { useRef, useEffect, useCallback } from 'react';
+
+// src/hooks/use-pan-zoom.ts
+function usePanZoom({
+  viewport,
+  setViewport,
+  minZoom,
+  maxZoom,
+  pannable,
+  zoomable,
+  containerRef
+}) {
+  const isPanningRef = useRef(false);
+  const startRef = useRef({ x: 0, y: 0, panX: 0, panY: 0 });
+  const viewportRef = useRef(viewport);
+  viewportRef.current = viewport;
+  const setViewportRef = useRef(setViewport);
+  setViewportRef.current = setViewport;
+  const zoomableRef = useRef(zoomable);
+  zoomableRef.current = zoomable;
+  const minZoomRef = useRef(minZoom);
+  minZoomRef.current = minZoom;
+  const maxZoomRef = useRef(maxZoom);
+  maxZoomRef.current = maxZoom;
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) return;
+    function handleWheel(e) {
+      if (!zoomableRef.current) return;
+      if (!e.ctrlKey && !e.metaKey) return;
+      e.preventDefault();
+      const rect = container.getBoundingClientRect();
+      const mouseX = e.clientX - rect.left;
+      const mouseY = e.clientY - rect.top;
+      setViewportRef.current((prev) => {
+        const factor = 1 - e.deltaY * 1e-3;
+        const newZoom = Math.min(maxZoomRef.current, Math.max(minZoomRef.current, prev.zoom * factor));
+        const ratio = newZoom / prev.zoom;
+        return {
+          zoom: newZoom,
+          panX: mouseX - (mouseX - prev.panX) * ratio,
+          panY: mouseY - (mouseY - prev.panY) * ratio
+        };
+      });
+    }
+    container.addEventListener("wheel", handleWheel, { passive: false });
+    return () => {
+      container.removeEventListener("wheel", handleWheel);
+    };
+  }, [containerRef]);
+  const onPointerDown = useCallback(
+    (e) => {
+      if (!pannable) return;
+      if (e.button !== 0) return;
+      const target = e.target;
+      if (target !== containerRef.current && !target.hasAttribute("data-canvas-bg")) return;
+      isPanningRef.current = true;
+      startRef.current = { x: e.clientX, y: e.clientY, panX: viewport.panX, panY: viewport.panY };
+      e.target.setPointerCapture(e.pointerId);
+      e.preventDefault();
+    },
+    [pannable, viewport.panX, viewport.panY, containerRef]
+  );
+  const onPointerMove = useCallback(
+    (e) => {
+      if (!isPanningRef.current) return;
+      const dx = e.clientX - startRef.current.x;
+      const dy = e.clientY - startRef.current.y;
+      setViewport((prev) => ({
+        ...prev,
+        panX: startRef.current.panX + dx,
+        panY: startRef.current.panY + dy
+      }));
+    },
+    [setViewport]
+  );
+  const onPointerUp = useCallback(() => {
+    isPanningRef.current = false;
+  }, []);
+  return {
+    containerProps: { onPointerDown, onPointerMove, onPointerUp },
+    isPanning: isPanningRef.current
+  };
+}
+
+export { usePanZoom };
+//# sourceMappingURL=chunk-CPY7NHXM.js.map
+//# sourceMappingURL=chunk-CPY7NHXM.js.map

package/dist/chunk-CPY7NHXM.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/hooks/use-pan-zoom.ts"],"names":[],"mappings":"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","file":"chunk-CPY7NHXM.js","sourcesContent":["import { useCallback, useEffect, useRef } from \"react\";\n\nexport interface ViewportState {\n  panX: number;\n  panY: number;\n  zoom: number;\n}\n\ninterface UsePanZoomOptions {\n  viewport: ViewportState;\n  setViewport: (vp: ViewportState | ((prev: ViewportState) => ViewportState)) => void;\n  minZoom: number;\n  maxZoom: number;\n  pannable: boolean;\n  zoomable: boolean;\n  containerRef: React.RefObject<HTMLElement | null>;\n}\n\ninterface UsePanZoomReturn {\n  containerProps: {\n    onPointerDown: (e: React.PointerEvent) => void;\n    onPointerMove: (e: React.PointerEvent) => void;\n    onPointerUp: (e: React.PointerEvent) => void;\n  };\n  isPanning: boolean;\n}\n\nexport function usePanZoom({\n  viewport,\n  setViewport,\n  minZoom,\n  maxZoom,\n  pannable,\n  zoomable,\n  containerRef,\n}: UsePanZoomOptions): UsePanZoomReturn {\n  const isPanningRef = useRef(false);\n  const startRef = useRef({ x: 0, y: 0, panX: 0, panY: 0 });\n\n  // Store latest values in refs so the native wheel listener always sees current state\n  const viewportRef = useRef(viewport);\n  viewportRef.current = viewport;\n  const setViewportRef = useRef(setViewport);\n  setViewportRef.current = setViewport;\n  const zoomableRef = useRef(zoomable);\n  zoomableRef.current = zoomable;\n  const minZoomRef = useRef(minZoom);\n  minZoomRef.current = minZoom;\n  const maxZoomRef = useRef(maxZoom);\n  maxZoomRef.current = maxZoom;\n\n  // Attach a non-passive wheel listener so preventDefault() actually stops page scroll\n  useEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    function handleWheel(e: WheelEvent) {\n      if (!zoomableRef.current) return;\n      // Require Ctrl+wheel (or pinch gesture) to zoom — don't hijack normal page scroll\n      if (!e.ctrlKey && !e.metaKey) return;\n      e.preventDefault();\n\n      const rect = container!.getBoundingClientRect();\n      const mouseX = e.clientX - rect.left;\n      const mouseY = e.clientY - rect.top;\n\n      setViewportRef.current((prev) => {\n        const factor = 1 - e.deltaY * 0.001;\n        const newZoom = Math.min(maxZoomRef.current, Math.max(minZoomRef.current, prev.zoom * factor));\n        const ratio = newZoom / prev.zoom;\n\n        return {\n          zoom: newZoom,\n          panX: mouseX - (mouseX - prev.panX) * ratio,\n          panY: mouseY - (mouseY - prev.panY) * ratio,\n        };\n      });\n    }\n\n    container.addEventListener(\"wheel\", handleWheel, { passive: false });\n    return () => {\n      container.removeEventListener(\"wheel\", handleWheel);\n    };\n  }, [containerRef]);\n\n  const onPointerDown = useCallback(\n    (e: React.PointerEvent) => {\n      if (!pannable) return;\n      // Only pan on primary button and when clicking the background\n      if (e.button !== 0) return;\n      const target = e.target as HTMLElement;\n      if (target !== containerRef.current && !target.hasAttribute(\"data-canvas-bg\")) return;\n\n      isPanningRef.current = true;\n      startRef.current = { x: e.clientX, y: e.clientY, panX: viewport.panX, panY: viewport.panY };\n      (e.target as HTMLElement).setPointerCapture(e.pointerId);\n      e.preventDefault();\n    },\n    [pannable, viewport.panX, viewport.panY, containerRef],\n  );\n\n  const onPointerMove = useCallback(\n    (e: React.PointerEvent) => {\n      if (!isPanningRef.current) return;\n      const dx = e.clientX - startRef.current.x;\n      const dy = e.clientY - startRef.current.y;\n      setViewport((prev) => ({\n        ...prev,\n        panX: startRef.current.panX + dx,\n        panY: startRef.current.panY + dy,\n      }));\n    },\n    [setViewport],\n  );\n\n  const onPointerUp = useCallback(() => {\n    isPanningRef.current = false;\n  }, []);\n\n  return {\n    containerProps: { onPointerDown, onPointerMove, onPointerUp },\n    isPanning: isPanningRef.current,\n  };\n}\n"]}

package/dist/chunk-CS4GQXYY.js

@@ -0,0 +1,131 @@
+import { dirtyRingClasses } from './chunk-GFYSELJF.js';
+import { useInlineEdit } from './chunk-OL53XYHF.js';
+import { useFieldMode } from './chunk-NRXK42LO.js';
+import { useControllableState } from './chunk-6FQGMVF2.js';
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef, useId, useRef, useEffect } from 'react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var Checkbox = forwardRef(
+  ({
+    size = "md",
+    dirty,
+    error,
+    label,
+    description,
+    required,
+    disabled,
+    className,
+    id,
+    name,
+    checked: controlledChecked,
+    defaultChecked = false,
+    onCheckedChange,
+    indeterminate,
+    mode,
+    ...rest
+  }, ref) => {
+    const autoId = useId();
+    const checkboxId = id ?? autoId;
+    const internalRef = useRef(null);
+    const resolvedMode = useFieldMode(mode);
+    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);
+    const [checked, setChecked] = useControllableState(
+      controlledChecked,
+      defaultChecked,
+      onCheckedChange
+    );
+    useEffect(() => {
+      const el = internalRef.current;
+      if (el) {
+        el.indeterminate = indeterminate ?? false;
+      }
+    }, [indeterminate]);
+    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 glyph = indeterminate ? "\u2014" : checked ? "\u2713" : "\u2715";
+    return /* @__PURE__ */ jsxs("div", { ...rest, "data-react-fancy-checkbox": "", className: cn("flex items-start gap-2", className), children: [
+      !showControl ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-react-fancy-display": "",
+          "data-mode": "view",
+          role: interactive ? "button" : void 0,
+          tabIndex: interactive ? 0 : void 0,
+          title: interactive ? "Click to edit" : void 0,
+          onClick: interactive ? enterEdit : void 0,
+          onKeyDown: interactive ? (e) => {
+            if (e.key === "Enter" || e.key === " ") {
+              e.preventDefault();
+              enterEdit();
+            }
+          } : void 0,
+          className: cn(
+            "flex shrink-0 items-center justify-center text-zinc-700 dark:text-zinc-200",
+            sizeClasses,
+            interactive && "cursor-pointer rounded outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white"
+          ),
+          "aria-hidden": interactive ? void 0 : "true",
+          children: glyph
+        }
+      ) : /* @__PURE__ */ jsx("div", { className: "relative flex items-center", children: /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref: (node) => {
+            internalRef.current = node;
+            if (typeof ref === "function") {
+              ref(node);
+            } else if (ref) {
+              ref.current = node;
+            }
+          },
+          id: checkboxId,
+          type: "checkbox",
+          name,
+          disabled,
+          required,
+          checked,
+          autoFocus: interactive,
+          onBlur: () => {
+            if (interactive) exitEdit();
+          },
+          onChange: (e) => setChecked(e.target.checked),
+          className: 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]",
+            dirtyRingClasses(dirty),
+            error && "border-red-500"
+          )
+        }
+      ) }),
+      (label || description) && /* @__PURE__ */ jsxs("div", { className: "flex flex-col", children: [
+        label && /* @__PURE__ */ jsxs(
+          "label",
+          {
+            htmlFor: checkboxId,
+            className: cn(
+              "cursor-pointer text-sm text-zinc-700 dark:text-zinc-100",
+              disabled && "cursor-not-allowed opacity-50"
+            ),
+            children: [
+              label,
+              required && /* @__PURE__ */ jsx("span", { className: "ml-0.5 text-red-500", children: "*" })
+            ]
+          }
+        ),
+        description && /* @__PURE__ */ jsx("span", { className: "text-xs text-zinc-500 dark:text-zinc-400", children: description }),
+        error && /* @__PURE__ */ jsx("span", { className: "text-xs text-red-500", children: error })
+      ] })
+    ] });
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };
+//# sourceMappingURL=chunk-CS4GQXYY.js.map
+//# sourceMappingURL=chunk-CS4GQXYY.js.map

package/dist/chunk-CS4GQXYY.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/inputs/Checkbox/Checkbox.tsx"],"names":[],"mappings":"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","file":"chunk-CS4GQXYY.js","sourcesContent":["import { forwardRef, useEffect, useId, useRef } from \"react\";\nimport { cn } from \"../../../utils/cn\";\nimport { useControllableState } from \"../../../hooks/use-controllable-state\";\nimport { useFieldMode } from \"../mode/FieldMode.context\";\nimport { useInlineEdit } from \"../mode/useInlineEdit\";\nimport { dirtyRingClasses } from \"../inputs.utils\";\nimport type { CheckboxProps } from \"./Checkbox.types\";\n\nexport const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(\n  (\n    {\n      size = \"md\",\n      dirty,\n      error,\n      label,\n      description,\n      required,\n      disabled,\n      className,\n      id,\n      name,\n      checked: controlledChecked,\n      defaultChecked = false,\n      onCheckedChange,\n      indeterminate,\n      mode,\n      ...rest\n    },\n    ref,\n  ) => {\n    const autoId = useId();\n    const checkboxId = id ?? autoId;\n    const internalRef = useRef<HTMLInputElement | null>(null);\n    const resolvedMode = useFieldMode(mode);\n    const { showControl, interactive, enterEdit, exitEdit } = useInlineEdit(resolvedMode, disabled);\n    const [checked, setChecked] = useControllableState(\n      controlledChecked,\n      defaultChecked,\n      onCheckedChange,\n    );\n\n    useEffect(() => {\n      const el = internalRef.current;\n      if (el) {\n        el.indeterminate = indeterminate ?? false;\n      }\n    }, [indeterminate]);\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 glyph = indeterminate ? \"—\" : checked ? \"✓\" : \"✕\";\n\n    return (\n      <div {...rest} data-react-fancy-checkbox=\"\" className={cn(\"flex items-start gap-2\", className)}>\n        {!showControl ? (\n          <span\n            data-react-fancy-display=\"\"\n            data-mode=\"view\"\n            role={interactive ? \"button\" : undefined}\n            tabIndex={interactive ? 0 : undefined}\n            title={interactive ? \"Click to edit\" : undefined}\n            onClick={interactive ? enterEdit : undefined}\n            onKeyDown={\n              interactive\n                ? (e) => {\n                    if (e.key === \"Enter\" || e.key === \" \") {\n                      e.preventDefault();\n                      enterEdit();\n                    }\n                  }\n                : undefined\n            }\n            className={cn(\n              \"flex shrink-0 items-center justify-center text-zinc-700 dark:text-zinc-200\",\n              sizeClasses,\n              interactive &&\n                \"cursor-pointer rounded outline-none transition-colors hover:text-zinc-900 focus-visible:ring-2 focus-visible:ring-blue-500/40 dark:hover:text-white\",\n            )}\n            aria-hidden={interactive ? undefined : \"true\"}\n          >\n            {glyph}\n          </span>\n        ) : (\n        <div className=\"relative flex items-center\">\n          <input\n            ref={(node) => {\n              internalRef.current = node;\n              if (typeof ref === \"function\") {\n                ref(node);\n              } else if (ref) {\n                ref.current = node;\n              }\n            }}\n            id={checkboxId}\n            type=\"checkbox\"\n            name={name}\n            disabled={disabled}\n            required={required}\n            checked={checked}\n            autoFocus={interactive}\n            onBlur={() => {\n              if (interactive) exitEdit();\n            }}\n            onChange={(e) => setChecked(e.target.checked)}\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>\n        )}\n        {(label || description) && (\n          <div className=\"flex flex-col\">\n            {label && (\n              <label\n                htmlFor={checkboxId}\n                className={cn(\n                  \"cursor-pointer text-sm text-zinc-700 dark:text-zinc-100\",\n                  disabled && \"cursor-not-allowed opacity-50\",\n                )}\n              >\n                {label}\n                {required && <span className=\"ml-0.5 text-red-500\">*</span>}\n              </label>\n            )}\n            {description && (\n              <span className=\"text-xs text-zinc-500 dark:text-zinc-400\">\n                {description}\n              </span>\n            )}\n            {error && <span className=\"text-xs text-red-500\">{error}</span>}\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nCheckbox.displayName = \"Checkbox\";\n"]}

package/dist/chunk-CTMJYV3O.js

@@ -0,0 +1,99 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { X } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+// src/components/Callout/Callout.colors.ts
+var calloutContainer = {
+  slate: "border-slate-500 bg-slate-50 text-slate-900 dark:border-slate-400 dark:bg-slate-950/50 dark:text-slate-100",
+  gray: "border-gray-500 bg-gray-50 text-gray-900 dark:border-gray-400 dark:bg-gray-950/50 dark:text-gray-100",
+  zinc: "border-zinc-500 bg-zinc-50 text-zinc-900 dark:border-zinc-400 dark:bg-zinc-950/50 dark:text-zinc-100",
+  neutral: "border-neutral-500 bg-neutral-50 text-neutral-900 dark:border-neutral-400 dark:bg-neutral-950/50 dark:text-neutral-100",
+  stone: "border-stone-500 bg-stone-50 text-stone-900 dark:border-stone-400 dark:bg-stone-950/50 dark:text-stone-100",
+  red: "border-red-500 bg-red-50 text-red-900 dark:border-red-400 dark:bg-red-950/50 dark:text-red-100",
+  orange: "border-orange-500 bg-orange-50 text-orange-900 dark:border-orange-400 dark:bg-orange-950/50 dark:text-orange-100",
+  amber: "border-amber-500 bg-amber-50 text-amber-900 dark:border-amber-400 dark:bg-amber-950/50 dark:text-amber-100",
+  yellow: "border-yellow-500 bg-yellow-50 text-yellow-900 dark:border-yellow-400 dark:bg-yellow-950/50 dark:text-yellow-100",
+  lime: "border-lime-500 bg-lime-50 text-lime-900 dark:border-lime-400 dark:bg-lime-950/50 dark:text-lime-100",
+  green: "border-green-500 bg-green-50 text-green-900 dark:border-green-400 dark:bg-green-950/50 dark:text-green-100",
+  emerald: "border-emerald-500 bg-emerald-50 text-emerald-900 dark:border-emerald-400 dark:bg-emerald-950/50 dark:text-emerald-100",
+  teal: "border-teal-500 bg-teal-50 text-teal-900 dark:border-teal-400 dark:bg-teal-950/50 dark:text-teal-100",
+  cyan: "border-cyan-500 bg-cyan-50 text-cyan-900 dark:border-cyan-400 dark:bg-cyan-950/50 dark:text-cyan-100",
+  sky: "border-sky-500 bg-sky-50 text-sky-900 dark:border-sky-400 dark:bg-sky-950/50 dark:text-sky-100",
+  blue: "border-blue-500 bg-blue-50 text-blue-900 dark:border-blue-400 dark:bg-blue-950/50 dark:text-blue-100",
+  indigo: "border-indigo-500 bg-indigo-50 text-indigo-900 dark:border-indigo-400 dark:bg-indigo-950/50 dark:text-indigo-100",
+  violet: "border-violet-500 bg-violet-50 text-violet-900 dark:border-violet-400 dark:bg-violet-950/50 dark:text-violet-100",
+  purple: "border-purple-500 bg-purple-50 text-purple-900 dark:border-purple-400 dark:bg-purple-950/50 dark:text-purple-100",
+  fuchsia: "border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 dark:border-fuchsia-400 dark:bg-fuchsia-950/50 dark:text-fuchsia-100",
+  pink: "border-pink-500 bg-pink-50 text-pink-900 dark:border-pink-400 dark:bg-pink-950/50 dark:text-pink-100",
+  rose: "border-rose-500 bg-rose-50 text-rose-900 dark:border-rose-400 dark:bg-rose-950/50 dark:text-rose-100"
+};
+var calloutIcon = {
+  slate: "text-slate-500 dark:text-slate-400",
+  gray: "text-gray-500 dark:text-gray-400",
+  zinc: "text-zinc-500 dark:text-zinc-400",
+  neutral: "text-neutral-500 dark:text-neutral-400",
+  stone: "text-stone-500 dark:text-stone-400",
+  red: "text-red-500 dark:text-red-400",
+  orange: "text-orange-500 dark:text-orange-400",
+  amber: "text-amber-500 dark:text-amber-400",
+  yellow: "text-yellow-500 dark:text-yellow-400",
+  lime: "text-lime-500 dark:text-lime-400",
+  green: "text-green-500 dark:text-green-400",
+  emerald: "text-emerald-500 dark:text-emerald-400",
+  teal: "text-teal-500 dark:text-teal-400",
+  cyan: "text-cyan-500 dark:text-cyan-400",
+  sky: "text-sky-500 dark:text-sky-400",
+  blue: "text-blue-500 dark:text-blue-400",
+  indigo: "text-indigo-500 dark:text-indigo-400",
+  violet: "text-violet-500 dark:text-violet-400",
+  purple: "text-purple-500 dark:text-purple-400",
+  fuchsia: "text-fuchsia-500 dark:text-fuchsia-400",
+  pink: "text-pink-500 dark:text-pink-400",
+  rose: "text-rose-500 dark:text-rose-400"
+};
+var Callout = forwardRef(
+  ({
+    children,
+    color = "blue",
+    icon,
+    dismissible = false,
+    onDismiss,
+    className
+  }, ref) => {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        ref,
+        role: "alert",
+        "data-react-fancy-callout": "",
+        className: cn(
+          "flex items-start gap-3 rounded-lg border-l-4 p-4",
+          calloutContainer[color],
+          className
+        ),
+        children: [
+          icon && /* @__PURE__ */ jsx("span", { className: cn("mt-0.5 shrink-0", calloutIcon[color]), children: icon }),
+          /* @__PURE__ */ jsx("div", { className: "min-w-0 flex-1", children }),
+          dismissible && /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              onClick: onDismiss,
+              className: cn(
+                "shrink-0 rounded p-0.5 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-current"
+              ),
+              "aria-label": "Dismiss",
+              children: /* @__PURE__ */ jsx(X, { size: 16 })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Callout.displayName = "Callout";
+
+export { Callout };
+//# sourceMappingURL=chunk-CTMJYV3O.js.map
+//# sourceMappingURL=chunk-CTMJYV3O.js.map

package/dist/chunk-CTMJYV3O.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Callout/Callout.colors.ts","../src/components/Callout/Callout.tsx"],"names":[],"mappings":"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","file":"chunk-CTMJYV3O.js","sourcesContent":["// AUTO-GENERATED by scripts/gen-callout-colors — do not edit by hand.\n// Literal Tailwind class strings for every color in the v4 palette so the\n// scanner can detect them in the published dist (template-built names are\n// invisible to Tailwind's JIT). Regenerate after changing the palette.\nimport type { Color } from \"../../utils/types\";\n\nexport const calloutContainer: Record<Color, string> = {\n  slate: \"border-slate-500 bg-slate-50 text-slate-900 dark:border-slate-400 dark:bg-slate-950/50 dark:text-slate-100\",\n  gray: \"border-gray-500 bg-gray-50 text-gray-900 dark:border-gray-400 dark:bg-gray-950/50 dark:text-gray-100\",\n  zinc: \"border-zinc-500 bg-zinc-50 text-zinc-900 dark:border-zinc-400 dark:bg-zinc-950/50 dark:text-zinc-100\",\n  neutral: \"border-neutral-500 bg-neutral-50 text-neutral-900 dark:border-neutral-400 dark:bg-neutral-950/50 dark:text-neutral-100\",\n  stone: \"border-stone-500 bg-stone-50 text-stone-900 dark:border-stone-400 dark:bg-stone-950/50 dark:text-stone-100\",\n  red: \"border-red-500 bg-red-50 text-red-900 dark:border-red-400 dark:bg-red-950/50 dark:text-red-100\",\n  orange: \"border-orange-500 bg-orange-50 text-orange-900 dark:border-orange-400 dark:bg-orange-950/50 dark:text-orange-100\",\n  amber: \"border-amber-500 bg-amber-50 text-amber-900 dark:border-amber-400 dark:bg-amber-950/50 dark:text-amber-100\",\n  yellow: \"border-yellow-500 bg-yellow-50 text-yellow-900 dark:border-yellow-400 dark:bg-yellow-950/50 dark:text-yellow-100\",\n  lime: \"border-lime-500 bg-lime-50 text-lime-900 dark:border-lime-400 dark:bg-lime-950/50 dark:text-lime-100\",\n  green: \"border-green-500 bg-green-50 text-green-900 dark:border-green-400 dark:bg-green-950/50 dark:text-green-100\",\n  emerald: \"border-emerald-500 bg-emerald-50 text-emerald-900 dark:border-emerald-400 dark:bg-emerald-950/50 dark:text-emerald-100\",\n  teal: \"border-teal-500 bg-teal-50 text-teal-900 dark:border-teal-400 dark:bg-teal-950/50 dark:text-teal-100\",\n  cyan: \"border-cyan-500 bg-cyan-50 text-cyan-900 dark:border-cyan-400 dark:bg-cyan-950/50 dark:text-cyan-100\",\n  sky: \"border-sky-500 bg-sky-50 text-sky-900 dark:border-sky-400 dark:bg-sky-950/50 dark:text-sky-100\",\n  blue: \"border-blue-500 bg-blue-50 text-blue-900 dark:border-blue-400 dark:bg-blue-950/50 dark:text-blue-100\",\n  indigo: \"border-indigo-500 bg-indigo-50 text-indigo-900 dark:border-indigo-400 dark:bg-indigo-950/50 dark:text-indigo-100\",\n  violet: \"border-violet-500 bg-violet-50 text-violet-900 dark:border-violet-400 dark:bg-violet-950/50 dark:text-violet-100\",\n  purple: \"border-purple-500 bg-purple-50 text-purple-900 dark:border-purple-400 dark:bg-purple-950/50 dark:text-purple-100\",\n  fuchsia: \"border-fuchsia-500 bg-fuchsia-50 text-fuchsia-900 dark:border-fuchsia-400 dark:bg-fuchsia-950/50 dark:text-fuchsia-100\",\n  pink: \"border-pink-500 bg-pink-50 text-pink-900 dark:border-pink-400 dark:bg-pink-950/50 dark:text-pink-100\",\n  rose: \"border-rose-500 bg-rose-50 text-rose-900 dark:border-rose-400 dark:bg-rose-950/50 dark:text-rose-100\",\n};\n\nexport const calloutIcon: Record<Color, string> = {\n  slate: \"text-slate-500 dark:text-slate-400\",\n  gray: \"text-gray-500 dark:text-gray-400\",\n  zinc: \"text-zinc-500 dark:text-zinc-400\",\n  neutral: \"text-neutral-500 dark:text-neutral-400\",\n  stone: \"text-stone-500 dark:text-stone-400\",\n  red: \"text-red-500 dark:text-red-400\",\n  orange: \"text-orange-500 dark:text-orange-400\",\n  amber: \"text-amber-500 dark:text-amber-400\",\n  yellow: \"text-yellow-500 dark:text-yellow-400\",\n  lime: \"text-lime-500 dark:text-lime-400\",\n  green: \"text-green-500 dark:text-green-400\",\n  emerald: \"text-emerald-500 dark:text-emerald-400\",\n  teal: \"text-teal-500 dark:text-teal-400\",\n  cyan: \"text-cyan-500 dark:text-cyan-400\",\n  sky: \"text-sky-500 dark:text-sky-400\",\n  blue: \"text-blue-500 dark:text-blue-400\",\n  indigo: \"text-indigo-500 dark:text-indigo-400\",\n  violet: \"text-violet-500 dark:text-violet-400\",\n  purple: \"text-purple-500 dark:text-purple-400\",\n  fuchsia: \"text-fuchsia-500 dark:text-fuchsia-400\",\n  pink: \"text-pink-500 dark:text-pink-400\",\n  rose: \"text-rose-500 dark:text-rose-400\",\n};\n","import { forwardRef } from \"react\";\nimport { X } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport type { CalloutProps } from \"./Callout.types\";\nimport { calloutContainer, calloutIcon } from \"./Callout.colors\";\n\nexport const Callout = forwardRef<HTMLDivElement, CalloutProps>(\n  (\n    {\n      children,\n      color = \"blue\",\n      icon,\n      dismissible = false,\n      onDismiss,\n      className,\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        ref={ref}\n        role=\"alert\"\n        data-react-fancy-callout=\"\"\n        className={cn(\n          \"flex items-start gap-3 rounded-lg border-l-4 p-4\",\n          calloutContainer[color],\n          className,\n        )}\n      >\n        {icon && (\n          <span className={cn(\"mt-0.5 shrink-0\", calloutIcon[color])}>\n            {icon}\n          </span>\n        )}\n        <div className=\"min-w-0 flex-1\">{children}</div>\n        {dismissible && (\n          <button\n            type=\"button\"\n            onClick={onDismiss}\n            className={cn(\n              \"shrink-0 rounded p-0.5 opacity-70 transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-current\",\n            )}\n            aria-label=\"Dismiss\"\n          >\n            <X size={16} />\n          </button>\n        )}\n      </div>\n    );\n  },\n);\n\nCallout.displayName = \"Callout\";\n"]}

package/dist/chunk-CZZH45GQ.cjs

@@ -0,0 +1,122 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+var lucideReact = require('lucide-react');
+
+var AccordionContext = react.createContext(
+  null
+);
+function useAccordion() {
+  const ctx = react.useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error(
+      "Accordion compound components must be used within <Accordion>"
+    );
+  }
+  return ctx;
+}
+var AccordionItemContext = react.createContext("");
+function useAccordionItem() {
+  return react.useContext(AccordionItemContext);
+}
+function AccordionItem({
+  children,
+  value,
+  className
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionItemContext.Provider, { value, children: /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-accordion-item": "",
+      className: chunk3Z6ALUWP_cjs.cn(
+        "border-b border-zinc-200 dark:border-zinc-700",
+        className
+      ),
+      children
+    }
+  ) });
+}
+AccordionItem.displayName = "AccordionItem";
+function AccordionTrigger({
+  children,
+  className
+}) {
+  const { openItems, toggle } = useAccordion();
+  const value = useAccordionItem();
+  const isOpen = openItems.includes(value);
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "button",
+    {
+      "data-react-fancy-accordion-trigger": "",
+      type: "button",
+      onClick: () => toggle(value),
+      "aria-expanded": isOpen,
+      className: chunk3Z6ALUWP_cjs.cn(
+        "flex w-full items-center justify-between py-4 text-left text-sm font-medium transition-colors hover:text-zinc-600 dark:hover:text-zinc-300",
+        className
+      ),
+      children: [
+        children,
+        /* @__PURE__ */ jsxRuntime.jsx(lucideReact.ChevronDown, { size: 16, className: chunk3Z6ALUWP_cjs.cn("shrink-0 transition-transform duration-200", isOpen && "rotate-180") })
+      ]
+    }
+  );
+}
+AccordionTrigger.displayName = "AccordionTrigger";
+function AccordionContent({
+  children,
+  className
+}) {
+  const { openItems } = useAccordion();
+  const value = useAccordionItem();
+  const isOpen = openItems.includes(value);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-accordion-content": "",
+      className: chunk3Z6ALUWP_cjs.cn(
+        "grid transition-all duration-200",
+        isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: chunk3Z6ALUWP_cjs.cn("pb-4 text-sm text-zinc-600 dark:text-zinc-400", className), children }) })
+    }
+  );
+}
+AccordionContent.displayName = "AccordionContent";
+function AccordionRoot({
+  children,
+  type = "single",
+  defaultOpen = [],
+  className
+}) {
+  const [openItems, setOpenItems] = react.useState(defaultOpen);
+  const multiple = type === "multiple";
+  const toggle = react.useCallback(
+    (value) => {
+      setOpenItems((prev) => {
+        if (prev.includes(value)) {
+          return prev.filter((v) => v !== value);
+        }
+        return multiple ? [...prev, value] : [value];
+      });
+    },
+    [multiple]
+  );
+  const ctx = react.useMemo(
+    () => ({ openItems, toggle, multiple }),
+    [openItems, toggle, multiple]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-accordion": "", className: chunk3Z6ALUWP_cjs.cn(className), children }) });
+}
+var Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+
+exports.Accordion = Accordion;
+exports.useAccordion = useAccordion;
+//# sourceMappingURL=chunk-CZZH45GQ.cjs.map
+//# sourceMappingURL=chunk-CZZH45GQ.cjs.map

package/dist/chunk-CZZH45GQ.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Accordion/Accordion.context.ts","../src/components/Accordion/AccordionItem.tsx","../src/components/Accordion/AccordionTrigger.tsx","../src/components/Accordion/AccordionContent.tsx","../src/components/Accordion/Accordion.tsx"],"names":["createContext","useContext","jsx","cn","jsxs","ChevronDown","useState","useCallback","useMemo"],"mappings":"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","file":"chunk-CZZH45GQ.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { AccordionContextValue } from \"./Accordion.types\";\n\nexport const AccordionContext = createContext<AccordionContextValue | null>(\n  null,\n);\n\nexport function useAccordion(): AccordionContextValue {\n  const ctx = useContext(AccordionContext);\n  if (!ctx) {\n    throw new Error(\n      \"Accordion compound components must be used within <Accordion>\",\n    );\n  }\n  return ctx;\n}\n\nexport const AccordionItemContext = createContext<string>(\"\");\n\nexport function useAccordionItem(): string {\n  return useContext(AccordionItemContext);\n}\n","import { cn } from \"../../utils/cn\";\nimport { AccordionItemContext } from \"./Accordion.context\";\nimport type { AccordionItemProps } from \"./Accordion.types\";\n\nexport function AccordionItem({\n  children,\n  value,\n  className,\n}: AccordionItemProps) {\n  return (\n    <AccordionItemContext.Provider value={value}>\n      <div\n        data-react-fancy-accordion-item=\"\"\n        className={cn(\n          \"border-b border-zinc-200 dark:border-zinc-700\",\n          className,\n        )}\n      >\n        {children}\n      </div>\n    </AccordionItemContext.Provider>\n  );\n}\n\nAccordionItem.displayName = \"AccordionItem\";\n","import { ChevronDown } from \"lucide-react\";\nimport { cn } from \"../../utils/cn\";\nimport { useAccordion, useAccordionItem } from \"./Accordion.context\";\nimport type { AccordionTriggerProps } from \"./Accordion.types\";\n\nexport function AccordionTrigger({\n  children,\n  className,\n}: AccordionTriggerProps) {\n  const { openItems, toggle } = useAccordion();\n  const value = useAccordionItem();\n  const isOpen = openItems.includes(value);\n\n  return (\n    <button\n      data-react-fancy-accordion-trigger=\"\"\n      type=\"button\"\n      onClick={() => toggle(value)}\n      aria-expanded={isOpen}\n      className={cn(\n        \"flex w-full items-center justify-between py-4 text-left text-sm font-medium transition-colors hover:text-zinc-600 dark:hover:text-zinc-300\",\n        className,\n      )}\n    >\n      {children}\n      <ChevronDown size={16} className={cn(\"shrink-0 transition-transform duration-200\", isOpen && \"rotate-180\")} />\n    </button>\n  );\n}\n\nAccordionTrigger.displayName = \"AccordionTrigger\";\n","import { cn } from \"../../utils/cn\";\nimport { useAccordion, useAccordionItem } from \"./Accordion.context\";\nimport type { AccordionContentProps } from \"./Accordion.types\";\n\nexport function AccordionContent({\n  children,\n  className,\n}: AccordionContentProps) {\n  const { openItems } = useAccordion();\n  const value = useAccordionItem();\n  const isOpen = openItems.includes(value);\n\n  return (\n    <div\n      data-react-fancy-accordion-content=\"\"\n      className={cn(\n        \"grid transition-all duration-200\",\n        isOpen ? \"grid-rows-[1fr]\" : \"grid-rows-[0fr]\",\n      )}\n    >\n      <div className=\"overflow-hidden\">\n        <div className={cn(\"pb-4 text-sm text-zinc-600 dark:text-zinc-400\", className)}>\n          {children}\n        </div>\n      </div>\n    </div>\n  );\n}\n\nAccordionContent.displayName = \"AccordionContent\";\n","import { useCallback, useMemo, useState } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { AccordionContext } from \"./Accordion.context\";\nimport { AccordionItem } from \"./AccordionItem\";\nimport { AccordionTrigger } from \"./AccordionTrigger\";\nimport { AccordionContent } from \"./AccordionContent\";\nimport type { AccordionProps } from \"./Accordion.types\";\n\nfunction AccordionRoot({\n  children,\n  type = \"single\",\n  defaultOpen = [],\n  className,\n}: AccordionProps) {\n  const [openItems, setOpenItems] = useState<string[]>(defaultOpen);\n  const multiple = type === \"multiple\";\n\n  const toggle = useCallback(\n    (value: string) => {\n      setOpenItems((prev) => {\n        if (prev.includes(value)) {\n          return prev.filter((v) => v !== value);\n        }\n        return multiple ? [...prev, value] : [value];\n      });\n    },\n    [multiple],\n  );\n\n  const ctx = useMemo(\n    () => ({ openItems, toggle, multiple }),\n    [openItems, toggle, multiple],\n  );\n\n  return (\n    <AccordionContext.Provider value={ctx}>\n      <div data-react-fancy-accordion=\"\" className={cn(className)}>{children}</div>\n    </AccordionContext.Provider>\n  );\n}\n\nexport const Accordion = Object.assign(AccordionRoot, {\n  Item: AccordionItem,\n  Trigger: AccordionTrigger,\n  Content: AccordionContent,\n});\n"]}