@bioturing/components 0.16.0 → 0.17.0

package/dist/components/Toast/component.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsxs as c, jsx as r } from "react/jsx-runtime";
-import { X as N, CircleNotch as g, CheckCircle as w, XCircle as T, WarningCircle as k, Info as b } from "@bioturing/assets";
-import { Toast as s } from "@base-ui-components/react";
+import { X as g, CircleNotch as w, CheckCircle as C, XCircle as T, WarningCircle as k, Info as b } from "@bioturing/assets";
+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";
@@ -9,33 +9,33 @@ import { Modal as I } 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 { useCls as f, useAntdCssVarClassname as V } from "../utils/antdUtils.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";
 function u({
   toast: e
 }) {
   var l;
-  const t = f(), n = {
+  const o = f(), n = {
     info: /* @__PURE__ */ r(b, { weight: "fill" }),
     warning: /* @__PURE__ */ r(k, { weight: "fill" }),
     error: /* @__PURE__ */ r(T, { weight: "fill" }),
-    success: /* @__PURE__ */ r(w, { weight: "fill" }),
-    progress: /* @__PURE__ */ r(g, {})
-  }, i = ((l = e.data) == null ? void 0 : l.type) || "info", o = M(e == null ? void 0 : e.description);
+    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);
   v(() => {
-    o && a.update(e.id, { timeout: 0 });
-  }, [o, e.id]);
+    s && a.update(e.id, { timeout: 0 });
+  }, [s, e.id]);
   const h = x(
-    (C) => {
-      const { children: m, className: d, ...p } = C;
-      return o ? /* @__PURE__ */ c(
+    (N) => {
+      const { children: m, className: d, ...p } = N;
+      return s ? /* @__PURE__ */ c(
         "div",
         {
           ...p,
-          className: t(
+          className: o(
             "toast-description",
-            o ? "toast-description-traceback" : "",
+            s ? "toast-description-traceback" : "",
             d
           ),
           children: [
@@ -60,43 +60,37 @@ function u({
             ) })
           ]
         }
-      ) : /* @__PURE__ */ r("p", { ...p, className: t("toast-description", d), children: m });
+      ) : /* @__PURE__ */ r("p", { ...p, className: o("toast-description", d), children: m });
     },
-    [o, t, e.id]
+    [s, o, e.id]
   );
-  return /* @__PURE__ */ c(s.Root, { toast: e, className: t("toast"), children: [
-    /* @__PURE__ */ r("span", { className: t("toast-icon-wrap"), children: /* @__PURE__ */ r("span", { className: t("toast-icon", `toast-icon-${i}`), children: n[i] }) }),
-    /* @__PURE__ */ c("div", { className: t("toast-content"), children: [
-      /* @__PURE__ */ r(s.Title, { className: t("toast-title") }),
-      /* @__PURE__ */ r(s.Description, { render: h })
+  return /* @__PURE__ */ c(t.Root, { toast: e, className: o("toast"), children: [
+    /* @__PURE__ */ r("span", { className: o("toast-icon-wrap"), children: /* @__PURE__ */ r("span", { className: o("toast-icon", `toast-icon-${i}`), children: n[i] }) }),
+    /* @__PURE__ */ c("div", { className: o("toast-content"), children: [
+      /* @__PURE__ */ r(t.Title, { className: o("toast-title") }),
+      /* @__PURE__ */ r(t.Description, { render: h })
     ] }),
     /* @__PURE__ */ r(
-      s.Close,
+      t.Close,
       {
-        className: t("toast-close"),
-        render: /* @__PURE__ */ r(j, { size: "small", children: /* @__PURE__ */ r(N, {}) })
+        className: o("toast-close"),
+        render: /* @__PURE__ */ r(j, { size: "small", children: /* @__PURE__ */ r(g, {}) })
       }
     )
   ] });
 }
 function y({ className: e }) {
-  const { toasts: t } = s.useToastManager(), n = f(), i = V();
-  return /* @__PURE__ */ r(
-    s.Viewport,
-    {
-      className: E(n("toast-viewport"), i, e),
-      children: t.map((o) => /* @__PURE__ */ r(u, { toast: o }, o.id))
-    }
-  );
+  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)) });
 }
 function z(e) {
-  return /* @__PURE__ */ r(s.Provider, { toastManager: a, ...e });
+  return /* @__PURE__ */ r(t.Provider, { toastManager: a, ...e });
 }
-const K = Object.assign(u, {
+const J = Object.assign(u, {
   List: y,
   Provider: z
 });
 export {
-  K as Toast
+  J as Toast
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Toast/component.tsx"],"sourcesContent":["\"use client\";\nimport { useAntdCssVarClassname, 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  const cssVars = useAntdCssVarClassname();\n\n  return (\n    <BaseToast.Viewport\n      className={clsx(cls(\"toast-viewport\"), cssVars, className)}\n    >\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","cssVars","useAntdCssVarClassname","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          <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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"}

package/dist/components/Tooltip/component.js

@@ -1,27 +1,9 @@
 "use client";
-import { jsx as i } from "react/jsx-runtime";
-import l from "antd/es/tooltip";
+import { jsx as r } from "react/jsx-runtime";
+import i from "antd/es/tooltip";
 import './style.css';/* empty css          */
-import { useCls as p } from "../utils/antdUtils.js";
-import { clsx as e } from "../utils/cn.js";
-const x = ({
-  className: o,
-  style: t,
-  arrow: r = !1,
-  ...s
-}) => {
-  const m = p();
-  return /* @__PURE__ */ i(
-    l,
-    {
-      className: e(m("tooltip"), o),
-      arrow: r,
-      style: t,
-      ...s
-    }
-  );
-};
+const l = ({ arrow: o = !1, ...t }) => /* @__PURE__ */ r(i, { arrow: o, ...t });
 export {
-  x as Tooltip
+  l as Tooltip
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Tooltip/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntTooltip,\n  type TooltipProps as AntTooltipProps,\n} from \"antd/es/tooltip\";\nimport { clsx, useCls } from \"../utils\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define props interface extending Ant Design's TooltipProps\nexport type TooltipProps = AntTooltipProps & {\n  /**\n   * Arrow config for of the tooltip\n   * @default false\n   */\n  arrow?: AntTooltipProps[\"arrow\"];\n};\n\n// Create Tooltip component\nexport const Tooltip = ({\n  className,\n  style,\n  arrow = false,\n  ...rest\n}: TooltipProps) => {\n  const cls = useCls();\n  return (\n    <AntTooltip\n      className={clsx(cls(\"tooltip\"), className)}\n      arrow={arrow}\n      style={style}\n      {...rest}\n    />\n  );\n};\n"],"names":["Tooltip","className","style","arrow","rest","cls","useCls","jsx","AntTooltip","clsx"],"mappings":";;;;;;AAoBO,MAAMA,IAAU,CAAC;AAAA,EACtB,WAAAC;AAAA,EACA,OAAAC;AAAA,EACA,OAAAC,IAAQ;AAAA,EACR,GAAGC;AACL,MAAoB;AAClB,QAAMC,IAAMC,EAAO;AAEjB,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKJ,EAAI,SAAS,GAAGJ,CAAS;AAAA,MACzC,OAAAE;AAAA,MACA,OAAAD;AAAA,MACC,GAAGE;AAAA,IAAA;AAAA,EACN;AAEJ;"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Tooltip/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntTooltip,\n  type TooltipProps as AntTooltipProps,\n} from \"antd/es/tooltip\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\n// Define props interface extending Ant Design's TooltipProps\nexport type TooltipProps = AntTooltipProps & {\n  /**\n   * Arrow config for of the tooltip\n   * @default false\n   */\n  arrow?: AntTooltipProps[\"arrow\"];\n};\n\n// Create Tooltip component\nexport const Tooltip = ({ arrow = false, ...rest }: TooltipProps) => {\n  return <AntTooltip arrow={arrow} {...rest} />;\n};\n"],"names":["Tooltip","arrow","rest","jsx","AntTooltip"],"mappings":";;;;AAmBO,MAAMA,IAAU,CAAC,EAAE,OAAAC,IAAQ,IAAO,GAAGC,QAClC,gBAAAC,EAAAC,GAAA,EAAW,OAAAH,GAAe,GAAGC,EAAM,CAAA;"}

