@bioturing/components 0.15.5 → 0.17.0

package/dist/components/Badge/component.js

@@ -1,21 +1,13 @@
-import { jsx as a } from "react/jsx-runtime";
-import e from "antd/es/badge";
+"use client";
+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 n, useAntdCssVarClassname as c } from "../utils/antdUtils.js";
-import { clsx as d } from "../utils/cn.js";
-const g = ({ count: s, showZero: r, ...o }) => {
-  const t = n(), m = c();
-  return /* @__PURE__ */ a(
-    e,
-    {
-      count: s,
-      showZero: r,
-      className: d(t("badge"), m),
-      ...o
-    }
-  );
-};
+const m = ({ count: t, showZero: o, ...r }) => /* @__PURE__ */ e(n, { count: t, showZero: o, ...r }), d = Object.assign(m, {
+  Ribbon: i
+});
 export {
-  g as Badge
+  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":["import { clsx, useCls, useAntdCssVarClassname } from \"../utils\";\nimport {\n  default as AntdBadge,\n  type BadgeProps as AntdBadgeProps,\n} from \"antd/es/badge\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type BadgeProps = AntdBadgeProps;\n\nexport const Badge = ({ 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"],"names":["Badge","count","showZero","rest","cls","useCls","antdCssVar","useAntdCssVarClassname","jsx","AntdBadge","clsx"],"mappings":";;;;;AAWO,MAAMA,IAAQ,CAAC,EAAE,OAAAC,GAAO,UAAAC,GAAU,GAAGC,QAAuB;AACjE,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;"}
+{"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/Breadcrumb/component.js

@@ -1,6 +1,7 @@
+"use client";
 import { jsx as o } from "react/jsx-runtime";
 import m from "antd/es/breadcrumb";
-import l from "./useItemRender.js";
+import b from "./useItemRender.js";
 import './style.css';/* empty css          */
 import { useCls as c, useGetPrefixCls as d } from "../utils/antdUtils.js";
 import { clsx as n } from "../utils/cn.js";
@@ -11,7 +12,7 @@ const f = ({
   itemRender: t,
   ...a
 }) => {
-  const i = c(), { getPrefixCls: p } = d(), u = p("breadcrumb"), b = l(u, t);
+  const i = c(), { getPrefixCls: u } = d(), l = u("breadcrumb"), p = b(l, t);
   return /* @__PURE__ */ o(
     m,
     {
@@ -20,7 +21,7 @@ const f = ({
         r
       ),
       items: s,
-      itemRender: b,
+      itemRender: p,
       ...a
     }
   );

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Breadcrumb/component.tsx"],"sourcesContent":["\"use client\";\nimport { default as AntBreadcrumb } from \"antd/es/breadcrumb\";\nimport { clsx, useCls, useGetPrefixCls } from \"../utils\";\nimport { type BreadcrumbProps, type BreadcrumbItemProps } from \"./types\";\nimport useItemRender from \"./useItemRender\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Create inner function with forwarded ref\nconst BreadcrumbInner = ({\n  className,\n  items,\n  noWrap = false,\n  itemRender: outsideItemRender,\n  ...rest\n}: BreadcrumbProps) => {\n  const cls = useCls();\n  const { getPrefixCls } = useGetPrefixCls();\n  const componentPrefixCls = getPrefixCls(\"breadcrumb\");\n  const itemRender = useItemRender(componentPrefixCls, outsideItemRender);\n\n  return (\n    <AntBreadcrumb\n      className={clsx(\n        cls(\"breadcrumb\", noWrap && \"breadcrumb-nowrap\"),\n        className\n      )}\n      items={items}\n      itemRender={itemRender}\n      {...rest}\n    />\n  );\n};\n\n// Create the Item component\nconst Item = (props: BreadcrumbItemProps) => {\n  const { className, ...restProps } = props;\n  const cls = useCls();\n\n  return (\n    <AntBreadcrumb.Item\n      className={clsx(cls(\"breadcrumb-item\"), className)}\n      {...restProps}\n    />\n  );\n};\n\n// Create the Separator component\nconst Separator = (props: React.HTMLAttributes<HTMLSpanElement>) => {\n  const { className, ...restProps } = props;\n\n  return <AntBreadcrumb.Separator {...restProps} />;\n};\n\n// Create the final component with Item property and Separator properties\nexport const Breadcrumb = Object.assign(BreadcrumbInner, {\n  Item,\n  Separator,\n});\n"],"names":["BreadcrumbInner","className","items","noWrap","outsideItemRender","rest","cls","useCls","getPrefixCls","useGetPrefixCls","componentPrefixCls","itemRender","useItemRender","jsx","AntBreadcrumb","clsx","Item","props","restProps","Separator","Breadcrumb"],"mappings":";;;;;;AAUA,MAAMA,IAAkB,CAAC;AAAA,EACvB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,YAAYC;AAAA,EACZ,GAAGC;AACL,MAAuB;AACrB,QAAMC,IAAMC,EAAO,GACb,EAAE,cAAAC,EAAa,IAAIC,EAAgB,GACnCC,IAAqBF,EAAa,YAAY,GAC9CG,IAAaC,EAAcF,GAAoBN,CAAiB;AAGpE,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTT,EAAI,cAAcH,KAAU,mBAAmB;AAAA,QAC/CF;AAAA,MACF;AAAA,MACA,OAAAC;AAAA,MACA,YAAAS;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ,GAGMW,IAAO,CAACC,MAA+B;AAC3C,QAAM,EAAE,WAAAhB,GAAW,GAAGiB,EAAA,IAAcD,GAC9BX,IAAMC,EAAO;AAGjB,SAAA,gBAAAM;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,WAAWC,EAAKT,EAAI,iBAAiB,GAAGL,CAAS;AAAA,MAChD,GAAGiB;AAAA,IAAA;AAAA,EACN;AAEJ,GAGMC,IAAY,CAACF,MAAiD;AAClE,QAAM,EAAE,WAAAhB,GAAW,GAAGiB,EAAA,IAAcD;AAEpC,SAAQ,gBAAAJ,EAAAC,EAAc,WAAd,EAAyB,GAAGI,EAAW,CAAA;AACjD,GAGaE,IAAa,OAAO,OAAOpB,GAAiB;AAAA,EACvD,MAAAgB;AAAA,EACA,WAAAG;AACF,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Breadcrumb/component.tsx"],"sourcesContent":["\"use client\";\nimport { default as AntBreadcrumb } from \"antd/es/breadcrumb\";\nimport { clsx, useCls, useGetPrefixCls } from \"../utils\";\nimport { type BreadcrumbProps, type BreadcrumbItemProps } from \"./types\";\nimport useItemRender from \"./useItemRender\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Create inner function with forwarded ref\nconst BreadcrumbInner = ({\n  className,\n  items,\n  noWrap = false,\n  itemRender: outsideItemRender,\n  ...rest\n}: BreadcrumbProps) => {\n  const cls = useCls();\n  const { getPrefixCls } = useGetPrefixCls();\n  const componentPrefixCls = getPrefixCls(\"breadcrumb\");\n  const itemRender = useItemRender(componentPrefixCls, outsideItemRender);\n\n  return (\n    <AntBreadcrumb\n      className={clsx(\n        cls(\"breadcrumb\", noWrap && \"breadcrumb-nowrap\"),\n        className\n      )}\n      items={items}\n      itemRender={itemRender}\n      {...rest}\n    />\n  );\n};\n\n// Create the Item component\nconst Item = (props: BreadcrumbItemProps) => {\n  const { className, ...restProps } = props;\n  const cls = useCls();\n\n  return (\n    <AntBreadcrumb.Item\n      className={clsx(cls(\"breadcrumb-item\"), className)}\n      {...restProps}\n    />\n  );\n};\n\n// Create the Separator component\nconst Separator = (props: React.HTMLAttributes<HTMLSpanElement>) => {\n  const { className, ...restProps } = props;\n\n  return <AntBreadcrumb.Separator {...restProps} />;\n};\n\n// Create the final component with Item property and Separator properties\nexport const Breadcrumb = Object.assign(BreadcrumbInner, {\n  Item,\n  Separator,\n});\n"],"names":["BreadcrumbInner","className","items","noWrap","outsideItemRender","rest","cls","useCls","getPrefixCls","useGetPrefixCls","componentPrefixCls","itemRender","useItemRender","jsx","AntBreadcrumb","clsx","Item","props","restProps","Separator","Breadcrumb"],"mappings":";;;;;;;AAUA,MAAMA,IAAkB,CAAC;AAAA,EACvB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,YAAYC;AAAA,EACZ,GAAGC;AACL,MAAuB;AACrB,QAAMC,IAAMC,EAAO,GACb,EAAE,cAAAC,EAAa,IAAIC,EAAgB,GACnCC,IAAqBF,EAAa,YAAY,GAC9CG,IAAaC,EAAcF,GAAoBN,CAAiB;AAGpE,SAAA,gBAAAS;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC;AAAA,QACTT,EAAI,cAAcH,KAAU,mBAAmB;AAAA,QAC/CF;AAAA,MACF;AAAA,MACA,OAAAC;AAAA,MACA,YAAAS;AAAA,MACC,GAAGN;AAAA,IAAA;AAAA,EACN;AAEJ,GAGMW,IAAO,CAACC,MAA+B;AAC3C,QAAM,EAAE,WAAAhB,GAAW,GAAGiB,EAAA,IAAcD,GAC9BX,IAAMC,EAAO;AAGjB,SAAA,gBAAAM;AAAA,IAACC,EAAc;AAAA,IAAd;AAAA,MACC,WAAWC,EAAKT,EAAI,iBAAiB,GAAGL,CAAS;AAAA,MAChD,GAAGiB;AAAA,IAAA;AAAA,EACN;AAEJ,GAGMC,IAAY,CAACF,MAAiD;AAClE,QAAM,EAAE,WAAAhB,GAAW,GAAGiB,EAAA,IAAcD;AAEpC,SAAQ,gBAAAJ,EAAAC,EAAc,WAAd,EAAyB,GAAGI,EAAW,CAAA;AACjD,GAGaE,IAAa,OAAO,OAAOpB,GAAiB;AAAA,EACvD,MAAAgB;AAAA,EACA,WAAAG;AACF,CAAC;"}

