impact-nova 0.1.13 → 1.1.0

package/dist/components/ui/input.js

@@ -1,4 +1,4 @@
-import { jsxs as s, jsx as t } from "react/jsx-runtime";
+import { jsxs as a, jsx as d } from "react/jsx-runtime";
 import * as x from "react";
 import { Info as h } from "../../icons/index.js";
 import { cva as v } from "class-variance-authority";
@@ -14,7 +14,8 @@ const g = v(
       size: {
         default: "h-8",
         sm: "h-6",
-        md: "h-[28px]"
+        md: "h-[28px]",
+        lg: "h-10"
       },
       disabled: {
         true: "pointer-events-none opacity-100 bg-disabled-secondary-bg border-border text-disabled-text hover:border-border",
@@ -27,79 +28,89 @@ const g = v(
     }
   }
 ), y = x.forwardRef(
-  ({ className: u, type: b, label: a, helperText: o, isError: r, size: p, disabled: d, prefix: i, suffix: n, prefixClick: l, suffixClick: c, ...m }, f) => /* @__PURE__ */ s("div", { className: "w-full space-y-1.5", children: [
-    a && /* @__PURE__ */ s(
-      "label",
-      {
-        className: e(
-          "text-xs font-medium leading-[18px] text-[#60697d]",
-          // Exact legacy color
-          d && "opacity-70",
-          r && "text-destructive"
+  ({ className: u, type: p, label: o, helperText: s, isError: t, size: b, disabled: r, prefix: n, suffix: i, prefixClick: l, suffixClick: c, ...m }, f) => /* @__PURE__ */ a(
+    "div",
+    {
+      className: "w-full space-y-1.5",
+      "data-component": "input",
+      "data-disabled": r || void 0,
+      "data-invalid": t || void 0,
+      children: [
+        o && /* @__PURE__ */ a(
+          "label",
+          {
+            className: e(
+              "text-xs font-medium leading-[18px] text-[#60697d]",
+              // Exact legacy color
+              r && "opacity-70",
+              t && "text-destructive"
+            ),
+            children: [
+              o,
+              " ",
+              m.required && /* @__PURE__ */ d("span", { className: "text-destructive", children: "*" })
+            ]
+          }
         ),
-        children: [
-          a,
-          " ",
-          m.required && /* @__PURE__ */ t("span", { className: "text-destructive", children: "*" })
-        ]
-      }
-    ),
-    /* @__PURE__ */ s(
-      "div",
-      {
-        className: e(
-          g({ size: p, isError: r, disabled: d, className: u }),
-          "bg-background",
-          d && "bg-disabled-secondary-bg"
+        /* @__PURE__ */ a(
+          "div",
+          {
+            className: e(
+              g({ size: b, isError: t, disabled: r, className: u }),
+              "bg-background",
+              r && "bg-disabled-secondary-bg"
+            ),
+            children: [
+              n && /* @__PURE__ */ d(
+                "div",
+                {
+                  onClick: l,
+                  className: e("flex shrink-0 items-center justify-center text-muted-foreground pointer-events-auto", l && "cursor-pointer"),
+                  children: n
+                }
+              ),
+              /* @__PURE__ */ d(
+                "input",
+                {
+                  type: p,
+                  className: e(
+                    "flex h-full w-full bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50",
+                    r && "opacity-100 text-disabled-text placeholder:text-disabled-text"
+                  ),
+                  ref: f,
+                  disabled: !!r,
+                  "data-form-control": "input",
+                  ...m
+                }
+              ),
+              i && /* @__PURE__ */ d(
+                "div",
+                {
+                  onClick: c,
+                  className: e("flex shrink-0 items-center justify-center text-muted-foreground pointer-events-auto", c && "cursor-pointer"),
+                  children: i
+                }
+              )
+            ]
+          }
         ),
-        children: [
-          i && /* @__PURE__ */ t(
-            "div",
-            {
-              onClick: l,
-              className: e("flex shrink-0 items-center justify-center text-muted-foreground pointer-events-auto", l && "cursor-pointer"),
-              children: i
-            }
-          ),
-          /* @__PURE__ */ t(
-            "input",
+        s && /* @__PURE__ */ a("div", { className: e("flex items-center gap-1", t && "text-destructive"), children: [
+          !t && /* @__PURE__ */ d(h, { size: "xs", className: "shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ d(
+            "p",
             {
-              type: b,
               className: e(
-                "flex h-full w-full bg-transparent p-0 text-sm font-medium outline-none placeholder:font-medium placeholder:text-[#dfe2e7] disabled:cursor-not-allowed disabled:opacity-50",
-                d && "opacity-100 text-disabled-text placeholder:text-disabled-text"
+                "text-[10px] text-[#7a8294]",
+                // Exact legacy color
+                t && "text-destructive"
               ),
-              ref: f,
-              disabled: !!d,
-              ...m
-            }
-          ),
-          n && /* @__PURE__ */ t(
-            "div",
-            {
-              onClick: c,
-              className: e("flex shrink-0 items-center justify-center text-muted-foreground pointer-events-auto", c && "cursor-pointer"),
-              children: n
+              children: s
             }
           )
-        ]
-      }
-    ),
-    o && /* @__PURE__ */ s("div", { className: e("flex items-center gap-1", r && "text-destructive"), children: [
-      !r && /* @__PURE__ */ t(h, { size: 10, className: "shrink-0 text-muted-foreground" }),
-      /* @__PURE__ */ t(
-        "p",
-        {
-          className: e(
-            "text-[10px] text-[#7a8294]",
-            // Exact legacy color
-            r && "text-destructive"
-          ),
-          children: o
-        }
-      )
-    ] })
-  ] })
+        ] })
+      ]
+    }
+  )
 );
 y.displayName = "Input";
 export {

package/dist/components/ui/loader.d.ts

@@ -6,6 +6,7 @@ declare const loaderVariants: (props?: {
 export interface LoaderProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof loaderVariants> {
     progress?: string | number;
     text?: string;
+    asChild?: boolean;
 }
 declare const Loader: React.ForwardRefExoticComponent<LoaderProps & React.RefAttributes<HTMLDivElement>>;
 export { Loader, loaderVariants };

package/dist/components/ui/loader.js

@@ -1,8 +1,9 @@
-import { jsxs as m, jsx as i } from "react/jsx-runtime";
+import { jsxs as m, jsx as n } from "react/jsx-runtime";
 import * as c from "react";
+import "@radix-ui/react-slot";
 import { cva as f } from "class-variance-authority";
 import { cn as u } from "../../lib/utils.js";
-const x = f(
+const y = f(
   "relative rounded-full flex items-center justify-center overflow-hidden",
   {
     variants: {
@@ -18,23 +19,25 @@ const x = f(
     }
   }
 ), h = c.forwardRef(
-  ({ className: s, size: n = "md", progress: o, text: t, ...d }, l) => {
-    const a = {
+  ({ className: o, size: t = "md", progress: d, text: a, asChild: p = !1, ...s }, l) => {
+    const i = {
       sm: { outer: 24, inner: 20 },
       md: { outer: 48, inner: 40 },
       lg: { outer: 72, inner: 60 },
       xl: { outer: 96, inner: 80 }
-    }, { outer: e, inner: r } = a[n] || a.md;
+    }, { outer: e, inner: r } = i[t] || i.md;
     return /* @__PURE__ */ m(
       "div",
       {
         ref: l,
-        className: u("flex flex-col items-center justify-center", s),
+        className: u("flex flex-col items-center justify-center", o),
         role: "status",
-        "aria-label": t || "Loading",
-        ...d,
+        "aria-label": a || "Loading",
+        "data-component": "loader",
+        "data-size": t ?? "md",
+        ...s,
         children: [
-          /* @__PURE__ */ i(
+          /* @__PURE__ */ n(
             "div",
             {
               className: "relative animate-spin rounded-full",
@@ -43,7 +46,7 @@ const x = f(
                 width: e,
                 background: "conic-gradient(from 180deg at 50% 50%, rgba(66, 89, 238, 0) 0deg, hsl(var(--primary)) 360deg)"
               },
-              children: /* @__PURE__ */ i(
+              children: /* @__PURE__ */ n(
                 "div",
                 {
                   className: "absolute bg-background rounded-full flex items-center justify-center font-medium animate-[spin_1s_linear_infinite_reverse]",
@@ -54,12 +57,19 @@ const x = f(
                     left: (e - r) / 2,
                     fontSize: e / 6
                   },
-                  children: n !== "sm" && o
+                  children: t !== "sm" && d
                 }
               )
             }
           ),
-          t && /* @__PURE__ */ i("span", { className: "mt-2 text-[12px] font-medium text-foreground", children: t })
+          a && /* @__PURE__ */ n(
+            "span",
+            {
+              className: "mt-2 text-[12px] font-medium text-foreground",
+              "data-component": "loader-text",
+              children: a
+            }
+          )
         ]
       }
     );
@@ -68,5 +78,5 @@ const x = f(
 h.displayName = "Loader";
 export {
   h as Loader,
-  x as loaderVariants
+  y as loaderVariants
 };

package/dist/components/ui/nested-list/components/NestedListContent.d.ts

@@ -1,5 +1,5 @@
 import { default as React } from 'react';
-import { useSensors, DropAnimation, DragStartEvent, DragOverEvent, DragEndEvent } from '@dnd-kit/core';
+import { useSensors, DragStartEvent, DragOverEvent, DragEndEvent } from '@dnd-kit/core';
 import { NestedListItem } from '../../types/nested-list.types';
 interface NestedListContentProps {
     isListCollapsed: boolean;
@@ -10,8 +10,6 @@ interface NestedListContentProps {
         level: number;
     }[];
     renderItem: (item: NestedListItem, level: number) => React.ReactNode;
-    activeItem?: NestedListItem | null;
-    dropAnimationConfig: DropAnimation;
     onDragStart: (event: DragStartEvent) => void;
     onDragOver: (event: DragOverEvent) => void;
     onDragEnd: (event: DragEndEvent) => void;

package/dist/components/ui/nested-list/components/NestedListContent.js

@@ -1,9 +1,10 @@
 import { jsx as t } from "react/jsx-runtime";
-import b, { useRef as y } from "react";
-import { DndContext as z, closestCenter as C } from "@dnd-kit/core";
-import { SortableContext as w, verticalListSortingStrategy as I } from "@dnd-kit/sortable";
-import { useVirtualizer as N } from "@tanstack/react-virtual";
-const T = ({
+import z, { useRef as C } from "react";
+import { DndContext as S } from "@dnd-kit/core";
+import { SortableContext as w } from "@dnd-kit/sortable";
+import { useVirtualizer as y } from "@tanstack/react-virtual";
+import { customCollisionDetection as D } from "../hooks/useNestedListDragDrop.js";
+const _ = ({
   isListCollapsed: a,
   enableDragDrop: d,
   sensors: c,
@@ -14,18 +15,18 @@ const T = ({
   onDragEnd: p,
   onDragCancel: h
 }) => {
-  const r = y(null), n = N({
+  const r = C(null), n = y({
     count: e.length,
     getScrollElement: () => r.current,
     estimateSize: () => 32,
     overscan: 5
-  }), g = b.useMemo(() => e.map((o) => o.item.id), [e]);
+  }), x = z.useMemo(() => e.map((o) => o.item.id), [e]);
   if (a) return null;
-  const i = n.getVirtualItems(), x = n.getTotalSize(), v = i.length > 0 ? i[0].start : 0, l = /* @__PURE__ */ t(
+  const i = n.getVirtualItems(), g = n.getTotalSize(), v = i.length > 0 ? i[0].start : 0, l = /* @__PURE__ */ t(
     "div",
     {
       style: {
-        height: `${x + 48}px`,
+        height: `${g + 48}px`,
         width: "100%",
         position: "relative"
       },
@@ -40,13 +41,13 @@ const T = ({
             transform: `translateY(${v}px)`
           },
           children: i.map((o) => {
-            const { item: s, level: S } = e[o.index];
+            const { item: s, level: b } = e[o.index];
             return /* @__PURE__ */ t(
               "div",
               {
                 "data-index": o.index,
                 ref: n.measureElement,
-                children: m(s, S)
+                children: m(s, b)
               },
               s.id
             );
@@ -56,18 +57,18 @@ const T = ({
     }
   );
   return /* @__PURE__ */ t("div", { className: "flex flex-col min-h-0 h-full", children: /* @__PURE__ */ t("div", { ref: r, className: "flex-1 p-1 overflow-y-auto", children: d ? /* @__PURE__ */ t(
-    z,
+    S,
     {
       sensors: c,
-      collisionDetection: C,
+      collisionDetection: D,
       onDragStart: f,
       onDragOver: u,
       onDragEnd: p,
       onDragCancel: h,
-      children: /* @__PURE__ */ t(w, { items: g, strategy: I, children: l })
+      children: /* @__PURE__ */ t(w, { items: x, children: l })
     }
   ) : l }) });
 };
 export {
-  T as NestedListContent
+  _ as NestedListContent
 };

package/dist/components/ui/nested-list/components/SortableItem.js

@@ -1,119 +1,148 @@
-import { jsx as r, jsxs as z } from "react/jsx-runtime";
-import D, { useMemo as P } from "react";
-import { useSortable as R, defaultAnimateLayoutChanges as E } from "@dnd-kit/sortable";
-import { CSS as L } from "@dnd-kit/utilities";
+import { jsx as t, jsxs as h } from "react/jsx-runtime";
+import D, { useMemo as z } from "react";
+import { useSortable as E, defaultAnimateLayoutChanges as O } from "@dnd-kit/sortable";
+import { useDroppable as P } from "@dnd-kit/core";
+import { CSS as $ } from "@dnd-kit/utilities";
 import { Checkbox as j } from "../../checkbox.js";
-import { ChevronRight as A, Drag as H } from "../../../../icons/index.js";
-import { cn as a } from "../../../../lib/utils.js";
-const M = (e, s, o, d, i) => {
-  const t = "flex items-center gap-1 py-[3px] px-2 rounded transition-all duration-200";
-  return e ? a(t, "bg-transparent") : i ? a(t, "bg-red-100 border border-red-300 animate-pulse") : s && o ? d ? a(t, "bg-blue-50 border-2 border-blue-300 shadow-sm") : a(t, "bg-red-50 border-2 border-red-300 shadow-sm") : a(t, "hover:bg-gray-50");
-}, O = (e) => E({ ...e, wasDragging: !0 }), _ = ({
+import { ChevronRight as H, Drag as L } from "../../../../icons/index.js";
+import { cn as n } from "../../../../lib/utils.js";
+const F = (e, o, r, l, a) => {
+  const d = "flex items-center gap-1 py-[3px] px-2 rounded transition-all duration-200";
+  return e ? n(d, "bg-transparent") : a ? n(d, "bg-red-100 border border-red-300 animate-pulse") : o && r ? l ? n(d, "bg-blue-50 border-2 border-blue-300 shadow-sm") : n(d, "bg-red-50 border-2 border-red-300 shadow-sm") : n(d, "hover:bg-gray-50");
+}, M = (e) => O({ ...e, wasDragging: !0 }), _ = ({ item: e, isAnyDragging: o }) => {
+  const r = !e.children || e.children.length === 0, {
+    setNodeRef: l,
+    isOver: a
+  } = P({
+    id: `droppable-${e.id}`,
+    data: { sectionId: e.id },
+    disabled: !r
+  });
+  return /* @__PURE__ */ h("div", { ref: r ? l : void 0, children: [
+    /* @__PURE__ */ h(
+      "div",
+      {
+        className: n(
+          "flex items-center px-2 py-0 text-xs font-[500] leading-4 text-[#7a8294] select-none",
+          e.id === "root-scrollable" ? "mt-2 pt-2 pb-1 border-t border-solid border-gray-100" : "mt-1 pb-1",
+          a && o && r && "bg-blue-50 rounded"
+        ),
+        children: [
+          e.label,
+          a && o && r && /* @__PURE__ */ t("span", { className: "ml-2 text-blue-400 text-[11px]", children: "Drop here" })
+        ]
+      }
+    ),
+    r && /* @__PURE__ */ t(
+      "div",
+      {
+        className: n(
+          "mx-2 my-1 rounded border-2 border-dashed min-h-[36px] flex items-center justify-center text-[11px] transition-colors",
+          a && o ? "border-blue-400 bg-blue-50 text-blue-400" : "border-gray-200 text-gray-300"
+        ),
+        children: a && o ? "Release to drop" : "Drag here"
+      }
+    )
+  ] });
+}, T = ({
   item: e,
-  level: s,
-  isCollapsed: o,
-  onToggle: d,
-  onToggleCollapse: i,
-  isAnyDragging: t = !1,
-  isOver: b = !1,
-  isValidDrop: m = !1,
+  level: o,
+  isCollapsed: r,
+  onToggle: l,
+  onToggleCollapse: a,
+  isAnyDragging: d = !1,
+  isOver: p = !1,
+  isValidDrop: f = !1,
   enableDragDrop: x = !0,
-  enableCollapse: p = !0,
-  shouldBlink: C = !1
+  enableCollapse: u = !0,
+  shouldBlink: g = !1
 }) => {
-  const g = e.category === "structure", l = e.children && e.children.length > 0, v = P(() => !e.children || e.children.length === 0 || e.children.every((h) => h.checked) ? !1 : e.children.some((h) => h.checked), [e.children]), {
-    attributes: y,
-    listeners: k,
-    setNodeRef: u,
+  const m = e.category === "structure", c = e.children && e.children.length > 0, v = z(() => !e.children || e.children.length === 0 || e.children.every((b) => b.checked) ? !1 : e.children.some((b) => b.checked), [e.children]), {
+    attributes: C,
+    listeners: y,
+    setNodeRef: k,
     transform: N,
-    transition: w,
-    isDragging: c,
-    isOver: I
-  } = R({
+    transition: I,
+    isDragging: i,
+    isOver: S
+  } = E({
     id: e.id,
-    animateLayoutChanges: O,
+    animateLayoutChanges: M,
     data: {
-      level: s,
-      hasChildren: l,
-      isExpanded: !o
+      level: o,
+      hasChildren: c,
+      isExpanded: !r
     },
-    disabled: g || e.disabled
-  }), S = b !== void 0 ? b : I, f = {
-    transform: L.Transform.toString(N),
-    transition: w,
-    opacity: c ? 0.5 : 1,
-    zIndex: c ? 100 : "auto",
+    disabled: m || e.disabled
+  });
+  if (m)
+    return /* @__PURE__ */ t(_, { item: e, isAnyDragging: d });
+  const w = p !== void 0 ? p : S, R = {
+    transform: $.Transform.toString(N),
+    transition: I,
+    opacity: i ? 0.5 : 1,
+    zIndex: i ? 100 : "auto",
     height: "auto"
   };
-  return g ? /* @__PURE__ */ r(
+  return /* @__PURE__ */ t(
     "div",
     {
-      ref: u,
-      style: f,
-      className: a(
-        "flex items-center px-2 py-0 text-xs font-[500] leading-4 text-[#7a8294] select-none",
-        e.id === "root-scrollable" ? "mt-2 pt-2 pb-1 border-t border-solid border-gray-100" : "mt-1 pb-1"
-      ),
-      children: e.label
-    }
-  ) : /* @__PURE__ */ r(
-    "div",
-    {
-      ref: u,
-      style: f,
+      ref: k,
+      style: R,
       className: "relative",
       "data-item-id": e.id,
-      "data-level": s,
+      "data-level": o,
       "data-checked": e.checked,
       "data-disabled": e.disabled,
-      "data-collapsed": o,
-      children: /* @__PURE__ */ z(
+      "data-collapsed": r,
+      children: /* @__PURE__ */ h(
         "div",
         {
-          className: M(
-            c,
-            S,
-            t,
-            m,
-            C
+          className: F(
+            i,
+            w,
+            d,
+            f,
+            g
           ),
           style: {
-            paddingLeft: `${8 + s * 20}px`
+            paddingLeft: `${8 + o * 20}px`
           },
           children: [
-            p && l && /* @__PURE__ */ r(
+            u && c && /* @__PURE__ */ t(
               "button",
               {
                 type: "button",
-                onClick: (n) => {
-                  n.stopPropagation(), i(e.id);
+                onClick: (s) => {
+                  s.stopPropagation(), a(e.id);
                 },
-                onMouseDown: (n) => n.stopPropagation(),
+                onMouseDown: (s) => s.stopPropagation(),
                 className: "p-1 hover:bg-gray-200 rounded-full transition-colors flex items-center text-[#8C8C8C] hover:text-primary",
-                "aria-label": o ? "Expand" : "Collapse",
-                children: /* @__PURE__ */ r(
-                  A,
+                "aria-label": r ? "Expand" : "Collapse",
+                children: /* @__PURE__ */ t(
+                  H,
                   {
                     size: "16px",
-                    className: a("transition-transform", !o && "rotate-90")
+                    className: n("transition-transform", !r && "rotate-90")
                   }
                 )
               }
             ),
-            (!p || !l) && /* @__PURE__ */ r("div", { className: "w-4" }),
-            /* @__PURE__ */ r(
+            (!u || !c) && /* @__PURE__ */ t("div", { className: "w-4" }),
+            /* @__PURE__ */ t(
               j,
               {
+                id: `checkbox-${e.id}`,
                 checked: v ? "indeterminate" : e.checked,
-                onCheckedChange: () => d(e.id),
+                onCheckedChange: () => l(e.id),
                 disabled: e.disabled
               }
             ),
-            x && /* @__PURE__ */ r(
+            x && /* @__PURE__ */ t(
               "div",
               {
+                ...C,
                 ...y,
-                ...k,
                 className: "cursor-grab active:cursor-grabbing p-0 hover:bg-gray-200 rounded flex items-center",
                 style: {
                   pointerEvents: "auto",
@@ -121,19 +150,26 @@ const M = (e, s, o, d, i) => {
                   zIndex: 30,
                   touchAction: "none"
                 },
-                onPointerDown: (n) => {
-                  n.stopPropagation();
+                onPointerDown: (s) => {
+                  s.stopPropagation();
                 },
-                children: /* @__PURE__ */ r(H, { size: "14px", color: "#8C8C8C" })
+                children: /* @__PURE__ */ t(L, { size: "14px", color: "#8C8C8C" })
               }
             ),
-            /* @__PURE__ */ r("span", { className: "flex-1 text-[13px] text-gray-900 capitalize ml-1", children: e.label })
+            /* @__PURE__ */ t(
+              "label",
+              {
+                htmlFor: `checkbox-${e.id}`,
+                className: "flex-1 text-[13px] text-gray-900 capitalize ml-1 cursor-pointer select-none",
+                children: e.label
+              }
+            )
           ]
         }
       )
     }
   );
-}, Q = D.memo(_);
+}, X = D.memo(T);
 export {
-  Q as SortableItem
+  X as SortableItem
 };

package/dist/components/ui/nested-list/hooks/useNestedListDragDrop.d.ts

@@ -1,5 +1,17 @@
-import { DragEndEvent } from '@dnd-kit/core';
+import { DragEndEvent, CollisionDetection } from '@dnd-kit/core';
 import { NestedListItem } from '../../types/nested-list.types';
+/**
+ * Custom collision detection: closestCorners but filters out section header
+ * sortable nodes from results. This prevents headers from "stealing" drops
+ * that should target child items.
+ *
+ * - When children exist nearby: header is filtered → closest child wins →
+ *   handleCrossParentReorder gives precise positioning
+ * - When section is empty: only the droppable node (droppable-root-*)
+ *   exists → not filtered → handleDropOnSection handles it
+ * - Edge case (no children nearby): headers are included as fallback
+ */
+export declare const customCollisionDetection: CollisionDetection;
 interface UseNestedListDragDropProps {
     items: NestedListItem[];
     onDragEnd?: (activeId: string, overId: string | null) => void;