@bioturing/components 0.14.1 → 0.15.1

package/dist/components/Truncate/style.css

@@ -0,0 +1 @@
+@layer components{.ds-truncate{white-space:nowrap;overflow:hidden;width:100%;flex-grow:1;min-width:0;max-width:100%;display:block}.ds-truncate-end{text-overflow:ellipsis}.ds-truncate-middle{text-overflow:clip}.ds-truncate-multiline{display:-webkit-box;-webkit-line-clamp:var(--ds-line-clamp, 2);line-clamp:var(--ds-line-clamp, 2);-webkit-box-orient:vertical;overflow:hidden;white-space:normal;text-overflow:ellipsis;word-break:break-word}}

package/dist/components/Upload/component.js

@@ -0,0 +1,39 @@
+import { jsx as o } from "react/jsx-runtime";
+import n from "antd/es/upload";
+import { CloudArrowUp as d } from "@bioturing/assets";
+import { Dragger as a } from "./dragger.js";
+import { useUploadItemRender as c } from "./hooks.js";
+import { UploadItem as f } from "./item.js";
+import { Button as u } from "../Button/component.js";
+import { useCls as U } from "../utils/antdUtils.js";
+import { clsx as g } from "../utils/cn.js";
+const h = ({
+  // icon = <CloudArrowUp size={24} />,
+  showRemoveButton: r = !0,
+  // showFileList = true,
+  className: t,
+  fileList: e,
+  children: m,
+  ...l
+}) => {
+  const p = U(), i = /* @__PURE__ */ o(u, { icon: /* @__PURE__ */ o(d, { size: 24 }), type: "default", children: "Upload Files" }), s = c({ showRemoveButton: r });
+  return /* @__PURE__ */ o(
+    n,
+    {
+      className: g(p("upload"), t),
+      ...l,
+      fileList: e,
+      itemRender: s,
+      children: m || i
+    }
+  );
+}, z = Object.assign(h, {
+  // Dragger,
+  Dragger: a,
+  Item: f
+});
+export {
+  h as DefaultUpload,
+  z as Upload
+};
+//# sourceMappingURL=component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"component.js","sources":["../../../src/components/Upload/component.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntUpload,\n  type UploadFile as AntUploadFile,\n  type UploadProps as AntUploadProps,\n  type RcFile,\n  type UploadChangeParam,\n} from \"antd/es/upload\";\nimport { Button } from \"..\";\nimport { CloudArrowUp } from \"@bioturing/assets\";\nimport { clsx, useCls } from \"../utils\";\nimport { Dragger } from \"./dragger\";\nimport { useUploadItemRender } from \"./hooks\";\nimport { UploadItem } from \"./item\";\n\n// Re-export UploadFile and other types for consumers\nexport type UploadFile = AntUploadFile;\nexport type { RcFile, UploadChangeParam };\n\nexport type { UploadItemProps, UploadFileStatus } from \"./item\";\n\n// Define props interface extending Ant Design's UploadProps\nexport interface UploadProps extends AntUploadProps {\n  /**\n   * Show remove button for uploaded files\n   * @default true\n   */\n  showRemoveButton?: boolean;\n  // /**\n  //  * Show file list\n  //  * @default true\n  //  */\n  // showFileList?: boolean;\n  // /**\n  //  * Custom icon\n  //  */\n  // icon?: React.ReactNode;\n}\n\n// Default icons for file types\nexport const DefaultUpload = ({\n  // icon = <CloudArrowUp size={24} />,\n  showRemoveButton = true,\n  // showFileList = true,\n  className,\n  fileList,\n  children,\n  ...restProps\n}: UploadProps) => {\n  const cls = useCls();\n  const icon = <CloudArrowUp size={24} />;\n\n  // Default children if none provided\n  const defaultChildren = (\n    <Button icon={icon} type=\"default\">\n      Upload Files\n    </Button>\n  );\n  const itemRender = useUploadItemRender({ showRemoveButton });\n\n  return (\n    <AntUpload\n      className={clsx(cls(\"upload\"), className)}\n      {...restProps}\n      fileList={fileList}\n      itemRender={itemRender}\n    >\n      {children || defaultChildren}\n    </AntUpload>\n  );\n};\n\nexport const Upload = Object.assign(DefaultUpload, {\n  // Dragger,\n  Dragger: Dragger,\n  Item: UploadItem,\n});\n"],"names":["DefaultUpload","showRemoveButton","className","fileList","children","restProps","cls","useCls","defaultChildren","jsx","Button","CloudArrowUp","itemRender","useUploadItemRender","AntUpload","clsx","Upload","Dragger","UploadItem"],"mappings":";;;;;;;;;AAwCO,MAAMA,IAAgB,CAAC;AAAA;AAAA,EAE5B,kBAAAC,IAAmB;AAAA;AAAA,EAEnB,WAAAC;AAAA,EACA,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,GAAGC;AACL,MAAmB;AACjB,QAAMC,IAAMC,EAAO,GAIbC,IACH,gBAAAC,EAAAC,GAAA,EAAO,MAJG,gBAAAD,EAACE,GAAa,EAAA,MAAM,GAAI,CAAA,GAIf,MAAK,WAAU,UAEnC,gBAAA,GAEIC,IAAaC,EAAoB,EAAE,kBAAAZ,GAAkB;AAGzD,SAAA,gBAAAQ;AAAA,IAACK;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKT,EAAI,QAAQ,GAAGJ,CAAS;AAAA,MACvC,GAAGG;AAAA,MACJ,UAAAF;AAAA,MACA,YAAAS;AAAA,MAEC,UAAYR,KAAAI;AAAA,IAAA;AAAA,EACf;AAEJ,GAEaQ,IAAS,OAAO,OAAOhB,GAAe;AAAA;AAAA,EAEjD,SAAAiB;AAAA,EACA,MAAMC;AACR,CAAC;"}

package/dist/components/Upload/dragger.js