package/dist/components/Button/component.js

@@ -1,8 +1,35 @@
-import { jsx as n } from "react/jsx-runtime";
+"use client";
+import { jsxs as u, jsx as s } from "react/jsx-runtime";
 import m from "antd/es/button";
-import { forwardRef as f } from "react";
+import { forwardRef as l } from "react";
 import './style.css';/* empty css          */
-const p = ({ style: t, ...o }, r) => /* @__PURE__ */ n(m, { ref: r, style: t, ...o }), B = f(p);
+import { useCls as a } from "../utils/antdUtils.js";
+const f = ({ negativeMargin: p = !0, type: t, size: n, variant: r, ...o }, e) => {
+  const c = p && (r === "text" || r === "link" || t == "text" || t === "link"), i = a();
+  return c ? /* @__PURE__ */ u(
+    "span",
+    {
+      className: i(
+        "btn-wrapper",
+        "btn-negative-margin-wrapper",
+        "btn-wrapper-" + n
+      ),
+      children: [
+        /* @__PURE__ */ s(
+          m,
+          {
+            ref: e,
+            type: t,
+            size: n,
+            variant: r,
+            ...o
+          }
+        ),
+        " "
+      ]
+    }
+  ) : /* @__PURE__ */ s(m, { ref: e, type: t, size: n, variant: r, ...o });
+}, B = l(f);
 export {
   B as Button
 };

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Button/component.tsx"],"sourcesContent":["import {\n  default as AntdButton,\n  type ButtonProps as AntdButtonProps,\n} from \"antd/es/button\";\nimport { forwardRef } from \"react\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport type ButtonProps = AntdButtonProps;\n\nconst ButtonInner = (\n  { style, ...rest }: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) => {\n  return <AntdButton ref={ref} style={style} {...rest} />;\n};\n\nexport const Button = forwardRef(ButtonInner) as (\n  props: ButtonProps & {\n    ref?: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>;\n  }\n) => ReturnType<typeof ButtonInner>;\n"],"names":["ButtonInner","style","rest","ref","jsx","AntdButton","Button","forwardRef"],"mappings":";;;;AAWA,MAAMA,IAAc,CAClB,EAAE,OAAAC,GAAO,GAAGC,EAAA,GACZC,MAEQ,gBAAAC,EAAAC,GAAA,EAAW,KAAAF,GAAU,OAAAF,GAAe,GAAGC,GAAM,GAG1CI,IAASC,EAAWP,CAAW;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Button/component.tsx"],"sourcesContent":["\"use client\";\n\nimport {\n  default as AntdButton,\n  type ButtonProps as AntdButtonProps,\n} from \"antd/es/button\";\nimport { forwardRef } from \"react\";\n\n// Import component-specific styles\nimport { useCls } from \"../utils\";\nimport \"./style.css\";\n\nexport interface ButtonProps extends AntdButtonProps {\n  /**\n   * If true, negative margin will be applied to the text and link buttons to make it align with content\n   * @default true\n   */\n  negativeMargin?: boolean;\n}\n\nconst ButtonInner = (\n  { negativeMargin = true, type, size, variant, ...rest }: ButtonProps,\n  ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>\n) => {\n  const useNegativeMargin =\n    negativeMargin &&\n    (variant === \"text\" ||\n      variant === \"link\" ||\n      type == \"text\" ||\n      type === \"link\");\n  const cls = useCls();\n  return useNegativeMargin ? (\n    <span\n      className={cls(\n        \"btn-wrapper\",\n        \"btn-negative-margin-wrapper\",\n        \"btn-wrapper-\" + size\n      )}\n    >\n      <AntdButton\n        ref={ref}\n        type={type}\n        size={size}\n        variant={variant}\n        {...rest}\n      />{\" \"}\n    </span>\n  ) : (\n    <AntdButton ref={ref} type={type} size={size} variant={variant} {...rest} />\n  );\n};\n\nexport const Button = forwardRef(ButtonInner) as (\n  props: ButtonProps & {\n    ref?: React.ForwardedRef<HTMLButtonElement | HTMLAnchorElement>;\n  }\n) => ReturnType<typeof ButtonInner>;\n"],"names":["ButtonInner","negativeMargin","type","size","variant","rest","ref","useNegativeMargin","cls","useCls","jsxs","jsx","AntdButton","Button","forwardRef"],"mappings":";;;;;;AAoBA,MAAMA,IAAc,CAClB,EAAE,gBAAAC,IAAiB,IAAM,MAAAC,GAAM,MAAAC,GAAM,SAAAC,GAAS,GAAGC,EAAK,GACtDC,MACG;AACG,QAAAC,IACJN,MACCG,MAAY,UACXA,MAAY,UACZF,KAAQ,UACRA,MAAS,SACPM,IAAMC,EAAO;AACnB,SAAOF,IACL,gBAAAG;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,WAAWF;AAAA,QACT;AAAA,QACA;AAAA,QACA,iBAAiBL;AAAA,MACnB;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAQ;AAAA,UAACC;AAAA,UAAA;AAAA,YACC,KAAAN;AAAA,YACA,MAAAJ;AAAA,YACA,MAAAC;AAAA,YACA,SAAAC;AAAA,YACC,GAAGC;AAAA,UAAA;AAAA,QACN;AAAA,QAAG;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA,sBAGJO,GAAW,EAAA,KAAAN,GAAU,MAAAJ,GAAY,MAAAC,GAAY,SAAAC,GAAmB,GAAGC,GAAM;AAE9E,GAEaQ,IAASC,EAAWd,CAAW;"}

