@bioturing/components 0.16.0 → 0.17.0

package/dist/components/Badge/component.js

@@ -1,26 +1,13 @@
 "use client";
-import { jsx as n } from "react/jsx-runtime";
-import a from "antd/es/badge";
-import m from "antd/es/badge/Ribbon";
+import { jsx as e } from "react/jsx-runtime";
+import n from "antd/es/badge";
+import i from "antd/es/badge/Ribbon";
 import './style.css';/* empty css          */
-import { useCls as c, useAntdCssVarClassname as i } from "../utils/antdUtils.js";
-import { clsx as d } from "../utils/cn.js";
-const l = ({ count: s, showZero: t, ...o }) => {
-  const r = c(), e = i();
-  return /* @__PURE__ */ n(
-    a,
-    {
-      count: s,
-      showZero: t,
-      className: d(r("badge"), e),
-      ...o
-    }
-  );
-}, x = Object.assign(l, {
-  Ribbon: m
+const m = ({ count: t, showZero: o, ...r }) => /* @__PURE__ */ e(n, { count: t, showZero: o, ...r }), d = Object.assign(m, {
+  Ribbon: i
 });
 export {
-  x as Badge,
-  l as InternalBadge
+  d as Badge,
+  m as InternalBadge
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Badge/component.tsx"],"sourcesContent":["\"use client\";\n\nimport { clsx, useCls, useAntdCssVarClassname } from \"../utils\";\nimport {\n  default as AntdBadge,\n  type BadgeProps as AntdBadgeProps,\n} from \"antd/es/badge\";\nimport Ribbon from \"antd/es/badge/Ribbon\";\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type BadgeProps = AntdBadgeProps;\n\nexport const InternalBadge = ({ count, showZero, ...rest }: BadgeProps) => {\n  const cls = useCls();\n  const antdCssVar = useAntdCssVarClassname();\n\n  return (\n    <AntdBadge\n      count={count}\n      showZero={showZero}\n      className={clsx(cls(\"badge\"), antdCssVar)}\n      {...rest}\n    />\n  );\n};\n\nexport const Badge = Object.assign(InternalBadge, {\n  Ribbon,\n});\n"],"names":["InternalBadge","count","showZero","rest","cls","useCls","antdCssVar","useAntdCssVarClassname","jsx","AntdBadge","clsx","Badge","Ribbon"],"mappings":";;;;;;;AAaO,MAAMA,IAAgB,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,QAAuB;AACzE,QAAMC,IAAMC,EAAO,GACbC,IAAaC,EAAuB;AAGxC,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,OAAAR;AAAA,MACA,UAAAC;AAAA,MACA,WAAWQ,EAAKN,EAAI,OAAO,GAAGE,CAAU;AAAA,MACvC,GAAGH;AAAA,IAAA;AAAA,EACN;AAEJ,GAEaQ,IAAQ,OAAO,OAAOX,GAAe;AAAA,EAChD,QAAAY;AACF,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Badge/component.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  default as AntdBadge,\n  type BadgeProps as AntdBadgeProps,\n} from \"antd/es/badge\";\nimport Ribbon from \"antd/es/badge/Ribbon\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type BadgeProps = AntdBadgeProps;\n\nexport const InternalBadge = ({ count, showZero, ...rest }: BadgeProps) => {\n  return <AntdBadge count={count} showZero={showZero} {...rest} />;\n};\n\nexport const Badge = Object.assign(InternalBadge, {\n  Ribbon,\n});\n"],"names":["InternalBadge","count","showZero","rest","jsx","AntdBadge","Badge","Ribbon"],"mappings":";;;;;AAaO,MAAMA,IAAgB,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,QAC1C,gBAAAC,EAAAC,GAAA,EAAU,OAAAJ,GAAc,UAAAC,GAAqB,GAAGC,GAAM,GAGnDG,IAAQ,OAAO,OAAON,GAAe;AAAA,EAChD,QAAAO;AACF,CAAC;"}

package/dist/components/ColorSelect/component.js