@@ -0,0 +1,23 @@
+import { jsx as r, jsxs as p, Fragment as i } from "react/jsx-runtime";
+import m from "antd/es/upload";
+import { CloudArrowUp as u } from "@bioturing/assets";
+import { useUploadItemRender as c } from "./hooks.js";
+import { useCls as f } from "../utils/antdUtils.js";
+const N = ({
+  children: o,
+  uploadTitle: t = "Click or drag file to this area to upload",
+  uploadDescription: l = "Support for a single or bulk upload.",
+  itemRender: a,
+  ...n
+}) => {
+  const e = f(), s = () => /* @__PURE__ */ p(i, { children: [
+    /* @__PURE__ */ r("p", { className: e("upload-drag-icon"), children: /* @__PURE__ */ r(u, { size: 40 }) }),
+    /* @__PURE__ */ r("p", { className: e("upload-text"), children: t }),
+    /* @__PURE__ */ r("p", { className: e("upload-hint"), children: l })
+  ] }), d = c({ showRemoveButton: !0 });
+  return /* @__PURE__ */ r(m.Dragger, { itemRender: a || d, ...n, children: o || s() });
+};
+export {
+  N as Dragger
+};
+//# sourceMappingURL=dragger.js.map

package/dist/components/Upload/dragger.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dragger.js","sources":["../../../src/components/Upload/dragger.tsx"],"sourcesContent":["\"use client\";\nimport {\n  default as AntUpload,\n  type DraggerProps as AntDraggerProps,\n} from \"antd/es/upload\";\nimport React from \"react\";\nimport { CloudArrowUp } from \"@bioturing/assets\";\nimport { useCls } from \"../utils\";\nimport { useUploadItemRender } from \"./hooks\";\n\nexport interface DraggerProps extends AntDraggerProps {\n  /**\n   * Custom title for the upload component\n   */\n  uploadTitle?: React.ReactNode;\n  /**\n   * Custom description for the upload component\n   **/\n  uploadDescription?: React.ReactNode;\n}\n\nexport const Dragger = ({\n  children,\n  uploadTitle = \"Click or drag file to this area to upload\",\n  uploadDescription = \"Support for a single or bulk upload.\",\n  itemRender,\n  ...rest\n}: DraggerProps) => {\n  const cls = useCls();\n  const renderChildren = () => {\n    return (\n      <>\n        <p className={cls(\"upload-drag-icon\")}>\n          <CloudArrowUp size={40} />\n        </p>\n        <p className={cls(\"upload-text\")}>{uploadTitle}</p>\n        <p className={cls(\"upload-hint\")}>{uploadDescription}</p>\n      </>\n    );\n  };\n  const defaultItemRender = useUploadItemRender({ showRemoveButton: true });\n  return (\n    <AntUpload.Dragger itemRender={itemRender || defaultItemRender} {...rest}>\n      {children ? children : renderChildren()}\n    </AntUpload.Dragger>\n  );\n};\n"],"names":["Dragger","children","uploadTitle","uploadDescription","itemRender","rest","cls","useCls","renderChildren","jsxs","Fragment","jsx","CloudArrowUp","defaultItemRender","useUploadItemRender","AntUpload"],"mappings":";;;;;AAqBO,MAAMA,IAAU,CAAC;AAAA,EACtB,UAAAC;AAAA,EACA,aAAAC,IAAc;AAAA,EACd,mBAAAC,IAAoB;AAAA,EACpB,YAAAC;AAAA,EACA,GAAGC;AACL,MAAoB;AAClB,QAAMC,IAAMC,EAAO,GACbC,IAAiB,MAGjB,gBAAAC,EAAAC,GAAA,EAAA,UAAA;AAAA,IAAC,gBAAAC,EAAA,KAAA,EAAE,WAAWL,EAAI,kBAAkB,GAClC,UAAC,gBAAAK,EAAAC,GAAA,EAAa,MAAM,GAAA,CAAI,EAC1B,CAAA;AAAA,sBACC,KAAE,EAAA,WAAWN,EAAI,aAAa,GAAI,UAAYJ,GAAA;AAAA,sBAC9C,KAAE,EAAA,WAAWI,EAAI,aAAa,GAAI,UAAkBH,EAAA,CAAA;AAAA,EAAA,GACvD,GAGEU,IAAoBC,EAAoB,EAAE,kBAAkB,IAAM;AACxE,SACG,gBAAAH,EAAAI,EAAU,SAAV,EAAkB,YAAYX,KAAcS,GAAoB,GAAGR,GACjE,UAAAJ,KAAsBO,EACzB,EAAA,CAAA;AAEJ;"}

package/dist/components/Upload/hooks.js

@@ -0,0 +1,18 @@
+import { jsx as m } from "react/jsx-runtime";
+import { useCallback as o } from "react";
+import { UploadItem as n } from "./item.js";
+const c = ({ showRemoveButton: r = !0 }) => o((a, e, s, t) => /* @__PURE__ */ m(
+  n,
+  {
+    fileName: e.name,
+    fileType: e.type,
+    status: e.status,
+    percent: e.percent,
+    removable: r,
+    onRemove: () => t.remove()
+  }
+), [r]);
+export {
+  c as useUploadItemRender
+};
+//# sourceMappingURL=hooks.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"hooks.js","sources":["../../../src/components/Upload/hooks.tsx"],"sourcesContent":["\"use client\";\nimport { type UploadProps } from \"antd/es/upload\";\nimport { useCallback } from \"react\";\nimport { UploadItem } from \"./item\";\n\nexport type UseUploadItemRenderProps = {\n  showRemoveButton?: boolean;\n};\n\nexport const useUploadItemRender: (\n  props: UseUploadItemRenderProps\n) => UploadProps[\"itemRender\"] = ({ showRemoveButton = true }) => {\n  // If showFileList is false, don't render anything\n  // if (!showFileList) return null;\n\n  // Custom rendering of file items\n  const itemRender: UploadProps[\"itemRender\"] = (\n    _originNode,\n    file,\n    _fileList,\n    actions\n  ) => {\n    return (\n      <UploadItem\n        fileName={file.name}\n        fileType={file.type}\n        status={file.status}\n        percent={file.percent}\n        removable={showRemoveButton}\n        onRemove={() => actions.remove()}\n      />\n    );\n  };\n  return useCallback(itemRender, [showRemoveButton]);\n};\n"],"names":["useUploadItemRender","showRemoveButton","useCallback","_originNode","file","_fileList","actions","jsx","UploadItem"],"mappings":";;;AASO,MAAMA,IAEoB,CAAC,EAAE,kBAAAC,IAAmB,SAsB9CC,EAjBuC,CAC5CC,GACAC,GACAC,GACAC,MAGE,gBAAAC;AAAA,EAACC;AAAA,EAAA;AAAA,IACC,UAAUJ,EAAK;AAAA,IACf,UAAUA,EAAK;AAAA,IACf,QAAQA,EAAK;AAAA,IACb,SAASA,EAAK;AAAA,IACd,WAAWH;AAAA,IACX,UAAU,MAAMK,EAAQ,OAAO;AAAA,EAAA;AACjC,GAG2B,CAACL,CAAgB,CAAC;"}