package/dist/components/Button/style.css

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

package/dist/components/CodeBlock/component.js

@@ -1,3 +1,4 @@
+"use client";
 import { jsx as o, jsxs as _ } from "react/jsx-runtime";
 import { useState as p, useEffect as $ } from "react";
 import { Check as q, Copy as z } from "@bioturing/assets";
@@ -14,13 +15,13 @@ import { clsx as Z } from "../utils/cn.js";
 import { IconButton as H } from "../IconButton/component.js";
 const fo = ({
   code: u,
-  children: v,
+  children: s,
   // initial,
   lang: m = "tsx",
   className: S,
   options: n,
   activeOption: x,
-  defaultActiveOption: s = 0,
+  defaultActiveOption: v = 0,
   onActiveOptionChange: T,
   copyText: g = "Copy",
   copySuccessText: w = "Copied",
@@ -31,7 +32,7 @@ const fo = ({
   const [i, k] = X(
     x,
     T,
-    s
+    v
   ), [l, j] = p(u || ""), [A, B] = p(m), h = n && n.length > 0;
   $(() => {
     var t, r;
@@ -42,14 +43,14 @@ const fo = ({
   }, [
     u,
     i,
-    s,
+    v,
     n,
     m,
     h,
     k
   ]);
   const [L, a] = p(g), [M, b] = p(!1), D = () => {
-    const t = l || V(v);
+    const t = l || V(s);
     try {
       navigator.clipboard.writeText(t).then(() => {
         a(w), b(!0);
@@ -114,7 +115,7 @@ const fo = ({
                   }
                 )
               }
-            ) : v })
+            ) : s })
           }
         )
       ]

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/CodeBlock/component.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\nimport { Check, Copy } from \"@bioturing/assets\";\nimport { IconButton } from \"../IconButton\";\nimport { ScrollArea } from \"../ScrollArea\";\nimport { Segmented } from \"../Segmented\";\nimport { ThemeProvider } from \"../ThemeProvider/component\";\nimport { useControlledState } from \"../hooks\";\nimport { clsx, useCls, WithAntdTokens } from \"../utils\";\nimport { Highlight, themes } from \"prism-react-renderer\";\nimport type { CodeBlockProps } from \"./types\";\nimport { reactNodeToString } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport const CodeBlock = ({\n  code,\n  children,\n  // initial,\n  lang: defaultLang = \"tsx\",\n  className,\n  options,\n  activeOption: controlledActiveOption,\n  defaultActiveOption = 0,\n  onActiveOptionChange,\n  copyText = \"Copy\",\n  copySuccessText = \"Copied\",\n  classNames,\n  maxHeight,\n  ...rest\n}: CodeBlockProps) => {\n  const [activeOption, setActiveOption] = useControlledState(\n    controlledActiveOption,\n    onActiveOptionChange,\n    defaultActiveOption\n  );\n\n  const [currentCode, setCurrentCode] = useState(code || \"\");\n  const [lang, setLang] = useState(defaultLang);\n\n  const hasOptions = options && options.length > 0;\n\n  useEffect(() => {\n    if (hasOptions) {\n      const newCode = options[activeOption]?.code || \"\";\n      const newLang = options[activeOption]?.lang || defaultLang;\n      setCurrentCode(newCode);\n      setLang(newLang);\n    }\n  }, [\n    code,\n    activeOption,\n    defaultActiveOption,\n    options,\n    defaultLang,\n    hasOptions,\n    setActiveOption,\n  ]);\n\n  const [tooltipContent, setTooltipContent] = useState(copyText);\n  const [copySuccess, setCopySuccess] = useState(false);\n\n  const handleCopy = () => {\n    const codeContent = currentCode ? currentCode : reactNodeToString(children);\n    try {\n      navigator.clipboard.writeText(codeContent).then(() => {\n        setTooltipContent(copySuccessText);\n        setCopySuccess(true);\n      });\n    } catch (_) {\n      setTooltipContent(\"Failed to copy\");\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setTooltipContent(copyText);\n    setCopySuccess(false);\n  };\n\n  const cls = useCls();\n  return (\n    <ThemeProvider theme={\"dark\"}>\n      <WithAntdTokens\n        className={clsx(cls(\"code-block\"), className, classNames?.root)}\n        {...rest}\n      >\n        {hasOptions && (\n          <div className={cls(\"code-block-header\", classNames?.header)}>\n            <Segmented\n              value={activeOption}\n              onChange={setActiveOption}\n              options={options.map((opt, index) => ({\n                label: opt.label,\n                value: index,\n              }))}\n            />\n          </div>\n        )}\n        <div className={cls(\"code-block-copy\")}>\n          <IconButton\n            onClick={handleCopy}\n            label={tooltipContent}\n            onMouseLeave={handleMouseLeave}\n          >\n            {copySuccess ? <Check /> : <Copy />}\n          </IconButton>\n        </div>\n        <div\n          className={cls(\"code-block-content\", classNames?.content)}\n          style={{\n            maxHeight:\n              maxHeight &&\n              (typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight),\n          }}\n        >\n          <ScrollArea>\n            {currentCode ? (\n              <Highlight\n                language={lang}\n                code={currentCode}\n                theme={themes.vsDark}\n              >\n                {({\n                  className,\n                  style,\n                  tokens,\n                  getLineProps,\n                  getTokenProps,\n                }) => (\n                  <pre\n                    style={{ ...style, backgroundColor: \"transparent\" }}\n                    className={className}\n                  >\n                    {tokens.map((line, i) => (\n                      <div key={i} {...getLineProps({ line })}>\n                        {/* <span>{i + 1}</span> */}\n                        {line.map((token, key) => (\n                          <span key={key} {...getTokenProps({ token })} />\n                        ))}\n                      </div>\n                    ))}\n                  </pre>\n                )}\n              </Highlight>\n            ) : (\n              children\n            )}\n          </ScrollArea>\n        </div>\n      </WithAntdTokens>\n    </ThemeProvider>\n  );\n};\n"],"names":["CodeBlock","code","children","defaultLang","className","options","controlledActiveOption","defaultActiveOption","onActiveOptionChange","copyText","copySuccessText","classNames","maxHeight","rest","activeOption","setActiveOption","useControlledState","currentCode","setCurrentCode","useState","lang","setLang","hasOptions","useEffect","newCode","_a","newLang","_b","tooltipContent","setTooltipContent","copySuccess","setCopySuccess","handleCopy","codeContent","reactNodeToString","handleMouseLeave","cls","useCls","jsx","ThemeProvider","jsxs","WithAntdTokens","clsx","Segmented","opt","index","IconButton","Check","Copy","ScrollArea","Highlight","themes","style","tokens","getLineProps","getTokenProps","line","i","token","key"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/CodeBlock/component.tsx"],"sourcesContent":["\"use client\";\nimport { useEffect, useState } from \"react\";\nimport { Check, Copy } from \"@bioturing/assets\";\nimport { IconButton } from \"../IconButton\";\nimport { ScrollArea } from \"../ScrollArea\";\nimport { Segmented } from \"../Segmented\";\nimport { ThemeProvider } from \"../ThemeProvider/component\";\nimport { useControlledState } from \"../hooks\";\nimport { clsx, useCls, WithAntdTokens } from \"../utils\";\nimport { Highlight, themes } from \"prism-react-renderer\";\nimport type { CodeBlockProps } from \"./types\";\nimport { reactNodeToString } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport const CodeBlock = ({\n  code,\n  children,\n  // initial,\n  lang: defaultLang = \"tsx\",\n  className,\n  options,\n  activeOption: controlledActiveOption,\n  defaultActiveOption = 0,\n  onActiveOptionChange,\n  copyText = \"Copy\",\n  copySuccessText = \"Copied\",\n  classNames,\n  maxHeight,\n  ...rest\n}: CodeBlockProps) => {\n  const [activeOption, setActiveOption] = useControlledState(\n    controlledActiveOption,\n    onActiveOptionChange,\n    defaultActiveOption\n  );\n\n  const [currentCode, setCurrentCode] = useState(code || \"\");\n  const [lang, setLang] = useState(defaultLang);\n\n  const hasOptions = options && options.length > 0;\n\n  useEffect(() => {\n    if (hasOptions) {\n      const newCode = options[activeOption]?.code || \"\";\n      const newLang = options[activeOption]?.lang || defaultLang;\n      setCurrentCode(newCode);\n      setLang(newLang);\n    }\n  }, [\n    code,\n    activeOption,\n    defaultActiveOption,\n    options,\n    defaultLang,\n    hasOptions,\n    setActiveOption,\n  ]);\n\n  const [tooltipContent, setTooltipContent] = useState(copyText);\n  const [copySuccess, setCopySuccess] = useState(false);\n\n  const handleCopy = () => {\n    const codeContent = currentCode ? currentCode : reactNodeToString(children);\n    try {\n      navigator.clipboard.writeText(codeContent).then(() => {\n        setTooltipContent(copySuccessText);\n        setCopySuccess(true);\n      });\n    } catch (_) {\n      setTooltipContent(\"Failed to copy\");\n    }\n  };\n\n  const handleMouseLeave = () => {\n    setTooltipContent(copyText);\n    setCopySuccess(false);\n  };\n\n  const cls = useCls();\n  return (\n    <ThemeProvider theme={\"dark\"}>\n      <WithAntdTokens\n        className={clsx(cls(\"code-block\"), className, classNames?.root)}\n        {...rest}\n      >\n        {hasOptions && (\n          <div className={cls(\"code-block-header\", classNames?.header)}>\n            <Segmented\n              value={activeOption}\n              onChange={setActiveOption}\n              options={options.map((opt, index) => ({\n                label: opt.label,\n                value: index,\n              }))}\n            />\n          </div>\n        )}\n        <div className={cls(\"code-block-copy\")}>\n          <IconButton\n            onClick={handleCopy}\n            label={tooltipContent}\n            onMouseLeave={handleMouseLeave}\n          >\n            {copySuccess ? <Check /> : <Copy />}\n          </IconButton>\n        </div>\n        <div\n          className={cls(\"code-block-content\", classNames?.content)}\n          style={{\n            maxHeight:\n              maxHeight &&\n              (typeof maxHeight === \"number\" ? `${maxHeight}px` : maxHeight),\n          }}\n        >\n          <ScrollArea>\n            {currentCode ? (\n              <Highlight\n                language={lang}\n                code={currentCode}\n                theme={themes.vsDark}\n              >\n                {({\n                  className,\n                  style,\n                  tokens,\n                  getLineProps,\n                  getTokenProps,\n                }) => (\n                  <pre\n                    style={{ ...style, backgroundColor: \"transparent\" }}\n                    className={className}\n                  >\n                    {tokens.map((line, i) => (\n                      <div key={i} {...getLineProps({ line })}>\n                        {/* <span>{i + 1}</span> */}\n                        {line.map((token, key) => (\n                          <span key={key} {...getTokenProps({ token })} />\n                        ))}\n                      </div>\n                    ))}\n                  </pre>\n                )}\n              </Highlight>\n            ) : (\n              children\n            )}\n          </ScrollArea>\n        </div>\n      </WithAntdTokens>\n    </ThemeProvider>\n  );\n};\n"],"names":["CodeBlock","code","children","defaultLang","className","options","controlledActiveOption","defaultActiveOption","onActiveOptionChange","copyText","copySuccessText","classNames","maxHeight","rest","activeOption","setActiveOption","useControlledState","currentCode","setCurrentCode","useState","lang","setLang","hasOptions","useEffect","newCode","_a","newLang","_b","tooltipContent","setTooltipContent","copySuccess","setCopySuccess","handleCopy","codeContent","reactNodeToString","handleMouseLeave","cls","useCls","jsx","ThemeProvider","jsxs","WithAntdTokens","clsx","Segmented","opt","index","IconButton","Check","Copy","ScrollArea","Highlight","themes","style","tokens","getLineProps","getTokenProps","line","i","token","key"],"mappings":"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"}

