@bioturing/components 0.15.5 → 0.17.0

package/dist/components/DragDrop/draggable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"draggable.js","sources":["../../../src/components/DragDrop/draggable.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDraggable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDraggableProps } from \"./types\";\nimport { DotsSixVerticalIcon } from \"@bioturing/assets\";\nimport { cloneElement, isValidElement, HTMLProps } from \"react\";\n\n/**\n * A draggable item component that can be used within the Drag context\n */\nexport const Draggable = <T extends Data = Data>({\n  id,\n  children,\n  className,\n  disabled = false,\n  data,\n  style,\n  render,\n  onDragEnd,\n  onDragStart,\n  indicator = true,\n  onlyIndicatorDraggable = false,\n  ...rest\n}: DragDropDraggableProps<T>) => {\n  const cls = useCls();\n\n  const { attributes, listeners, isDragging, setNodeRef } = useDraggable({\n    id,\n    data,\n    disabled,\n    onDragEnd,\n    onDragStart,\n  });\n\n  const indicatorIcon =\n    indicator === true ? (\n      <DotsSixVerticalIcon className={cls(\"draggable-indicator\")} />\n    ) : (\n      indicator\n    );\n  const indicatorElement = isValidElement(indicatorIcon)\n    ? onlyIndicatorDraggable\n      ? cloneElement(indicatorIcon, {\n          ...attributes,\n          ...listeners,\n        })\n      : indicatorIcon\n    : null;\n\n  const combinedChildren = [\n    indicatorElement,\n    ...(Array.isArray(children) ? children : [children]),\n  ];\n\n  const renderedElement = useRender({\n    render: render ? (\n      render\n    ) : (\n      <div className={clsx(cls(\"draggable\"), className)} />\n    ),\n    ref: setNodeRef,\n    props: {\n      children: combinedChildren,\n      className,\n      style: {\n        ...style,\n        touchAction: \"none\", // Prevents scrolling on touch devices while dragging\n        cursor: disabled ? \"default\" : \"grab\",\n        opacity: isDragging ? 0.5 : 1, // Visual feedback when dragging\n      },\n      ...rest,\n      ...attributes,\n      ...(!onlyIndicatorDraggable ? listeners : {}),\n    },\n    state: {\n      isDragging,\n      id,\n      data,\n    },\n  });\n\n  return renderedElement;\n};\n"],"names":["Draggable","id","children","className","disabled","data","style","render","onDragEnd","onDragStart","indicator","onlyIndicatorDraggable","rest","cls","useCls","attributes","listeners","isDragging","setNodeRef","useDraggable","indicatorIcon","jsx","DotsSixVerticalIcon","combinedChildren","isValidElement","cloneElement","useRender","clsx"],"mappings":";;;;;;;;AAYO,MAAMA,IAAY,CAAwB;AAAA,EAC/C,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,MAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC;AAAA,EACA,WAAAC;AAAA,EACA,aAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,wBAAAC,IAAyB;AAAA,EACzB,GAAGC;AACL,MAAiC;AAC/B,QAAMC,IAAMC,EAAO,GAEb,EAAE,YAAAC,GAAY,WAAAC,GAAW,YAAAC,GAAY,YAAAC,EAAA,IAAeC,EAAa;AAAA,IACrE,IAAAlB;AAAA,IACA,MAAAI;AAAA,IACA,UAAAD;AAAA,IACA,WAAAI;AAAA,IACA,aAAAC;AAAA,EAAA,CACD,GAEKW,IACJV,MAAc,KACZ,gBAAAW,EAACC,KAAoB,WAAWT,EAAI,qBAAqB,EAAA,CAAG,IAE5DH,GAWEa,IAAmB;AAAA,IATAC,EAAeJ,CAAa,IACjDT,IACEc,EAAaL,GAAe;AAAA,MAC1B,GAAGL;AAAA,MACH,GAAGC;AAAA,IAAA,CACJ,IACDI,IACF;AAAA,IAIF,GAAI,MAAM,QAAQlB,CAAQ,IAAIA,IAAW,CAACA,CAAQ;AAAA,EACpD;AA6BO,SA3BiBwB,EAAU;AAAA,IAChC,QAAQnB,KAGL,gBAAAc,EAAA,OAAA,EAAI,WAAWM,EAAKd,EAAI,WAAW,GAAGV,CAAS,EAAG,CAAA;AAAA,IAErD,KAAKe;AAAA,IACL,OAAO;AAAA,MACL,UAAUK;AAAA,MACV,WAAApB;AAAA,MACA,OAAO;AAAA,QACL,GAAGG;AAAA,QACH,aAAa;AAAA;AAAA,QACb,QAAQF,IAAW,YAAY;AAAA,QAC/B,SAASa,IAAa,MAAM;AAAA;AAAA,MAC9B;AAAA,MACA,GAAGL;AAAA,MACH,GAAGG;AAAA,MACH,GAAKJ,IAAqC,CAAA,IAAZK;AAAA,IAChC;AAAA,IACA,OAAO;AAAA,MACL,YAAAC;AAAA,MACA,IAAAhB;AAAA,MACA,MAAAI;AAAA,IAAA;AAAA,EACF,CACD;AAGH;"}

package/dist/components/DragDrop/droppable.js

@@ -0,0 +1,48 @@
+"use client";
+import { jsxs as x, jsx as r } from "react/jsx-runtime";
+import { useDroppable as z } from "./hooks.js";
+import { ArrowsOutCardinalIcon as N } from "@bioturing/assets";
+import { useRender as b } from "@base-ui-components/react/use-render";
+import { useCls as C } from "../utils/antdUtils.js";
+import { clsx as D } from "../utils/cn.js";
+const g = ({
+  id: o,
+  children: n,
+  className: s,
+  disabled: i = !1,
+  placeholder: d = "Drop items here",
+  icon: l = /* @__PURE__ */ r(N, { size: 24 }),
+  render: t,
+  onDrop: c,
+  validate: m,
+  ...p
+}) => {
+  const e = C(), { isOver: a, setNodeRef: f, attributes: u, listeners: h } = z({
+    id: o,
+    disabled: i,
+    onDrop: c,
+    validate: m
+  }), v = /* @__PURE__ */ x("div", { className: e("drop-zone-content"), children: [
+    /* @__PURE__ */ r("div", { className: e("drop-zone-icon"), children: l }),
+    /* @__PURE__ */ r("div", { className: e("drop-zone-text"), children: d })
+  ] });
+  return b({
+    render: t || /* @__PURE__ */ r("div", { className: D(e("drop-zone"), s) }),
+    ref: f,
+    props: {
+      children: n || v,
+      className: s,
+      ...u,
+      ...h,
+      ...p
+    },
+    state: {
+      isOver: a,
+      id: o
+    }
+  });
+};
+export {
+  g as Droppable
+};
+//# sourceMappingURL=droppable.js.map