package/dist/components/Upload/item.js

@@ -0,0 +1,84 @@
+import { jsx as e, jsxs as i } from "react/jsx-runtime";
+import n from "antd/es/flex";
+import g from "antd/es/progress";
+import { Trash as u } from "@bioturing/assets";
+import { Truncate as f } from "../Truncate/component.js";
+import { getUploadFileIcon as h } from "./utils.js";
+import { useCls as x } from "../utils/antdUtils.js";
+import { clsx as N } from "../utils/cn.js";
+import { IconButton as v } from "../IconButton/component.js";
+const U = ({
+  fileName: t,
+  fileType: s,
+  status: o = "pending",
+  percent: a,
+  removable: m = !0,
+  onRemove: c,
+  extraActions: p
+}) => {
+  const r = x(), d = Math.round(a || 0), l = {
+    done: "success",
+    error: "exception",
+    uploading: "active",
+    removed: "normal",
+    pending: "normal"
+  };
+  return /* @__PURE__ */ e(
+    n,
+    {
+      className: N(r("upload-item")),
+      justify: "space-between",
+      align: "center",
+      "data-error": o === "error",
+      children: /* @__PURE__ */ i(
+        n,
+        {
+          align: "center",
+          gap: 16,
+          flex: 1,
+          className: r("upload-item-content"),
+          children: [
+            /* @__PURE__ */ e("span", { className: r("upload-item-icon"), children: h(s) }),
+            /* @__PURE__ */ i(
+              n,
+              {
+                align: "start",
+                vertical: !0,
+                flex: 1,
+                className: r("upload-item-name-progress"),
+                children: [
+                  /* @__PURE__ */ e(f, { position: "middle", children: t }),
+                  /* @__PURE__ */ e(
+                    g,
+                    {
+                      percent: d,
+                      size: "small",
+                      className: r("upload-item-progress"),
+                      status: o && o in l ? l[o] : "normal"
+                    }
+                  )
+                ]
+              }
+            ),
+            /* @__PURE__ */ i(n, { gap: 8, align: "center", children: [
+              p,
+              m && /* @__PURE__ */ e(
+                v,
+                {
+                  label: "Remove",
+                  children: /* @__PURE__ */ e(u, { size: 16 }),
+                  onClick: c,
+                  size: "small"
+                }
+              )
+            ] })
+          ]
+        }
+      )
+    }
+  );
+};
+export {
+  U as UploadItem
+};
+//# sourceMappingURL=item.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"item.js","sources":["../../../src/components/Upload/item.tsx"],"sourcesContent":["import Flex from \"antd/es/flex\";\nimport Progress from \"antd/es/progress\";\nimport { type ProgressProps } from \"antd/es/progress\";\nimport { Trash } from \"@bioturing/assets\";\nimport { IconButton } from \"../IconButton\";\nimport { Truncate } from \"../Truncate/component\";\nimport { clsx, useCls } from \"../utils\";\nimport { getUploadFileIcon } from \"./utils\";\n\nexport type UploadFileStatus =\n  | \"error\"\n  | \"done\"\n  | \"uploading\"\n  | \"removed\"\n  | \"pending\";\n\nexport interface UploadItemProps {\n  fileName: string;\n  fileType?: string;\n  status?: UploadFileStatus;\n  percent?: number;\n  removable?: boolean;\n  onRemove?: () => void;\n  extraActions?: React.ReactNode;\n}\n\nexport const UploadItem = ({\n  fileName,\n  fileType,\n  status = \"pending\",\n  percent,\n  removable = true,\n  onRemove,\n  extraActions,\n}: UploadItemProps) => {\n  const cls = useCls();\n  const showPercent = Math.round(percent || 0);\n  const statusWithProgress: Record<UploadFileStatus, ProgressProps[\"status\"]> =\n    {\n      done: \"success\",\n      error: \"exception\",\n      uploading: \"active\",\n      removed: \"normal\",\n      pending: \"normal\",\n    };\n  return (\n    <Flex\n      className={clsx(cls(\"upload-item\"))}\n      justify=\"space-between\"\n      align=\"center\"\n      data-error={status === \"error\"}\n    >\n      <Flex\n        align=\"center\"\n        gap={16}\n        flex={1}\n        className={cls(\"upload-item-content\")}\n      >\n        <span className={cls(\"upload-item-icon\")}>\n          {getUploadFileIcon(fileType)}\n        </span>\n        <Flex\n          align=\"start\"\n          vertical\n          flex={1}\n          className={cls(\"upload-item-name-progress\")}\n        >\n          <Truncate position=\"middle\">{fileName}</Truncate>\n          <Progress\n            percent={showPercent}\n            size=\"small\"\n            className={cls(\"upload-item-progress\")}\n            status={\n              status && status in statusWithProgress\n                ? statusWithProgress[status]\n                : \"normal\"\n            }\n          />\n        </Flex>\n        <Flex gap={8} align=\"center\">\n          {extraActions}\n          {removable && (\n            <IconButton\n              label=\"Remove\"\n              children={<Trash size={16} />}\n              onClick={onRemove}\n              size=\"small\"\n            />\n          )}\n        </Flex>\n      </Flex>\n    </Flex>\n  );\n};\n"],"names":["UploadItem","fileName","fileType","status","percent","removable","onRemove","extraActions","cls","useCls","showPercent","statusWithProgress","jsx","Flex","clsx","jsxs","getUploadFileIcon","Truncate","Progress","IconButton","Trash"],"mappings":";;;;;;;;;AA0BO,MAAMA,IAAa,CAAC;AAAA,EACzB,UAAAC;AAAA,EACA,UAAAC;AAAA,EACA,QAAAC,IAAS;AAAA,EACT,SAAAC;AAAA,EACA,WAAAC,IAAY;AAAA,EACZ,UAAAC;AAAA,EACA,cAAAC;AACF,MAAuB;AACrB,QAAMC,IAAMC,EAAO,GACbC,IAAc,KAAK,MAAMN,KAAW,CAAC,GACrCO,IACJ;AAAA,IACE,MAAM;AAAA,IACN,OAAO;AAAA,IACP,WAAW;AAAA,IACX,SAAS;AAAA,IACT,SAAS;AAAA,EACX;AAEA,SAAA,gBAAAC;AAAA,IAACC;AAAA,IAAA;AAAA,MACC,WAAWC,EAAKN,EAAI,aAAa,CAAC;AAAA,MAClC,SAAQ;AAAA,MACR,OAAM;AAAA,MACN,cAAYL,MAAW;AAAA,MAEvB,UAAA,gBAAAY;AAAA,QAACF;AAAA,QAAA;AAAA,UACC,OAAM;AAAA,UACN,KAAK;AAAA,UACL,MAAM;AAAA,UACN,WAAWL,EAAI,qBAAqB;AAAA,UAEpC,UAAA;AAAA,YAAA,gBAAAI,EAAC,UAAK,WAAWJ,EAAI,kBAAkB,GACpC,UAAAQ,EAAkBd,CAAQ,GAC7B;AAAA,YACA,gBAAAa;AAAA,cAACF;AAAA,cAAA;AAAA,gBACC,OAAM;AAAA,gBACN,UAAQ;AAAA,gBACR,MAAM;AAAA,gBACN,WAAWL,EAAI,2BAA2B;AAAA,gBAE1C,UAAA;AAAA,kBAAC,gBAAAI,EAAAK,GAAA,EAAS,UAAS,UAAU,UAAShB,GAAA;AAAA,kBACtC,gBAAAW;AAAA,oBAACM;AAAA,oBAAA;AAAA,sBACC,SAASR;AAAA,sBACT,MAAK;AAAA,sBACL,WAAWF,EAAI,sBAAsB;AAAA,sBACrC,QACEL,KAAUA,KAAUQ,IAChBA,EAAmBR,CAAM,IACzB;AAAA,oBAAA;AAAA,kBAAA;AAAA,gBAER;AAAA,cAAA;AAAA,YACF;AAAA,YACC,gBAAAY,EAAAF,GAAA,EAAK,KAAK,GAAG,OAAM,UACjB,UAAA;AAAA,cAAAN;AAAA,cACAF,KACC,gBAAAO;AAAA,gBAACO;AAAA,gBAAA;AAAA,kBACC,OAAM;AAAA,kBACN,UAAU,gBAAAP,EAACQ,GAAM,EAAA,MAAM,GAAI,CAAA;AAAA,kBAC3B,SAASd;AAAA,kBACT,MAAK;AAAA,gBAAA;AAAA,cAAA;AAAA,YACP,EAEJ,CAAA;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA;AAAA,IACF;AAAA,EACF;AAEJ;"}