package/dist/components/CodeBlock/style.css

@@ -1 +1 @@
-@layer components{.ds-code-block{background:var(--ds-color-bg-layout);box-shadow:0 0 0 1px inset var(--ds-color-split);border-radius:var(--ds-border-radius);padding:1rem;position:relative;font-family:var(--font-mono)}.ds-code-block-header{display:flex;justify-items:start;margin-bottom:.75rem}.ds-code-block-copy{top:1rem;right:.75rem;opacity:0;transition:opacity .2s ease-in-out;position:absolute}.ds-code-block:hover .ds-code-block-copy{opacity:100}.ds-code-block-content{padding-right:1.5rem;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.ds-code-block-content .ds-scoll-area{max-height:30rem}}
+@layer components{.ds-code-block{background:var(--ds-color-bg-layout);box-shadow:0 0 0 1px inset var(--ds-color-split);border-radius:var(--ds-border-radius);padding:1rem;position:relative;font-family:var(--font-mono);color:var(--ds-color-text)}.ds-code-block-header{display:flex;justify-items:start;margin-bottom:.75rem}.ds-code-block-copy{top:1rem;right:.75rem;opacity:0;transition:opacity .2s ease-in-out;position:absolute}.ds-code-block:hover .ds-code-block-copy{opacity:100}.ds-code-block-content{padding-right:1.5rem;display:flex;flex-direction:column;flex:1;min-height:0;overflow:hidden}.ds-code-block-content .ds-scoll-area{max-height:30rem}}

package/dist/components/Collapse/component.js

@@ -1,28 +1,29 @@
+"use client";
 import { jsx as a } from "react/jsx-runtime";
 import { Collapse as r } from "antd";
-import { forwardRef as p } from "react";
+import { forwardRef as c } from "react";
 import './style.css';/* empty css          */
 import { useCls as t } from "../utils/antdUtils.js";
-import { clsx as c } from "../utils/cn.js";
-const m = (s, o) => {
-  const { className: e, ...l } = s, n = t();
+import { clsx as p } from "../utils/cn.js";
+const m = (s, e) => {
+  const { className: o, ...l } = s, n = t();
   return /* @__PURE__ */ a(
     r,
     {
-      ref: o,
-      className: n("collapse", e),
+      ref: e,
+      className: n("collapse", o),
       ...l
     }
   );
-}, i = p(m), f = (s) => {
-  const { className: o, ...e } = s, l = t();
+}, i = c(m), f = (s) => {
+  const { className: e, ...o } = s, l = t();
   return console.warn(
     "[bioturing-ds] Collapse.Panel is deprecated. Please use items prop instead."
   ), /* @__PURE__ */ a(
     r.Panel,
     {
-      className: c(l("collapse-panel"), o),
-      ...e
+      className: p(l("collapse-panel"), e),
+      ...o
     }
   );
 }, b = Object.assign(i, {

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Collapse/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Collapse as AntCollapse,\n  type CollapseProps as AntCollapseProps,\n  type CollapsePanelProps as AntCollapsePanelProps,\n} from \"antd\";\nimport { type ForwardedRef, forwardRef } from \"react\";\nimport { useCls, clsx } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define props interface extending Ant Design's CollapseProps\nexport interface CollapseProps extends AntCollapseProps {}\n\n// Define props interface extending Ant Design's CollapsePanelProps\nexport interface CollapsePanelProps extends AntCollapsePanelProps {}\n\n// Create inner function with forwarded ref\nconst CollapseInner = (\n  props: CollapseProps,\n  ref: ForwardedRef<HTMLDivElement>\n) => {\n  const { className, ...restProps } = props;\n  const cls = useCls();\n  return (\n    <AntCollapse\n      ref={ref}\n      className={cls(\"collapse\", className)}\n      {...restProps}\n    />\n  );\n};\n\n// Use forwardRef with type assertion\nconst MainCollapse = forwardRef(CollapseInner) as (\n  props: CollapseProps & {\n    ref?: React.ForwardedRef<HTMLDivElement>;\n  }\n) => ReturnType<typeof CollapseInner>;\n\n// Create the Panel component (deprecated)\nconst Panel = (props: CollapsePanelProps) => {\n  const { className, ...restProps } = props;\n  const cls = useCls();\n  console.warn(\n    \"[bioturing-ds] Collapse.Panel is deprecated. Please use items prop instead.\"\n  );\n  return (\n    <AntCollapse.Panel\n      className={clsx(cls(\"collapse-panel\"), className)}\n      {...restProps}\n    />\n  );\n};\n\n// Create the final component with Panel property\nexport const Collapse = Object.assign(MainCollapse, {\n  Panel: Panel,\n});\n"],"names":["CollapseInner","props","ref","className","restProps","cls","useCls","jsx","AntCollapse","MainCollapse","forwardRef","Panel","clsx","Collapse"],"mappings":";;;;;;AAmBA,MAAMA,IAAgB,CACpBC,GACAC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAAcH,GAC9BI,IAAMC,EAAO;AAEjB,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,WAAWG,EAAI,YAAYF,CAAS;AAAA,MACnC,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ,GAGMK,IAAeC,EAAWV,CAAa,GAOvCW,IAAQ,CAACV,MAA8B;AAC3C,QAAM,EAAE,WAAAE,GAAW,GAAGC,EAAA,IAAcH,GAC9BI,IAAMC,EAAO;AACX,iBAAA;AAAA,IACN;AAAA,EACF,GAEE,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWI,EAAKP,EAAI,gBAAgB,GAAGF,CAAS;AAAA,MAC/C,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ,GAGaS,IAAW,OAAO,OAAOJ,GAAc;AAAA,EAClD,OAAAE;AACF,CAAC;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Collapse/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  Collapse as AntCollapse,\n  type CollapseProps as AntCollapseProps,\n  type CollapsePanelProps as AntCollapsePanelProps,\n} from \"antd\";\nimport { type ForwardedRef, forwardRef } from \"react\";\nimport { useCls, clsx } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define props interface extending Ant Design's CollapseProps\nexport interface CollapseProps extends AntCollapseProps {}\n\n// Define props interface extending Ant Design's CollapsePanelProps\nexport interface CollapsePanelProps extends AntCollapsePanelProps {}\n\n// Create inner function with forwarded ref\nconst CollapseInner = (\n  props: CollapseProps,\n  ref: ForwardedRef<HTMLDivElement>\n) => {\n  const { className, ...restProps } = props;\n  const cls = useCls();\n  return (\n    <AntCollapse\n      ref={ref}\n      className={cls(\"collapse\", className)}\n      {...restProps}\n    />\n  );\n};\n\n// Use forwardRef with type assertion\nconst MainCollapse = forwardRef(CollapseInner) as (\n  props: CollapseProps & {\n    ref?: React.ForwardedRef<HTMLDivElement>;\n  }\n) => ReturnType<typeof CollapseInner>;\n\n// Create the Panel component (deprecated)\nconst Panel = (props: CollapsePanelProps) => {\n  const { className, ...restProps } = props;\n  const cls = useCls();\n  console.warn(\n    \"[bioturing-ds] Collapse.Panel is deprecated. Please use items prop instead.\"\n  );\n  return (\n    <AntCollapse.Panel\n      className={clsx(cls(\"collapse-panel\"), className)}\n      {...restProps}\n    />\n  );\n};\n\n// Create the final component with Panel property\nexport const Collapse = Object.assign(MainCollapse, {\n  Panel: Panel,\n});\n"],"names":["CollapseInner","props","ref","className","restProps","cls","useCls","jsx","AntCollapse","MainCollapse","forwardRef","Panel","clsx","Collapse"],"mappings":";;;;;;;AAmBA,MAAMA,IAAgB,CACpBC,GACAC,MACG;AACH,QAAM,EAAE,WAAAC,GAAW,GAAGC,EAAA,IAAcH,GAC9BI,IAAMC,EAAO;AAEjB,SAAA,gBAAAC;AAAA,IAACC;AAAAA,IAAA;AAAA,MACC,KAAAN;AAAA,MACA,WAAWG,EAAI,YAAYF,CAAS;AAAA,MACnC,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ,GAGMK,IAAeC,EAAWV,CAAa,GAOvCW,IAAQ,CAACV,MAA8B;AAC3C,QAAM,EAAE,WAAAE,GAAW,GAAGC,EAAA,IAAcH,GAC9BI,IAAMC,EAAO;AACX,iBAAA;AAAA,IACN;AAAA,EACF,GAEE,gBAAAC;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWI,EAAKP,EAAI,gBAAgB,GAAGF,CAAS;AAAA,MAC/C,GAAGC;AAAA,IAAA;AAAA,EACN;AAEJ,GAGaS,IAAW,OAAO,OAAOJ,GAAc;AAAA,EAClD,OAAAE;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":"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"}

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/DSRoot/component.js