package/dist/components/DragDrop/droppable.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"droppable.js","sources":["../../../src/components/DragDrop/droppable.tsx"],"sourcesContent":["\"use client\";\n\nimport { useDroppable } from \"./hooks\";\nimport { clsx, useCls } from \"../utils\";\nimport { ArrowsOutCardinalIcon } from \"@bioturing/assets\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport type { Data, DragDropDroppableProps } from \"./types\";\n\n/**\n * A drop zone component that can receive draggable items\n * Styled similarly to the Upload component's droppable area\n */\nexport const Droppable = <T extends Data = Data>({\n  id,\n  children,\n  className,\n  disabled = false,\n  placeholder = \"Drop items here\",\n  icon = <ArrowsOutCardinalIcon size={24} />,\n  render,\n  onDrop,\n  validate,\n  ...rest\n}: DragDropDroppableProps<T>) => {\n  const cls = useCls();\n  const { isOver, setNodeRef, attributes, listeners, valid } = useDroppable({\n    id,\n    disabled,\n    onDrop,\n    validate,\n  });\n\n  // Default content when no children are provided\n  const defaultContent = (\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\n  const renderedElement = useRender({\n    render: render ? (\n      render\n    ) : (\n      <div className={clsx(cls(\"drop-zone\"), className)} />\n    ),\n    ref: setNodeRef,\n    props: {\n      children: children || defaultContent,\n      className: className,\n      ...attributes,\n      ...listeners,\n      ...rest,\n    },\n    state: {\n      isOver,\n      id,\n    },\n  });\n\n  return renderedElement;\n};\n"],"names":["Droppable","id","children","className","disabled","placeholder","icon","jsx","ArrowsOutCardinalIcon","render","onDrop","validate","rest","cls","useCls","isOver","setNodeRef","attributes","listeners","useDroppable","defaultContent","jsxs","useRender","clsx"],"mappings":";;;;;;;AAYO,MAAMA,IAAY,CAAwB;AAAA,EAC/C,IAAAC;AAAA,EACA,UAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC,IAAW;AAAA,EACX,aAAAC,IAAc;AAAA,EACd,MAAAC,IAAO,gBAAAC,EAACC,GAAsB,EAAA,MAAM,GAAI,CAAA;AAAA,EACxC,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAiC;AAC/B,QAAMC,IAAMC,EAAO,GACb,EAAE,QAAAC,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAiB,IAAIC,EAAa;AAAA,IACxE,IAAAlB;AAAA,IACA,UAAAG;AAAA,IACA,QAAAM;AAAA,IACA,UAAAC;AAAA,EAAA,CACD,GAGKS,IACH,gBAAAC,EAAA,OAAA,EAAI,WAAWR,EAAI,mBAAmB,GACrC,UAAA;AAAA,IAAA,gBAAAN,EAAC,OAAI,EAAA,WAAWM,EAAI,gBAAgB,GAAI,UAAKP,GAAA;AAAA,sBAC5C,OAAI,EAAA,WAAWO,EAAI,gBAAgB,GAAI,UAAYR,EAAA,CAAA;AAAA,EAAA,GACtD;AAuBK,SApBiBiB,EAAU;AAAA,IAChC,QAAQb,KAGL,gBAAAF,EAAA,OAAA,EAAI,WAAWgB,EAAKV,EAAI,WAAW,GAAGV,CAAS,EAAG,CAAA;AAAA,IAErD,KAAKa;AAAA,IACL,OAAO;AAAA,MACL,UAAUd,KAAYkB;AAAA,MACtB,WAAAjB;AAAA,MACA,GAAGc;AAAA,MACH,GAAGC;AAAA,MACH,GAAGN;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAAG;AAAA,MACA,IAAAd;AAAA,IAAA;AAAA,EACF,CACD;AAGH;"}

package/dist/components/DragDrop/hooks.js

@@ -0,0 +1,139 @@
+import { useState as C, useRef as R, useCallback as u, useEffect as J } from "react";
+import { useDragDropContext as A } from "./context.js";
+function z({
+  id: c,
+  data: t,
+  disabled: n = !1,
+  onDragStart: h,
+  onDragEnd: E
+}) {
+  const [g, i] = C(!1), x = R(null), r = R(null), y = u((a) => {
+    x.current = a;
+  }, []), {
+    setActive: o,
+    onDragStart: m,
+    onDragEnd: v,
+    setIsDragging: p
+  } = A(), d = h || m, f = E || v, I = u(
+    (a) => {
+      var D, N, O, T;
+      if (n) return;
+      i(!0), p(!0);
+      const l = { data: t, id: c };
+      o(l), d && d({ active: l });
+      const e = JSON.stringify({ id: c, data: t });
+      (D = a.dataTransfer) == null || D.setData("application/json", e), (N = a.dataTransfer) == null || N.setData("text/plain", e);
+      const s = x.current;
+      if (s) {
+        const j = s.getBoundingClientRect();
+        r.current = s.cloneNode(!0), r.current.style.maxWidth = "400px", r.current.style.position = "absolute", r.current.style.pointerEvents = "none", r.current.style.top = "-99px", r.current.style.left = "-99px", r.current.style.zIndex = "-1", (O = s.parentElement) == null || O.appendChild(r.current), (T = a.dataTransfer) == null || T.setDragImage(
+          r.current,
+          a.clientX - j.left,
+          a.clientY - j.top
+        );
+      }
+    },
+    [c, t, n, d, o, p]
+  ), S = u(
+    (a) => {
+      var l;
+      n || (i(!1), p(!1), (l = r.current) == null || l.remove(), f && f({ active: { data: t, id: c }, over: null }));
+    },
+    [c, t, n, f, p]
+  );
+  return {
+    isDragging: g,
+    setNodeRef: y,
+    attributes: {
+      draggable: !n,
+      role: "button",
+      "aria-pressed": g,
+      tabIndex: n ? -1 : 0,
+      "data-dragging": g ? !0 : void 0,
+      "data-disabled": n ? !0 : void 0
+    },
+    listeners: {
+      onDragStart: I,
+      onDragEnd: S
+    }
+  };
+}
+function B({
+  id: c,
+  disabled: t = !1,
+  validate: n = () => !0,
+  onDrop: h
+}) {
+  const [E, g] = C(!1), [i, x] = C(void 0), r = R(null), y = u((e) => {
+    r.current = e;
+  }, []), {
+    active: o,
+    setActive: m,
+    onDragEnd: v,
+    onDrop: p,
+    isDragging: d
+  } = A(), f = h || p;
+  J(() => {
+    o && n && x(n(o));
+  }, [o, n]);
+  const I = u(
+    (e) => {
+      t || (e.preventDefault(), g(!0));
+    },
+    [t]
+  ), S = u(
+    (e) => {
+      t || (e.preventDefault(), e.dataTransfer.dropEffect = "move");
+    },
+    [t]
+  ), a = u(
+    (e) => {
+      t || e.currentTarget === e.target && g(!1);
+    },
+    [t]
+  ), l = u(
+    (e) => {
+      if (!t && (e.preventDefault(), !!i))
+        try {
+          const s = e.dataTransfer.getData("application/json");
+          let D;
+          if (s)
+            D = JSON.parse(s);
+          else if (o)
+            D = o;
+          else
+            return;
+          f && f(D), v && o && v({
+            active: D,
+            over: { id: c }
+          }), g(!1), m(null);
+        } catch (s) {
+          console.error("Error processing drop:", s);
+        }
+    },
+    [t, c, o, f, v, m, i]
+  );
+  return {
+    isOver: E,
+    setNodeRef: y,
+    attributes: {
+      "data-droppable": !0,
+      "data-over": E ? !0 : void 0,
+      "data-disabled": t ? !0 : void 0,
+      "data-dragging": d ? !0 : void 0,
+      "data-valid": i === !0 ? !0 : void 0
+    },
+    valid: i,
+    listeners: {
+      onDragEnter: I,
+      onDragOver: S,
+      onDragLeave: a,
+      onDrop: l
+    }
+  };
+}
+export {
+  z as useDraggable,
+  B as useDroppable
+};
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../../../src/components/DragDrop/hooks.ts"],"sourcesContent":["import { useCallback, useRef, useState, useEffect } from \"react\";\n\nimport {\n  DraggableInfo,\n  type Data,\n  type UseDraggableProps,\n  type UseDroppableProps,\n} from \"./types\";\nimport { useDragDropContext } from \"./context\";\n\n/**\n * Hook for making an element draggable using HTML5 drag and drop API\n */\nexport function useDraggable<T extends Data = Data>({\n  id,\n  data,\n  disabled = false,\n  onDragStart: onDragStartProp,\n  onDragEnd: onDragEndProp,\n}: UseDraggableProps<T>) {\n  const [isDragging, setIsDragging] = useState(false);\n  const nodeRef = useRef<HTMLElement | null>(null);\n  const thumbnailNodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    setActive,\n    onDragStart: onDragStartContext,\n    onDragEnd: onDragEndContext,\n    setIsDragging: setIsDraggingContext,\n  } = useDragDropContext();\n\n  const onDragStart = onDragStartProp || onDragStartContext;\n  const onDragEnd = onDragEndProp || onDragEndContext;\n\n  const handleDragStart = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(true);\n      setIsDraggingContext(true);\n\n      // Update the active item in context\n      const dragItem = { data, id };\n      setActive(dragItem);\n\n      // Call the onDragStart callback if available\n      if (onDragStart) {\n        onDragStart({ active: dragItem });\n      }\n\n      // Set data transfer\n      const dataPayload = JSON.stringify({ id, data });\n      e.dataTransfer?.setData(\"application/json\", dataPayload);\n\n      // For Firefox compatibility\n      e.dataTransfer?.setData(\"text/plain\", dataPayload);\n\n      // Set drag image (optional)\n      const node = nodeRef.current;\n      if (node) {\n        const nodeRect = node.getBoundingClientRect();\n\n        thumbnailNodeRef.current = node.cloneNode(true) as HTMLElement;\n        thumbnailNodeRef.current.style.maxWidth = \"400px\";\n        thumbnailNodeRef.current.style.position = \"absolute\";\n        thumbnailNodeRef.current.style.pointerEvents = \"none\";\n        thumbnailNodeRef.current.style.top = \"-99px\";\n        thumbnailNodeRef.current.style.left = \"-99px\";\n        thumbnailNodeRef.current.style.zIndex = \"-1\";\n\n        node.parentElement?.appendChild(thumbnailNodeRef.current);\n\n        // Use the node itself as the drag image\n        e.dataTransfer?.setDragImage(\n          thumbnailNodeRef.current,\n          e.clientX - nodeRect.left,\n          e.clientY - nodeRect.top\n        );\n      }\n    },\n    [id, data, disabled, onDragStart, setActive, setIsDraggingContext]\n  );\n\n  const handleDragEnd = useCallback(\n    (_e: React.DragEvent) => {\n      if (disabled) return;\n\n      setIsDragging(false);\n      setIsDraggingContext(false);\n      thumbnailNodeRef.current?.remove();\n\n      if (onDragEnd) {\n        onDragEnd({ active: { data, id }, over: null });\n      }\n    },\n    [id, data, disabled, onDragEnd, setIsDraggingContext]\n  );\n\n  return {\n    isDragging,\n    setNodeRef,\n    attributes: {\n      draggable: !disabled,\n      role: \"button\",\n      \"aria-pressed\": isDragging,\n      tabIndex: disabled ? -1 : 0,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n    },\n    listeners: {\n      onDragStart: handleDragStart,\n      onDragEnd: handleDragEnd,\n    },\n  };\n}\n\n/**\n * Hook for making an element a drop target using HTML5 drag and drop API\n */\nexport function useDroppable<T extends Data = Data>({\n  id,\n  disabled = false,\n  validate = () => true,\n  onDrop: onDropProp,\n}: UseDroppableProps<T>) {\n  const [isOver, setIsOver] = useState(false);\n  const [valid, setValid] = useState(undefined);\n  const nodeRef = useRef<HTMLElement | null>(null);\n\n  const setNodeRef = useCallback((node: HTMLElement | null) => {\n    nodeRef.current = node;\n  }, []);\n\n  const {\n    active,\n    setActive,\n    onDragEnd,\n    onDrop: onDropContext,\n    isDragging,\n  } = useDragDropContext<T>();\n\n  const onDrop = onDropProp || onDropContext;\n\n  useEffect(() => {\n    if (active && validate) {\n      setValid(validate(active));\n    }\n  }, [active, validate]);\n\n  const handleDragEnter = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      setIsOver(true);\n    },\n    [disabled]\n  );\n\n  const handleDragOver = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault(); // Necessary to allow dropping\n      e.dataTransfer.dropEffect = \"move\";\n    },\n    [disabled]\n  );\n\n  const handleDragLeave = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      // Only set isOver to false if we're leaving this element (not a child)\n      if (e.currentTarget === e.target) {\n        setIsOver(false);\n      }\n    },\n    [disabled]\n  );\n\n  const handleDrop = useCallback(\n    (e: React.DragEvent) => {\n      if (disabled) return;\n      e.preventDefault();\n      if (!valid) return;\n\n      try {\n        // Try to get data from dataTransfer\n        const jsonData = e.dataTransfer.getData(\"application/json\");\n        let draggedItem: DraggableInfo<T>;\n\n        if (jsonData) {\n          draggedItem = JSON.parse(jsonData);\n        } else if (active) {\n          // Fall back to active item from context if dataTransfer is not available\n          draggedItem = active;\n        } else {\n          return; // No item to drop\n        }\n\n        // Call the component's onDrop handler if provided\n        if (onDrop) {\n          onDrop(draggedItem);\n        }\n\n        // Call the onDragEnd callback from context if available\n        if (onDragEnd && active) {\n          onDragEnd({\n            active: draggedItem,\n            over: { id },\n          });\n        }\n\n        setIsOver(false);\n\n        // Reset the active item in context\n        setActive(null);\n      } catch (error) {\n        console.error(\"Error processing drop:\", error);\n      }\n    },\n    [disabled, id, active, onDrop, onDragEnd, setActive, valid]\n  );\n\n  return {\n    isOver,\n    setNodeRef,\n    attributes: {\n      \"data-droppable\": true,\n      \"data-over\": isOver ? true : undefined,\n      \"data-disabled\": disabled ? true : undefined,\n      \"data-dragging\": isDragging ? true : undefined,\n      \"data-valid\": valid === true ? true : undefined,\n    },\n    valid,\n    listeners: {\n      onDragEnter: handleDragEnter,\n      onDragOver: handleDragOver,\n      onDragLeave: handleDragLeave,\n      onDrop: handleDrop,\n    },\n  };\n}\n"],"names":["useDraggable","id","data","disabled","onDragStartProp","onDragEndProp","isDragging","setIsDragging","useState","nodeRef","useRef","thumbnailNodeRef","setNodeRef","useCallback","node","setActive","onDragStartContext","onDragEndContext","setIsDraggingContext","useDragDropContext","onDragStart","onDragEnd","handleDragStart","e","dragItem","dataPayload","_a","_b","nodeRect","_c","_d","handleDragEnd","_e","useDroppable","validate","onDropProp","isOver","setIsOver","valid","setValid","active","onDropContext","onDrop","useEffect","handleDragEnter","handleDragOver","handleDragLeave","handleDrop","jsonData","draggedItem","error"],"mappings":"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"}