package/dist/components/Upload/utils.js

@@ -0,0 +1,7 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Folder as o, File as l } from "@bioturing/assets";
+const f = (i) => i === "folder" ? /* @__PURE__ */ e(o, { size: 20, weight: "fill" }) : /* @__PURE__ */ e(l, { size: 20, weight: "fill" });
+export {
+  f as getUploadFileIcon
+};
+//# sourceMappingURL=utils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"utils.js","sources":["../../../src/components/Upload/utils.tsx"],"sourcesContent":["import { File, Folder } from \"@bioturing/assets\";\n\nexport const getUploadFileIcon = (fileType?: string) => {\n  return fileType === \"folder\" ? (\n    <Folder size={20} weight=\"fill\" />\n  ) : (\n    <File size={20} weight=\"fill\" />\n  );\n};\n"],"names":["getUploadFileIcon","fileType","jsx","Folder","File"],"mappings":";;AAEa,MAAAA,IAAoB,CAACC,MACzBA,MAAa,WACjB,gBAAAC,EAAAC,GAAA,EAAO,MAAM,IAAI,QAAO,OAAO,CAAA,IAE/B,gBAAAD,EAAAE,GAAA,EAAK,MAAM,IAAI,QAAO,QAAO;"}

package/dist/components/VerticalCollapsiblePanel/component.js

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

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

@@ -0,0 +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, isOpen);\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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"}

package/dist/components/VerticalCollapsiblePanel/style.css

