saha-ui 1.22.3 → 1.22.5

package/dist/components/DragDrop/DebugOverlay.d.ts

@@ -0,0 +1,10 @@
+import { default as React } from 'react';
+export interface DebugOverlayProps {
+    enabled?: boolean;
+    position?: "top-left" | "top-right" | "bottom-left" | "bottom-right";
+    showCollisionRects?: boolean;
+    showDragPath?: boolean;
+    showPerformanceMetrics?: boolean;
+}
+export declare const DebugOverlay: React.FC<DebugOverlayProps>;
+//# sourceMappingURL=DebugOverlay.d.ts.map

package/dist/components/DragDrop/DebugOverlay.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DebugOverlay.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DebugOverlay.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAsC,MAAM,OAAO,CAAC;AAS3D,MAAM,WAAW,iBAAiB;IAChC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,UAAU,GAAG,WAAW,GAAG,aAAa,GAAG,cAAc,CAAC;IACrE,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,sBAAsB,CAAC,EAAE,OAAO,CAAC;CAClC;AAMD,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,EAAE,CAAC,iBAAiB,CAwWpD,CAAC"}

package/dist/components/DragDrop/DebugOverlay.js

@@ -0,0 +1,286 @@
+import { jsxs as t, Fragment as v, jsx as e } from "react/jsx-runtime";
+import { useState as f, useRef as w, useEffect as p } from "react";
+import { useDragDropContext as P } from "./DragDropContext.js";
+import { cn as C } from "../../lib/utils.js";
+import { ChevronUp as z, ChevronDown as G } from "lucide-react";
+const T = ({
+  enabled: u = !0,
+  position: I = "top-right",
+  showCollisionRects: E = !0,
+  showDragPath: g = !0,
+  showPerformanceMetrics: h = !0
+}) => {
+  const j = P(), [i, D] = f(!0), [d, y] = f([]), [x, O] = f(0), [S, k] = f(0), n = w({ frames: 0, lastTime: performance.now() }), N = w(0), {
+    activeId: R,
+    activeItem: b,
+    activeIndex: F,
+    sourceContainerId: A,
+    dragPosition: a,
+    isDragging: r,
+    selectionState: l,
+    historyState: c
+  } = j;
+  return p(() => {
+    y(r && a ? (s) => [
+      ...s.slice(-50),
+      // Keep last 50 points
+      { x: a.x, y: a.y, timestamp: Date.now() }
+    ] : []);
+  }, [r, a]), p(() => {
+    if (!u || !h) return;
+    const s = () => {
+      const o = performance.now();
+      n.current.frames++, o >= n.current.lastTime + 1e3 && (O(
+        Math.round(
+          n.current.frames * 1e3 / (o - n.current.lastTime)
+        )
+      ), n.current.frames = 0, n.current.lastTime = o), requestAnimationFrame(s);
+    }, m = requestAnimationFrame(s);
+    return () => cancelAnimationFrame(m);
+  }, [u, h]), p(() => {
+    N.current = performance.now();
+  }), p(() => {
+    k(performance.now() - N.current);
+  }), u ? /* @__PURE__ */ t(v, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        className: C(
+          "fixed z-[9999] bg-background border rounded-lg shadow-lg",
+          "max-w-md transition-all duration-200",
+          {
+            "top-left": "top-4 left-4",
+            "top-right": "top-4 right-4",
+            "bottom-left": "bottom-4 left-4",
+            "bottom-right": "bottom-4 right-4"
+          }[I],
+          !i && "w-auto"
+        ),
+        children: [
+          /* @__PURE__ */ t("div", { className: "flex items-center justify-between px-3 py-2 border-b bg-muted/50", children: [
+            /* @__PURE__ */ t("h3", { className: "text-sm font-semibold flex items-center gap-2", children: [
+              /* @__PURE__ */ e("span", { className: "w-2 h-2 rounded-full bg-green-500 animate-pulse" }),
+              "Drag & Drop Debug"
+            ] }),
+            /* @__PURE__ */ e("div", { className: "flex items-center gap-1", children: /* @__PURE__ */ e(
+              "button",
+              {
+                onClick: () => D(!i),
+                className: "p-1 hover:bg-background rounded transition-colors",
+                children: i ? /* @__PURE__ */ e(z, { className: "w-4 h-4" }) : /* @__PURE__ */ e(G, { className: "w-4 h-4" })
+              }
+            ) })
+          ] }),
+          i && /* @__PURE__ */ t("div", { className: "p-3 space-y-3 text-xs max-h-[500px] overflow-auto", children: [
+            h && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ e("h4", { className: "font-semibold text-foreground mb-2", children: "Performance" }),
+              /* @__PURE__ */ t("div", { className: "grid grid-cols-2 gap-2", children: [
+                /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "FPS:" }),
+                  /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: C(
+                        "ml-2 font-mono font-medium",
+                        x >= 50 ? "text-green-500" : x >= 30 ? "text-yellow-500" : "text-red-500"
+                      ),
+                      children: x
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Render:" }),
+                  /* @__PURE__ */ t("span", { className: "ml-2 font-mono font-medium", children: [
+                    S.toFixed(2),
+                    "ms"
+                  ] })
+                ] })
+              ] })
+            ] }),
+            /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ e("h4", { className: "font-semibold text-foreground mb-2", children: "Drag State" }),
+              /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1 space-y-1", children: [
+                /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Is Dragging:" }),
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: r ? "Yes" : "No" })
+                ] }),
+                /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Active ID:" }),
+                  /* @__PURE__ */ e("span", { className: "font-mono font-medium truncate max-w-[120px]", children: R || "—" })
+                ] }),
+                /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Active Index:" }),
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: F ?? "—" })
+                ] }),
+                /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Container:" }),
+                  /* @__PURE__ */ e("span", { className: "font-mono font-medium truncate max-w-[120px]", children: A || "—" })
+                ] }),
+                a && /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Position:" }),
+                  /* @__PURE__ */ t("span", { className: "font-mono font-medium", children: [
+                    "x: ",
+                    Math.round(a.x),
+                    ", y:",
+                    " ",
+                    Math.round(a.y)
+                  ] })
+                ] })
+              ] })
+            ] }),
+            l && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ e("h4", { className: "font-semibold text-foreground mb-2", children: "Multi-Selection" }),
+              /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1 space-y-1", children: [
+                /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Selected:" }),
+                  /* @__PURE__ */ t("span", { className: "font-medium", children: [
+                    l.selectedIds.size,
+                    " items"
+                  ] })
+                ] }),
+                l.selectedIds.size > 0 && /* @__PURE__ */ t("div", { className: "mt-1 pt-1 border-t border-border", children: [
+                  /* @__PURE__ */ e("div", { className: "text-muted-foreground mb-1", children: "IDs:" }),
+                  /* @__PURE__ */ e("div", { className: "flex flex-wrap gap-1", children: Array.from(l.selectedIds).map((s) => /* @__PURE__ */ e(
+                    "span",
+                    {
+                      className: "px-1.5 py-0.5 bg-primary/20 text-primary rounded text-[10px] font-mono",
+                      children: s
+                    },
+                    s
+                  )) })
+                ] })
+              ] })
+            ] }),
+            c && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ e("h4", { className: "font-semibold text-foreground mb-2", children: "Undo/Redo" }),
+              /* @__PURE__ */ t("div", { className: "bg-muted/50 rounded px-2 py-1 space-y-1", children: [
+                /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Can Undo:" }),
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: c.past.length > 0 ? "Yes" : "No" })
+                ] }),
+                /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "Can Redo:" }),
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: c.future.length > 0 ? "Yes" : "No" })
+                ] }),
+                /* @__PURE__ */ t("div", { className: "flex justify-between", children: [
+                  /* @__PURE__ */ e("span", { className: "text-muted-foreground", children: "History Size:" }),
+                  /* @__PURE__ */ e("span", { className: "font-medium", children: c.past.length })
+                ] })
+              ] })
+            ] }),
+            b && /* @__PURE__ */ t("div", { className: "space-y-1", children: [
+              /* @__PURE__ */ e("h4", { className: "font-semibold text-foreground mb-2", children: "Active Item" }),
+              /* @__PURE__ */ e("pre", { className: "bg-muted/50 rounded px-2 py-1 overflow-auto max-h-32 text-[10px] font-mono", children: JSON.stringify(b, null, 2) })
+            ] })
+          ] })
+        ]
+      }
+    ),
+    g && r && d.length > 1 && /* @__PURE__ */ t(
+      "svg",
+      {
+        className: "fixed inset-0 pointer-events-none z-[9998]",
+        style: { width: "100vw", height: "100vh" },
+        children: [
+          /* @__PURE__ */ t("defs", { children: [
+            /* @__PURE__ */ t("linearGradient", { id: "dragPathGrad", x1: "0%", y1: "0%", x2: "100%", y2: "0%", children: [
+              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#6366f1", stopOpacity: "0.6" }),
+              /* @__PURE__ */ e("stop", { offset: "50%", stopColor: "#8b5cf6", stopOpacity: "0.9" }),
+              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#6366f1", stopOpacity: "1" })
+            ] }),
+            /* @__PURE__ */ t("radialGradient", { id: "dotGrad", cx: "30%", cy: "30%", r: "70%", children: [
+              /* @__PURE__ */ e("stop", { offset: "0%", stopColor: "#ffffff", stopOpacity: "1" }),
+              /* @__PURE__ */ e("stop", { offset: "30%", stopColor: "#6366f1", stopOpacity: "1" }),
+              /* @__PURE__ */ e("stop", { offset: "100%", stopColor: "#8b5cf6", stopOpacity: "0.6" })
+            ] })
+          ] }),
+          /* @__PURE__ */ e(
+            "polyline",
+            {
+              points: d.map((s) => `${s.x},${s.y}`).join(" "),
+              fill: "none",
+              stroke: "url(#dragPathGrad)",
+              strokeWidth: 2,
+              strokeOpacity: 0.95,
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          d.map((s, m) => {
+            const o = 0.18 + m / d.length * 0.82;
+            return /* @__PURE__ */ e(
+              "circle",
+              {
+                cx: s.x,
+                cy: s.y,
+                r: 2.25,
+                fill: "url(#dotGrad)",
+                fillOpacity: o
+              },
+              m
+            );
+          })
+        ]
+      }
+    ),
+    g && r && a && /* @__PURE__ */ t(v, { children: [
+      /* @__PURE__ */ e("style", { children: "@keyframes sahaPulse { 0% { transform: scale(1); opacity: 0.95 } 50% { transform: scale(1.12); opacity: 0.75 } 100% { transform: scale(1); opacity: 0.95 } }" }),
+      /* @__PURE__ */ t(
+        "div",
+        {
+          "aria-hidden": !0,
+          style: {
+            position: "fixed",
+            left: a.x,
+            top: a.y,
+            transform: "translate(-50%, -50%)",
+            pointerEvents: "none",
+            zIndex: 1e4,
+            width: 40,
+            height: 40,
+            display: "flex",
+            alignItems: "center",
+            justifyContent: "center"
+          },
+          children: [
+            /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  width: 40,
+                  height: 40,
+                  borderRadius: 9999,
+                  background: "radial-gradient(circle at 35% 30%, rgba(139,92,246,0.20), rgba(99,102,241,0.06))",
+                  border: "1px solid rgba(99,102,241,0.18)",
+                  boxShadow: "0 8px 22px rgba(15,23,42,0.14)",
+                  animation: "sahaPulse 1.6s ease-in-out infinite",
+                  transformOrigin: "center"
+                }
+              }
+            ),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                style: {
+                  position: "absolute",
+                  left: "50%",
+                  top: "50%",
+                  transform: "translate(-50%, -50%)",
+                  width: 10,
+                  height: 10,
+                  borderRadius: 9999,
+                  background: "linear-gradient(135deg,#8b5cf6,#6366f1)",
+                  boxShadow: "0 6px 18px rgba(139,92,246,0.24)"
+                }
+              }
+            )
+          ]
+        }
+      )
+    ] })
+  ] }) : null;
+};
+T.displayName = "DebugOverlay";
+export {
+  T as DebugOverlay
+};