package/dist/components/DragDrop/index.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsx as r } from "react/jsx-runtime";
+import { useState as o } from "react";
+import { Draggable as f } from "./draggable.js";
+import { Droppable as u } from "./droppable.js";
+import { DragDropContext as d } from "./context.js";
+import './style.css';/* empty css          */
+import { useCls as v } from "../utils/antdUtils.js";
+import { clsx as x } from "../utils/cn.js";
+function b({
+  children: t,
+  // These callbacks are passed to child components via context
+  onDragEnd: n,
+  onDragStart: e,
+  onDrop: a,
+  className: s
+}) {
+  const i = v(), [c, g] = o(null), [m, p] = o(!1), D = {
+    active: c,
+    setActive: (l) => {
+      g(l);
+    },
+    isDragging: m,
+    setIsDragging: p,
+    onDragStart: e,
+    onDragEnd: n,
+    onDrop: a
+  };
+  return /* @__PURE__ */ r(d.Provider, { value: D, children: /* @__PURE__ */ r("div", { className: x(i("drag-container"), s), children: t }) });
+}
+const O = Object.assign(b, {
+  /**
+   * Item that can be dragged
+   */
+  Draggable: f,
+  /**
+   * Zone where items can be dropped
+   */
+  Droppable: u
+});
+export {
+  O as DragDrop,
+  b as DragDropRoot
+};
+//# sourceMappingURL=index.js.map