@@ -0,0 +1 @@
+@layer components{.ds-collapsible-panel{overflow:hidden;flex-basis:fit-content;flex-grow:0;flex-shrink:0;display:flex;max-height:100%;flex-direction:column}.ds-collapsible-panel[data-closed]{transition:all .2s ease-out}.ds-collapsible-panel[data-open]{transition:all .2s ease-in;flex-grow:1}.ds-collapsible-panel-trigger{background:none;border:none;padding:0;cursor:pointer;text-align:left}.ds-collapsible-panel-header{display:flex;flex-direction:column;flex-grow:0;transition:all .2s ease-in-out;border-bottom:1px solid transparent}.ds-collapsible-panel-header-inner{display:flex;align-items:center;transition:width .2s ease;padding:.75rem 1rem;gap:.5rem}.ds-collapsible-panel-header-after{display:flex;align-items:center;padding:0 1rem .75rem;gap:.5rem}.ds-collapsible-panel[data-open] .ds-collapsible-panel-header{border-bottom:1px solid var(--ds-color-split)}.ds-collapsible-panel[data-open] .ds-collapsible-panel-header-inner{justify-content:flex-start;flex-grow:1}.ds-collapsible-panel-trigger:hover .ds-collapsible-panel-header{background-color:var(--ds-color-bg-hover)}.ds-collapsible-panel-header-actions{display:flex;align-items:center;justify-content:center;flex-shrink:0;gap:.5rem;flex-grow:0}.ds-collapsible-panel-header-text{flex-grow:1;display:inline-block;font-size:var(--text-ds-h5);font-weight:var(--text-ds-h5--font-weight);line-height:var(--text-ds-h5--line-height);color:var(--ds-color-text)}.ds-collapsible-panel[data-closed] .ds-collapsible-panel-header-inner{transform:rotate(180deg);writing-mode:vertical-rl}.ds-collapsible-panel-content{display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;overflow-y:auto}.ds-collapsible-panel-content[data-closed]{display:none}.ds-collapsible-panel-body{padding:var(--ds-content-padding);flex-grow:1;transition:opacity .2s ease-in-out}.ds-collapsible-panel-body[data-starting],.ds-collapsible-panel-body[data-ending]{opacity:0}}

package/dist/components/hooks/antd.js

@@ -0,0 +1,22 @@
+import s from "antd/es/theme";
+import r from "antd/es/grid";
+import o from "antd/es/app/useApp";
+import { default as d } from "antd/es/app/useApp";
+import { useForm as l, useWatch as x } from "antd/es/form/Form";
+const n = s.useToken, p = r.useBreakpoint, a = () => {
+  const { message: e } = o();
+  return e;
+}, c = () => {
+  const { modal: e } = o();
+  return e;
+};
+export {
+  d as useApp,
+  p as useBreakpoint,
+  l as useForm,
+  a as useMessage,
+  c as useModal,
+  n as useToken,
+  x as useWatch
+};
+//# sourceMappingURL=antd.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"antd.js","sources":["../../../src/components/hooks/antd.ts"],"sourcesContent":["\"use client\";\nimport theme from \"antd/es/theme\";\nimport Grid from \"antd/es/grid\";\nimport useApp from \"antd/es/app/useApp\";\n\nexport const useToken = theme.useToken;\nexport const useBreakpoint = Grid.useBreakpoint;\n\nexport { useForm, useWatch } from \"antd/es/form/Form\";\n\nexport const useMessage = () => {\n  const { message } = useApp();\n  return message;\n};\n\nexport const useModal = () => {\n  const { modal } = useApp();\n  return modal;\n};\n\nexport { useApp };\n"],"names":["useToken","theme","useBreakpoint","Grid","useMessage","message","useApp","useModal","modal"],"mappings":";;;;;AAKO,MAAMA,IAAWC,EAAM,UACjBC,IAAgBC,EAAK,eAIrBC,IAAa,MAAM;AACxB,QAAA,EAAE,SAAAC,EAAQ,IAAIC,EAAO;AACpB,SAAAD;AACT,GAEaE,IAAW,MAAM;AACtB,QAAA,EAAE,OAAAC,EAAM,IAAIF,EAAO;AAClB,SAAAE;AACT;"}

package/dist/components/hooks/base-ui.js

@@ -0,0 +1,47 @@
+import { useLayoutEffect as d, useEffect as a, useRef as i, useCallback as p } from "react";
+import { flushSync as h } from "react-dom";
+const m = typeof window < "u" ? d : a;
+function f(t) {
+  const e = i(t);
+  return m(() => {
+    e.current = t;
+  }), p(
+    (...r) => {
+      var n;
+      return (n = e.current) == null ? void 0 : n.call(e, ...r);
+    },
+    []
+  );
+}
+function y(t) {
+  const e = i(t);
+  return m(() => {
+    e.current = t;
+  }), e;
+}
+function E(t, e = !1) {
+  const r = i(-1), n = i(-1), u = f(() => {
+    cancelAnimationFrame(r.current), clearTimeout(n.current);
+  });
+  return a(() => u, [u]), f((o) => {
+    u();
+    const c = t.current;
+    c && (typeof c.getAnimations != "function" ? o() : r.current = requestAnimationFrame(() => {
+      function s() {
+        c && Promise.allSettled(
+          c.getAnimations().map((l) => l.finished)
+        ).then(() => {
+          h(o);
+        });
+      }
+      e ? n.current = window.setTimeout(s) : s();
+    }));
+  });
+}
+export {
+  E as useAnimationsFinished,
+  m as useEnhancedEffect,
+  f as useEventCallback,
+  y as useLatestRef
+};
+//# sourceMappingURL=base-ui.js.map