@@ -0,0 +1,138 @@
+"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 './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);
+    });
+  }, [r, s, i, u, o]), D = v(
+    (e) => {
+      e.key === "Enter" && x(), e.key === "Backspace" && !r && (e.ctrlKey || e.metaKey ? n([]) : n(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(
+    (e) => {
+      e.preventDefault();
+    },
+    []
+  ), $ = b(
+    () => /* @__PURE__ */ a(
+      W,
+      {
+        value: C,
+        onChange: (e) => {
+          d(e.toHexString()), f(e.toHexString());
+        },
+        open: g,
+        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",
+          {
+            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);
+            },
+            onBlur: () => {
+              h(!1), o(!1);
+            }
+          }
+        )
+      }
+    ),
+    [
+      C,
+      g,
+      m,
+      w,
+      r,
+      l,
+      y,
+      D,
+      h,
+      o,
+      N,
+      k
+    ]
+  );
+  return /* @__PURE__ */ P(
+    z,
+    {
+      wrap: !0,
+      gap: 4,
+      className: l("color-select"),
+      "data-focus": B || void 0,
+      ...j,
+      children: [
+        H,
+        $
+      ]
+    }
+  );
+}, Y = q(X), ie = Y;
+export {
+  ie as ColorSelect
+};
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +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":";;;;;;;;;;;;AAuDA,MAAMA,IAAmB,CACvB;AAAA,EACE,WAAAC;AAAA,EACA,OAAOC;AAAA,EACP,cAAAC;AAAA,EACA,UAAAC;AAAA,EACA,kBAAAC;AAAA,EACA,cAAAC;AAAA,EACA,MAAMC;AAAA,EACN,cAAAC;AAAA,EACA,aAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GACb,CAACC,GAAOC,CAAQ,IAAIC;AAAA,IACxBd;AAAA,IACAE;AAAA,IACAD;AAAA,EACF,GACM,CAACc,GAAaC,CAAc,IAAIC,EAAS,EAAE,GAC3C,CAACC,GAAUC,CAAW,IAAIF,EAAS,EAAE,GACrC,CAACG,GAAMC,CAAO,IAAIP;AAAA,IACtBT;AAAA,IACAC;AAAA,IACAC;AAAA,EACF,GAEM,CAACe,GAASC,CAAU,IAAIN,EAAS,EAAK,GAEtCO,IAAWC,EAAuB,IAAI,GAEtCC,IAAUC,EAAY,MAAM;AAKhC,UAAMC,IAJmBb,EACtB,KAAK,EACL,MAAM,SAAS,EACf,OAAO,OAAO,EACoB;AAAA,MAAI,CAACc,MACxCA,EAAK,KAAA,EAAO,YAAY;AAAA,IAC1B,GACMC,IAA0B,CAAC,GAC3BC,IAAmBH,EAAY,OAAO,CAACI,GAAKC,OAC3CC,EAAgBD,GAAM,EAAI,IAG7BD,EAAI,KAAKC,CAAI,IAFbH,EAAc,KAAKG,CAAI,GAIlBD,IACN,EAAc;AACjB,IAAIF,EAAc,UAChBK,EAAM,mBAAmBL,EAAc,KAAK,IAAI,CAAC,EAAE;AAE/C,UAAAM,wBAAgB,IAAI,CAAC,GAAGxB,GAAO,GAAGmB,CAAgB,CAAC;AACzD,IAAI7B,KAAUA,EAAS,CAAC,GAAGkC,CAAS,CAAC,GACjC9B,OAA2B,EAAK,GACpCU,EAAe,EAAE,GACjBG,EAAY,EAAE,GACdE,EAAQ,EAAK,GACb,sBAAsB,MAAM;AAC1B,MAAAA,EAAQ,EAAI;AAAA,IAAA,CACb;AAAA,EAAA,GACA,CAACN,GAAaH,GAAOV,GAAUI,GAAce,CAAO,CAAC,GAElDgB,IAAiBV;AAAA,IACrB,CAAC,MAA6C;AACxC,MAAA,EAAE,QAAQ,WAAiBD,EAAA,GAC3B,EAAE,QAAQ,eAAe,CAACX,MACxB,EAAE,WAAW,EAAE,UACjBF,EAAS,CAAA,CAAE,IAEXA,EAASD,EAAM,MAAM,GAAG,EAAE,CAAC;AAAA,IAGjC;AAAA,IACA,CAACc,GAASX,GAAaH,GAAOC,CAAQ;AAAA,EACxC,GAEMyB,IAAeC;AAAA,IACnB,MACE3B,EAAM,IAAI,CAAC4B,GAAOC,MAChB,gBAAAC,EAACC,GAAQ,EAAA,OAAOH,GACd,UAAA,gBAAAE;AAAA,MAACE;AAAA,MAAA;AAAA,QACC,WAAWlC,EAAI,kBAAkB;AAAA,QACjC,UAAQ;AAAA,QACR,SAAS,MAAMG,EAASD,EAAM,OAAO,CAACiC,MAAMA,MAAML,CAAK,CAAC;AAAA,QACxD,MACE,gBAAAE;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,WAAWhC,EAAI,qBAAqB;AAAA,YACpC,OAAO,EAAE,iBAAiB8B,EAAM;AAAA,UAAA;AAAA,QAAA;AAAA,MAClC;AAAA,IAAA,KATsB,GAAGA,CAAK,IAAIC,CAAK,EAY7C,CACD;AAAA,IACH,CAAC7B,GAAOF,GAAKG,CAAQ;AAAA,EACvB,GAEMiC,IAAuBnB;AAAA,IAC3B,CAAC,MAAwC;AAEvC,QAAE,eAAe;AAAA,IACnB;AAAA,IACA,CAAA;AAAA,EACF,GAEMoB,IAAsBR;AAAA,IAC1B,MACE,gBAAAG;AAAA,MAACM;AAAA,MAAA;AAAA,QACC,OAAO9B;AAAA,QACP,UAAU,CAACsB,MAAU;AAEP,UAAArB,EAAAqB,EAAM,aAAa,GAChBxB,EAAAwB,EAAM,aAAa;AAAA,QACpC;AAAA,QACA,MAAApB;AAAA,QACA,OAAO;AAAA,QACP,SACEhB,IACI,CAAC,EAAE,OAAO,iBAAiB,QAAQA,EAAc,CAAA,IACjD;AAAA,QAEL,GAAGD;AAAA,QACJ,aAAa,CAAC8C,MACZ,gBAAAP,EAAC,SAAI,KAAKlB,GAAU,aAAasB,GAC9B,UACHG,EAAA,CAAA;AAAA,QAGF,UAAA,gBAAAP;AAAA,UAAC;AAAA,UAAA;AAAA,YACC,aAAY;AAAA,YACZ,WAAWhC,EAAI,oBAAoB;AAAA,YACnC,OAAOK;AAAA,YACP,MAAK;AAAA,YACL,KAAAN;AAAA,YACA,UAAU,CAAC,MAAM;AACT,oBAAAyC,IAAY,EAAE,OAAO;AAC3B,cAAAlC,EAAekC,CAAS,GACpBhB,EAAgBgB,GAAW,EAAI,OAAeA,CAAS,GAEzDA,EAAU,SAAS,KAClBA,EAAU,UAAU,KAAK,CAACA,EAAU,WAAW,GAAG,IAEnD7B,EAAQ,EAAK,IAEbA,EAAQ,EAAI;AAAA,YAEhB;AAAA,YACA,WAAWgB;AAAA,YACX,SAAS,MAAM;AACb,cAAAd,EAAW,EAAI,GACfF,EAAQ,EAAI;AAAA,YACd;AAAA,YACA,QAAQ,MAAM;AAEZ,cAAAE,EAAW,EAAK,GAChBF,EAAQ,EAAK;AAAA,YAAA;AAAA,UACf;AAAA,QAAA;AAAA,MACF;AAAA,IACF;AAAA,IAEF;AAAA,MACEH;AAAA,MACAE;AAAA,MACAhB;AAAA,MACAD;AAAA,MACAY;AAAA,MACAL;AAAA,MACAD;AAAA,MACA4B;AAAA,MACAd;AAAA,MACAF;AAAA,MACAyB;AAAA,MACAtB;AAAA,IAAA;AAAA,EAEJ;AAGE,SAAA,gBAAA2B;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,MAAI;AAAA,MACJ,KAAK;AAAA,MACL,WAAW1C,EAAI,cAAc;AAAA,MAC7B,cAAYY,KAAW;AAAA,MACtB,GAAGd;AAAA,MAEH,UAAA;AAAA,QAAA8B;AAAA,QACAS;AAAA,MAAA;AAAA,IAAA;AAAA,EACH;AAEJ,GAGMM,IAAkBC,EAAWxD,CAAgB,GAEtCyD,KAAcF;"}