@@ -1,21 +1,22 @@
+"use client";
 import { jsx as r, jsxs as p } from "react/jsx-runtime";
 import { ThemeProvider as l } from "../ThemeProvider/component.js";
 import { Modal as n } from "../Modal/index.js";
 import c from "antd/es/app/App";
-import { DSRootContextProvider as f } from "./context.js";
+import { DSRootContextProvider as s } from "./context.js";
 import './style.css';/* empty css          */
 import { Toast as i } from "../Toast/component.js";
-const u = ({
+const j = ({
   className: t,
-  appendClassesTo: m = "html",
-  children: e,
+  appendClassesTo: e = "html",
+  children: m,
   theme: o,
   ...d
-}) => /* @__PURE__ */ r(f, { value: { theme: o }, children: /* @__PURE__ */ r(l, { theme: o, ...d, appendClassesTo: m, children: /* @__PURE__ */ r(c, { className: t, children: /* @__PURE__ */ r(i.Provider, { children: /* @__PURE__ */ p(n.Provider, { children: [
+}) => /* @__PURE__ */ r(s, { value: { theme: o }, children: /* @__PURE__ */ r(l, { theme: o, ...d, appendClassesTo: e, children: /* @__PURE__ */ r(c, { className: t, children: /* @__PURE__ */ r(i.Provider, { children: /* @__PURE__ */ p(n.Provider, { children: [
   /* @__PURE__ */ r(i.List, {}),
-  e
+  m
 ] }) }) }) }) });
 export {
-  u as DSRoot
+  j as DSRoot
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/DSRoot/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  ThemeProvider,\n  type ThemeProviderProps,\n} from \"../ThemeProvider/component\";\nimport { Toast } from \"../Toast\";\nimport { Modal } from \"../Modal\";\nimport App from \"antd/es/app/App\";\nimport { DSRootContextProvider } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface DSRootProps extends ThemeProviderProps {\n  /**\n   * Classname passed to App component\n   */\n  className?: string;\n\n  /**\n   * Element to which the theme classes are appended\n   * @default \"html\"\n   */\n  appendClassesTo?: string | HTMLElement;\n}\n\nexport const DSRoot = ({\n  className,\n  appendClassesTo = \"html\",\n  children,\n  theme,\n  ...props\n}: DSRootProps) => {\n  return (\n    <DSRootContextProvider value={{ theme: theme }}>\n      <ThemeProvider theme={theme} {...props} appendClassesTo={appendClassesTo}>\n        <App className={className}>\n          <Toast.Provider>\n            <Modal.Provider>\n              <Toast.List />\n              {children}\n            </Modal.Provider>\n          </Toast.Provider>\n        </App>\n      </ThemeProvider>\n    </DSRootContextProvider>\n  );\n};\n"],"names":["DSRoot","className","appendClassesTo","children","theme","props","jsx","DSRootContextProvider","ThemeProvider","App","Toast","jsxs","Modal"],"mappings":";;;;;;;AA0BO,MAAMA,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAACC,KAAsB,OAAO,EAAE,OAAAH,EAC9B,GAAA,UAAA,gBAAAE,EAACE,GAAc,EAAA,OAAAJ,GAAe,GAAGC,GAAO,iBAAAH,GACtC,UAAC,gBAAAI,EAAAG,GAAA,EAAI,WAAAR,GACH,UAAC,gBAAAK,EAAAI,EAAM,UAAN,EACC,UAAA,gBAAAC,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,EAAC,gBAAAN,EAAAI,EAAM,MAAN,EAAW;AAAA,EACXP;AACH,EAAA,CAAA,EACF,CAAA,GACF,EAAA,CACF,EACF,CAAA;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/DSRoot/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  ThemeProvider,\n  type ThemeProviderProps,\n} from \"../ThemeProvider/component\";\nimport { Toast } from \"../Toast\";\nimport { Modal } from \"../Modal\";\nimport App from \"antd/es/app/App\";\nimport { DSRootContextProvider } from \"./context\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface DSRootProps extends ThemeProviderProps {\n  /**\n   * Classname passed to App component\n   */\n  className?: string;\n\n  /**\n   * Element to which the theme classes are appended\n   * @default \"html\"\n   */\n  appendClassesTo?: string | HTMLElement;\n}\n\nexport const DSRoot = ({\n  className,\n  appendClassesTo = \"html\",\n  children,\n  theme,\n  ...props\n}: DSRootProps) => {\n  return (\n    <DSRootContextProvider value={{ theme: theme }}>\n      <ThemeProvider theme={theme} {...props} appendClassesTo={appendClassesTo}>\n        <App className={className}>\n          <Toast.Provider>\n            <Modal.Provider>\n              <Toast.List />\n              {children}\n            </Modal.Provider>\n          </Toast.Provider>\n        </App>\n      </ThemeProvider>\n    </DSRootContextProvider>\n  );\n};\n"],"names":["DSRoot","className","appendClassesTo","children","theme","props","jsx","DSRootContextProvider","ThemeProvider","App","Toast","jsxs","Modal"],"mappings":";;;;;;;;AA0BO,MAAMA,IAAS,CAAC;AAAA,EACrB,WAAAC;AAAA,EACA,iBAAAC,IAAkB;AAAA,EAClB,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,GAAGC;AACL,MAEI,gBAAAC,EAACC,KAAsB,OAAO,EAAE,OAAAH,EAC9B,GAAA,UAAA,gBAAAE,EAACE,GAAc,EAAA,OAAAJ,GAAe,GAAGC,GAAO,iBAAAH,GACtC,UAAC,gBAAAI,EAAAG,GAAA,EAAI,WAAAR,GACH,UAAC,gBAAAK,EAAAI,EAAM,UAAN,EACC,UAAA,gBAAAC,EAACC,EAAM,UAAN,EACC,UAAA;AAAA,EAAC,gBAAAN,EAAAI,EAAM,MAAN,EAAW;AAAA,EACXP;AACH,EAAA,CAAA,EACF,CAAA,GACF,EAAA,CACF,EACF,CAAA;"}

package/dist/components/DSRoot/context.js

@@ -1,9 +1,10 @@
+"use client";
 import t from "react";
-const o = t.createContext({
+const e = t.createContext({
   theme: "light"
-}), r = o.Provider, n = () => t.useContext(o);
+}), n = e.Provider, r = () => t.useContext(e);
 export {
-  r as DSRootContextProvider,
-  n as useDS
+  n as DSRootContextProvider,
+  r as useDS
 };
 //# sourceMappingURL=context.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"context.js","sources":["../../../src/components/DSRoot/context.ts"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nconst DSRootContext = React.createContext<{\n  theme: \"light\" | \"dark\";\n}>({\n  theme: \"light\",\n});\n\nexport const DSRootContextProvider = DSRootContext.Provider;\n\nexport const useDS = () => React.useContext(DSRootContext);\n"],"names":["DSRootContext","React","DSRootContextProvider","useDS"],"mappings":";AAGA,MAAMA,IAAgBC,EAAM,cAEzB;AAAA,EACD,OAAO;AACT,CAAC,GAEYC,IAAwBF,EAAc,UAEtCG,IAAQ,MAAMF,EAAM,WAAWD,CAAa;"}
+{"version":3,"file":"context.js","sources":["../../../src/components/DSRoot/context.ts"],"sourcesContent":["\"use client\";\nimport React from \"react\";\n\nconst DSRootContext = React.createContext<{\n  theme: \"light\" | \"dark\";\n}>({\n  theme: \"light\",\n});\n\nexport const DSRootContextProvider = DSRootContext.Provider;\n\nexport const useDS = () => React.useContext(DSRootContext);\n"],"names":["DSRootContext","React","DSRootContextProvider","useDS"],"mappings":";;AAGA,MAAMA,IAAgBC,EAAM,cAEzB;AAAA,EACD,OAAO;AACT,CAAC,GAEYC,IAAwBF,EAAc,UAEtCG,IAAQ,MAAMF,EAAM,WAAWD,CAAa;"}

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