package/dist/components/hooks/base-ui.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"base-ui.js","sources":["../../../src/components/hooks/base-ui.ts"],"sourcesContent":["\"use client\";\nimport { useLayoutEffect, useEffect, useRef, useCallback } from \"react\";\nimport { flushSync } from \"react-dom\";\n\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\ntype AnyFunction = (...args: any[]) => any;\n\nexport const useEnhancedEffect =\n  typeof window !== \"undefined\" ? useLayoutEffect : useEffect;\n\nexport function useEventCallback<Fn extends AnyFunction>(fn?: Fn) {\n  const ref = useRef(fn);\n  useEnhancedEffect(() => {\n    ref.current = fn;\n  });\n  return useCallback<AnyFunction>(\n    (...args) => ref.current?.(...args),\n    []\n  ) as Fn;\n}\n\nexport function useLatestRef<T>(value: T) {\n  const ref = useRef(value);\n  useEnhancedEffect(() => {\n    ref.current = value;\n  });\n  return ref;\n}\n\nexport function useAnimationsFinished(\n  ref: React.RefObject<HTMLElement | null>,\n  waitForNextTick = false\n) {\n  const frameRef = useRef(-1);\n  const timeoutRef = useRef(-1);\n\n  const cancelTasks = useEventCallback(() => {\n    cancelAnimationFrame(frameRef.current);\n    clearTimeout(timeoutRef.current);\n  });\n\n  useEffect(() => cancelTasks, [cancelTasks]);\n\n  return useEventCallback((fnToExecute: () => void) => {\n    cancelTasks();\n\n    const element = ref.current;\n\n    if (!element) {\n      return;\n    }\n\n    if (typeof element.getAnimations !== \"function\") {\n      fnToExecute();\n    } else {\n      frameRef.current = requestAnimationFrame(() => {\n        function exec() {\n          if (!element) {\n            return;\n          }\n\n          Promise.allSettled(\n            element.getAnimations().map((anim) => anim.finished)\n          ).then(() => {\n            // Synchronously flush the unmounting of the component so that the browser doesn't\n            // paint: https://github.com/mui/base-ui/issues/979\n            flushSync(fnToExecute);\n          });\n        }\n\n        // `open: true` animations need to wait for the next tick to be detected\n        if (waitForNextTick) {\n          timeoutRef.current = window.setTimeout(exec);\n        } else {\n          exec();\n        }\n      });\n    }\n  });\n}\n"],"names":["useEnhancedEffect","useLayoutEffect","useEffect","useEventCallback","fn","ref","useRef","useCallback","args","_a","useLatestRef","value","useAnimationsFinished","waitForNextTick","frameRef","timeoutRef","cancelTasks","fnToExecute","element","exec","anim","flushSync"],"mappings":";;AAOO,MAAMA,IACX,OAAO,SAAW,MAAcC,IAAkBC;AAE7C,SAASC,EAAyCC,GAAS;AAC1D,QAAAC,IAAMC,EAAOF,CAAE;AACrB,SAAAJ,EAAkB,MAAM;AACtB,IAAAK,EAAI,UAAUD;AAAA,EAAA,CACf,GACMG;AAAA,IACL,IAAIC,MAAS;;AAAA,cAAAC,IAAAJ,EAAI,YAAJ,gBAAAI,EAAA,KAAAJ,GAAc,GAAGG;AAAA;AAAA,IAC9B,CAAA;AAAA,EACF;AACF;AAEO,SAASE,EAAgBC,GAAU;AAClC,QAAAN,IAAMC,EAAOK,CAAK;AACxB,SAAAX,EAAkB,MAAM;AACtB,IAAAK,EAAI,UAAUM;AAAA,EAAA,CACf,GACMN;AACT;AAEgB,SAAAO,EACdP,GACAQ,IAAkB,IAClB;AACM,QAAAC,IAAWR,EAAO,EAAE,GACpBS,IAAaT,EAAO,EAAE,GAEtBU,IAAcb,EAAiB,MAAM;AACzC,yBAAqBW,EAAS,OAAO,GACrC,aAAaC,EAAW,OAAO;AAAA,EAAA,CAChC;AAED,SAAAb,EAAU,MAAMc,GAAa,CAACA,CAAW,CAAC,GAEnCb,EAAiB,CAACc,MAA4B;AACvC,IAAAD,EAAA;AAEZ,UAAME,IAAUb,EAAI;AAEpB,IAAKa,MAID,OAAOA,EAAQ,iBAAkB,aACvBD,EAAA,IAEHH,EAAA,UAAU,sBAAsB,MAAM;AAC7C,eAASK,IAAO;AACd,QAAKD,KAIG,QAAA;AAAA,UACNA,EAAQ,cAAc,EAAE,IAAI,CAACE,MAASA,EAAK,QAAQ;AAAA,QACrD,EAAE,KAAK,MAAM;AAGX,UAAAC,EAAUJ,CAAW;AAAA,QAAA,CACtB;AAAA,MAAA;AAIH,MAAIJ,IACSE,EAAA,UAAU,OAAO,WAAWI,CAAI,IAEtCA,EAAA;AAAA,IACP,CACD;AAAA,EACH,CACD;AACH;"}

package/dist/components/hooks/useCharts.js

@@ -0,0 +1,28 @@
+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
+  );
+  return {
+    axisLineColor: e,
+    splitLineColor: t,
+    axisLabelColor: s,
+    categoricalColors: i,
+    echartsAxisConfig: {
+      axisLine: { lineStyle: { color: e } },
+      splitLine: { lineStyle: { color: t } },
+      axisLabel: {
+        color: s,
+        fontFamily: "InterVariable, Inter, Helvetica, Arial, sans-serif"
+      }
+    }
+  };
+};
+export {
+  p as useCharts
+};
+//# sourceMappingURL=useCharts.js.map

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

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

package/dist/components/hooks/useControlledState.js

@@ -0,0 +1,15 @@
+import { useState as a, useCallback as l } from "react";
+function S(t, o, s) {
+  const [f, c] = a(s), n = typeof t < "u", i = l(
+    (e) => {
+      const r = typeof e == "function" ? e(t) : e;
+      typeof o == "function" && o(r), n || c(e);
+    },
+    [t, o, n]
+  );
+  return [n ? t : f, i];
+}
+export {
+  S as useControlledState
+};
+//# sourceMappingURL=useControlledState.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"useControlledState.js","sources":["../../../src/components/hooks/useControlledState.ts"],"sourcesContent":["\"use client\";\nimport { useCallback, useState } from \"react\";\n\n// Ref:\n// https://github.com/adobe/react-spectrum/blob/main/packages/%40react-stately/utils/src/useControlledState.ts\n// https://github.com/chakra-ui/chakra-ui/tree/main/packages/hooks/use-controllable-state\n\nexport function useControlledState<T>(\n  value: T | undefined,\n  onChange: ((value: T, ...args: any[]) => void) | undefined,\n  defaultValue: T | undefined\n) {\n  const [internalState, setInternalState] = useState(defaultValue);\n\n  const isControlled = typeof value !== \"undefined\";\n\n  const setState = useCallback(\n    (next: T) => {\n      const nextValue = typeof next === \"function\" ? next(value) : next;\n      if (typeof onChange === \"function\") onChange(nextValue);\n      if (!isControlled) setInternalState(next);\n    },\n    [value, onChange, isControlled]\n  );\n\n  const state = isControlled ? value : internalState;\n\n  return [state, setState] as [T, React.Dispatch<React.SetStateAction<T>>];\n}\n"],"names":["useControlledState","value","onChange","defaultValue","internalState","setInternalState","useState","isControlled","setState","useCallback","next","nextValue"],"mappings":";AAOgB,SAAAA,EACdC,GACAC,GACAC,GACA;AACA,QAAM,CAACC,GAAeC,CAAgB,IAAIC,EAASH,CAAY,GAEzDI,IAAe,OAAON,IAAU,KAEhCO,IAAWC;AAAA,IACf,CAACC,MAAY;AACX,YAAMC,IAAY,OAAOD,KAAS,aAAaA,EAAKT,CAAK,IAAIS;AAC7D,MAAI,OAAOR,KAAa,cAAYA,EAASS,CAAS,GACjDJ,KAAcF,EAAiBK,CAAI;AAAA,IAC1C;AAAA,IACA,CAACT,GAAOC,GAAUK,CAAY;AAAA,EAChC;AAIO,SAAA,CAFOA,IAAeN,IAAQG,GAEtBI,CAAQ;AACzB;"}