package/dist/components/VerticalCollapsiblePanel/component.js

@@ -1,39 +1,39 @@
 "use client";
 import { jsxs as r, jsx as l } from "react/jsx-runtime";
-import { useState as V, useRef as g, useEffect as j } from "react";
+import { useState as I, useRef as g, useEffect as j } from "react";
 import { Collapsible as n } from "@base-ui-components/react";
-import { MinusCircle as A, PlusCircle as M } from "@bioturing/assets";
-import { useControlledState as R } from "../hooks/useControlledState.js";
-import { Truncate as S } from "../Truncate/component.js";
+import { MinusCircle as M, PlusCircle as R } from "@bioturing/assets";
+import { useControlledState as S } from "../hooks/useControlledState.js";
+import { Truncate as A } from "../Truncate/component.js";
 import './style.css';/* empty css          */
 import { Transition as E } from "../Transition/component.js";
-import { useCls as T, useAntdCssVarClassname as $ } from "../utils/antdUtils.js";
-import { useAnimationsFinished as q } from "../hooks/base-ui.js";
-import { clsx as o } from "../utils/cn.js";
+import { useCls as T } from "../utils/antdUtils.js";
+import { useAnimationsFinished as V } from "../hooks/base-ui.js";
+import { clsx as a } from "../utils/cn.js";
 import { IconButton as f } from "../IconButton/component.js";
