@bioturing/components 0.17.1 → 0.19.0

package/dist/components/Nav/item.js

@@ -1,36 +1,37 @@
 "use client";
-import { jsxs as c, jsx as a, Fragment as l } from "react/jsx-runtime";
-import { forwardRef as d } from "react";
-import { useRender as p } from "@base-ui-components/react/use-render";
-import { useCls as f } from "../utils/antdUtils.js";
-import { clsx as v } from "../utils/cn.js";
-const x = ({
-  icon: r,
-  active: s = !1,
-  render: n,
-  onClick: N,
-  className: m,
-  children: o,
-  ...t
-}, i) => {
-  const e = f();
-  return p({
-    render: n ?? /* @__PURE__ */ a("button", { className: v(e("nav-item"), m) }),
-    ref: i,
+import { jsxs as p, jsx as a, Fragment as c } from "react/jsx-runtime";
+import f, { forwardRef as u, useMemo as x, isValidElement as N } from "react";
+import { useRender as v } from "@base-ui-components/react/use-render";
+import { useCls as h } from "../utils/antdUtils.js";
+import { clsx as I } from "../utils/cn.js";
+const R = (e) => N(e), j = ({
+  icon: e,
+  active: r = !1,
+  render: m,
+  onClick: w,
+  className: o,
+  children: l,
+  changeIconWeightOnActive: s = !0,
+  ...n
+}, d) => {
+  const t = h(), i = x(() => !s || !r || !R(e) ? e : f.cloneElement(e, { weight: "fill" }), [e, s, r]);
+  return v({
+    render: m ?? /* @__PURE__ */ a("button", { className: I(t("nav-item"), o) }),
+    ref: d,
     props: {
-      "data-active": s || void 0,
-      "aria-expanded": t["aria-expanded"],
+      "data-active": r || void 0,
+      "aria-expanded": n["aria-expanded"],
       className: void 0,
-      ...t,
-      children: /* @__PURE__ */ c(l, { children: [
-        /* @__PURE__ */ a("span", { className: e("nav-item-icon"), children: r }),
-        /* @__PURE__ */ a("span", { className: e("nav-item-content"), children: o })
+      ...n,
+      children: /* @__PURE__ */ p(c, { children: [
+        /* @__PURE__ */ a("span", { className: t("nav-item-icon"), children: i }),
+        /* @__PURE__ */ a("span", { className: t("nav-item-content"), children: l })
       ] })
     },
-    state: { active: s, icon: r }
+    state: { active: r, icon: e }
   });
-}, R = d(x);
+}, F = u(j);
 export {
-  R as NavItem
+  F as NavItem
 };
 //# sourceMappingURL=item.js.map

package/dist/components/Nav/item.js.map

@@ -1 +1 @@
-{"version":3,"file":"item.js","sources":["../../../src/components/Nav/item.tsx"],"sourcesContent":["\"use client\";\nimport React, { useState, type MouseEvent, forwardRef } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { Transition } from \"../Transition\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\nexport interface NavItemProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  icon?: React.ReactNode;\n  active?: boolean;\n  render?: useRender.RenderProp<{\n    active: boolean;\n    icon?: React.ReactNode;\n  }>;\n  size?: \"small\" | \"medium\" | \"large\";\n}\n\nconst NavItemImpl = <T extends HTMLElement>(\n  {\n    icon,\n    active = false,\n    render,\n    onClick,\n    className,\n    children,\n    ...rest\n  }: NavItemProps,\n  ref: React.Ref<T>\n) => {\n  const cls = useCls();\n\n  return useRender({\n    render: render ?? <button className={clsx(cls(\"nav-item\"), className)} />,\n    ref,\n    props: {\n      \"data-active\": active || undefined,\n      \"aria-expanded\": rest[\"aria-expanded\"],\n      className: undefined,\n      ...rest,\n      children: (\n        <>\n          <span className={cls(\"nav-item-icon\")}>{icon}</span>\n          {/* <Transition\n            starting=\"opacity-0 max-w-[0]\"\n            ending=\"opacity-0 max-w-[0]\"\n            className={cls(\"nav-item-transition\")}\n          > */}\n          <span className={cls(\"nav-item-content\")}>{children}</span>\n          {/* </Transition> */}\n        </>\n      ),\n    },\n    state: { active, icon },\n  });\n};\n\nconst NavItem = forwardRef(NavItemImpl) as <T extends HTMLElement>(\n  props: NavItemProps & { ref?: React.Ref<T> }\n) => ReturnType<typeof NavItemImpl>;\n\nexport { NavItem };\n"],"names":["NavItemImpl","icon","active","render","onClick","className","children","rest","ref","cls","useCls","useRender","jsx","clsx","jsxs","Fragment","NavItem","forwardRef"],"mappings":";;;;;;AAiBA,MAAMA,IAAc,CAClB;AAAA,EACE,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO;AAEnB,SAAOC,EAAU;AAAA,IACf,QAAQR,KAAU,gBAAAS,EAAC,UAAO,EAAA,WAAWC,EAAKJ,EAAI,UAAU,GAAGJ,CAAS,EAAG,CAAA;AAAA,IACvE,KAAAG;AAAA,IACA,OAAO;AAAA,MACL,eAAeN,KAAU;AAAA,MACzB,iBAAiBK,EAAK,eAAe;AAAA,MACrC,WAAW;AAAA,MACX,GAAGA;AAAA,MACH,UAEI,gBAAAO,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAH,EAAC,QAAK,EAAA,WAAWH,EAAI,eAAe,GAAI,UAAKR,GAAA;AAAA,0BAM5C,QAAK,EAAA,WAAWQ,EAAI,kBAAkB,GAAI,UAAAH,EAAS,CAAA;AAAA,MAAA,EAEtD,CAAA;AAAA,IAEJ;AAAA,IACA,OAAO,EAAE,QAAAJ,GAAQ,MAAAD,EAAK;AAAA,EAAA,CACvB;AACH,GAEMe,IAAUC,EAAWjB,CAAW;"}
+{"version":3,"file":"item.js","sources":["../../../src/components/Nav/item.tsx"],"sourcesContent":["\"use client\";\nimport React, {\n  useState,\n  type MouseEvent,\n  forwardRef,\n  isValidElement,\n  useMemo,\n} from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { Transition } from \"../Transition\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\n\nexport interface NavItemProps\n  extends React.ButtonHTMLAttributes<HTMLButtonElement> {\n  /**\n   * The icon to display in the nav item\n   */\n  icon?: React.ReactNode;\n  /**\n   * Whether the nav item is active\n   */\n  active?: boolean;\n  /**\n   * The render prop to render the nav item\n   */\n  render?: useRender.RenderProp<{\n    active: boolean;\n    icon?: React.ReactNode;\n  }>;\n  /**\n   * The size of the nav item\n   * @default \"medium\"\n   */\n  size?: \"small\" | \"medium\" | \"large\";\n  /**\n   * Whether to change the icon weight on active state\n   * @default true\n   */\n  changeIconWeightOnActive?: boolean;\n}\n\n// Define a type for elements that can have a weight prop\ntype ElementWithWeight = React.ReactElement<{ weight?: string }>;\n\n// Type guard to check if an element can accept a weight prop\nconst canHaveWeightProp = (el: React.ReactNode): el is ElementWithWeight => {\n  return isValidElement(el);\n};\n\nconst NavItemImpl = <T extends HTMLElement>(\n  {\n    icon,\n    active = false,\n    render,\n    onClick,\n    className,\n    children,\n    changeIconWeightOnActive = true,\n    ...rest\n  }: NavItemProps,\n  ref: React.Ref<T>\n) => {\n  const cls = useCls();\n\n  // Apply weight prop only if the element can accept it\n  const renderedIcon = useMemo(() => {\n    if (!changeIconWeightOnActive || !active || !canHaveWeightProp(icon)) {\n      return icon;\n    }\n    return React.cloneElement(icon, { weight: \"fill\" });\n  }, [icon, changeIconWeightOnActive, active]);\n\n  return useRender({\n    render: render ?? <button className={clsx(cls(\"nav-item\"), className)} />,\n    ref,\n    props: {\n      \"data-active\": active || undefined,\n      \"aria-expanded\": rest[\"aria-expanded\"],\n      className: undefined,\n      ...rest,\n      children: (\n        <>\n          <span className={cls(\"nav-item-icon\")}>{renderedIcon}</span>\n          {/* <Transition\n            starting=\"opacity-0 max-w-[0]\"\n            ending=\"opacity-0 max-w-[0]\"\n            className={cls(\"nav-item-transition\")}\n          > */}\n          <span className={cls(\"nav-item-content\")}>{children}</span>\n          {/* </Transition> */}\n        </>\n      ),\n    },\n    state: { active, icon },\n  });\n};\n\nconst NavItem = forwardRef(NavItemImpl) as <T extends HTMLElement>(\n  props: NavItemProps & { ref?: React.Ref<T> }\n) => ReturnType<typeof NavItemImpl>;\n\nexport { NavItem };\n"],"names":["canHaveWeightProp","el","isValidElement","NavItemImpl","icon","active","render","onClick","className","children","changeIconWeightOnActive","rest","ref","cls","useCls","renderedIcon","useMemo","React","useRender","jsx","clsx","jsxs","Fragment","NavItem","forwardRef"],"mappings":";;;;;;AA6CA,MAAMA,IAAoB,CAACC,MAClBC,EAAeD,CAAE,GAGpBE,IAAc,CAClB;AAAA,EACE,MAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,QAAAC;AAAA,EACA,SAAAC;AAAA,EACA,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,0BAAAC,IAA2B;AAAA,EAC3B,GAAGC;AACL,GACAC,MACG;AACH,QAAMC,IAAMC,EAAO,GAGbC,IAAeC,EAAQ,MACvB,CAACN,KAA4B,CAACL,KAAU,CAACL,EAAkBI,CAAI,IAC1DA,IAEFa,EAAM,aAAab,GAAM,EAAE,QAAQ,QAAQ,GACjD,CAACA,GAAMM,GAA0BL,CAAM,CAAC;AAE3C,SAAOa,EAAU;AAAA,IACf,QAAQZ,KAAU,gBAAAa,EAAC,UAAO,EAAA,WAAWC,EAAKP,EAAI,UAAU,GAAGL,CAAS,EAAG,CAAA;AAAA,IACvE,KAAAI;AAAA,IACA,OAAO;AAAA,MACL,eAAeP,KAAU;AAAA,MACzB,iBAAiBM,EAAK,eAAe;AAAA,MACrC,WAAW;AAAA,MACX,GAAGA;AAAA,MACH,UAEI,gBAAAU,EAAAC,GAAA,EAAA,UAAA;AAAA,QAAA,gBAAAH,EAAC,QAAK,EAAA,WAAWN,EAAI,eAAe,GAAI,UAAaE,GAAA;AAAA,0BAMpD,QAAK,EAAA,WAAWF,EAAI,kBAAkB,GAAI,UAAAJ,EAAS,CAAA;AAAA,MAAA,EAEtD,CAAA;AAAA,IAEJ;AAAA,IACA,OAAO,EAAE,QAAAJ,GAAQ,MAAAD,EAAK;AAAA,EAAA,CACvB;AACH,GAEMmB,IAAUC,EAAWrB,CAAW;"}

package/dist/components/Stack/StackChild.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsx as r } from "react/jsx-runtime";
+import { jsx as c } from "react/jsx-runtime";
 import b, { forwardRef as g } from "react";
 import { useRender as R } from "@base-ui-components/react/use-render";
 import { mergeProps as S } from "@base-ui-components/react/merge-props";
@@ -8,54 +8,54 @@ import { useCls as v } from "../utils/antdUtils.js";
 import { cn as w } from "../utils/cn.js";
 const E = g(
   ({
-    flex: e,
-    grow: l = !1,
-    shrink: c = !1,
+    flex: s,
+    grow: m = !1,
+    shrink: f = !1,
     children: t,
-    style: f,
-    stack: m = !1,
+    style: i,
+    stack: n = !1,
     // stack props
-    hug: i = !1,
-    align: n = "flex-start",
-    justify: p = "flex-start",
-    vertical: d = !1,
-    gap: k = 0,
-    wrap: u = !1,
-    className: x,
-    ...h
-  }, y) => {
-    const s = v(), C = {
-      hug: i,
-      align: n,
-      justify: p,
-      vertical: d,
-      gap: k,
-      wrap: u
+    hug: p = !1,
+    align: d = "flex-start",
+    justify: k = "flex-start",
+    vertical: u = !1,
+    gap: x = 0,
+    wrap: h = !1,
+    className: y,
+    ...o
+  }, a) => {
+    const e = v(), C = {
+      hug: p,
+      align: d,
+      justify: k,
+      vertical: u,
+      gap: x,
+      wrap: h
     };
-    let o = "";
-    typeof e == "boolean" && (o = s(e ? "stack-child-flex-1" : "stack-child-flex-0"));
-    const a = w(
-      s("stack-child"),
-      l && s("stack-child-grow"),
-      c && s("stack-child-shrink"),
-      o,
-      x
+    let l = "";
+    typeof s == "boolean" && (l = e(s ? "stack-child-flex-1" : "stack-child-flex-0"));
+    const r = w(
+      e("stack-child"),
+      m && e("stack-child-grow"),
+      f && e("stack-child-shrink"),
+      l,
+      y
     ), N = R({
-      render: () => b.isValidElement(t) ? t : /* @__PURE__ */ r("div", { children: t }),
-      ref: y,
+      render: () => b.isValidElement(t) ? t : /* @__PURE__ */ c("div", { children: t }),
+      ref: a,
       props: S(
         {
-          className: a,
+          className: r,
           style: {
-            ...f,
-            flex: typeof e == "string" || typeof e == "number" ? e : void 0
+            ...i,
+            flex: typeof s == "string" || typeof s == "number" ? s : void 0
           },
-          ...h
+          ...o
         },
         {}
       )
     });
-    return m ? /* @__PURE__ */ r(V, { ...C, className: a, children: t }) : N;
+    return n ? /* @__PURE__ */ c(V, { ...C, ref: a, className: r, ...o, children: t }) : N;
   }
 );
 E.displayName = "StackChild";

package/dist/components/Stack/StackChild.js.map

@@ -1 +1 @@
-{"version":3,"file":"StackChild.js","sources":["../../../src/components/Stack/StackChild.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { cn, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { mergeProps } from \"@base-ui-components/react/merge-props\";\nimport { Stack, StackProps } from \"./Stack\";\n\nexport interface StackChildProps extends StackProps {\n  /**\n   * CSS flex property value (e.g. \"1\", \"1 0 auto\", \"0 1 auto\")\n   * When boolean: true = 1, false = 0\n   * @default undefined\n   */\n  flex?: string | number | boolean;\n\n  /**\n   * Whether this child should grow to fill available space\n   * @default false\n   */\n  grow?: boolean;\n\n  /**\n   * Whether this child should shrink if necessary\n   * @default false\n   */\n  shrink?: boolean;\n\n  /**\n   * Children of the stack child\n   */\n  children?: React.ReactNode;\n  /**\n   * Whether to render the child with a stack wrapper\n   * @default false\n   */\n  stack?: boolean;\n}\n\nexport const StackChild = forwardRef<HTMLDivElement, StackChildProps>(\n  (\n    {\n      flex,\n      grow = false,\n      shrink = false,\n      children,\n      style,\n      stack = false,\n      // stack props\n      hug = false,\n      align = \"flex-start\",\n      justify = \"flex-start\",\n      vertical = false,\n      gap = 0,\n      wrap = false,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const cls = useCls();\n    const stackProps = {\n      hug,\n      align,\n      justify,\n      vertical,\n      gap,\n      wrap,\n    };\n\n    // Determine flex class based on flex prop type\n    let flexClass = \"\";\n    if (typeof flex === \"boolean\") {\n      flexClass = flex ? cls(\"stack-child-flex-1\") : cls(\"stack-child-flex-0\");\n    }\n\n    // Calculate the combined className\n    const combinedClassName = cn(\n      cls(\"stack-child\"),\n      grow && cls(\"stack-child-grow\"),\n      shrink && cls(\"stack-child-shrink\"),\n      flexClass,\n      className\n    );\n\n    // Calculate the flex style value\n    const flexValue =\n      typeof flex === \"string\" || typeof flex === \"number\" ? flex : undefined;\n\n    // Use useRender to apply props directly to the child without creating a wrapper\n    const renderedElement = useRender({\n      render: () =>\n        React.isValidElement(children) ? children : <div>{children}</div>,\n      ref,\n      props: mergeProps<\"div\">(\n        {\n          className: combinedClassName,\n          style: {\n            ...style,\n            flex: flexValue,\n          },\n          ...rest,\n        },\n        {}\n      ),\n    });\n\n    return stack ? (\n      <Stack {...stackProps} className={combinedClassName}>\n        {children}\n      </Stack>\n    ) : (\n      renderedElement\n    );\n  }\n);\n\nStackChild.displayName = \"StackChild\";\n"],"names":["StackChild","forwardRef","flex","grow","shrink","children","style","stack","hug","align","justify","vertical","gap","wrap","className","rest","ref","cls","useCls","stackProps","flexClass","combinedClassName","cn","renderedElement","useRender","React","jsx","mergeProps","Stack"],"mappings":";;;;;;;;AAsCO,MAAMA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA;AAAA,IAER,KAAAC,IAAM;AAAA,IACN,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,KAAAC,IAAM;AAAA,IACN,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAMC,EAAO,GACbC,IAAa;AAAA,MACjB,KAAAX;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,KAAAC;AAAA,MACA,MAAAC;AAAA,IACF;AAGA,QAAIO,IAAY;AACZ,IAAA,OAAOlB,KAAS,cAClBkB,IAAmBH,EAAPf,IAAW,uBAA4B,oBAAR;AAI7C,UAAMmB,IAAoBC;AAAA,MACxBL,EAAI,aAAa;AAAA,MACjBd,KAAQc,EAAI,kBAAkB;AAAA,MAC9Bb,KAAUa,EAAI,oBAAoB;AAAA,MAClCG;AAAA,MACAN;AAAA,IACF,GAOMS,IAAkBC,EAAU;AAAA,MAChC,QAAQ,MACNC,EAAM,eAAepB,CAAQ,IAAIA,IAAY,gBAAAqB,EAAA,OAAA,EAAK,UAAArB,GAAS;AAAA,MAC7D,KAAAW;AAAA,MACA,OAAOW;AAAA,QACL;AAAA,UACE,WAAWN;AAAA,UACX,OAAO;AAAA,YACL,GAAGf;AAAA,YACH,MAZN,OAAOJ,KAAS,YAAY,OAAOA,KAAS,WAAWA,IAAO;AAAA,UAa1D;AAAA,UACA,GAAGa;AAAA,QACL;AAAA,QACA,CAAA;AAAA,MAAC;AAAA,IACH,CACD;AAEM,WAAAR,sBACJqB,GAAO,EAAA,GAAGT,GAAY,WAAWE,GAC/B,UAAAhB,EACH,CAAA,IAEAkB;AAAA,EAAA;AAGN;AAEAvB,EAAW,cAAc;"}
+{"version":3,"file":"StackChild.js","sources":["../../../src/components/Stack/StackChild.tsx"],"sourcesContent":["\"use client\";\nimport React, { forwardRef } from \"react\";\nimport { cn, useCls } from \"../utils\";\nimport { useRender } from \"@base-ui-components/react/use-render\";\nimport { mergeProps } from \"@base-ui-components/react/merge-props\";\nimport { Stack, StackProps } from \"./Stack\";\n\nexport interface StackChildProps extends StackProps {\n  /**\n   * CSS flex property value (e.g. \"1\", \"1 0 auto\", \"0 1 auto\")\n   * When boolean: true = 1, false = 0\n   * @default undefined\n   */\n  flex?: string | number | boolean;\n\n  /**\n   * Whether this child should grow to fill available space\n   * @default false\n   */\n  grow?: boolean;\n\n  /**\n   * Whether this child should shrink if necessary\n   * @default false\n   */\n  shrink?: boolean;\n\n  /**\n   * Children of the stack child\n   */\n  children?: React.ReactNode;\n  /**\n   * Whether to render the child with a stack wrapper\n   * @default false\n   */\n  stack?: boolean;\n}\n\nexport const StackChild = forwardRef<HTMLDivElement, StackChildProps>(\n  (\n    {\n      flex,\n      grow = false,\n      shrink = false,\n      children,\n      style,\n      stack = false,\n      // stack props\n      hug = false,\n      align = \"flex-start\",\n      justify = \"flex-start\",\n      vertical = false,\n      gap = 0,\n      wrap = false,\n      className,\n      ...rest\n    },\n    ref\n  ) => {\n    const cls = useCls();\n    const stackProps = {\n      hug,\n      align,\n      justify,\n      vertical,\n      gap,\n      wrap,\n    };\n\n    // Determine flex class based on flex prop type\n    let flexClass = \"\";\n    if (typeof flex === \"boolean\") {\n      flexClass = flex ? cls(\"stack-child-flex-1\") : cls(\"stack-child-flex-0\");\n    }\n\n    // Calculate the combined className\n    const combinedClassName = cn(\n      cls(\"stack-child\"),\n      grow && cls(\"stack-child-grow\"),\n      shrink && cls(\"stack-child-shrink\"),\n      flexClass,\n      className\n    );\n\n    // Calculate the flex style value\n    const flexValue =\n      typeof flex === \"string\" || typeof flex === \"number\" ? flex : undefined;\n\n    // Use useRender to apply props directly to the child without creating a wrapper\n    const renderedElement = useRender({\n      render: () =>\n        React.isValidElement(children) ? children : <div>{children}</div>,\n      ref,\n      props: mergeProps<\"div\">(\n        {\n          className: combinedClassName,\n          style: {\n            ...style,\n            flex: flexValue,\n          },\n          ...rest,\n        },\n        {}\n      ),\n    });\n\n    return stack ? (\n      <Stack {...stackProps} ref={ref} className={combinedClassName} {...rest}>\n        {children}\n      </Stack>\n    ) : (\n      renderedElement\n    );\n  }\n);\n\nStackChild.displayName = \"StackChild\";\n"],"names":["StackChild","forwardRef","flex","grow","shrink","children","style","stack","hug","align","justify","vertical","gap","wrap","className","rest","ref","cls","useCls","stackProps","flexClass","combinedClassName","cn","renderedElement","useRender","React","jsx","mergeProps","Stack"],"mappings":";;;;;;;;AAsCO,MAAMA,IAAaC;AAAA,EACxB,CACE;AAAA,IACE,MAAAC;AAAA,IACA,MAAAC,IAAO;AAAA,IACP,QAAAC,IAAS;AAAA,IACT,UAAAC;AAAA,IACA,OAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA;AAAA,IAER,KAAAC,IAAM;AAAA,IACN,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAW;AAAA,IACX,KAAAC,IAAM;AAAA,IACN,MAAAC,IAAO;AAAA,IACP,WAAAC;AAAA,IACA,GAAGC;AAAA,KAELC,MACG;AACH,UAAMC,IAAMC,EAAO,GACbC,IAAa;AAAA,MACjB,KAAAX;AAAA,MACA,OAAAC;AAAA,MACA,SAAAC;AAAA,MACA,UAAAC;AAAA,MACA,KAAAC;AAAA,MACA,MAAAC;AAAA,IACF;AAGA,QAAIO,IAAY;AACZ,IAAA,OAAOlB,KAAS,cAClBkB,IAAmBH,EAAPf,IAAW,uBAA4B,oBAAR;AAI7C,UAAMmB,IAAoBC;AAAA,MACxBL,EAAI,aAAa;AAAA,MACjBd,KAAQc,EAAI,kBAAkB;AAAA,MAC9Bb,KAAUa,EAAI,oBAAoB;AAAA,MAClCG;AAAA,MACAN;AAAA,IACF,GAOMS,IAAkBC,EAAU;AAAA,MAChC,QAAQ,MACNC,EAAM,eAAepB,CAAQ,IAAIA,IAAY,gBAAAqB,EAAA,OAAA,EAAK,UAAArB,GAAS;AAAA,MAC7D,KAAAW;AAAA,MACA,OAAOW;AAAA,QACL;AAAA,UACE,WAAWN;AAAA,UACX,OAAO;AAAA,YACL,GAAGf;AAAA,YACH,MAZN,OAAOJ,KAAS,YAAY,OAAOA,KAAS,WAAWA,IAAO;AAAA,UAa1D;AAAA,UACA,GAAGa;AAAA,QACL;AAAA,QACA,CAAA;AAAA,MAAC;AAAA,IACH,CACD;AAEM,WAAAR,IACJ,gBAAAmB,EAAAE,GAAA,EAAO,GAAGT,GAAY,KAAAH,GAAU,WAAWK,GAAoB,GAAGN,GAChE,UAAAV,EAAA,CACH,IAEAkB;AAAA,EAAA;AAGN;AAEAvB,EAAW,cAAc;"}

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

@@ -4,11 +4,11 @@ import { X as g, CircleNotch as w, CheckCircle as C, XCircle as T, WarningCircle
 import { Toast as t } from "@base-ui-components/react";
 import { toastManager as a } from "./function.js";
 import { useEffect as v, useCallback as x } from "react";
-import { Button as B } from "../Button/component.js";
-import { Modal as I } from "../Modal/index.js";
+import { Button as P } from "../Button/component.js";
+import { Modal as B } from "../Modal/index.js";
 import './style.css';/* empty css          */
-import { isTracebackError as M } from "../utils/isTracebackError.js";
-import { CodeBlock as P } from "../CodeBlock/component.js";
+import { isTracebackError as I } from "../utils/isTracebackError.js";
+import { CodeBlock as M } from "../CodeBlock/component.js";
 import { useCls as f } from "../utils/antdUtils.js";
 import { IconButton as j } from "../IconButton/component.js";
 import { clsx as E } from "../utils/cn.js";
@@ -22,13 +22,13 @@ function u({
     error: /* @__PURE__ */ r(T, { weight: "fill" }),
     success: /* @__PURE__ */ r(C, { weight: "fill" }),
     progress: /* @__PURE__ */ r(w, {})
-  }, i = ((l = e.data) == null ? void 0 : l.type) || "info", s = M(e == null ? void 0 : e.description);
+  }, i = ((l = e.data) == null ? void 0 : l.type) || "info", s = I(e == null ? void 0 : e.description);
   v(() => {
     s && a.update(e.id, { timeout: 0 });
   }, [s, e.id]);
   const h = x(
     (N) => {
-      const { children: m, className: d, ...p } = N;
+      const { children: d, className: m, ...p } = N;
       return s ? /* @__PURE__ */ c(
         "div",
         {
@@ -36,7 +36,7 @@ function u({
           className: o(
             "toast-description",
             s ? "toast-description-traceback" : "",
-            d
+            m
           ),
           children: [
             /* @__PURE__ */ c("p", { children: [
@@ -45,13 +45,13 @@ function u({
               "Please contact us with error details for support."
             ] }),
             /* @__PURE__ */ r("p", { children: /* @__PURE__ */ r(
-              B,
+              P,
               {
                 size: "small",
                 onClick: () => {
-                  I.open({
+                  B.open({
                     title: "Error details",
-                    content: /* @__PURE__ */ r(P, { children: m }),
+                    content: /* @__PURE__ */ r(M, { children: d }),
                     hideOkButton: !0
                   }), a.close(e.id);
                 },
@@ -60,7 +60,7 @@ function u({
             ) })
           ]
         }
-      ) : /* @__PURE__ */ r("p", { ...p, className: o("toast-description", d), children: m });
+      ) : /* @__PURE__ */ r("p", { ...p, className: o("toast-description", m), children: d });
     },
     [s, o, e.id]
   );
@@ -74,14 +74,14 @@ function u({
       t.Close,
       {
         className: o("toast-close"),
-        render: /* @__PURE__ */ r(j, { size: "small", children: /* @__PURE__ */ r(g, {}) })
+        render: /* @__PURE__ */ r("span", { children: /* @__PURE__ */ r(j, { size: "small", children: /* @__PURE__ */ r(g, {}) }) })
       }
     )
   ] });
 }
 function y({ className: e }) {
   const { toasts: o } = t.useToastManager(), n = f();
-  return /* @__PURE__ */ r(t.Viewport, { className: E(n("toast-viewport"), e), children: o.map((i) => /* @__PURE__ */ r(u, { toast: i }, i.id)) });
+  return /* @__PURE__ */ r(t.Portal, { children: /* @__PURE__ */ r(t.Viewport, { className: E(n("toast-viewport"), e), children: o.map((i) => /* @__PURE__ */ r(u, { toast: i }, i.id)) }) });
 }
 function z(e) {
   return /* @__PURE__ */ r(t.Provider, { toastManager: a, ...e });

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Toast/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls, clsx } from \"../utils\";\nimport {\n  CheckCircle,\n  CircleNotch,\n  Info,\n  WarningCircle,\n  X,\n  XCircle,\n} from \"@bioturing/assets\";\nimport { Toast as BaseToast } from \"@base-ui-components/react\";\nimport { IconButton } from \"../IconButton\";\nimport { ToastData } from \"./types\";\nimport { toastManager } from \"./function\";\nimport { isTracebackError, type GenericHTMLProps } from \"../utils\";\nimport { useCallback, useEffect } from \"react\";\nimport { Button } from \"../Button/component\";\nimport { Modal } from \"../Modal\";\nimport { CodeBlock } from \"../CodeBlock\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nfunction InnerToast({\n  toast,\n}: {\n  toast: BaseToast.Root.ToastObject<ToastData>;\n}) {\n  const cls = useCls();\n  const toastIconMap = {\n    info: <Info weight=\"fill\" />,\n    warning: <WarningCircle weight=\"fill\" />,\n    error: <XCircle weight=\"fill\" />,\n    success: <CheckCircle weight=\"fill\" />,\n    progress: <CircleNotch />,\n  };\n  const type = toast.data?.type || \"info\";\n  const isTraceback = isTracebackError(toast?.description);\n\n  // Update manager timeout for traceback to disable auto-dismiss\n  useEffect(() => {\n    if (isTraceback) {\n      toastManager.update(toast.id, { timeout: 0 });\n    }\n  }, [isTraceback, toast.id]);\n  // console.log(toast);\n  const renderDescription: BaseToast.Description.Props[\"render\"] = useCallback(\n    (props: GenericHTMLProps) => {\n      const { children, className, ...rest } = props;\n      if (isTraceback) {\n        return (\n          <div\n            {...rest}\n            className={cls(\n              \"toast-description\",\n              isTraceback ? \"toast-description-traceback\" : \"\",\n              className\n            )}\n          >\n            <p>\n              An unexpected error occurred.\n              <br />\n              Please contact us with error details for support.\n            </p>\n            <p>\n              <Button\n                size=\"small\"\n                onClick={() => {\n                  Modal.open({\n                    title: \"Error details\",\n                    content: <CodeBlock>{children}</CodeBlock>,\n                    hideOkButton: true,\n                  });\n                  toastManager.close(toast.id);\n                }}\n              >\n                View error details\n              </Button>\n            </p>\n          </div>\n        );\n      }\n      return (\n        <p {...rest} className={cls(\"toast-description\", className)}>\n          {children}\n        </p>\n      );\n    },\n    [isTraceback, cls, toast.id]\n  );\n  return (\n    <BaseToast.Root toast={toast} className={cls(\"toast\")}>\n      <span className={cls(\"toast-icon-wrap\")}>\n        <span className={cls(\"toast-icon\", `toast-icon-${type}`)}>\n          {toastIconMap[type]}\n        </span>\n      </span>\n      <div className={cls(\"toast-content\")}>\n        <BaseToast.Title className={cls(\"toast-title\")} />\n        <BaseToast.Description render={renderDescription} />\n      </div>\n      <BaseToast.Close\n        className={cls(\"toast-close\")}\n        render={\n          <IconButton size=\"small\">\n            <X />\n          </IconButton>\n        }\n      ></BaseToast.Close>\n    </BaseToast.Root>\n  );\n}\n\nfunction ToastList({ className }: { className?: string }) {\n  const { toasts } = BaseToast.useToastManager();\n  const cls = useCls();\n\n  return (\n    <BaseToast.Viewport className={clsx(cls(\"toast-viewport\"), className)}>\n      {toasts.map((toast) => (\n        <InnerToast key={toast.id} toast={toast} />\n      ))}\n    </BaseToast.Viewport>\n  );\n}\n\nfunction ToastProvider(props: BaseToast.Provider.Props) {\n  return <BaseToast.Provider toastManager={toastManager} {...props} />;\n}\n\nexport const Toast = Object.assign(InnerToast, {\n  List: ToastList,\n  Provider: ToastProvider,\n});\n"],"names":["InnerToast","toast","cls","useCls","toastIconMap","jsx","Info","WarningCircle","XCircle","CheckCircle","CircleNotch","type","_a","isTraceback","isTracebackError","useEffect","toastManager","renderDescription","useCallback","props","children","className","rest","jsxs","Button","Modal","CodeBlock","BaseToast","IconButton","X","ToastList","toasts","clsx","ToastProvider","Toast"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Toast/component.tsx"],"sourcesContent":["\"use client\";\nimport { useCls, clsx } from \"../utils\";\nimport {\n  CheckCircle,\n  CircleNotch,\n  Info,\n  WarningCircle,\n  X,\n  XCircle,\n} from \"@bioturing/assets\";\nimport { Toast as BaseToast } from \"@base-ui-components/react\";\nimport { IconButton } from \"../IconButton\";\nimport { ToastData } from \"./types\";\nimport { toastManager } from \"./function\";\nimport { isTracebackError, type GenericHTMLProps } from \"../utils\";\nimport { useCallback, useEffect } from \"react\";\nimport { Button } from \"../Button/component\";\nimport { Modal } from \"../Modal\";\nimport { CodeBlock } from \"../CodeBlock\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nfunction InnerToast({\n  toast,\n}: {\n  toast: BaseToast.Root.ToastObject<ToastData>;\n}) {\n  const cls = useCls();\n  const toastIconMap = {\n    info: <Info weight=\"fill\" />,\n    warning: <WarningCircle weight=\"fill\" />,\n    error: <XCircle weight=\"fill\" />,\n    success: <CheckCircle weight=\"fill\" />,\n    progress: <CircleNotch />,\n  };\n  const type = toast.data?.type || \"info\";\n  const isTraceback = isTracebackError(toast?.description);\n\n  // Update manager timeout for traceback to disable auto-dismiss\n  useEffect(() => {\n    if (isTraceback) {\n      toastManager.update(toast.id, { timeout: 0 });\n    }\n  }, [isTraceback, toast.id]);\n  // console.log(toast);\n  const renderDescription: BaseToast.Description.Props[\"render\"] = useCallback(\n    (props: GenericHTMLProps) => {\n      const { children, className, ...rest } = props;\n      if (isTraceback) {\n        return (\n          <div\n            {...rest}\n            className={cls(\n              \"toast-description\",\n              isTraceback ? \"toast-description-traceback\" : \"\",\n              className\n            )}\n          >\n            <p>\n              An unexpected error occurred.\n              <br />\n              Please contact us with error details for support.\n            </p>\n            <p>\n              <Button\n                size=\"small\"\n                onClick={() => {\n                  Modal.open({\n                    title: \"Error details\",\n                    content: <CodeBlock>{children}</CodeBlock>,\n                    hideOkButton: true,\n                  });\n                  toastManager.close(toast.id);\n                }}\n              >\n                View error details\n              </Button>\n            </p>\n          </div>\n        );\n      }\n      return (\n        <p {...rest} className={cls(\"toast-description\", className)}>\n          {children}\n        </p>\n      );\n    },\n    [isTraceback, cls, toast.id]\n  );\n  return (\n    <BaseToast.Root toast={toast} className={cls(\"toast\")}>\n      <span className={cls(\"toast-icon-wrap\")}>\n        <span className={cls(\"toast-icon\", `toast-icon-${type}`)}>\n          {toastIconMap[type]}\n        </span>\n      </span>\n      <div className={cls(\"toast-content\")}>\n        <BaseToast.Title className={cls(\"toast-title\")} />\n        <BaseToast.Description render={renderDescription} />\n      </div>\n      <BaseToast.Close\n        className={cls(\"toast-close\")}\n        render={\n          <span>\n            <IconButton size=\"small\">\n              <X />\n            </IconButton>\n          </span>\n        }\n      ></BaseToast.Close>\n    </BaseToast.Root>\n  );\n}\n\nfunction ToastList({ className }: { className?: string }) {\n  const { toasts } = BaseToast.useToastManager();\n  const cls = useCls();\n\n  return (\n    <BaseToast.Portal>\n      <BaseToast.Viewport className={clsx(cls(\"toast-viewport\"), className)}>\n        {toasts.map((toast) => (\n          <InnerToast key={toast.id} toast={toast} />\n        ))}\n      </BaseToast.Viewport>\n    </BaseToast.Portal>\n  );\n}\n\nfunction ToastProvider(props: BaseToast.Provider.Props) {\n  return <BaseToast.Provider toastManager={toastManager} {...props} />;\n}\n\nexport const Toast = Object.assign(InnerToast, {\n  List: ToastList,\n  Provider: ToastProvider,\n});\n"],"names":["InnerToast","toast","cls","useCls","toastIconMap","jsx","Info","WarningCircle","XCircle","CheckCircle","CircleNotch","type","_a","isTraceback","isTracebackError","useEffect","toastManager","renderDescription","useCallback","props","children","className","rest","jsxs","Button","Modal","CodeBlock","BaseToast","IconButton","X","ToastList","toasts","clsx","ToastProvider","Toast"],"mappings":"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"}

package/dist/components/Toast/style.css

@@ -1 +1 @@
-@layer components{.ds-toast-viewport{position:fixed;width:100%;max-width:30rem;margin:0 auto;bottom:2rem;left:50%;transform:translate(-50%);top:auto;z-index:2001;display:flex;justify-content:center}.ds-toast{--gap: .5rem;--offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y) );font-family:var(--font-sans);position:absolute;box-sizing:border-box;background:var(--ds-color-bg-elevated);color:var(--ds-color-text);padding:.75rem 1rem;max-width:100%;display:inline-flex;gap:var(--gap);box-shadow:var(--ds-box-shadow-secondary);background-clip:padding-box;border-radius:.5rem;bottom:0;margin-right:0;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;cursor:default;z-index:calc(1000 - var(--toast-index));transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * -20%))) scale(calc(1 - (var(--toast-index) * .1)))}.ds-toast:after{top:100%}.ds-toast[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--offset-y))}.ds-toast[data-starting-style],.ds-toast[data-ending-style]:not([data-limited]){transform:translateY(150%)}.ds-toast[data-ending-style]{opacity:0}.ds-toast[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 150%))}.ds-toast[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 150%))}.ds-toast:after{content:"";position:absolute;width:100%;left:0;height:calc(var(--gap) + 1px)}.ds-toast-content{display:flex;flex:1;flex-direction:column;gap:2}.ds-toast-title{font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height)}.ds-toast-description{font-size:var(--ds-font-size);line-height:var(--ds-line-height)}.ds-toast-description-traceback p:not(:first-child){margin-top:.5rem}.ds-toast-icon-wrap{width:1.25rem;font-size:1.25rem;display:block;flex:0}.ds-toast-icon{width:1.25rem;height:1.25rem;display:block}.ds-toast-icon.ds-toast-icon-info{color:var(--ds-color-primary)}.ds-toast-icon.ds-toast-icon-success{color:var(--ds-color-success)}.ds-toast-icon.ds-toast-icon-warning{color:var(--ds-color-warning)}.ds-toast-icon.ds-toast-icon-error{color:var(--ds-color-error)}.ds-toast-icon.ds-toast-icon-progress{color:var(--ds-color-primary);animation:var(--ds-animate-spin)}}
+@layer components{.ds-toast-viewport{position:fixed;width:100%;max-width:30rem;margin:0 auto;bottom:2rem;left:50%;transform:translate(-50%);top:auto;z-index:2001;display:flex;justify-content:center}.ds-toast{--gap: .5rem;--offset-y: calc( var(--toast-offset-y) * -1 + (var(--toast-index) * var(--gap) * -1) + var(--toast-swipe-movement-y) );font-family:var(--font-sans);position:absolute;box-sizing:border-box;background:var(--ds-color-bg-elevated);color:var(--ds-color-text);padding:.75rem 1rem;max-width:100%;display:inline-flex;gap:var(--gap);box-shadow:var(--ds-box-shadow-secondary);background-clip:padding-box;border-radius:.5rem;bottom:0;margin-right:0;-webkit-user-select:none;user-select:none;transition:transform .5s cubic-bezier(.22,1,.36,1),opacity .5s;cursor:default;z-index:calc(1000 - var(--toast-index));transform:translate(var(--toast-swipe-movement-x)) translateY(calc(var(--toast-swipe-movement-y) + (var(--toast-index) * -20%))) scale(calc(1 - (var(--toast-index) * .1)))}.ds-toast:after{top:100%}.ds-toast[data-expanded]{transform:translate(var(--toast-swipe-movement-x)) translateY(var(--offset-y))}.ds-toast[data-starting-style],.ds-toast[data-ending-style]:not([data-limited]){transform:translateY(150%)}.ds-toast[data-ending-style]{opacity:0}.ds-toast[data-ending-style][data-swipe-direction=up]{transform:translateY(calc(var(--toast-swipe-movement-y) - 150%))}.ds-toast[data-ending-style][data-swipe-direction=left]{transform:translate(calc(var(--toast-swipe-movement-x) - 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=right]{transform:translate(calc(var(--toast-swipe-movement-x) + 150%)) translateY(var(--offset-y))}.ds-toast[data-ending-style][data-swipe-direction=down]{transform:translateY(calc(var(--toast-swipe-movement-y) + 150%))}.ds-toast:after{content:"";position:absolute;width:100%;left:0;height:calc(var(--gap) + 1px)}.ds-toast-content{display:flex;flex:1;flex-direction:column;gap:2}.ds-toast-title{font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height)}.ds-toast-description{font-size:var(--ds-font-size);line-height:var(--ds-line-height)}.ds-toast-description:last-child{margin-bottom:0}.ds-toast-description-traceback p:not(:first-child){margin-top:.5rem}.ds-toast-icon-wrap{width:1.25rem;font-size:1.25rem;display:block;flex:0}.ds-toast-icon{width:1.25rem;height:1.25rem;display:block}.ds-toast-icon.ds-toast-icon-info{color:var(--ds-color-primary)}.ds-toast-icon.ds-toast-icon-success{color:var(--ds-color-success)}.ds-toast-icon.ds-toast-icon-warning{color:var(--ds-color-warning)}.ds-toast-icon.ds-toast-icon-error{color:var(--ds-color-error)}.ds-toast-icon.ds-toast-icon-progress{color:var(--ds-color-primary);animation:var(--ds-animate-spin)}.ds-toast-close{margin-top:.125rem;display:flex}}

package/dist/components/hooks/useCSSVariables.js

@@ -0,0 +1,12 @@
+"use client";
+const u = (t) => {
+  const s = Array.isArray(t) ? t : [t], n = window.getComputedStyle(document.body);
+  return s.reduce((r, e) => {
+    const o = e.startsWith("--") ? e : `--${e}`;
+    return r[o] = n.getPropertyValue(o), r;
+  }, {});
+};
+export {
+  u as useCSSVariables
+};
+//# sourceMappingURL=useCSSVariables.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useCSSVariables.js","sources":["../../../src/components/hooks/useCSSVariables.ts"],"sourcesContent":["\"use client\";\n\n/**\n * Get CSS variables from the document\n * @param variables CSS variable names\n * @returns CSS variable values\n */\nexport const useCSSVariables = (variables: string | string[]) => {\n  const variablesList = Array.isArray(variables) ? variables : [variables];\n  const el = window.getComputedStyle(document.body);\n  return variablesList.reduce((acc, variable) => {\n    const variableName = variable.startsWith(\"--\") ? variable : `--${variable}`;\n    acc[variableName] = el.getPropertyValue(variableName);\n    return acc;\n  }, {} as Record<string, string>);\n};\n"],"names":["useCSSVariables","variables","variablesList","el","acc","variable","variableName"],"mappings":";AAOa,MAAAA,IAAkB,CAACC,MAAiC;AAC/D,QAAMC,IAAgB,MAAM,QAAQD,CAAS,IAAIA,IAAY,CAACA,CAAS,GACjEE,IAAK,OAAO,iBAAiB,SAAS,IAAI;AAChD,SAAOD,EAAc,OAAO,CAACE,GAAKC,MAAa;AAC7C,UAAMC,IAAeD,EAAS,WAAW,IAAI,IAAIA,IAAW,KAAKA,CAAQ;AACzE,WAAAD,EAAIE,CAAY,IAAIH,EAAG,iBAAiBG,CAAY,GAC7CF;AAAA,EACT,GAAG,EAA4B;AACjC;"}

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

@@ -1 +1 @@
-{"version":3,"file":"useCharts.js","sources":["../../../src/components/hooks/useCharts.ts"],"sourcesContent":["import { useDS } from \"../DSRoot/context\";\nimport { getColorsByTheme, getTokensByTheme } from \"../../tokens/utils\";\nimport {\n  chartColorTokens,\n  categoricalChartColorTokens,\n} from \"../../tokens/charts/palettes/cloudscape\";\n\nimport {\n  SequentialPaletteName,\n  CategoricalPaletteName,\n  CATEGORICAL_PALETTE_NAMES,\n  getCategoricalChartColors,\n  getSequentialChartColors,\n  SEQUENTIAL_PALETTE_NAMES,\n  Theme,\n} from \"../../tokens\";\n\nexport interface UseChartsOptions {\n  /**\n   * The palette to use for the charts.\n   * @default \"cloudscape\"\n   */\n  palette?: SequentialPaletteName | CategoricalPaletteName;\n  /**\n   * The theme to use for the charts.\n   * @default \"light\"\n   */\n  theme?: Theme;\n}\n\n/**\n * Get chart colors and axis configuration based on the current theme.\n * @param options\n * @returns\n */\nexport const useCharts = (\n  options: UseChartsOptions = {\n    palette: \"cloudscape\",\n    theme: undefined,\n  }\n) => {\n  const { theme: themeContext } = useDS();\n  const theme = options.theme || themeContext;\n  const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);\n  const axisLineColor = themedChartColorTokens[\"colorChartsLineAxis\"];\n  const splitLineColor = themedChartColorTokens[\"colorChartsLineGrid\"];\n  const axisLabelColor = themedChartColorTokens[\"colorChartsLabelAxis\"];\n\n  const palette = options.palette;\n\n  const chartColors = CATEGORICAL_PALETTE_NAMES.includes(\n    palette as CategoricalPaletteName\n  )\n    ? getCategoricalChartColors(palette as CategoricalPaletteName, theme)\n    : SEQUENTIAL_PALETTE_NAMES.includes(palette as SequentialPaletteName)\n    ? getSequentialChartColors(palette as SequentialPaletteName, theme)\n    : [];\n  const echartsAxisConfig = {\n    axisLine: { lineStyle: { color: axisLineColor } },\n    splitLine: { lineStyle: { color: splitLineColor } },\n    axisLabel: {\n      color: axisLabelColor,\n      fontFamily: \"InterVariable, Inter, Helvetica, Arial, sans-serif\",\n    },\n  };\n\n  return {\n    axisLineColor,\n    splitLineColor,\n    axisLabelColor,\n    chartColors,\n    echartsAxisConfig,\n  };\n};\n"],"names":["useCharts","options","themeContext","useDS","theme","themedChartColorTokens","getTokensByTheme","chartColorTokens","axisLineColor","splitLineColor","axisLabelColor","palette","chartColors","CATEGORICAL_PALETTE_NAMES","getCategoricalChartColors","SEQUENTIAL_PALETTE_NAMES","getSequentialChartColors"],"mappings":";;;;AAmCa,MAAAA,IAAY,CACvBC,IAA4B;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AACT,MACG;AACH,QAAM,EAAE,OAAOC,EAAa,IAAIC,EAAM,GAChCC,IAAQH,EAAQ,SAASC,GACzBG,IAAyBC,EAAiBC,GAAkBH,CAAK,GACjEI,IAAgBH,EAAuB,qBACvCI,IAAiBJ,EAAuB,qBACxCK,IAAiBL,EAAuB,sBAExCM,IAAUV,EAAQ,SAElBW,IAAcC,EAA0B;AAAA,IAC5CF;AAAA,EAEE,IAAAG,EAA0BH,GAAmCP,CAAK,IAClEW,EAAyB,SAASJ,CAAgC,IAClEK,EAAyBL,GAAkCP,CAAK,IAChE,CAAC;AAUE,SAAA;AAAA,IACL,eAAAI;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAE;AAAA,IACA,mBAdwB;AAAA,MACxB,UAAU,EAAE,WAAW,EAAE,OAAOJ,IAAgB;AAAA,MAChD,WAAW,EAAE,WAAW,EAAE,OAAOC,IAAiB;AAAA,MAClD,WAAW;AAAA,QACT,OAAOC;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,EAQA;AACF;"}
+{"version":3,"file":"useCharts.js","sources":["../../../src/components/hooks/useCharts.ts"],"sourcesContent":["import { useDS } from \"../DSRoot/context\";\nimport { getTokensByTheme } from \"../../tokens/utils\";\nimport { chartColorTokens } from \"../../tokens/charts/palettes/cloudscape\";\n\nimport {\n  SequentialPaletteName,\n  CategoricalPaletteName,\n  CATEGORICAL_PALETTE_NAMES,\n  getCategoricalChartColors,\n  getSequentialChartColors,\n  SEQUENTIAL_PALETTE_NAMES,\n  Theme,\n} from \"../../tokens\";\n\nexport interface UseChartsOptions {\n  /**\n   * The palette to use for the charts.\n   * @default \"cloudscape\"\n   */\n  palette?: SequentialPaletteName | CategoricalPaletteName;\n  /**\n   * The theme to use for the charts.\n   * @default \"light\"\n   */\n  theme?: Theme;\n}\n\n/**\n * Get chart colors and axis configuration based on the current theme.\n * @param options\n * @returns\n */\nexport const useCharts = (\n  options: UseChartsOptions = {\n    palette: \"cloudscape\",\n    theme: undefined,\n  }\n) => {\n  const { theme: themeContext } = useDS();\n  const theme = options.theme || themeContext;\n  const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);\n  const axisLineColor = themedChartColorTokens[\"colorChartsLineAxis\"];\n  const splitLineColor = themedChartColorTokens[\"colorChartsLineGrid\"];\n  const axisLabelColor = themedChartColorTokens[\"colorChartsLabelAxis\"];\n\n  const palette = options.palette;\n\n  const chartColors = CATEGORICAL_PALETTE_NAMES.includes(\n    palette as CategoricalPaletteName\n  )\n    ? getCategoricalChartColors(palette as CategoricalPaletteName, theme)\n    : SEQUENTIAL_PALETTE_NAMES.includes(palette as SequentialPaletteName)\n    ? getSequentialChartColors(palette as SequentialPaletteName, theme)\n    : [];\n  const echartsAxisConfig = {\n    axisLine: { lineStyle: { color: axisLineColor } },\n    splitLine: { lineStyle: { color: splitLineColor } },\n    axisLabel: {\n      color: axisLabelColor,\n      fontFamily: \"InterVariable, Inter, Helvetica, Arial, sans-serif\",\n    },\n  };\n\n  return {\n    axisLineColor,\n    splitLineColor,\n    axisLabelColor,\n    chartColors,\n    echartsAxisConfig,\n  };\n};\n"],"names":["useCharts","options","themeContext","useDS","theme","themedChartColorTokens","getTokensByTheme","chartColorTokens","axisLineColor","splitLineColor","axisLabelColor","palette","chartColors","CATEGORICAL_PALETTE_NAMES","getCategoricalChartColors","SEQUENTIAL_PALETTE_NAMES","getSequentialChartColors"],"mappings":";;;;AAgCa,MAAAA,IAAY,CACvBC,IAA4B;AAAA,EAC1B,SAAS;AAAA,EACT,OAAO;AACT,MACG;AACH,QAAM,EAAE,OAAOC,EAAa,IAAIC,EAAM,GAChCC,IAAQH,EAAQ,SAASC,GACzBG,IAAyBC,EAAiBC,GAAkBH,CAAK,GACjEI,IAAgBH,EAAuB,qBACvCI,IAAiBJ,EAAuB,qBACxCK,IAAiBL,EAAuB,sBAExCM,IAAUV,EAAQ,SAElBW,IAAcC,EAA0B;AAAA,IAC5CF;AAAA,EAEE,IAAAG,EAA0BH,GAAmCP,CAAK,IAClEW,EAAyB,SAASJ,CAAgC,IAClEK,EAAyBL,GAAkCP,CAAK,IAChE,CAAC;AAUE,SAAA;AAAA,IACL,eAAAI;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,aAAAE;AAAA,IACA,mBAdwB;AAAA,MACxB,UAAU,EAAE,WAAW,EAAE,OAAOJ,IAAgB;AAAA,MAChD,WAAW,EAAE,WAAW,EAAE,OAAOC,IAAiB;AAAA,MAClD,WAAW;AAAA,QACT,OAAOC;AAAA,QACP,YAAY;AAAA,MAAA;AAAA,IAEhB;AAAA,EAQA;AACF;"}

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;"}