package/dist/components/DragDrop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sources":["../../../src/components/DragDrop/index.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  type DragEndEvent,\n  type DragStartEvent,\n  type Data as DragData,\n  type UniqueIdentifier,\n  type DragDropDraggableProps,\n  type DragDropDroppableProps,\n  type DragDropProps,\n} from \"./types\";\nimport { useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { Draggable } from \"./draggable\";\nimport { Droppable } from \"./droppable\";\nimport { DragDropContext } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n/**\n * The root component for the drag and drop functionality\n */\nexport function DragDropRoot<T extends DragData = DragData>({\n  children,\n  // These callbacks are passed to child components via context\n  onDragEnd: _onDragEnd,\n  onDragStart: _onDragStart,\n  onDrop: _onDrop,\n  className,\n}: DragDropProps<T>) {\n  const cls = useCls();\n  const [active, setActive] = useState<{\n    data: T;\n    id: UniqueIdentifier;\n  } | null>(null);\n\n  const [isDragging, setIsDragging] = useState(false);\n\n  // These functions are now handled directly in the Item and DropZone components\n\n  // Create context value for child components\n  const contextValue = {\n    active,\n    setActive: (item: { data: unknown; id: UniqueIdentifier } | null) => {\n      setActive(item as { data: T; id: UniqueIdentifier } | null);\n    },\n    isDragging,\n    setIsDragging,\n    onDragStart: _onDragStart,\n    onDragEnd: _onDragEnd,\n    onDrop: _onDrop,\n  };\n\n  return (\n    <DragDropContext.Provider value={contextValue}>\n      <div className={clsx(cls(\"drag-container\"), className)}>{children}</div>\n    </DragDropContext.Provider>\n  );\n}\n\n/**\n * Drag component with subcomponents\n */\nexport const DragDrop = Object.assign(DragDropRoot, {\n  /**\n   * Item that can be dragged\n   */\n  Draggable,\n\n  /**\n   * Zone where items can be dropped\n   */\n  Droppable,\n});\n\nexport type {\n  DragEndEvent,\n  DragStartEvent,\n  DragDropDraggableProps,\n  DragDropDroppableProps,\n  DragData,\n  DragDropProps,\n};\n"],"names":["DragDropRoot","children","_onDragEnd","_onDragStart","_onDrop","className","cls","useCls","active","setActive","useState","isDragging","setIsDragging","contextValue","item","DragDropContext","jsx","clsx","DragDrop","Draggable","Droppable"],"mappings":";;;;;;;;;AAuBO,SAASA,EAA4C;AAAA,EAC1D,UAAAC;AAAA;AAAA,EAEA,WAAWC;AAAA,EACX,aAAaC;AAAA,EACb,QAAQC;AAAA,EACR,WAAAC;AACF,GAAqB;AACnB,QAAMC,IAAMC,EAAO,GACb,CAACC,GAAQC,CAAS,IAAIC,EAGlB,IAAI,GAER,CAACC,GAAYC,CAAa,IAAIF,EAAS,EAAK,GAK5CG,IAAe;AAAA,IACnB,QAAAL;AAAA,IACA,WAAW,CAACM,MAAyD;AACnE,MAAAL,EAAUK,CAAgD;AAAA,IAC5D;AAAA,IACA,YAAAH;AAAA,IACA,eAAAC;AAAA,IACA,aAAaT;AAAA,IACb,WAAWD;AAAA,IACX,QAAQE;AAAA,EACV;AAEA,2BACGW,EAAgB,UAAhB,EAAyB,OAAOF,GAC/B,UAAC,gBAAAG,EAAA,OAAA,EAAI,WAAWC,EAAKX,EAAI,gBAAgB,GAAGD,CAAS,GAAI,UAAAJ,EAAS,CAAA,GACpE;AAEJ;AAKa,MAAAiB,IAAW,OAAO,OAAOlB,GAAc;AAAA;AAAA;AAAA;AAAA,EAIlD,WAAAmB;AAAA;AAAA;AAAA;AAAA,EAKA,WAAAC;AACF,CAAC;"}

package/dist/components/DragDrop/style.css

@@ -0,0 +1 @@
+.ds-drag-container{position:relative}.ds-draggable{position:relative;cursor:grab;-webkit-user-select:none;user-select:none;background-color:var(--ds-color-bg-container);border:1px solid var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.5rem;margin-bottom:.5rem;display:flex;max-width:100%;gap:.5rem;transition:background-color .2s,border-color .2s,box-shadow .2s}.ds-draggable[data-dragging]{opacity:.5;box-shadow:0 2px 8px #00000026;z-index:1}.ds-draggable[data-disabled]{cursor:not-allowed;opacity:.5;background-color:var(--ds-color-bg-disabled)}.ds-draggable:hover{border-color:var(--ds-color-primary)}.ds-draggable .ds-draggable-indicator{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone{position:relative;width:100%;background-color:var(--ds-color-fill-alter);border:1px dashed var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.75rem;display:flex;align-items:center;justify-content:center;transition:border-color .1s,background-color .1s}.ds-drop-zone[data-disabled=true]{cursor:not-allowed;background-color:var(--ds-color-bg-disabled);border-color:var(--ds-color-border)}.ds-drop-zone[data-dropping][data-valid],.ds-drop-zone[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-drop-zone[data-dragging][data-valid]{border-color:var(--ds-color-primary)}.ds-drop-zone .ds-drop-zone-content{display:flex;align-items:center;justify-content:center;text-align:center;gap:.5rem}.ds-drop-zone .ds-drop-zone-icon{font-size:1.25rem;color:var(--ds-color-icon)}.ds-drop-zone .ds-drop-zone-text{color:var(--ds-color-text-description);font-size:var(--ds-font-size)}

package/dist/components/DropdownMenu/component.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as l, jsx as d } from "react/jsx-runtime";
 import { Menu as p } from "@base-ui-components/react/menu";
 import { useCallback as A, useRef as E } from "react";

