@bioturing/components 0.45.0 → 0.46.1

package/dist/components/drag-drop/droppable.js.map

@@ -1 +1 @@
-{"version":3,"file":"droppable.js","sources":["../../../src/components/drag-drop/droppable.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useMemo, memo } from \"react\";\nimport { useDroppable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { ArrowsOutCardinalIcon } from \"@bioturing/assets\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { Data, DragDropDroppableProps, DraggableInfo } from \"./types\";\nimport { Value } from \"./value\";\nimport { uniqWith, isEqual } from \"es-toolkit\";\n\n/**\n * A drop zone component that can receive draggable items\n * Styled similarly to the Upload component's droppable area\n */\nconst DroppableInner = <T extends Data = Data, M extends boolean = false>({\n  id,\n  children,\n  className,\n  disabled = false,\n  placeholder = \"Drop items here\",\n  icon = <ArrowsOutCardinalIcon />,\n  render,\n  onDrop,\n  validate,\n  multiple,\n  value,\n  onChange,\n  maxItems,\n  renderValueLabel,\n  renderValueIcon,\n  ...rest\n}: DragDropDroppableProps<T, M>) => {\n  const cls = useCls();\n  const handleOnDrop = useCallback(\n    (item: DraggableInfo<T>) => {\n      if (onDrop) {\n        onDrop(item);\n      }\n      if (onChange) {\n        if (multiple) {\n          (onChange as (value: T[]) => void)(\n            uniqWith([...(value as T[]), item.data], isEqual)\n          );\n        } else {\n          (onChange as (value: T) => void)(item.data);\n        }\n      }\n    },\n    [onDrop, onChange, multiple, value]\n  );\n  const { isOver, setNodeRef, attributes, listeners } = useDroppable({\n    id,\n    disabled,\n    onDrop: handleOnDrop,\n    validate,\n  });\n\n  // memoize value props to avoid re-renders\n  const valueProps = useMemo(\n    () => ({\n      value,\n      onChange,\n      multiple,\n      renderValueLabel,\n      renderValueIcon,\n      maxItems,\n    }),\n    [value, onChange, multiple, renderValueLabel, renderValueIcon, maxItems]\n  );\n\n  // memoize dropzone content\n  const dropzoneContent = useMemo(\n    () =>\n      children || (\n        <div className={cls(\"drop-zone-content\")}>\n          <div className={cls(\"drop-zone-icon\")}>{icon}</div>\n          <div className={cls(\"drop-zone-text\")}>{placeholder}</div>\n        </div>\n      ),\n    [children, cls, icon, placeholder]\n  );\n\n  // memoize default render tree\n  const defaultRender = useCallback<\n    (props: Record<string, unknown>) => React.ReactElement\n  >(\n    ({ className, ...props }) => {\n      if (!value || (multiple && Array.isArray(value) && !value.length)) {\n        return (\n          <div\n            className={clsx(cls(\"drop-zone\"), className as string)}\n            {...props}\n          >\n            {dropzoneContent}\n          </div>\n        );\n      }\n      // return value when there is a value\n      return (\n        <Value<T, M>\n          {...valueProps}\n          className={className as string}\n          {...props}\n        />\n      );\n    },\n    [value, multiple, valueProps, dropzoneContent, cls]\n  );\n\n  const renderedElement = useRender({\n    render: render ?? defaultRender,\n    ref: setNodeRef,\n    props: {\n      className: className,\n      ...attributes,\n      ...listeners,\n      ...rest,\n    },\n    state: {\n      isOver,\n      value,\n      onChange: onChange as (value: M extends true ? T[] : T) => void,\n      id,\n    },\n  });\n\n  return renderedElement;\n};\n\nexport const Droppable = memo(DroppableInner) as typeof DroppableInner;\n"],"names":["DroppableInner","id","children","className","disabled","placeholder","icon","ArrowsOutCardinalIcon","render","onDrop","validate","multiple","value","onChange","maxItems","renderValueLabel","renderValueIcon","rest","cls","useCls","handleOnDrop","useCallback","item","uniqWith","isEqual","isOver","setNodeRef","attributes","listeners","useDroppable","valueProps","useMemo","dropzoneContent","jsxs","jsx","defaultRender","props","clsx","Value","useRender","Droppable","memo"],"mappings":";;;;;;;;;;AAeA,MAAMA,IAAiB,CAAmD;AAAA,EACxE,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,MAAAC,sBAAQC,GAAA,EAAsB;AAAA,EAC9B,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAoC;AAClC,QAAMC,IAAMC,EAAA,GACNC,IAAeC;AAAA,IACnB,CAACC,MAA2B;AAC1B,MAAIb,KACFA,EAAOa,CAAI,GAETT,KAECA;AAAA,QADCF,IAEAY,EAAS,CAAC,GAAIX,GAAeU,EAAK,IAAI,GAAGE,CAAO,IAGjBF,EAAK;AAAA,MAHY;AAAA,IAMxD;AAAA,IACA,CAACb,GAAQI,GAAUF,GAAUC,CAAK;AAAA,EAAA,GAE9B,EAAE,QAAAa,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAa;AAAA,IACjE,IAAA5B;AAAA,IACA,UAAAG;AAAA,IACA,QAAQgB;AAAA,IACR,UAAAV;AAAA,EAAA,CACD,GAGKoB,IAAaC;AAAA,IACjB,OAAO;AAAA,MACL,OAAAnB;AAAA,MACA,UAAAC;AAAA,MACA,UAAAF;AAAA,MACA,kBAAAI;AAAA,MACA,iBAAAC;AAAA,MACA,UAAAF;AAAA,IAAA;AAAA,IAEF,CAACF,GAAOC,GAAUF,GAAUI,GAAkBC,GAAiBF,CAAQ;AAAA,EAAA,GAInEkB,IAAkBD;AAAA,IACtB,MACE7B,KACE,gBAAA+B,EAAC,SAAI,WAAWf,EAAI,mBAAmB,GACrC,UAAA;AAAA,MAAA,gBAAAgB,EAAC,OAAA,EAAI,WAAWhB,EAAI,gBAAgB,GAAI,UAAAZ,GAAK;AAAA,wBAC5C,OAAA,EAAI,WAAWY,EAAI,gBAAgB,GAAI,UAAAb,EAAA,CAAY;AAAA,IAAA,GACtD;AAAA,IAEJ,CAACH,GAAUgB,GAAKZ,GAAMD,CAAW;AAAA,EAAA,GAI7B8B,IAAgBd;AAAA,IAGpB,CAAC,EAAE,WAAAlB,GAAW,GAAGiC,QACX,CAACxB,KAAUD,KAAY,MAAM,QAAQC,CAAK,KAAK,CAACA,EAAM,SAEtD,gBAAAsB;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWG,EAAKnB,EAAI,WAAW,GAAGf,CAAmB;AAAA,QACpD,GAAGiC;AAAA,QAEH,UAAAJ;AAAA,MAAA;AAAA,IAAA,IAML,gBAAAE;AAAA,MAACI;AAAA,MAAA;AAAA,QACE,GAAGR;AAAA,QACJ,WAAW3B;AAAAA,QACV,GAAGiC;AAAA,MAAA;AAAA,IAAA;AAAA,IAIV,CAACxB,GAAOD,GAAUmB,GAAYE,GAAiBd,CAAG;AAAA,EAAA;AAoBpD,SAjBwBqB,EAAU;AAAA,IAChC,QAAQ/B,KAAU2B;AAAA,IAClB,KAAKT;AAAA,IACL,OAAO;AAAA,MACL,WAAAvB;AAAA,MACA,GAAGwB;AAAA,MACH,GAAGC;AAAA,MACH,GAAGX;AAAA,IAAA;AAAA,IAEL,OAAO;AAAA,MACL,QAAAQ;AAAA,MACA,OAAAb;AAAA,MACA,UAAAC;AAAA,MACA,IAAAZ;AAAA,IAAA;AAAA,EACF,CACD;AAGH,GAEauC,IAAYC,EAAKzC,CAAc;"}
+{"version":3,"file":"droppable.js","sources":["../../../src/components/drag-drop/droppable.tsx"],"sourcesContent":["\"use client\";\n\nimport React, { useCallback, useMemo, memo } from \"react\";\nimport { useDroppable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { ArrowsOutCardinalIcon } from \"@bioturing/assets\";\nimport { useRender } from \"@base-ui/react/use-render\";\nimport type { Data, DragDropDroppableProps, DraggableInfo } from \"./types\";\nimport { Value } from \"./value\";\nimport { uniqWith, isEqual } from \"es-toolkit\";\n\nconst hasDroppableValue = (value: unknown) => {\n  if (Array.isArray(value)) {\n    return value.length > 0;\n  }\n\n  return Boolean(value);\n};\n\nconst droppableStateAttributesMapping = {\n  value: (value: unknown) =>\n    hasDroppableValue(value) ? { \"data-value\": \"true\" } : null,\n  onChange: () => null,\n};\n\n/**\n * A drop zone component that can receive draggable items\n * Styled similarly to the Upload component's droppable area\n */\nconst DroppableInner = <T extends Data = Data, M extends boolean = false>({\n  id,\n  children,\n  className,\n  disabled = false,\n  placeholder = \"Drop items here\",\n  icon = <ArrowsOutCardinalIcon />,\n  render,\n  onDrop,\n  validate,\n  multiple,\n  value,\n  onChange,\n  maxItems,\n  renderValueLabel,\n  renderValueIcon,\n  ...rest\n}: DragDropDroppableProps<T, M>) => {\n  const cls = useCls();\n  const handleOnDrop = useCallback(\n    (item: DraggableInfo<T>) => {\n      if (onDrop) {\n        onDrop(item);\n      }\n      if (onChange) {\n        if (multiple) {\n          (onChange as (value: T[]) => void)(\n            uniqWith([...(value as T[]), item.data], isEqual)\n          );\n        } else {\n          (onChange as (value: T) => void)(item.data);\n        }\n      }\n    },\n    [onDrop, onChange, multiple, value]\n  );\n  const { isOver, setNodeRef, attributes, listeners } = useDroppable({\n    id,\n    disabled,\n    onDrop: handleOnDrop,\n    validate,\n  });\n\n  // memoize value props to avoid re-renders\n  const valueProps = useMemo(\n    () => ({\n      value,\n      onChange,\n      multiple,\n      renderValueLabel,\n      renderValueIcon,\n      maxItems,\n    }),\n    [value, onChange, multiple, renderValueLabel, renderValueIcon, maxItems]\n  );\n\n  // memoize dropzone content\n  const dropzoneContent = useMemo(\n    () =>\n      children || (\n        <div className={cls(\"drop-zone-content\")}>\n          <div className={cls(\"drop-zone-icon\")}>{icon}</div>\n          <div className={cls(\"drop-zone-text\")}>{placeholder}</div>\n        </div>\n      ),\n    [children, cls, icon, placeholder]\n  );\n\n  // memoize default render tree\n  const defaultRender = useCallback<\n    (props: Record<string, unknown>) => React.ReactElement\n  >(\n    ({ className, ...props }) => {\n      if (!value || (multiple && Array.isArray(value) && !value.length)) {\n        return (\n          <div\n            className={clsx(cls(\"drop-zone\"), className as string)}\n            {...props}\n          >\n            {dropzoneContent}\n          </div>\n        );\n      }\n      // return value when there is a value\n      return (\n        <Value<T, M>\n          {...valueProps}\n          className={className as string}\n          {...props}\n        />\n      );\n    },\n    [value, multiple, valueProps, dropzoneContent, cls]\n  );\n\n  const renderedElement = useRender({\n    render: render ?? defaultRender,\n    ref: setNodeRef,\n    props: {\n      className: className,\n      ...attributes,\n      ...listeners,\n      ...rest,\n    },\n    state: {\n      isOver,\n      value,\n      onChange: onChange as (value: M extends true ? T[] : T) => void,\n      id,\n    },\n    stateAttributesMapping: droppableStateAttributesMapping,\n  });\n\n  return renderedElement;\n};\n\nexport const Droppable = memo(DroppableInner) as typeof DroppableInner;\n"],"names":["hasDroppableValue","value","droppableStateAttributesMapping","DroppableInner","id","children","className","disabled","placeholder","icon","ArrowsOutCardinalIcon","render","onDrop","validate","multiple","onChange","maxItems","renderValueLabel","renderValueIcon","rest","cls","useCls","handleOnDrop","useCallback","item","uniqWith","isEqual","isOver","setNodeRef","attributes","listeners","useDroppable","valueProps","useMemo","dropzoneContent","jsxs","jsx","defaultRender","props","clsx","Value","useRender","Droppable","memo"],"mappings":"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"}

