@bioturing/components 0.17.0 → 0.18.0

package/dist/components/Tag/component.js

@@ -1,66 +1,74 @@
 "use client";
-import { jsx as c } from "react/jsx-runtime";
-import { forwardRef as l } from "react";
-import { XIcon as C } from "@bioturing/assets";
-import g from "antd/es/tag";
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as g, isValidElement as T, cloneElement as b } from "react";
+import { XIcon as y } from "@bioturing/assets";
+import C from "antd/es/tag";
+import j from "antd/es/tag/CheckableTag";
 import './style.css';/* empty css          */
-import { useCls as i } from "../utils/antdUtils.js";
-import { clsx as p } from "../utils/cn.js";
-const I = l(
+import { useCls as f } from "../utils/antdUtils.js";
+import { clsx as c } from "../utils/cn.js";
+const x = g(
   ({
-    className: a,
-    active: e = !1,
-    color: o,
-    style: s,
-    closeIcon: r,
-    closable: t,
-    size: f = "small",
+    className: o,
+    active: r = !1,
+    color: e,
+    style: m,
+    closeIcon: p,
+    closable: s,
+    size: i = "small",
     children: n,
-    ...u
-  }, T) => {
-    const d = /* @__PURE__ */ c(C, { weight: "bold" }), m = i();
-    return /* @__PURE__ */ c(
-      g,
+    icon: t,
+    ...d
+  }, N) => {
+    const u = /* @__PURE__ */ l(y, { weight: "bold" }), a = f(), I = T(t) ? b(t, {
+      className: c(
+        a("tag-icon"),
+        t.props && typeof t.props == "object" && "className" in t.props && typeof t.props.className == "string" ? t.props.className : ""
+      )
+    }) : t;
+    return /* @__PURE__ */ l(
+      C,
       {
-        ref: T,
-        className: p(
-          m("tag"),
-          m(`tag-${f}`),
-          !n && m("tag-empty"),
-          a
+        ref: N,
+        className: c(
+          a("tag"),
+          a(`tag-${i}`),
+          !n && a("tag-empty"),
+          o
         ),
-        color: o,
-        style: s,
-        closable: t,
-        closeIcon: t ? r || d : void 0,
-        ...e ? { "data-active": "true" } : {},
-        ...u,
+        color: e,
+        style: m,
+        closable: s,
+        closeIcon: s ? p || u : void 0,
+        icon: I,
+        ...r ? { "data-active": "true" } : {},
+        ...d,
         children: n
       }
     );
   }
-), b = l(
-  ({ className: a, size: e = "small", children: o, ...s }, r) => {
-    const t = i();
-    return /* @__PURE__ */ c(
-      g.CheckableTag,
+), k = g(
+  ({ className: o, size: r = "small", children: e, ...m }, p) => {
+    const s = f();
+    return /* @__PURE__ */ l(
+      j,
       {
-        ref: r,
-        className: p(
-          t("tag"),
-          t(`tag-${e}`),
-          !o && t("tag-empty"),
-          a
+        ref: p,
+        className: c(
+          s("tag"),
+          s(`tag-${r}`),
+          !e && s("tag-empty"),
+          o
         ),
-        ...s,
-        children: o
+        ...m,
+        children: e
       }
     );
   }
-), $ = Object.assign(I, {
-  CheckableTag: b
+), V = Object.assign(x, {
+  CheckableTag: k
 });
 export {
-  $ as Tag
+  V as Tag
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Tag/component.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { XIcon } from \"@bioturing/assets\";\nimport {\n  default as AntTag,\n  type CheckableTagProps as AntCheckableTagProps,\n  type TagProps as AntTagProps,\n  type TagType,\n} from \"antd/es/tag\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport { TagType };\n\n// Define props interface extending Ant Design's TagProps\nexport interface TagProps extends AntTagProps {\n  /**\n   * Indicates if the tag is active\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Size of the tag\n   * @default \"small\"\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface CheckableTagProps extends AntCheckableTagProps {\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\n// Create Tag component\nconst InternalTag = forwardRef<HTMLSpanElement, TagProps>(\n  (\n    {\n      className,\n      active = false,\n      color,\n      style,\n      closeIcon,\n      closable,\n      size = \"small\",\n      children,\n      ...rest\n    },\n    ref\n  ) => {\n    const renderedCloseIcon = <XIcon weight=\"bold\" />;\n    const cls = useCls();\n    return (\n      <AntTag\n        ref={ref}\n        className={clsx(\n          cls(\"tag\"),\n          cls(`tag-${size}`),\n          !children && cls(\"tag-empty\"),\n          className\n        )}\n        color={color}\n        style={style}\n        closable={closable}\n        closeIcon={closable ? closeIcon || renderedCloseIcon : undefined}\n        {...(active ? { \"data-active\": \"true\" } : {})}\n        {...rest}\n      >\n        {children}\n      </AntTag>\n    );\n  }\n);\n\nconst CheckableTag = forwardRef<HTMLSpanElement, CheckableTagProps>(\n  ({ className, size = \"small\", children, ...rest }, ref) => {\n    const cls = useCls();\n    return (\n      <AntTag.CheckableTag\n        ref={ref}\n        className={clsx(\n          cls(\"tag\"),\n          cls(`tag-${size}`),\n          !children && cls(\"tag-empty\"),\n          className\n        )}\n        {...rest}\n      >\n        {children}\n      </AntTag.CheckableTag>\n    );\n  }\n);\n\nexport const Tag = Object.assign(InternalTag, {\n  CheckableTag,\n});\n"],"names":["InternalTag","forwardRef","className","active","color","style","closeIcon","closable","size","children","rest","ref","renderedCloseIcon","jsx","XIcon","cls","useCls","AntTag","clsx","CheckableTag","Tag"],"mappings":";;;;;;;;AAmCA,MAAMA,IAAcC;AAAA,EAClB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAoB,gBAAAC,EAACC,GAAM,EAAA,QAAO,OAAO,CAAA,GACzCC,IAAMC,EAAO;AAEjB,WAAA,gBAAAH;AAAA,MAACI;AAAA,MAAA;AAAA,QACC,KAAAN;AAAA,QACA,WAAWO;AAAA,UACTH,EAAI,KAAK;AAAA,UACTA,EAAI,OAAOP,CAAI,EAAE;AAAA,UACjB,CAACC,KAAYM,EAAI,WAAW;AAAA,UAC5Bb;AAAA,QACF;AAAA,QACA,OAAAE;AAAA,QACA,OAAAC;AAAA,QACA,UAAAE;AAAA,QACA,WAAWA,IAAWD,KAAaM,IAAoB;AAAA,QACtD,GAAIT,IAAS,EAAE,eAAe,WAAW,CAAC;AAAA,QAC1C,GAAGO;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,GAEMU,IAAelB;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,MAAAM,IAAO,SAAS,UAAAC,GAAU,GAAGC,EAAK,GAAGC,MAAQ;AACzD,UAAMI,IAAMC,EAAO;AAEjB,WAAA,gBAAAH;AAAA,MAACI,EAAO;AAAA,MAAP;AAAA,QACC,KAAAN;AAAA,QACA,WAAWO;AAAA,UACTH,EAAI,KAAK;AAAA,UACTA,EAAI,OAAOP,CAAI,EAAE;AAAA,UACjB,CAACC,KAAYM,EAAI,WAAW;AAAA,UAC5Bb;AAAA,QACF;AAAA,QACC,GAAGQ;AAAA,QAEH,UAAAD;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,GAEaW,IAAM,OAAO,OAAOpB,GAAa;AAAA,EAC5C,cAAAmB;AACF,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Tag/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  forwardRef,\n  cloneElement,\n  isValidElement,\n  ReactElement,\n  HTMLAttributes,\n} from \"react\";\nimport { XIcon } from \"@bioturing/assets\";\nimport AntTag, {\n  type TagProps as AntTagProps,\n  type TagType,\n} from \"antd/es/tag\";\nimport AntCheckableTag, {\n  type CheckableTagProps as AntCheckableTagProps,\n} from \"antd/es/tag/CheckableTag\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport { TagType };\n\n// Define props interface extending Ant Design's TagProps\nexport interface TagProps extends AntTagProps {\n  /**\n   * Indicates if the tag is active\n   * @default false\n   */\n  active?: boolean;\n  /**\n   * Size of the tag\n   * @default \"small\"\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nexport interface CheckableTagProps extends AntCheckableTagProps {\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\n// Create Tag component\nconst InternalTag = forwardRef<HTMLSpanElement, TagProps>(\n  (\n    {\n      className,\n      active = false,\n      color,\n      style,\n      closeIcon,\n      closable,\n      size = \"small\",\n      children,\n      icon,\n      ...rest\n    },\n    ref\n  ) => {\n    const renderedCloseIcon = <XIcon weight=\"bold\" />;\n    const cls = useCls();\n    const renderedIcon = isValidElement(icon)\n      ? cloneElement<HTMLAttributes<SVGElement>>(icon, {\n          className: clsx(\n            cls(\"tag-icon\"),\n            icon.props &&\n              typeof icon.props === \"object\" &&\n              \"className\" in icon.props &&\n              typeof icon.props.className === \"string\"\n              ? icon.props.className\n              : \"\"\n          ),\n        })\n      : icon;\n    return (\n      <AntTag\n        ref={ref}\n        className={clsx(\n          cls(\"tag\"),\n          cls(`tag-${size}`),\n          !children && cls(\"tag-empty\"),\n          className\n        )}\n        color={color}\n        style={style}\n        closable={closable}\n        closeIcon={closable ? closeIcon || renderedCloseIcon : undefined}\n        icon={renderedIcon}\n        {...(active ? { \"data-active\": \"true\" } : {})}\n        {...rest}\n      >\n        {children}\n      </AntTag>\n    );\n  }\n);\n\nconst CheckableTag = forwardRef<HTMLSpanElement, CheckableTagProps>(\n  ({ className, size = \"small\", children, ...rest }, ref) => {\n    const cls = useCls();\n    return (\n      <AntCheckableTag\n        ref={ref}\n        className={clsx(\n          cls(\"tag\"),\n          cls(`tag-${size}`),\n          !children && cls(\"tag-empty\"),\n          className\n        )}\n        {...rest}\n      >\n        {children}\n      </AntCheckableTag>\n    );\n  }\n);\n\nexport const Tag = Object.assign(InternalTag, {\n  CheckableTag,\n});\n"],"names":["InternalTag","forwardRef","className","active","color","style","closeIcon","closable","size","children","icon","rest","ref","renderedCloseIcon","jsx","XIcon","cls","useCls","renderedIcon","isValidElement","cloneElement","clsx","AntTag","CheckableTag","AntCheckableTag","Tag"],"mappings":";;;;;;;;;AA0CA,MAAMA,IAAcC;AAAA,EAClB,CACE;AAAA,IACE,WAAAC;AAAA,IACA,QAAAC,IAAS;AAAA,IACT,OAAAC;AAAA,IACA,OAAAC;AAAA,IACA,WAAAC;AAAA,IACA,UAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,UAAAC;AAAA,IACA,MAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAoB,gBAAAC,EAACC,GAAM,EAAA,QAAO,OAAO,CAAA,GACzCC,IAAMC,EAAO,GACbC,IAAeC,EAAeT,CAAI,IACpCU,EAAyCV,GAAM;AAAA,MAC7C,WAAWW;AAAA,QACTL,EAAI,UAAU;AAAA,QACdN,EAAK,SACH,OAAOA,EAAK,SAAU,YACtB,eAAeA,EAAK,SACpB,OAAOA,EAAK,MAAM,aAAc,WAC9BA,EAAK,MAAM,YACX;AAAA,MAAA;AAAA,IAEP,CAAA,IACDA;AAEF,WAAA,gBAAAI;AAAA,MAACQ;AAAA,MAAA;AAAA,QACC,KAAAV;AAAA,QACA,WAAWS;AAAA,UACTL,EAAI,KAAK;AAAA,UACTA,EAAI,OAAOR,CAAI,EAAE;AAAA,UACjB,CAACC,KAAYO,EAAI,WAAW;AAAA,UAC5Bd;AAAA,QACF;AAAA,QACA,OAAAE;AAAA,QACA,OAAAC;AAAA,QACA,UAAAE;AAAA,QACA,WAAWA,IAAWD,KAAaO,IAAoB;AAAA,QACvD,MAAMK;AAAA,QACL,GAAIf,IAAS,EAAE,eAAe,WAAW,CAAC;AAAA,QAC1C,GAAGQ;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,GAEMc,IAAetB;AAAA,EACnB,CAAC,EAAE,WAAAC,GAAW,MAAAM,IAAO,SAAS,UAAAC,GAAU,GAAGE,EAAK,GAAGC,MAAQ;AACzD,UAAMI,IAAMC,EAAO;AAEjB,WAAA,gBAAAH;AAAA,MAACU;AAAA,MAAA;AAAA,QACC,KAAAZ;AAAA,QACA,WAAWS;AAAA,UACTL,EAAI,KAAK;AAAA,UACTA,EAAI,OAAOR,CAAI,EAAE;AAAA,UACjB,CAACC,KAAYO,EAAI,WAAW;AAAA,UAC5Bd;AAAA,QACF;AAAA,QACC,GAAGS;AAAA,QAEH,UAAAF;AAAA,MAAA;AAAA,IACH;AAAA,EAAA;AAGN,GAEagB,IAAM,OAAO,OAAOzB,GAAa;AAAA,EAC5C,cAAAuB;AACF,CAAC;"}

package/dist/components/Tag/style.css

@@ -1 +1 @@
-@layer components{.ds-tag{display:inline-flex;align-items:center;font-size:var(--ds-font-size-sm);padding:.0625rem .4375rem}.ds-tag[data-active]{background-color:var(--ds-color-primary-bg);border-color:var(--ds-color-primary);color:var(--ds-color-primary)}.ds-tag .ds-tag-close-icon{color:var(--ds-color-icon)}.ds-tag.ds-tag-medium{padding:.1875rem .4375rem}.ds-tag.ds-tag-large{font-size:var(--ds-font-size);padding:.1875rem .4375rem}.ds-tag:is(.ds-tag-magenta,.ds-tag-red,.ds-tag-volcano,.ds-tag-orange,.ds-tag-gold,.ds-tag-lime,.ds-tag-green,.ds-tag-cyan,.ds-tag-blue,.ds-tag-geekblue,.ds-tag-purple) .ds-tag-close-icon{color:currentColor}.ds-tag.ds-tag-empty .ds-tag-close-icon{margin-left:0}}
+@layer components{.ds-tag{display:inline-flex;align-items:center;font-size:var(--ds-font-size-sm);padding:.0625rem .4375rem}.ds-tag[data-active]{background-color:var(--ds-color-primary-bg);border-color:var(--ds-color-primary);color:var(--ds-color-primary)}.ds-tag .ds-tag-close-icon{color:var(--ds-color-icon)}.ds-tag.ds-tag-medium{padding:.1875rem .4375rem}.ds-tag.ds-tag-large{font-size:var(--ds-font-size);padding:.1875rem .4375rem}.ds-tag:is(.ds-tag-magenta,.ds-tag-red,.ds-tag-volcano,.ds-tag-orange,.ds-tag-gold,.ds-tag-lime,.ds-tag-green,.ds-tag-cyan,.ds-tag-blue,.ds-tag-geekblue,.ds-tag-purple) .ds-tag-close-icon{color:currentColor}.ds-tag.ds-tag-empty .ds-tag-close-icon{margin-left:0}.ds-tag .ds-tag-icon{margin-right:.25rem}}

package/dist/components/utils/selectionRange.js

@@ -0,0 +1,9 @@
+"use client";
+function o(t) {
+  let e, n;
+  document.createRange && (e = document.createRange(), e.selectNodeContents(t), e.collapse(!1), n = window.getSelection(), n && (n.removeAllRanges(), n.addRange(e)));
+}
+export {
+  o as moveTypingCursorToEnd
+};
+//# sourceMappingURL=selectionRange.js.map

package/dist/components/utils/selectionRange.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"selectionRange.js","sources":["../../../src/components/utils/selectionRange.ts"],"sourcesContent":["\"use client\";\n\nexport function moveTypingCursorToEnd(contentEditableElement: HTMLElement) {\n  let range: Range;\n  let selection: Selection | null;\n  if (document.createRange) {\n    range = document.createRange();\n    range.selectNodeContents(contentEditableElement); //Select the entire contents of the element with the range\n    range.collapse(false); //collapse the range to the end point. false means collapse to end rather than the start\n    selection = window.getSelection(); //get the selection object (allows you to change selection)\n    if (selection) {\n      selection.removeAllRanges(); //remove any selections already made\n      selection.addRange(range); //make the range you have just created the visible selection\n    }\n  }\n}\n"],"names":["moveTypingCursorToEnd","contentEditableElement","range","selection"],"mappings":";AAEO,SAASA,EAAsBC,GAAqC;AACrE,MAAAC,GACAC;AACJ,EAAI,SAAS,gBACXD,IAAQ,SAAS,YAAY,GAC7BA,EAAM,mBAAmBD,CAAsB,GAC/CC,EAAM,SAAS,EAAK,GACpBC,IAAY,OAAO,aAAa,GAC5BA,MACFA,EAAU,gBAAgB,GAC1BA,EAAU,SAASD,CAAK;AAG9B;"}

package/dist/components/utils/theme.js

@@ -0,0 +1,22 @@
+"use client";
+import { flushSync as e } from "react-dom";
+const i = (n) => {
+  const t = document.createElement("style");
+  t.appendChild(
+    document.createTextNode(
+      `* {
+       -webkit-transition: none !important;
+       -moz-transition: none !important;
+       -o-transition: none !important;
+       -ms-transition: none !important;
+       transition: none !important;
+    }`
+    )
+  ), document.head.appendChild(t), e(() => {
+    n();
+  }), window.getComputedStyle(t).opacity, document.head.removeChild(t);
+};
+export {
+  i as changeThemeWithoutTransition
+};
+//# sourceMappingURL=theme.js.map

package/dist/components/utils/theme.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"theme.js","sources":["../../../src/components/utils/theme.ts"],"sourcesContent":["\"use client\";\n\nimport { flushSync } from \"react-dom\";\n\n/**\n * Changes the theme without transition\n * @param fn Callback function to change the theme\n */\nexport const changeThemeWithoutTransition = (fn: () => void) => {\n  // https://paco.me/writing/disable-theme-transitions\n  const css = document.createElement(\"style\");\n  css.appendChild(\n    document.createTextNode(\n      `* {\n       -webkit-transition: none !important;\n       -moz-transition: none !important;\n       -o-transition: none !important;\n       -ms-transition: none !important;\n       transition: none !important;\n    }`\n    )\n  );\n  document.head.appendChild(css);\n  flushSync(() => {\n    fn();\n  });\n  // force reflow\n  const _ = window.getComputedStyle(css).opacity;\n  document.head.removeChild(css);\n};\n"],"names":["changeThemeWithoutTransition","fn","css","flushSync"],"mappings":";;AAQa,MAAAA,IAA+B,CAACC,MAAmB;AAExD,QAAAC,IAAM,SAAS,cAAc,OAAO;AACtC,EAAAA,EAAA;AAAA,IACF,SAAS;AAAA,MACP;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAQJ,GACS,SAAA,KAAK,YAAYA,CAAG,GAC7BC,EAAU,MAAM;AACX,IAAAF,EAAA;AAAA,EAAA,CACJ,GAES,OAAO,iBAAiBC,CAAG,EAAE,SAC9B,SAAA,KAAK,YAAYA,CAAG;AAC/B;"}

package/dist/index.d.ts

@@ -36,7 +36,7 @@ import { CascaderAutoProps } from 'antd';
 import { CascaderPanelAutoProps } from 'antd';
 import { CascaderPanelProps } from 'antd';
 import { CascaderProps } from 'antd';
-import { CheckableTagProps as CheckableTagProps_2 } from 'antd/es/tag';
+import { CheckableTagProps as CheckableTagProps_2 } from 'antd/es/tag/CheckableTag';
 import { Checkbox as Checkbox_2 } from 'antd';
 import { CheckboxChangeEvent } from 'antd';
 import { CheckboxGroupProps } from 'antd/es/checkbox';
@@ -74,6 +74,7 @@ import { DescriptionsProps } from 'antd';
 import { DirectoryTreeProps as DirectoryTreeProps_2 } from 'antd/es/tree';
 import { Divider } from 'antd';
 import { DividerProps } from 'antd';
+import { DragDropValueProps as DragDropValueProps_2 } from './types';
 import { DraggerProps } from './dragger';
 import { Drawer } from 'antd';
 import { DrawerProps } from 'antd';
@@ -384,6 +385,12 @@ export declare const categoricalChartsColors: ColorTokenValue[];
 
 export declare type CategoricalPaletteName = (typeof CATEGORICAL_PALETTE_NAMES)[number];
 
+/**
+ * Changes the theme without transition
+ * @param fn Callback function to change the theme
+ */
+export declare const changeThemeWithoutTransition: (fn: () => void) => void;
+
 export declare const chartColorTokens: Record<"colorChartsRed300" | "colorChartsRed400" | "colorChartsRed500" | "colorChartsRed600" | "colorChartsRed700" | "colorChartsRed800" | "colorChartsRed900" | "colorChartsRed1000" | "colorChartsRed1100" | "colorChartsRed1200" | "colorChartsOrange300" | "colorChartsOrange400" | "colorChartsOrange500" | "colorChartsOrange600" | "colorChartsOrange700" | "colorChartsOrange800" | "colorChartsOrange900" | "colorChartsOrange1000" | "colorChartsOrange1100" | "colorChartsOrange1200" | "colorChartsYellow300" | "colorChartsYellow400" | "colorChartsYellow500" | "colorChartsYellow600" | "colorChartsYellow700" | "colorChartsYellow800" | "colorChartsYellow900" | "colorChartsYellow1000" | "colorChartsYellow1100" | "colorChartsYellow1200" | "colorChartsGreen300" | "colorChartsGreen400" | "colorChartsGreen500" | "colorChartsGreen600" | "colorChartsGreen700" | "colorChartsGreen800" | "colorChartsGreen900" | "colorChartsGreen1000" | "colorChartsGreen1100" | "colorChartsGreen1200" | "colorChartsTeal300" | "colorChartsTeal400" | "colorChartsTeal500" | "colorChartsTeal600" | "colorChartsTeal700" | "colorChartsTeal800" | "colorChartsTeal900" | "colorChartsTeal1000" | "colorChartsTeal1100" | "colorChartsTeal1200" | "colorChartsBlue1300" | "colorChartsBlue1400" | "colorChartsBlue1500" | "colorChartsBlue1600" | "colorChartsBlue1700" | "colorChartsBlue1800" | "colorChartsBlue1900" | "colorChartsBlue11000" | "colorChartsBlue11100" | "colorChartsBlue11200" | "colorChartsBlue2300" | "colorChartsBlue2400" | "colorChartsBlue2500" | "colorChartsBlue2600" | "colorChartsBlue2700" | "colorChartsBlue2800" | "colorChartsBlue2900" | "colorChartsBlue21000" | "colorChartsBlue21100" | "colorChartsBlue21200" | "colorChartsPurple300" | "colorChartsPurple400" | "colorChartsPurple500" | "colorChartsPurple600" | "colorChartsPurple700" | "colorChartsPurple800" | "colorChartsPurple900" | "colorChartsPurple1000" | "colorChartsPurple1100" | "colorChartsPurple1200" | "colorChartsPink300" | "colorChartsPink400" | "colorChartsPink500" | "colorChartsPink600" | "colorChartsPink700" | "colorChartsPink800" | "colorChartsPink900" | "colorChartsPink1000" | "colorChartsPink1100" | "colorChartsPink1200" | "colorChartsStatusCritical" | "colorChartsStatusHigh" | "colorChartsStatusMedium" | "colorChartsStatusLow" | "colorChartsStatusPositive" | "colorChartsStatusInfo" | "colorChartsStatusNeutral" | "colorChartsThresholdNegative" | "colorChartsThresholdPositive" | "colorChartsThresholdInfo" | "colorChartsThresholdNeutral" | "colorChartsLineGrid" | "colorChartsLineTick" | "colorChartsLineAxis" | "colorChartsLabelAxis" | "colorChartsPaletteCategorical1" | "colorChartsPaletteCategorical2" | "colorChartsPaletteCategorical3" | "colorChartsPaletteCategorical4" | "colorChartsPaletteCategorical5" | "colorChartsPaletteCategorical6" | "colorChartsPaletteCategorical7" | "colorChartsPaletteCategorical8" | "colorChartsPaletteCategorical9" | "colorChartsPaletteCategorical10" | "colorChartsPaletteCategorical11" | "colorChartsPaletteCategorical12" | "colorChartsPaletteCategorical13" | "colorChartsPaletteCategorical14" | "colorChartsPaletteCategorical15" | "colorChartsPaletteCategorical16" | "colorChartsPaletteCategorical17" | "colorChartsPaletteCategorical18" | "colorChartsPaletteCategorical19" | "colorChartsPaletteCategorical20" | "colorChartsPaletteCategorical21" | "colorChartsPaletteCategorical22" | "colorChartsPaletteCategorical23" | "colorChartsPaletteCategorical24" | "colorChartsPaletteCategorical25" | "colorChartsPaletteCategorical26" | "colorChartsPaletteCategorical27" | "colorChartsPaletteCategorical28" | "colorChartsPaletteCategorical29" | "colorChartsPaletteCategorical30" | "colorChartsPaletteCategorical31" | "colorChartsPaletteCategorical32" | "colorChartsPaletteCategorical33" | "colorChartsPaletteCategorical34" | "colorChartsPaletteCategorical35" | "colorChartsPaletteCategorical36" | "colorChartsPaletteCategorical37" | "colorChartsPaletteCategorical38" | "colorChartsPaletteCategorical39" | "colorChartsPaletteCategorical40" | "colorChartsPaletteCategorical41" | "colorChartsPaletteCategorical42" | "colorChartsPaletteCategorical43" | "colorChartsPaletteCategorical44" | "colorChartsPaletteCategorical45" | "colorChartsPaletteCategorical46" | "colorChartsPaletteCategorical47" | "colorChartsPaletteCategorical48" | "colorChartsPaletteCategorical49" | "colorChartsPaletteCategorical50", ColorTokenValue>;
 
 export declare interface CheckableTagProps extends CheckableTagProps_2 {
@@ -1339,7 +1346,13 @@ export declare const DragDrop: typeof DragDropRoot & {
     /**
      * Zone where items can be dropped
      */
-    Droppable: <T extends DragData = unknown>({ id, children, className, disabled, placeholder, icon, render, onDrop, validate, ...rest }: DragDropDroppableProps<T>) => null;
+    Droppable: <T extends DragData = unknown, M extends boolean = false>({ id, children, className, disabled, placeholder, icon, render, onDrop, validate, multiple, value, onChange, renderValueLabel, renderValueIcon, ...rest }: DragDropDroppableProps<T, M>) => null;
+    /**
+     * Value component to display the value of the dragged item
+     */
+    Value: <T extends DragData, M extends boolean>(props: DragDropValueProps_2<T, M> & {
+        ref?: ForwardedRef<HTMLDivElement>;
+    }) => ReturnType<(<T_1 extends DragData, M_1 extends boolean>({ value, onChange, multiple, renderValueLabel, renderValueIcon, className, style, ...rest }: DragDropValueProps_2<T_1, M_1> & ComponentPropsWithoutRef<"div">, ref: ForwardedRef<HTMLDivElement>) => JSX.Element)>;
 };
 
 /**
@@ -1385,10 +1398,17 @@ export declare interface DragDropDraggableProps<T extends DragData = DragData> e
     onlyIndicatorDraggable?: boolean;
 }
 
+declare type DragDropDropableRenderFnProps<T extends DragData = DragData, M extends boolean = false> = {
+    isOver: boolean;
+    id: UniqueIdentifier;
+    value: M extends true ? T[] : T;
+    onChange: (value: M extends true ? T[] : T) => void;
+};
+
 /**
  * Props for the DropZone component
  */
-export declare interface DragDropDroppableProps<T extends DragData = DragData> extends Omit<React.ComponentPropsWithoutRef<"div">, "id" | "onDragEnter" | "onDragOver" | "onDragLeave" | "onDrop"> {
+export declare interface DragDropDroppableProps<T extends DragData = DragData, M extends boolean = false> extends Omit<React.ComponentPropsWithoutRef<"div">, "id" | "onDragEnter" | "onDragOver" | "onDragLeave" | "onDrop" | "onChange">, Omit<DragDropValueProps<T, M>, "id"> {
     /**
      * Unique identifier for the droppable area
      */
@@ -1410,10 +1430,7 @@ export declare interface DragDropDroppableProps<T extends DragData = DragData> e
     /**
      * Custom render function
      */
-    render?: useRender.RenderProp<{
-        isOver: boolean;
-        id: string;
-    }>;
+    render?: useRender.RenderProp<DragDropDropableRenderFnProps<T, M>>;
     /**
      * Callback fired when an item is dropped on this zone
      */
@@ -1425,6 +1442,10 @@ export declare interface DragDropDroppableProps<T extends DragData = DragData> e
      * Validate if the item can be dropped
      */
     validate?: (item: DraggableInfo<T>) => boolean;
+    /**
+     * Maximum number of items that can be dropped
+     */
+    maxItems?: number;
 }
 
 /**
@@ -1463,6 +1484,14 @@ export declare interface DragDropProps<T extends DragData = DragData> {
  */
 export declare function DragDropRoot<T extends DragData = DragData>({ children, onDragEnd: _onDragEnd, onDragStart: _onDragStart, onDrop: _onDrop, className, }: DragDropProps<T>): JSX.Element;
 
+declare interface DragDropValueProps<T extends DragData = DragData, M extends boolean = false> extends Omit<ComponentPropsWithoutRef<"div">, "onDragEnter" | "onDragOver" | "onDragLeave" | "onDrop" | "onChange"> {
+    multiple?: M;
+    value?: M extends true ? T[] : T;
+    onChange?: M extends true ? (value: T[]) => void : (value: T) => void;
+    renderValueLabel?: (singleValue: T) => ReactElement | string;
+    renderValueIcon?: (singleValue: T) => ReactElement;
+}
+
 export declare interface DragEndEvent<T extends DragData = DragData> {
     active: {
         id: UniqueIdentifier;
@@ -1939,6 +1968,8 @@ export declare interface ModalProviderProps {
 
 declare type ModalType = NonNullable<ModalFuncProps["type"]> | "default";
 
+export declare function moveTypingCursorToEnd(contentEditableElement: HTMLElement): void;
+
 export declare const Nav: {
     Item: <T extends HTMLElement>(props: NavItemProps & {
         ref?: React.Ref<T>;