package/dist/components/DropdownMenu/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/DropdownMenu/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  useAntdCssVarClassname,\n  parseAntdPlacement,\n} from \"../utils\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef } from \"react\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type DropdownMenuItemType =\n  | {\n      type: \"item\";\n      label?: React.ReactNode;\n      disabled?: boolean;\n      icon?: React.ReactNode;\n      key: React.Key;\n      onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n      onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n      onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n      onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n      onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n      danger?: boolean;\n      ref?: React.Ref<HTMLElement>;\n    }\n  | {\n      type: \"divider\";\n    }\n  | {\n      type: \"header\";\n      title?: React.ReactNode;\n    };\n\nexport interface DropdownMenuProps {\n  /** Array of menu items to be displayed in the dropdown */\n  items: DropdownMenuItemType[];\n  /** Custom render function for the trigger element */\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  /**\n   * Placement of the dropdown relative to the trigger element\n   * @default \"bottomLeft\"\n   */\n  placement?: PopoverProps[\"placement\"];\n  /**\n   * Whether to open the dropdown on hover instead of click\n   * @default false\n   */\n  openOnHover?: boolean;\n  /**\n   * Controlled open state of the dropdown\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the dropdown open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional CSS class for the dropdown component\n   */\n  className?: string;\n  /**\n   * Custom class names for different parts of the dropdown\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    group?: string;\n    groupLabel?: string;\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n    separator?: string;\n    positioner?: string;\n  };\n  /**\n   * Custom render function for menu items\n   */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n}\n\ninterface DropdownMenuGroup {\n  label: React.ReactNode | null;\n  items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  className,\n  itemRender,\n  classNames,\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: outsideOpen,\n    default: false,\n    name: \"open\",\n  });\n  const onOpenChange = useCallback(\n    (newValue: boolean) => {\n      setOpen(newValue);\n      outsideOnOpenChange?.(newValue);\n    },\n    [setOpen, outsideOnOpenChange]\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n    // If no groups exist yet and current item is not a header, create default group\n    if (acc.length === 0 && current.type !== \"header\") {\n      acc.push({\n        label: null,\n        items: [],\n      });\n    }\n\n    // If it's a header, create a new group\n    if (current.type === \"header\") {\n      acc.push({\n        label: current.title,\n        items: [],\n      });\n    }\n    // If it's an item and we have at least one group, add it to the last group's items\n    else if (\n      (current.type === \"item\" || current.type === \"divider\") &&\n      acc.length > 0\n    ) {\n      acc[acc.length - 1].items.push(current);\n    }\n    // Skip dividers\n    return acc;\n  }, []);\n\n  return (\n    <Menu.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <Menu.Trigger\n        render={children}\n        ref={buttonRef}\n        className={clsx(\n          cls(\"dropdown-menu-trigger\"),\n          classNames?.trigger,\n          antdCssVarClassname\n        )}\n      ></Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Positioner\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n        >\n          <Menu.Popup\n            className={clsx(\n              cls(\"dropdown-menu\"),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n          >\n            {itemGroups.map((group, i) => {\n              return (\n                <Menu.Group\n                  key={\"group\" + i}\n                  className={clsx(\n                    cls(\"dropdown-menu-group\"),\n                    classNames?.group\n                  )}\n                >\n                  {group.label && (\n                    <Menu.GroupLabel\n                      key={i}\n                      className={clsx(\n                        cls(\"dropdown-menu-header\"),\n                        classNames?.groupLabel\n                      )}\n                    >\n                      <span>{group.label}</span>\n                    </Menu.GroupLabel>\n                  )}\n                  {group.items.map((item, j) => {\n                    return item.type == \"item\" ? (\n                      <Menu.Item\n                        key={i + \"-\" + j}\n                        className={clsx(\n                          cls(\"dropdown-menu-item\"),\n                          classNames?.item\n                        )}\n                        disabled={item.disabled}\n                        data-danger={item.danger}\n                        ref={item.ref}\n                        onClick={item.onClick}\n                        onMouseEnter={item.onMouseEnter}\n                        onMouseLeave={item.onMouseLeave}\n                        onMouseOver={item.onMouseOver}\n                        onMouseOut={item.onMouseOut}\n                        render={\n                          itemRender\n                            ? (itemProps) => itemRender(item, itemProps)\n                            : undefined\n                        }\n                      >\n                        {item.icon && (\n                          <span\n                            className={clsx(\n                              cls(\"dropdown-menu-item-icon\"),\n                              classNames?.itemIcon\n                            )}\n                          >\n                            {item.icon}\n                          </span>\n                        )}\n                        <span>{item.label}</span>\n                      </Menu.Item>\n                    ) : item.type == \"divider\" ? (\n                      <Menu.Separator\n                        key={i}\n                        className={clsx(\n                          cls(\"dropdown-menu-divider\"),\n                          classNames?.separator\n                        )}\n                      ></Menu.Separator>\n                    ) : item.type == \"header\" ? (\n                      <Menu.GroupLabel\n                        key={i}\n                        className={clsx(\n                          cls(\"dropdown-menu-header\"),\n                          classNames?.groupLabel\n                        )}\n                      >\n                        <span>{item.title}</span>\n                      </Menu.GroupLabel>\n                    ) : null;\n                  })}\n                </Menu.Group>\n              );\n            })}\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","jsxs","Menu","jsx","clsx","group","i","item","j","itemProps"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/DropdownMenu/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  useCls,\n  clsx,\n  useAntdCssVarClassname,\n  parseAntdPlacement,\n} from \"../utils\";\nimport { Menu } from \"@base-ui-components/react/menu\";\nimport { type PopoverProps } from \"antd/es/popover\";\nimport { useCallback, useRef } from \"react\";\nimport { useControlled } from \"@base-ui-components/react/utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type DropdownMenuItemType =\n  | {\n      type: \"item\";\n      label?: React.ReactNode;\n      disabled?: boolean;\n      icon?: React.ReactNode;\n      key: React.Key;\n      onClick?: React.HTMLAttributes<HTMLElement>[\"onClick\"];\n      onMouseEnter?: React.HTMLAttributes<HTMLElement>[\"onMouseEnter\"];\n      onMouseLeave?: React.HTMLAttributes<HTMLElement>[\"onMouseLeave\"];\n      onMouseOver?: React.HTMLAttributes<HTMLElement>[\"onMouseOver\"];\n      onMouseOut?: React.HTMLAttributes<HTMLElement>[\"onMouseOut\"];\n      danger?: boolean;\n      ref?: React.Ref<HTMLElement>;\n    }\n  | {\n      type: \"divider\";\n    }\n  | {\n      type: \"header\";\n      title?: React.ReactNode;\n    };\n\nexport interface DropdownMenuProps {\n  /** Array of menu items to be displayed in the dropdown */\n  items: DropdownMenuItemType[];\n  /** Custom render function for the trigger element */\n  children?: React.ComponentProps<typeof Menu.Trigger>[\"render\"];\n  /**\n   * Placement of the dropdown relative to the trigger element\n   * @default \"bottomLeft\"\n   */\n  placement?: PopoverProps[\"placement\"];\n  /**\n   * Whether to open the dropdown on hover instead of click\n   * @default false\n   */\n  openOnHover?: boolean;\n  /**\n   * Controlled open state of the dropdown\n   */\n  open?: boolean;\n  /**\n   * Callback fired when the dropdown open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional CSS class for the dropdown component\n   */\n  className?: string;\n  /**\n   * Custom class names for different parts of the dropdown\n   * @default {}\n   */\n  classNames?: {\n    root?: string;\n    trigger?: string;\n    popup?: string;\n    group?: string;\n    groupLabel?: string;\n    item?: string;\n    itemIcon?: string;\n    itemText?: string;\n    separator?: string;\n    positioner?: string;\n  };\n  /**\n   * Custom render function for menu items\n   */\n  itemRender?: (\n    item: DropdownMenuItemType,\n    props: React.HTMLAttributes<HTMLElement>\n  ) => React.ReactElement;\n}\n\ninterface DropdownMenuGroup {\n  label: React.ReactNode | null;\n  items: DropdownMenuItemType[];\n}\n\nexport const DropdownMenu = ({\n  children,\n  items,\n  placement,\n  openOnHover,\n  open: outsideOpen,\n  onOpenChange: outsideOnOpenChange,\n  className,\n  itemRender,\n  classNames,\n}: DropdownMenuProps) => {\n  const [open, setOpen] = useControlled({\n    controlled: outsideOpen,\n    default: false,\n    name: \"open\",\n  });\n  const onOpenChange = useCallback(\n    (newValue: boolean) => {\n      setOpen(newValue);\n      outsideOnOpenChange?.(newValue);\n    },\n    [setOpen, outsideOnOpenChange]\n  );\n  const cls = useCls();\n  const antdCssVarClassname = useAntdCssVarClassname();\n  const headlessUIPlacement = parseAntdPlacement(placement);\n  const buttonRef = useRef<HTMLButtonElement>(null);\n  const itemGroups = items.reduce<DropdownMenuGroup[]>((acc, current) => {\n    // If no groups exist yet and current item is not a header, create default group\n    if (acc.length === 0 && current.type !== \"header\") {\n      acc.push({\n        label: null,\n        items: [],\n      });\n    }\n\n    // If it's a header, create a new group\n    if (current.type === \"header\") {\n      acc.push({\n        label: current.title,\n        items: [],\n      });\n    }\n    // If it's an item and we have at least one group, add it to the last group's items\n    else if (\n      (current.type === \"item\" || current.type === \"divider\") &&\n      acc.length > 0\n    ) {\n      acc[acc.length - 1].items.push(current);\n    }\n    // Skip dividers\n    return acc;\n  }, []);\n\n  return (\n    <Menu.Root\n      openOnHover={openOnHover}\n      open={open}\n      onOpenChange={onOpenChange}\n    >\n      <Menu.Trigger\n        render={children}\n        ref={buttonRef}\n        className={clsx(\n          cls(\"dropdown-menu-trigger\"),\n          classNames?.trigger,\n          antdCssVarClassname\n        )}\n      ></Menu.Trigger>\n      <Menu.Portal>\n        <Menu.Positioner\n          side={headlessUIPlacement.placement}\n          align={headlessUIPlacement.align}\n          sideOffset={4}\n          className={clsx(cls(\"dropdown-menu-root\"), classNames?.root)}\n        >\n          <Menu.Popup\n            className={clsx(\n              cls(\"dropdown-menu\"),\n              className,\n              classNames?.popup,\n              antdCssVarClassname\n            )}\n          >\n            {itemGroups.map((group, i) => {\n              return (\n                <Menu.Group\n                  key={\"group\" + i}\n                  className={clsx(\n                    cls(\"dropdown-menu-group\"),\n                    classNames?.group\n                  )}\n                >\n                  {group.label && (\n                    <Menu.GroupLabel\n                      key={i}\n                      className={clsx(\n                        cls(\"dropdown-menu-header\"),\n                        classNames?.groupLabel\n                      )}\n                    >\n                      <span>{group.label}</span>\n                    </Menu.GroupLabel>\n                  )}\n                  {group.items.map((item, j) => {\n                    return item.type == \"item\" ? (\n                      <Menu.Item\n                        key={i + \"-\" + j}\n                        className={clsx(\n                          cls(\"dropdown-menu-item\"),\n                          classNames?.item\n                        )}\n                        disabled={item.disabled}\n                        data-danger={item.danger}\n                        ref={item.ref}\n                        onClick={item.onClick}\n                        onMouseEnter={item.onMouseEnter}\n                        onMouseLeave={item.onMouseLeave}\n                        onMouseOver={item.onMouseOver}\n                        onMouseOut={item.onMouseOut}\n                        render={\n                          itemRender\n                            ? (itemProps) => itemRender(item, itemProps)\n                            : undefined\n                        }\n                      >\n                        {item.icon && (\n                          <span\n                            className={clsx(\n                              cls(\"dropdown-menu-item-icon\"),\n                              classNames?.itemIcon\n                            )}\n                          >\n                            {item.icon}\n                          </span>\n                        )}\n                        <span>{item.label}</span>\n                      </Menu.Item>\n                    ) : item.type == \"divider\" ? (\n                      <Menu.Separator\n                        key={i}\n                        className={clsx(\n                          cls(\"dropdown-menu-divider\"),\n                          classNames?.separator\n                        )}\n                      ></Menu.Separator>\n                    ) : item.type == \"header\" ? (\n                      <Menu.GroupLabel\n                        key={i}\n                        className={clsx(\n                          cls(\"dropdown-menu-header\"),\n                          classNames?.groupLabel\n                        )}\n                      >\n                        <span>{item.title}</span>\n                      </Menu.GroupLabel>\n                    ) : null;\n                  })}\n                </Menu.Group>\n              );\n            })}\n          </Menu.Popup>\n        </Menu.Positioner>\n      </Menu.Portal>\n    </Menu.Root>\n  );\n};\n"],"names":["DropdownMenu","children","items","placement","openOnHover","outsideOpen","outsideOnOpenChange","className","itemRender","classNames","open","setOpen","useControlled","onOpenChange","useCallback","newValue","cls","useCls","antdCssVarClassname","useAntdCssVarClassname","headlessUIPlacement","parseAntdPlacement","buttonRef","useRef","itemGroups","acc","current","jsxs","Menu","jsx","clsx","group","i","item","j","itemProps"],"mappings":"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"}