package/dist/components/drag-drop/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,IAAI,IAAI,QAAQ,EAErB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AASjB,OAAO,aAAa,CAAC;AAErB;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAE,EAC1D,QAAQ,EAER,SAAS,EAAE,UAAU,EACrB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,OAAO,EACf,SAAS,GACV,EAAE,aAAa,CAAC,CAAC,CAAC,2CA6BlB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;IACnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;WAY+rD,CAAC;;CAVnsD,CAAC;AAEH,YAAY,EACV,YAAY,EACZ,cAAc,EACd,sBAAsB,EACtB,sBAAsB,EACtB,QAAQ,EACR,aAAa,GACd,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/index.tsx"],"names":[],"mappings":"AAEA,OAAO,EACL,KAAK,YAAY,EACjB,KAAK,cAAc,EACnB,KAAK,IAAI,IAAI,QAAQ,EAErB,KAAK,sBAAsB,EAC3B,KAAK,sBAAsB,EAC3B,KAAK,aAAa,EACnB,MAAM,SAAS,CAAC;AASjB,OAAO,aAAa,CAAC;AAErB;;GAEG;AACH,wBAAgB,YAAY,CAAC,CAAC,SAAS,QAAQ,GAAG,QAAQ,EAAE,EAC1D,QAAQ,EAER,SAAS,EAAE,UAAU,EACrB,WAAW,EAAE,YAAY,EACzB,MAAM,EAAE,OAAO,EACf,SAAS,GACV,EAAE,aAAa,CAAC,CAAC,CAAC,2CA6BlB;AAED;;GAEG;AACH,eAAO,MAAM,QAAQ;IACnB;;OAEG;;IAGH;;OAEG;;IAGH;;OAEG;;WAYuoD,CAAC;;CAV3oD,CAAC;AAEH,YAAY,EACV,YAAY,EACZ,cAAc,EACd,sBAAsB,EACtB,sBAAsB,EACtB,QAAQ,EACR,aAAa,GACd,CAAC"}