package/dist/components/utils/WithAntdTokens.js

@@ -0,0 +1,24 @@
+import { jsx as p } from "react/jsx-runtime";
+import { useRender as a } from "@base-ui-components/react";
+import { useAntdCssVarClassname as c } from "./antdUtils.js";
+import { clsx as d } from "./cn.js";
+const x = ({
+  as: r = "div",
+  ref: s,
+  className: e,
+  ...o
+}) => {
+  const n = r, t = c(), { renderElement: m } = a({
+    render: /* @__PURE__ */ p(n, {}),
+    refs: [s],
+    props: {
+      ...o,
+      className: d(e, t)
+    }
+  });
+  return m();
+};
+export {
+  x as WithAntdTokens
+};
+//# sourceMappingURL=WithAntdTokens.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"WithAntdTokens.js","sources":["../../../src/components/utils/WithAntdTokens.tsx"],"sourcesContent":["\"use client\";\n\nimport { useRender } from \"@base-ui-components/react\";\nimport type {\n  ElementType,\n  JSX,\n  ComponentProps,\n  JSXElementConstructor,\n} from \"react\";\nimport { useAntdCssVarClassname } from \"./antdUtils\";\nimport { clsx } from \"./cn\";\n\ntype IntrinsicElement =\n  | keyof JSX.IntrinsicElements\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  | JSXElementConstructor<any>;\n\nexport type WidthAntdTokensProps<T extends IntrinsicElement> = {\n  as?: IntrinsicElement;\n} & ComponentProps<T>;\n\nexport const WithAntdTokens = <T extends IntrinsicElement = \"div\">({\n  as: Tag = \"div\",\n  ref,\n  className,\n  ...rest\n}: WidthAntdTokensProps<T>) => {\n  const Component = Tag as ElementType;\n  const cssVar = useAntdCssVarClassname();\n  const { renderElement } = useRender({\n    render: <Component />,\n    refs: [ref],\n    props: {\n      ...rest,\n      className: clsx(className, cssVar),\n    },\n  });\n  return renderElement();\n};\n"],"names":["WithAntdTokens","Tag","ref","className","rest","Component","cssVar","useAntdCssVarClassname","renderElement","useRender","clsx"],"mappings":";;;;AAqBO,MAAMA,IAAiB,CAAqC;AAAA,EACjE,IAAIC,IAAM;AAAA,EACV,KAAAC;AAAA,EACA,WAAAC;AAAA,EACA,GAAGC;AACL,MAA+B;AAC7B,QAAMC,IAAYJ,GACZK,IAASC,EAAuB,GAChC,EAAE,eAAAC,EAAc,IAAIC,EAAU;AAAA,IAClC,0BAASJ,GAAU,EAAA;AAAA,IACnB,MAAM,CAACH,CAAG;AAAA,IACV,OAAO;AAAA,MACL,GAAGE;AAAA,MACH,WAAWM,EAAKP,GAAWG,CAAM;AAAA,IAAA;AAAA,EACnC,CACD;AACD,SAAOE,EAAc;AACvB;"}

package/dist/components/utils/antdUtils.js