package/dist/components/ColorSelect/style.css

@@ -0,0 +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}}

package/dist/components/DragDrop/context.js

@@ -0,0 +1,18 @@
+"use client";
+import { createContext as t, useContext as o } from "react";
+const e = t({
+  active: null,
+  setActive: () => {
+  },
+  onDragStart: void 0,
+  onDragEnd: void 0,
+  onDrop: void 0,
+  isDragging: !1,
+  setIsDragging: () => {
+  }
+}), r = () => o(e);
+export {
+  e as DragDropContext,
+  r as useDragDropContext
+};
+//# sourceMappingURL=context.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"context.js","sources":["../../../src/components/DragDrop/context.tsx"],"sourcesContent":["\"use client\";\n\nimport { createContext, useContext } from \"react\";\nimport { type DragDropContextType, type Data } from \"./types\";\n\n/**\n * Drag context for sharing state between components\n */\nexport const DragDropContext = createContext<DragDropContextType>({\n  active: null,\n  setActive: () => {},\n  onDragStart: undefined,\n  onDragEnd: undefined,\n  onDrop: undefined,\n  isDragging: false,\n  setIsDragging: () => {},\n});\n\n/**\n * Hook to access the Drag context\n */\nexport const useDragDropContext = <T extends Data = Data>() =>\n  useContext(DragDropContext) as DragDropContextType<T>;\n"],"names":["DragDropContext","createContext","useDragDropContext","useContext"],"mappings":";;AAQO,MAAMA,IAAkBC,EAAmC;AAAA,EAChE,QAAQ;AAAA,EACR,WAAW,MAAM;AAAA,EAAC;AAAA,EAClB,aAAa;AAAA,EACb,WAAW;AAAA,EACX,QAAQ;AAAA,EACR,YAAY;AAAA,EACZ,eAAe,MAAM;AAAA,EAAA;AACvB,CAAC,GAKYC,IAAqB,MAChCC,EAAWH,CAAe;"}