package/dist/components/drag-drop/value.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/value.tsx"],"names":[],"mappings":"AAGA,OAAO,EAKL,KAAK,YAAY,EAElB,MAAM,OAAO,CAAC;AAMf,OAAO,EAAE,kBAAkB,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAGxD,iBAAS,UAAU,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,OAAO,EACnD,EACE,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EAC3B,GAAG,EAAE,YAAY,CAAC,cAAc,CAAC,2CAwHlC;AAED,eAAO,MAAM,KAAK,EAAmC,CACnD,CAAC,SAAS,IAAI,EACd,CAAC,SAAS,OAAO,EAEjB,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACrE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}
+{"version":3,"file":"value.d.ts","sourceRoot":"","sources":["../../../src/components/drag-drop/value.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA+C,KAAK,YAAY,EAAY,MAAM,OAAO,CAAC;AAOjG,OAAO,EAAE,kBAAkB,EAAE,KAAK,IAAI,EAAE,MAAM,SAAS,CAAC;AAGxD,iBAAS,UAAU,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,OAAO,EACnD,EACE,KAAK,EACL,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,eAAe,EACf,SAAS,EACT,KAAK,EACL,QAAQ,EACR,GAAG,IAAI,EACR,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,EAC3B,GAAG,EAAE,YAAY,CAAC,cAAc,CAAC,2CA2GlC;AAED,eAAO,MAAM,KAAK,EAAmC,CAAC,CAAC,SAAS,IAAI,EAAE,CAAC,SAAS,OAAO,EACrF,KAAK,EAAE,kBAAkB,CAAC,CAAC,EAAE,CAAC,CAAC,GAAG;IAAE,GAAG,CAAC,EAAE,YAAY,CAAC,cAAc,CAAC,CAAA;CAAE,KACrE,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC"}

package/dist/components/drag-drop/value.js

@@ -1,87 +1,72 @@
 "use client";
-import { jsx as o, jsxs as I, Fragment as h } from "react/jsx-runtime";
-import { FileIcon as M, XIcon as T } from "@bioturing/assets";
-import { isEqual as q } from "es-toolkit";
-import { memo as x, forwardRef as y, useState as B, useCallback as n, cloneElement as C } from "react";
+import { jsx as o, jsxs as M, Fragment as h } from "react/jsx-runtime";
+import { FileIcon as T, XIcon as q } from "@bioturing/assets";
+import { isEqual as x } from "es-toolkit";
+import { memo as y, forwardRef as B, useState as C, useCallback as n, cloneElement as I } from "react";
 import { Stack as X } from "../stack/index.js";
 import v from "merge-refs";
 import { Tag as A } from "../tag/component.js";
 import { useCls as D } from "../utils/antdUtils.js";
 import { Truncate as G } from "../truncate/component.js";
 import { IconButton as H } from "../icon-button/component.js";
-function J({
+import { clsx as J } from "../utils/cn.js";
+function K({
   value: s,
   onChange: c,
   multiple: t,
-  renderValueLabel: f,
-  renderValueIcon: p,
+  renderValueLabel: p,
+  renderValueIcon: d,
   className: R,
   style: E,
-  maxItems: m,
+  maxItems: i,
   ...N
 }, S) {
-  const l = D(), [u, g] = B(null), k = n((e) => {
-    g(e);
-  }, []), i = n(
-    (e) => {
-      const r = f(e);
-      return typeof r == "string" ? /* @__PURE__ */ o(
-        G,
-        {
-          position: "middle",
-          className: l("dropzone-value-label"),
-          container: u,
-          children: r
-        }
-      ) : /* @__PURE__ */ o("span", { className: l("dropzone-value-label"), children: r });
+  const l = D(), [u, g] = C(null), k = n((r) => {
+    g(r);
+  }, []), a = n(
+    (r) => {
+      const e = p(r);
+      return typeof e == "string" ? /* @__PURE__ */ o(G, { position: "middle", className: l("dropzone-value-label"), container: u, children: e }) : /* @__PURE__ */ o("span", { className: l("dropzone-value-label"), children: e });
     },
-    [l, u, f]
-  ), a = n(
-    (e) => C(p(e) || /* @__PURE__ */ o(M, {}), {
+    [l, u, p]
+  ), m = n(
+    (r) => I(d(r) || /* @__PURE__ */ o(T, {}), {
       className: l("dropzone-value-icon")
     }),
-    [l, p]
+    [l, d]
   ), b = n(
-    (e) => {
-      c(
-        s.filter((r) => !q(r, e))
-      );
+    (r) => {
+      c(s.filter((e) => !x(e, r)));
     },
     [c, s]
   ), z = n(() => {
     t ? c([]) : c?.(null);
-  }, [c, t]), d = n(
-    (e) => {
-      const r = i(e);
-      return /* @__PURE__ */ I(h, { children: [
-        a(e),
-        r,
-        /* @__PURE__ */ o(H, { size: "small", onClick: z, children: /* @__PURE__ */ o(T, {}) })
+  }, [c, t]), f = n(
+    (r) => {
+      const e = a(r);
+      return /* @__PURE__ */ M(h, { children: [
+        m(r),
+        e,
+        /* @__PURE__ */ o(H, { size: "small", onClick: z, children: /* @__PURE__ */ o(q, {}) })
       ] });
     },
-    [i, a, z]
+    [a, m, z]
   ), j = n(
-    (e) => m == 1 ? d(e[0]) : /* @__PURE__ */ o(h, { children: (e || []).map((r, w) => {
-      const F = i(r);
+    (r) => i == 1 ? f(r[0]) : /* @__PURE__ */ o(h, { children: (r || []).map((e, w) => {
+      const F = a(e);
       return /* @__PURE__ */ o(
         A,
         {
-          icon: a(r),
+          icon: m(e),
           size: "large",
           closable: !0,
-          onClose: () => b(r),
+          onClose: () => b(e),
           children: F
         },
         w
       );
     }) }),
-    [
-      i,
-      a,
-      m,
-      d,
-      b
-    ]
+    [a, m, i, f, b]
   );
   return /* @__PURE__ */ o(
     X,
@@ -89,20 +74,19 @@ function J({
       ref: v(S, k),
       gap: t ? 4 : 8,
       align: "center",
-      wrap: t && m !== 1,
-      className: l(
-        "dropzone-value",
-        t && "dropzone-value-multiple",
+      wrap: t && i !== 1,
+      className: J(
+        l("dropzone-value", t && i != 1 && "dropzone-value-multiple"),
         R
       ),
       style: E,
       ...N,
-      children: t ? j(s) : d(s)
+      children: t ? j(s) : f(s)
     }
   );
 }
-const $ = x(y(J));
+const rr = y(B(K));
 export {
-  $ as Value
+  rr as Value
 };
 //# sourceMappingURL=value.js.map

package/dist/components/drag-drop/value.js.map

@@ -1 +1 @@
-{"version":3,"file":"value.js","sources":["../../../src/components/drag-drop/value.tsx"],"sourcesContent":["\"use client\";\nimport { FileIcon, XIcon } from \"@bioturing/assets\";\nimport { isEqual } from \"es-toolkit\";\nimport {\n  cloneElement,\n  forwardRef,\n  memo,\n  useCallback,\n  type ForwardedRef,\n  useState,\n} from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport { Stack } from \"../stack\";\nimport { Tag } from \"../tag\";\nimport { Truncate } from \"../truncate\";\nimport { useCls } from \"../utils\";\nimport { DragDropValueProps, type Data } from \"./types\";\nimport mergeRefs from \"merge-refs\";\n\nfunction ValueInner<T extends Data, M extends boolean>(\n  {\n    value,\n    onChange,\n    multiple,\n    renderValueLabel,\n    renderValueIcon,\n    className,\n    style,\n    maxItems,\n    ...rest\n  }: DragDropValueProps<T, M>,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const cls = useCls();\n\n  // todo: make this as reusable hook\n  const [containerEl, setContainerEl] = useState<HTMLDivElement>(null);\n  const containerRef = useCallback((el: HTMLDivElement | null) => {\n    setContainerEl(el);\n  }, []);\n\n  const renderLabel = useCallback(\n    (value: T) => {\n      const label = renderValueLabel(value);\n      return typeof label === \"string\" ? (\n        <Truncate\n          position=\"middle\"\n          className={cls(\"dropzone-value-label\")}\n          container={containerEl}\n        >\n          {label}\n        </Truncate>\n      ) : (\n        <span className={cls(\"dropzone-value-label\")}>{label}</span>\n      );\n    },\n    [cls, containerEl, renderValueLabel]\n  );\n\n  const renderedValueIcon = useCallback(\n    (value: T) => {\n      return cloneElement(renderValueIcon(value) || <FileIcon />, {\n        className: cls(\"dropzone-value-icon\"),\n      });\n    },\n    [cls, renderValueIcon]\n  );\n\n  const handleResetMultiple = useCallback(\n    (singleValue: T) => {\n      (onChange as (value: T[]) => void)(\n        (value as T[]).filter((v) => !isEqual(v, singleValue))\n      );\n    },\n    [onChange, value]\n  );\n\n  const handleResetSingle = useCallback(() => {\n    if (multiple) {\n      (onChange as (value: T[]) => void)([] as T[]);\n    } else {\n      onChange?.(null);\n    }\n  }, [onChange, multiple]);\n\n  const renderSingle = useCallback(\n    (value: T) => {\n      const label = renderLabel(value as T);\n      return (\n        <>\n          {renderedValueIcon(value as T)}\n          {label}\n          <IconButton size=\"small\" onClick={handleResetSingle}>\n            <XIcon />\n          </IconButton>\n        </>\n      );\n    },\n    [renderLabel, renderedValueIcon, handleResetSingle]\n  );\n\n  const renderMultiple = useCallback(\n    (value: T[]) => {\n      if (maxItems == 1) {\n        return renderSingle(value[0]);\n      }\n      return (\n        <>\n          {((value as T[]) || []).map((singleValue, index) => {\n            const label = renderLabel(singleValue);\n            return (\n              <Tag\n                key={index}\n                icon={renderedValueIcon(singleValue)}\n                size=\"large\"\n                closable\n                onClose={() => handleResetMultiple(singleValue)}\n              >\n                {label}\n              </Tag>\n            );\n          })}\n        </>\n      );\n    },\n    [\n      renderLabel,\n      renderedValueIcon,\n      maxItems,\n      renderSingle,\n      handleResetMultiple,\n    ]\n  );\n\n  return (\n    <Stack\n      ref={mergeRefs(ref, containerRef)}\n      gap={multiple ? 4 : 8}\n      align=\"center\"\n      wrap={multiple && maxItems !== 1}\n      className={cls(\n        \"dropzone-value\",\n        multiple && \"dropzone-value-multiple\",\n        className\n      )}\n      style={style}\n      {...rest}\n    >\n      {multiple ? renderMultiple(value as T[]) : renderSingle(value as T)}\n    </Stack>\n  );\n}\n\nexport const Value = memo(forwardRef(ValueInner)) as <\n  T extends Data,\n  M extends boolean\n>(\n  props: DragDropValueProps<T, M> & { ref?: ForwardedRef<HTMLDivElement> }\n) => ReturnType<typeof ValueInner>;\n"],"names":["ValueInner","value","onChange","multiple","renderValueLabel","renderValueIcon","className","style","maxItems","rest","ref","cls","useCls","containerEl","setContainerEl","useState","containerRef","useCallback","el","renderLabel","label","jsx","Truncate","renderedValueIcon","cloneElement","FileIcon","handleResetMultiple","singleValue","v","isEqual","handleResetSingle","renderSingle","jsxs","Fragment","IconButton","XIcon","renderMultiple","index","Tag","Stack","mergeRefs","Value","memo","forwardRef"],"mappings":"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"}
+{"version":3,"file":"value.js","sources":["../../../src/components/drag-drop/value.tsx"],"sourcesContent":["\"use client\";\nimport { FileIcon, XIcon } from \"@bioturing/assets\";\nimport { isEqual } from \"es-toolkit\";\nimport { cloneElement, forwardRef, memo, useCallback, type ForwardedRef, useState } from \"react\";\nimport { IconButton } from \"../icon-button\";\nimport { clsx } from \"../utils\";\nimport { Stack } from \"../stack\";\nimport { Tag } from \"../tag\";\nimport { Truncate } from \"../truncate\";\nimport { useCls } from \"../utils\";\nimport { DragDropValueProps, type Data } from \"./types\";\nimport mergeRefs from \"merge-refs\";\n\nfunction ValueInner<T extends Data, M extends boolean>(\n  {\n    value,\n    onChange,\n    multiple,\n    renderValueLabel,\n    renderValueIcon,\n    className,\n    style,\n    maxItems,\n    ...rest\n  }: DragDropValueProps<T, M>,\n  ref: ForwardedRef<HTMLDivElement>,\n) {\n  const cls = useCls();\n\n  // todo: make this as reusable hook\n  const [containerEl, setContainerEl] = useState<HTMLDivElement>(null);\n  const containerRef = useCallback((el: HTMLDivElement | null) => {\n    setContainerEl(el);\n  }, []);\n\n  const renderLabel = useCallback(\n    (value: T) => {\n      const label = renderValueLabel(value);\n      return typeof label === \"string\" ? (\n        <Truncate position=\"middle\" className={cls(\"dropzone-value-label\")} container={containerEl}>\n          {label}\n        </Truncate>\n      ) : (\n        <span className={cls(\"dropzone-value-label\")}>{label}</span>\n      );\n    },\n    [cls, containerEl, renderValueLabel],\n  );\n\n  const renderedValueIcon = useCallback(\n    (value: T) => {\n      return cloneElement(renderValueIcon(value) || <FileIcon />, {\n        className: cls(\"dropzone-value-icon\"),\n      });\n    },\n    [cls, renderValueIcon],\n  );\n\n  const handleResetMultiple = useCallback(\n    (singleValue: T) => {\n      (onChange as (value: T[]) => void)((value as T[]).filter((v) => !isEqual(v, singleValue)));\n    },\n    [onChange, value],\n  );\n\n  const handleResetSingle = useCallback(() => {\n    if (multiple) {\n      (onChange as (value: T[]) => void)([] as T[]);\n    } else {\n      onChange?.(null);\n    }\n  }, [onChange, multiple]);\n\n  const renderSingle = useCallback(\n    (value: T) => {\n      const label = renderLabel(value as T);\n      return (\n        <>\n          {renderedValueIcon(value as T)}\n          {label}\n          <IconButton size=\"small\" onClick={handleResetSingle}>\n            <XIcon />\n          </IconButton>\n        </>\n      );\n    },\n    [renderLabel, renderedValueIcon, handleResetSingle],\n  );\n\n  const renderMultiple = useCallback(\n    (value: T[]) => {\n      if (maxItems == 1) {\n        return renderSingle(value[0]);\n      }\n      return (\n        <>\n          {((value as T[]) || []).map((singleValue, index) => {\n            const label = renderLabel(singleValue);\n            return (\n              <Tag\n                key={index}\n                icon={renderedValueIcon(singleValue)}\n                size=\"large\"\n                closable\n                onClose={() => handleResetMultiple(singleValue)}\n              >\n                {label}\n              </Tag>\n            );\n          })}\n        </>\n      );\n    },\n    [renderLabel, renderedValueIcon, maxItems, renderSingle, handleResetMultiple],\n  );\n\n  return (\n    <Stack\n      ref={mergeRefs(ref, containerRef)}\n      gap={multiple ? 4 : 8}\n      align=\"center\"\n      wrap={multiple && maxItems !== 1}\n      className={clsx(\n        cls(\"dropzone-value\", multiple && maxItems != 1 && \"dropzone-value-multiple\"),\n        className,\n      )}\n      style={style}\n      {...rest}\n    >\n      {multiple ? renderMultiple(value as T[]) : renderSingle(value as T)}\n    </Stack>\n  );\n}\n\nexport const Value = memo(forwardRef(ValueInner)) as <T extends Data, M extends boolean>(\n  props: DragDropValueProps<T, M> & { ref?: ForwardedRef<HTMLDivElement> },\n) => ReturnType<typeof ValueInner>;\n"],"names":["ValueInner","value","onChange","multiple","renderValueLabel","renderValueIcon","className","style","maxItems","rest","ref","cls","useCls","containerEl","setContainerEl","useState","containerRef","useCallback","el","renderLabel","label","jsx","Truncate","renderedValueIcon","cloneElement","FileIcon","handleResetMultiple","singleValue","v","isEqual","handleResetSingle","renderSingle","jsxs","Fragment","IconButton","XIcon","renderMultiple","index","Tag","Stack","mergeRefs","clsx","Value","memo","forwardRef"],"mappings":"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"}

package/dist/components/hooks/useDraggable.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useDraggable.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,OAAO,GAAE,OAAc;mBAChB,WAAW,GAAG,IAAI;EAyMrD"}
+{"version":3,"file":"useDraggable.d.ts","sourceRoot":"","sources":["../../../src/components/hooks/useDraggable.ts"],"names":[],"mappings":"AAGA,wBAAgB,YAAY,CAAC,OAAO,GAAE,OAAc;mBAChB,WAAW,GAAG,IAAI;EAqNrD"}

package/dist/components/hooks/useDraggable.js

@@ -1,11 +1,18 @@
 "use client";
-import { useCallback as H } from "react";
-function T(u = !0) {
-  return { ref: H((n) => {
-    if (!n || !u) return;
-    let i = !1, d = 0, m = 0, f = 0, v = 0, o = null;
+import { useCallback as M } from "react";
+function B(d = !0) {
+  return { ref: M((n) => {
+    if (!n || !d) return;
+    let a = !1, f = 0, m = 0, g = 0, v = 0, o = null;
     n.addEventListener("mousedown", p);
-    function z(t) {
+    function l(t) {
+      if (t) {
+        n.setAttribute("data-dragging", "true");
+        return;
+      }
+      n.removeAttribute("data-dragging");
+    }
+    function y(t) {
       let e = t;
       for (; e && e !== n; ) {
         if (e.classList.contains("resize-handle") || e.classList.contains("ds-resizable-resize-handle") || e.getAttribute("data-resize-handle") || e.getAttribute("data-testid")?.includes("resize") || e.getAttribute("data-placement") || // Resizable handles have data-placement
@@ -17,39 +24,39 @@ function T(u = !0) {
       }
       return !1;
     }
-    function y(t) {
+    function L(t) {
       const e = window.getComputedStyle(t), s = new DOMMatrix(e.transform);
       return {
         x: s.m41 || parseInt(e.left) || 0,
         y: s.m42 || parseInt(e.top) || 0
       };
     }
-    function L(t, e, s) {
+    function w(t, e, s) {
       t.style.transform = `translate(${e}px, ${s}px)`;
     }
     function p(t) {
       const e = t.target;
-      if (z(e))
+      if (y(e))
         return;
       if (n.closest("[data-resizable]")) {
-        const r = n.getBoundingClientRect(), E = t.clientX - r.left, b = t.clientY - r.top, c = 8, w = b <= c, x = b >= r.height - c, S = E <= c, A = E >= r.width - c, D = n.querySelector('.ds-resizable-resize-handle[data-placement*="top"]'), X = n.querySelector('.ds-resizable-resize-handle[data-placement*="bottom"]'), Y = n.querySelector('.ds-resizable-resize-handle[data-placement*="left"]'), q = n.querySelector('.ds-resizable-resize-handle[data-placement*="right"]');
-        if (w && D || x && X || S && Y || A && q)
+        const r = n.getBoundingClientRect(), E = t.clientX - r.left, z = t.clientY - r.top, c = 8, A = z <= c, S = z >= r.height - c, x = E <= c, D = E >= r.width - c, X = n.querySelector('.ds-resizable-resize-handle[data-placement*="top"]'), Y = n.querySelector('.ds-resizable-resize-handle[data-placement*="bottom"]'), q = n.querySelector('.ds-resizable-resize-handle[data-placement*="left"]'), H = n.querySelector('.ds-resizable-resize-handle[data-placement*="right"]');
+        if (A && X || S && Y || x && q || D && H)
           return;
       }
-      t.preventDefault(), t.stopPropagation(), i = !0, d = t.clientX, m = t.clientY;
-      const s = y(n);
-      f = s.x, v = s.y, document.body.style.cursor = "grabbing", document.body.style.userSelect = "none", n.querySelectorAll('button, a, input, select, textarea, [role="button"]').forEach((r) => {
+      t.preventDefault(), t.stopPropagation(), a = !0, l(!0), f = t.clientX, m = t.clientY;
+      const s = L(n);
+      g = s.x, v = s.y, document.body.style.cursor = "grabbing", document.body.style.userSelect = "none", n.querySelectorAll('button, a, input, select, textarea, [role="button"]').forEach((r) => {
         r.style.pointerEvents = "auto";
-      }), document.addEventListener("mousemove", l, { passive: !1 }), document.addEventListener("mouseup", a), document.addEventListener("touchmove", h, { passive: !1 }), document.addEventListener("touchend", a);
+      }), document.addEventListener("mousemove", u, { passive: !1 }), document.addEventListener("mouseup", i), document.addEventListener("touchmove", h, { passive: !1 }), document.addEventListener("touchend", i);
     }
-    function l(t) {
-      !i || !n || (t.preventDefault(), o && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
-        const e = t.clientX - d, s = t.clientY - m, g = f + e, r = v + s;
-        L(n, g, r);
+    function u(t) {
+      !a || !n || (t.preventDefault(), o && cancelAnimationFrame(o), o = requestAnimationFrame(() => {
+        const e = t.clientX - f, s = t.clientY - m, b = g + e, r = v + s;
+        w(n, b, r);
       }));
     }
     function h(t) {
-      if (!i || !n) return;
+      if (!a || !n) return;
       t.preventDefault();
       const e = t.touches[0];
       if (!e) return;
@@ -58,19 +65,19 @@ function T(u = !0) {
         clientY: e.clientY,
         bubbles: !0
       });
-      l(s);
+      u(s);
     }
-    function a() {
-      i && (i = !1, o && (cancelAnimationFrame(o), o = null), document.body.style.cursor = "", document.body.style.userSelect = "", n && n.querySelectorAll('button, a, input, select, textarea, [role="button"]').forEach((e) => {
+    function i() {
+      a && (a = !1, l(!1), o && (cancelAnimationFrame(o), o = null), document.body.style.cursor = "", document.body.style.userSelect = "", n && n.querySelectorAll('button, a, input, select, textarea, [role="button"]').forEach((e) => {
         e.style.pointerEvents = "";
-      }), document.removeEventListener("mousemove", l), document.removeEventListener("mouseup", a), document.removeEventListener("touchmove", h), document.removeEventListener("touchend", a));
+      }), document.removeEventListener("mousemove", u), document.removeEventListener("mouseup", i), document.removeEventListener("touchmove", h), document.removeEventListener("touchend", i));
     }
     return () => {
-      n.removeEventListener("mousedown", p), a();
+      n.removeEventListener("mousedown", p), l(!1), i();
     };
-  }, [u]) };
+  }, [d]) };
 }
 export {
-  T as useDraggable
+  B as useDraggable
 };
 //# sourceMappingURL=useDraggable.js.map

package/dist/components/hooks/useDraggable.js.map

@@ -1 +1 @@
-{"version":3,"file":"useDraggable.js","sources":["../../../src/components/hooks/useDraggable.ts"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\n\nexport function useDraggable(enabled: boolean = true) {\n  const ref = useCallback((element: HTMLElement | null) => {\n    if (!element || !enabled) return;\n    \n    let isDragging = false;\n    let startX = 0;\n    let startY = 0;\n    let initialLeft = 0;\n    let initialTop = 0;\n    let rafId: number | null = null;\n\n    element.addEventListener(\"mousedown\", dragMouseDown);\n\n    function isResizeHandle(target: HTMLElement): boolean {\n      // Check if the element or any of its parents is a resize handle\n      let current = target;\n      while (current && current !== element) {\n        // Check for various resize handle indicators\n        if (\n          current.classList.contains('resize-handle') ||\n          current.classList.contains('ds-resizable-resize-handle') ||\n          current.getAttribute('data-resize-handle') ||\n          current.getAttribute('data-testid')?.includes('resize') ||\n          current.getAttribute('data-placement') || // Resizable handles have data-placement\n          current.style.cursor?.includes('resize') ||\n          // Check for react-use-resizable specific classes/attributes\n          current.classList.contains('resizable-handle') ||\n          current.hasAttribute('data-resizable-handle') ||\n          // Check for common resize cursor styles\n          ['n-resize', 's-resize', 'e-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize'].includes(current.style.cursor)\n        ) {\n          return true;\n        }\n        current = current.parentElement as HTMLElement;\n      }\n      return false;\n    }\n\n    function getElementPosition(el: HTMLElement) {\n      const style = window.getComputedStyle(el);\n      const matrix = new DOMMatrix(style.transform);\n      return {\n        x: matrix.m41 || parseInt(style.left) || 0,\n        y: matrix.m42 || parseInt(style.top) || 0\n      };\n    }\n\n    function setElementPosition(el: HTMLElement, x: number, y: number) {\n      // Use transform for better performance and smoother animation\n      el.style.transform = `translate(${x}px, ${y}px)`;\n    }\n\n    function dragMouseDown(e: MouseEvent) {\n      const target = e.target as HTMLElement;\n      \n      // Check if the click is on a resize handle\n      if (isResizeHandle(target)) {\n        return; // Don't start dragging\n      }\n      \n      // Let resize handles take priority - if we reach this point and there's a resizable container,\n      // we should check if there are actual resize handles present before preventing drag\n      if (element.closest('[data-resizable]')) {\n        const rect = element.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const handleSize = 8;\n        \n        // Only prevent drag if we're near an edge AND there are actual resize handles\n        const nearTopEdge = y <= handleSize;\n        const nearBottomEdge = y >= rect.height - handleSize;\n        const nearLeftEdge = x <= handleSize;\n        const nearRightEdge = x >= rect.width - handleSize;\n        \n        // Check if resize handles exist for the edges we're near\n        const hasTopHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"top\"]');\n        const hasBottomHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"bottom\"]');\n        const hasLeftHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"left\"]');\n        const hasRightHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"right\"]');\n        \n        if (\n          (nearTopEdge && hasTopHandle) ||\n          (nearBottomEdge && hasBottomHandle) ||\n          (nearLeftEdge && hasLeftHandle) ||\n          (nearRightEdge && hasRightHandle)\n        ) {\n          return; // Let resize handle it\n        }\n      }\n      \n      e.preventDefault();\n      e.stopPropagation();\n      \n      isDragging = true;\n      \n      // Store initial mouse position\n      startX = e.clientX;\n      startY = e.clientY;\n      \n      // Get initial element position\n      const pos = getElementPosition(element);\n      initialLeft = pos.x;\n      initialTop = pos.y;\n      \n      // Set initial cursor style and prevent text selection\n      document.body.style.cursor = 'grabbing';\n      document.body.style.userSelect = 'none';\n      \n      // Only disable pointer events on content areas, not buttons/interactive elements\n      const interactiveElements = element.querySelectorAll('button, a, input, select, textarea, [role=\"button\"]');\n      interactiveElements.forEach(el => {\n        (el as HTMLElement).style.pointerEvents = 'auto';\n      });\n      \n      // Add move and up listeners\n      document.addEventListener(\"mousemove\", elementDrag, { passive: false });\n      document.addEventListener(\"mouseup\", closeDragElement);\n      \n      // Add touch events for mobile support\n      document.addEventListener(\"touchmove\", handleTouchMove, { passive: false });\n      document.addEventListener(\"touchend\", closeDragElement);\n    }\n\n    function elementDrag(e: MouseEvent) {\n      if (!isDragging || !element) return;\n      \n      e.preventDefault();\n      \n      // Cancel any previous animation frame\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n      }\n      \n      // Use requestAnimationFrame for smooth animation\n      rafId = requestAnimationFrame(() => {\n        const deltaX = e.clientX - startX;\n        const deltaY = e.clientY - startY;\n        \n        const newX = initialLeft + deltaX;\n        const newY = initialTop + deltaY;\n        \n        // Apply position directly without bounds checking\n        setElementPosition(element, newX, newY);\n      });\n    }\n\n    function handleTouchMove(e: TouchEvent) {\n      if (!isDragging || !element) return;\n      \n      e.preventDefault();\n      \n      const touch = e.touches[0];\n      if (!touch) return;\n      \n      // Convert touch event to mouse-like event\n      const mouseEvent = new MouseEvent('mousemove', {\n        clientX: touch.clientX,\n        clientY: touch.clientY,\n        bubbles: true\n      });\n      \n      elementDrag(mouseEvent);\n    }\n\n    function closeDragElement() {\n      if (!isDragging) return;\n      \n      isDragging = false;\n      \n      // Cancel any pending animation frame\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n        rafId = null;\n      }\n      \n      // Restore styles\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n      \n      // Restore pointer events for interactive elements\n      if (element) {\n        const interactiveElements = element.querySelectorAll('button, a, input, select, textarea, [role=\"button\"]');\n        interactiveElements.forEach(el => {\n          (el as HTMLElement).style.pointerEvents = '';\n        });\n      }\n      \n      // Remove event listeners\n      document.removeEventListener(\"mousemove\", elementDrag);\n      document.removeEventListener(\"mouseup\", closeDragElement);\n      document.removeEventListener(\"touchmove\", handleTouchMove);\n      document.removeEventListener(\"touchend\", closeDragElement);\n    }\n\n    // Cleanup function\n    return () => {\n      element.removeEventListener(\"mousedown\", dragMouseDown);\n      closeDragElement();\n    };\n  }, [enabled]);\n  \n  return { ref };\n}\n"],"names":["useDraggable","enabled","useCallback","element","isDragging","startX","startY","initialLeft","initialTop","rafId","dragMouseDown","isResizeHandle","target","current","getElementPosition","el","style","matrix","setElementPosition","x","y","e","rect","handleSize","nearTopEdge","nearBottomEdge","nearLeftEdge","nearRightEdge","hasTopHandle","hasBottomHandle","hasLeftHandle","hasRightHandle","pos","elementDrag","closeDragElement","handleTouchMove","deltaX","deltaY","newX","newY","touch","mouseEvent"],"mappings":"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"}
+{"version":3,"file":"useDraggable.js","sources":["../../../src/components/hooks/useDraggable.ts"],"sourcesContent":["\"use client\";\nimport { useCallback } from \"react\";\n\nexport function useDraggable(enabled: boolean = true) {\n  const ref = useCallback((element: HTMLElement | null) => {\n    if (!element || !enabled) return;\n\n    let isDragging = false;\n    let startX = 0;\n    let startY = 0;\n    let initialLeft = 0;\n    let initialTop = 0;\n    let rafId: number | null = null;\n\n    element.addEventListener(\"mousedown\", dragMouseDown);\n\n    function setDraggingState(dragging: boolean) {\n      if (dragging) {\n        element.setAttribute(\"data-dragging\", \"true\");\n        return;\n      }\n\n      element.removeAttribute(\"data-dragging\");\n    }\n\n    function isResizeHandle(target: HTMLElement): boolean {\n      // Check if the element or any of its parents is a resize handle\n      let current = target;\n      while (current && current !== element) {\n        // Check for various resize handle indicators\n        if (\n          current.classList.contains('resize-handle') ||\n          current.classList.contains('ds-resizable-resize-handle') ||\n          current.getAttribute('data-resize-handle') ||\n          current.getAttribute('data-testid')?.includes('resize') ||\n          current.getAttribute('data-placement') || // Resizable handles have data-placement\n          current.style.cursor?.includes('resize') ||\n          // Check for react-use-resizable specific classes/attributes\n          current.classList.contains('resizable-handle') ||\n          current.hasAttribute('data-resizable-handle') ||\n          // Check for common resize cursor styles\n          ['n-resize', 's-resize', 'e-resize', 'w-resize', 'ne-resize', 'nw-resize', 'se-resize', 'sw-resize'].includes(current.style.cursor)\n        ) {\n          return true;\n        }\n        current = current.parentElement as HTMLElement;\n      }\n      return false;\n    }\n\n    function getElementPosition(el: HTMLElement) {\n      const style = window.getComputedStyle(el);\n      const matrix = new DOMMatrix(style.transform);\n      return {\n        x: matrix.m41 || parseInt(style.left) || 0,\n        y: matrix.m42 || parseInt(style.top) || 0\n      };\n    }\n\n    function setElementPosition(el: HTMLElement, x: number, y: number) {\n      // Use transform for better performance and smoother animation\n      el.style.transform = `translate(${x}px, ${y}px)`;\n    }\n\n    function dragMouseDown(e: MouseEvent) {\n      const target = e.target as HTMLElement;\n\n      // Check if the click is on a resize handle\n      if (isResizeHandle(target)) {\n        return; // Don't start dragging\n      }\n\n      // Let resize handles take priority - if we reach this point and there's a resizable container,\n      // we should check if there are actual resize handles present before preventing drag\n      if (element.closest('[data-resizable]')) {\n        const rect = element.getBoundingClientRect();\n        const x = e.clientX - rect.left;\n        const y = e.clientY - rect.top;\n        const handleSize = 8;\n\n        // Only prevent drag if we're near an edge AND there are actual resize handles\n        const nearTopEdge = y <= handleSize;\n        const nearBottomEdge = y >= rect.height - handleSize;\n        const nearLeftEdge = x <= handleSize;\n        const nearRightEdge = x >= rect.width - handleSize;\n\n        // Check if resize handles exist for the edges we're near\n        const hasTopHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"top\"]');\n        const hasBottomHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"bottom\"]');\n        const hasLeftHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"left\"]');\n        const hasRightHandle = element.querySelector('.ds-resizable-resize-handle[data-placement*=\"right\"]');\n\n        if (\n          (nearTopEdge && hasTopHandle) ||\n          (nearBottomEdge && hasBottomHandle) ||\n          (nearLeftEdge && hasLeftHandle) ||\n          (nearRightEdge && hasRightHandle)\n        ) {\n          return; // Let resize handle it\n        }\n      }\n\n      e.preventDefault();\n      e.stopPropagation();\n\n      isDragging = true;\n      setDraggingState(true);\n\n      // Store initial mouse position\n      startX = e.clientX;\n      startY = e.clientY;\n\n      // Get initial element position\n      const pos = getElementPosition(element);\n      initialLeft = pos.x;\n      initialTop = pos.y;\n\n      // Set initial cursor style and prevent text selection\n      document.body.style.cursor = 'grabbing';\n      document.body.style.userSelect = 'none';\n\n      // Only disable pointer events on content areas, not buttons/interactive elements\n      const interactiveElements = element.querySelectorAll('button, a, input, select, textarea, [role=\"button\"]');\n      interactiveElements.forEach(el => {\n        (el as HTMLElement).style.pointerEvents = 'auto';\n      });\n\n      // Add move and up listeners\n      document.addEventListener(\"mousemove\", elementDrag, { passive: false });\n      document.addEventListener(\"mouseup\", closeDragElement);\n\n      // Add touch events for mobile support\n      document.addEventListener(\"touchmove\", handleTouchMove, { passive: false });\n      document.addEventListener(\"touchend\", closeDragElement);\n    }\n\n    function elementDrag(e: MouseEvent) {\n      if (!isDragging || !element) return;\n\n      e.preventDefault();\n\n      // Cancel any previous animation frame\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n      }\n\n      // Use requestAnimationFrame for smooth animation\n      rafId = requestAnimationFrame(() => {\n        const deltaX = e.clientX - startX;\n        const deltaY = e.clientY - startY;\n\n        const newX = initialLeft + deltaX;\n        const newY = initialTop + deltaY;\n\n        // Apply position directly without bounds checking\n        setElementPosition(element, newX, newY);\n      });\n    }\n\n    function handleTouchMove(e: TouchEvent) {\n      if (!isDragging || !element) return;\n\n      e.preventDefault();\n\n      const touch = e.touches[0];\n      if (!touch) return;\n\n      // Convert touch event to mouse-like event\n      const mouseEvent = new MouseEvent('mousemove', {\n        clientX: touch.clientX,\n        clientY: touch.clientY,\n        bubbles: true\n      });\n\n      elementDrag(mouseEvent);\n    }\n\n    function closeDragElement() {\n      if (!isDragging) return;\n\n      isDragging = false;\n      setDraggingState(false);\n\n      // Cancel any pending animation frame\n      if (rafId) {\n        cancelAnimationFrame(rafId);\n        rafId = null;\n      }\n\n      // Restore styles\n      document.body.style.cursor = '';\n      document.body.style.userSelect = '';\n\n      // Restore pointer events for interactive elements\n      if (element) {\n        const interactiveElements = element.querySelectorAll('button, a, input, select, textarea, [role=\"button\"]');\n        interactiveElements.forEach(el => {\n          (el as HTMLElement).style.pointerEvents = '';\n        });\n      }\n      \n      // Remove event listeners\n      document.removeEventListener(\"mousemove\", elementDrag);\n      document.removeEventListener(\"mouseup\", closeDragElement);\n      document.removeEventListener(\"touchmove\", handleTouchMove);\n      document.removeEventListener(\"touchend\", closeDragElement);\n    }\n\n    // Cleanup function\n    return () => {\n      element.removeEventListener(\"mousedown\", dragMouseDown);\n      setDraggingState(false);\n      closeDragElement();\n    };\n  }, [enabled]);\n\n  return { ref };\n}\n"],"names":["useDraggable","enabled","useCallback","element","isDragging","startX","startY","initialLeft","initialTop","rafId","dragMouseDown","setDraggingState","dragging","isResizeHandle","target","current","getElementPosition","el","style","matrix","setElementPosition","x","y","e","rect","handleSize","nearTopEdge","nearBottomEdge","nearLeftEdge","nearRightEdge","hasTopHandle","hasBottomHandle","hasLeftHandle","hasRightHandle","pos","elementDrag","closeDragElement","handleTouchMove","deltaX","deltaY","newX","newY","touch","mouseEvent"],"mappings":"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"}

package/dist/components/popup-panel/component.d.ts

@@ -1,3 +1,3 @@
 import { PopupPanelProps } from './types';
-export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, size, footer, defaultOpen, resizable, draggable, maintainAspectRatio, classNames, modal, closeOnClickOutside, onPlacementChange, positionerProps, triggerProps, portalProps, offsetFrom, nativeButton, ...rest }: PopupPanelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PopupPanel: ({ children, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange, content, title, trigger, className, anchor, beforeCloseButton, afterCloseButton, afterTitle, arrow, size, footer, defaultOpen, resizable, draggable, maintainAspectRatio, classNames, modal, closeOnClickOutside, onPlacementChange, positionerProps, triggerProps, portalProps, offsetFrom, nativeButton, zIndex, ...rest }: PopupPanelProps) => import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=component.d.ts.map

package/dist/components/popup-panel/component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/component.tsx"],"names":[],"mappings":"AAaA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,aAAa,CAAC;AAoCrB,eAAO,MAAM,UAAU,GAAI,yYA8BxB,eAAe,4CA+SjB,CAAC"}
+{"version":3,"file":"component.d.ts","sourceRoot":"","sources":["../../../src/components/popup-panel/component.tsx"],"names":[],"mappings":"AAmBA,OAAO,EAAE,eAAe,EAAE,MAAM,SAAS,CAAC;AAI1C,OAAO,aAAa,CAAC;AAwDrB,eAAO,MAAM,UAAU,GAAI,wZAgCxB,eAAe,4CA2QjB,CAAC"}