package/dist/components/DragDrop/DragDrop.styles.d.ts

@@ -0,0 +1,46 @@
+export declare const draggableItemVariants: (props?: ({
+    isDragging?: boolean | null | undefined;
+    isOver?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+    axis?: "x" | "y" | "both" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const droppableContainerVariants: (props?: ({
+    direction?: "grid" | "horizontal" | "vertical" | null | undefined;
+    isOver?: boolean | null | undefined;
+    isEmpty?: boolean | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const dragHandleVariants: (props?: ({
+    variant?: "default" | "outline" | "ghost" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
+    disabled?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const dragOverlayVariants: (props?: ({
+    animation?: "smooth" | "spring" | "instant" | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const dropIndicatorVariants: (props?: ({
+    position?: "top" | "bottom" | "after" | "before" | null | undefined;
+    orientation?: "horizontal" | "vertical" | null | undefined;
+    visible?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const placeholderVariants: (props?: ({
+    size?: "sm" | "md" | "lg" | "auto" | null | undefined;
+    visible?: boolean | null | undefined;
+} & import('class-variance-authority/types').ClassProp) | undefined) => string;
+export declare const animations: {
+    dragStart: string;
+    dragEnd: string;
+    dropSuccess: string;
+    dropCancel: string;
+    reorder: string;
+    pulse: string;
+    bounce: string;
+};
+export declare const cursors: {
+    grab: string;
+    grabbing: string;
+    notAllowed: string;
+    move: string;
+    default: string;
+};
+//# sourceMappingURL=DragDrop.styles.d.ts.map

package/dist/components/DragDrop/DragDrop.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DragDrop.styles.d.ts","sourceRoot":"","sources":["../../../src/components/DragDrop/DragDrop.styles.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,qBAAqB;;;;;8EA8BjC,CAAC;AAMF,eAAO,MAAM,0BAA0B;;;;;8EA6BtC,CAAC;AAMF,eAAO,MAAM,kBAAkB;;;;8EA0B9B,CAAC;AAMF,eAAO,MAAM,mBAAmB;;8EAc/B,CAAC;AAMF,eAAO,MAAM,qBAAqB;;;;8EAyBjC,CAAC;AAMF,eAAO,MAAM,mBAAmB;;;8EAoB/B,CAAC;AAMF,eAAO,MAAM,UAAU;;;;;;;;CAQtB,CAAC;AAMF,eAAO,MAAM,OAAO;;;;;;CAMnB,CAAC"}

package/dist/components/DragDrop/DragDrop.styles.js

@@ -0,0 +1,168 @@
+import { cva as r } from "class-variance-authority";
+const e = r(
+  "relative touch-none transition-all duration-150 ease-out",
+  {
+    variants: {
+      isDragging: {
+        true: "cursor-grabbing z-50 opacity-50",
+        false: "cursor-grab hover:shadow-lg hover:scale-[1.01] focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-offset-2"
+      },
+      isOver: {
+        true: "ring-2 ring-primary ring-offset-2",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-40 cursor-not-allowed hover:shadow-none hover:scale-100",
+        false: ""
+      },
+      axis: {
+        x: "",
+        y: "",
+        both: ""
+      }
+    },
+    defaultVariants: {
+      isDragging: !1,
+      isOver: !1,
+      disabled: !1,
+      axis: "y"
+    }
+  }
+), o = r(
+  "relative transition-all duration-150 ease-out",
+  {
+    variants: {
+      direction: {
+        vertical: "flex flex-col gap-2",
+        horizontal: "flex flex-row gap-2 overflow-x-auto",
+        grid: "grid gap-2"
+      },
+      isOver: {
+        true: "bg-primary/5 border-2 border-primary border-dashed rounded-lg shadow-inner scale-[1.01]",
+        false: "border-2 border-transparent"
+      },
+      isEmpty: {
+        true: "min-h-[200px] border-2 border-dashed border-border rounded-lg flex items-center justify-center hover:border-primary/30 hover:bg-primary/5",
+        false: ""
+      },
+      disabled: {
+        true: "opacity-50 cursor-not-allowed hover:border-border",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      direction: "vertical",
+      isOver: !1,
+      isEmpty: !1,
+      disabled: !1
+    }
+  }
+), t = r(
+  "inline-flex items-center justify-center cursor-grab active:cursor-grabbing transition-colors",
+  {
+    variants: {
+      variant: {
+        default: "text-muted-foreground hover:text-foreground hover:bg-accent rounded p-1",
+        ghost: "text-muted-foreground hover:text-foreground",
+        outline: "border-2 border-border hover:border-primary rounded p-1"
+      },
+      size: {
+        sm: "w-4 h-4",
+        md: "w-6 h-6",
+        lg: "w-8 h-8"
+      },
+      disabled: {
+        true: "opacity-40 cursor-not-allowed",
+        false: ""
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "md",
+      disabled: !1
+    }
+  }
+), i = r(
+  "fixed pointer-events-none z-[9999] will-change-transform",
+  {
+    variants: {
+      animation: {
+        smooth: "transition-transform duration-150 ease-out",
+        instant: "",
+        spring: "transition-transform duration-300 ease-spring"
+      }
+    },
+    defaultVariants: {
+      animation: "smooth"
+    }
+  }
+), n = r(
+  "absolute left-0 right-0 h-0.5 bg-primary transition-all duration-150",
+  {
+    variants: {
+      position: {
+        top: "top-0 -translate-y-1",
+        bottom: "bottom-0 translate-y-1",
+        before: "-translate-y-1",
+        after: "translate-y-1"
+      },
+      orientation: {
+        horizontal: "h-0.5 w-full",
+        vertical: "w-0.5 h-full"
+      },
+      visible: {
+        true: "opacity-100 scale-100",
+        false: "opacity-0 scale-0"
+      }
+    },
+    defaultVariants: {
+      position: "top",
+      orientation: "horizontal",
+      visible: !1
+    }
+  }
+), s = r(
+  "bg-accent/50 border-2 border-dashed border-primary rounded transition-all duration-200",
+  {
+    variants: {
+      size: {
+        sm: "h-8",
+        md: "h-12",
+        lg: "h-16",
+        auto: "h-auto"
+      },
+      visible: {
+        true: "opacity-100 scale-100",
+        false: "opacity-0 scale-95"
+      }
+    },
+    defaultVariants: {
+      size: "auto",
+      visible: !1
+    }
+  }
+), l = {
+  dragStart: "animate-in fade-in zoom-in duration-150",
+  dragEnd: "animate-out fade-out zoom-out duration-150",
+  dropSuccess: "animate-in slide-in-from-top-2 duration-200",
+  dropCancel: "animate-out slide-out-to-top-2 duration-200",
+  reorder: "transition-all duration-200 ease-out",
+  pulse: "animate-pulse",
+  bounce: "animate-bounce"
+}, d = {
+  grab: "cursor-grab",
+  grabbing: "cursor-grabbing",
+  notAllowed: "cursor-not-allowed",
+  move: "cursor-move",
+  default: "cursor-default"
+};
+export {
+  l as animations,
+  d as cursors,
+  t as dragHandleVariants,
+  i as dragOverlayVariants,
+  e as draggableItemVariants,
+  n as dropIndicatorVariants,
+  o as droppableContainerVariants,
+  s as placeholderVariants
+};