@bioturing/components 0.17.1 → 0.18.0

package/dist/components/ColorSelect/component.js

@@ -1,138 +1,227 @@
 "use client";
-import { jsx as a, jsxs as P } from "react/jsx-runtime";
-import { forwardRef as q, useState as V, useRef as U, useCallback as v, useMemo as b } from "react";
-import W from "antd/es/color-picker";
-import { Stack as z } from "../Stack/index.js";
+import { jsx as f, jsxs as Q } from "react/jsx-runtime";
+import { forwardRef as Z, useState as w, useRef as I, useCallback as c, useEffect as L, useMemo as j } from "react";
+import _ from "antd/es/color-picker";
+import { Stack as ee } from "../Stack/index.js";
+import te from "merge-refs";
 import './style.css';/* empty css          */
-import { isValidHexColor as F } from "../utils/colors.js";
-import { toast as G } from "../Toast/function.js";
-import { Tag as J } from "../Tag/component.js";
-import { useCls as L } from "../utils/antdUtils.js";
-import { useControlledState as I } from "../hooks/useControlledState.js";
-import { Tooltip as Q } from "../Tooltip/component.js";
-const X = ({
-  className: Z,
-  value: K,
-  defaultValue: M,
-  onChange: i,
-  colorPickerProps: w,
-  presetColors: m,
-  open: R,
-  onOpenChange: u,
-  defaultOpen: T,
-  ...j
-}, y) => {
-  const l = L(), [s, n] = I(
-    K,
-    i,
-    M
-  ), [r, f] = V(""), [C, d] = V(""), [g, o] = I(
-    R,
-    u,
-    T
-  ), [B, h] = V(!1), k = U(null), x = v(() => {
-    const t = r.trim().split(/[;,\s]+/).filter(Boolean).map(
-      (p) => p.trim().toUpperCase()
-    ), c = [], A = t.reduce((p, S) => (F(S, !0) ? p.push(S) : c.push(S), p), []);
-    c.length && G(`Invalid colors: ${c.join(", ")}`);
-    const E = /* @__PURE__ */ new Set([...s, ...A]);
-    i && i([...E]), u && u(!1), f(""), d(""), o(!1), requestAnimationFrame(() => {
-      o(!0);
+import { moveTypingCursorToEnd as oe } from "../utils/selectionRange.js";
+import { isValidHexColor as R } from "../utils/colors.js";
+import { toast as ne } from "../Toast/function.js";
+import { useCls as re } from "../utils/antdUtils.js";
+import { useControlledState as $ } from "../hooks/useControlledState.js";
+import { Tooltip as se } from "../Tooltip/component.js";
+import { Tag as le } from "../Tag/component.js";
+const ce = ({
+  className: ue,
+  value: q,
+  defaultValue: O,
+  onChange: g,
+  colorPickerProps: F,
+  presetColors: P,
+  open: U,
+  onOpenChange: h,
+  defaultOpen: W,
+  ...X
+}, N) => {
+  const a = re(), [s, u] = $(
+    q,
+    g,
+    O
+  ), [C, S] = w(null), [i, D] = w(""), [E, M] = w(""), [k, r] = $(
+    U,
+    h,
+    W
+  ), [Y, T] = w(!1), y = I(null), d = I(null), z = I(!1), x = I({
+    x: 0,
+    y: 0
+  }), v = c(() => {
+    var e;
+    z.current = !0, (e = d.current) == null || e.focus(), oe(d.current);
+  }, []), b = c(() => {
+    r(!1), v();
+  }, [r, v]);
+  L(() => {
+    if (!k) return;
+    const e = (t) => {
+      var o;
+      (o = y.current) != null && o.contains(t.target) || d.current && !d.current.isEqualNode(t.target) && b();
+    };
+    return document.addEventListener("click", e), () => document.removeEventListener("click", e);
+  }, [k, b]), L(() => {
+    const e = (t) => {
+      x.current = {
+        x: t.clientX,
+        y: t.clientY
+      };
+    };
+    return document.addEventListener("mousemove", e), () => {
+      document.removeEventListener("mousemove", e);
+    };
+  }, []);
+  const A = c(() => {
+    const t = i.trim().split(/[;,\s]+/).filter(Boolean).map(
+      (l) => l.trim().toUpperCase()
+    ), o = [], n = t.reduce((l, m) => (R(m, !0) ? l.push(m) : o.push(m), l), []);
+    o.length && ne(`Invalid colors: ${o.join(", ")}`);
+    const p = /* @__PURE__ */ new Set([...s, ...n]);
+    g && g([...p]), h && h(!1), D(""), M(""), r(!1), requestAnimationFrame(() => {
+      r(!0);
     });
-  }, [r, s, i, u, o]), D = v(
+  }, [i, s, g, h, r]), B = c(
     (e) => {
-      e.key === "Enter" && x(), e.key === "Backspace" && !r && (e.ctrlKey || e.metaKey ? n([]) : n(s.slice(0, -1)));
+      e.key === "Enter" && A(), e.key === "Backspace" && !i && (e.ctrlKey || e.metaKey ? u([]) : u(s.slice(0, -1)));
     },
-    [x, r, s, n]
-  ), H = b(
-    () => s.map((e, t) => /* @__PURE__ */ a(Q, { title: e, children: /* @__PURE__ */ a(
-      J,
-      {
-        className: l("color-select-tag"),
-        closable: !0,
-        onClose: () => n(s.filter((c) => c !== e)),
-        icon: /* @__PURE__ */ a(
-          "span",
-          {
-            className: l("color-select-swatch"),
-            style: { backgroundColor: e }
-          }
-        )
-      }
-    ) }, `${e}-${t}`)),
-    [s, l, n]
-  ), N = v(
+    [A, i, s, u]
+  ), H = c(
+    (e) => {
+      e.preventDefault(), e.stopPropagation();
+    },
+    []
+  ), K = c(
     (e) => {
       e.preventDefault();
     },
     []
-  ), $ = b(
-    () => /* @__PURE__ */ a(
-      W,
+  ), V = c(
+    ({
+      open: e,
+      child: t,
+      value: o,
+      onChange: n,
+      onOpenChange: p
+    }) => /* @__PURE__ */ f(
+      _,
       {
-        value: C,
-        onChange: (e) => {
-          d(e.toHexString()), f(e.toHexString());
-        },
-        open: g,
+        value: o,
+        onChange: n,
+        open: e,
+        onOpenChange: p,
         arrow: !1,
-        presets: m ? [{ label: "Preset Colors", colors: m }] : void 0,
-        ...w,
-        panelRender: (e) => /* @__PURE__ */ a("div", { ref: k, onMouseDown: N, children: e }),
-        children: /* @__PURE__ */ a(
-          "input",
+        presets: P ? [{ label: "Preset Colors", colors: P }] : void 0,
+        ...F,
+        panelRender: (l) => /* @__PURE__ */ f(
+          "div",
           {
-            placeholder: "Select or enter a color list",
-            className: l("color-select-input"),
-            value: r,
-            type: "text",
-            ref: y,
-            onChange: (e) => {
-              const t = e.target.value;
-              f(t), F(t, !0) && d(t), t.length > 7 || t.length == 7 && !t.startsWith("#") ? o(!1) : o(!0);
-            },
-            onKeyDown: D,
-            onFocus: () => {
-              h(!0), o(!0);
+            ref: (m) => {
+              m && (y.current = m);
             },
-            onBlur: () => {
-              h(!1), o(!1);
-            }
+            onMouseDown: H,
+            onMouseDownCapture: K,
+            children: l
           }
-        )
+        ),
+        children: t
       }
     ),
     [
+      P,
+      F,
+      H,
+      K
+    ]
+  ), G = j(
+    () => s.map((e, t) => {
+      const o = /* @__PURE__ */ f(se, { title: e, children: /* @__PURE__ */ f(
+        le,
+        {
+          className: a("color-select-tag"),
+          closable: !0,
+          onClose: () => u(s.filter((n) => n !== e)),
+          icon: /* @__PURE__ */ f(
+            "span",
+            {
+              className: a("color-select-swatch"),
+              style: { backgroundColor: e }
+            }
+          ),
+          onClick: () => S(C === t ? null : t)
+        }
+      ) }, `${e}-${t}`);
+      return V({
+        child: o,
+        open: C !== null && C === t,
+        value: s[t],
+        onChange: (n) => {
+          u(
+            s.map((p, l) => l === t ? n.toHexString() : p)
+          );
+        },
+        onOpenChange: (n) => {
+          S(n ? t : null);
+        }
+      });
+    }),
+    [
+      s,
+      a,
+      u,
       C,
-      g,
-      m,
-      w,
-      r,
-      l,
-      y,
-      D,
-      h,
-      o,
-      N,
-      k
+      S,
+      V
     ]
-  );
-  return /* @__PURE__ */ P(
-    z,
+  ), J = j(() => V({
+    child: /* @__PURE__ */ f(
+      "input",
+      {
+        placeholder: "Select or enter a color list",
+        className: a("color-select-input"),
+        value: i,
+        type: "text",
+        ref: te(N, d),
+        onChange: (e) => {
+          const t = e.target.value;
+          D(t), R(t, !0) && M(t), t.length > 7 || t.length == 7 && !t.startsWith("#") ? r(!1) : r(!0);
+        },
+        onKeyDown: B,
+        onFocus: (e) => {
+          T(!0), r(!0);
+        },
+        onBlur: (e) => {
+          if (y.current) {
+            const t = y.current.getBoundingClientRect(), { x: o, y: n } = x.current;
+            if (o >= t.left && o <= t.right && n >= t.top && n <= t.bottom) {
+              e.preventDefault(), e.stopPropagation(), R(E) && v();
+              return;
+            }
+          }
+          T(!1), r(!1);
+        }
+      }
+    ),
+    value: E,
+    onChange: (e) => {
+      M(e.toHexString()), D(e.toHexString()), v();
+    },
+    open: k
+  }), [
+    a,
+    E,
+    B,
+    N,
+    V,
+    i,
+    r,
+    k,
+    v,
+    x
+  ]);
+  return /* @__PURE__ */ Q(
+    ee,
     {
       wrap: !0,
       gap: 4,
-      className: l("color-select"),
-      "data-focus": B || void 0,
-      ...j,
+      className: a("color-select"),
+      "data-focus": Y || void 0,
+      ...X,
       children: [
-        H,
-        $
+        G,
+        J
       ]
     }
   );
-}, Y = q(X), ie = Y;
+}, ae = Z(ce), we = ae;
 export {
-  ie as ColorSelect
+  we as ColorSelect
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/ColorSelect/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useRef,\n  useState,\n  useCallback,\n  useMemo,\n} from \"react\";\nimport ColorPicker from \"antd/es/color-picker\";\nimport { type ColorPickerProps } from \"antd/es/color-picker\";\nimport { useCls, isValidHexColor } from \"../utils\";\nimport { useControlledState } from \"../hooks\";\nimport { Tag } from \"../Tag\";\nimport { Stack } from \"../Stack\";\nimport { toast } from \"../Toast\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { Tooltip } from \"../Tooltip\";\n\n/**\n * Props for the ColorSelect component.\n */\nexport interface ColorSelectProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Controlled list of selected hex colors */\n  value?: string[];\n  /** Default list of selected hex colors for uncontrolled usage */\n  defaultValue?: string[];\n  /** Callback invoked when selected colors change */\n  onChange?: (value: string[]) => void;\n  /** Props to pass through to the Ant Design ColorPicker, excluding value/onChange/onChangeComplete */\n  colorPickerProps?: Omit<\n    ColorPickerProps,\n    \"value\" | \"onChange\" | \"onChangeComplete\"\n  >;\n  /** Preset color swatches displayed in the picker */\n  presetColors?: string[];\n  /** Controlled open state of the ColorPicker dropdown */\n  open?: boolean;\n  /** Callback invoked when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Default open state for uncontrolled usage */\n  defaultOpen?: boolean;\n}\n\n/**\n * ColorSelectInner - Combines an input and Ant Design ColorPicker for selecting multiple colors.\n * Supports preset color swatches and freeform hex entry, displaying selections as tags.\n * Controlled/uncontrolled APIs for `value` and `open`, emitting invalid input notifications via toast.\n * @param props - {@link ColorSelectProps}\n * @param ref - ref to the input element\n * @returns JSX.Element\n */\nconst ColorSelectInner = (\n  {\n    className,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    colorPickerProps,\n    presetColors,\n    open: openProp,\n    onOpenChange,\n    defaultOpen,\n    ...rest\n  },\n  ref: React.Ref<React.ComponentRef<\"input\">>\n) => {\n  const cls = useCls();\n  const [value, setValue] = useControlledState<string[]>(\n    valueProp,\n    onChange,\n    defaultValue\n  );\n  const [searchValue, setSearchValue] = useState(\"\");\n  const [tmpValue, setTmpValue] = useState(\"\");\n  const [open, setOpen] = useControlledState<boolean>(\n    openProp,\n    onOpenChange,\n    defaultOpen\n  );\n\n  const [isFocus, setIsFocus] = useState(false);\n\n  const popupRef = useRef<HTMLDivElement>(null);\n\n  const onEnter = useCallback(() => {\n    const searchValueSplit = searchValue\n      .trim()\n      .split(/[;,\\s]+/)\n      .filter(Boolean);\n    const addedValues = searchValueSplit.map((gene) =>\n      gene.trim().toUpperCase()\n    );\n    const inValidValues: string[] = [];\n    const validAddedValues = addedValues.reduce((acc, curr) => {\n      if (!isValidHexColor(curr, true)) {\n        inValidValues.push(curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, [] as string[]);\n    if (inValidValues.length) {\n      toast(`Invalid colors: ${inValidValues.join(\", \")}`);\n    }\n    const newColors = new Set([...value, ...validAddedValues]);\n    if (onChange) onChange([...newColors]);\n    if (onOpenChange) onOpenChange(false);\n    setSearchValue(\"\");\n    setTmpValue(\"\");\n    setOpen(false);\n    requestAnimationFrame(() => {\n      setOpen(true);\n    });\n  }, [searchValue, value, onChange, onOpenChange, setOpen]);\n\n  const onInputKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\") onEnter();\n      if (e.key === \"Backspace\" && !searchValue) {\n        if (e.ctrlKey || e.metaKey) {\n          setValue([]);\n        } else {\n          setValue(value.slice(0, -1));\n        }\n      }\n    },\n    [onEnter, searchValue, value, setValue]\n  );\n\n  const renderedTags = useMemo(\n    () =>\n      value.map((color, index) => (\n        <Tooltip title={color} key={`${color}-${index}`}>\n          <Tag\n            className={cls(\"color-select-tag\")}\n            closable\n            onClose={() => setValue(value.filter((v) => v !== color))}\n            icon={\n              <span\n                className={cls(\"color-select-swatch\")}\n                style={{ backgroundColor: color }}\n              />\n            }\n          />\n        </Tooltip>\n      )),\n    [value, cls, setValue]\n  );\n\n  const handlePopupMouseDown = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      // Prevent input blur when clicking popup\n      e.preventDefault();\n    },\n    []\n  );\n\n  const renderedColorPicker = useMemo(\n    () => (\n      <ColorPicker\n        value={tmpValue}\n        onChange={(color) => {\n          // setValue([...value, color]);\n          setTmpValue(color.toHexString());\n          setSearchValue(color.toHexString());\n        }}\n        open={open}\n        arrow={false}\n        presets={\n          presetColors\n            ? [{ label: \"Preset Colors\", colors: presetColors }]\n            : undefined\n        }\n        {...colorPickerProps}\n        panelRender={(panel) => (\n          <div ref={popupRef} onMouseDown={handlePopupMouseDown}>\n            {panel}\n          </div>\n        )}\n      >\n        <input\n          placeholder=\"Select or enter a color list\"\n          className={cls(\"color-select-input\")}\n          value={searchValue}\n          type=\"text\"\n          ref={ref}\n          onChange={(e) => {\n            const currValue = e.target.value;\n            setSearchValue(currValue);\n            if (isValidHexColor(currValue, true)) setTmpValue(currValue);\n            if (\n              currValue.length > 7 ||\n              (currValue.length == 7 && !currValue.startsWith(\"#\"))\n            ) {\n              setOpen(false);\n            } else {\n              setOpen(true);\n            }\n          }}\n          onKeyDown={onInputKeyDown}\n          onFocus={() => {\n            setIsFocus(true);\n            setOpen(true);\n          }}\n          onBlur={() => {\n            // Check if the new focus target is inside the popup\n            setIsFocus(false);\n            setOpen(false);\n          }}\n        />\n      </ColorPicker>\n    ),\n    [\n      tmpValue,\n      open,\n      presetColors,\n      colorPickerProps,\n      searchValue,\n      cls,\n      ref,\n      onInputKeyDown,\n      setIsFocus,\n      setOpen,\n      handlePopupMouseDown,\n      popupRef,\n    ]\n  );\n\n  return (\n    <Stack\n      wrap\n      gap={4}\n      className={cls(\"color-select\")}\n      data-focus={isFocus || undefined}\n      {...rest}\n    >\n      {renderedTags}\n      {renderedColorPicker}\n    </Stack>\n  );\n};\n\n// Use forwardRef with type assertion\nconst MainColorSelect = forwardRef(ColorSelectInner);\n\nexport const ColorSelect = MainColorSelect;\n"],"names":["ColorSelectInner","className","valueProp","defaultValue","onChange","colorPickerProps","presetColors","openProp","onOpenChange","defaultOpen","rest","ref","cls","useCls","value","setValue","useControlledState","searchValue","setSearchValue","useState","tmpValue","setTmpValue","open","setOpen","isFocus","setIsFocus","popupRef","useRef","onEnter","useCallback","addedValues","gene","inValidValues","validAddedValues","acc","curr","isValidHexColor","toast","newColors","onInputKeyDown","renderedTags","useMemo","color","index","jsx","Tooltip","Tag","v","handlePopupMouseDown","renderedColorPicker","ColorPicker","panel","currValue","jsxs","Stack","MainColorSelect","forwardRef","ColorSelect"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/ColorSelect/component.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  ComponentPropsWithoutRef,\n  forwardRef,\n  useRef,\n  useState,\n  useCallback,\n  useMemo,\n  useEffect,\n} from \"react\";\nimport ColorPicker from \"antd/es/color-picker\";\nimport { type ColorPickerProps, type Color } from \"antd/es/color-picker\";\nimport { useCls, isValidHexColor } from \"../utils\";\nimport { useControlledState } from \"../hooks\";\nimport { Tag } from \"../Tag\";\nimport { Stack } from \"../Stack\";\nimport { toast } from \"../Toast\";\nimport mergeRefs from \"merge-refs\";\nimport { moveTypingCursorToEnd } from \"../utils/client\";\n\n// Import component-specific styles\nimport \"./style.css\";\nimport { Tooltip } from \"../Tooltip\";\n\n/**\n * Props for the ColorSelect component.\n */\nexport interface ColorSelectProps\n  extends Omit<ComponentPropsWithoutRef<\"div\">, \"onChange\"> {\n  /** Controlled list of selected hex colors */\n  value?: string[];\n  /** Default list of selected hex colors for uncontrolled usage */\n  defaultValue?: string[];\n  /** Callback invoked when selected colors change */\n  onChange?: (value: string[]) => void;\n  /** Props to pass through to the Ant Design ColorPicker, excluding value/onChange/onChangeComplete */\n  colorPickerProps?: Omit<\n    ColorPickerProps,\n    \"value\" | \"onChange\" | \"onChangeComplete\"\n  >;\n  /** Preset color swatches displayed in the picker */\n  presetColors?: string[];\n  /** Controlled open state of the ColorPicker dropdown */\n  open?: boolean;\n  /** Callback invoked when open state changes */\n  onOpenChange?: (open: boolean) => void;\n  /** Default open state for uncontrolled usage */\n  defaultOpen?: boolean;\n}\n\n/**\n * ColorSelectInner - Combines an input and Ant Design ColorPicker for selecting multiple colors.\n * Supports preset color swatches and freeform hex entry, displaying selections as tags.\n * Controlled/uncontrolled APIs for `value` and `open`, emitting invalid input notifications via toast.\n * @param props - {@link ColorSelectProps}\n * @param ref - ref to the input element\n * @returns JSX.Element\n */\nconst ColorSelectInner = (\n  {\n    className,\n    value: valueProp,\n    defaultValue,\n    onChange,\n    colorPickerProps,\n    presetColors,\n    open: openProp,\n    onOpenChange,\n    defaultOpen,\n    ...rest\n  },\n  ref: React.Ref<React.ComponentRef<\"input\">>\n) => {\n  const cls = useCls();\n  const [value, setValue] = useControlledState<string[]>(\n    valueProp,\n    onChange,\n    defaultValue\n  );\n  const [activeColorIndex, setActiveColorIndex] = useState<number | null>(null);\n  const [searchValue, setSearchValue] = useState(\"\");\n  const [tmpValue, setTmpValue] = useState(\"\");\n  const [open, setOpen] = useControlledState<boolean>(\n    openProp,\n    onOpenChange,\n    defaultOpen\n  );\n\n  const [isFocus, setIsFocus] = useState(false);\n\n  const popupRef = useRef<HTMLDivElement>(null);\n\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  const isFocusedProgramatically = useRef(false);\n\n  const mousePosition = useRef({\n    x: 0,\n    y: 0,\n  });\n\n  const focusInput = useCallback(() => {\n    isFocusedProgramatically.current = true;\n    inputRef.current?.focus();\n    moveTypingCursorToEnd(inputRef.current);\n  }, []);\n\n  const closeAndFocus = useCallback(() => {\n    setOpen(false);\n    focusInput();\n  }, [setOpen, focusInput]);\n\n  useEffect(() => {\n    if (!open) return;\n    const handler = (event: MouseEvent) => {\n      if (!popupRef.current?.contains(event.target as Node)) {\n        if (\n          inputRef.current &&\n          !inputRef.current.isEqualNode(event.target as Node)\n        ) {\n          closeAndFocus();\n        }\n      }\n    };\n    document.addEventListener(\"click\", handler);\n\n    // Return cleanup function\n    return () => document.removeEventListener(\"click\", handler);\n  }, [open, closeAndFocus]);\n\n  useEffect(() => {\n    const handleMouseMove = (e: MouseEvent) => {\n      mousePosition.current = {\n        x: e.clientX,\n        y: e.clientY,\n      };\n    };\n    document.addEventListener(\"mousemove\", handleMouseMove);\n    return () => {\n      document.removeEventListener(\"mousemove\", handleMouseMove);\n    };\n  }, []);\n\n  const onEnter = useCallback(() => {\n    const searchValueSplit = searchValue\n      .trim()\n      .split(/[;,\\s]+/)\n      .filter(Boolean);\n    const addedValues = searchValueSplit.map((gene) =>\n      gene.trim().toUpperCase()\n    );\n    const inValidValues: string[] = [];\n    const validAddedValues = addedValues.reduce((acc, curr) => {\n      if (!isValidHexColor(curr, true)) {\n        inValidValues.push(curr);\n      } else {\n        acc.push(curr);\n      }\n      return acc;\n    }, [] as string[]);\n    if (inValidValues.length) {\n      toast(`Invalid colors: ${inValidValues.join(\", \")}`);\n    }\n    const newColors = new Set([...value, ...validAddedValues]);\n    if (onChange) onChange([...newColors]);\n    if (onOpenChange) onOpenChange(false);\n    setSearchValue(\"\");\n    setTmpValue(\"\");\n    setOpen(false);\n    requestAnimationFrame(() => {\n      setOpen(true);\n    });\n  }, [searchValue, value, onChange, onOpenChange, setOpen]);\n\n  const onInputKeyDown = useCallback(\n    (e: React.KeyboardEvent<HTMLInputElement>) => {\n      if (e.key === \"Enter\") onEnter();\n      if (e.key === \"Backspace\" && !searchValue) {\n        if (e.ctrlKey || e.metaKey) {\n          setValue([]);\n        } else {\n          setValue(value.slice(0, -1));\n        }\n      }\n    },\n    [onEnter, searchValue, value, setValue]\n  );\n\n  const handlePopupMouseDown = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      // Prevent input blur when clicking popup\n      e.preventDefault();\n      e.stopPropagation();\n    },\n    []\n  );\n\n  const handlePopupMouseDownCapture = useCallback(\n    (e: React.MouseEvent<HTMLDivElement>) => {\n      // Prevent input blur when clicking popup\n      e.preventDefault();\n    },\n    []\n  );\n\n  const renderedColorPicker = useCallback(\n    ({\n      open,\n      child,\n      value,\n      onChange,\n      onOpenChange,\n    }: {\n      open: boolean;\n      child: React.ReactNode;\n      value: string;\n      onChange: (value: Color) => void;\n      onOpenChange?: (open: boolean) => void;\n    }) => (\n      <ColorPicker\n        value={value}\n        onChange={onChange}\n        open={open}\n        onOpenChange={onOpenChange}\n        arrow={false}\n        presets={\n          presetColors\n            ? [{ label: \"Preset Colors\", colors: presetColors }]\n            : undefined\n        }\n        {...colorPickerProps}\n        panelRender={(panel) => (\n          <div\n            ref={(el) => {\n              if (el) {\n                popupRef.current = el;\n              }\n            }}\n            onMouseDown={handlePopupMouseDown}\n            onMouseDownCapture={handlePopupMouseDownCapture}\n          >\n            {panel}\n          </div>\n        )}\n      >\n        {child}\n      </ColorPicker>\n    ),\n    [\n      presetColors,\n      colorPickerProps,\n      handlePopupMouseDown,\n      handlePopupMouseDownCapture,\n    ]\n  );\n\n  const renderedTags = useMemo(\n    () =>\n      value.map((color, index) => {\n        const tag = (\n          <Tooltip title={color} key={`${color}-${index}`}>\n            <Tag\n              className={cls(\"color-select-tag\")}\n              closable\n              onClose={() => setValue(value.filter((v) => v !== color))}\n              icon={\n                <span\n                  className={cls(\"color-select-swatch\")}\n                  style={{ backgroundColor: color }}\n                />\n              }\n              onClick={() =>\n                activeColorIndex === index\n                  ? setActiveColorIndex(null)\n                  : setActiveColorIndex(index)\n              }\n            />\n          </Tooltip>\n        );\n        return renderedColorPicker({\n          child: tag,\n          open: activeColorIndex !== null && activeColorIndex === index,\n          value: value[index],\n          onChange: (color) => {\n            setValue(\n              value.map((v, i) => (i === index ? color.toHexString() : v))\n            );\n          },\n          onOpenChange: (open) => {\n            setActiveColorIndex(open ? index : null);\n          },\n        });\n      }),\n    [\n      value,\n      cls,\n      setValue,\n      activeColorIndex,\n      setActiveColorIndex,\n      renderedColorPicker,\n    ]\n  );\n\n  const renderedColorPickerInput = useMemo(() => {\n    return renderedColorPicker({\n      child: (\n        <input\n          placeholder=\"Select or enter a color list\"\n          className={cls(\"color-select-input\")}\n          value={searchValue}\n          type=\"text\"\n          ref={mergeRefs(ref, inputRef)}\n          onChange={(e) => {\n            const currValue = e.target.value;\n            setSearchValue(currValue);\n            if (isValidHexColor(currValue, true)) setTmpValue(currValue);\n            if (\n              currValue.length > 7 ||\n              (currValue.length == 7 && !currValue.startsWith(\"#\"))\n            ) {\n              // closeAndFocus();\n              setOpen(false);\n            } else {\n              setOpen(true);\n            }\n          }}\n          onKeyDown={onInputKeyDown}\n          onFocus={(e) => {\n            // if focus is triggered by programatically, do not open the popup\n            // if (isFocusedProgramatically.current) {\n            //   isFocusedProgramatically.current = false;\n            //   return;\n            // }\n            setIsFocus(true);\n            setOpen(true);\n          }}\n          onBlur={(e) => {\n            // if (popupRef.current?.contains(e.relatedTarget)) return;\n            // Check if click is inside popup using cursor position\n            if (popupRef.current) {\n              const rect = popupRef.current.getBoundingClientRect();\n              const { x, y } = mousePosition.current;\n              const isClickInsidePopup =\n                x >= rect.left &&\n                x <= rect.right &&\n                y >= rect.top &&\n                y <= rect.bottom;\n              if (isClickInsidePopup) {\n                e.preventDefault();\n                e.stopPropagation();\n                if (isValidHexColor(tmpValue)) {\n                  focusInput();\n                }\n                return;\n              }\n            }\n            // Check if the new focus target is inside the popup\n            setIsFocus(false);\n            setOpen(false);\n          }}\n        />\n      ),\n      value: tmpValue,\n      onChange: (color) => {\n        // setValue([...value, color]);\n        setTmpValue(color.toHexString());\n        setSearchValue(color.toHexString());\n        focusInput();\n      },\n      open,\n    });\n  }, [\n    cls,\n    tmpValue,\n    onInputKeyDown,\n    ref,\n    renderedColorPicker,\n    searchValue,\n    setOpen,\n    open,\n    focusInput,\n    mousePosition,\n  ]);\n  return (\n    <Stack\n      wrap\n      gap={4}\n      className={cls(\"color-select\")}\n      data-focus={isFocus || undefined}\n      {...rest}\n    >\n      {renderedTags}\n      {renderedColorPickerInput}\n    </Stack>\n  );\n};\n\n// Use forwardRef with type assertion\nconst MainColorSelect = forwardRef(ColorSelectInner);\n\nexport const ColorSelect = MainColorSelect;\n"],"names":["ColorSelectInner","className","valueProp","defaultValue","onChange","colorPickerProps","presetColors","openProp","onOpenChange","defaultOpen","rest","ref","cls","useCls","value","setValue","useControlledState","activeColorIndex","setActiveColorIndex","useState","searchValue","setSearchValue","tmpValue","setTmpValue","open","setOpen","isFocus","setIsFocus","popupRef","useRef","inputRef","isFocusedProgramatically","mousePosition","focusInput","useCallback","_a","moveTypingCursorToEnd","closeAndFocus","useEffect","handler","event","handleMouseMove","e","onEnter","addedValues","gene","inValidValues","validAddedValues","acc","curr","isValidHexColor","toast","newColors","onInputKeyDown","handlePopupMouseDown","handlePopupMouseDownCapture","renderedColorPicker","child","jsx","ColorPicker","panel","el","renderedTags","useMemo","color","index","tag","Tooltip","Tag","v","i","renderedColorPickerInput","mergeRefs","currValue","rect","x","y","jsxs","Stack","MainColorSelect","forwardRef","ColorSelect"],"mappings":"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"}

package/dist/components/ColorSelect/style.css

@@ -1 +1 @@
-@layer components{.ds-color-select{border-color:var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.25rem;background:var(--ds-color-bg-container);border-width:var(--ds-line-width);border-style:var(--ds-line-type);transition:all var(--ds-motion-duration-mid)}.ds-color-select[data-focus=true]{border-color:var(--ds-input-color-border-active);box-shadow:var(--ds-input-shadow-active);outline:0;background-color:var(--ds-input-active-bg)}.ds-color-select .ds-tag{margin-right:0}.ds-color-select-option,.ds-color-select-tag{display:flex;align-items:center;gap:.5rem}.ds-color-select-swatch{width:16px;height:16px;border-radius:9999px;border:1px solid var(--ds-color-border);flex-shrink:0}.ds-color-select-input{outline:none;border:none;background:transparent;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);line-height:var(--ds-line-height);flex:1;min-width:11rem;width:100%;margin-left:.25rem}.ds-color-select-input:first-child{margin-left:.7rem}}
+@layer components{.ds-color-select{border-color:var(--ds-color-border);border-radius:var(--ds-border-radius);padding:.25rem;background:var(--ds-color-bg-container);border-width:var(--ds-line-width);border-style:var(--ds-line-type);transition:all var(--ds-motion-duration-mid)}.ds-color-select[data-focus=true]{border-color:var(--ds-input-color-border-active);box-shadow:var(--ds-input-shadow-active);outline:0;background-color:var(--ds-input-active-bg)}.ds-color-select .ds-tag{margin-right:0}.ds-color-select-option{display:flex;align-items:center;gap:.5rem}.ds-color-select-tag{display:flex;align-items:center}.ds-color-select-swatch{width:16px;height:16px;border-radius:9999px;border:1px solid var(--ds-color-border);flex-shrink:0}.ds-color-select-input{outline:none;border:none;background:transparent;color:var(--ds-color-text);font-size:var(--ds-font-size);font-family:var(--ds-font-family);line-height:var(--ds-line-height);flex:1;min-width:11rem;width:100%;margin-left:.25rem}.ds-color-select-input:first-child{margin-left:.7rem}}

package/dist/components/DragDrop/draggable.js

@@ -7,34 +7,35 @@ import { isValidElement as N, cloneElement as R } from "react";
 import { useCls as V } from "../utils/antdUtils.js";
 import { clsx as h } from "../utils/cn.js";
 const F = ({
-  id: t,
-  children: e,
+  id: e,
+  children: r,
   className: o,
-  disabled: s = !1,
-  data: n,
+  disabled: n = !1,
+  data: s,
   style: d,
   render: i,
   onDragEnd: g,
   onDragStart: E,
-  indicator: l = !0,
-  onlyIndicatorDraggable: m = !1,
+  indicator: c = !0,
+  onlyIndicatorDraggable: l = !1,
   ...b
 }) => {
-  const c = V(), { attributes: a, listeners: f, isDragging: u, setNodeRef: x } = A({
-    id: t,
-    data: n,
-    disabled: s,
+  const m = V(), { attributes: a, listeners: f, isDragging: u, setNodeRef: x } = A({
+    id: e,
+    data: s,
+    disabled: n,
     onDragEnd: g,
     onDragStart: E
-  }), r = l === !0 ? /* @__PURE__ */ p(C, { className: c("draggable-indicator") }) : l, y = [
-    N(r) ? m ? R(r, {
+  }), t = c === !0 ? /* @__PURE__ */ p(C, { className: m("draggable-indicator") }) : c, y = [
+    N(t) ? l ? R(t, {
       ...a,
-      ...f
-    }) : r : null,
-    ...Array.isArray(e) ? e : [e]
+      ...f,
+      key: "indicator" + e
+    }) : t : null,
+    ...Array.isArray(r) ? r : [r]
   ];
   return D({
-    render: i || /* @__PURE__ */ p("div", { className: h(c("draggable"), o) }),
+    render: i || /* @__PURE__ */ p("div", { className: h(m("draggable"), o) }),
     ref: x,
     props: {
       children: y,
@@ -43,18 +44,18 @@ const F = ({
         ...d,
         touchAction: "none",
         // Prevents scrolling on touch devices while dragging
-        cursor: s ? "default" : "grab",
+        cursor: n ? "default" : "grab",
         opacity: u ? 0.5 : 1
         // Visual feedback when dragging
       },
       ...b,
       ...a,
-      ...m ? {} : f
+      ...l ? {} : f
     },
     state: {
       isDragging: u,
-      id: t,
-      data: n
+      id: e,
+      data: s
     }
   });
 };

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

@@ -1 +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;"}
+{"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          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;"}

package/dist/components/DragDrop/droppable.js

@@ -1,48 +1,80 @@
 "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,
+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 = ({
+  id: d,
+  children: m,
+  className: D,
+  disabled: E = !1,
+  placeholder: i = "Drop items here",
+  icon: f = /* @__PURE__ */ n(y, { size: 24 }),
+  render: O,
   onDrop: c,
-  validate: m,
-  ...p
+  validate: R,
+  multiple: s,
+  value: r,
+  onChange: o,
+  renderValueLabel: p,
+  renderValueIcon: a,
+  ...j
 }) => {
-  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,
+  const e = J(), q = x(
+    (t) => {
+      c && c(t), o && o(
+        s ? G([...r, t.data], H) : t.data
+      );
+    },
+    [c, o, s, r]
+  ), { isOver: k, setNodeRef: w, attributes: A, listeners: I } = h({
+    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: [
+      /* @__PURE__ */ n("div", { className: e("drop-zone-icon"), children: f }),
+      /* @__PURE__ */ n("div", { className: e("drop-zone-text"), children: i })
+    ] }),
+    [m, e, f, i]
+  ), M = x(
+    ({ className: t, ...l }) => !s && r || s && r.length ? /* @__PURE__ */ n(
+      F,
+      {
+        ...z,
+        className: t,
+        ...l
+      }
+    ) : /* @__PURE__ */ n("div", { className: K(e("drop-zone"), t), ...l, children: N }),
+    [r, s, z, N, e]
+  );
+  return B({
+    render: O ?? M,
+    ref: w,
     props: {
-      children: n || v,
-      className: s,
-      ...u,
-      ...h,
-      ...p
+      className: D,
+      ...A,
+      ...I,
+      ...j
     },
     state: {
-      isOver: a,
-      id: o
+      isOver: k,
+      value: r,
+      onChange: o,
+      id: d
     }
   });
-};
+}, L = W(Q);
 export {
-  g as Droppable
+  L as Droppable
 };
 //# sourceMappingURL=droppable.js.map