-const Z = ({
+const X = ({
   children: h,
   title: i,
-  defaultOpen: u = !1,
-  open: b,
+  defaultOpen: b = !1,
+  open: u,
   onOpenChange: N,
-  className: C,
-  headerClassName: x,
-  headerInnerClassName: y,
+  className: x,
+  headerClassName: y,
+  headerInnerClassName: C,
   bodyClassName: v,
-  contentPadding: a = "16px",
-  afterTitle: c,
+  contentPadding: o = "16px",
+  afterTitle: p,
   actions: O,
-  useTitleAsTrigger: p = !0,
+  useTitleAsTrigger: c = !0,
   keepMounted: w = !1
 }) => {
-  const e = T(), [s, t] = R(
-    b,
+  const e = T(), [s, t] = S(
+    u,
     N,
-    u
-  ), [k, B] = V(s), m = g(null), d = q(m, {
+    b
+  ), [k, B] = I(s), m = g(null), d = V(m, {
     waitForNextTick: s
-  }), F = $();
+  });
   return j(() => {
     d(() => {
       B(s);
@@ -41,29 +41,29 @@ const Z = ({
   }, [s, d]), /* @__PURE__ */ r(
     n.Root,
     {
-      className: o(e("collapsible-panel"), F, C),
+      className: a(e("collapsible-panel"), x),
       open: s,
       onOpenChange: t,
       ref: m,
       children: [
-        /* @__PURE__ */ r("div", { className: o(e("collapsible-panel-header"), x), children: [
+        /* @__PURE__ */ r("div", { className: a(e("collapsible-panel-header"), y), children: [
           /* @__PURE__ */ r(
             "div",
             {
-              className: o(
+              className: a(
                 e("collapsible-panel-header-inner"),
-                y
+                C
               ),
               children: [
                 /* @__PURE__ */ l(
                   "div",
                   {
                     className: e("collapsible-panel-header-text"),
-                    onClick: p ? () => t((I) => !I) : void 0,
-                    style: p ? {
+                    onClick: c ? () => t((F) => !F) : void 0,
+                    style: c ? {
                       cursor: "pointer"
                     } : {},
-                    children: typeof i == "string" ? /* @__PURE__ */ l(S, { children: i }) : i
+                    children: typeof i == "string" ? /* @__PURE__ */ l(A, { children: i }) : i
                   }
                 ),
                 /* @__PURE__ */ r("div", { className: e("collapsible-panel-header-actions"), children: [
@@ -73,19 +73,19 @@ const Z = ({
                     {
                       className: e("collapsible-panel-trigger"),
                       render: s ? /* @__PURE__ */ l(f, { children: /* @__PURE__ */ l(
-                        A,
+                        M,
                         {
                           weight: "bold",
-                          className: o(
+                          className: a(
                             e("collapsible-panel-caret"),
                             s && e("collapsible-panel-caret-open")
                           )
                         }
                       ) }) : /* @__PURE__ */ l(f, { children: /* @__PURE__ */ l(
-                        M,
+                        R,
                         {
                           weight: "bold",
-                          className: o(
+                          className: a(
                             e("collapsible-panel-caret"),
                             s && e("collapsible-panel-caret-open")
                           )
@@ -97,21 +97,21 @@ const Z = ({
               ]
             }
           ),
-          s && c && /* @__PURE__ */ l("div", { className: e("collapsible-panel-header-after"), children: c })
+          s && p && /* @__PURE__ */ l("div", { className: e("collapsible-panel-header-after"), children: p })
         ] }),
         /* @__PURE__ */ l(
           n.Panel,
           {
             className: e("collapsible-panel-content"),
-            style: typeof a < "u" ? {
-              "--ds-content-padding": a === !1 || a === 0 ? "0" : typeof a == "number" ? `${a}px` : a
+            style: typeof o < "u" ? {
+              "--ds-content-padding": o === !1 || o === 0 ? "0" : typeof o == "number" ? `${o}px` : o
             } : {},
             keepMounted: w,
             children: /* @__PURE__ */ l(
               E,
               {
                 show: k,
-                className: o(e("collapsible-panel-body"), v),
+                className: a(e("collapsible-panel-body"), v),
                 keepMounted: !0,
                 children: /* @__PURE__ */ l("div", { children: h })
               }
@@ -123,6 +123,6 @@ const Z = ({
   );
 };
 export {
-  Z as VerticalCollapsiblePanel
+  X as VerticalCollapsiblePanel
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/VerticalCollapsiblePanel/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { Collapsible } from \"@base-ui-components/react\";\nimport { MinusCircle, PlusCircle } from \"@bioturing/assets\";\nimport { useCls, clsx, useAntdCssVarClassname } from \"../utils\";\nimport { useControlledState } from \"../hooks/useControlledState\";\nimport { Transition } from \"../Transition\";\nimport { useAnimationsFinished } from \"../hooks\";\nimport { IconButton } from \"../IconButton\";\nimport { Truncate } from \"../Truncate/component\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface VerticalCollapsiblePanelProps {\n  /**\n   * The content of the panel that will be toggled\n   */\n  children: React.ReactNode;\n  /**\n   * The header of the panel\n   */\n  title?: React.ReactNode;\n  /**\n   * Indicate if the title should be used as a trigger\n   * @default true\n   */\n  useTitleAsTrigger?: boolean;\n  /**\n   * Custom Content Padding\n   * @default \"24px\"\n   */\n  contentPadding?: number | string | boolean;\n  /**\n   * Add more content below the title\n   * Only show when panel is open\n   */\n  afterTitle?: React.ReactNode;\n\n  /**\n   * Whether the panel is expanded by default\n   */\n  defaultOpen?: boolean;\n  /**\n   * Control the open state (makes the component controlled)\n   */\n  open?: boolean;\n  /**\n   * Callback when the open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional class name for the component\n   */\n  className?: string;\n  /**\n   * Addtional class name for the header\n   */\n  headerClassName?: string;\n  /**\n   * Addtional class name for the header\n   */\n  headerInnerClassName?: string;\n  /**\n   * Addtional class name for the body\n   * */\n  bodyClassName?: string;\n  /**\n   * Actions to be displayed in the header\n   * Only show when panel is open\n   */\n  actions?: React.ReactNode;\n  /**\n   * Keeping it as mounted, just hide the content\n   */\n  keepMounted?: boolean;\n}\n\nexport const VerticalCollapsiblePanel: React.FC<\n  VerticalCollapsiblePanelProps\n> = ({\n  children,\n  title,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  className,\n  headerClassName,\n  headerInnerClassName,\n  bodyClassName,\n  contentPadding = \"16px\",\n  afterTitle,\n  actions,\n  useTitleAsTrigger = true,\n  keepMounted = false,\n}) => {\n  const cls = useCls();\n  // Use useControlledState for open state\n  const [isOpen, setIsOpen] = useControlledState(\n    controlledOpen,\n    onOpenChange,\n    defaultOpen\n  );\n  const [isBodyOpen, setIsBodyOpen] = useState(isOpen);\n  const ref = useRef<HTMLDivElement>(null);\n  const runOnceAnimationsFinish = useAnimationsFinished(ref, {\n    waitForNextTick: isOpen,\n  });\n  const cssVars = useAntdCssVarClassname();\n  useEffect(() => {\n    runOnceAnimationsFinish(() => {\n      setIsBodyOpen(isOpen);\n    });\n  }, [isOpen, runOnceAnimationsFinish]);\n  return (\n    <Collapsible.Root\n      className={clsx(cls(\"collapsible-panel\"), cssVars, className)}\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      ref={ref}\n    >\n      <div className={clsx(cls(\"collapsible-panel-header\"), headerClassName)}>\n        <div\n          className={clsx(\n            cls(\"collapsible-panel-header-inner\"),\n            headerInnerClassName\n          )}\n        >\n          <div\n            className={cls(\"collapsible-panel-header-text\")}\n            onClick={\n              useTitleAsTrigger ? () => setIsOpen((open) => !open) : undefined\n            }\n            style={\n              useTitleAsTrigger\n                ? {\n                    cursor: \"pointer\",\n                  }\n                : {}\n            }\n          >\n            {typeof title == \"string\" ? <Truncate>{title}</Truncate> : title}\n          </div>\n          <div className={cls(\"collapsible-panel-header-actions\")}>\n            {isOpen && actions}\n            <Collapsible.Trigger\n              className={cls(\"collapsible-panel-trigger\")}\n              render={\n                isOpen ? (\n                  <IconButton>\n                    <MinusCircle\n                      weight=\"bold\"\n                      className={clsx(\n                        cls(\"collapsible-panel-caret\"),\n                        isOpen && cls(\"collapsible-panel-caret-open\")\n                      )}\n                    />\n                  </IconButton>\n                ) : (\n                  <IconButton>\n                    <PlusCircle\n                      weight=\"bold\"\n                      className={clsx(\n                        cls(\"collapsible-panel-caret\"),\n                        isOpen && cls(\"collapsible-panel-caret-open\")\n                      )}\n                    />\n                  </IconButton>\n                )\n              }\n            ></Collapsible.Trigger>\n          </div>\n        </div>\n        {isOpen && afterTitle && (\n          <div className={cls(\"collapsible-panel-header-after\")}>\n            {afterTitle}\n          </div>\n        )}\n      </div>\n      <Collapsible.Panel\n        className={cls(\"collapsible-panel-content\")}\n        style={\n          (typeof contentPadding != \"undefined\"\n            ? {\n                \"--ds-content-padding\":\n                  contentPadding === false || contentPadding === 0\n                    ? \"0\"\n                    : typeof contentPadding == \"number\"\n                    ? `${contentPadding}px`\n                    : contentPadding,\n              }\n            : {}) as React.CSSProperties\n        }\n        keepMounted={keepMounted}\n      >\n        <Transition\n          show={isBodyOpen}\n          className={clsx(cls(\"collapsible-panel-body\"), bodyClassName)}\n          keepMounted\n        >\n          <div>{children}</div>\n        </Transition>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  );\n};\n"],"names":["VerticalCollapsiblePanel","children","title","defaultOpen","controlledOpen","onOpenChange","className","headerClassName","headerInnerClassName","bodyClassName","contentPadding","afterTitle","actions","useTitleAsTrigger","keepMounted","cls","useCls","isOpen","setIsOpen","useControlledState","isBodyOpen","setIsBodyOpen","useState","ref","useRef","runOnceAnimationsFinish","useAnimationsFinished","cssVars","useAntdCssVarClassname","useEffect","jsxs","Collapsible","clsx","jsx","open","Truncate","IconButton","MinusCircle","PlusCircle","Transition"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/VerticalCollapsiblePanel/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useEffect, useRef, useState } from \"react\";\nimport { Collapsible } from \"@base-ui-components/react\";\nimport { MinusCircle, PlusCircle } from \"@bioturing/assets\";\nimport { useCls, clsx } from \"../utils\";\nimport { useControlledState } from \"../hooks/useControlledState\";\nimport { Transition } from \"../Transition\";\nimport { useAnimationsFinished } from \"../hooks\";\nimport { IconButton } from \"../IconButton\";\nimport { Truncate } from \"../Truncate/component\";\n\n// Import component-specific styles\nimport \"./style.css\";\n\nexport interface VerticalCollapsiblePanelProps {\n  /**\n   * The content of the panel that will be toggled\n   */\n  children: React.ReactNode;\n  /**\n   * The header of the panel\n   */\n  title?: React.ReactNode;\n  /**\n   * Indicate if the title should be used as a trigger\n   * @default true\n   */\n  useTitleAsTrigger?: boolean;\n  /**\n   * Custom Content Padding\n   * @default \"24px\"\n   */\n  contentPadding?: number | string | boolean;\n  /**\n   * Add more content below the title\n   * Only show when panel is open\n   */\n  afterTitle?: React.ReactNode;\n\n  /**\n   * Whether the panel is expanded by default\n   */\n  defaultOpen?: boolean;\n  /**\n   * Control the open state (makes the component controlled)\n   */\n  open?: boolean;\n  /**\n   * Callback when the open state changes\n   */\n  onOpenChange?: (open: boolean) => void;\n  /**\n   * Additional class name for the component\n   */\n  className?: string;\n  /**\n   * Addtional class name for the header\n   */\n  headerClassName?: string;\n  /**\n   * Addtional class name for the header\n   */\n  headerInnerClassName?: string;\n  /**\n   * Addtional class name for the body\n   * */\n  bodyClassName?: string;\n  /**\n   * Actions to be displayed in the header\n   * Only show when panel is open\n   */\n  actions?: React.ReactNode;\n  /**\n   * Keeping it as mounted, just hide the content\n   */\n  keepMounted?: boolean;\n}\n\nexport const VerticalCollapsiblePanel: React.FC<\n  VerticalCollapsiblePanelProps\n> = ({\n  children,\n  title,\n  defaultOpen = false,\n  open: controlledOpen,\n  onOpenChange,\n  className,\n  headerClassName,\n  headerInnerClassName,\n  bodyClassName,\n  contentPadding = \"16px\",\n  afterTitle,\n  actions,\n  useTitleAsTrigger = true,\n  keepMounted = false,\n}) => {\n  const cls = useCls();\n  // Use useControlledState for open state\n  const [isOpen, setIsOpen] = useControlledState(\n    controlledOpen,\n    onOpenChange,\n    defaultOpen\n  );\n  const [isBodyOpen, setIsBodyOpen] = useState(isOpen);\n  const ref = useRef<HTMLDivElement>(null);\n  const runOnceAnimationsFinish = useAnimationsFinished(ref, {\n    waitForNextTick: isOpen,\n  });\n  useEffect(() => {\n    runOnceAnimationsFinish(() => {\n      setIsBodyOpen(isOpen);\n    });\n  }, [isOpen, runOnceAnimationsFinish]);\n  return (\n    <Collapsible.Root\n      className={clsx(cls(\"collapsible-panel\"), className)}\n      open={isOpen}\n      onOpenChange={setIsOpen}\n      ref={ref}\n    >\n      <div className={clsx(cls(\"collapsible-panel-header\"), headerClassName)}>\n        <div\n          className={clsx(\n            cls(\"collapsible-panel-header-inner\"),\n            headerInnerClassName\n          )}\n        >\n          <div\n            className={cls(\"collapsible-panel-header-text\")}\n            onClick={\n              useTitleAsTrigger ? () => setIsOpen((open) => !open) : undefined\n            }\n            style={\n              useTitleAsTrigger\n                ? {\n                    cursor: \"pointer\",\n                  }\n                : {}\n            }\n          >\n            {typeof title == \"string\" ? <Truncate>{title}</Truncate> : title}\n          </div>\n          <div className={cls(\"collapsible-panel-header-actions\")}>\n            {isOpen && actions}\n            <Collapsible.Trigger\n              className={cls(\"collapsible-panel-trigger\")}\n              render={\n                isOpen ? (\n                  <IconButton>\n                    <MinusCircle\n                      weight=\"bold\"\n                      className={clsx(\n                        cls(\"collapsible-panel-caret\"),\n                        isOpen && cls(\"collapsible-panel-caret-open\")\n                      )}\n                    />\n                  </IconButton>\n                ) : (\n                  <IconButton>\n                    <PlusCircle\n                      weight=\"bold\"\n                      className={clsx(\n                        cls(\"collapsible-panel-caret\"),\n                        isOpen && cls(\"collapsible-panel-caret-open\")\n                      )}\n                    />\n                  </IconButton>\n                )\n              }\n            ></Collapsible.Trigger>\n          </div>\n        </div>\n        {isOpen && afterTitle && (\n          <div className={cls(\"collapsible-panel-header-after\")}>\n            {afterTitle}\n          </div>\n        )}\n      </div>\n      <Collapsible.Panel\n        className={cls(\"collapsible-panel-content\")}\n        style={\n          (typeof contentPadding != \"undefined\"\n            ? {\n                \"--ds-content-padding\":\n                  contentPadding === false || contentPadding === 0\n                    ? \"0\"\n                    : typeof contentPadding == \"number\"\n                    ? `${contentPadding}px`\n                    : contentPadding,\n              }\n            : {}) as React.CSSProperties\n        }\n        keepMounted={keepMounted}\n      >\n        <Transition\n          show={isBodyOpen}\n          className={clsx(cls(\"collapsible-panel-body\"), bodyClassName)}\n          keepMounted\n        >\n          <div>{children}</div>\n        </Transition>\n      </Collapsible.Panel>\n    </Collapsible.Root>\n  );\n};\n"],"names":["VerticalCollapsiblePanel","children","title","defaultOpen","controlledOpen","onOpenChange","className","headerClassName","headerInnerClassName","bodyClassName","contentPadding","afterTitle","actions","useTitleAsTrigger","keepMounted","cls","useCls","isOpen","setIsOpen","useControlledState","isBodyOpen","setIsBodyOpen","useState","ref","useRef","runOnceAnimationsFinish","useAnimationsFinished","useEffect","jsxs","Collapsible","clsx","jsx","open","Truncate","IconButton","MinusCircle","PlusCircle","Transition"],"mappings":";;;;;;;;;;;;;AA8EO,MAAMA,IAET,CAAC;AAAA,EACH,UAAAC;AAAA,EACA,OAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,MAAMC;AAAA,EACN,cAAAC;AAAA,EACA,WAAAC;AAAA,EACA,iBAAAC;AAAA,EACA,sBAAAC;AAAA,EACA,eAAAC;AAAA,EACA,gBAAAC,IAAiB;AAAA,EACjB,YAAAC;AAAA,EACA,SAAAC;AAAA,EACA,mBAAAC,IAAoB;AAAA,EACpB,aAAAC,IAAc;AAChB,MAAM;AACJ,QAAMC,IAAMC,EAAO,GAEb,CAACC,GAAQC,CAAS,IAAIC;AAAA,IAC1Bf;AAAA,IACAC;AAAA,IACAF;AAAA,EACF,GACM,CAACiB,GAAYC,CAAa,IAAIC,EAASL,CAAM,GAC7CM,IAAMC,EAAuB,IAAI,GACjCC,IAA0BC,EAAsBH,GAAK;AAAA,IACzD,iBAAiBN;AAAA,EAAA,CAClB;AACD,SAAAU,EAAU,MAAM;AACd,IAAAF,EAAwB,MAAM;AAC5B,MAAAJ,EAAcJ,CAAM;AAAA,IAAA,CACrB;AAAA,EAAA,GACA,CAACA,GAAQQ,CAAuB,CAAC,GAElC,gBAAAG;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAKf,EAAI,mBAAmB,GAAGT,CAAS;AAAA,MACnD,MAAMW;AAAA,MACN,cAAcC;AAAA,MACd,KAAAK;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAK,EAAC,SAAI,WAAWE,EAAKf,EAAI,0BAA0B,GAAGR,CAAe,GACnE,UAAA;AAAA,UAAA,gBAAAqB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAA,gBACTf,EAAI,gCAAgC;AAAA,gBACpCP;AAAA,cACF;AAAA,cAEA,UAAA;AAAA,gBAAA,gBAAAuB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWhB,EAAI,+BAA+B;AAAA,oBAC9C,SACEF,IAAoB,MAAMK,EAAU,CAACc,MAAS,CAACA,CAAI,IAAI;AAAA,oBAEzD,OACEnB,IACI;AAAA,sBACE,QAAQ;AAAA,oBAAA,IAEV,CAAC;AAAA,oBAGN,iBAAOX,KAAS,WAAY,gBAAA6B,EAAAE,GAAA,EAAU,aAAM,IAAc/B;AAAA,kBAAA;AAAA,gBAC7D;AAAA,gBACC,gBAAA0B,EAAA,OAAA,EAAI,WAAWb,EAAI,kCAAkC,GACnD,UAAA;AAAA,kBAAUE,KAAAL;AAAA,kBACX,gBAAAmB;AAAA,oBAACF,EAAY;AAAA,oBAAZ;AAAA,sBACC,WAAWd,EAAI,2BAA2B;AAAA,sBAC1C,QACEE,IACE,gBAAAc,EAACG,GACC,EAAA,UAAA,gBAAAH;AAAA,wBAACI;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,WAAWL;AAAA,4BACTf,EAAI,yBAAyB;AAAA,4BAC7BE,KAAUF,EAAI,8BAA8B;AAAA,0BAAA;AAAA,wBAC9C;AAAA,sBACF,EAAA,CACF,IAEA,gBAAAgB,EAACG,GACC,EAAA,UAAA,gBAAAH;AAAA,wBAACK;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,WAAWN;AAAA,4BACTf,EAAI,yBAAyB;AAAA,4BAC7BE,KAAUF,EAAI,8BAA8B;AAAA,0BAAA;AAAA,wBAC9C;AAAA,sBAAA,EAEJ,CAAA;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAGL,EACH,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACF;AAAA,UACCE,KAAUN,KACR,gBAAAoB,EAAA,OAAA,EAAI,WAAWhB,EAAI,gCAAgC,GACjD,UACHJ,EAAA,CAAA;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAoB;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACC,WAAWd,EAAI,2BAA2B;AAAA,YAC1C,OACG,OAAOL,IAAkB,MACtB;AAAA,cACE,wBACEA,MAAmB,MAASA,MAAmB,IAC3C,MACA,OAAOA,KAAkB,WACzB,GAAGA,CAAc,OACjBA;AAAA,YAAA,IAER,CAAC;AAAA,YAEP,aAAAI;AAAA,YAEA,UAAA,gBAAAiB;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,MAAMjB;AAAA,gBACN,WAAWU,EAAKf,EAAI,wBAAwB,GAAGN,CAAa;AAAA,gBAC5D,aAAW;AAAA,gBAEX,UAAA,gBAAAsB,EAAC,SAAK,UAAA9B,EAAS,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/hooks/useCharts.js

@@ -1,28 +1,30 @@
-import { useDS as l } from "../DSRoot/context.js";
-import { getTokensByTheme as n, getColorsByTheme as a } from "../../tokens/utils.js";
-import { categoricalChartColorTokens as c } from "../../tokens/charts/index.js";
-import { chartColorTokens as C } from "../../tokens/charts/tokens.js";
-const p = () => {
-  const { theme: r } = l(), o = n(C, r), e = o.colorChartsLineAxis, t = o.colorChartsLineGrid, s = o.colorChartsLabelAxis, i = a(
-    c,
-    r
-  );
+import { useDS as c } from "../DSRoot/context.js";
+import { getTokensByTheme as C } from "../../tokens/utils.js";
+import { chartColorTokens as h } from "../../tokens/charts/palettes/cloudscape.js";
+import { CATEGORICAL_PALETTE_NAMES as m, getCategoricalChartColors as L, SEQUENTIAL_PALETTE_NAMES as A, getSequentialChartColors as p } from "../../tokens/charts/palettes/index.js";
+const S = (r = {
+  palette: "cloudscape",
+  theme: void 0
+}) => {
+  const { theme: a } = c(), o = r.theme || a, t = C(h, o), s = t.colorChartsLineAxis, l = t.colorChartsLineGrid, i = t.colorChartsLabelAxis, e = r.palette, n = m.includes(
+    e
+  ) ? L(e, o) : A.includes(e) ? p(e, o) : [];
   return {
-    axisLineColor: e,
-    splitLineColor: t,
-    axisLabelColor: s,
-    categoricalColors: i,
+    axisLineColor: s,
+    splitLineColor: l,
+    axisLabelColor: i,
+    chartColors: n,
     echartsAxisConfig: {
-      axisLine: { lineStyle: { color: e } },
-      splitLine: { lineStyle: { color: t } },
+      axisLine: { lineStyle: { color: s } },
+      splitLine: { lineStyle: { color: l } },
       axisLabel: {
-        color: s,
+        color: i,
         fontFamily: "InterVariable, Inter, Helvetica, Arial, sans-serif"
       }
     }
   };
 };
 export {
-  p as useCharts
+  S as useCharts
 };
 //# sourceMappingURL=useCharts.js.map

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\";\n\nexport const useCharts = () => {\n  const { theme } = useDS();\n  const themedChartColorTokens = getTokensByTheme(chartColorTokens, theme);\n  const axisLineColor = themedChartColorTokens[\"colorChartsLineAxis\"];\n  const splitLineColor = themedChartColorTokens[\"colorChartsLineGrid\"];\n  const axisLabelColor = themedChartColorTokens[\"colorChartsLabelAxis\"];\n  const categoricalColors = getColorsByTheme(\n    categoricalChartColorTokens,\n    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    categoricalColors,\n    echartsAxisConfig,\n  };\n};\n"],"names":["useCharts","theme","useDS","themedChartColorTokens","getTokensByTheme","chartColorTokens","axisLineColor","splitLineColor","axisLabelColor","categoricalColors","getColorsByTheme","categoricalChartColorTokens"],"mappings":";;;;AAOO,MAAMA,IAAY,MAAM;AACvB,QAAA,EAAE,OAAAC,EAAM,IAAIC,EAAM,GAClBC,IAAyBC,EAAiBC,GAAkBJ,CAAK,GACjEK,IAAgBH,EAAuB,qBACvCI,IAAiBJ,EAAuB,qBACxCK,IAAiBL,EAAuB,sBACxCM,IAAoBC;AAAA,IACxBC;AAAA,IACAV;AAAA,EACF;AAUO,SAAA;AAAA,IACL,eAAAK;AAAA,IACA,gBAAAC;AAAA,IACA,gBAAAC;AAAA,IACA,mBAAAC;AAAA,IACA,mBAdwB;AAAA,MACxB,UAAU,EAAE,WAAW,EAAE,OAAOH,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 { 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;"}

package/dist/components/utils/colors.js

@@ -0,0 +1,5 @@
+const x = (e, a = !1) => (a ? /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/ : /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/).test(e);
+export {
+  x as isValidHexColor
+};
+//# sourceMappingURL=colors.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"colors.js","sources":["../../../src/components/utils/colors.ts"],"sourcesContent":["export const isValidHexColor = (\n  hex: string,\n  acceptWithoutPrefix: boolean = false\n) => {\n  // Accepts both with and without # prefix\n  const hexRegex = acceptWithoutPrefix\n    ? /^#?([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/\n    : /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;\n  return hexRegex.test(hex);\n};\n"],"names":["isValidHexColor","hex","acceptWithoutPrefix"],"mappings":"AAAO,MAAMA,IAAkB,CAC7BC,GACAC,IAA+B,QAGdA,IACb,wCACA,sCACY,KAAKD,CAAG;"}