package/dist/components/DragDrop/draggable.js

@@ -0,0 +1,64 @@
+"use client";
+import { jsx as p } from "react/jsx-runtime";
+import { useDraggable as A } from "./hooks.js";
+import { useRender as D } from "@base-ui-components/react/use-render";
+import { DotsSixVerticalIcon as C } from "@bioturing/assets";
+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,
+  className: o,
+  disabled: s = !1,
+  data: n,
+  style: d,
+  render: i,
+  onDragEnd: g,
+  onDragStart: E,
+  indicator: l = !0,
+  onlyIndicatorDraggable: m = !1,
+  ...b
+}) => {
+  const c = V(), { attributes: a, listeners: f, isDragging: u, setNodeRef: x } = A({
+    id: t,
+    data: n,
+    disabled: s,
+    onDragEnd: g,
+    onDragStart: E
+  }), r = l === !0 ? /* @__PURE__ */ p(C, { className: c("draggable-indicator") }) : l, y = [
+    N(r) ? m ? R(r, {
+      ...a,
+      ...f
+    }) : r : null,
+    ...Array.isArray(e) ? e : [e]
+  ];
+  return D({
+    render: i || /* @__PURE__ */ p("div", { className: h(c("draggable"), o) }),
+    ref: x,
+    props: {
+      children: y,
+      className: o,
+      style: {
+        ...d,
+        touchAction: "none",
+        // Prevents scrolling on touch devices while dragging
+        cursor: s ? "default" : "grab",
+        opacity: u ? 0.5 : 1
+        // Visual feedback when dragging
+      },
+      ...b,
+      ...a,
+      ...m ? {} : f
+    },
+    state: {
+      isDragging: u,
+      id: t,
+      data: n
+    }
+  });
+};
+export {
+  F as Draggable
+};
+//# sourceMappingURL=draggable.js.map

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

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

package/dist/components/DragDrop/droppable.js

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

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

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

package/dist/components/DragDrop/hooks.js

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

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

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

package/dist/components/DragDrop/index.js

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

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

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

package/dist/components/DragDrop/style.css

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