@bioturing/components 0.15.5 → 0.16.0

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

@@ -1 +1 @@
-{"version":3,"file":"component.js","sources":["../../../src/components/Truncate/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { getMiddleTruncatedString } from \"./helpers\";\n\nimport \"./style.css\";\n\nexport type TruncatePosition = \"middle\" | \"end\";\n\nexport type Props = {\n  text: string;\n} & React.CSSProperties;\n\nexport interface TruncateProps\n  extends Omit<React.ComponentPropsWithoutRef<\"span\">, \"title\"> {\n  /** Text content to be truncated */\n  children: string;\n  /** Where to truncate the text: start, middle, or end */\n  position?: TruncatePosition;\n  /** Number of lines to display before truncating (default: 1, 'auto' to fit parent height) */\n  lines?: number | \"auto\";\n}\n\nexport const Truncate: React.FC<TruncateProps> = ({\n  children,\n  position = \"end\",\n  lines = 1,\n  className,\n  style,\n  ...rest\n}) => {\n  const cls = useCls();\n  const containerRef = useRef<HTMLElement>(null);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [truncatedText, setTruncatedText] = useState(children);\n\n  const text = children;\n\n  // Get appropriate container styles based on position and lines\n  const getContainerStyles = useCallback(() => {\n    // For explicit line numbers or single line\n    if (lines !== \"auto\") {\n      return {\n        ...style,\n        ...(lines > 1 ? { \"--ds-line-clamp\": lines } : {}),\n      } as React.CSSProperties;\n    }\n\n    // For auto line calculation, we'll let the useLayoutEffect handle it\n    return {\n      ...style,\n      // Set a temporary high value to ensure it fits the parent\n      \"--ds-line-clamp\": 999,\n    } as React.CSSProperties;\n  }, [lines, style]);\n\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Handle auto-height calculation\n    if (lines === \"auto\") {\n      setTruncatedText(text);\n\n      const calculateLines = () => {\n        // Get the parent element's height\n        const parent = container.parentElement;\n        if (!parent) return;\n\n        // Calculate the font size and line height\n        const styles = window.getComputedStyle(container);\n        const fontSize = parseFloat(styles.fontSize);\n        const lineHeight =\n          styles.lineHeight === \"normal\"\n            ? fontSize * 1.2 // Approximate for \"normal\"\n            : parseFloat(styles.lineHeight);\n\n        // Get parent's padding and border to subtract from available height\n        const parentStyles = window.getComputedStyle(parent);\n        const paddingTop = parseFloat(parentStyles.paddingTop) || 0;\n        const paddingBottom = parseFloat(parentStyles.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(parentStyles.borderTopWidth) || 0;\n        const borderBottomWidth =\n          parseFloat(parentStyles.borderBottomWidth) || 0;\n\n        // Calculate how many lines can fit in the available space\n        const parentHeight = parent.clientHeight;\n        const availableHeight =\n          parentHeight -\n          paddingTop -\n          paddingBottom -\n          borderTopWidth -\n          borderBottomWidth;\n        const maxLines = Math.max(1, Math.floor(availableHeight / lineHeight));\n\n        // Apply the calculated line-clamp\n        if (container) {\n          container.style.setProperty(\"--ds-line-clamp\", String(maxLines));\n        }\n\n        // Check if the text is truncated\n        const clone = document.createElement(\"span\");\n        clone.style.visibility = \"hidden\";\n        clone.style.position = \"absolute\";\n        clone.style.width = `${container.clientWidth}px`;\n        clone.style.fontSize = styles.fontSize;\n        clone.style.fontFamily = styles.fontFamily;\n        clone.style.lineHeight = styles.lineHeight;\n        clone.textContent = text;\n        document.body.appendChild(clone);\n\n        const isTruncated = clone.scrollHeight > availableHeight;\n        document.body.removeChild(clone);\n\n        setIsTruncated(isTruncated);\n      };\n\n      window.document.fonts?.ready?.then(calculateLines);\n      const observer = new ResizeObserver(() => {\n        window.requestAnimationFrame(calculateLines);\n      });\n\n      observer.observe(container);\n      if (container.parentElement) {\n        observer.observe(container.parentElement);\n      }\n\n      return () => observer.disconnect();\n    }\n\n    // Skip custom truncation logic for multi-line mode\n    if (typeof lines === \"number\" && lines > 1) {\n      setTruncatedText(text);\n      // Check if text is truncated by comparing heights\n      const checkIfTruncated = () => {\n        const clone = document.createElement(\"span\");\n        clone.style.visibility = \"hidden\";\n        clone.style.position = \"absolute\";\n        clone.style.width = `${container.clientWidth}px`;\n        clone.textContent = text;\n        document.body.appendChild(clone);\n        const isTruncated =\n          clone.scrollHeight >\n          (container.clientHeight || container.offsetHeight);\n        document.body.removeChild(clone);\n        setIsTruncated(isTruncated);\n      };\n\n      window.document.fonts?.ready?.then(checkIfTruncated);\n      const observer = new ResizeObserver(() => {\n        window.requestAnimationFrame(checkIfTruncated);\n      });\n\n      observer.observe(container);\n      return () => observer.disconnect();\n    }\n\n    // Original single-line truncation logic\n    let cancellationToken = { cancelled: false };\n\n    const calculateTruncatedString = () => {\n      if (cancellationToken) cancellationToken.cancelled = true;\n\n      const requestCancellationToken = { cancelled: false };\n      cancellationToken = requestCancellationToken;\n\n      const truncated = getMiddleTruncatedString(text, \"\\u2026\", container);\n\n      if (requestCancellationToken.cancelled) return;\n\n      setTruncatedText(truncated);\n    };\n\n    if (position == \"middle\") {\n      window.document.fonts?.ready?.then(calculateTruncatedString);\n    }\n\n    if (position == \"end\") {\n      setTruncatedText(text);\n    }\n\n    const observer = new ResizeObserver(() => {\n      if (position == \"middle\")\n        window.requestAnimationFrame(calculateTruncatedString);\n      if (position == \"end\") {\n        const isOverflowing = container.scrollWidth > container.clientWidth;\n        if (isOverflowing) {\n          setIsTruncated(true);\n        }\n      }\n    });\n\n    observer.observe(container);\n\n    return () => {\n      cancellationToken.cancelled = true;\n      observer.disconnect();\n    };\n  }, [text, position, lines]);\n\n  return (\n    <span\n      ref={containerRef}\n      style={getContainerStyles()}\n      className={clsx(\n        lines === 1 ? cls(\"truncate\") : cls(\"truncate-multiline\"),\n        position === \"middle\" ? cls(\"truncate-middle\") : cls(\"truncate-end\"),\n        className\n      )}\n      title={isTruncated ? text : undefined}\n      {...rest}\n    >\n      {text === truncatedText ? text : <span>{truncatedText}</span>}\n    </span>\n  );\n};\n"],"names":["Truncate","children","position","lines","className","style","rest","cls","useCls","containerRef","useRef","isTruncated","setIsTruncated","useState","truncatedText","setTruncatedText","text","getContainerStyles","useCallback","useLayoutEffect","container","calculateLines","parent","styles","fontSize","lineHeight","parentStyles","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","availableHeight","maxLines","clone","_b","_a","observer","checkIfTruncated","_d","_c","cancellationToken","calculateTruncatedString","requestCancellationToken","truncated","getMiddleTruncatedString","_f","_e","jsx","clsx"],"mappings":"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"}
+{"version":3,"file":"component.js","sources":["../../../src/components/Truncate/component.tsx"],"sourcesContent":["\"use client\";\nimport React, { useCallback, useLayoutEffect, useRef, useState } from \"react\";\nimport { clsx, useCls } from \"../utils\";\nimport { getMiddleTruncatedString } from \"./helpers\";\n\nimport \"./style.css\";\n\nexport type TruncatePosition = \"middle\" | \"end\";\n\nexport type Props = {\n  text: string;\n} & React.CSSProperties;\n\nexport interface TruncateProps\n  extends Omit<React.ComponentPropsWithoutRef<\"span\">, \"title\"> {\n  /** Text content to be truncated */\n  children: string;\n  /** Where to truncate the text: start, middle, or end */\n  position?: TruncatePosition;\n  /** Number of lines to display before truncating (default: 1, 'auto' to fit parent height) */\n  lines?: number | \"auto\";\n}\n\nexport const Truncate: React.FC<TruncateProps> = ({\n  children,\n  position = \"end\",\n  lines = 1,\n  className,\n  style,\n  ...rest\n}) => {\n  const cls = useCls();\n  const containerRef = useRef<HTMLElement>(null);\n  const [isTruncated, setIsTruncated] = useState(false);\n  const [truncatedText, setTruncatedText] = useState(children);\n\n  const text = children;\n\n  // Get appropriate container styles based on position and lines\n  const getContainerStyles = useCallback(() => {\n    // For explicit line numbers or single line\n    if (lines !== \"auto\") {\n      return {\n        ...style,\n        ...(lines > 1 ? { \"--ds-line-clamp\": lines } : {}),\n      } as React.CSSProperties;\n    }\n\n    // For auto line calculation, we'll let the useLayoutEffect handle it\n    return {\n      ...style,\n      // Set a temporary high value to ensure it fits the parent\n      \"--ds-line-clamp\": 999,\n    } as React.CSSProperties;\n  }, [lines, style]);\n\n  useLayoutEffect(() => {\n    const container = containerRef.current;\n    if (!container) return;\n\n    // Handle auto-height calculation\n    if (lines === \"auto\") {\n      setTruncatedText(text);\n\n      const calculateLines = () => {\n        // Get the parent element's height\n        const parent = container.parentElement;\n        if (!parent) return;\n\n        // Calculate the font size and line height\n        const styles = window.getComputedStyle(container);\n        const fontSize = parseFloat(styles.fontSize);\n        const lineHeight =\n          styles.lineHeight === \"normal\"\n            ? fontSize * 1.2 // Approximate for \"normal\"\n            : parseFloat(styles.lineHeight);\n\n        // Get parent's padding and border to subtract from available height\n        const parentStyles = window.getComputedStyle(parent);\n        const paddingTop = parseFloat(parentStyles.paddingTop) || 0;\n        const paddingBottom = parseFloat(parentStyles.paddingBottom) || 0;\n        const borderTopWidth = parseFloat(parentStyles.borderTopWidth) || 0;\n        const borderBottomWidth =\n          parseFloat(parentStyles.borderBottomWidth) || 0;\n\n        // Calculate how many lines can fit in the available space\n        const parentHeight = parent.clientHeight;\n        const availableHeight =\n          parentHeight -\n          paddingTop -\n          paddingBottom -\n          borderTopWidth -\n          borderBottomWidth;\n        const maxLines = Math.max(1, Math.floor(availableHeight / lineHeight));\n\n        // Apply the calculated line-clamp\n        if (container) {\n          container.style.setProperty(\"--ds-line-clamp\", String(maxLines));\n        }\n\n        // Check if the text is truncated\n        const clone = document.createElement(\"span\");\n        clone.style.visibility = \"hidden\";\n        clone.style.position = \"absolute\";\n        clone.style.width = `${container.clientWidth}px`;\n        clone.style.fontSize = styles.fontSize;\n        clone.style.fontFamily = styles.fontFamily;\n        clone.style.lineHeight = styles.lineHeight;\n        clone.textContent = text;\n        document.body.appendChild(clone);\n\n        const isTruncated = clone.scrollHeight > availableHeight;\n        document.body.removeChild(clone);\n\n        setIsTruncated(isTruncated);\n      };\n\n      window.document.fonts?.ready?.then(calculateLines);\n      const observer = new ResizeObserver(() => {\n        window.requestAnimationFrame(calculateLines);\n      });\n\n      observer.observe(container);\n      if (container.parentElement) {\n        observer.observe(container.parentElement);\n      }\n\n      return () => observer.disconnect();\n    }\n\n    // Skip custom truncation logic for multi-line mode\n    if (typeof lines === \"number\" && lines > 1) {\n      setTruncatedText(text);\n      // Check if text is truncated by comparing heights\n      const checkIfTruncated = () => {\n        const clone = document.createElement(\"span\");\n        clone.style.visibility = \"hidden\";\n        clone.style.position = \"absolute\";\n        clone.style.width = `${container.clientWidth}px`;\n        clone.textContent = text;\n        document.body.appendChild(clone);\n        const isTruncated =\n          clone.scrollHeight >\n          (container.clientHeight || container.offsetHeight);\n        document.body.removeChild(clone);\n        setIsTruncated(isTruncated);\n      };\n\n      window.document.fonts?.ready?.then(checkIfTruncated);\n      const observer = new ResizeObserver(() => {\n        window.requestAnimationFrame(checkIfTruncated);\n      });\n\n      observer.observe(container);\n      return () => observer.disconnect();\n    }\n\n    // Original single-line truncation logic\n    let cancellationToken = { cancelled: false };\n\n    const calculateTruncatedString = () => {\n      if (cancellationToken) cancellationToken.cancelled = true;\n\n      const requestCancellationToken = { cancelled: false };\n      cancellationToken = requestCancellationToken;\n\n      const truncated = getMiddleTruncatedString(text, \"\\u2026\", container);\n\n      if (requestCancellationToken.cancelled) return;\n\n      setTruncatedText(truncated);\n    };\n\n    if (position == \"middle\") {\n      window.document.fonts?.ready?.then(calculateTruncatedString);\n    }\n\n    if (position == \"end\") {\n      setTruncatedText(text);\n    }\n\n    const observer = new ResizeObserver(() => {\n      if (position == \"middle\")\n        window.requestAnimationFrame(calculateTruncatedString);\n      if (position == \"end\") {\n        const isOverflowing = container.scrollWidth > container.clientWidth;\n        if (isOverflowing) {\n          setIsTruncated(true);\n        }\n      }\n    });\n\n    observer.observe(container);\n\n    return () => {\n      cancellationToken.cancelled = true;\n      observer.disconnect();\n    };\n  }, [text, position, lines]);\n\n  return (\n    <span\n      ref={containerRef}\n      style={getContainerStyles()}\n      className={clsx(\n        lines === 1 ? cls(\"truncate\") : cls(\"truncate-multiline\"),\n        position === \"middle\" ? cls(\"truncate-middle\") : cls(\"truncate-end\"),\n        className\n      )}\n      title={isTruncated ? text : undefined}\n      {...rest}\n    >\n      {text === truncatedText ? text : <span>{truncatedText}</span>}\n    </span>\n  );\n};\n"],"names":["Truncate","children","position","lines","className","style","rest","cls","useCls","containerRef","useRef","isTruncated","setIsTruncated","useState","truncatedText","setTruncatedText","text","getContainerStyles","useCallback","useLayoutEffect","container","calculateLines","parent","styles","fontSize","lineHeight","parentStyles","paddingTop","paddingBottom","borderTopWidth","borderBottomWidth","availableHeight","maxLines","clone","_b","_a","observer","checkIfTruncated","_d","_c","cancellationToken","calculateTruncatedString","requestCancellationToken","truncated","getMiddleTruncatedString","_f","_e","jsx","clsx"],"mappings":"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"}

