@bioturing/components 0.14.0 → 0.15.0

package/dist/index.js

@@ -16,6 +16,8 @@ import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalCancelBtn_5
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_components_NormalOkBtn_897b50c4__ from "antd/es/modal/components/NormalOkBtn";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_modal_locale_f16c0933__ from "antd/es/modal/locale";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_locale_31079002__ from "antd/es/locale";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_use_render_2fb9dc6d__ from "@base-ui-components/react/use-render";
+import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_merge_props_04b69945__ from "@base-ui-components/react/merge-props";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_switch_101feb97__ from "antd/es/switch";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_segmented_6dbdbe23__ from "antd/es/segmented";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_table_8c9fc42b__ from "antd/es/table";
@@ -27,8 +29,6 @@ import * as __WEBPACK_EXTERNAL_MODULE_antd_es_splitter_Panel_2a8c0f35__ from "an
 import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_menu_54c0c798__ from "@base-ui-components/react/menu";
 import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_utils_d48cdb94__ from "@base-ui-components/react/utils";
 import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__ from "@base-ui-components/react";
-import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_use_render_2fb9dc6d__ from "@base-ui-components/react/use-render";
-import * as __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_merge_props_04b69945__ from "@base-ui-components/react/merge-props";
 import * as __WEBPACK_EXTERNAL_MODULE_react_dom_7136dc57__ from "react-dom";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_upload_29096ddd__ from "antd/es/upload";
 import * as __WEBPACK_EXTERNAL_MODULE_antd_es_button_8f463bb4__ from "antd/es/button";
@@ -100,7 +100,7 @@ var constants_PopupPanelSize = /*#__PURE__*/ function(PopupPanelSize) {
     PopupPanelSize["xlarge"] = "840px";
     return PopupPanelSize;
 }({});
-const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, classNames, styles = {}, ...rest }, ref)=>{
+const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenChange, popupClassName, onDropdownVisibleChange, enhancePositioner, getPopupContainer, popupSize, popupRender, dropdownRender, classNames, styles = {}, ...rest }, ref)=>{
     var _classNames_popup;
     const portalNode = (0, __WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.useFloatingPortalNode)({});
     const isMultiple = "multiple" === mode || "tags" === mode;
@@ -180,7 +180,8 @@ const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenC
         }) : styles,
         getPopupContainer: getPopupContainer || (enhancePositioner ? ()=>portalNode || document.body : void 0),
         popupRender: (menu)=>{
-            if (!enhancePositioner) return popupRender ? popupRender(menu) : menu;
+            const renderMenu = ()=>popupRender ? popupRender(menu) : dropdownRender ? dropdownRender(menu) : menu;
+            if (!enhancePositioner) return renderMenu();
             return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
                 children: [
                     /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__floating_ui_react_3ddd630a__.FloatingOverlay, {
@@ -193,7 +194,7 @@ const MainSelectInner = ({ mode, className, open: openProp, defaultOpen, onOpenC
                             const popupEl = node.closest(".ds-select-dropdown");
                             refs.setFloating(popupEl);
                         },
-                        children: popupRender ? popupRender(menu) : menu
+                        children: renderMenu()
                     })
                 ]
             });
@@ -328,9 +329,244 @@ var constants_ModalSize = /*#__PURE__*/ function(ModalSize) {
     ModalSize["fullscreen"] = "100%";
     return ModalSize;
 }({});