@@ -0,0 +1,58 @@
+import n from "antd/es/config-provider";
+import a from "antd/es/theme/useToken";
+import { useContext as i } from "react";
+import { cx as c } from "./cn.js";
+const C = () => {
+  const { getPrefixCls: o } = i(n.ConfigContext);
+  return { getPrefixCls: o };
+}, g = () => {
+  var t;
+  return (t = a()[4]) == null ? void 0 : t.key;
+}, b = () => {
+  const { getPrefixCls: o } = i(n.ConfigContext);
+  return (...t) => c(...t).map((e) => o(e)).join(" ");
+};
+function f(o) {
+  const t = [];
+  let e = "";
+  for (const r of o)
+    r >= "A" && r <= "Z" ? (e && t.push(e), e = r.toLowerCase()) : e += r;
+  return e && t.push(e), t.length > 0 ? t : [o];
+}
+const h = (o = "bottomLeft") => {
+  const [t, e] = f(o);
+  let r, s = "center";
+  if (t === "top" || t === "bottom") {
+    if (r = t, e)
+      switch (e) {
+        case "left":
+          s = "start";
+          break;
+        case "right":
+          s = "end";
+          break;
+      }
+  } else if (t === "left" || t === "right") {
+    if (r = t, e)
+      switch (e) {
+        case "top":
+          s = "start";
+          break;
+        case "bottom":
+          s = "end";
+          break;
+      }
+  } else
+    r = "bottom";
+  return {
+    placement: r,
+    align: s
+  };
+};
+export {
+  h as parseAntdPlacement,
+  g as useAntdCssVarClassname,
+  b as useCls,
+  C as useGetPrefixCls
+};
+//# sourceMappingURL=antdUtils.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"antdUtils.js","sources":["../../../src/components/utils/antdUtils.ts"],"sourcesContent":["\"use client\";\nimport { default as ConfigProvider } from \"antd/es/config-provider\";\nimport useToken from \"antd/es/theme/useToken\";\nimport { useContext } from \"react\";\nimport type { ClassValue } from \"./types\";\nimport { cx } from \"./cn\";\nimport { PopoverProps } from \"antd/es/popover\";\n\nexport const useGetPrefixCls = () => {\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  return { getPrefixCls };\n};\n\n/**\n *\n * @returns the antd classname providing css variables\n */\nexport const useAntdCssVarClassname = () => {\n  const token = useToken();\n  return token[4]?.key;\n};\n\nexport const useCls = () => {\n  const { getPrefixCls } = useContext(ConfigProvider.ConfigContext);\n  return (...args: ClassValue[]) => {\n    return cx(...args)\n      .map((cls) => getPrefixCls(cls))\n      .join(\" \");\n  };\n};\n\nfunction splitCamelCase(text: string): string[] {\n  const result: string[] = [];\n  let currentWord = \"\";\n\n  for (const char of text) {\n    if (char >= \"A\" && char <= \"Z\") {\n      if (currentWord) {\n        result.push(currentWord);\n      }\n      currentWord = char.toLowerCase();\n    } else {\n      currentWord += char;\n    }\n  }\n\n  if (currentWord) {\n    result.push(currentWord);\n  }\n\n  return result.length > 0 ? result : [text];\n}\n\nexport const parseAntdPlacement = (\n  placement: PopoverProps[\"placement\"] = \"bottomLeft\"\n): {\n  placement: \"top\" | \"bottom\" | \"left\" | \"right\";\n  align: \"start\" | \"end\" | \"center\";\n} => {\n  const [position1, position2] = splitCamelCase(placement);\n\n  // Determine primary placement\n  let primaryPlacement: \"top\" | \"bottom\" | \"left\" | \"right\";\n  let align: \"start\" | \"end\" | \"center\" = \"center\";\n\n  // First check if it's a vertical or horizontal primary placement\n  if (position1 === \"top\" || position1 === \"bottom\") {\n    primaryPlacement = position1;\n    if (position2) {\n      switch (position2) {\n        case \"left\":\n          align = \"start\";\n          break;\n        case \"right\":\n          align = \"end\";\n          break;\n        // \"top\" or \"bottom\" as second position is invalid, defaults to center\n      }\n    }\n  } else if (position1 === \"left\" || position1 === \"right\") {\n    primaryPlacement = position1;\n    if (position2) {\n      switch (position2) {\n        case \"top\":\n          align = \"start\";\n          break;\n        case \"bottom\":\n          align = \"end\";\n          break;\n        // \"left\" or \"right\" as second position is invalid, defaults to center\n      }\n    }\n  } else {\n    // Fallback for invalid placement\n    primaryPlacement = \"bottom\";\n  }\n\n  return {\n    placement: primaryPlacement,\n    align,\n  };\n};\n"],"names":["useGetPrefixCls","getPrefixCls","useContext","ConfigProvider","useAntdCssVarClassname","_a","useToken","useCls","args","cx","cls","splitCamelCase","text","result","currentWord","char","parseAntdPlacement","placement","position1","position2","primaryPlacement","align"],"mappings":";;;;AAQO,MAAMA,IAAkB,MAAM;AACnC,QAAM,EAAE,cAAAC,EAAiB,IAAAC,EAAWC,EAAe,aAAa;AAChE,SAAO,EAAE,cAAAF,EAAa;AACxB,GAMaG,IAAyB,MAAM;;AAEnC,UAAAC,IADOC,EAAS,EACV,CAAC,MAAP,gBAAAD,EAAU;AACnB,GAEaE,IAAS,MAAM;AAC1B,QAAM,EAAE,cAAAN,EAAiB,IAAAC,EAAWC,EAAe,aAAa;AAChE,SAAO,IAAIK,MACFC,EAAG,GAAGD,CAAI,EACd,IAAI,CAACE,MAAQT,EAAaS,CAAG,CAAC,EAC9B,KAAK,GAAG;AAEf;AAEA,SAASC,EAAeC,GAAwB;AAC9C,QAAMC,IAAmB,CAAC;AAC1B,MAAIC,IAAc;AAElB,aAAWC,KAAQH;AACb,IAAAG,KAAQ,OAAOA,KAAQ,OACrBD,KACFD,EAAO,KAAKC,CAAW,GAEzBA,IAAcC,EAAK,YAAY,KAEhBD,KAAAC;AAInB,SAAID,KACFD,EAAO,KAAKC,CAAW,GAGlBD,EAAO,SAAS,IAAIA,IAAS,CAACD,CAAI;AAC3C;AAEa,MAAAI,IAAqB,CAChCC,IAAuC,iBAIpC;AACH,QAAM,CAACC,GAAWC,CAAS,IAAIR,EAAeM,CAAS;AAGnD,MAAAG,GACAC,IAAoC;AAGpC,MAAAH,MAAc,SAASA,MAAc;AAEvC,QADmBE,IAAAF,GACfC;AACF,cAAQA,GAAW;AAAA,QACjB,KAAK;AACK,UAAAE,IAAA;AACR;AAAA,QACF,KAAK;AACK,UAAAA,IAAA;AACR;AAAA,MAAA;AAAA,aAIGH,MAAc,UAAUA,MAAc;AAE/C,QADmBE,IAAAF,GACfC;AACF,cAAQA,GAAW;AAAA,QACjB,KAAK;AACK,UAAAE,IAAA;AACR;AAAA,QACF,KAAK;AACK,UAAAA,IAAA;AACR;AAAA,MAAA;AAAA;AAMa,IAAAD,IAAA;AAGd,SAAA;AAAA,IACL,WAAWA;AAAA,IACX,OAAAC;AAAA,EACF;AACF;"}