package/dist/components/Field/component.js

@@ -1,25 +1,26 @@
-import { jsxs as n, jsx as c } from "react/jsx-runtime";
+"use client";
+import { jsxs as o, jsx as c } from "react/jsx-runtime";
 import { Select as u, Input as f } from "antd";
 import { forwardRef as x, useId as C } from "react";
 import './style.css';/* empty css          */
 import { useCls as I, useAntdCssVarClassname as h } from "../utils/antdUtils.js";
 import { clsx as F } from "../utils/cn.js";
 const j = ({
-  label: s,
-  className: m,
-  size: e = "small",
-  colon: i = !0,
+  label: e,
+  className: i,
+  size: r = "small",
+  colon: m = !0,
   type: a = "input",
   ...t
 }, l) => {
-  const o = I(), r = C(), p = h(), d = () => a === "select" ? (
+  const n = I(), s = C(), p = h(), d = () => a === "select" ? (
     // @ts-expect-error: this is a workaround for the type error
-    /* @__PURE__ */ c(u, { id: r, ref: l, size: e, ...t.selectProps || {} })
-  ) : /* @__PURE__ */ c(f, { id: r, ref: l, size: e, ...t.inputProps || {} });
-  return /* @__PURE__ */ n("div", { className: F(o("field"), p, m), children: [
-    s && /* @__PURE__ */ n("label", { htmlFor: r, className: o("field-label"), children: [
-      s,
-      i ? ":" : ""
+    /* @__PURE__ */ c(u, { id: s, ref: l, size: r, ...t.selectProps || {} })
+  ) : /* @__PURE__ */ c(f, { id: s, ref: l, size: r, ...t.inputProps || {} });
+  return /* @__PURE__ */ o("div", { className: F(n("field"), p, i), children: [
+    e && /* @__PURE__ */ o("label", { htmlFor: s, className: n("field-label"), children: [
+      e,
+      m ? ":" : ""
     ] }),
     d()
   ] });

package/dist/components/Field/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Field/component.tsx"],"sourcesContent":["\"use client\";\nimport type { InputProps, InputRef, SelectProps } from \"antd\";\nimport { Input, Select } from \"antd\";\nimport { SizeType } from \"antd/es/config-provider/SizeContext\";\nimport { RefSelectProps } from \"antd/es/select\";\nimport { ForwardedRef, forwardRef, useId } from \"react\";\nimport { clsx, useCls, useAntdCssVarClassname } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type FieldType = \"input\" | \"select\";\n\ntype RefType<T extends FieldType> = T extends \"input\"\n  ? InputRef\n  : T extends \"select\"\n  ? RefSelectProps\n  : never;\n\ninterface BaseFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  label?: React.ReactNode;\n  /**\n   * Block or inline display\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * Size of the field\n   * @default \"small\"\n   */\n  size?: SizeType;\n  /**\n   * Colon after label\n   * @default true\n   */\n  colon?: boolean;\n}\n\ntype InputFieldProps = BaseFieldProps & {\n  type?: \"input\";\n  inputProps: InputProps;\n};\n\ntype SelectFieldProps = BaseFieldProps & {\n  type: \"select\";\n  selectProps: SelectProps;\n};\n\nexport type FieldProps<T extends FieldType = \"input\"> = T extends \"input\"\n  ? InputFieldProps\n  : SelectFieldProps;\n\n/**\n * Generic Field component that forwards ref to Input or Select\n */\nconst FieldInner = <T extends FieldType>(\n  {\n    label,\n    className,\n    size = \"small\",\n    colon = true,\n    type = \"input\",\n    ...rest\n  }: FieldProps<T>,\n  ref: ForwardedRef<RefType<T>>\n) => {\n  const cls = useCls();\n  const id = useId();\n  const cssVarClassname = useAntdCssVarClassname();\n  const renderInputOrSelect = () => {\n    if (type === \"select\") {\n      return (\n        // @ts-expect-error: this is a workaround for the type error\n        <Select id={id} ref={ref} size={size} {...(rest.selectProps || {})} />\n      );\n    }\n    // @ts-expect-error: this is a workaround for the type error\n    return <Input id={id} ref={ref} size={size} {...(rest.inputProps || {})} />;\n  };\n  return (\n    <div className={clsx(cls(\"field\"), cssVarClassname, className)}>\n      {label && (\n        <label htmlFor={id} className={cls(\"field-label\")}>\n          {label}\n          {colon ? \":\" : \"\"}\n        </label>\n      )}\n      {renderInputOrSelect()}\n    </div>\n  );\n};\n\nexport const Field = forwardRef(FieldInner) as <T extends FieldType>(\n  props: FieldProps<T> & { ref?: ForwardedRef<RefType<T>> }\n) => ReturnType<typeof FieldInner<T>>;\n"],"names":["FieldInner","label","className","size","colon","type","rest","ref","cls","useCls","id","useId","cssVarClassname","useAntdCssVarClassname","renderInputOrSelect","jsx","Select","Input","jsxs","clsx","Field","forwardRef"],"mappings":";;;;;;AAuDA,MAAMA,IAAa,CACjB;AAAA,EACE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAKC,EAAM,GACXC,IAAkBC,EAAuB,GACzCC,IAAsB,MACtBT,MAAS;AAAA;AAAA,IAGT,gBAAAU,EAACC,KAAO,IAAAN,GAAQ,KAAAH,GAAU,MAAAJ,GAAa,GAAIG,EAAK,eAAe,GAAK,CAAA;AAAA,MAIjE,gBAAAS,EAACE,KAAM,IAAAP,GAAQ,KAAAH,GAAU,MAAAJ,GAAa,GAAIG,EAAK,cAAc,CAAA,GAAK;AAGzE,SAAA,gBAAAY,EAAC,SAAI,WAAWC,EAAKX,EAAI,OAAO,GAAGI,GAAiBV,CAAS,GAC1D,UAAA;AAAA,IAAAD,uBACE,SAAM,EAAA,SAASS,GAAI,WAAWF,EAAI,aAAa,GAC7C,UAAA;AAAA,MAAAP;AAAA,MACAG,IAAQ,MAAM;AAAA,IAAA,GACjB;AAAA,IAEDU,EAAoB;AAAA,EAAA,GACvB;AAEJ,GAEaM,IAAQC,EAAWrB,CAAU;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Field/component.tsx"],"sourcesContent":["\"use client\";\nimport type { InputProps, InputRef, SelectProps } from \"antd\";\nimport { Input, Select } from \"antd\";\nimport { SizeType } from \"antd/es/config-provider/SizeContext\";\nimport { RefSelectProps } from \"antd/es/select\";\nimport { ForwardedRef, forwardRef, useId } from \"react\";\nimport { clsx, useCls, useAntdCssVarClassname } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type FieldType = \"input\" | \"select\";\n\ntype RefType<T extends FieldType> = T extends \"input\"\n  ? InputRef\n  : T extends \"select\"\n  ? RefSelectProps\n  : never;\n\ninterface BaseFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  label?: React.ReactNode;\n  /**\n   * Block or inline display\n   * @default false\n   */\n  block?: boolean;\n  /**\n   * Size of the field\n   * @default \"small\"\n   */\n  size?: SizeType;\n  /**\n   * Colon after label\n   * @default true\n   */\n  colon?: boolean;\n}\n\ntype InputFieldProps = BaseFieldProps & {\n  type?: \"input\";\n  inputProps: InputProps;\n};\n\ntype SelectFieldProps = BaseFieldProps & {\n  type: \"select\";\n  selectProps: SelectProps;\n};\n\nexport type FieldProps<T extends FieldType = \"input\"> = T extends \"input\"\n  ? InputFieldProps\n  : SelectFieldProps;\n\n/**\n * Generic Field component that forwards ref to Input or Select\n */\nconst FieldInner = <T extends FieldType>(\n  {\n    label,\n    className,\n    size = \"small\",\n    colon = true,\n    type = \"input\",\n    ...rest\n  }: FieldProps<T>,\n  ref: ForwardedRef<RefType<T>>\n) => {\n  const cls = useCls();\n  const id = useId();\n  const cssVarClassname = useAntdCssVarClassname();\n  const renderInputOrSelect = () => {\n    if (type === \"select\") {\n      return (\n        // @ts-expect-error: this is a workaround for the type error\n        <Select id={id} ref={ref} size={size} {...(rest.selectProps || {})} />\n      );\n    }\n    // @ts-expect-error: this is a workaround for the type error\n    return <Input id={id} ref={ref} size={size} {...(rest.inputProps || {})} />;\n  };\n  return (\n    <div className={clsx(cls(\"field\"), cssVarClassname, className)}>\n      {label && (\n        <label htmlFor={id} className={cls(\"field-label\")}>\n          {label}\n          {colon ? \":\" : \"\"}\n        </label>\n      )}\n      {renderInputOrSelect()}\n    </div>\n  );\n};\n\nexport const Field = forwardRef(FieldInner) as <T extends FieldType>(\n  props: FieldProps<T> & { ref?: ForwardedRef<RefType<T>> }\n) => ReturnType<typeof FieldInner<T>>;\n"],"names":["FieldInner","label","className","size","colon","type","rest","ref","cls","useCls","id","useId","cssVarClassname","useAntdCssVarClassname","renderInputOrSelect","jsx","Select","Input","jsxs","clsx","Field","forwardRef"],"mappings":";;;;;;;AAuDA,MAAMA,IAAa,CACjB;AAAA,EACE,OAAAC;AAAA,EACA,WAAAC;AAAA,EACA,MAAAC,IAAO;AAAA,EACP,OAAAC,IAAQ;AAAA,EACR,MAAAC,IAAO;AAAA,EACP,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACbC,IAAKC,EAAM,GACXC,IAAkBC,EAAuB,GACzCC,IAAsB,MACtBT,MAAS;AAAA;AAAA,IAGT,gBAAAU,EAACC,KAAO,IAAAN,GAAQ,KAAAH,GAAU,MAAAJ,GAAa,GAAIG,EAAK,eAAe,GAAK,CAAA;AAAA,MAIjE,gBAAAS,EAACE,KAAM,IAAAP,GAAQ,KAAAH,GAAU,MAAAJ,GAAa,GAAIG,EAAK,cAAc,CAAA,GAAK;AAGzE,SAAA,gBAAAY,EAAC,SAAI,WAAWC,EAAKX,EAAI,OAAO,GAAGI,GAAiBV,CAAS,GAC1D,UAAA;AAAA,IAAAD,uBACE,SAAM,EAAA,SAASS,GAAI,WAAWF,EAAI,aAAa,GAC7C,UAAA;AAAA,MAAAP;AAAA,MACAG,IAAQ,MAAM;AAAA,IAAA,GACjB;AAAA,IAEDU,EAAoB;AAAA,EAAA,GACvB;AAEJ,GAEaM,IAAQC,EAAWrB,CAAU;"}

package/dist/components/Form/component.js

@@ -1,6 +1,7 @@
+"use client";
 import { jsx as o } from "react/jsx-runtime";
 import m from "antd/es/form/ErrorList";
-import t, { useWatch as i, useForm as e } from "antd/es/form/Form";
+import t, { useWatch as e, useForm as i } from "antd/es/form/Form";
 import s from "antd/es/form/FormList";
 import { FormProvider as n } from "antd/es/form/context";
 import p from "antd/es/form/hooks/useFormInstance";
@@ -9,9 +10,9 @@ import './style.css';/* empty css          */
 const f = ({
   ...r
 }) => /* @__PURE__ */ o(t, { ...r }), v = Object.assign(f, {
-  useForm: e,
+  useForm: i,
   useFormInstance: p,
-  useWatch: i,
+  useWatch: e,
   Item: F,
   List: s,
   ErrorList: m,

package/dist/components/Form/component.js.map

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Form/component.tsx"],"sourcesContent":["\"use client\";\nimport ErrorList from \"antd/es/form/ErrorList\";\nimport {\n  FormProps as AntdFormProps,\n  default as AntdInternalForm,\n  useForm,\n  useWatch,\n} from \"antd/es/form/Form\";\nimport FormList from \"antd/es/form/FormList\";\nimport { FormProvider } from \"antd/es/form/context\";\nimport useFormInstance from \"antd/es/form/hooks/useFormInstance\";\nimport * as React from \"react\";\nimport { FormItem, type FormItemProps } from \"./item\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface FormProps<Values = any> extends AntdFormProps<Values> {}\n\ninterface InternalFormProps<Values = any>\n  extends React.ComponentProps<typeof AntdInternalForm<Values>> {}\n\nconst InternalForm = <Values = any,>({\n  ...rest\n}: InternalFormProps<Values>) => {\n  return <AntdInternalForm {...rest} />;\n};\n\nexport const Form = Object.assign(InternalForm, {\n  useForm,\n  useFormInstance,\n  useWatch,\n  Item: FormItem,\n  List: FormList,\n  ErrorList,\n  Provider: FormProvider,\n});\n\nexport type { FormItemProps };\n"],"names":["InternalForm","rest","jsx","AntdInternalForm","Form","useForm","useFormInstance","useWatch","FormItem","FormList","ErrorList","FormProvider"],"mappings":";;;;;;;;AAsBA,MAAMA,IAAe,CAAgB;AAAA,EACnC,GAAGC;AACL,MACS,gBAAAC,EAACC,GAAkB,EAAA,GAAGF,EAAM,CAAA,GAGxBG,IAAO,OAAO,OAAOJ,GAAc;AAAA,EAC9C,SAAAK;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,WAAAC;AAAA,EACA,UAAUC;AACZ,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Form/component.tsx"],"sourcesContent":["\"use client\";\nimport ErrorList from \"antd/es/form/ErrorList\";\nimport {\n  FormProps as AntdFormProps,\n  default as AntdInternalForm,\n  useForm,\n  useWatch,\n} from \"antd/es/form/Form\";\nimport FormList from \"antd/es/form/FormList\";\nimport { FormProvider } from \"antd/es/form/context\";\nimport useFormInstance from \"antd/es/form/hooks/useFormInstance\";\nimport * as React from \"react\";\nimport { FormItem, type FormItemProps } from \"./item\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface FormProps<Values = any> extends AntdFormProps<Values> {}\n\ninterface InternalFormProps<Values = any>\n  extends React.ComponentProps<typeof AntdInternalForm<Values>> {}\n\nconst InternalForm = <Values = any,>({\n  ...rest\n}: InternalFormProps<Values>) => {\n  return <AntdInternalForm {...rest} />;\n};\n\nexport const Form = Object.assign(InternalForm, {\n  useForm,\n  useFormInstance,\n  useWatch,\n  Item: FormItem,\n  List: FormList,\n  ErrorList,\n  Provider: FormProvider,\n});\n\nexport type { FormItemProps };\n"],"names":["InternalForm","rest","jsx","AntdInternalForm","Form","useForm","useFormInstance","useWatch","FormItem","FormList","ErrorList","FormProvider"],"mappings":";;;;;;;;;AAsBA,MAAMA,IAAe,CAAgB;AAAA,EACnC,GAAGC;AACL,MACS,gBAAAC,EAACC,GAAkB,EAAA,GAAGF,EAAM,CAAA,GAGxBG,IAAO,OAAO,OAAOJ,GAAc;AAAA,EAC9C,SAAAK;AAAA,EACA,iBAAAC;AAAA,EACA,UAAAC;AAAA,EACA,MAAMC;AAAA,EACN,MAAMC;AAAA,EACN,WAAAC;AAAA,EACA,UAAUC;AACZ,CAAC;"}

package/dist/components/Form/item.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsxs as t, jsx as r } from "react/jsx-runtime";
 import { isValidElement as l } from "react";
 import a from "antd/es/form/FormItem";

package/dist/components/Form/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../src/components/Form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement } from \"react\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { Question } from \"@bioturing/assets\";\nimport { IconButton } from \"../IconButton\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n  extends AntdFormItemProps<Values> {\n  // tooltip?: React.ReactNode | TooltipProps;\n  optionalMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n  tooltip,\n  label,\n  optionalMark,\n  ...rest\n}: FormItemProps<Values>) => {\n  const cls = useCls();\n  const renderedLabel =\n    tooltip || optionalMark ? (\n      <span className={cls(\"form-item-label-inner\")}>\n        {label}\n        {tooltip && (\n          <IconButton\n            className={cls(\"form-item-explaination-icon\")}\n            label={\n              typeof tooltip == \"string\" || isValidElement(tooltip)\n                ? tooltip\n                : undefined\n            }\n          >\n            <Question />\n          </IconButton>\n        )}\n        {optionalMark && (\n          <span className={cls(\"form-item-label-optional-mark\")}>\n            {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n          </span>\n        )}\n      </span>\n    ) : (\n      label\n    );\n  return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","rest","cls","useCls","renderedLabel","jsxs","jsx","IconButton","isValidElement","Question","AntdFormItem"],"mappings":";;;;;;AAgBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAA6B;AAC3B,QAAMC,IAAMC,EAAO,GACbC,IACJN,KAAWE,IACT,gBAAAK,EAAC,UAAK,WAAWH,EAAI,uBAAuB,GACzC,UAAA;AAAA,IAAAH;AAAA,IACAD,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWL,EAAI,6BAA6B;AAAA,QAC5C,OACE,OAAOJ,KAAW,YAAYU,EAAeV,CAAO,IAChDA,IACA;AAAA,QAGN,4BAACW,GAAS,CAAA,CAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IAEDT,KACE,gBAAAM,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,EAAA,EAAA,CAEJ,IAEAD;AAEJ,SAAQ,gBAAAO,EAAAI,GAAA,EAAa,OAAON,GAAgB,GAAGH,GAAM;AACvD;"}
+{"version":3,"file":"item.js","sources":["../../../src/components/Form/item.tsx"],"sourcesContent":["\"use client\";\nimport { isValidElement } from \"react\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { Question } from \"@bioturing/assets\";\nimport { IconButton } from \"../IconButton\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n  extends AntdFormItemProps<Values> {\n  // tooltip?: React.ReactNode | TooltipProps;\n  optionalMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n  tooltip,\n  label,\n  optionalMark,\n  ...rest\n}: FormItemProps<Values>) => {\n  const cls = useCls();\n  const renderedLabel =\n    tooltip || optionalMark ? (\n      <span className={cls(\"form-item-label-inner\")}>\n        {label}\n        {tooltip && (\n          <IconButton\n            className={cls(\"form-item-explaination-icon\")}\n            label={\n              typeof tooltip == \"string\" || isValidElement(tooltip)\n                ? tooltip\n                : undefined\n            }\n          >\n            <Question />\n          </IconButton>\n        )}\n        {optionalMark && (\n          <span className={cls(\"form-item-label-optional-mark\")}>\n            {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n          </span>\n        )}\n      </span>\n    ) : (\n      label\n    );\n  return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","rest","cls","useCls","renderedLabel","jsxs","jsx","IconButton","isValidElement","Question","AntdFormItem"],"mappings":";;;;;;;AAgBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,GAAGC;AACL,MAA6B;AAC3B,QAAMC,IAAMC,EAAO,GACbC,IACJN,KAAWE,IACT,gBAAAK,EAAC,UAAK,WAAWH,EAAI,uBAAuB,GACzC,UAAA;AAAA,IAAAH;AAAA,IACAD,KACC,gBAAAQ;AAAA,MAACC;AAAA,MAAA;AAAA,QACC,WAAWL,EAAI,6BAA6B;AAAA,QAC5C,OACE,OAAOJ,KAAW,YAAYU,EAAeV,CAAO,IAChDA,IACA;AAAA,QAGN,4BAACW,GAAS,CAAA,CAAA;AAAA,MAAA;AAAA,IACZ;AAAA,IAEDT,KACE,gBAAAM,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,EAAA,EAAA,CAEJ,IAEAD;AAEJ,SAAQ,gBAAAO,EAAAI,GAAA,EAAa,OAAON,GAAgB,GAAGH,GAAM;AACvD;"}

