@particle-academy/react-fancy 5.12.0 → 5.13.1

package/dist/chunk-AC7M7JDO.cjs

@@ -0,0 +1,199 @@
+'use strict';
+
+var chunkT6YELZPJ_cjs = require('./chunk-T6YELZPJ.cjs');
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var DEFAULT_VIEWPORT = { panX: 0, panY: 0, zoom: 1 };
+var fitClasses = {
+  contain: "h-full w-full object-contain",
+  cover: "h-full w-full object-cover",
+  none: "max-w-none object-none"
+};
+function clamp(n, min, max) {
+  return Math.min(max, Math.max(min, n));
+}
+var ImageViewer = react.forwardRef(
+  ({
+    src,
+    alt = "",
+    fit = "contain",
+    zoomable = true,
+    pannable = true,
+    controls,
+    minZoom = 0.25,
+    maxZoom = 8,
+    checkerboard = true,
+    viewport,
+    defaultViewport,
+    onViewportChange,
+    onLoad,
+    onError,
+    className,
+    style
+  }, ref) => {
+    const containerRef = react.useRef(null);
+    const [status, setStatus] = react.useState("loading");
+    const isControlled = viewport !== void 0;
+    const [internal, setInternal] = react.useState(
+      defaultViewport ?? DEFAULT_VIEWPORT
+    );
+    const current = isControlled ? viewport : internal;
+    const currentRef = react.useRef(current);
+    currentRef.current = current;
+    const setViewport = react.useCallback(
+      (next) => {
+        const resolved = typeof next === "function" ? next(currentRef.current) : next;
+        if (!isControlled) setInternal(resolved);
+        onViewportChange?.(resolved);
+      },
+      [isControlled, onViewportChange]
+    );
+    const interactive = status === "loaded";
+    const { containerProps, isPanning } = chunkT6YELZPJ_cjs.usePanZoom({
+      viewport: current,
+      setViewport,
+      minZoom,
+      maxZoom,
+      pannable: pannable && interactive,
+      zoomable: zoomable && interactive,
+      containerRef
+    });
+    const zoomBy = react.useCallback(
+      (factor) => {
+        const el = containerRef.current;
+        if (!el) return;
+        const rect = el.getBoundingClientRect();
+        const cx = rect.width / 2;
+        const cy = rect.height / 2;
+        setViewport((prev) => {
+          const newZoom = clamp(prev.zoom * factor, minZoom, maxZoom);
+          const ratio = newZoom / prev.zoom;
+          return {
+            zoom: newZoom,
+            panX: cx - (cx - prev.panX) * ratio,
+            panY: cy - (cy - prev.panY) * ratio
+          };
+        });
+      },
+      [setViewport, minZoom, maxZoom]
+    );
+    const reset = react.useCallback(() => setViewport(DEFAULT_VIEWPORT), [setViewport]);
+    const showControls = (controls ?? zoomable) && interactive;
+    const transform = `translate(${current.panX}px, ${current.panY}px) scale(${current.zoom})`;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        ref,
+        "data-react-fancy-image-viewer": "",
+        className: chunk3Z6ALUWP_cjs.cn(
+          "relative isolate overflow-hidden rounded-md select-none",
+          checkerboard ? "fancy-checkerboard" : "bg-zinc-100 dark:bg-zinc-900",
+          className
+        ),
+        style,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              ref: containerRef,
+              "data-canvas-bg": "",
+              className: chunk3Z6ALUWP_cjs.cn(
+                "absolute inset-0 flex items-center justify-center",
+                isPanning ? "cursor-grabbing" : pannable && interactive ? "cursor-grab" : ""
+              ),
+              style: {
+                transform,
+                transformOrigin: "0 0",
+                willChange: "transform",
+                touchAction: zoomable || pannable ? "none" : void 0
+              },
+              onDoubleClick: zoomable ? reset : void 0,
+              ...containerProps,
+              children: /* @__PURE__ */ jsxRuntime.jsx(
+                "img",
+                {
+                  src,
+                  alt,
+                  draggable: false,
+                  onLoad: () => {
+                    setStatus("loaded");
+                    onLoad?.();
+                  },
+                  onError: () => {
+                    setStatus("error");
+                    onError?.();
+                  },
+                  className: chunk3Z6ALUWP_cjs.cn(
+                    "pointer-events-none block",
+                    status === "error" && "hidden",
+                    fitClasses[fit]
+                  )
+                }
+              )
+            }
+          ),
+          status === "error" && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-react-fancy-image-viewer-error": "",
+              className: "absolute inset-0 flex flex-col items-center justify-center gap-1 p-4 text-center text-sm text-zinc-500 dark:text-zinc-400",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "font-medium", children: "Couldn't load image" }),
+                /* @__PURE__ */ jsxRuntime.jsx("span", { className: "max-w-full truncate text-xs opacity-70", children: alt || src })
+              ]
+            }
+          ),
+          showControls && /* @__PURE__ */ jsxRuntime.jsxs(
+            "div",
+            {
+              "data-react-fancy-image-viewer-controls": "",
+              className: "absolute bottom-2 right-2 flex items-center gap-0.5 rounded-md border border-zinc-200 bg-white/90 p-0.5 text-zinc-700 shadow-sm backdrop-blur dark:border-zinc-700 dark:bg-zinc-900/90 dark:text-zinc-200",
+              children: [
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Zoom out",
+                    onClick: () => zoomBy(1 / 1.25),
+                    className: "flex h-6 w-6 items-center justify-center rounded text-base leading-none hover:bg-zinc-100 dark:hover:bg-zinc-800",
+                    children: "\u2212"
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsxs(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Reset zoom",
+                    onClick: reset,
+                    className: "min-w-[3rem] rounded px-1 text-center text-xs tabular-nums hover:bg-zinc-100 dark:hover:bg-zinc-800",
+                    children: [
+                      Math.round(current.zoom * 100),
+                      "%"
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    "aria-label": "Zoom in",
+                    onClick: () => zoomBy(1.25),
+                    className: "flex h-6 w-6 items-center justify-center rounded text-base leading-none hover:bg-zinc-100 dark:hover:bg-zinc-800",
+                    children: "+"
+                  }
+                )
+              ]
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+ImageViewer.displayName = "ImageViewer";
+
+exports.ImageViewer = ImageViewer;
+//# sourceMappingURL=chunk-AC7M7JDO.cjs.map
+//# sourceMappingURL=chunk-AC7M7JDO.cjs.map

package/dist/chunk-AC7M7JDO.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/ImageViewer/ImageViewer.tsx"],"names":["forwardRef","useRef","useState","useCallback","usePanZoom","jsxs","cn","jsx"],"mappings":"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","file":"chunk-AC7M7JDO.cjs","sourcesContent":["import {\n  forwardRef,\n  useCallback,\n  useRef,\n  useState,\n  type CSSProperties,\n} from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { usePanZoom } from \"../../hooks/use-pan-zoom\";\nimport type { ImageViewerProps, ImageViewerViewport } from \"./ImageViewer.types\";\n\nconst DEFAULT_VIEWPORT: ImageViewerViewport = { panX: 0, panY: 0, zoom: 1 };\n\nconst fitClasses: Record<NonNullable<ImageViewerProps[\"fit\"]>, string> = {\n  contain: \"h-full w-full object-contain\",\n  cover: \"h-full w-full object-cover\",\n  none: \"max-w-none object-none\",\n};\n\nfunction clamp(n: number, min: number, max: number): number {\n  return Math.min(max, Math.max(min, n));\n}\n\n/**\n * A standalone image viewer: fits the image to its container, with optional\n * Ctrl/⌘+wheel zoom, click-drag panning, and a transparency checkerboard. Works\n * anywhere on its own and is also what `<MediaViewer>` renders for images.\n *\n * The pan/zoom viewport is controllable (`viewport` + `onViewportChange`) so an\n * agent bridge can drive it; it's uncontrolled by default.\n *\n * ```tsx\n * <ImageViewer src=\"/logo.png\" alt=\"logo.png\" style={{ height: 320 }} />\n * ```\n */\nexport const ImageViewer = forwardRef<HTMLDivElement, ImageViewerProps>(\n  (\n    {\n      src,\n      alt = \"\",\n      fit = \"contain\",\n      zoomable = true,\n      pannable = true,\n      controls,\n      minZoom = 0.25,\n      maxZoom = 8,\n      checkerboard = true,\n      viewport,\n      defaultViewport,\n      onViewportChange,\n      onLoad,\n      onError,\n      className,\n      style,\n    },\n    ref,\n  ) => {\n    const containerRef = useRef<HTMLDivElement>(null);\n    const [status, setStatus] = useState<\"loading\" | \"loaded\" | \"error\">(\"loading\");\n\n    // Controllable viewport supporting functional updates (usePanZoom needs them).\n    const isControlled = viewport !== undefined;\n    const [internal, setInternal] = useState<ImageViewerViewport>(\n      defaultViewport ?? DEFAULT_VIEWPORT,\n    );\n    const current = isControlled ? viewport! : internal;\n    const currentRef = useRef(current);\n    currentRef.current = current;\n\n    const setViewport = useCallback(\n      (\n        next:\n          | ImageViewerViewport\n          | ((prev: ImageViewerViewport) => ImageViewerViewport),\n      ) => {\n        const resolved =\n          typeof next === \"function\" ? next(currentRef.current) : next;\n        if (!isControlled) setInternal(resolved);\n        onViewportChange?.(resolved);\n      },\n      [isControlled, onViewportChange],\n    );\n\n    const interactive = status === \"loaded\";\n    const { containerProps, isPanning } = usePanZoom({\n      viewport: current,\n      setViewport,\n      minZoom,\n      maxZoom,\n      pannable: pannable && interactive,\n      zoomable: zoomable && interactive,\n      containerRef,\n    });\n\n    // Zoom about the container centre — used by the +/− buttons.\n    const zoomBy = useCallback(\n      (factor: number) => {\n        const el = containerRef.current;\n        if (!el) return;\n        const rect = el.getBoundingClientRect();\n        const cx = rect.width / 2;\n        const cy = rect.height / 2;\n        setViewport((prev) => {\n          const newZoom = clamp(prev.zoom * factor, minZoom, maxZoom);\n          const ratio = newZoom / prev.zoom;\n          return {\n            zoom: newZoom,\n            panX: cx - (cx - prev.panX) * ratio,\n            panY: cy - (cy - prev.panY) * ratio,\n          };\n        });\n      },\n      [setViewport, minZoom, maxZoom],\n    );\n\n    const reset = useCallback(() => setViewport(DEFAULT_VIEWPORT), [setViewport]);\n\n    const showControls = (controls ?? zoomable) && interactive;\n    const transform = `translate(${current.panX}px, ${current.panY}px) scale(${current.zoom})`;\n\n    return (\n      <div\n        ref={ref}\n        data-react-fancy-image-viewer=\"\"\n        className={cn(\n          \"relative isolate overflow-hidden rounded-md select-none\",\n          checkerboard\n            ? \"fancy-checkerboard\"\n            : \"bg-zinc-100 dark:bg-zinc-900\",\n          className,\n        )}\n        style={style}\n      >\n        <div\n          ref={containerRef}\n          data-canvas-bg=\"\"\n          className={cn(\n            \"absolute inset-0 flex items-center justify-center\",\n            isPanning\n              ? \"cursor-grabbing\"\n              : pannable && interactive\n                ? \"cursor-grab\"\n                : \"\",\n          )}\n          style={\n            {\n              transform,\n              transformOrigin: \"0 0\",\n              willChange: \"transform\",\n              touchAction: zoomable || pannable ? \"none\" : undefined,\n            } as CSSProperties\n          }\n          onDoubleClick={zoomable ? reset : undefined}\n          {...containerProps}\n        >\n          <img\n            src={src}\n            alt={alt}\n            draggable={false}\n            onLoad={() => {\n              setStatus(\"loaded\");\n              onLoad?.();\n            }}\n            onError={() => {\n              setStatus(\"error\");\n              onError?.();\n            }}\n            className={cn(\n              \"pointer-events-none block\",\n              status === \"error\" && \"hidden\",\n              fitClasses[fit],\n            )}\n          />\n        </div>\n\n        {status === \"error\" && (\n          <div\n            data-react-fancy-image-viewer-error=\"\"\n            className=\"absolute inset-0 flex flex-col items-center justify-center gap-1 p-4 text-center text-sm text-zinc-500 dark:text-zinc-400\"\n          >\n            <span className=\"font-medium\">Couldn&apos;t load image</span>\n            <span className=\"max-w-full truncate text-xs opacity-70\">{alt || src}</span>\n          </div>\n        )}\n\n        {showControls && (\n          <div\n            data-react-fancy-image-viewer-controls=\"\"\n            className=\"absolute bottom-2 right-2 flex items-center gap-0.5 rounded-md border border-zinc-200 bg-white/90 p-0.5 text-zinc-700 shadow-sm backdrop-blur dark:border-zinc-700 dark:bg-zinc-900/90 dark:text-zinc-200\"\n          >\n            <button\n              type=\"button\"\n              aria-label=\"Zoom out\"\n              onClick={() => zoomBy(1 / 1.25)}\n              className=\"flex h-6 w-6 items-center justify-center rounded text-base leading-none hover:bg-zinc-100 dark:hover:bg-zinc-800\"\n            >\n              −\n            </button>\n            <button\n              type=\"button\"\n              aria-label=\"Reset zoom\"\n              onClick={reset}\n              className=\"min-w-[3rem] rounded px-1 text-center text-xs tabular-nums hover:bg-zinc-100 dark:hover:bg-zinc-800\"\n            >\n              {Math.round(current.zoom * 100)}%\n            </button>\n            <button\n              type=\"button\"\n              aria-label=\"Zoom in\"\n              onClick={() => zoomBy(1.25)}\n              className=\"flex h-6 w-6 items-center justify-center rounded text-base leading-none hover:bg-zinc-100 dark:hover:bg-zinc-800\"\n            >\n              +\n            </button>\n          </div>\n        )}\n      </div>\n    );\n  },\n);\n\nImageViewer.displayName = \"ImageViewer\";\n"]}