+const measureText = (container)=>{
+    const span = document.createElement("span");
+    span.style.opacity = "0";
+    span.style.position = "absolute";
+    span.style.top = "-1000px";
+    span.style.left = "-1000px";
+    span.style.whiteSpace = "nowrap";
+    span.style.pointerEvents = "none";
+    container.appendChild(span);
+    return {
+        measure: (text)=>{
+            span.innerText = text;
+            return span.clientWidth;
+        },
+        destroy: ()=>{
+            container.removeChild(span);
+        }
+    };
+};
+const getMiddleTruncatedString = (text, ellipsis, container)=>{
+    var _Object_values_reverse_find;
+    if (!text) return text;
+    const { measure: getTextWidth, destroy: destroyMeasure } = measureText(container);
+    const textWidth = getTextWidth(text);
+    const containerWidth = container.clientWidth;
+    const initialOffset = Math.floor(containerWidth / textWidth * text.length);
+    if (textWidth <= containerWidth) {
+        destroyMeasure();
+        return text;
+    }
+    let offset = initialOffset;
+    const attempts = {};
+    const maxAttempts = 20;
+    const buffer = 10;
+    while(Object.values(attempts).length <= maxAttempts){
+        if (attempts[offset]) break;
+        if (offset <= 1) {
+            attempts[0] = [
+                0,
+                ellipsis
+            ];
+            break;
+        }
+        const start = text.slice(0, Math.ceil((offset - ellipsis.length) / 2 - 1)).trimEnd();
+        const end = text.slice(Math.floor((offset - ellipsis.length) / 2) - offset).trimStart();
+        const truncatedStr = start + ellipsis + end;
+        const width = getTextWidth(truncatedStr);
+        attempts[offset] = [
+            width,
+            truncatedStr
+        ];
+        if (width >= containerWidth) offset -= 2;
+        else {
+            if (containerWidth - width < buffer) break;
+            offset += 2;
+        }
+    }
+    destroyMeasure();
+    return (null == (_Object_values_reverse_find = Object.values(attempts).reverse().find(([width])=>width < containerWidth)) ? void 0 : _Object_values_reverse_find[1]) ?? Object.values(attempts)[0][1];
+};
+"use client";
+const Truncate = ({ children, position = "end", lines = 1, className, style, ...rest })=>{
+    const cls = useCls();
+    const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
+    const [isTruncated, setIsTruncated] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
+    const [truncatedText, setTruncatedText] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(children);
+    const text = children;
+    const getContainerStyles = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
+        if ("auto" !== lines) return {
+            ...style,
+            ...lines > 1 ? {
+                "--ds-line-clamp": lines
+            } : {}
+        };
+        return {
+            ...style,
+            "--ds-line-clamp": 999
+        };
+    }, [
+        lines,
+        style
+    ]);
+    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
+        const container = containerRef.current;
+        if (!container) return;
+        if ("auto" === lines) {
+            var _window_document_fonts_ready, _window_document_fonts;
+            setTruncatedText(text);
+            const calculateLines = ()=>{
+                const parent = container.parentElement;
+                if (!parent) return;
+                const styles = window.getComputedStyle(container);
+                const fontSize = parseFloat(styles.fontSize);
+                const lineHeight = "normal" === styles.lineHeight ? 1.2 * fontSize : parseFloat(styles.lineHeight);
+                const parentStyles = window.getComputedStyle(parent);
+                const paddingTop = parseFloat(parentStyles.paddingTop) || 0;
+                const paddingBottom = parseFloat(parentStyles.paddingBottom) || 0;
+                const borderTopWidth = parseFloat(parentStyles.borderTopWidth) || 0;
+                const borderBottomWidth = parseFloat(parentStyles.borderBottomWidth) || 0;
+                const parentHeight = parent.clientHeight;
+                const availableHeight = parentHeight - paddingTop - paddingBottom - borderTopWidth - borderBottomWidth;
+                const maxLines = Math.max(1, Math.floor(availableHeight / lineHeight));
+                if (container) container.style.setProperty("--ds-line-clamp", String(maxLines));
+                const clone = document.createElement("span");
+                clone.style.visibility = "hidden";
+                clone.style.position = "absolute";
+                clone.style.width = `${container.clientWidth}px`;
+                clone.style.fontSize = styles.fontSize;
+                clone.style.fontFamily = styles.fontFamily;
+                clone.style.lineHeight = styles.lineHeight;
+                clone.textContent = text;
+                document.body.appendChild(clone);
+                const isTruncated = clone.scrollHeight > availableHeight;
+                document.body.removeChild(clone);
+                setIsTruncated(isTruncated);
+            };
+            null == (_window_document_fonts = window.document.fonts) || null == (_window_document_fonts_ready = _window_document_fonts.ready) || _window_document_fonts_ready.then(calculateLines);
+            const observer = new ResizeObserver(()=>{
+                window.requestAnimationFrame(calculateLines);
+            });
+            observer.observe(container);
+            if (container.parentElement) observer.observe(container.parentElement);
+            return ()=>observer.disconnect();
+        }
+        if ("number" == typeof lines && lines > 1) {
+            var _window_document_fonts_ready1, _window_document_fonts1;
+            setTruncatedText(text);
+            const checkIfTruncated = ()=>{
+                const clone = document.createElement("span");
+                clone.style.visibility = "hidden";
+                clone.style.position = "absolute";
+                clone.style.width = `${container.clientWidth}px`;
+                clone.textContent = text;
+                document.body.appendChild(clone);
+                const isTruncated = clone.scrollHeight > (container.clientHeight || container.offsetHeight);
+                document.body.removeChild(clone);
+                setIsTruncated(isTruncated);
+            };
+            null == (_window_document_fonts1 = window.document.fonts) || null == (_window_document_fonts_ready1 = _window_document_fonts1.ready) || _window_document_fonts_ready1.then(checkIfTruncated);
+            const observer = new ResizeObserver(()=>{
+                window.requestAnimationFrame(checkIfTruncated);
+            });
+            observer.observe(container);
+            return ()=>observer.disconnect();
+        }
+        let cancellationToken = {
+            cancelled: false
+        };
+        const calculateTruncatedString = ()=>{
+            if (cancellationToken) cancellationToken.cancelled = true;
+            const requestCancellationToken = {
+                cancelled: false
+            };
+            cancellationToken = requestCancellationToken;
+            const truncated = getMiddleTruncatedString(text, "\u2026", container);
+            if (requestCancellationToken.cancelled) return;
+            setTruncatedText(truncated);
+        };
+        if ("middle" == position) {
+            var _window_document_fonts_ready2, _window_document_fonts2;
+            null == (_window_document_fonts2 = window.document.fonts) || null == (_window_document_fonts_ready2 = _window_document_fonts2.ready) || _window_document_fonts_ready2.then(calculateTruncatedString);
+        }
+        if ("end" == position) setTruncatedText(text);
+        const observer = new ResizeObserver(()=>{
+            if ("middle" == position) window.requestAnimationFrame(calculateTruncatedString);
+            if ("end" == position) {
+                const isOverflowing = container.scrollWidth > container.clientWidth;
+                if (isOverflowing) setIsTruncated(true);
+            }
+        });
+        observer.observe(container);
+        return ()=>{
+            cancellationToken.cancelled = true;
+            observer.disconnect();
+        };
+    }, [
+        text,
+        position,
+        lines
+    ]);
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+        ref: containerRef,
+        style: getContainerStyles(),
+        className: clsx(1 === lines ? cls("truncate") : cls("truncate-multiline"), "middle" === position ? cls("truncate-middle") : cls("truncate-end"), className),
+        title: isTruncated ? text : void 0,
+        ...rest,
+        children: text === truncatedText ? text : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
+            children: truncatedText
+        })
+    });
+};
+const Stack = ({ hug = false, align = "flex-start", justify = "flex-start", vertical = false, gap = 0, wrap = false, className, children, ...rest })=>{
+    const cls = useCls();
+    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+        className: cn(cls("stack"), hug ? cls("stack-hug") : cls("stack-fill"), cls(`stack-gap-${gap}`), vertical ? cls("stack-vertical") : cls("stack-horizontal"), wrap && cls("stack-wrap"), cls(`stack-align-${align}`), cls(`stack-justify-${justify}`), className),
+        ...rest,
+        children: children
+    });
+};
+const StackChild = ({ flex, grow = false, shrink = false, children, style, stack = false, hug = false, align = "flex-start", justify = "flex-start", vertical = false, gap = 0, wrap = false, className, ...rest })=>{
+    const cls = useCls();
+    const stackProps = {
+        hug,
+        align,
+        justify,
+        vertical,
+        gap,
+        wrap
+    };
+    let flexClass = "";
+    if ("boolean" == typeof flex) flexClass = flex ? cls("stack-child-flex-1") : cls("stack-child-flex-0");
+    const combinedClassName = cn(cls("stack-child"), grow && cls("stack-child-grow"), shrink && cls("stack-child-shrink"), flexClass, className);
+    const flexValue = "string" == typeof flex || "number" == typeof flex ? flex : void 0;
+    const { renderElement } = (0, __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_use_render_2fb9dc6d__.useRender)({
+        render: ()=>/*#__PURE__*/ __WEBPACK_EXTERNAL_MODULE_react__["default"].isValidElement(children) ? children : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
+                children: children
+            }),
+        props: (0, __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_merge_props_04b69945__.mergeProps)({
+            className: combinedClassName,
+            style: {
+                ...style,
+                flex: flexValue
+            },
+            ...rest
+        })
+    });
+    return stack ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Stack, {
+        ...stackProps,
+        className: combinedClassName,
+        children: children
+    }) : renderElement();
+};
+const Stack_Stack = Object.assign(Stack, {
+    Child: StackChild
+});
 "use client";
 const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer, width, style, styles, classNames, okButtonProps, cancelButtonProps, loading, onOk, onCancel, okText, okType = "primary", confirmLoading, cancelText = "Close", hideOkButton = false, hideCancelButton = false, contentPadding, title, afterTitle, beforeCloseButton, afterCloseButton, defaultFixedHeaderFooter = false, centered = true, type = "default", defaultOpen = true, background: backgroundProp, bodyScrollable = true, ...rest })=>{
-    const defaultCloseIcon = void 0 === closeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.X, {
+    const defaultCloseIcon = void 0 === closeIcon ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__bioturing_assets_dd0c210d__.XIcon, {
         size: 16,
         weight: "bold"
     }) : closeIcon;
@@ -413,17 +649,21 @@ const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer
     });
     const renderTitle = ()=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.Fragment, {
             children: [
-                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE_antd__.Flex, {
+                /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Stack_Stack, {
                     align: "center",
                     gap: 8,
                     className: cls("modal-title-wrapper"),
                     children: [
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                            className: cls("grow", "truncate"),
-                            children: title
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Stack_Stack.Child, {
+                            grow: true,
+                            children: "string" == typeof title ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Truncate, {
+                                children: title
+                            }) : title
                         }),
-                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)("div", {
-                            className: "flex items-center gap-2",
+                        /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(Stack_Stack.Child, {
+                            stack: true,
+                            hug: true,
+                            align: "center",
                             children: [
                                 beforeCloseButton,
                                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(IconButton, {
@@ -446,7 +686,7 @@ const Modal = ({ open: externalOpen, closeIcon, children, size: sizeProp, footer
         title: renderTitle(),
         classNames: {
             ...classNames,
-            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", isContentOverflow && "modal-content-overflow", false === bodyScrollable && "modal-no-body-scroll", (defaultFixedHeaderFooter || isContentOverflow || "fullscreen" == size) && "modal-fixed")
+            wrapper: cls("modal-wrap", "fullscreen" == size && "modal-fullscreen", isContentOverflow && "modal-content-overflow", false === bodyScrollable && "modal-no-body-scroll", defaultFixedHeaderFooter || isContentOverflow || "fullscreen" == size ? "modal-fixed" : "")
         },
         styles: modalStyles,
         modalRender: (modal)=>/*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
@@ -1227,141 +1467,6 @@ const Splitter = Object.assign(MainSplitter, {
     Panel: SplitterPanel
 });
 const Split = Splitter;
-const measureText = (container)=>{
-    const span = document.createElement("span");
-    span.style.opacity = "0";
-    span.style.position = "absolute";
-    span.style.top = "-1000px";
-    span.style.left = "-1000px";
-    span.style.whiteSpace = "nowrap";
-    span.style.pointerEvents = "none";
-    container.appendChild(span);
-    return {
-        measure: (text)=>{
-            span.innerText = text;
-            return span.clientWidth;
-        },
-        destroy: ()=>{
-            container.removeChild(span);
-        }
-    };
-};
-const getMiddleTruncatedString = (text, ellipsis, container)=>{
-    var _Object_values_reverse_find;
-    if (!text) return text;
-    const { measure: getTextWidth, destroy: destroyMeasure } = measureText(container);
-    const textWidth = getTextWidth(text);
-    const containerWidth = container.clientWidth;
-    const initialOffset = Math.floor(containerWidth / textWidth * text.length);
-    if (textWidth <= containerWidth) {
-        destroyMeasure();
-        return text;
-    }
-    let offset = initialOffset;
-    const attempts = {};
-    const maxAttempts = 20;
-    const buffer = 10;
-    while(Object.values(attempts).length <= maxAttempts){
-        if (attempts[offset]) break;
-        if (offset <= 1) {
-            attempts[0] = [
-                0,
-                ellipsis
-            ];
-            break;
-        }
-        const start = text.slice(0, Math.ceil((offset - ellipsis.length) / 2 - 1)).trimEnd();
-        const end = text.slice(Math.floor((offset - ellipsis.length) / 2) - offset).trimStart();
-        const truncatedStr = start + ellipsis + end;
-        const width = getTextWidth(truncatedStr);
-        attempts[offset] = [
-            width,
-            truncatedStr
-        ];
-        if (width >= containerWidth) offset -= 2;
-        else {
-            if (containerWidth - width < buffer) break;
-            offset += 2;
-        }
-    }
-    destroyMeasure();
-    return (null == (_Object_values_reverse_find = Object.values(attempts).reverse().find(([width])=>width < containerWidth)) ? void 0 : _Object_values_reverse_find[1]) ?? Object.values(attempts)[0][1];
-};
-"use client";
-const Truncate = ({ children, position = "end", className, style, ...rest })=>{
-    const cls = useCls();
-    const containerRef = (0, __WEBPACK_EXTERNAL_MODULE_react__.useRef)(null);
-    const [isTruncated, setIsTruncated] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(false);
-    const [truncatedText, setTruncatedText] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(children);
-    const text = children;
-    const getContainerStyles = (0, __WEBPACK_EXTERNAL_MODULE_react__.useCallback)(()=>{
-        const baseStyles = {
-            overflow: "hidden",
-            whiteSpace: "nowrap",
-            textOverflow: "clip",
-            flexGrow: 1,
-            minWidth: 0,
-            maxWidth: "100%",
-            display: "block",
-            ...style
-        };
-        if ("end" === position) return {
-            ...baseStyles,
-            textOverflow: "ellipsis"
-        };
-        return baseStyles;
-    }, [
-        position,
-        style
-    ]);
-    (0, __WEBPACK_EXTERNAL_MODULE_react__.useLayoutEffect)(()=>{
-        const container = containerRef.current;
-        if (!container) return;
-        let cancellationToken = {
-            cancelled: false
-        };
-        const calculateTruncatedString = ()=>{
-            if (cancellationToken) cancellationToken.cancelled = true;
-            const requestCancellationToken = {
-                cancelled: false
-            };
-            cancellationToken = requestCancellationToken;
-            const truncated = getMiddleTruncatedString(text, "\u2026", container);
-            if (requestCancellationToken.cancelled) return;
-            setTruncatedText(truncated);
-        };
-        if ("middle" == position) {
-            var _window_document_fonts_ready, _window_document_fonts;
-            null == (_window_document_fonts = window.document.fonts) || null == (_window_document_fonts_ready = _window_document_fonts.ready) || _window_document_fonts_ready.then(calculateTruncatedString);
-        }
-        if ("end" == position) setTruncatedText(text);
-        const observer = new ResizeObserver(()=>{
-            if ("middle" == position) window.requestAnimationFrame(calculateTruncatedString);
-            if ("end" == position) {
-                const isOverflowing = container.scrollWidth > container.clientWidth;
-                if (isOverflowing) setIsTruncated(true);
-            }
-        });
-        observer.observe(container);
-        return ()=>{
-            cancellationToken.cancelled = true;
-            observer.disconnect();
-        };
-    }, [
-        text,
-        position
-    ]);
-    return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
-        ref: containerRef,
-        style: getContainerStyles(),
-        className: clsx(cls("truncate"), className),
-        title: isTruncated ? text : void 0,
-        ...rest,
-        children: text === truncatedText ? text : /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("span", {
-            children: truncatedText
-        })
-    });
-};
 "use client";
 const DropdownMenu = ({ children, items, placement, openOnHover, open: outsideOpen, onOpenChange: outsideOnOpenChange })=>{
     const [open, setOpen] = (0, __WEBPACK_EXTERNAL_MODULE__base_ui_components_react_utils_d48cdb94__.useControlled)({
@@ -1719,24 +1824,24 @@ const Upload = Object.assign(DefaultUpload, {
     Item: UploadItem
 });
 "use client";
-const ScrollArea = ({ children, className, viewportClassName, thumbClassName, scrollbarClassName, orientation = "vertical" })=>{
+const ScrollArea = ({ children, className, classNames = {}, orientation = "vertical" })=>{
     const cls = useCls();
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Root, {
         className: clsx(cls("scroll-area"), className),
         children: [
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Viewport, {
-                className: clsx(cls("scroll-area-viewport"), viewportClassName),
+                className: clsx(cls("scroll-area-viewport"), null == classNames ? void 0 : classNames.viewport),
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Content, {
                     className: clsx(cls("scroll-area-content")),
                     children: children
                 })
             }),
             /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Scrollbar, {
-                className: clsx(cls("scroll-area-scrollbar"), scrollbarClassName),
+                className: clsx(cls("scroll-area-scrollbar"), null == classNames ? void 0 : classNames.scrollbar),
                 orientation: orientation,
                 "data-orientation": orientation,
                 children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE__base_ui_components_react_5aaa6934__.ScrollArea.Thumb, {
-                    className: clsx(cls("scroll-area-thumb", thumbClassName))
+                    className: clsx(cls("scroll-area-thumb"), null == classNames ? void 0 : classNames.thumb)
                 })
             })
         ]
@@ -2191,7 +2296,7 @@ const Tour = ({ indicatorsRender, ...rest })=>{
                     className: cls("tour-indicator-summary-text"),
                     children: [
                         current + 1,
-                        " / ",
+                        "/",
                         total
                     ]
                 }),
@@ -2234,7 +2339,7 @@ const function_toast = Object.assign(createToastTypeFunction("info"), {
     progress: createToastTypeFunction("progress")
 });
 "use client";
-const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, options, activeOption: controlledActiveOption, defaultActiveOption = 0, onActiveOptionChange, copyText = "Copy", copySuccessText = "Copied", ...rest })=>{
+const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, options, activeOption: controlledActiveOption, defaultActiveOption = 0, onActiveOptionChange, copyText = "Copy", copySuccessText = "Copied", classNames, maxHeight, ...rest })=>{
     const [activeOption, setActiveOption] = useControlledState(controlledActiveOption, onActiveOptionChange, defaultActiveOption);
     const [currentCode, setCurrentCode] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(code || "");
     const [lang, setLang] = (0, __WEBPACK_EXTERNAL_MODULE_react__.useState)(defaultLang);
@@ -2277,11 +2382,11 @@ const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, optio
     return /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ThemeProvider, {
         theme: "dark",
         children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsxs)(WithAntdTokens, {
-            className: clsx(cls("code-block"), className),
+            className: clsx(cls("code-block"), className, null == classNames ? void 0 : classNames.root),
             ...rest,
             children: [
                 hasOptions && /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    className: cls("code-block-header"),
+                    className: cls("code-block-header", null == classNames ? void 0 : classNames.header),
                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(Segmented, {
                         value: activeOption,
                         onChange: setActiveOption,
@@ -2301,7 +2406,10 @@ const CodeBlock = ({ code, children, lang: defaultLang = "tsx", className, optio
                     })
                 }),
                 /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)("div", {
-                    className: cls("code-block-content"),
+                    className: cls("code-block-content", null == classNames ? void 0 : classNames.content),
+                    style: {
+                        maxHeight: maxHeight && ("number" == typeof maxHeight ? `${maxHeight}px` : maxHeight)
+                    },
                     children: /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(ScrollArea, {
                         children: currentCode ? /*#__PURE__*/ (0, __WEBPACK_EXTERNAL_MODULE_react_jsx_runtime_225474f2__.jsx)(__WEBPACK_EXTERNAL_MODULE_prism_react_renderer_be33806e__.Highlight, {
                             language: lang,
@@ -3307,7 +3415,7 @@ const useCharts = ()=>{
         },
         axisLabel: {
             color: axisLabelColor,
-            fontFamily: "InterVariable"
+            fontFamily: "InterVariable, Inter, Helvetica, Arial, sans-serif"
         }
     };
     return {
@@ -3318,6 +3426,527 @@ const useCharts = ()=>{
         echartsAxisConfig
     };
 };
+const componentMetadata = {
+    Badge: {
+        name: "Badge",
+        link: "/badge",
+        base: "antd",
+        refinements: [
+            "Applies a BioTuring Design System specific CSS class 'ds-badge'.",
+            "Applies Ant Design's CSS variable class name to ensure proper theming context.",
+            "Sets 'display: inline-flex;' on the 'ds-badge' class via './style.css' for consistent layout."
+        ],
+        category: "Data Display",
+        originalDocUrl: "https://ant.design/components/badge",
+        description: "Used for highlighting new or unread items, or to display a status."
+    },
+    Breadcrumb: {
+        name: "Breadcrumb",
+        link: "/breadcrumb",
+        base: "antd",
+        refinements: [
+            "Employs a custom 'useItemRender' hook to allow icons (from 'item.icon') to be rendered alongside the title within each breadcrumb link.",
+            "Introduces a 'noWrap' boolean prop for responsive behavior: when true, breadcrumb items attempt to stay on a single line, with text overflow and ellipsis applied to truncatable items.",
+            "Applies BioTuring Design System specific styling via './style.css' for layout (flexbox-based), item spacing, icon integration, and responsive truncation.",
+            "Exports styled 'Breadcrumb.Item' and 'Breadcrumb.Separator' sub-components."
+        ],
+        category: "Navigation",
+        originalDocUrl: "https://ant.design/components/breadcrumb",
+        description: "Displays the path of the current page, allowing for easy navigation back to previous levels."
+    },
+    Button: {
+        name: "Button",
+        link: "/button",
+        base: "antd",
+        refinements: [],
+        category: "Actions",
+        originalDocUrl: "https://ant.design/components/button",
+        description: "A clickable element used to trigger an action."
+    },
+    Checkbox: {
+        name: "Checkbox",
+        link: "/checkbox",
+        base: "antd",
+        refinements: [],
+        category: "Data Entry",
+        originalDocUrl: "https://ant.design/components/checkbox",
+        description: "Allows users to select one or more options from a set."
+    },
+    CodeBlock: {
+        name: "CodeBlock",
+        link: "/code-block",
+        base: "custom",
+        refinements: [
+            "Custom implementation for syntax highlighting using prism-react-renderer"
+        ],
+        category: "Data Display",
+        packages: [
+            "prism-react-renderer"
+        ],
+        description: "Displays blocks of code with syntax highlighting."
+    },
+    Collapse: {
+        name: "Collapse",
+        link: "/collapse",
+        base: "antd",
+        refinements: [],
+        category: "Data Display",
+        originalDocUrl: "https://ant.design/components/collapse",
+        description: "A content area that can be expanded or collapsed."
+    },
+    DropdownMenu: {
+        name: "DropdownMenu",
+        link: "/dropdown-menu",
+        base: "base-ui",
+        refinements: [
+            "Built with Base UI Menu components",
+            "Provides a customizable dropdown menu experience"
+        ],
+        category: "Navigation",
+        packages: [
+            "@base-ui-components/react/menu",
+            "@base-ui-components/react/utils"
+        ],
+        originalDocUrl: "https://base-ui.com/react/components/menu",
+        description: "A menu that appears when a user interacts with a button or other control."
+    },
+    Empty: {
+        name: "Empty",
+        link: "/empty",
+        base: "antd",
+        refinements: [
+            "Replaces the default Ant Design illustration with a custom SVG icon ('EmptyIcon') defined within the component.",
+            "Introduces a 'size' prop ('small', 'medium', 'large', default 'medium') that controls the font-size of the custom 'EmptyIcon'.",
+            "Applies specific font-sizes for the icon based on the 'size' prop (small: 2rem, medium: 3rem, large: 4rem) via 'style.css'.",
+            "The 'small' size icon also has its color set to 'var(--ds-color-base-solid)'.",
+            "Adjusts the Ant Design Empty image container height to 'auto' via 'style.css'.",
+            "Applies BioTuring Design System specific styling and CSS classes (e.g., 'ds-empty', 'ds-empty-icon')."
+        ],
+        category: "Data Display",
+        originalDocUrl: "https://ant.design/components/empty",
+        description: "A placeholder for when there is no data to display."
+    },
+    Field: {
+        name: "Field",
+        link: "/field",
+        base: "custom",
+        refinements: [
+            "Custom component for form fields, providing layout and validation display"
+        ],
+        category: "Data Entry",
+        description: "A custom component to structure form inputs with labels, help text, and validation messages."
+    },
+    Form: {
+        name: "Form",
+        link: "/form",
+        base: "antd",
+        refinements: [],
+        category: "Data Entry",
+        originalDocUrl: "https://ant.design/components/form",
+        description: "Provides structure for data input, including layout, validation, and submission capabilities."
+    },
+    IconButton: {
+        name: "Icon Button",
+        link: "/icon-button",
+        base: "custom",
+        refinements: [
+            "Custom button component focused on displaying an icon",
+            "Provides consistent styling for icon-only buttons"
+        ],
+        category: "Actions",
+        description: "A button that primarily displays an icon, used for compact actions."
+    },
+    Input: {
+        name: "Input",
+        link: "/input",
+        base: "antd",
+        refinements: [],
+        category: "Data Entry",
+        originalDocUrl: "https://ant.design/components/input",
+        description: "A basic text input field for user data entry."
+    },
+    Message: {
+        name: "Message",
+        link: "/message",
+        base: "antd",
+        refinements: [],
+        category: "Feedback",
+        originalDocUrl: "https://ant.design/components/message",
+        description: "The Message component provides feedback in response to user operations. Unlike notification, messages are simpler and typically auto-dismiss after a short duration."
+    },
+    Modal: {
+        name: "Modal",
+        link: "/modal",
+        base: "antd",
+        refinements: [
+            "Added predefined sizes: 'xsmall', 'small', 'medium', 'large', 'xlarge', 'xxlarge', 'fullscreen'",
+            "Introduced a general 'loading' state prop for the modal content",
+            "Added 'hideOkButton' and 'hideCancelButton' props for straightforward visibility control of footer buttons",
+            "Added 'contentPadding' prop for direct control over modal body padding",
+            "Enhanced header customization with 'afterTitle', 'beforeCloseButton', and 'afterCloseButton' slots for additional elements or actions",
+            "Implemented 'defaultFixedHeaderFooter' behavior: header and footer become fixed when content overflows (controlled by internal overflow detection)",
+            "Changed 'centered' prop to default to 'true'",
+            "Introduced 'type' prop ('default', 'info', 'success', 'error', 'warning') influencing default behaviors like size",
+            "Added 'background' prop ('elevated', 'container') for explicit control over modal background style, with size-dependent defaults",
+            "Uses a custom 'X' icon from '@bioturing/assets' as the default close button icon",
+            "Provides 'bodyScrollable' prop (defaults to true) to manage content scroll behavior within the modal body"
+        ],
+        category: "Overlay",
+        originalDocUrl: "https://ant.design/components/modal",
+        description: "A dialog box/popup window that is displayed on top of the current page."
+    },
+    Popover: {
+        name: "Popover",
+        link: "/popover",
+        base: "antd",
+        refinements: [
+            "Refactored to use @base-ui-components/react/popover internally",
+            "Maintains Ant Design API compatibility",
+            "Custom prop mapping for placement and trigger to align with Base UI Popover",
+            "Combined title and content props into a single node for Base UI Popover's content area"
+        ],
+        category: "Overlay",
+        originalDocUrl: "https://ant.design/components/popover",
+        description: "A small overlay that appears when a user interacts with an element, displaying additional information or actions."
+    },
+    PopupPanel: {
+        name: "PopupPanel",
+        link: "/popup-panel",
+        base: "base-ui",
+        refinements: [
+            "Built with Base UI Popover",
+            "Resizable panel functionality",
+            "Custom styling and behavior for panel-like popups"
+        ],
+        category: "Overlay",
+        packages: [
+            "react-use-resizable",
+            "@base-ui-components/react/popover"
+        ],
+        originalDocUrl: "https://base-ui.com/react/components/popover",
+        description: "A specialized panel that pops up, often resizable, for displaying rich content or tools."
+    },
+    Radio: {
+        name: "Radio",
+        link: "/radio",
+        base: "antd",
+        refinements: [],
+        category: "Data Entry",
+        originalDocUrl: "https://ant.design/components/radio",
+        description: "Allows users to select a single option from a set."
+    },
+    ScrollArea: {
+        name: "ScrollArea",
+        link: "/scroll-area",
+        base: "base-ui",
+        refinements: [
+            "Wraps '@base-ui-components/react/ScrollArea' to integrate with the BioTuring Design System.",
+            "Provides consistent 'classNames' prop pattern for styling different parts (viewport, scrollbar, thumb).",
+            "Applies specific BioTuring Design System CSS classes (e.g., 'ds-scroll-area', 'ds-scroll-area-viewport', 'ds-scroll-area-scrollbar', 'ds-scroll-area-thumb') to Base UI component parts.",
+            "Provides extensive custom styling via './style.css' for the root, viewport (including 'focus-visible' styles), scrollbar (opacity transitions on hover/scroll, orientation-based dimensions), and thumb (custom border-radius, background, and border colors using design tokens)."
+        ],
+        category: "Layout",
+        packages: [
+            "@base-ui-components/react"
+        ],
+        originalDocUrl: "https://base-ui.com/react/components/scroll-area",
+        description: "Provides a customizable scrollable container for content that exceeds its bounds."
+    },
+    Segmented: {
+        name: "Segmented",
+        link: "/segmented",
+        base: "antd",
+        refinements: [
+            "Structured as a typed 'forwardRef' wrapper around the Ant Design Segmented component for type safety and consistency.",
+            "Applies custom styles via './style.css' to ensure proper alignment and sizing of item labels and icons within the segmented control (e.g., flex centering for labels and icons, default icon size)."
+        ],
+        category: "Data Entry",
+        originalDocUrl: "https://ant.design/components/segmented",
+        description: "A set of buttons that allows users to switch between different views or options."
+    },
+    Select: {
+        name: "Select",
+        link: "/select",
+        base: "antd",
+        refinements: [
+            "Introduced 'enhancePositioner' prop: Utilizes '@floating-ui/react' for robust dropdown positioning, allowing it to break out of overflow containers and intelligently place itself.",
+            "Added 'popupSize' prop (works with 'enhancePositioner'): Controls the dropdown width with predefined sizes (e.g., 'small', 'medium', 'large'), pixel values, or 'fit-content'.",
+            "Replaced default suffix icon with a custom 'CaretDown' icon from '@bioturing/assets'.",
+            "Customized multiple selection mode: Uses Ant Design 'Checkbox' components for indicating selected items in the dropdown.",
+            "Applied specific BioTuring Design System styling and CSS classes, including enhanced popup styles when 'enhancePositioner' is active."
+        ],
+        category: "Data Entry",
+        packages: [
+            "@floating-ui/react",
+            "rc-select"
+        ],
+        originalDocUrl: "https://ant.design/components/select",
+        description: "Allows users to select one or more options from a dropdown list."
+    },
+    Slider: {
+        name: "Slider",
+        link: "/slider",
+        base: "antd",
+        refinements: [
+            "Applies a BioTuring Design System specific CSS class 'ds-slider'.",
+            "Modifies the default behavior of the slider's tooltip by setting 'tooltip.arrow' to 'false' by default (Ant Design's default is true)."
+        ],
+        category: "Data Entry",
+        originalDocUrl: "https://ant.design/components/slider",
+        description: "Allows users to select a value from a continuous or discrete range."
+    },
+    Spin: {
+        name: "Spin",
+        link: "/spin",
+        base: "antd",
+        refinements: [],
+        category: "Feedback",
+        originalDocUrl: "https://ant.design/components/spin",
+        description: "Indicates a loading state."
+    },
+    Splitter: {
+        name: "Splitter",
+        link: "/splitter",
+        base: "antd",
+        refinements: [
+            "Custom component for creating resizable layouts, inspired by Ant Design styling"
+        ],
+        category: "Layout",
+        description: "Splitter is used to divide and resize multiple elements in a container."
+    },
+    Stack: {
+        name: "Stack",
+        link: "/stack",
+        base: "custom",
+        refinements: [
+            "Custom component for creating horizontal or vertical layouts with consistent spacing",
+            "Uses CSS classes for alignment and justification",
+            "Provides StackChild component with useRender hook for flexible item control"
+        ],
+        category: "Layout",
+        description: "A flexible layout component for arranging items in a row or column with consistent spacing."
+    },
+    Switch: {
+        name: "Switch",
+        link: "/switch",
+        base: "antd",
+        refinements: [
+            "Structured as a typed 'forwardRef' wrapper around Ant Design's Switch component.",
+            "Applies custom CSS to ensure 'checkedChildren' and 'unCheckedChildren' (e.g., icons, text) are properly centered within the switch handle."
+        ],
+        category: "Data Entry",
+        originalDocUrl: "https://ant.design/components/switch",
+        description: "A toggle control that allows users to switch between two states, typically on or off."
+    },
+    Table: {
+        name: "Table",
+        link: "/table",
+        base: "antd",
+        refinements: [
+            "Replaces default sort icons with custom 'CaretUp' and 'CaretDown' icons from '@bioturing/assets'. Displays both when inactive, and a filled version of the active one.",
+            "Replaces default filter icon with a custom 'Funnel' icon (filled) from '@bioturing/assets'.",
+            "Overrides 'locale.emptyText' to use the BioTuring 'Empty' component.",
+            "Adds an 'emptyDescription' prop to customize the message displayed by the 'Empty' component when the table is empty.",
+            "Uses a custom CSS-based loading indicator ('spin-loader') when the 'loading' prop is active.",
+            "Defaults 'scroll.x' to 'fit-content' to optimize horizontal scrolling behavior.",
+            "Applies BioTuring Design System specific styling via './style.css' for overall table appearance, including headers, rows, borders, and hover effects."
+        ],
+        category: "Data Display",
+        packages: [
+            "rc-table"
+        ],
+        originalDocUrl: "https://ant.design/components/table",
+        description: "Displays data in a structured, tabular format."
+    },
+    Tag: {
+        name: "Tag",
+        link: "/tag",
+        base: "antd",
+        refinements: [
+            "Defaults to using the 'X' icon (bold) from '@bioturing/assets' as the 'closeIcon' if the tag is 'closable' and no custom icon is provided.",
+            "Introduces an 'active' boolean prop (defaults to false).",
+            "When 'active={true}', applies specific styling (background, border, text color using '--ds-color-primary' tokens) via a 'data-active' attribute and 'style.css'.",
+            "Applies BioTuring Design System specific styling via './style.css', including base styles for alignment and consistent close icon coloring ('--ds-color-icon')."
+        ],
+        category: "Data Display",
+        originalDocUrl: "https://ant.design/components/tag",
+        description: "Used for marking or categorizing items with small labels."
+    },
+    ThemeProvider: {
+        name: "ThemeProvider",
+        link: "/theme-provider",
+        base: "custom",
+        refinements: [
+            "Custom utility for managing application-wide themes",
+            "Provides context for styling consistency"
+        ],
+        category: "Utility",
+        description: "A utility component for providing theme context to its children, enabling consistent styling across the application."
+    },
+    Toast: {
+        name: "Toast",
+        link: "/toast",
+        base: "base-ui",
+        refinements: [
+            "Built with Base UI Toast components",
+            "Customizable appearance and behavior for notifications"
+        ],
+        category: "Feedback",
+        packages: [
+            "@base-ui-components/react"
+        ],
+        originalDocUrl: "https://base-ui.com/react/components/toast",
+        description: "Displays brief, auto-expiring messages to provide feedback or alerts, similar to notifications but often less intrusive."
+    },
+    Tooltip: {
+        name: "Tooltip",
+        link: "/tooltip",
+        base: "antd",
+        refinements: [
+            "Defaults the 'arrow' prop to 'false', hiding the tooltip arrow by default (Ant Design's default shows an arrow).",
+            "Applies a BioTuring Design System specific CSS class 'ds-tooltip'.",
+            "Custom CSS sets 'min-height: auto;' for the inner content, allowing tooltips to be shorter than Ant Design's default minimum height."
+        ],
+        category: "Overlay",
+        originalDocUrl: "https://ant.design/components/tooltip",
+        description: "A small pop-up that displays information when a user hovers over or focuses on an element."
+    },
+    Tour: {
+        name: "Tour",
+        link: "/tour",
+        base: "antd",
+        refinements: [
+            "Provides a custom default rendering for step indicators ('indicatorsRender') if none is supplied. This includes a 'current / total' text and visual dots for steps.",
+            "Applies BioTuring Design System specific CSS classes (e.g., 'ds-tour') for extensive styling.",
+            "Customizes typography for title, description, and indicator text using design system tokens.",
+            "Adjusts layout and spacing for header, footer, and content within the tour description (paragraphs, lists, icons).",
+            "Includes specific styling for the appearance of the custom default indicators (wrapper, summary text, active/inactive dots)."
+        ],
+        category: "Feedback",
+        originalDocUrl: "https://ant.design/components/tour",
+        description: "Guides users through new features or UI elements in a step-by-step manner."
+    },
+    Transition: {
+        name: "Transition",
+        link: "/transition",
+        base: "base-ui",
+        refinements: [
+            "Wraps Base UI utilities (e.g., 'useTransitionStatus', 'useRender') and custom hooks (e.g., 'useAnimationsFinished') to manage element enter/leave transitions.",
+            "Accepts 'starting' and 'ending' props, which can be CSS class strings (for Tailwind) or style objects, to define transition states.",
+            "Dynamically applies 'starting'/'ending' styles and sets 'data-starting'/'data-ending' attributes on the child element based on transition phase.",
+            "Manages mounting/unmounting of children post-animation, with a 'keepMounted' option, using a custom 'useAnimationsFinished' hook.",
+            "Provides a declarative API for CSS-based transitions."
+        ],
+        category: "Utility",
+        packages: [
+            "@base-ui-components/react/use-render",
+            "@base-ui-components/react/merge-props",
+            "@base-ui-components/react/utils"
+        ],
+        originalDocUrl: "https://base-ui.com/react/components",
+        description: "Provides utilities for applying CSS transitions and animations to components."
+    },
+    Typography: {
+        name: "Typography",
+        link: "/typography",
+        base: "antd",
+        refinements: [
+            "Extends Ant Design Typography with custom styles or additional text utilities"
+        ],
+        category: "Data Display",
+        originalDocUrl: "https://ant.design/components/typography",
+        description: "Typography is a component that provides a set of tools for working with text, including text alignment, font size, and font weight."
+    },
+    Tree: {
+        name: "Tree",
+        link: "/tree",
+        base: "antd",
+        refinements: [
+            "Utilizes rc-tree for core functionality",
+            "Enhanced features like custom node rendering, drag-and-drop, or advanced filtering"
+        ],
+        category: "Data Display",
+        packages: [
+            "rc-tree"
+        ],
+        originalDocUrl: "https://ant.design/components/tree",
+        description: "A hierarchical list structure component that presents nested data clearly."
+    },
+    Truncate: {
+        name: "Truncate",
+        link: "/truncate",
+        base: "custom",
+        refinements: [
+            "Custom implementation for text truncation",
+            "Supports middle and end truncation",
+            "Configurable ellipsis and tooltip on hover",
+            "Multi-line truncation with configurable number of lines",
+            "Auto-height truncation that adapts to parent container size"
+        ],
+        category: "Data Display",
+        description: "The Truncate component helps manage text overflow by truncating text elegantly and displaying an ellipsis. It supports truncation at the middle or end of the text."
+    },
+    Upload: {
+        name: "Upload",
+        link: "/upload",
+        base: "antd",
+        refinements: [
+            "Defaults to a custom 'itemRender' function that utilizes a bespoke 'UploadItem' component for the file list.",
+            "'UploadItem' component features: file type icon, middle-truncated file name (using Truncate component), progress bar with status mapping, and a remove button.",
+            "Added 'showRemoveButton' prop (defaults to true) on the 'Upload' component to control visibility of the remove action in 'UploadItem'.",
+            "'UploadItem' includes a slot for 'extraActions' allowing additional custom controls per file.",
+            "Provides a default 'Button' with 'CloudArrowUp' icon and 'Upload Files' text if no children are passed to 'Upload'.",
+            "Includes 'Upload.Dragger' for drag-and-drop functionality, styled for the design system.",
+            "Exports 'Upload.Item' (the UploadItem component) for potential direct use.",
+            "Applies BioTuring Design System specific styling and CSS classes."
+        ],
+        category: "Data Entry",
+        originalDocUrl: "https://ant.design/components/upload",
+        description: "Allows users to select and upload files."
+    },
+    VerticalCollapsiblePanel: {
+        name: "Vertical Collapsible Panel",
+        link: "/vertical-collapsible-panel",
+        base: "base-ui",
+        refinements: [
+            "Built upon '@base-ui-components/react' Collapsible components ('Collapsible.Root', 'Collapsible.Panel').",
+            "Manages open/closed state with a custom 'useControlledState' hook for controlled/uncontrolled behavior.",
+            "Features custom expand/collapse trigger icons ('MinusCircle', 'PlusCircle' from '@bioturing/assets') via IconButton.",
+            "Automatically truncates string titles using the 'Truncate' component.",
+            "Provides 'afterTitle' and 'actions' slots in the header for additional UI elements, visible when open.",
+            "Integrates the BioTuring 'Transition' component for smooth open/close animations of the panel body, managed with 'useAnimationsFinished' hook.",
+            "Offers a 'contentPadding' prop (default '16px') for customizable body padding via CSS variable '--ds-content-padding'.",
+            "Extensive custom CSS for layout, typography, and a unique feature: header text displays vertically ('writing-mode: vertical-rl') when collapsed.",
+            "Supports 'keepMounted' prop and applies Ant Design CSS variables for theming."
+        ],
+        category: "Layout",
+        packages: [
+            "@base-ui-components/react"
+        ],
+        originalDocUrl: "https://base-ui.com/react/components/vertical-collapsible-panel",
+        description: "A panel that can be collapsed or expanded vertically, often used in sidebars or for sectioning content."
+    }
+};
+const getComponentsByCategory = ()=>{
+    const categories = {
+        Actions: [],
+        General: [],
+        Layout: [],
+        Navigation: [],
+        "Data Entry": [],
+        "Data Display": [],
+        Feedback: [],
+        Overlay: [],
+        Utility: []
+    };
+    Object.values(componentMetadata).forEach((component)=>{
+        categories[component.category].push(component);
+    });
+    Object.keys(categories).forEach((category)=>{
+        categories[category].sort((a, b)=>a.name.localeCompare(b.name));
+    });
+    return categories;
+};
 var __webpack_exports__Affix = __WEBPACK_EXTERNAL_MODULE_antd__.Affix;
 var __webpack_exports__Alert = __WEBPACK_EXTERNAL_MODULE_antd__.Alert;
 var __webpack_exports__Anchor = __WEBPACK_EXTERNAL_MODULE_antd__.Anchor;
@@ -3372,4 +4001,4 @@ var __webpack_exports__useApp = __WEBPACK_EXTERNAL_MODULE_antd_es_app_useApp_90d
 var __webpack_exports__useForm = __WEBPACK_EXTERNAL_MODULE_antd_es_form_Form_38f624ac__.useForm;
 var __webpack_exports__useWatch = __WEBPACK_EXTERNAL_MODULE_antd_es_form_Form_38f624ac__.useWatch;
 var __webpack_exports__version = __WEBPACK_EXTERNAL_MODULE_antd__.version;
-export { Badge, Breadcrumb, Button, Checkbox, CodeBlock, DSRoot, DefaultUpload, DropdownMenu, Empty, EmptyIcon, Field, Form, IconButton, Input, Modal_Modal as Modal, Popover, PopupPanel, Radio, ScrollArea, Segmented, Select, Slider, Spin, Split, Splitter, Switch, Table, component_Tag as Tag, ThemeProvider, Toast, Tooltip, Tour, Transition, Tree, Truncate, Upload, VerticalCollapsiblePanel, WithAntdTokens, antdColorTokens, categoricalChartColorKeys, categoricalChartColorTokens, categoricalChartsColors, chartColorTokens, clsx, cn, cx, darkTheme, getUniqueKeysFromOriginals, isTracebackError, lightTheme, parseAntdPlacement, processTreeData, rawChartColorTokens, reactNodeToString, function_toast as toast, toastManager, useAnimationsFinished, useAntdCssVarClassname, useBreakpoint, useCharts, useCls, useControlledState, useEnhancedEffect, useEventCallback, useGetPrefixCls, useLatestRef, useMessage, antd_useModal as useModal, useToken, useUniqueKeysTree, useUploadItemRender, __webpack_exports__Affix as Affix, __webpack_exports__Alert as Alert, __webpack_exports__Anchor as Anchor, __webpack_exports__App as App, __webpack_exports__AutoComplete as AutoComplete, __webpack_exports__Avatar as Avatar, __webpack_exports__BackTop as BackTop, __webpack_exports__Calendar as Calendar, __webpack_exports__Card as Card, __webpack_exports__Carousel as Carousel, __webpack_exports__Cascader as Cascader, __webpack_exports__Col as Col, __webpack_exports__Collapse as Collapse, __webpack_exports__ColorPicker as ColorPicker, __webpack_exports__ConfigProvider as ConfigProvider, __webpack_exports__DatePicker as DatePicker, __webpack_exports__Descriptions as Descriptions, __webpack_exports__Divider as Divider, __webpack_exports__Drawer as Drawer, __webpack_exports__Dropdown as Dropdown, __webpack_exports__Flex as Flex, __webpack_exports__FloatButton as FloatButton, __webpack_exports__Grid as Grid, __webpack_exports__InputNumber as InputNumber, __webpack_exports__Layout as Layout, __webpack_exports__List as List, __webpack_exports__Mentions as Mentions, __webpack_exports__Menu as Menu, __webpack_exports__Pagination as Pagination, __webpack_exports__Popconfirm as Popconfirm, __webpack_exports__Progress as Progress, __webpack_exports__QRCode as QRCode, __webpack_exports__Rate as Rate, __webpack_exports__Result as Result, __webpack_exports__Row as Row, __webpack_exports__Skeleton as Skeleton, __webpack_exports__Space as Space, __webpack_exports__Statistic as Statistic, __webpack_exports__Steps as Steps, __webpack_exports__Tabs as Tabs, __webpack_exports__TimePicker as TimePicker, __webpack_exports__Timeline as Timeline, __webpack_exports__Transfer as Transfer, __webpack_exports__TreeSelect as TreeSelect, __webpack_exports__Typography as Typography, __webpack_exports__Watermark as Watermark, __webpack_exports__message as message, __webpack_exports__notification as notification, __webpack_exports__theme as theme, __webpack_exports__unstableSetRender as unstableSetRender, __webpack_exports__useApp as useApp, __webpack_exports__useForm as useForm, __webpack_exports__useWatch as useWatch, __webpack_exports__version as version };
+export { Badge, Breadcrumb, Button, Checkbox, CodeBlock, DSRoot, DefaultUpload, DropdownMenu, Empty, EmptyIcon, Field, Form, IconButton, Input, Modal_Modal as Modal, Popover, PopupPanel, Radio, ScrollArea, Segmented, Select, Slider, Spin, Split, Splitter, Stack_Stack as Stack, StackChild, Switch, Table, component_Tag as Tag, ThemeProvider, Toast, Tooltip, Tour, Transition, Tree, Truncate, Upload, VerticalCollapsiblePanel, WithAntdTokens, antdColorTokens, categoricalChartColorKeys, categoricalChartColorTokens, categoricalChartsColors, chartColorTokens, clsx, cn, componentMetadata, cx, darkTheme, getComponentsByCategory, getUniqueKeysFromOriginals, isTracebackError, lightTheme, parseAntdPlacement, processTreeData, rawChartColorTokens, reactNodeToString, function_toast as toast, toastManager, useAnimationsFinished, useAntdCssVarClassname, useBreakpoint, useCharts, useCls, useControlledState, useEnhancedEffect, useEventCallback, useGetPrefixCls, useLatestRef, useMessage, antd_useModal as useModal, useToken, useUniqueKeysTree, useUploadItemRender, __webpack_exports__Affix as Affix, __webpack_exports__Alert as Alert, __webpack_exports__Anchor as Anchor, __webpack_exports__App as App, __webpack_exports__AutoComplete as AutoComplete, __webpack_exports__Avatar as Avatar, __webpack_exports__BackTop as BackTop, __webpack_exports__Calendar as Calendar, __webpack_exports__Card as Card, __webpack_exports__Carousel as Carousel, __webpack_exports__Cascader as Cascader, __webpack_exports__Col as Col, __webpack_exports__Collapse as Collapse, __webpack_exports__ColorPicker as ColorPicker, __webpack_exports__ConfigProvider as ConfigProvider, __webpack_exports__DatePicker as DatePicker, __webpack_exports__Descriptions as Descriptions, __webpack_exports__Divider as Divider, __webpack_exports__Drawer as Drawer, __webpack_exports__Dropdown as Dropdown, __webpack_exports__Flex as Flex, __webpack_exports__FloatButton as FloatButton, __webpack_exports__Grid as Grid, __webpack_exports__InputNumber as InputNumber, __webpack_exports__Layout as Layout, __webpack_exports__List as List, __webpack_exports__Mentions as Mentions, __webpack_exports__Menu as Menu, __webpack_exports__Pagination as Pagination, __webpack_exports__Popconfirm as Popconfirm, __webpack_exports__Progress as Progress, __webpack_exports__QRCode as QRCode, __webpack_exports__Rate as Rate, __webpack_exports__Result as Result, __webpack_exports__Row as Row, __webpack_exports__Skeleton as Skeleton, __webpack_exports__Space as Space, __webpack_exports__Statistic as Statistic, __webpack_exports__Steps as Steps, __webpack_exports__Tabs as Tabs, __webpack_exports__TimePicker as TimePicker, __webpack_exports__Timeline as Timeline, __webpack_exports__Transfer as Transfer, __webpack_exports__TreeSelect as TreeSelect, __webpack_exports__Typography as Typography, __webpack_exports__Watermark as Watermark, __webpack_exports__message as message, __webpack_exports__notification as notification, __webpack_exports__theme as theme, __webpack_exports__unstableSetRender as unstableSetRender, __webpack_exports__useApp as useApp, __webpack_exports__useForm as useForm, __webpack_exports__useWatch as useWatch, __webpack_exports__version as version };