package/dist/components/IconButton/component.js

@@ -1,49 +1,61 @@
+"use client";
 import { jsx as m } from "react/jsx-runtime";
-import { forwardRef as j } from "react";
-import { Tooltip as x } from "antd";
+import { forwardRef as w } from "react";
+import { useRender as N } from "@base-ui-components/react/use-render";
 import './style.css';/* empty css          */
-import { useCls as y, useAntdCssVarClassname as N } from "../utils/antdUtils.js";
-const V = (u, d) => {
-  const {
-    label: e,
-    size: p = "medium",
-    negativeMargin: f = !0,
-    children: b,
-    className: v,
-    tooltipProps: C = {},
-    as: g,
-    href: o,
-    // Extract anchor-specific props
-    target: s,
-    rel: r,
-    download: a,
-    hrefLang: i,
-    referrerPolicy: l,
-    ...h
-  } = u, t = y(), P = N(), w = [
-    t("icon-button"),
-    t(`icon-button-${p}`),
-    t(f ? "icon-button-negative-margin" : ""),
-    P,
-    v
-  ].filter(Boolean).join(" "), n = g || (o ? "a" : "button"), B = n === "a" ? {
-    ...s !== void 0 && { target: s },
-    ...r !== void 0 && { rel: r },
-    ...a !== void 0 && { download: a },
-    ...i !== void 0 && { hrefLang: i },
-    ...l !== void 0 && { referrerPolicy: l }
-  } : {}, I = {
+import { Spin as S } from "../Spin/component.js";
+import { Tooltip as T } from "../Tooltip/component.js";
+import { useCls as $ } from "../utils/antdUtils.js";
+import { clsx as k } from "../utils/cn.js";
+const q = ({
+  label: s,
+  size: b = "medium",
+  negativeMargin: v = !0,
+  children: f,
+  className: x,
+  tooltipProps: C = {},
+  as: I,
+  href: o,
+  // Extract anchor-specific props
+  target: r,
+  rel: e,
+  download: c,
+  hrefLang: p,
+  referrerPolicy: u,
+  loading: t,
+  render: B,
+  ...R
+}, d) => {
+  const n = $(), j = k(
+    n("icon-button"),
+    n(`icon-button-${b}`),
+    n(v ? "icon-button-negative-margin" : ""),
+    x
+  ), i = I || (o ? "a" : "button"), a = {
     ref: d,
-    className: w,
-    ...n === "button" && { type: "button" },
-    ...o && { href: o },
-    ...B,
-    ...h
-  }, c = /* @__PURE__ */ m(n, { ...I, children: b });
-  return e ? /* @__PURE__ */ m(x, { title: e, arrow: !1, ...C, children: c }) : c;
-}, T = j(V);
+    className: j,
+    ...i === "button" && { type: "button" },
+    ...i === "a" ? {
+      ...o && { href: o },
+      ...r !== void 0 && { target: r },
+      ...e !== void 0 && { rel: e },
+      ...c !== void 0 && { download: c },
+      ...p !== void 0 && { hrefLang: p },
+      ...u !== void 0 && { referrerPolicy: u }
+    } : {},
+    "data-loading": t,
+    ...R
+  }, l = N({
+    ref: d,
+    render: B || /* @__PURE__ */ m(i, { ...a, children: t ? /* @__PURE__ */ m(S, {}) : f }),
+    props: a,
+    state: {
+      loading: t
+    }
+  });
+  return s ? /* @__PURE__ */ m(T, { title: s, arrow: !1, ...C, children: l }) : l;
+}, J = w(q);
 export {
-  T as IconButton,
-  T as default
+  J as IconButton
 };
 //# sourceMappingURL=component.js.map