@particle-academy/react-fancy 1.4.0 → 1.5.1

package/README.md

@@ -23,6 +23,15 @@ yarn add @particle-academy/react-fancy
 
 ## Usage
 
+Add the `@source` directive to your main CSS file so Tailwind v4 scans the component library for class names:
+
+```css
+@import "tailwindcss";
+@source "../node_modules/@particle-academy/react-fancy/dist/**/*.js";
+```
+
+Then import and use components:
+
 ```tsx
 import { Action, Input, Modal, Dropdown } from "@particle-academy/react-fancy";
 import "@particle-academy/react-fancy/styles.css";

package/dist/index.cjs

@@ -3024,7 +3024,7 @@ var CarouselPanels = react.forwardRef(
       }
     }, [activeIndex, transition]);
     if (transition === "fade") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-panels": "", className: cn("relative overflow-hidden", className), children: /* @__PURE__ */ jsxRuntime.jsx(
         "div",
         {
           className: cn(
@@ -3038,13 +3038,13 @@ var CarouselPanels = react.forwardRef(
         activeIndex
       ) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("relative overflow-hidden", className), children: slides[activeIndex] });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-panels": "", className: cn("relative overflow-hidden", className), children: slides[activeIndex] });
   }
 );
 CarouselPanels.displayName = "CarouselPanels";
 var CarouselSlide = react.forwardRef(
   ({ children, className, name: _name }, ref) => {
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("w-full", className), children });
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-slide": "", className: cn("w-full", className), children });
   }
 );
 CarouselSlide.displayName = "CarouselSlide";
@@ -3062,7 +3062,7 @@ var CarouselControls = react.forwardRef(
     const isFirst = activeIndex === 0;
     const isLast = activeIndex === totalSlides - 1;
     if (variant === "wizard") {
-      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex items-center gap-2", className), children: [
+      return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-react-fancy-carousel-controls": "", className: cn("flex items-center gap-2", className), children: [
         /* @__PURE__ */ jsxRuntime.jsx(
           "button",
           {
@@ -3094,7 +3094,7 @@ var CarouselControls = react.forwardRef(
     }
     const prevDisabled = !loop && isFirst;
     const nextDisabled = !loop && isLast;
-    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: cn("flex items-center gap-2", className), children: [
+    return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-react-fancy-carousel-controls": "", className: cn("flex items-center gap-2", className), children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "button",
         {
@@ -3126,7 +3126,7 @@ var CarouselSteps = react.forwardRef(
       return null;
     }
     if (variant === "wizard") {
-      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center gap-3", className), children: Array.from({ length: totalSlides }, (_, i) => {
+      return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-steps": "", className: cn("flex items-center gap-3", className), children: Array.from({ length: totalSlides }, (_, i) => {
         const isActive = i === activeIndex;
         const isCompleted = i < activeIndex;
         const name = slideNames[i];
@@ -3163,7 +3163,7 @@ var CarouselSteps = react.forwardRef(
         );
       }) });
     }
-    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, className: cn("flex items-center gap-1.5", className), children: Array.from({ length: totalSlides }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { ref, "data-react-fancy-carousel-steps": "", className: cn("flex items-center gap-1.5", className), children: Array.from({ length: totalSlides }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
       "button",
       {
         type: "button",
@@ -3484,10 +3484,10 @@ function useTable() {
   return ctx;
 }
 function TableHead({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("thead", { className: cn("border-b border-zinc-200 dark:border-zinc-700", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("thead", { "data-react-fancy-table-head": "", className: cn("border-b border-zinc-200 dark:border-zinc-700", className), children });
 }
 function TableBody({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { className: cn("divide-y divide-zinc-100 dark:divide-zinc-800", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("tbody", { "data-react-fancy-table-body": "", className: cn("divide-y divide-zinc-100 dark:divide-zinc-800", className), children });
 }
 function TableRow({
   children,
@@ -3536,6 +3536,7 @@ function TableRow({
     /* @__PURE__ */ jsxRuntime.jsxs(
       "tr",
       {
+        "data-react-fancy-table-row": "",
         className: cn(
           "transition-colors hover:bg-zinc-50 dark:hover:bg-zinc-800/50",
           onClick && "cursor-pointer",
@@ -3557,6 +3558,7 @@ function TableCell({ children, className, header }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     Tag,
     {
+      "data-react-fancy-table-cell": "",
       className: cn(
         "px-4 py-3 text-sm",
         header && "text-left font-medium text-zinc-500 dark:text-zinc-400",
@@ -3572,6 +3574,7 @@ function TableColumn({ label, sortKey, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "th",
     {
+      "data-react-fancy-table-column": "",
       className: cn(
         "px-4 py-3 text-left text-sm font-medium text-zinc-500 dark:text-zinc-400",
         sortKey && "cursor-pointer select-none",
@@ -3593,7 +3596,7 @@ function TablePagination({
   const { page, setPage } = useTable();
   const totalPages = Math.ceil(total / pageSize);
   if (totalPages <= 1) return null;
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className: cn("flex items-center justify-between px-4 py-3 text-sm", className), children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { "data-react-fancy-table-pagination": "", className: cn("flex items-center justify-between px-4 py-3 text-sm", className), children: [
     /* @__PURE__ */ jsxRuntime.jsxs("span", { className: "text-zinc-500", children: [
       "Page ",
       page + 1,
@@ -3632,6 +3635,7 @@ function TableSearch({
   return /* @__PURE__ */ jsxRuntime.jsx(
     "input",
     {
+      "data-react-fancy-table-search": "",
       type: "text",
       value: searchQuery,
       onChange: (e) => setSearchQuery(e.target.value),
@@ -3644,7 +3648,7 @@ function TableSearch({
   );
 }
 function TableTray({ children, className }) {
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("flex items-center justify-between px-4 py-3", className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-table-tray": "", className: cn("flex items-center justify-between px-4 py-3", className), children });
 }
 function TableRowTray({ children, className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
@@ -5049,6 +5053,7 @@ function DropdownSeparator({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      "data-react-fancy-dropdown-separator": "",
       role: "separator",
       className: cn(
         "my-1 h-px bg-zinc-200 dark:bg-zinc-700",
@@ -5102,7 +5107,7 @@ function ContextMenuTrigger({
     },
     [ctx]
   );
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { onContextMenu: handleContextMenu, className: cn(className), children });
+  return /* @__PURE__ */ jsxRuntime.jsx("div", { "data-react-fancy-context-menu-trigger": "", onContextMenu: handleContextMenu, className: cn(className), children });
 }
 ContextMenuTrigger.displayName = "ContextMenuTrigger";
 function ContextMenuContent({
@@ -5152,6 +5157,7 @@ function ContextMenuItem({
     "button",
     {
       type: "button",
+      "data-react-fancy-context-menu-item": "",
       role: "menuitem",
       disabled,
       "aria-disabled": disabled,
@@ -5175,6 +5181,7 @@ function ContextMenuSeparator({ className }) {
   return /* @__PURE__ */ jsxRuntime.jsx(
     "div",
     {
+      "data-react-fancy-context-menu-separator": "",
       role: "separator",
       className: cn("my-1 h-px bg-zinc-200 dark:bg-zinc-700", className)
     }
@@ -5914,7 +5921,7 @@ function BreadcrumbsDropdown({ items, activeLabel }) {
   const ref = react.useRef(null);
   useOutsideClick(ref, () => setOpen(false), open);
   useEscapeKey(() => setOpen(false), open);
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, className: "relative flex md:hidden", children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref, "data-react-fancy-breadcrumbs-dropdown": "", className: "relative flex md:hidden", children: [
     /* @__PURE__ */ jsxRuntime.jsxs(
       "button",
       {
@@ -7436,6 +7443,7 @@ function ChartLine({
     "div",
     {
       ref: containerRef,
+      "data-react-fancy-chart-line": "",
       className: cn("relative", className),
       onMouseMove: handleMouseMove,
       onMouseLeave: () => setHoverInfo(null),
@@ -7596,7 +7604,7 @@ function ChartPie({
     const rect = containerRef.current.getBoundingClientRect();
     setTooltipPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
   };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative inline-flex items-center gap-6", className), onMouseMove: handleMouseMove, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, "data-react-fancy-chart-pie": "", className: cn("relative inline-flex items-center gap-6", className), onMouseMove: handleMouseMove, children: [
     /* @__PURE__ */ jsxRuntime.jsx("svg", { width: size, height: size, children: slices.map((slice, i) => /* @__PURE__ */ jsxRuntime.jsxs("g", { children: [
       /* @__PURE__ */ jsxRuntime.jsx(
         "path",
@@ -7754,7 +7762,7 @@ function ChartStackedBar({
     setTooltipPos({ x: e.clientX - rect.left, y: e.clientY - rect.top });
   };
   const svgProps = responsive ? { viewBox: `0 0 ${width} ${height}`, width: "100%", preserveAspectRatio: "xMidYMid meet" } : { width, height };
-  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, className: cn("relative", className), onMouseMove: handleMouseMove, children: [
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { ref: containerRef, "data-react-fancy-chart-stacked-bar": "", className: cn("relative", className), onMouseMove: handleMouseMove, children: [
     /* @__PURE__ */ jsxRuntime.jsxs("svg", { ...svgProps, height: responsive ? void 0 : height, children: [
       grid && /* @__PURE__ */ jsxRuntime.jsx(
         ChartGrid,