package/dist/chunk-AGDW5ENV.js

@@ -0,0 +1,37 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { forwardRef } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+function toStyleValue(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Skeleton = forwardRef(
+  ({ shape = "rect", width, height, className }, ref) => {
+    const style = {
+      width: toStyleValue(width),
+      height: toStyleValue(height)
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        "data-react-fancy-skeleton": "",
+        className: cn(
+          "animate-pulse bg-zinc-200 dark:bg-zinc-700",
+          shape === "rect" && "rounded-lg",
+          shape === "circle" && "rounded-full aspect-square",
+          shape === "text" && "rounded h-4 w-full",
+          className
+        ),
+        style
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+export { Skeleton };
+//# sourceMappingURL=chunk-AGDW5ENV.js.map
+//# sourceMappingURL=chunk-AGDW5ENV.js.map

package/dist/chunk-AGDW5ENV.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"names":[],"mappings":";;;;AAIA,SAAS,aAAa,KAAA,EAAwD;AAC5E,EAAA,IAAI,KAAA,KAAU,QAAW,OAAO,MAAA;AAChC,EAAA,OAAO,OAAO,KAAA,KAAU,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,GAAO,KAAA;AACpD;AAEO,IAAM,QAAA,GAAW,UAAA;AAAA,EACtB,CAAC,EAAE,KAAA,GAAQ,MAAA,EAAQ,OAAO,MAAA,EAAQ,SAAA,IAAa,GAAA,KAAQ;AACrD,IAAA,MAAM,KAAA,GAA6B;AAAA,MACjC,KAAA,EAAO,aAAa,KAAK,CAAA;AAAA,MACzB,MAAA,EAAQ,aAAa,MAAM;AAAA,KAC7B;AAEA,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,aAAA,EAAY,MAAA;AAAA,QACZ,2BAAA,EAA0B,EAAA;AAAA,QAC1B,SAAA,EAAW,EAAA;AAAA,UACT,4CAAA;AAAA,UACA,UAAU,MAAA,IAAU,YAAA;AAAA,UACpB,UAAU,QAAA,IAAY,4BAAA;AAAA,UACtB,UAAU,MAAA,IAAU,oBAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-AGDW5ENV.js","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { SkeletonProps } from \"./Skeleton.types\";\n\nfunction toStyleValue(value: string | number | undefined): string | undefined {\n  if (value === undefined) return undefined;\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ shape = \"rect\", width, height, className }, ref) => {\n    const style: React.CSSProperties = {\n      width: toStyleValue(width),\n      height: toStyleValue(height),\n    };\n\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        data-react-fancy-skeleton=\"\"\n        className={cn(\n          \"animate-pulse bg-zinc-200 dark:bg-zinc-700\",\n          shape === \"rect\" && \"rounded-lg\",\n          shape === \"circle\" && \"rounded-full aspect-square\",\n          shape === \"text\" && \"rounded h-4 w-full\",\n          className,\n        )}\n        style={style}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"]}

package/dist/chunk-AIA5UNQ5.cjs

@@ -0,0 +1,4 @@
+'use strict';
+
+//# sourceMappingURL=chunk-AIA5UNQ5.cjs.map
+//# sourceMappingURL=chunk-AIA5UNQ5.cjs.map

package/dist/chunk-AIA5UNQ5.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"chunk-AIA5UNQ5.cjs"}

package/dist/chunk-AKIUDPJU.js

@@ -0,0 +1,119 @@
+import { cn } from './chunk-DSUHZO6T.js';
+import { createContext, useState, useCallback, useMemo, useContext } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
+import { ChevronDown } from 'lucide-react';
+
+var AccordionContext = createContext(
+  null
+);
+function useAccordion() {
+  const ctx = useContext(AccordionContext);
+  if (!ctx) {
+    throw new Error(
+      "Accordion compound components must be used within <Accordion>"
+    );
+  }
+  return ctx;
+}
+var AccordionItemContext = createContext("");
+function useAccordionItem() {
+  return useContext(AccordionItemContext);
+}
+function AccordionItem({
+  children,
+  value,
+  className
+}) {
+  return /* @__PURE__ */ jsx(AccordionItemContext.Provider, { value, children: /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-accordion-item": "",
+      className: 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__ */ jsxs(
+    "button",
+    {
+      "data-react-fancy-accordion-trigger": "",
+      type: "button",
+      onClick: () => toggle(value),
+      "aria-expanded": isOpen,
+      className: 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__ */ jsx(ChevronDown, { size: 16, className: 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__ */ jsx(
+    "div",
+    {
+      "data-react-fancy-accordion-content": "",
+      className: cn(
+        "grid transition-all duration-200",
+        isOpen ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+      ),
+      children: /* @__PURE__ */ jsx("div", { className: "overflow-hidden", children: /* @__PURE__ */ jsx("div", { className: 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] = useState(defaultOpen);
+  const multiple = type === "multiple";
+  const toggle = useCallback(
+    (value) => {
+      setOpenItems((prev) => {
+        if (prev.includes(value)) {
+          return prev.filter((v) => v !== value);
+        }
+        return multiple ? [...prev, value] : [value];
+      });
+    },
+    [multiple]
+  );
+  const ctx = useMemo(
+    () => ({ openItems, toggle, multiple }),
+    [openItems, toggle, multiple]
+  );
+  return /* @__PURE__ */ jsx(AccordionContext.Provider, { value: ctx, children: /* @__PURE__ */ jsx("div", { "data-react-fancy-accordion": "", className: cn(className), children }) });
+}
+var Accordion = Object.assign(AccordionRoot, {
+  Item: AccordionItem,
+  Trigger: AccordionTrigger,
+  Content: AccordionContent
+});
+
+export { Accordion, useAccordion };
+//# sourceMappingURL=chunk-AKIUDPJU.js.map
+//# sourceMappingURL=chunk-AKIUDPJU.js.map

package/dist/chunk-AKIUDPJU.js.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":["jsx"],"mappings":"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","file":"chunk-AKIUDPJU.js","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"]}

package/dist/chunk-ANEX75DF.cjs

@@ -0,0 +1,39 @@
+'use strict';
+
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+function toStyleValue(value) {
+  if (value === void 0) return void 0;
+  return typeof value === "number" ? `${value}px` : value;
+}
+var Skeleton = react.forwardRef(
+  ({ shape = "rect", width, height, className }, ref) => {
+    const style = {
+      width: toStyleValue(width),
+      height: toStyleValue(height)
+    };
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        ref,
+        "aria-hidden": "true",
+        "data-react-fancy-skeleton": "",
+        className: chunk3Z6ALUWP_cjs.cn(
+          "animate-pulse bg-zinc-200 dark:bg-zinc-700",
+          shape === "rect" && "rounded-lg",
+          shape === "circle" && "rounded-full aspect-square",
+          shape === "text" && "rounded h-4 w-full",
+          className
+        ),
+        style
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+exports.Skeleton = Skeleton;
+//# sourceMappingURL=chunk-ANEX75DF.cjs.map
+//# sourceMappingURL=chunk-ANEX75DF.cjs.map

package/dist/chunk-ANEX75DF.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Skeleton/Skeleton.tsx"],"names":["forwardRef","jsx","cn"],"mappings":";;;;;;AAIA,SAAS,aAAa,KAAA,EAAwD;AAC5E,EAAA,IAAI,KAAA,KAAU,QAAW,OAAO,MAAA;AAChC,EAAA,OAAO,OAAO,KAAA,KAAU,QAAA,GAAW,CAAA,EAAG,KAAK,CAAA,EAAA,CAAA,GAAO,KAAA;AACpD;AAEO,IAAM,QAAA,GAAWA,gBAAA;AAAA,EACtB,CAAC,EAAE,KAAA,GAAQ,MAAA,EAAQ,OAAO,MAAA,EAAQ,SAAA,IAAa,GAAA,KAAQ;AACrD,IAAA,MAAM,KAAA,GAA6B;AAAA,MACjC,KAAA,EAAO,aAAa,KAAK,CAAA;AAAA,MACzB,MAAA,EAAQ,aAAa,MAAM;AAAA,KAC7B;AAEA,IAAA,uBACEC,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,aAAA,EAAY,MAAA;AAAA,QACZ,2BAAA,EAA0B,EAAA;AAAA,QAC1B,SAAA,EAAWC,oBAAA;AAAA,UACT,4CAAA;AAAA,UACA,UAAU,MAAA,IAAU,YAAA;AAAA,UACpB,UAAU,QAAA,IAAY,4BAAA;AAAA,UACtB,UAAU,MAAA,IAAU,oBAAA;AAAA,UACpB;AAAA,SACF;AAAA,QACA;AAAA;AAAA,KACF;AAAA,EAEJ;AACF;AAEA,QAAA,CAAS,WAAA,GAAc,UAAA","file":"chunk-ANEX75DF.cjs","sourcesContent":["import { forwardRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport type { SkeletonProps } from \"./Skeleton.types\";\n\nfunction toStyleValue(value: string | number | undefined): string | undefined {\n  if (value === undefined) return undefined;\n  return typeof value === \"number\" ? `${value}px` : value;\n}\n\nexport const Skeleton = forwardRef<HTMLDivElement, SkeletonProps>(\n  ({ shape = \"rect\", width, height, className }, ref) => {\n    const style: React.CSSProperties = {\n      width: toStyleValue(width),\n      height: toStyleValue(height),\n    };\n\n    return (\n      <div\n        ref={ref}\n        aria-hidden=\"true\"\n        data-react-fancy-skeleton=\"\"\n        className={cn(\n          \"animate-pulse bg-zinc-200 dark:bg-zinc-700\",\n          shape === \"rect\" && \"rounded-lg\",\n          shape === \"circle\" && \"rounded-full aspect-square\",\n          shape === \"text\" && \"rounded h-4 w-full\",\n          className,\n        )}\n        style={style}\n      />\n    );\n  },\n);\n\nSkeleton.displayName = \"Skeleton\";\n"]}

package/dist/chunk-AOOBRPTE.cjs

@@ -0,0 +1,142 @@
+'use strict';
+
+var chunkOUOEQZHY_cjs = require('./chunk-OUOEQZHY.cjs');
+var chunk3Z6ALUWP_cjs = require('./chunk-3Z6ALUWP.cjs');
+var react = require('react');
+var jsxRuntime = require('react/jsx-runtime');
+
+var TabsContext = react.createContext(null);
+function useTabs() {
+  const ctx = react.useContext(TabsContext);
+  if (!ctx) {
+    throw new Error("Tabs compound components must be used within <Tabs>");
+  }
+  return ctx;
+}
+function TabsList({ children, className }) {
+  const { variant } = useTabs();
+  const listRef = react.useRef(null);
+  const handleKeyDown = react.useCallback((e) => {
+    const buttons = listRef.current?.querySelectorAll(
+      '[role="tab"]:not([disabled])'
+    );
+    if (!buttons?.length) return;
+    const items = Array.from(buttons);
+    const currentIndex = items.indexOf(document.activeElement);
+    if (e.key === "ArrowRight" || e.key === "ArrowDown") {
+      e.preventDefault();
+      const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;
+      items[next].focus();
+      items[next].click();
+    } else if (e.key === "ArrowLeft" || e.key === "ArrowUp") {
+      e.preventDefault();
+      const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;
+      items[prev].focus();
+      items[prev].click();
+    }
+  }, []);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-react-fancy-tabs-list": "",
+      ref: listRef,
+      role: "tablist",
+      onKeyDown: handleKeyDown,
+      className: chunk3Z6ALUWP_cjs.cn(
+        "flex",
+        variant === "underline" && "gap-0 border-b border-zinc-200 dark:border-zinc-700",
+        variant === "pills" && "gap-0 rounded-lg bg-zinc-100 p-1 dark:bg-zinc-800",
+        variant === "boxed" && "gap-0 rounded-lg bg-zinc-100 p-1 dark:bg-zinc-800",
+        className
+      ),
+      children
+    }
+  );
+}
+TabsList.displayName = "TabsList";
+function TabsTab({
+  children,
+  value,
+  disabled = false,
+  className,
+  onClick,
+  ...rest
+}) {
+  const { activeTab, setActiveTab, variant } = useTabs();
+  const isActive = activeTab === value;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      "data-react-fancy-tabs-tab": "",
+      type: "button",
+      role: "tab",
+      disabled,
+      "aria-selected": isActive,
+      tabIndex: isActive ? 0 : -1,
+      onClick: (e) => {
+        if (!disabled) setActiveTab(value);
+        onClick?.(e);
+      },
+      ...rest,
+      className: chunk3Z6ALUWP_cjs.cn(
+        "text-sm font-medium transition-colors",
+        disabled && "cursor-not-allowed opacity-50",
+        variant === "underline" && [
+          "border-b-2 px-4 py-2.5",
+          isActive ? "border-zinc-900 text-zinc-900 dark:border-white dark:text-white" : "border-transparent text-zinc-500 hover:border-zinc-300 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300"
+        ],
+        variant === "pills" && [
+          "rounded-md px-4 py-1.5",
+          isActive ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-900 dark:text-white" : "text-zinc-500 dark:text-zinc-400"
+        ],
+        variant === "boxed" && [
+          "flex-1 rounded-md px-4 py-1.5",
+          isActive ? "bg-white text-zinc-900 shadow-sm dark:bg-zinc-900 dark:text-white" : "text-zinc-500 dark:text-zinc-400"
+        ],
+        className
+      ),
+      children
+    }
+  );
+}
+TabsTab.displayName = "TabsTab";
+function TabsPanels({ children, className }) {
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-tabs-panels": "", className: chunk3Z6ALUWP_cjs.cn("mt-4", className), children });
+}
+TabsPanels.displayName = "TabsPanels";
+function TabsPanel({ children, value, className }) {
+  const { activeTab } = useTabs();
+  if (activeTab !== value) return null;
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-tabs-panel": "", role: "tabpanel", className: chunk3Z6ALUWP_cjs.cn("fancy-fade-in", className), children });
+}
+TabsPanel.displayName = "TabsPanel";
+function TabsRoot({
+  children,
+  defaultTab = "",
+  activeTab: controlledTab,
+  onTabChange,
+  variant = "underline",
+  className
+}) {
+  const [activeTab, setActiveTab] = chunkOUOEQZHY_cjs.useControllableState(
+    controlledTab,
+    defaultTab,
+    onTabChange
+  );
+  const ctx = react.useMemo(
+    () => ({ activeTab, setActiveTab, variant }),
+    [activeTab, setActiveTab, variant]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(TabsContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-tabs": "", className: chunk3Z6ALUWP_cjs.cn(className), children }) });
+}
+var Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Tab: TabsTab,
+  Panels: TabsPanels,
+  Panel: TabsPanel
+});
+
+exports.Tabs = Tabs;
+exports.useTabs = useTabs;
+//# sourceMappingURL=chunk-AOOBRPTE.cjs.map
+//# sourceMappingURL=chunk-AOOBRPTE.cjs.map

package/dist/chunk-AOOBRPTE.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/Tabs/Tabs.context.ts","../src/components/Tabs/TabsList.tsx","../src/components/Tabs/TabsTab.tsx","../src/components/Tabs/TabsPanels.tsx","../src/components/Tabs/TabsPanel.tsx","../src/components/Tabs/Tabs.tsx"],"names":["createContext","useContext","useRef","useCallback","jsx","cn","useControllableState","useMemo"],"mappings":"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","file":"chunk-AOOBRPTE.cjs","sourcesContent":["import { createContext, useContext } from \"react\";\nimport type { TabsContextValue } from \"./Tabs.types\";\n\nexport const TabsContext = createContext<TabsContextValue | null>(null);\n\nexport function useTabs(): TabsContextValue {\n  const ctx = useContext(TabsContext);\n  if (!ctx) {\n    throw new Error(\"Tabs compound components must be used within <Tabs>\");\n  }\n  return ctx;\n}\n","import { useCallback, useRef } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsListProps } from \"./Tabs.types\";\n\nexport function TabsList({ children, className }: TabsListProps) {\n  const { variant } = useTabs();\n  const listRef = useRef<HTMLDivElement>(null);\n\n  const handleKeyDown = useCallback((e: React.KeyboardEvent) => {\n    const buttons = listRef.current?.querySelectorAll<HTMLButtonElement>(\n      '[role=\"tab\"]:not([disabled])',\n    );\n    if (!buttons?.length) return;\n\n    const items = Array.from(buttons);\n    const currentIndex = items.indexOf(document.activeElement as HTMLButtonElement);\n\n    if (e.key === \"ArrowRight\" || e.key === \"ArrowDown\") {\n      e.preventDefault();\n      const next = currentIndex < items.length - 1 ? currentIndex + 1 : 0;\n      items[next].focus();\n      items[next].click();\n    } else if (e.key === \"ArrowLeft\" || e.key === \"ArrowUp\") {\n      e.preventDefault();\n      const prev = currentIndex > 0 ? currentIndex - 1 : items.length - 1;\n      items[prev].focus();\n      items[prev].click();\n    }\n  }, []);\n\n  return (\n    <div\n      data-react-fancy-tabs-list=\"\"\n      ref={listRef}\n      role=\"tablist\"\n      onKeyDown={handleKeyDown}\n      className={cn(\n        \"flex\",\n        variant === \"underline\" && \"gap-0 border-b border-zinc-200 dark:border-zinc-700\",\n        variant === \"pills\" && \"gap-0 rounded-lg bg-zinc-100 p-1 dark:bg-zinc-800\",\n        variant === \"boxed\" &&\n          \"gap-0 rounded-lg bg-zinc-100 p-1 dark:bg-zinc-800\",\n        className,\n      )}\n    >\n      {children}\n    </div>\n  );\n}\n\nTabsList.displayName = \"TabsList\";\n","import { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsTabProps } from \"./Tabs.types\";\n\nexport function TabsTab({\n  children,\n  value,\n  disabled = false,\n  className,\n  onClick,\n  ...rest\n}: TabsTabProps) {\n  const { activeTab, setActiveTab, variant } = useTabs();\n  const isActive = activeTab === value;\n\n  return (\n    <button\n      data-react-fancy-tabs-tab=\"\"\n      type=\"button\"\n      role=\"tab\"\n      disabled={disabled}\n      aria-selected={isActive}\n      tabIndex={isActive ? 0 : -1}\n      onClick={(e) => { if (!disabled) setActiveTab(value); onClick?.(e); }}\n      {...rest}\n      className={cn(\n        \"text-sm font-medium transition-colors\",\n        disabled && \"cursor-not-allowed opacity-50\",\n        variant === \"underline\" && [\n          \"border-b-2 px-4 py-2.5\",\n          isActive\n            ? \"border-zinc-900 text-zinc-900 dark:border-white dark:text-white\"\n            : \"border-transparent text-zinc-500 hover:border-zinc-300 hover:text-zinc-700 dark:text-zinc-400 dark:hover:text-zinc-300\",\n        ],\n        variant === \"pills\" && [\n          \"rounded-md px-4 py-1.5\",\n          isActive\n            ? \"bg-white text-zinc-900 shadow-sm dark:bg-zinc-900 dark:text-white\"\n            : \"text-zinc-500 dark:text-zinc-400\",\n        ],\n        variant === \"boxed\" && [\n          \"flex-1 rounded-md px-4 py-1.5\",\n          isActive\n            ? \"bg-white text-zinc-900 shadow-sm dark:bg-zinc-900 dark:text-white\"\n            : \"text-zinc-500 dark:text-zinc-400\",\n        ],\n        className,\n      )}\n    >\n      {children}\n    </button>\n  );\n}\n\nTabsTab.displayName = \"TabsTab\";\n","import { cn } from \"../../utils/cn\";\nimport type { TabsPanelsProps } from \"./Tabs.types\";\n\nexport function TabsPanels({ children, className }: TabsPanelsProps) {\n  return <div data-react-fancy-tabs-panels=\"\" className={cn(\"mt-4\", className)}>{children}</div>;\n}\n\nTabsPanels.displayName = \"TabsPanels\";\n","import { cn } from \"../../utils/cn\";\nimport { useTabs } from \"./Tabs.context\";\nimport type { TabsPanelProps } from \"./Tabs.types\";\n\nexport function TabsPanel({ children, value, className }: TabsPanelProps) {\n  const { activeTab } = useTabs();\n\n  if (activeTab !== value) return null;\n\n  return (\n    <div data-react-fancy-tabs-panel=\"\" role=\"tabpanel\" className={cn(\"fancy-fade-in\", className)}>\n      {children}\n    </div>\n  );\n}\n\nTabsPanel.displayName = \"TabsPanel\";\n","import { useMemo } from \"react\";\nimport { cn } from \"../../utils/cn\";\nimport { useControllableState } from \"../../hooks/use-controllable-state\";\nimport { TabsContext } from \"./Tabs.context\";\nimport { TabsList } from \"./TabsList\";\nimport { TabsTab } from \"./TabsTab\";\nimport { TabsPanels } from \"./TabsPanels\";\nimport { TabsPanel } from \"./TabsPanel\";\nimport type { TabsProps } from \"./Tabs.types\";\n\nfunction TabsRoot({\n  children,\n  defaultTab = \"\",\n  activeTab: controlledTab,\n  onTabChange,\n  variant = \"underline\",\n  className,\n}: TabsProps) {\n  const [activeTab, setActiveTab] = useControllableState(\n    controlledTab,\n    defaultTab,\n    onTabChange,\n  );\n\n  const ctx = useMemo(\n    () => ({ activeTab, setActiveTab, variant }),\n    [activeTab, setActiveTab, variant],\n  );\n\n  return (\n    <TabsContext.Provider value={ctx}>\n      <div data-react-fancy-tabs=\"\" className={cn(className)}>{children}</div>\n    </TabsContext.Provider>\n  );\n}\n\nexport const Tabs = Object.assign(TabsRoot, {\n  List: TabsList,\n  Tab: TabsTab,\n  Panels: TabsPanels,\n  Panel: TabsPanel,\n});\n"]}