@bioturing/components 0.22.0 → 0.24.0

package/dist/components/button/style.css

@@ -1 +1 @@
-@layer components{span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-lg{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-sm{margin-inline:-.5rem}.ds-btn-loading:not(.ds-btn-with-icon) .ds-btn-loading-icon{position:absolute}.ds-btn-loading:not(.ds-btn-with-icon)>span:not(.ds-btn-loading-icon){opacity:0}}
+@layer components{span.ds-btn-icon{display:flex;align-items:center}.ds-btn-negative-margin-wrapper{display:inline-flex;flex-shrink:0}.ds-btn-negative-margin-wrapper,.ds-btn-negative-margin-wrapper.ds-btn-wrapper-lg{margin-inline:-1rem}.ds-btn-negative-margin-wrapper.ds-btn-wrapper-sm{margin-inline:-.5rem}.ds-btn-loading:not(.ds-btn-with-icon) .ds-btn-loading-icon{position:absolute}.ds-btn-loading:not(.ds-btn-with-icon)>*:not(.ds-btn-loading-icon){opacity:0}}

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

@@ -26,7 +26,13 @@ const F = ({
     disabled: n,
     onDragEnd: g,
     onDragStart: E
-  }), t = c === !0 ? /* @__PURE__ */ p(C, { className: m("draggable-indicator") }) : c, y = [
+  }), t = c === !0 ? /* @__PURE__ */ p(
+    C,
+    {
+      className: m("draggable-indicator")
+    },
+    "indicator-icon" + e
+  ) : c, y = [
     N(t) ? l ? R(t, {
       ...a,
       ...f,

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

@@ -1 +1 @@
-{"version":3,"file":"draggable.js","sources":["../../../src/components/drag-drop/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          key: \"indicator\" + id,\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,GAYEa,IAAmB;AAAA,IAVAC,EAAeJ,CAAa,IACjDT,IACEc,EAAaL,GAAe;AAAA,MAC1B,GAAGL;AAAA,MACH,GAAGC;AAAA,MACH,KAAK,cAAcf;AAAA,IAAA,CACpB,IACDmB,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;"}
+{"version":3,"file":"draggable.js","sources":["../../../src/components/drag-drop/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\n        className={cls(\"draggable-indicator\")}\n        key={\"indicator-icon\" + id}\n      />\n    ) : (\n      indicator\n    );\n  const indicatorElement = isValidElement(indicatorIcon)\n    ? onlyIndicatorDraggable\n      ? cloneElement(indicatorIcon, {\n          ...attributes,\n          ...listeners,\n          key: \"indicator\" + id,\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;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWT,EAAI,qBAAqB;AAAA,IAAA;AAAA,IAC/B,mBAAmBZ;AAAA,EAAA,IAG1BS,GAYEa,IAAmB;AAAA,IAVAC,EAAeJ,CAAa,IACjDT,IACEc,EAAaL,GAAe;AAAA,MAC1B,GAAGL;AAAA,MACH,GAAGC;AAAA,MACH,KAAK,cAAcf;AAAA,IAAA,CACpB,IACDmB,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/drag-drop/droppable.js

@@ -1,80 +1,88 @@
 "use client";
-import { jsxs as P, jsx as n } from "react/jsx-runtime";
-import { memo as W, useCallback as x, useMemo as b } from "react";
-import { useDroppable as h } from "./hooks.js";
-import { ArrowsOutCardinalIcon as y } from "@bioturing/assets";
-import { useRender as B } from "@base-ui-components/react/use-render";
-import { Value as F } from "./value.js";
-import { uniqWith as G, isEqual as H } from "es-toolkit";
-import { useCls as J } from "../utils/antdUtils.js";
-import { clsx as K } from "../utils/cn.js";
-const Q = ({
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { memo as y, useCallback as x, useMemo as D } from "react";
+import { useDroppable as B } from "./hooks.js";
+import { ArrowsOutCardinalIcon as F } from "@bioturing/assets";
+import { useRender as G } from "@base-ui-components/react/use-render";
+import { Value as H } from "./value.js";
+import { uniqWith as I, isEqual as J } from "es-toolkit";
+import { useCls as K } from "../utils/antdUtils.js";
+import { clsx as Q } from "../utils/cn.js";
+const S = ({
   id: d,
-  children: m,
-  className: D,
-  disabled: E = !1,
-  placeholder: i = "Drop items here",
-  icon: f = /* @__PURE__ */ n(y, { size: 24 }),
-  render: O,
+  children: i,
+  className: E,
+  disabled: O = !1,
+  placeholder: m = "Drop items here",
+  icon: f = /* @__PURE__ */ n(F, {}),
+  render: R,
   onDrop: c,
-  validate: R,
+  validate: j,
   multiple: s,
   value: r,
   onChange: o,
-  renderValueLabel: p,
-  renderValueIcon: a,
-  ...j
+  maxItems: p,
+  renderValueLabel: a,
+  renderValueIcon: N,
+  ...q
 }) => {
-  const e = J(), q = x(
+  const e = K(), k = x(
     (t) => {
       c && c(t), o && o(
-        s ? G([...r, t.data], H) : t.data
+        s ? I([...r, t.data], J) : t.data
       );
     },
     [c, o, s, r]
-  ), { isOver: k, setNodeRef: w, attributes: A, listeners: I } = h({
+  ), { isOver: w, setNodeRef: A, attributes: M, listeners: P } = B({
     id: d,
-    disabled: E,
-    onDrop: q,
-    validate: R
-  }), z = b(
-    () => ({ value: r, onChange: o, multiple: s, renderValueLabel: p, renderValueIcon: a }),
-    [r, o, s, p, a]
-  ), N = b(
-    () => m || /* @__PURE__ */ P("div", { className: e("drop-zone-content"), children: [
+    disabled: O,
+    onDrop: k,
+    validate: j
+  }), l = D(
+    () => ({
+      value: r,
+      onChange: o,
+      multiple: s,
+      renderValueLabel: a,
+      renderValueIcon: N,
+      maxItems: p
+    }),
+    [r, o, s, a, N, p]
+  ), z = D(
+    () => i || /* @__PURE__ */ h("div", { className: e("drop-zone-content"), children: [
       /* @__PURE__ */ n("div", { className: e("drop-zone-icon"), children: f }),
-      /* @__PURE__ */ n("div", { className: e("drop-zone-text"), children: i })
+      /* @__PURE__ */ n("div", { className: e("drop-zone-text"), children: m })
     ] }),
-    [m, e, f, i]
-  ), M = x(
-    ({ className: t, ...l }) => !s && r || s && r.length ? /* @__PURE__ */ n(
-      F,
+    [i, e, f, m]
+  ), W = x(
+    ({ className: t, ...b }) => !s && r || s && r.length ? /* @__PURE__ */ n(
+      H,
       {
-        ...z,
+        ...l,
         className: t,
-        ...l
+        ...b
       }
-    ) : /* @__PURE__ */ n("div", { className: K(e("drop-zone"), t), ...l, children: N }),
-    [r, s, z, N, e]
+    ) : /* @__PURE__ */ n("div", { className: Q(e("drop-zone"), t), ...b, children: z }),
+    [r, s, l, z, e]
   );
-  return B({
-    render: O ?? M,
-    ref: w,
+  return G({
+    render: R ?? W,
+    ref: A,
     props: {
-      className: D,
-      ...A,
-      ...I,
-      ...j
+      className: E,
+      ...M,
+      ...P,
+      ...q
     },
     state: {
-      isOver: k,
+      isOver: w,
       value: r,
       onChange: o,
       id: d
     }
   });
-}, L = W(Q);
+}, V = y(S);
 export {
-  L as Droppable
+  V as Droppable
 };
 //# sourceMappingURL=droppable.js.map

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-components/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 size={24} />,\n  render,\n  onDrop,\n  validate,\n  multiple,\n  value,\n  onChange,\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    () => ({ value, onChange, multiple, renderValueLabel, renderValueIcon }),\n    [value, onChange, multiple, renderValueLabel, renderValueIcon]\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      (!multiple && value) || (multiple && (value as T[]).length) ? (\n        <Value<T, M>\n          {...valueProps}\n          className={className as string}\n          {...props}\n        />\n      ) : (\n        <div className={clsx(cls(\"drop-zone\"), className as string)} {...props}>\n          {dropzoneContent}\n        </div>\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","jsx","ArrowsOutCardinalIcon","render","onDrop","validate","multiple","value","onChange","renderValueLabel","renderValueIcon","rest","cls","useCls","handleOnDrop","useCallback","item","uniqWith","isEqual","isOver","setNodeRef","attributes","listeners","useDroppable","valueProps","useMemo","dropzoneContent","jsxs","defaultRender","props","Value","clsx","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,IAAO,gBAAAC,EAACC,GAAsB,EAAA,MAAM,GAAI,CAAA;AAAA,EACxC,QAAAC;AAAA,EACA,QAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,GAAGC;AACL,MAAoC;AAClC,QAAMC,IAAMC,EAAO,GACbC,IAAeC;AAAA,IACnB,CAACC,MAA2B;AAC1B,MAAIZ,KACFA,EAAOY,CAAI,GAETR,KAECA;AAAA,QADCF,IAEAW,EAAS,CAAC,GAAIV,GAAeS,EAAK,IAAI,GAAGE,CAAO,IAGjBF,EAAK;AAAA,MAFtC;AAAA,IAKN;AAAA,IACA,CAACZ,GAAQI,GAAUF,GAAUC,CAAK;AAAA,EACpC,GACM,EAAE,QAAAY,GAAQ,YAAAC,GAAY,YAAAC,GAAY,WAAAC,EAAA,IAAcC,EAAa;AAAA,IACjE,IAAA5B;AAAA,IACA,UAAAG;AAAA,IACA,QAAQgB;AAAA,IACR,UAAAT;AAAA,EAAA,CACD,GAGKmB,IAAaC;AAAA,IACjB,OAAO,EAAE,OAAAlB,GAAO,UAAAC,GAAU,UAAAF,GAAU,kBAAAG,GAAkB,iBAAAC,EAAgB;AAAA,IACtE,CAACH,GAAOC,GAAUF,GAAUG,GAAkBC,CAAe;AAAA,EAC/D,GAGMgB,IAAkBD;AAAA,IACtB,MACE7B,KACE,gBAAA+B,EAAC,SAAI,WAAWf,EAAI,mBAAmB,GACrC,UAAA;AAAA,MAAA,gBAAAX,EAAC,OAAI,EAAA,WAAWW,EAAI,gBAAgB,GAAI,UAAKZ,GAAA;AAAA,wBAC5C,OAAI,EAAA,WAAWY,EAAI,gBAAgB,GAAI,UAAYb,EAAA,CAAA;AAAA,IAAA,GACtD;AAAA,IAEJ,CAACH,GAAUgB,GAAKZ,GAAMD,CAAW;AAAA,EACnC,GAGM6B,IAAgBb;AAAA,IAGpB,CAAC,EAAE,WAAAlB,GAAW,GAAGgC,EACd,MAAA,CAACvB,KAAYC,KAAWD,KAAaC,EAAc,SAClD,gBAAAN;AAAA,MAAC6B;AAAA,MAAA;AAAA,QACE,GAAGN;AAAA,QACJ,WAAW3B;AAAAA,QACV,GAAGgC;AAAA,MAAA;AAAA,IAGN,IAAA,gBAAA5B,EAAC,OAAI,EAAA,WAAW8B,EAAKnB,EAAI,WAAW,GAAGf,CAAmB,GAAI,GAAGgC,GAC9D,UACHH,EAAA,CAAA;AAAA,IAEJ,CAACnB,GAAOD,GAAUkB,GAAYE,GAAiBd,CAAG;AAAA,EACpD;AAmBO,SAjBiBoB,EAAU;AAAA,IAChC,QAAQ7B,KAAUyB;AAAA,IAClB,KAAKR;AAAA,IACL,OAAO;AAAA,MACL,WAAAvB;AAAA,MACA,GAAGwB;AAAA,MACH,GAAGC;AAAA,MACH,GAAGX;AAAA,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAAQ;AAAA,MACA,OAAAZ;AAAA,MACA,UAAAC;AAAA,MACA,IAAAb;AAAA,IAAA;AAAA,EACF,CACD;AAGH,GAEasC,IAAYC,EAAKxC,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-components/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      (!multiple && value) || (multiple && (value as T[]).length) ? (\n        <Value<T, M>\n          {...valueProps}\n          className={className as string}\n          {...props}\n        />\n      ) : (\n        <div className={clsx(cls(\"drop-zone\"), className as string)} {...props}>\n          {dropzoneContent}\n        </div>\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","Value","clsx","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,GAAsB,EAAA;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,EAAO,GACbC,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,MAFtC;AAAA,IAKN;AAAA,IACA,CAACb,GAAQI,GAAUF,GAAUC,CAAK;AAAA,EACpC,GACM,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,EACzE,GAGMkB,IAAkBD;AAAA,IACtB,MACE7B,KACE,gBAAA+B,EAAC,SAAI,WAAWf,EAAI,mBAAmB,GACrC,UAAA;AAAA,MAAA,gBAAAgB,EAAC,OAAI,EAAA,WAAWhB,EAAI,gBAAgB,GAAI,UAAKZ,GAAA;AAAA,wBAC5C,OAAI,EAAA,WAAWY,EAAI,gBAAgB,GAAI,UAAYb,EAAA,CAAA;AAAA,IAAA,GACtD;AAAA,IAEJ,CAACH,GAAUgB,GAAKZ,GAAMD,CAAW;AAAA,EACnC,GAGM8B,IAAgBd;AAAA,IAGpB,CAAC,EAAE,WAAAlB,GAAW,GAAGiC,EACd,MAAA,CAACzB,KAAYC,KAAWD,KAAaC,EAAc,SAClD,gBAAAsB;AAAA,MAACG;AAAA,MAAA;AAAA,QACE,GAAGP;AAAA,QACJ,WAAW3B;AAAAA,QACV,GAAGiC;AAAA,MAAA;AAAA,IAGN,IAAA,gBAAAF,EAAC,OAAI,EAAA,WAAWI,EAAKpB,EAAI,WAAW,GAAGf,CAAmB,GAAI,GAAGiC,GAC9D,UACHJ,EAAA,CAAA;AAAA,IAEJ,CAACpB,GAAOD,GAAUmB,GAAYE,GAAiBd,CAAG;AAAA,EACpD;AAmBO,SAjBiBqB,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,IACL;AAAA,IACA,OAAO;AAAA,MACL,QAAAQ;AAAA,MACA,OAAAb;AAAA,MACA,UAAAC;AAAA,MACA,IAAAZ;AAAA,IAAA;AAAA,EACF,CACD;AAGH,GAEauC,IAAYC,EAAKzC,CAAc;"}

package/dist/components/drag-drop/style.css

@@ -1 +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)}.ds-dropzone-value{padding:.75rem;border-radius:var(--ds-border-radius);border-width:1px;border-style:solid;border-color:var(--ds-color-border)}.ds-dropzone-value[data-dragging][data-valid]{border-color:var(--ds-color-primary);border-style:dashed}.ds-dropzone-value[data-dropping][data-valid],.ds-dropzone-value[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-dropzone-value-icon{color:var(--ds-color-icon);font-size:1.5rem}.ds-dropzone-value-text{color:var(--ds-color-text-secondary)}.ds-dropzone-value-multiple .ds-tag{max-width:50%;margin:0}
+.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)}.ds-dropzone-value{padding:.75rem;border-radius:var(--ds-border-radius);border-width:1px;border-style:solid;border-color:var(--ds-color-border)}.ds-dropzone-value[data-dragging][data-valid]{border-color:var(--ds-color-primary);border-style:dashed}.ds-dropzone-value[data-dropping][data-valid],.ds-dropzone-value[data-over][data-valid]{border-color:var(--ds-color-primary);background-color:var(--ds-color-primary-bg)}.ds-dropzone-value.ds-dropzone-value-multiple{padding:.625rem}.ds-dropzone-value.ds-dropzone-value-multiple .ds-tag{max-width:100%;flex-shrink:0;margin:0}:is(.ds-dropzone-value.ds-dropzone-value-multiple .ds-tag) .ds-tag-close-icon{flex-shrink:0}.ds-dropzone-value-icon{color:var(--ds-color-icon);font-size:1.5rem;flex-shrink:0}.ds-dropzone-value-text{color:var(--ds-color-text-secondary)}

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

@@ -1,84 +1,108 @@
 "use client";
-import { jsx as e, Fragment as u, jsxs as S } from "react/jsx-runtime";
-import { FileIcon as h, XIcon as j } from "@bioturing/assets";
-import { isEqual as w } from "es-toolkit";
-import { memo as E, forwardRef as F, useCallback as c, cloneElement as M } from "react";
-import { Stack as T } from "../stack/index.js";
-import { Tag as q } from "../tag/component.js";
-import { useCls as y } from "../utils/antdUtils.js";
-import { Truncate as B } from "../truncate/component.js";
-import { IconButton as X } from "../icon-button/component.js";
-function A({
-  value: o,
-  onChange: l,
-  multiple: s,
-  renderValueLabel: a,
-  renderValueIcon: p,
-  className: b,
-  style: z,
-  ...I
-}, N) {
-  const n = y(), i = c(
+import { jsx as o, jsxs as T, Fragment as R } from "react/jsx-runtime";
+import { FileIcon as h, XIcon as q } from "@bioturing/assets";
+import { isEqual as x } from "es-toolkit";
+import { memo as y, forwardRef as B, useState as X, useCallback as t, cloneElement as v } from "react";
+import { Stack as A } from "../stack/index.js";
+import D from "merge-refs";
+import { Tag as G } from "../tag/component.js";
+import { useCls as H } from "../utils/antdUtils.js";
+import { Truncate as J } from "../truncate/component.js";
+import { IconButton as K } from "../icon-button/component.js";
+function L({
+  value: s,
+  onChange: n,
+  multiple: l,
+  renderValueLabel: d,
+  renderValueIcon: f,
+  className: E,
+  style: N,
+  maxItems: m,
+  ...S
+}, k) {
+  const c = H(), [u, j] = X(null), w = t((r) => {
+    j(r);
+  }, []), i = t(
     (r) => {
-      const t = a(r);
-      return typeof t == "string" ? /* @__PURE__ */ e(B, { position: "middle", className: n("dropzone-value-label"), children: t }) : /* @__PURE__ */ e("span", { className: n("dropzone-value-label"), children: t });
+      const e = d(r);
+      return typeof e == "string" ? /* @__PURE__ */ o(
+        J,
+        {
+          position: "middle",
+          className: c("dropzone-value-label"),
+          container: u,
+          children: e
+        }
+      ) : /* @__PURE__ */ o("span", { className: c("dropzone-value-label"), children: e });
     },
-    [n, a]
-  ), m = c(
-    (r) => M(p(r) || /* @__PURE__ */ e(h, {}), {
-      className: n("dropzone-value-icon")
+    [c, u, d]
+  ), a = t(
+    (r) => v(f(r) || /* @__PURE__ */ o(h, {}), {
+      className: c("dropzone-value-icon")
     }),
-    [n, p]
-  ), d = c(
+    [c, f]
+  ), b = t(
     (r) => {
-      l(
-        o.filter((t) => !w(t, r))
+      n(
+        s.filter((e) => !x(e, r))
       );
     },
-    [l, o]
-  ), k = c(() => /* @__PURE__ */ e(u, { children: (o || []).map((r, t) => {
-    const R = i(r);
-    return /* @__PURE__ */ e(
-      q,
-      {
-        icon: m(r),
-        size: "large",
-        closable: !0,
-        onClose: () => d(r),
-        children: R
-      },
-      t
-    );
-  }) }), [i, o, m, d]), f = c(() => {
-    l == null || l(null);
-  }, [l]), x = c(() => {
-    const r = i(o);
-    return /* @__PURE__ */ S(u, { children: [
-      m(o),
-      r,
-      /* @__PURE__ */ e(X, { size: "small", onClick: f, children: /* @__PURE__ */ e(j, {}) })
-    ] });
-  }, [o, i, m, f]);
-  return /* @__PURE__ */ e(
-    T,
+    [n, s]
+  ), z = t(() => {
+    l ? n([]) : n == null || n(null);
+  }, [n, l]), p = t(
+    (r) => {
+      const e = i(r);
+      return /* @__PURE__ */ T(R, { children: [
+        a(r),
+        e,
+        /* @__PURE__ */ o(K, { size: "small", onClick: z, children: /* @__PURE__ */ o(q, {}) })
+      ] });
+    },
+    [i, a, z]
+  ), F = t(
+    (r) => m == 1 ? p(r[0]) : /* @__PURE__ */ o(R, { children: (r || []).map((e, I) => {
+      const M = i(e);
+      return /* @__PURE__ */ o(
+        G,
+        {
+          icon: a(e),
+          size: "large",
+          closable: !0,
+          onClose: () => b(e),
+          children: M
+        },
+        I
+      );
+    }) }),
+    [
+      i,
+      a,
+      m,
+      p,
+      b
+    ]
+  );
+  return /* @__PURE__ */ o(
+    A,
     {
-      ref: N,
-      gap: s ? 4 : 8,
+      ref: D(k, w),
+      gap: l ? 4 : 8,
       align: "center",
-      wrap: s,
-      className: n(
+      wrap: l && m !== 1,
+      className: c(
         "dropzone-value",
-        s && "dropzone-value-multiple",
-        b
+        l && "dropzone-value-multiple",
+        E
       ),
-      style: z,
-      ...I,
-      children: s ? k() : x()
+      style: N,
+      ...S,
+      children: l ? F(s) : p(s)
     }
   );
 }
-const U = E(F(A));
+const g = y(B(L));
 export {
-  U as Value
+  g 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 React, {\n  cloneElement,\n  forwardRef,\n  memo,\n  useCallback,\n  type ComponentPropsWithoutRef,\n  type ForwardedRef,\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\";\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    ...rest\n  }: DragDropValueProps<T, M> & ComponentPropsWithoutRef<\"div\">,\n  ref: ForwardedRef<HTMLDivElement>\n) {\n  const cls = useCls();\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\")}>\n          {label}\n        </Truncate>\n      ) : (\n        <span className={cls(\"dropzone-value-label\")}>{label}</span>\n      );\n    },\n    [cls, 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 renderMultiple = useCallback(() => {\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  }, [renderLabel, value, renderedValueIcon, handleResetMultiple]);\n\n  const handleResetSingle = useCallback(() => {\n    onChange?.(null);\n  }, [onChange]);\n\n  const renderSingle = useCallback(() => {\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  }, [value, renderLabel, renderedValueIcon, handleResetSingle]);\n\n  return (\n    <Stack\n      ref={ref}\n      gap={multiple ? 4 : 8}\n      align=\"center\"\n      wrap={multiple}\n      className={cls(\n        \"dropzone-value\",\n        multiple && \"dropzone-value-multiple\",\n        className\n      )}\n      style={style}\n      {...rest}\n    >\n      {multiple ? renderMultiple() : renderSingle()}\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","rest","ref","cls","useCls","renderLabel","useCallback","label","Truncate","jsx","renderedValueIcon","cloneElement","FileIcon","handleResetMultiple","singleValue","v","isEqual","renderMultiple","index","Tag","handleResetSingle","renderSingle","jsxs","Fragment","IconButton","XIcon","Stack","Value","memo","forwardRef"],"mappings":";;;;;;;;;;AAkBA,SAASA,EACP;AAAA,EACE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAMC,EAAO,GAEbC,IAAcC;AAAA,IAClB,CAACZ,MAAa;AACN,YAAAa,IAAQV,EAAiBH,CAAK;AACpC,aAAO,OAAOa,KAAU,6BACrBC,GAAS,EAAA,UAAS,UAAS,WAAWL,EAAI,sBAAsB,GAC9D,UAAAI,GACH,IAEC,gBAAAE,EAAA,QAAA,EAAK,WAAWN,EAAI,sBAAsB,GAAI,UAAMI,GAAA;AAAA,IAEzD;AAAA,IACA,CAACJ,GAAKN,CAAgB;AAAA,EACxB,GAEMa,IAAoBJ;AAAA,IACxB,CAACZ,MACQiB,EAAab,EAAgBJ,CAAK,KAAK,gBAAAe,EAACG,KAAS,GAAI;AAAA,MAC1D,WAAWT,EAAI,qBAAqB;AAAA,IAAA,CACrC;AAAA,IAEH,CAACA,GAAKL,CAAe;AAAA,EACvB,GAEMe,IAAsBP;AAAA,IAC1B,CAACQ,MAAmB;AACjB,MAAAnB;AAAA,QACED,EAAc,OAAO,CAACqB,MAAM,CAACC,EAAQD,GAAGD,CAAW,CAAC;AAAA,MACvD;AAAA,IACF;AAAA,IACA,CAACnB,GAAUD,CAAK;AAAA,EAClB,GAEMuB,IAAiBX,EAAY,6BAG1B,WAAiBZ,KAAA,CAAA,GAAI,IAAI,CAACoB,GAAaI,MAAU;AAC5C,UAAAX,IAAQF,EAAYS,CAAW;AAEnC,WAAA,gBAAAL;AAAA,MAACU;AAAA,MAAA;AAAA,QAEC,MAAMT,EAAkBI,CAAW;AAAA,QACnC,MAAK;AAAA,QACL,UAAQ;AAAA,QACR,SAAS,MAAMD,EAAoBC,CAAW;AAAA,QAE7C,UAAAP;AAAA,MAAA;AAAA,MANIW;AAAA,IAOP;AAAA,EAEH,CAAA,GACH,GAED,CAACb,GAAaX,GAAOgB,GAAmBG,CAAmB,CAAC,GAEzDO,IAAoBd,EAAY,MAAM;AAC1C,IAAAX,KAAA,QAAAA,EAAW;AAAA,EAAI,GACd,CAACA,CAAQ,CAAC,GAEP0B,IAAef,EAAY,MAAM;AAC/B,UAAAC,IAAQF,EAAYX,CAAU;AACpC,WAEK,gBAAA4B,EAAAC,GAAA,EAAA,UAAA;AAAA,MAAAb,EAAkBhB,CAAU;AAAA,MAC5Ba;AAAA,MACD,gBAAAE,EAACe,KAAW,MAAK,SAAQ,SAASJ,GAChC,UAAA,gBAAAX,EAACgB,IAAM,CAAA,EACT,CAAA;AAAA,IAAA,GACF;AAAA,KAED,CAAC/B,GAAOW,GAAaK,GAAmBU,CAAiB,CAAC;AAG3D,SAAA,gBAAAX;AAAA,IAACiB;AAAA,IAAA;AAAA,MACC,KAAAxB;AAAA,MACA,KAAKN,IAAW,IAAI;AAAA,MACpB,OAAM;AAAA,MACN,MAAMA;AAAA,MACN,WAAWO;AAAA,QACT;AAAA,QACAP,KAAY;AAAA,QACZG;AAAA,MACF;AAAA,MACA,OAAAC;AAAA,MACC,GAAGC;AAAA,MAEH,UAAAL,IAAWqB,EAAe,IAAII,EAAa;AAAA,IAAA;AAAA,EAC9C;AAEJ;AAEO,MAAMM,IAAQC,EAAKC,EAAWpC,CAAU,CAAC;"}
+{"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":";;;;;;;;;;;AAmBA,SAASA,EACP;AAAA,EACE,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,GACA;AACA,QAAMC,IAAMC,EAAO,GAGb,CAACC,GAAaC,CAAc,IAAIC,EAAyB,IAAI,GAC7DC,IAAeC,EAAY,CAACC,MAA8B;AAC9D,IAAAJ,EAAeI,CAAE;AAAA,EACnB,GAAG,EAAE,GAECC,IAAcF;AAAA,IAClB,CAAChB,MAAa;AACN,YAAAmB,IAAQhB,EAAiBH,CAAK;AAC7B,aAAA,OAAOmB,KAAU,WACtB,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACC,UAAS;AAAA,UACT,WAAWX,EAAI,sBAAsB;AAAA,UACrC,WAAWE;AAAA,UAEV,UAAAO;AAAA,QAAA;AAAA,MAAA,IAGF,gBAAAC,EAAA,QAAA,EAAK,WAAWV,EAAI,sBAAsB,GAAI,UAAMS,GAAA;AAAA,IAEzD;AAAA,IACA,CAACT,GAAKE,GAAaT,CAAgB;AAAA,EACrC,GAEMmB,IAAoBN;AAAA,IACxB,CAAChB,MACQuB,EAAanB,EAAgBJ,CAAK,KAAK,gBAAAoB,EAACI,KAAS,GAAI;AAAA,MAC1D,WAAWd,EAAI,qBAAqB;AAAA,IAAA,CACrC;AAAA,IAEH,CAACA,GAAKN,CAAe;AAAA,EACvB,GAEMqB,IAAsBT;AAAA,IAC1B,CAACU,MAAmB;AACjB,MAAAzB;AAAA,QACED,EAAc,OAAO,CAAC2B,MAAM,CAACC,EAAQD,GAAGD,CAAW,CAAC;AAAA,MACvD;AAAA,IACF;AAAA,IACA,CAACzB,GAAUD,CAAK;AAAA,EAClB,GAEM6B,IAAoBb,EAAY,MAAM;AAC1C,IAAId,IACDD,EAAkC,CAAA,CAAS,IAE5CA,KAAA,QAAAA,EAAW;AAAA,EACb,GACC,CAACA,GAAUC,CAAQ,CAAC,GAEjB4B,IAAed;AAAA,IACnB,CAAChB,MAAa;AACN,YAAAmB,IAAQD,EAAYlB,CAAU;AACpC,aAEK,gBAAA+B,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAAV,EAAkBtB,CAAU;AAAA,QAC5BmB;AAAA,QACD,gBAAAC,EAACa,KAAW,MAAK,SAAQ,SAASJ,GAChC,UAAA,gBAAAT,EAACc,IAAM,CAAA,EACT,CAAA;AAAA,MAAA,GACF;AAAA,IAEJ;AAAA,IACA,CAAChB,GAAaI,GAAmBO,CAAiB;AAAA,EACpD,GAEMM,IAAiBnB;AAAA,IACrB,CAAChB,MACKO,KAAY,IACPuB,EAAa9B,EAAM,CAAC,CAAC,IAG5B,gBAAAoB,EAAAY,GAAA,EACK,WAAAhC,KAAiB,CAAA,GAAI,IAAI,CAAC0B,GAAaU,MAAU;AAC5C,YAAAjB,IAAQD,EAAYQ,CAAW;AAEnC,aAAA,gBAAAN;AAAA,QAACiB;AAAA,QAAA;AAAA,UAEC,MAAMf,EAAkBI,CAAW;AAAA,UACnC,MAAK;AAAA,UACL,UAAQ;AAAA,UACR,SAAS,MAAMD,EAAoBC,CAAW;AAAA,UAE7C,UAAAP;AAAA,QAAA;AAAA,QANIiB;AAAA,MAOP;AAAA,IAEH,CAAA,GACH;AAAA,IAGJ;AAAA,MACElB;AAAA,MACAI;AAAA,MACAf;AAAA,MACAuB;AAAA,MACAL;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAA,gBAAAL;AAAA,IAACkB;AAAA,IAAA;AAAA,MACC,KAAKC,EAAU9B,GAAKM,CAAY;AAAA,MAChC,KAAKb,IAAW,IAAI;AAAA,MACpB,OAAM;AAAA,MACN,MAAMA,KAAYK,MAAa;AAAA,MAC/B,WAAWG;AAAA,QACT;AAAA,QACAR,KAAY;AAAA,QACZG;AAAA,MACF;AAAA,MACA,OAAAC;AAAA,MACC,GAAGE;AAAA,MAEH,UAAWN,IAAAiC,EAAenC,CAAY,IAAI8B,EAAa9B,CAAU;AAAA,IAAA;AAAA,EACpE;AAEJ;AAEO,MAAMwC,IAAQC,EAAKC,EAAW3C,CAAU,CAAC;"}

package/dist/components/form/component.js

@@ -6,19 +6,21 @@ import s from "antd/es/form/FormList";
 import { FormProvider as n } from "antd/es/form/context";
 import p from "antd/es/form/hooks/useFormInstance";
 import { FormItem as F } from "./item.js";
+import { FormLabel as f } from "./label.js";
 import './style.css';/* empty css          */
-const f = ({
+const a = ({
   ...r
-}) => /* @__PURE__ */ o(t, { ...r }), v = Object.assign(f, {
+}) => /* @__PURE__ */ o(t, { ...r }), x = Object.assign(a, {
   useForm: i,
   useFormInstance: p,
   useWatch: e,
   Item: F,
   List: s,
   ErrorList: m,
-  Provider: n
+  Provider: n,
+  Label: f
 });
 export {
-  v as Form
+  x as Form
 };
 //# sourceMappingURL=component.js.map

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\";\nimport { FormLabel } from \"./label\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface FormProps<Values = unknown> extends AntdFormProps<Values> {}\n\ninterface InternalFormProps<Values = unknown>\n  extends React.ComponentProps<typeof AntdInternalForm<Values>> {}\n\nconst InternalForm = <Values = unknown,>({\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  Label: FormLabel,\n});\n\nexport type { FormItemProps };\n"],"names":["InternalForm","rest","jsx","AntdInternalForm","Form","useForm","useFormInstance","useWatch","FormItem","FormList","ErrorList","FormProvider","FormLabel"],"mappings":";;;;;;;;;;AAuBA,MAAMA,IAAe,CAAoB;AAAA,EACvC,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;AAAA,EACV,OAAOC;AACT,CAAC;"}

package/dist/components/form/item.js

@@ -1,45 +1,30 @@
 "use client";
-import { jsx as e } from "react/jsx-runtime";
-import { useMemo as i, isValidElement as a } from "react";
-import c from "antd/es/form/FormItem";
-import { QuestionIcon as f } from "@bioturing/assets";
-import { useCls as p } from "../utils/antdUtils.js";
-import { IconButton as d } from "../icon-button/component.js";
-const y = ({
+import { jsx as r } from "react/jsx-runtime";
+import p from "antd/es/form/FormItem";
+import { FormLabel as s } from "./label.js";
+const f = ({
   tooltip: m,
-  label: r,
-  optionalMark: s,
-  requiredMark: o = !0,
-  ...t
-}) => {
-  const n = p(), l = i(
-    () => r ? /* @__PURE__ */ e(
-      "span",
+  label: o,
+  optionalMark: t,
+  requiredMark: e = !0,
+  ...n
+}) => /* @__PURE__ */ r(
+  p,
+  {
+    label: /* @__PURE__ */ r(
+      s,
       {
-        className: n(
-          "form-item-label-inner",
-          o && "form-item-label-with-required-mark"
-        ),
-        children: [
-          r,
-          m && /* @__PURE__ */ e(
-            d,
-            {
-              className: n("form-item-explaination-icon"),
-              label: typeof m == "string" || a(m) ? m : void 0,
-              children: /* @__PURE__ */ e(f, {})
-            }
-          ),
-          s && /* @__PURE__ */ e("span", { className: n("form-item-label-optional-mark"), children: typeof s == "boolean" ? "(optional)" : s }),
-          o !== !1 && /* @__PURE__ */ e("span", { className: n("form-item-label-required-mark"), children: typeof o == "boolean" ? "*" : o })
-        ]
+        label: o,
+        tooltip: m,
+        optionalMark: t,
+        requiredMark: e,
+        as: "span"
       }
-    ) : void 0,
-    [r, m, s, o, n]
-  );
-  return /* @__PURE__ */ e(c, { label: l, ...t });
-};
+    ),
+    ...n
+  }
+);
 export {
-  y as FormItem
+  f as FormItem
 };
 //# sourceMappingURL=item.js.map

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, useMemo } from \"react\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { QuestionIcon } from \"@bioturing/assets\";\nimport { IconButton } from \"../icon-button\";\nimport { useCls } from \"../utils\";\n\nexport interface FormItemProps<Values = unknown>\n  extends AntdFormItemProps<Values> {\n  // tooltip?: React.ReactNode | TooltipProps;\n  /**\n   * Whether the field is optional. If true, the label will be marked as optional.\n   * @default false\n   */\n  optionalMark?: boolean | React.ReactNode;\n  /**\n   * Whether show the asterisk when the field is required\n   * @default true\n   */\n  requiredMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n  tooltip,\n  label,\n  optionalMark,\n  requiredMark = true,\n  ...rest\n}: FormItemProps<Values>) => {\n  const cls = useCls();\n\n  // requiredMark is used in the className below\n  const renderedLabel = useMemo(\n    () =>\n      label ? (\n        <span\n          className={cls(\n            \"form-item-label-inner\",\n            requiredMark && \"form-item-label-with-required-mark\"\n          )}\n        >\n          {[\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                <QuestionIcon />\n              </IconButton>\n            ),\n            optionalMark && (\n              <span className={cls(\"form-item-label-optional-mark\")}>\n                {typeof optionalMark == \"boolean\" ? \"(optional)\" : optionalMark}\n              </span>\n            ),\n            requiredMark !== false && (\n              <span className={cls(\"form-item-label-required-mark\")}>\n                {typeof requiredMark == \"boolean\" ? \"*\" : requiredMark}\n              </span>\n            ),\n          ]}\n        </span>\n      ) : undefined,\n    [label, tooltip, optionalMark, requiredMark, cls]\n  );\n\n  return <AntdFormItem label={renderedLabel} {...rest} />;\n};\n"],"names":["FormItem","tooltip","label","optionalMark","requiredMark","rest","cls","useCls","renderedLabel","useMemo","jsx","IconButton","isValidElement","QuestionIcon","AntdFormItem"],"mappings":";;;;;;;AAyBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,GAAGC;AACL,MAA6B;AAC3B,QAAMC,IAAMC,EAAO,GAGbC,IAAgBC;AAAA,IACpB,MACEP,IACE,gBAAAQ;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAWJ;AAAA,UACT;AAAA,UACAF,KAAgB;AAAA,QAClB;AAAA,QAEC,UAAA;AAAA,UACCF;AAAA,UACAD,KACE,gBAAAS;AAAA,YAACC;AAAA,YAAA;AAAA,cACC,WAAWL,EAAI,6BAA6B;AAAA,cAC5C,OACE,OAAOL,KAAW,YAAYW,EAAeX,CAAO,IAChDA,IACA;AAAA,cAGN,4BAACY,GAAa,CAAA,CAAA;AAAA,YAAA;AAAA,UAChB;AAAA,UAEFV,KACG,gBAAAO,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAH,KAAgB,YAAY,eAAeA,EACrD,CAAA;AAAA,UAEFC,MAAiB,MACd,gBAAAM,EAAA,QAAA,EAAK,WAAWJ,EAAI,+BAA+B,GACjD,UAAO,OAAAF,KAAgB,YAAY,MAAMA,EAC5C,CAAA;AAAA,QAAA;AAAA,MAEJ;AAAA,IAAA,IAEA;AAAA,IACN,CAACF,GAAOD,GAASE,GAAcC,GAAcE,CAAG;AAAA,EAClD;AAEA,SAAQ,gBAAAI,EAAAI,GAAA,EAAa,OAAON,GAAgB,GAAGH,GAAM;AACvD;"}
+{"version":3,"file":"item.js","sources":["../../../src/components/form/item.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntdFormItem,\n  type FormItemProps as AntdFormItemProps,\n} from \"antd/es/form/FormItem\";\nimport { FormLabel } from \"./label\";\n\nexport interface FormItemProps<Values = unknown>\n  extends AntdFormItemProps<Values> {\n  // tooltip?: React.ReactNode | TooltipProps;\n  /**\n   * Whether the field is optional. If true, the label will be marked as optional.\n   * @default false\n   */\n  optionalMark?: boolean | React.ReactNode;\n  /**\n   * Whether show the asterisk when the field is required\n   * @default true\n   */\n  requiredMark?: boolean | React.ReactNode;\n}\n\nexport const FormItem = <Values = unknown,>({\n  tooltip,\n  label,\n  optionalMark,\n  requiredMark = true,\n  ...rest\n}: FormItemProps<Values>) => {\n  return (\n    <AntdFormItem\n      label={\n        <FormLabel\n          label={label}\n          tooltip={tooltip}\n          optionalMark={optionalMark}\n          requiredMark={requiredMark}\n          as=\"span\"\n        />\n      }\n      {...rest}\n    />\n  );\n};\n"],"names":["FormItem","tooltip","label","optionalMark","requiredMark","rest","jsx","AntdFormItem","FormLabel"],"mappings":";;;;AAsBO,MAAMA,IAAW,CAAoB;AAAA,EAC1C,SAAAC;AAAA,EACA,OAAAC;AAAA,EACA,cAAAC;AAAA,EACA,cAAAC,IAAe;AAAA,EACf,GAAGC;AACL,MAEI,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,OACE,gBAAAD;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,OAAAN;AAAA,QACA,SAAAD;AAAA,QACA,cAAAE;AAAA,QACA,cAAAC;AAAA,QACA,IAAG;AAAA,MAAA;AAAA,IACL;AAAA,IAED,GAAGC;AAAA,EAAA;AACN;"}