package/dist/components/Upload/component.js

@@ -1,9 +1,11 @@
+"use client";
 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 { CloudArrowUp as c } from "@bioturing/assets";
+import { Dragger as d } from "./dragger.js";
+import { useUploadItemRender as a } from "./hooks.js";
 import { UploadItem as f } from "./item.js";
+import './style.css';/* empty css          */
 import { Button as u } from "../Button/component.js";
 import { useCls as U } from "../utils/antdUtils.js";
 import { clsx as g } from "../utils/cn.js";
@@ -14,26 +16,26 @@ const h = ({
   className: t,
   fileList: e,
   children: m,
-  ...l
+  ...i
 }) => {
-  const p = U(), i = /* @__PURE__ */ o(u, { icon: /* @__PURE__ */ o(d, { size: 24 }), type: "default", children: "Upload Files" }), s = c({ showRemoveButton: r });
+  const l = U(), p = /* @__PURE__ */ o(u, { icon: /* @__PURE__ */ o(c, { size: 24 }), type: "default", children: "Upload Files" }), s = a({ showRemoveButton: r });
   return /* @__PURE__ */ o(
     n,
     {
-      className: g(p("upload"), t),
-      ...l,
+      className: g(l("upload"), t),
+      ...i,
       fileList: e,
       itemRender: s,
-      children: m || i
+      children: m || p
     }
   );
-}, z = Object.assign(h, {
+}, B = Object.assign(h, {
   // Dragger,
-  Dragger: a,
+  Dragger: d,
   Item: f
 });
 export {
   h as DefaultUpload,
-  z as Upload
+  B as Upload
 };
 //# sourceMappingURL=component.js.map

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

@@ -1 +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;"}
+{"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// Import component-specific styles\nimport \"./style.css\";\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":";;;;;;;;;;;AA2CO,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

@@ -1,4 +1,5 @@
-import { jsx as r, jsxs as p, Fragment as i } from "react/jsx-runtime";
+"use client";
+import { jsx as r, jsxs as i, Fragment as p } from "react/jsx-runtime";
 import m from "antd/es/upload";
 import { CloudArrowUp as u } from "@bioturing/assets";
 import { useUploadItemRender as c } from "./hooks.js";
@@ -10,7 +11,7 @@ const N = ({
   itemRender: a,
   ...n
 }) => {
-  const e = f(), s = () => /* @__PURE__ */ p(i, { children: [
+  const e = f(), s = () => /* @__PURE__ */ i(p, { 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 })

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

@@ -1 +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;"}
+{"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

@@ -1,7 +1,8 @@
+"use client";
 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(
+const d = ({ showRemoveButton: r = !0 }) => o((s, e, a, t) => /* @__PURE__ */ m(
   n,
   {
     fileName: e.name,
@@ -13,6 +14,6 @@ const c = ({ showRemoveButton: r = !0 }) => o((a, e, s, t) => /* @__PURE__ */ m(
   }
 ), [r]);
 export {
-  c as useUploadItemRender
+  d as useUploadItemRender
 };
 //# sourceMappingURL=hooks.js.map

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

@@ -1 +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;"}
+{"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/style.css

@@ -0,0 +1 @@
+@layer components{.ds-upload-wrapper{display:flex;flex-direction:column}.ds-upload-list{display:flex;flex-direction:column;flex-grow:1}.ds-upload-list-item-container{margin-top:.5rem}.ds-upload-item{padding:.5rem;border-radius:var(--ds-border-radius);border:1px solid var(--ds-color-border);flex-grow:1}.ds-upload-item-icon{font-size:1.25rem;color:var(--ds-color-text-tertiary)}.ds-upload-drag-icon{font-size:2.5rem;color:var(--ds-color-primary);margin-bottom:.5rem;display:flex;align-items:center;justify-content:center}.ds-upload-item-content{display:flex;align-items:center;justify-content:space-between;min-width:0}.ds-upload-item-name-progress{min-width:0;display:flex;flex-direction:column;flex-grow:1;flex-shrink:1;gap:0rem}}

package/dist/components/VerticalCollapsiblePanel/component.js

@@ -1,76 +1,79 @@
+"use client";
 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 { useState as V, 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 './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 { 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 { IconButton as f } from "../IconButton/component.js";
 const Z = ({
   children: h,
-  title: n,
-  defaultOpen: b = !1,
-  open: u,
+  title: i,
+  defaultOpen: u = !1,
+  open: b,
   onOpenChange: N,
   className: C,
-  headerClassName: y,
-  headerInnerClassName: v,
-  bodyClassName: x,
+  headerClassName: x,
+  headerInnerClassName: y,
+  bodyClassName: v,
   contentPadding: a = "16px",
-  afterTitle: p,
+  afterTitle: c,
   actions: O,
-  useTitleAsTrigger: c = !0,
+  useTitleAsTrigger: p = !0,
   keepMounted: w = !1
 }) => {
-  const e = $(), [s, t] = R(
-    u,
+  const e = T(), [s, t] = R(
+    b,
     N,
-    b
-  ), [B, I] = j(s), m = k(null), d = z(m, s), V = q();
-  return A(() => {
+    u
+  ), [k, B] = V(s), m = g(null), d = q(m, {
+    waitForNextTick: s
+  }), F = $();
+  return j(() => {
     d(() => {
-      I(s);
+      B(s);
     });
   }, [s, d]), /* @__PURE__ */ r(
-    i.Root,
+    n.Root,
     {
-      className: o(e("collapsible-panel"), V, C),
+      className: o(e("collapsible-panel"), F, 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"), x), children: [
           /* @__PURE__ */ r(
             "div",
             {
               className: o(
                 e("collapsible-panel-header-inner"),
-                v
+                y
               ),
               children: [
                 /* @__PURE__ */ l(
                   "div",
                   {
                     className: e("collapsible-panel-header-text"),
-                    onClick: c ? () => t((g) => !g) : void 0,
-                    style: c ? {
+                    onClick: p ? () => t((I) => !I) : void 0,
+                    style: p ? {
                       cursor: "pointer"
                     } : {},
-                    children: typeof n == "string" ? /* @__PURE__ */ l(S, { children: n }) : n
+                    children: typeof i == "string" ? /* @__PURE__ */ l(S, { children: i }) : i
                   }
                 ),
                 /* @__PURE__ */ r("div", { className: e("collapsible-panel-header-actions"), children: [
                   s && O,
                   /* @__PURE__ */ l(
-                    i.Trigger,
+                    n.Trigger,
                     {
                       className: e("collapsible-panel-trigger"),
                       render: s ? /* @__PURE__ */ l(f, { children: /* @__PURE__ */ l(
-                        F,
+                        A,
                         {
                           weight: "bold",
                           className: o(
@@ -94,10 +97,10 @@ const Z = ({
               ]
             }
           ),
-          s && p && /* @__PURE__ */ l("div", { className: e("collapsible-panel-header-after"), children: p })
+          s && c && /* @__PURE__ */ l("div", { className: e("collapsible-panel-header-after"), children: c })
         ] }),
         /* @__PURE__ */ l(
-          i.Panel,
+          n.Panel,
           {
             className: e("collapsible-panel-content"),
             style: typeof a < "u" ? {
@@ -107,8 +110,8 @@ const Z = ({
             children: /* @__PURE__ */ l(
               E,
               {
-                show: B,
-                className: o(e("collapsible-panel-body"), x),
+                show: k,
+                className: o(e("collapsible-panel-body"), v),
                 keepMounted: !0,
                 children: /* @__PURE__ */ l("div", { children: h })
               }

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, 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":";;;;;;;;;;;;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,GAAKN,CAAM,GAC3DU,IAAUC,EAAuB;AACvC,SAAAC,EAAU,MAAM;AACd,IAAAJ,EAAwB,MAAM;AAC5B,MAAAJ,EAAcJ,CAAM;AAAA,IAAA,CACrB;AAAA,EAAA,GACA,CAACA,GAAQQ,CAAuB,CAAC,GAElC,gBAAAK;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAKjB,EAAI,mBAAmB,GAAGY,GAASrB,CAAS;AAAA,MAC5D,MAAMW;AAAA,MACN,cAAcC;AAAA,MACd,KAAAK;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAO,EAAC,SAAI,WAAWE,EAAKjB,EAAI,0BAA0B,GAAGR,CAAe,GACnE,UAAA;AAAA,UAAA,gBAAAuB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAA,gBACTjB,EAAI,gCAAgC;AAAA,gBACpCP;AAAA,cACF;AAAA,cAEA,UAAA;AAAA,gBAAA,gBAAAyB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWlB,EAAI,+BAA+B;AAAA,oBAC9C,SACEF,IAAoB,MAAMK,EAAU,CAACgB,MAAS,CAACA,CAAI,IAAI;AAAA,oBAEzD,OACErB,IACI;AAAA,sBACE,QAAQ;AAAA,oBAAA,IAEV,CAAC;AAAA,oBAGN,iBAAOX,KAAS,WAAY,gBAAA+B,EAAAE,GAAA,EAAU,aAAM,IAAcjC;AAAA,kBAAA;AAAA,gBAC7D;AAAA,gBACC,gBAAA4B,EAAA,OAAA,EAAI,WAAWf,EAAI,kCAAkC,GACnD,UAAA;AAAA,kBAAUE,KAAAL;AAAA,kBACX,gBAAAqB;AAAA,oBAACF,EAAY;AAAA,oBAAZ;AAAA,sBACC,WAAWhB,EAAI,2BAA2B;AAAA,sBAC1C,QACEE,IACE,gBAAAgB,EAACG,GACC,EAAA,UAAA,gBAAAH;AAAA,wBAACI;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,WAAWL;AAAA,4BACTjB,EAAI,yBAAyB;AAAA,4BAC7BE,KAAUF,EAAI,8BAA8B;AAAA,0BAAA;AAAA,wBAC9C;AAAA,sBACF,EAAA,CACF,IAEA,gBAAAkB,EAACG,GACC,EAAA,UAAA,gBAAAH;AAAA,wBAACK;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,WAAWN;AAAA,4BACTjB,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,gBAAAsB,EAAA,OAAA,EAAI,WAAWlB,EAAI,gCAAgC,GACjD,UACHJ,EAAA,CAAA;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAsB;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACC,WAAWhB,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,gBAAAmB;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,MAAMnB;AAAA,gBACN,WAAWY,EAAKjB,EAAI,wBAAwB,GAAGN,CAAa;AAAA,gBAC5D,aAAW;AAAA,gBAEX,UAAA,gBAAAwB,EAAC,SAAK,UAAAhC,EAAS,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}
+{"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":";;;;;;;;;;;;;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,GACKU,IAAUC,EAAuB;AACvC,SAAAC,EAAU,MAAM;AACd,IAAAJ,EAAwB,MAAM;AAC5B,MAAAJ,EAAcJ,CAAM;AAAA,IAAA,CACrB;AAAA,EAAA,GACA,CAACA,GAAQQ,CAAuB,CAAC,GAElC,gBAAAK;AAAA,IAACC,EAAY;AAAA,IAAZ;AAAA,MACC,WAAWC,EAAKjB,EAAI,mBAAmB,GAAGY,GAASrB,CAAS;AAAA,MAC5D,MAAMW;AAAA,MACN,cAAcC;AAAA,MACd,KAAAK;AAAA,MAEA,UAAA;AAAA,QAAA,gBAAAO,EAAC,SAAI,WAAWE,EAAKjB,EAAI,0BAA0B,GAAGR,CAAe,GACnE,UAAA;AAAA,UAAA,gBAAAuB;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,WAAWE;AAAA,gBACTjB,EAAI,gCAAgC;AAAA,gBACpCP;AAAA,cACF;AAAA,cAEA,UAAA;AAAA,gBAAA,gBAAAyB;AAAA,kBAAC;AAAA,kBAAA;AAAA,oBACC,WAAWlB,EAAI,+BAA+B;AAAA,oBAC9C,SACEF,IAAoB,MAAMK,EAAU,CAACgB,MAAS,CAACA,CAAI,IAAI;AAAA,oBAEzD,OACErB,IACI;AAAA,sBACE,QAAQ;AAAA,oBAAA,IAEV,CAAC;AAAA,oBAGN,iBAAOX,KAAS,WAAY,gBAAA+B,EAAAE,GAAA,EAAU,aAAM,IAAcjC;AAAA,kBAAA;AAAA,gBAC7D;AAAA,gBACC,gBAAA4B,EAAA,OAAA,EAAI,WAAWf,EAAI,kCAAkC,GACnD,UAAA;AAAA,kBAAUE,KAAAL;AAAA,kBACX,gBAAAqB;AAAA,oBAACF,EAAY;AAAA,oBAAZ;AAAA,sBACC,WAAWhB,EAAI,2BAA2B;AAAA,sBAC1C,QACEE,IACE,gBAAAgB,EAACG,GACC,EAAA,UAAA,gBAAAH;AAAA,wBAACI;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,WAAWL;AAAA,4BACTjB,EAAI,yBAAyB;AAAA,4BAC7BE,KAAUF,EAAI,8BAA8B;AAAA,0BAAA;AAAA,wBAC9C;AAAA,sBACF,EAAA,CACF,IAEA,gBAAAkB,EAACG,GACC,EAAA,UAAA,gBAAAH;AAAA,wBAACK;AAAA,wBAAA;AAAA,0BACC,QAAO;AAAA,0BACP,WAAWN;AAAA,4BACTjB,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,gBAAAsB,EAAA,OAAA,EAAI,WAAWlB,EAAI,gCAAgC,GACjD,UACHJ,EAAA,CAAA;AAAA,QAAA,GAEJ;AAAA,QACA,gBAAAsB;AAAA,UAACF,EAAY;AAAA,UAAZ;AAAA,YACC,WAAWhB,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,gBAAAmB;AAAA,cAACM;AAAA,cAAA;AAAA,gBACC,MAAMnB;AAAA,gBACN,WAAWY,EAAKjB,EAAI,wBAAwB,GAAGN,CAAa;AAAA,gBAC5D,aAAW;AAAA,gBAEX,UAAA,gBAAAwB,EAAC,SAAK,UAAAhC,EAAS,CAAA;AAAA,cAAA;AAAA,YAAA;AAAA,UACjB;AAAA,QAAA;AAAA,MACF;AAAA,IAAA;AAAA,EACF;AAEJ;"}

package/dist/components/hooks/antd.js

@@ -1,9 +1,10 @@
+"use client";
 import s from "antd/es/theme";
-import r from "antd/es/grid";
+import t 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 m = s.useToken, p = t.useBreakpoint, a = () => {
   const { message: e } = o();
   return e;
 }, c = () => {
@@ -16,7 +17,7 @@ export {
   l as useForm,
   a as useMessage,
   c as useModal,
-  n as useToken,
+  m as useToken,
   x as useWatch
 };
 //# sourceMappingURL=antd.js.map

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

@@ -1 +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;"}
+{"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

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

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

@@ -1 +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;"}
+{"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  {\n    waitForNextTick = false,\n    subtree = false,\n  }: {\n    waitForNextTick?: boolean;\n    subtree?: boolean;\n  }\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\n              .getAnimations({\n                subtree,\n              })\n              .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","subtree","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;AAEO,SAASO,EACdP,GACA;AAAA,EACE,iBAAAQ,IAAkB;AAAA,EAClB,SAAAC,IAAU;AACZ,GAIA;AACM,QAAAC,IAAWT,EAAO,EAAE,GACpBU,IAAaV,EAAO,EAAE,GAEtBW,IAAcd,EAAiB,MAAM;AACzC,yBAAqBY,EAAS,OAAO,GACrC,aAAaC,EAAW,OAAO;AAAA,EAAA,CAChC;AAED,SAAAd,EAAU,MAAMe,GAAa,CAACA,CAAW,CAAC,GAEnCd,EAAiB,CAACe,MAA4B;AACvC,IAAAD,EAAA;AAEZ,UAAME,IAAUd,EAAI;AAEpB,IAAKc,MAID,OAAOA,EAAQ,iBAAkB,aACvBD,EAAA,IAEHH,EAAA,UAAU,sBAAsB,MAAM;AAC7C,eAASK,IAAO;AACd,QAAKD,KAIG,QAAA;AAAA,UACNA,EACG,cAAc;AAAA,YACb,SAAAL;AAAA,UACD,CAAA,EACA,IAAI,CAACO,MAASA,EAAK,QAAQ;AAAA,QAChC,EAAE,KAAK,MAAM;AAGX,UAAAC,EAAUJ,CAAW;AAAA,QAAA,CACtB;AAAA,MAAA;AAIH,MAAIL,IACSG,EAAA,UAAU,OAAO,WAAWI,CAAI,IAEtCA,EAAA;AAAA,IACP,CACD;AAAA,EACH,CACD;AACH;"}

package/dist/components/hooks/useControlledState.js

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

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

@@ -1 +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;"}
+{"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\n/**\n * A hook that manages state that can be either controlled or uncontrolled.\n *\n * @param value - The controlled value\n * @param onChange - Callback when the value changes\n * @param defaultValue - Default value for uncontrolled state\n * @returns [currentValue, setValue] - Current value and setter function\n */\nexport function useControlledState<T, K extends unknown[] = []>(\n  value?: T,\n  onChange?:\n    | ((value: T, ...args: K | []) => void)\n    | React.Dispatch<React.SetStateAction<T>>,\n  defaultValue?: T\n): [\n  T | undefined,\n  (value: T | ((prev: T | undefined) => T), ...args: K | []) => void\n] {\n  const [internalState, setInternalState] = useState<T | undefined>(\n    defaultValue\n  );\n\n  const isControlled = value !== undefined;\n  const currentValue = isControlled ? value : internalState;\n\n  // This is a generic setter function that works with both controlled and uncontrolled modes\n  // and preserves the ability to pass additional arguments to the onChange handler\n  const setValue = useCallback(\n    function setValue(\n      nextValue: T | ((prev: T | undefined) => T),\n      ...args: K | []\n    ): void {\n      // If nextValue is a function, call it with the current value\n      const resolvedValue =\n        typeof nextValue === \"function\"\n          ? (nextValue as (prev: T | undefined) => T)(currentValue)\n          : nextValue;\n\n      // Only update internal state if we're not controlled\n      if (!isControlled) {\n        setInternalState(resolvedValue);\n      }\n\n      // Call onChange if provided\n      if (onChange) {\n        if (typeof onChange === \"function\") {\n          // Check if onChange is the multi-argument form\n          if (onChange.length > 1) {\n            // It's the form: (value: T, ...args: K) => void\n            // Use a type assertion to handle the variable arguments\n            (onChange as (value: T, ...args: K) => void)(\n              resolvedValue,\n              ...(args as K)\n            );\n          } else {\n            // It's the React.Dispatch form or a simple (value: T) => void\n            (onChange as React.Dispatch<React.SetStateAction<T>>)(\n              resolvedValue\n            );\n          }\n        }\n      }\n    },\n    [isControlled, onChange, currentValue]\n  );\n\n  return [currentValue, setValue];\n}\n"],"names":["useControlledState","value","onChange","defaultValue","internalState","setInternalState","useState","isControlled","currentValue","setValue","useCallback","nextValue","args","resolvedValue"],"mappings":";;AAegB,SAAAA,EACdC,GACAC,GAGAC,GAIA;AACM,QAAA,CAACC,GAAeC,CAAgB,IAAIC;AAAA,IACxCH;AAAA,EACF,GAEMI,IAAeN,MAAU,QACzBO,IAAeD,IAAeN,IAAQG,GAItCK,IAAWC;AAAA,IACf,SACEC,MACGC,GACG;AAEN,YAAMC,IACJ,OAAOF,KAAc,aAChBA,EAAyCH,CAAY,IACtDG;AAGN,MAAKJ,KACHF,EAAiBQ,CAAa,GAI5BX,KACE,OAAOA,KAAa,eAElBA,EAAS,SAAS,IAGnBA;AAAA,QACCW;AAAA,QACA,GAAID;AAAA,MACN,IAGCV;AAAA,QACCW;AAAA,MACF;AAAA,IAIR;AAAA,IACA,CAACN,GAAcL,GAAUM,CAAY;AAAA,EACvC;AAEO,SAAA,CAACA,GAAcC,CAAQ;AAChC;"}

package/dist/components/utils/WithAntdTokens.js

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