@evolve.ui/core-components 1.0.0

package/tabs.cjs

@@ -0,0 +1,191 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_horizontalScrollFadeMixin = require("./horizontalScrollFadeMixin-ChYR-9hE.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/Tabs/Tabs.tsx
+const Tabs = ({ className, contentClassName, currentTab, defaultTab, isContentScrollable = false, keepTabsInDOM = true, onTabChanged, tabs }) => {
+	const [selectedTab, setSelectedTab] = (0, react.useState)(defaultTab ?? currentTab ?? tabs[0].contentId);
+	const activeTab = currentTab !== void 0 ? currentTab : selectedTab;
+	const horizontalScrollFadeProps = require_horizontalScrollFadeMixin.useHorizontalScrollFadeMixin(0);
+	const tabPanelRefs = (0, react.useRef)({});
+	const tabButtonRefs = (0, react.useRef)({});
+	const [isScrollable, setIsScrollable] = (0, react.useState)(isContentScrollable);
+	const [isScrolledToBottom, setIsScrolledToBottom] = (0, react.useState)(false);
+	/**
+	* Checks if the content is scrollable and if it's scrolled to the bottom
+	* @param element - The scrollable element to check
+	*/
+	const checkScrollState = (0, react.useCallback)((element) => {
+		const { clientHeight, scrollHeight, scrollTop } = element;
+		const scrollable = scrollHeight > clientHeight;
+		const scrolledToBottom = scrollable ? scrollHeight - scrollTop <= clientHeight + 1 : true;
+		setIsScrollable(scrollable);
+		setIsScrolledToBottom(scrolledToBottom);
+	}, []);
+	/**
+	* Scrolls the content area to the top if isContentScrollable is true
+	* @param contentId - The content ID of the tab panel to scroll
+	*/
+	const scrollToTop = (0, react.useCallback)((contentId) => {
+		if (isContentScrollable) {
+			const tabPanel = tabPanelRefs.current[contentId];
+			if (tabPanel) {
+				tabPanel.scrollTop = 0;
+				checkScrollState(tabPanel);
+			}
+		}
+	}, [isContentScrollable, checkScrollState]);
+	const renderedTabs = tabs.map((tab) => {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("button", {
+			className: (0, _evolve_ui_theme_system.cn)("hui-text-h5", "z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none", "hui-focus-visible-outline focus:text-text-secondary focus:-outline-offset-1", "cursor-pointer text-text-secondary", { "hover:border-b-border-hover hover:text-link-hover": tab.contentId !== activeTab }, { "mb-2xs": isContentScrollable }, { "active:border-b-border-selected active:text-text-primary": tab.contentId !== activeTab }, { "border-b-border-selected text-text-primary focus:text-text-primary": tab.contentId === activeTab }),
+			onClick: (e) => {
+				if (typeof e.currentTarget.scrollIntoView === "function") e.currentTarget.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest",
+					inline: "center"
+				});
+				setSelectedTab(tab.contentId);
+				scrollToTop(tab.contentId);
+				onTabChanged?.(tab.contentId);
+				if (tab.onClick) tab.onClick(tab.contentId);
+			},
+			ref: (el) => {
+				tabButtonRefs.current[tab.contentId] = el;
+			},
+			"aria-selected": tab.contentId === activeTab,
+			role: "tab",
+			children: tab.label
+		}, tab.contentId);
+	});
+	const renderedTabPanels = tabs.map((tab) => {
+		const isActive = tab.contentId === activeTab;
+		const isScrollable = isContentScrollable && isActive;
+		const props = {
+			"aria-labelledby": tab.contentId,
+			id: tab.contentId,
+			role: "tabpanel",
+			...isScrollable && { tabIndex: 0 }
+		};
+		const handleScroll = (e) => {
+			if (isContentScrollable && isActive) checkScrollState(e.currentTarget);
+		};
+		if (keepTabsInDOM) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _evolve_ui_theme_system.cn)({
+				"absolute h-0 w-0 overflow-hidden": !isActive,
+				"h-full overflow-y-auto": isScrollable
+			}, contentClassName),
+			inert: !isActive,
+			onScroll: handleScroll,
+			ref: (el) => {
+				tabPanelRefs.current[tab.contentId] = el;
+				if (el && isActive && isContentScrollable) checkScrollState(el);
+			},
+			...props,
+			children: tab.content
+		}, tab.contentId);
+		if (!isActive) return null;
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: (0, _evolve_ui_theme_system.cn)({ "h-full overflow-y-auto": isContentScrollable }, contentClassName),
+			onScroll: handleScroll,
+			ref: (el) => {
+				tabPanelRefs.current[tab.contentId] = el;
+				if (el && isContentScrollable) checkScrollState(el);
+			},
+			...props,
+			children: tab.content
+		}, tab.contentId);
+	});
+	(0, react.useEffect)(() => {
+		if (currentTab && currentTab !== selectedTab) {
+			setSelectedTab(currentTab);
+			scrollToTop(currentTab);
+			const tabButton = tabButtonRefs.current[currentTab];
+			if (tabButton && typeof tabButton.scrollIntoView === "function") tabButton.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest",
+				inline: "center"
+			});
+		}
+	}, [
+		currentTab,
+		selectedTab,
+		scrollToTop
+	]);
+	(0, react.useEffect)(() => {
+		if (selectedTab === tabs[0].contentId) return;
+		const tabButton = tabButtonRefs.current[selectedTab];
+		if (tabButton && typeof tabButton.scrollIntoView === "function") tabButton.scrollIntoView({
+			behavior: "instant",
+			block: "nearest",
+			inline: "center"
+		});
+	}, []);
+	(0, react.useEffect)(() => {
+		if (isContentScrollable) {
+			const activePanel = tabPanelRefs.current[activeTab];
+			if (activePanel) {
+				const timer = setTimeout(() => {
+					checkScrollState(activePanel);
+				}, 300);
+				return () => clearTimeout(timer);
+			}
+		}
+	}, [
+		activeTab,
+		isContentScrollable,
+		checkScrollState,
+		tabs
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+		className: (0, _evolve_ui_theme_system.cn)(className, { "flex h-full min-h-0 flex-1 flex-col": isContentScrollable }),
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+			className: "relative flex-shrink-0 overflow-x-clip",
+			role: "tablist",
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+				className: "flex gap-sm overflow-x-auto xsMax:scrollbar-hide",
+				ref: horizontalScrollFadeProps.ref,
+				children: [
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, _evolve_ui_theme_system.cn)("pointer-events-none absolute left-0 top-0 z-10 w-[48px] bg-gradient-to-r from-background-primary to-transparent transition-opacity duration-300 ease-in-out", {
+						"bottom-0": !isContentScrollable,
+						"bottom-2xs": isContentScrollable,
+						"opacity-0": !horizontalScrollFadeProps.shouldShowLeftFade,
+						"opacity-100": horizontalScrollFadeProps.shouldShowLeftFade
+					}) }),
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", { className: (0, _evolve_ui_theme_system.cn)("pointer-events-none absolute right-0 top-0 z-10 w-[48px] bg-gradient-to-l from-background-primary to-transparent transition-opacity duration-300 ease-in-out", {
+						"bottom-0": !isContentScrollable,
+						"bottom-2xs": isContentScrollable,
+						"opacity-0": !horizontalScrollFadeProps.shouldShowRightFade,
+						"opacity-100": horizontalScrollFadeProps.shouldShowRightFade
+					}) }),
+					renderedTabs,
+					/* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+						className: (0, _evolve_ui_theme_system.cn)("absolute left-0 right-0 z-[1] h-px border-b border-border-secondary", {
+							"bottom-0": !isContentScrollable,
+							"bottom-2xs": isContentScrollable
+						}),
+						role: "none"
+					})
+				]
+			})
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
+			className: (0, _evolve_ui_theme_system.cn)("relative", { "min-h-0 flex-grow pb-3xs": isContentScrollable }),
+			children: [renderedTabPanels, isContentScrollable && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
+				className: (0, _evolve_ui_theme_system.cn)("pointer-events-none absolute bottom-0 left-0 right-0 h-xl transition-opacity duration-300 ease-in-out", {
+					"opacity-0": isScrolledToBottom && isScrollable,
+					"opacity-100": !isScrolledToBottom && isScrollable
+				}),
+				"data-testid": "tabs-gradient-overlay",
+				style: { background: `linear-gradient(to bottom, transparent, ${(0, _evolve_ui_theme_system.wrapVarRgb)("--color-background-primary")})` }
+			})]
+		})]
+	});
+};
+//#endregion
+exports.Tabs = Tabs;
+
+//# sourceMappingURL=tabs.cjs.map

package/tabs.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.cjs","names":["useHorizontalScrollFadeMixin"],"sources":["../src/Tabs/Tabs.tsx"],"sourcesContent":["import { cn, wrapVarRgb } from '@evolve.ui/theme-system';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useHorizontalScrollFadeMixin } from '../mixins/horizontalScrollFadeMixin';\n\nexport type Tab = {\n    /** The content to render when this tab is selected */\n    content: ReactNode;\n    /** The id of the content to render when this tab is selected */\n    contentId: string;\n    /** The label of the tab */\n    label: string | ReactNode;\n    /** The function to call when the tab is clicked */\n    onClick?: (contentId: string) => void;\n};\n\ntype Props = {\n    className?: string;\n    contentClassName?: string;\n    isContentScrollable?: boolean;\n    /**\n     * When `true` (default), inactive tab panels stay mounted in the DOM but are visually hidden\n     * and marked `inert` so their content is not keyboard- or assistive-technology-interactive.\n     */\n    keepTabsInDOM?: boolean;\n    tabs: Tab[];\n} & (\n    | {\n          /** Used with `onTabChanged` to control tabs externally */\n          currentTab: string;\n          /** Use only if `currentTab` and `onTabChanged` are not provided */\n          defaultTab?: never;\n          /** Used with `currentTab` to control tabs externally */\n          onTabChanged: (contentId: string) => void;\n      }\n    | {\n          /** Use only if `defaultTab` is not provided. This is the contentId of the tab to be selected */\n          currentTab?: never;\n          /** Sets the default tab on first render. This is the contentId of the tab to be selected */\n          defaultTab?: string;\n          /** Use only if `defaultTab` is not provided */\n          onTabChanged?: never;\n      }\n);\n\nexport const Tabs = ({\n    className,\n    contentClassName,\n    currentTab,\n    defaultTab,\n    isContentScrollable = false,\n    keepTabsInDOM = true,\n    onTabChanged,\n    tabs,\n}: Props) => {\n    const [selectedTab, setSelectedTab] = useState(defaultTab ?? currentTab ?? tabs[0].contentId);\n    // In controlled mode, use currentTab as the source of truth; otherwise use selectedTab\n    const activeTab = currentTab !== undefined ? currentTab : selectedTab;\n    const horizontalScrollFadeProps = useHorizontalScrollFadeMixin(0);\n\n    // Create refs for each tab panel to handle scrolling\n    const tabPanelRefs = useRef<Record<string, HTMLDivElement | null>>({});\n    // Create refs for each tab button to handle scrolling into view\n    const tabButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n    // Track scroll state for gradient overlay\n    // Start with true if content is scrollable, will be updated once we measure the actual content\n    const [isScrollable, setIsScrollable] = useState(isContentScrollable);\n    const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n    /**\n     * Checks if the content is scrollable and if it's scrolled to the bottom\n     * @param element - The scrollable element to check\n     */\n    const checkScrollState = useCallback((element: HTMLDivElement) => {\n        const { clientHeight, scrollHeight, scrollTop } = element;\n        const scrollable = scrollHeight > clientHeight;\n        const scrolledToBottom = scrollable ? scrollHeight - scrollTop <= clientHeight + 1 : true;\n\n        setIsScrollable(scrollable);\n        setIsScrolledToBottom(scrolledToBottom);\n    }, []);\n\n    /**\n     * Scrolls the content area to the top if isContentScrollable is true\n     * @param contentId - The content ID of the tab panel to scroll\n     */\n    const scrollToTop = useCallback(\n        (contentId: string) => {\n            if (isContentScrollable) {\n                const tabPanel = tabPanelRefs.current[contentId];\n                if (tabPanel) {\n                    tabPanel.scrollTop = 0;\n                    checkScrollState(tabPanel);\n                }\n            }\n        },\n        [isContentScrollable, checkScrollState]\n    );\n\n    const renderedTabs = tabs.map((tab) => {\n        return (\n            <button\n                className={cn(\n                    'hui-text-h5',\n                    // Base styles\n                    'z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none',\n                    // Focus visible styles\n                    'hui-focus-visible-outline focus:text-text-secondary focus:-outline-offset-1',\n                    // Base state\n                    'cursor-pointer text-text-secondary',\n\n                    // Hover state (when not active)\n                    {\n                        'hover:border-b-border-hover hover:text-link-hover': tab.contentId !== activeTab,\n                    },\n                    // Spacing adjustments - mb to create space between border and divider line\n                    { 'mb-2xs': isContentScrollable },\n                    // Active state (when not disabled)\n                    {\n                        'active:border-b-border-selected active:text-text-primary': tab.contentId !== activeTab,\n                    },\n                    // Active tab styles\n                    {\n                        'border-b-border-selected text-text-primary focus:text-text-primary':\n                            tab.contentId === activeTab,\n                    }\n                )}\n                key={tab.contentId}\n                onClick={(e) => {\n                    // Scroll the clicked tab into view FIRST, before state updates\n                    if (typeof e.currentTarget.scrollIntoView === 'function') {\n                        e.currentTarget.scrollIntoView({\n                            behavior: 'smooth',\n                            block: 'nearest',\n                            inline: 'center',\n                        });\n                    }\n\n                    setSelectedTab(tab.contentId);\n                    scrollToTop(tab.contentId);\n                    onTabChanged?.(tab.contentId);\n                    if (tab.onClick) {\n                        tab.onClick(tab.contentId);\n                    }\n                }}\n                ref={(el) => {\n                    tabButtonRefs.current[tab.contentId] = el;\n                }}\n                aria-selected={tab.contentId === activeTab}\n                role=\"tab\"\n            >\n                {tab.label}\n            </button>\n        );\n    });\n\n    const renderedTabPanels = tabs.map((tab) => {\n        const isActive = tab.contentId === activeTab;\n        const isScrollable = isContentScrollable && isActive;\n\n        const props = {\n            'aria-labelledby': tab.contentId,\n            id: tab.contentId,\n            role: 'tabpanel',\n            // Scrollable regions must be focusable for keyboard accessibility\n            ...(isScrollable && { tabIndex: 0 }),\n        };\n\n        const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n            if (isContentScrollable && isActive) {\n                checkScrollState(e.currentTarget);\n            }\n        };\n\n        if (keepTabsInDOM) {\n            return (\n                <div\n                    className={cn(\n                        {\n                            'absolute h-0 w-0 overflow-hidden': !isActive,\n                            'h-full overflow-y-auto': isScrollable,\n                        },\n                        contentClassName\n                    )}\n                    inert={!isActive}\n                    key={tab.contentId}\n                    onScroll={handleScroll}\n                    ref={(el) => {\n                        tabPanelRefs.current[tab.contentId] = el;\n                        if (el && isActive && isContentScrollable) {\n                            checkScrollState(el);\n                        }\n                    }}\n                    {...props}\n                >\n                    {tab.content}\n                </div>\n            );\n        }\n\n        if (!isActive) {\n            return null;\n        }\n\n        return (\n            <div\n                className={cn(\n                    {\n                        'h-full overflow-y-auto': isContentScrollable,\n                    },\n                    contentClassName\n                )}\n                key={tab.contentId}\n                onScroll={handleScroll}\n                ref={(el) => {\n                    tabPanelRefs.current[tab.contentId] = el;\n                    if (el && isContentScrollable) {\n                        checkScrollState(el);\n                    }\n                }}\n                {...props}\n            >\n                {tab.content}\n            </div>\n        );\n    });\n    // Handle controlled tabs - when currentTab prop changes externally, update internal state and scroll tab into view\n    useEffect(() => {\n        if (currentTab && currentTab !== selectedTab) {\n            setSelectedTab(currentTab);\n            scrollToTop(currentTab);\n\n            // Scroll the tab button into view when controlled externally\n            const tabButton = tabButtonRefs.current[currentTab];\n            if (tabButton && typeof tabButton.scrollIntoView === 'function') {\n                tabButton.scrollIntoView({\n                    behavior: 'smooth',\n                    block: 'nearest',\n                    inline: 'center',\n                });\n            }\n        }\n    }, [currentTab, selectedTab, scrollToTop]);\n\n    // Scroll the selected tab into view on initial render\n    // Only scroll if it's not the first tab (first tab is already visible)\n    // This is useful for bottom sheet on mobile where a non-first tab might be selected initially\n    useEffect(() => {\n        // Skip scroll if it's the first tab to prevent page jumping on initial load\n        if (selectedTab === tabs[0].contentId) {\n            return;\n        }\n\n        const tabButton = tabButtonRefs.current[selectedTab];\n        if (tabButton && typeof tabButton.scrollIntoView === 'function') {\n            tabButton.scrollIntoView({\n                behavior: 'instant',\n                block: 'nearest',\n                inline: 'center',\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []); // Only run on mount\n\n    // Check scroll state when active tab changes or content loads\n    useEffect(() => {\n        if (isContentScrollable) {\n            const activePanel = tabPanelRefs.current[activeTab];\n            if (activePanel) {\n                // Match BottomSheet opening animation duration to ensure layout is stable\n                const timer = setTimeout(() => {\n                    checkScrollState(activePanel);\n                }, 300);\n\n                return () => clearTimeout(timer);\n            }\n        }\n\n        return undefined;\n    }, [activeTab, isContentScrollable, checkScrollState, tabs]);\n\n    return (\n        <div\n            className={cn(className, {\n                'flex h-full min-h-0 flex-1 flex-col': isContentScrollable,\n            })}\n        >\n            <div\n                className=\"relative flex-shrink-0 overflow-x-clip\"\n                role=\"tablist\"\n            >\n                <div\n                    className=\"flex gap-sm overflow-x-auto xsMax:scrollbar-hide\"\n                    ref={horizontalScrollFadeProps.ref}\n                >\n                    {/* Left fade overlay */}\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute left-0 top-0 z-10 w-[48px] bg-gradient-to-r from-background-primary to-transparent transition-opacity duration-300 ease-in-out',\n                            {\n                                'bottom-0': !isContentScrollable,\n                                'bottom-2xs': isContentScrollable,\n                                'opacity-0': !horizontalScrollFadeProps.shouldShowLeftFade,\n                                'opacity-100': horizontalScrollFadeProps.shouldShowLeftFade,\n                            }\n                        )}\n                    />\n\n                    {/* Right fade overlay */}\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute right-0 top-0 z-10 w-[48px] bg-gradient-to-l from-background-primary to-transparent transition-opacity duration-300 ease-in-out',\n                            {\n                                'bottom-0': !isContentScrollable,\n                                'bottom-2xs': isContentScrollable,\n                                'opacity-0': !horizontalScrollFadeProps.shouldShowRightFade,\n                                'opacity-100': horizontalScrollFadeProps.shouldShowRightFade,\n                            }\n                        )}\n                    />\n\n                    {renderedTabs}\n                    <div\n                        className={cn('absolute left-0 right-0 z-[1] h-px border-b border-border-secondary', {\n                            'bottom-0': !isContentScrollable,\n                            'bottom-2xs': isContentScrollable,\n                        })}\n                        role=\"none\"\n                    />\n                </div>\n            </div>\n            <div\n                className={cn('relative', {\n                    'min-h-0 flex-grow pb-3xs': isContentScrollable,\n                })}\n            >\n                {renderedTabPanels}\n                {/* Bottom gradient overlay - shows when content is scrollable and not at bottom */}\n                {isContentScrollable && (\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute bottom-0 left-0 right-0 h-xl transition-opacity duration-300 ease-in-out',\n                            {\n                                'opacity-0': isScrolledToBottom && isScrollable,\n                                'opacity-100': !isScrolledToBottom && isScrollable,\n                            }\n                        )}\n                        data-testid=\"tabs-gradient-overlay\"\n                        style={{\n                            background: `linear-gradient(to bottom, transparent, ${wrapVarRgb('--color-background-primary')})`,\n                        }}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/tabs.d.cts

@@ -0,0 +1,2 @@
+import { n as Tabs, t as Tab } from "./Tabs-DRT-IQZk.cjs";
+export { Tab, Tabs };

package/tabs.d.mts

@@ -0,0 +1,2 @@
+import { n as Tabs, t as Tab } from "./Tabs-DRT-IQZk.mjs";
+export { Tab, Tabs };

package/tabs.mjs

@@ -0,0 +1,187 @@
+'use client';
+import { t as useHorizontalScrollFadeMixin } from "./horizontalScrollFadeMixin-BBr1qJpj.mjs";
+import { cn, wrapVarRgb } from "@evolve.ui/theme-system";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Tabs/Tabs.tsx
+const Tabs = ({ className, contentClassName, currentTab, defaultTab, isContentScrollable = false, keepTabsInDOM = true, onTabChanged, tabs }) => {
+	const [selectedTab, setSelectedTab] = useState(defaultTab ?? currentTab ?? tabs[0].contentId);
+	const activeTab = currentTab !== void 0 ? currentTab : selectedTab;
+	const horizontalScrollFadeProps = useHorizontalScrollFadeMixin(0);
+	const tabPanelRefs = useRef({});
+	const tabButtonRefs = useRef({});
+	const [isScrollable, setIsScrollable] = useState(isContentScrollable);
+	const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);
+	/**
+	* Checks if the content is scrollable and if it's scrolled to the bottom
+	* @param element - The scrollable element to check
+	*/
+	const checkScrollState = useCallback((element) => {
+		const { clientHeight, scrollHeight, scrollTop } = element;
+		const scrollable = scrollHeight > clientHeight;
+		const scrolledToBottom = scrollable ? scrollHeight - scrollTop <= clientHeight + 1 : true;
+		setIsScrollable(scrollable);
+		setIsScrolledToBottom(scrolledToBottom);
+	}, []);
+	/**
+	* Scrolls the content area to the top if isContentScrollable is true
+	* @param contentId - The content ID of the tab panel to scroll
+	*/
+	const scrollToTop = useCallback((contentId) => {
+		if (isContentScrollable) {
+			const tabPanel = tabPanelRefs.current[contentId];
+			if (tabPanel) {
+				tabPanel.scrollTop = 0;
+				checkScrollState(tabPanel);
+			}
+		}
+	}, [isContentScrollable, checkScrollState]);
+	const renderedTabs = tabs.map((tab) => {
+		return /* @__PURE__ */ jsx("button", {
+			className: cn("hui-text-h5", "z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none", "hui-focus-visible-outline focus:text-text-secondary focus:-outline-offset-1", "cursor-pointer text-text-secondary", { "hover:border-b-border-hover hover:text-link-hover": tab.contentId !== activeTab }, { "mb-2xs": isContentScrollable }, { "active:border-b-border-selected active:text-text-primary": tab.contentId !== activeTab }, { "border-b-border-selected text-text-primary focus:text-text-primary": tab.contentId === activeTab }),
+			onClick: (e) => {
+				if (typeof e.currentTarget.scrollIntoView === "function") e.currentTarget.scrollIntoView({
+					behavior: "smooth",
+					block: "nearest",
+					inline: "center"
+				});
+				setSelectedTab(tab.contentId);
+				scrollToTop(tab.contentId);
+				onTabChanged?.(tab.contentId);
+				if (tab.onClick) tab.onClick(tab.contentId);
+			},
+			ref: (el) => {
+				tabButtonRefs.current[tab.contentId] = el;
+			},
+			"aria-selected": tab.contentId === activeTab,
+			role: "tab",
+			children: tab.label
+		}, tab.contentId);
+	});
+	const renderedTabPanels = tabs.map((tab) => {
+		const isActive = tab.contentId === activeTab;
+		const isScrollable = isContentScrollable && isActive;
+		const props = {
+			"aria-labelledby": tab.contentId,
+			id: tab.contentId,
+			role: "tabpanel",
+			...isScrollable && { tabIndex: 0 }
+		};
+		const handleScroll = (e) => {
+			if (isContentScrollable && isActive) checkScrollState(e.currentTarget);
+		};
+		if (keepTabsInDOM) return /* @__PURE__ */ jsx("div", {
+			className: cn({
+				"absolute h-0 w-0 overflow-hidden": !isActive,
+				"h-full overflow-y-auto": isScrollable
+			}, contentClassName),
+			inert: !isActive,
+			onScroll: handleScroll,
+			ref: (el) => {
+				tabPanelRefs.current[tab.contentId] = el;
+				if (el && isActive && isContentScrollable) checkScrollState(el);
+			},
+			...props,
+			children: tab.content
+		}, tab.contentId);
+		if (!isActive) return null;
+		return /* @__PURE__ */ jsx("div", {
+			className: cn({ "h-full overflow-y-auto": isContentScrollable }, contentClassName),
+			onScroll: handleScroll,
+			ref: (el) => {
+				tabPanelRefs.current[tab.contentId] = el;
+				if (el && isContentScrollable) checkScrollState(el);
+			},
+			...props,
+			children: tab.content
+		}, tab.contentId);
+	});
+	useEffect(() => {
+		if (currentTab && currentTab !== selectedTab) {
+			setSelectedTab(currentTab);
+			scrollToTop(currentTab);
+			const tabButton = tabButtonRefs.current[currentTab];
+			if (tabButton && typeof tabButton.scrollIntoView === "function") tabButton.scrollIntoView({
+				behavior: "smooth",
+				block: "nearest",
+				inline: "center"
+			});
+		}
+	}, [
+		currentTab,
+		selectedTab,
+		scrollToTop
+	]);
+	useEffect(() => {
+		if (selectedTab === tabs[0].contentId) return;
+		const tabButton = tabButtonRefs.current[selectedTab];
+		if (tabButton && typeof tabButton.scrollIntoView === "function") tabButton.scrollIntoView({
+			behavior: "instant",
+			block: "nearest",
+			inline: "center"
+		});
+	}, []);
+	useEffect(() => {
+		if (isContentScrollable) {
+			const activePanel = tabPanelRefs.current[activeTab];
+			if (activePanel) {
+				const timer = setTimeout(() => {
+					checkScrollState(activePanel);
+				}, 300);
+				return () => clearTimeout(timer);
+			}
+		}
+	}, [
+		activeTab,
+		isContentScrollable,
+		checkScrollState,
+		tabs
+	]);
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn(className, { "flex h-full min-h-0 flex-1 flex-col": isContentScrollable }),
+		children: [/* @__PURE__ */ jsx("div", {
+			className: "relative flex-shrink-0 overflow-x-clip",
+			role: "tablist",
+			children: /* @__PURE__ */ jsxs("div", {
+				className: "flex gap-sm overflow-x-auto xsMax:scrollbar-hide",
+				ref: horizontalScrollFadeProps.ref,
+				children: [
+					/* @__PURE__ */ jsx("div", { className: cn("pointer-events-none absolute left-0 top-0 z-10 w-[48px] bg-gradient-to-r from-background-primary to-transparent transition-opacity duration-300 ease-in-out", {
+						"bottom-0": !isContentScrollable,
+						"bottom-2xs": isContentScrollable,
+						"opacity-0": !horizontalScrollFadeProps.shouldShowLeftFade,
+						"opacity-100": horizontalScrollFadeProps.shouldShowLeftFade
+					}) }),
+					/* @__PURE__ */ jsx("div", { className: cn("pointer-events-none absolute right-0 top-0 z-10 w-[48px] bg-gradient-to-l from-background-primary to-transparent transition-opacity duration-300 ease-in-out", {
+						"bottom-0": !isContentScrollable,
+						"bottom-2xs": isContentScrollable,
+						"opacity-0": !horizontalScrollFadeProps.shouldShowRightFade,
+						"opacity-100": horizontalScrollFadeProps.shouldShowRightFade
+					}) }),
+					renderedTabs,
+					/* @__PURE__ */ jsx("div", {
+						className: cn("absolute left-0 right-0 z-[1] h-px border-b border-border-secondary", {
+							"bottom-0": !isContentScrollable,
+							"bottom-2xs": isContentScrollable
+						}),
+						role: "none"
+					})
+				]
+			})
+		}), /* @__PURE__ */ jsxs("div", {
+			className: cn("relative", { "min-h-0 flex-grow pb-3xs": isContentScrollable }),
+			children: [renderedTabPanels, isContentScrollable && /* @__PURE__ */ jsx("div", {
+				className: cn("pointer-events-none absolute bottom-0 left-0 right-0 h-xl transition-opacity duration-300 ease-in-out", {
+					"opacity-0": isScrolledToBottom && isScrollable,
+					"opacity-100": !isScrolledToBottom && isScrollable
+				}),
+				"data-testid": "tabs-gradient-overlay",
+				style: { background: `linear-gradient(to bottom, transparent, ${wrapVarRgb("--color-background-primary")})` }
+			})]
+		})]
+	});
+};
+//#endregion
+export { Tabs };
+
+//# sourceMappingURL=tabs.mjs.map

package/tabs.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"tabs.mjs","names":[],"sources":["../src/Tabs/Tabs.tsx"],"sourcesContent":["import { cn, wrapVarRgb } from '@evolve.ui/theme-system';\nimport { ReactNode, useCallback, useEffect, useRef, useState } from 'react';\n\nimport { useHorizontalScrollFadeMixin } from '../mixins/horizontalScrollFadeMixin';\n\nexport type Tab = {\n    /** The content to render when this tab is selected */\n    content: ReactNode;\n    /** The id of the content to render when this tab is selected */\n    contentId: string;\n    /** The label of the tab */\n    label: string | ReactNode;\n    /** The function to call when the tab is clicked */\n    onClick?: (contentId: string) => void;\n};\n\ntype Props = {\n    className?: string;\n    contentClassName?: string;\n    isContentScrollable?: boolean;\n    /**\n     * When `true` (default), inactive tab panels stay mounted in the DOM but are visually hidden\n     * and marked `inert` so their content is not keyboard- or assistive-technology-interactive.\n     */\n    keepTabsInDOM?: boolean;\n    tabs: Tab[];\n} & (\n    | {\n          /** Used with `onTabChanged` to control tabs externally */\n          currentTab: string;\n          /** Use only if `currentTab` and `onTabChanged` are not provided */\n          defaultTab?: never;\n          /** Used with `currentTab` to control tabs externally */\n          onTabChanged: (contentId: string) => void;\n      }\n    | {\n          /** Use only if `defaultTab` is not provided. This is the contentId of the tab to be selected */\n          currentTab?: never;\n          /** Sets the default tab on first render. This is the contentId of the tab to be selected */\n          defaultTab?: string;\n          /** Use only if `defaultTab` is not provided */\n          onTabChanged?: never;\n      }\n);\n\nexport const Tabs = ({\n    className,\n    contentClassName,\n    currentTab,\n    defaultTab,\n    isContentScrollable = false,\n    keepTabsInDOM = true,\n    onTabChanged,\n    tabs,\n}: Props) => {\n    const [selectedTab, setSelectedTab] = useState(defaultTab ?? currentTab ?? tabs[0].contentId);\n    // In controlled mode, use currentTab as the source of truth; otherwise use selectedTab\n    const activeTab = currentTab !== undefined ? currentTab : selectedTab;\n    const horizontalScrollFadeProps = useHorizontalScrollFadeMixin(0);\n\n    // Create refs for each tab panel to handle scrolling\n    const tabPanelRefs = useRef<Record<string, HTMLDivElement | null>>({});\n    // Create refs for each tab button to handle scrolling into view\n    const tabButtonRefs = useRef<Record<string, HTMLButtonElement | null>>({});\n\n    // Track scroll state for gradient overlay\n    // Start with true if content is scrollable, will be updated once we measure the actual content\n    const [isScrollable, setIsScrollable] = useState(isContentScrollable);\n    const [isScrolledToBottom, setIsScrolledToBottom] = useState(false);\n\n    /**\n     * Checks if the content is scrollable and if it's scrolled to the bottom\n     * @param element - The scrollable element to check\n     */\n    const checkScrollState = useCallback((element: HTMLDivElement) => {\n        const { clientHeight, scrollHeight, scrollTop } = element;\n        const scrollable = scrollHeight > clientHeight;\n        const scrolledToBottom = scrollable ? scrollHeight - scrollTop <= clientHeight + 1 : true;\n\n        setIsScrollable(scrollable);\n        setIsScrolledToBottom(scrolledToBottom);\n    }, []);\n\n    /**\n     * Scrolls the content area to the top if isContentScrollable is true\n     * @param contentId - The content ID of the tab panel to scroll\n     */\n    const scrollToTop = useCallback(\n        (contentId: string) => {\n            if (isContentScrollable) {\n                const tabPanel = tabPanelRefs.current[contentId];\n                if (tabPanel) {\n                    tabPanel.scrollTop = 0;\n                    checkScrollState(tabPanel);\n                }\n            }\n        },\n        [isContentScrollable, checkScrollState]\n    );\n\n    const renderedTabs = tabs.map((tab) => {\n        return (\n            <button\n                className={cn(\n                    'hui-text-h5',\n                    // Base styles\n                    'z-[2] overflow-visible whitespace-nowrap border-b-4 border-b-transparent bg-transparent p-0 outline-none',\n                    // Focus visible styles\n                    'hui-focus-visible-outline focus:text-text-secondary focus:-outline-offset-1',\n                    // Base state\n                    'cursor-pointer text-text-secondary',\n\n                    // Hover state (when not active)\n                    {\n                        'hover:border-b-border-hover hover:text-link-hover': tab.contentId !== activeTab,\n                    },\n                    // Spacing adjustments - mb to create space between border and divider line\n                    { 'mb-2xs': isContentScrollable },\n                    // Active state (when not disabled)\n                    {\n                        'active:border-b-border-selected active:text-text-primary': tab.contentId !== activeTab,\n                    },\n                    // Active tab styles\n                    {\n                        'border-b-border-selected text-text-primary focus:text-text-primary':\n                            tab.contentId === activeTab,\n                    }\n                )}\n                key={tab.contentId}\n                onClick={(e) => {\n                    // Scroll the clicked tab into view FIRST, before state updates\n                    if (typeof e.currentTarget.scrollIntoView === 'function') {\n                        e.currentTarget.scrollIntoView({\n                            behavior: 'smooth',\n                            block: 'nearest',\n                            inline: 'center',\n                        });\n                    }\n\n                    setSelectedTab(tab.contentId);\n                    scrollToTop(tab.contentId);\n                    onTabChanged?.(tab.contentId);\n                    if (tab.onClick) {\n                        tab.onClick(tab.contentId);\n                    }\n                }}\n                ref={(el) => {\n                    tabButtonRefs.current[tab.contentId] = el;\n                }}\n                aria-selected={tab.contentId === activeTab}\n                role=\"tab\"\n            >\n                {tab.label}\n            </button>\n        );\n    });\n\n    const renderedTabPanels = tabs.map((tab) => {\n        const isActive = tab.contentId === activeTab;\n        const isScrollable = isContentScrollable && isActive;\n\n        const props = {\n            'aria-labelledby': tab.contentId,\n            id: tab.contentId,\n            role: 'tabpanel',\n            // Scrollable regions must be focusable for keyboard accessibility\n            ...(isScrollable && { tabIndex: 0 }),\n        };\n\n        const handleScroll = (e: React.UIEvent<HTMLDivElement>) => {\n            if (isContentScrollable && isActive) {\n                checkScrollState(e.currentTarget);\n            }\n        };\n\n        if (keepTabsInDOM) {\n            return (\n                <div\n                    className={cn(\n                        {\n                            'absolute h-0 w-0 overflow-hidden': !isActive,\n                            'h-full overflow-y-auto': isScrollable,\n                        },\n                        contentClassName\n                    )}\n                    inert={!isActive}\n                    key={tab.contentId}\n                    onScroll={handleScroll}\n                    ref={(el) => {\n                        tabPanelRefs.current[tab.contentId] = el;\n                        if (el && isActive && isContentScrollable) {\n                            checkScrollState(el);\n                        }\n                    }}\n                    {...props}\n                >\n                    {tab.content}\n                </div>\n            );\n        }\n\n        if (!isActive) {\n            return null;\n        }\n\n        return (\n            <div\n                className={cn(\n                    {\n                        'h-full overflow-y-auto': isContentScrollable,\n                    },\n                    contentClassName\n                )}\n                key={tab.contentId}\n                onScroll={handleScroll}\n                ref={(el) => {\n                    tabPanelRefs.current[tab.contentId] = el;\n                    if (el && isContentScrollable) {\n                        checkScrollState(el);\n                    }\n                }}\n                {...props}\n            >\n                {tab.content}\n            </div>\n        );\n    });\n    // Handle controlled tabs - when currentTab prop changes externally, update internal state and scroll tab into view\n    useEffect(() => {\n        if (currentTab && currentTab !== selectedTab) {\n            setSelectedTab(currentTab);\n            scrollToTop(currentTab);\n\n            // Scroll the tab button into view when controlled externally\n            const tabButton = tabButtonRefs.current[currentTab];\n            if (tabButton && typeof tabButton.scrollIntoView === 'function') {\n                tabButton.scrollIntoView({\n                    behavior: 'smooth',\n                    block: 'nearest',\n                    inline: 'center',\n                });\n            }\n        }\n    }, [currentTab, selectedTab, scrollToTop]);\n\n    // Scroll the selected tab into view on initial render\n    // Only scroll if it's not the first tab (first tab is already visible)\n    // This is useful for bottom sheet on mobile where a non-first tab might be selected initially\n    useEffect(() => {\n        // Skip scroll if it's the first tab to prevent page jumping on initial load\n        if (selectedTab === tabs[0].contentId) {\n            return;\n        }\n\n        const tabButton = tabButtonRefs.current[selectedTab];\n        if (tabButton && typeof tabButton.scrollIntoView === 'function') {\n            tabButton.scrollIntoView({\n                behavior: 'instant',\n                block: 'nearest',\n                inline: 'center',\n            });\n        }\n        // eslint-disable-next-line react-hooks/exhaustive-deps\n    }, []); // Only run on mount\n\n    // Check scroll state when active tab changes or content loads\n    useEffect(() => {\n        if (isContentScrollable) {\n            const activePanel = tabPanelRefs.current[activeTab];\n            if (activePanel) {\n                // Match BottomSheet opening animation duration to ensure layout is stable\n                const timer = setTimeout(() => {\n                    checkScrollState(activePanel);\n                }, 300);\n\n                return () => clearTimeout(timer);\n            }\n        }\n\n        return undefined;\n    }, [activeTab, isContentScrollable, checkScrollState, tabs]);\n\n    return (\n        <div\n            className={cn(className, {\n                'flex h-full min-h-0 flex-1 flex-col': isContentScrollable,\n            })}\n        >\n            <div\n                className=\"relative flex-shrink-0 overflow-x-clip\"\n                role=\"tablist\"\n            >\n                <div\n                    className=\"flex gap-sm overflow-x-auto xsMax:scrollbar-hide\"\n                    ref={horizontalScrollFadeProps.ref}\n                >\n                    {/* Left fade overlay */}\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute left-0 top-0 z-10 w-[48px] bg-gradient-to-r from-background-primary to-transparent transition-opacity duration-300 ease-in-out',\n                            {\n                                'bottom-0': !isContentScrollable,\n                                'bottom-2xs': isContentScrollable,\n                                'opacity-0': !horizontalScrollFadeProps.shouldShowLeftFade,\n                                'opacity-100': horizontalScrollFadeProps.shouldShowLeftFade,\n                            }\n                        )}\n                    />\n\n                    {/* Right fade overlay */}\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute right-0 top-0 z-10 w-[48px] bg-gradient-to-l from-background-primary to-transparent transition-opacity duration-300 ease-in-out',\n                            {\n                                'bottom-0': !isContentScrollable,\n                                'bottom-2xs': isContentScrollable,\n                                'opacity-0': !horizontalScrollFadeProps.shouldShowRightFade,\n                                'opacity-100': horizontalScrollFadeProps.shouldShowRightFade,\n                            }\n                        )}\n                    />\n\n                    {renderedTabs}\n                    <div\n                        className={cn('absolute left-0 right-0 z-[1] h-px border-b border-border-secondary', {\n                            'bottom-0': !isContentScrollable,\n                            'bottom-2xs': isContentScrollable,\n                        })}\n                        role=\"none\"\n                    />\n                </div>\n            </div>\n            <div\n                className={cn('relative', {\n                    'min-h-0 flex-grow pb-3xs': isContentScrollable,\n                })}\n            >\n                {renderedTabPanels}\n                {/* Bottom gradient overlay - shows when content is scrollable and not at bottom */}\n                {isContentScrollable && (\n                    <div\n                        className={cn(\n                            'pointer-events-none absolute bottom-0 left-0 right-0 h-xl transition-opacity duration-300 ease-in-out',\n                            {\n                                'opacity-0': isScrolledToBottom && isScrollable,\n                                'opacity-100': !isScrolledToBottom && isScrollable,\n                            }\n                        )}\n                        data-testid=\"tabs-gradient-overlay\"\n                        style={{\n                            background: `linear-gradient(to bottom, transparent, ${wrapVarRgb('--color-background-primary')})`,\n                        }}\n                    />\n                )}\n            </div>\n        </div>\n    );\n};\n"],"mappings":"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"}

package/textArea.cjs

@@ -0,0 +1,75 @@
+'use client';
+Object.defineProperties(exports, {
+	__esModule: { value: true },
+	[Symbol.toStringTag]: { value: "Module" }
+});
+const require_Typography_Text = require("./Typography/Text.cjs");
+const require_formLabel = require("./formLabel.cjs");
+const require_InfoIconTooltip = require("./InfoIconTooltip.cjs");
+let _evolve_ui_theme_system = require("@evolve.ui/theme-system");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+//#region src/TextArea/TextArea.tsx
+const TextAreaInput = (0, react.forwardRef)((unfilteredProps, ref) => {
+	const [formLabelProps, { characterLimit = 0, noResize, onChange, overCharacterLimitText = "Too many characters", startingHeight, startingWidth, tooltipId, tooltipText = "", ...inputProps }] = require_formLabel.extractFormLabelProps(unfilteredProps);
+	const [characterCount, setCharacterCount] = (0, react.useState)(inputProps.value?.length ?? 0);
+	(0, react.useEffect)(() => {
+		if (inputProps.value !== void 0) setCharacterCount(String(inputProps.value).length);
+	}, [inputProps.value]);
+	const handleOnChange = (0, react.useCallback)((e) => {
+		setCharacterCount(String(e.target.value).length);
+		onChange?.(e);
+	}, [onChange]);
+	const overCharacterLimit = characterLimit ? characterCount > characterLimit : false;
+	const hasError = Boolean(formLabelProps.hasError) || overCharacterLimit;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_formLabel.FormLabel, {
+		...formLabelProps,
+		errorText: overCharacterLimit ? overCharacterLimitText : formLabelProps.errorText,
+		hasError,
+		renderErrorTextAdjacent: true,
+		renderHelpTextAdjacent: true,
+		showTopLeft: Boolean(formLabelProps.labelText) || tooltipText.length > 0,
+		showTopRight: characterLimit > 0,
+		style: {
+			minHeight: startingHeight ?? "100px",
+			minWidth: startingWidth ?? "150px",
+			overflow: "hidden",
+			resize: noResize ? "none" : "both"
+		},
+		topLeft: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
+			className: (0, _evolve_ui_theme_system.cn)("hui-text-label-mini flex items-center gap-1 whitespace-nowrap", {
+				"text-text-disabled": formLabelProps.disabled,
+				"text-text-secondary": !formLabelProps.disabled
+			}),
+			children: [formLabelProps.labelText, tooltipText && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_InfoIconTooltip.InfoIconTooltip, {
+				content: tooltipText,
+				id: tooltipId,
+				size: "xs"
+			})]
+		}),
+		topRight: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(require_Typography_Text.LabelMini, {
+			className: "ml-auto whitespace-nowrap grid-area-[topright]",
+			color: formLabelProps.disabled ? "disabled" : overCharacterLimit ? "critical" : "secondary",
+			children: [
+				characterCount,
+				"/",
+				characterLimit
+			]
+		}),
+		children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+			...inputProps,
+			className: (0, _evolve_ui_theme_system.cn)("hui-text-body-primary", "h-full w-full resize-none border-0 px-2 py-[5px] outline-none", "cursor-text rounded-container", "bg-background-field border border-border-secondary", "placeholder:text-text-inactive", { "hover:border-border-hover": !formLabelProps.disabled }, { "focus:border-border-focused": !formLabelProps.disabled }, { "border-border-disabled bg-background-disabled": formLabelProps.disabled }, { "border-border-critical": Boolean(formLabelProps.hasError) || overCharacterLimit }),
+			onChange: handleOnChange,
+			ref,
+			style: {
+				minHeight: startingHeight ?? "100px",
+				minWidth: startingWidth ?? "150px"
+			}
+		})
+	});
+});
+TextAreaInput.displayName = "TextAreaInput";
+//#endregion
+exports.TextAreaInput = TextAreaInput;
+
+//# sourceMappingURL=textArea.cjs.map

package/textArea.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"textArea.cjs","names":["extractFormLabelProps","FormLabel","InfoIconTooltip","LabelMini"],"sources":["../src/TextArea/TextArea.tsx"],"sourcesContent":["import { cn } from '@evolve.ui/theme-system';\nimport { ChangeEventHandler, forwardRef, HTMLProps, useCallback, useEffect, useState } from 'react';\n\nimport { extractFormLabelProps, FormLabel, FormLabelProps } from '../FormLabel/FormLabel';\nimport { InfoIconTooltip } from '../Tooltip/InfoIconTooltip';\nimport { LabelMini } from '../Typography/Text/Text';\n\ntype Props = Omit<HTMLProps<HTMLTextAreaElement>, 'as' | 'value'> & {\n    characterLimit?: number;\n    /**\n     * If true, the textarea will not be resizable.\n     *\n     * @default false\n     */\n    noResize?: boolean;\n    overCharacterLimitText?: string;\n    /**\n     * The starting height of the textarea.\n     *\n     * @default '100px'\n     */\n    startingHeight?: string;\n    /**\n     * The starting width of the textarea.\n     *\n     * @default '150px'\n     */\n    startingWidth?: string;\n    value?: string;\n} & (\n        | {\n              tooltipId?: string;\n              tooltipText?: string;\n          }\n        | {\n              tooltipId?: never;\n              tooltipText?: never;\n          }\n    ) &\n    FormLabelProps;\n\nexport const TextAreaInput = forwardRef<HTMLTextAreaElement, Props>((unfilteredProps, ref) => {\n    const [\n        formLabelProps,\n        {\n            characterLimit = 0,\n            noResize,\n            onChange,\n            overCharacterLimitText = 'Too many characters',\n            startingHeight,\n            startingWidth,\n            tooltipId,\n            tooltipText = '',\n            ...inputProps\n        },\n    ] = extractFormLabelProps(unfilteredProps);\n\n    const [characterCount, setCharacterCount] = useState(inputProps.value?.length ?? 0);\n\n    useEffect(() => {\n        if (inputProps.value !== undefined) {\n            setCharacterCount(String(inputProps.value).length);\n        }\n    }, [inputProps.value]);\n\n    const handleOnChange = useCallback<ChangeEventHandler<HTMLTextAreaElement>>(\n        (e) => {\n            setCharacterCount(String(e.target.value).length);\n            onChange?.(e);\n        },\n        [onChange]\n    );\n\n    const overCharacterLimit = characterLimit ? characterCount > characterLimit : false;\n    const hasError = Boolean(formLabelProps.hasError) || overCharacterLimit;\n\n    return (\n        <FormLabel\n            {...formLabelProps}\n            errorText={overCharacterLimit ? overCharacterLimitText : formLabelProps.errorText}\n            hasError={hasError}\n            renderErrorTextAdjacent\n            renderHelpTextAdjacent\n            showTopLeft={Boolean(formLabelProps.labelText) || tooltipText.length > 0}\n            showTopRight={characterLimit > 0}\n            style={{\n                minHeight: startingHeight ?? '100px',\n                minWidth: startingWidth ?? '150px',\n                overflow: 'hidden',\n                resize: noResize ? 'none' : 'both',\n            }}\n            topLeft={\n                <span\n                    className={cn('hui-text-label-mini flex items-center gap-1 whitespace-nowrap', {\n                        'text-text-disabled': formLabelProps.disabled,\n                        'text-text-secondary': !formLabelProps.disabled,\n                    })}\n                >\n                    {formLabelProps.labelText}\n                    {tooltipText && (\n                        <InfoIconTooltip\n                            content={tooltipText}\n                            id={tooltipId!}\n                            size=\"xs\"\n                        />\n                    )}\n                </span>\n            }\n            topRight={\n                <LabelMini\n                    className=\"ml-auto whitespace-nowrap grid-area-[topright]\"\n                    color={formLabelProps.disabled ? 'disabled' : overCharacterLimit ? 'critical' : 'secondary'}\n                >\n                    {characterCount}/{characterLimit}\n                </LabelMini>\n            }\n        >\n            <textarea\n                {...inputProps}\n                className={cn(\n                    'hui-text-body-primary',\n                    // Base styles\n                    'h-full w-full resize-none border-0 px-2 py-[5px] outline-none',\n                    'cursor-text rounded-container',\n                    // Background and border - base state\n                    'bg-background-field border border-border-secondary',\n                    // Placeholder styles\n                    'placeholder:text-text-inactive',\n                    // Hover state (when not disabled)\n                    {\n                        'hover:border-border-hover': !formLabelProps.disabled,\n                    },\n                    // Focus state (when not disabled)\n                    {\n                        'focus:border-border-focused': !formLabelProps.disabled,\n                    },\n                    // Disabled state\n                    {\n                        'border-border-disabled bg-background-disabled': formLabelProps.disabled,\n                    },\n                    // Error states - hasError takes precedence over overCharacterLimit for styling\n                    {\n                        'border-border-critical': Boolean(formLabelProps.hasError) || overCharacterLimit,\n                    }\n                )}\n                onChange={handleOnChange}\n                ref={ref}\n                style={{\n                    minHeight: startingHeight ?? '100px',\n                    minWidth: startingWidth ?? '150px',\n                }}\n            />\n        </FormLabel>\n    );\n});\n\nTextAreaInput.displayName = 'TextAreaInput';\n"],"mappings":";;;;;;;;;;;AAyCA,MAAa,iBAAA,GAAA,MAAA,WAAA,EAAwD,iBAAiB,QAAQ;CAC1F,MAAM,CACF,gBACA,EACI,iBAAiB,GACjB,UACA,UACA,yBAAyB,uBACzB,gBACA,eACA,WACA,cAAc,IACd,GAAG,gBAEPA,kBAAAA,sBAAsB,eAAe;CAEzC,MAAM,CAAC,gBAAgB,sBAAA,GAAA,MAAA,SAAA,CAA8B,WAAW,OAAO,UAAU,CAAC;CAElF,CAAA,GAAA,MAAA,UAAA,OAAgB;EACZ,IAAI,WAAW,UAAU,KAAA,GACrB,kBAAkB,OAAO,WAAW,KAAK,CAAC,CAAC,MAAM;CAEzD,GAAG,CAAC,WAAW,KAAK,CAAC;CAErB,MAAM,kBAAA,GAAA,MAAA,YAAA,EACD,MAAM;EACH,kBAAkB,OAAO,EAAE,OAAO,KAAK,CAAC,CAAC,MAAM;EAC/C,WAAW,CAAC;CAChB,GACA,CAAC,QAAQ,CACb;CAEA,MAAM,qBAAqB,iBAAiB,iBAAiB,iBAAiB;CAC9E,MAAM,WAAW,QAAQ,eAAe,QAAQ,KAAK;CAErD,OACI,iBAAA,GAAA,kBAAA,IAAA,CAACC,kBAAAA,WAAD;EACI,GAAI;EACJ,WAAW,qBAAqB,yBAAyB,eAAe;EAC9D;EACV,yBAAA;EACA,wBAAA;EACA,aAAa,QAAQ,eAAe,SAAS,KAAK,YAAY,SAAS;EACvE,cAAc,iBAAiB;EAC/B,OAAO;GACH,WAAW,kBAAkB;GAC7B,UAAU,iBAAiB;GAC3B,UAAU;GACV,QAAQ,WAAW,SAAS;EAChC;EACA,SACI,iBAAA,GAAA,kBAAA,KAAA,CAAC,QAAD;GACI,YAAA,GAAA,wBAAA,GAAA,CAAc,iEAAiE;IAC3E,sBAAsB,eAAe;IACrC,uBAAuB,CAAC,eAAe;GAC3C,CAAC;aAJL,CAMK,eAAe,WACf,eACG,iBAAA,GAAA,kBAAA,IAAA,CAACC,wBAAAA,iBAAD;IACI,SAAS;IACT,IAAI;IACJ,MAAK;GACR,CAAA,CAEH;;EAEV,UACI,iBAAA,GAAA,kBAAA,KAAA,CAACC,wBAAAA,WAAD;GACI,WAAU;GACV,OAAO,eAAe,WAAW,aAAa,qBAAqB,aAAa;aAFpF;IAIK;IAAe;IAAE;GACX;;YAGf,iBAAA,GAAA,kBAAA,IAAA,CAAC,YAAD;GACI,GAAI;GACJ,YAAA,GAAA,wBAAA,GAAA,CACI,yBAEA,iEACA,iCAEA,sDAEA,kCAEA,EACI,6BAA6B,CAAC,eAAe,SACjD,GAEA,EACI,+BAA+B,CAAC,eAAe,SACnD,GAEA,EACI,iDAAiD,eAAe,SACpE,GAEA,EACI,0BAA0B,QAAQ,eAAe,QAAQ,KAAK,mBAClE,CACJ;GACA,UAAU;GACL;GACL,OAAO;IACH,WAAW,kBAAkB;IAC7B,UAAU,iBAAiB;GAC/B;EACH,CAAA;CACM,CAAA;AAEnB,CAAC;AAED,cAAc,cAAc"}

package/textArea.d.cts

@@ -0,0 +1,2 @@
+import { t as TextAreaInput } from "./TextArea-C-a06VpC.cjs";
+export { TextAreaInput };

package/textArea.d.mts

@@ -0,0 +1,2 @@
+import { t as TextAreaInput } from "./TextArea-CTHcW_IE.mjs";
+export { TextAreaInput };

package/textArea.mjs

@@ -0,0 +1,71 @@
+'use client';
+import { LabelMini } from "./Typography/Text.mjs";
+import { FormLabel, extractFormLabelProps } from "./formLabel.mjs";
+import { InfoIconTooltip } from "./InfoIconTooltip.mjs";
+import { cn } from "@evolve.ui/theme-system";
+import { forwardRef, useCallback, useEffect, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/TextArea/TextArea.tsx
+const TextAreaInput = forwardRef((unfilteredProps, ref) => {
+	const [formLabelProps, { characterLimit = 0, noResize, onChange, overCharacterLimitText = "Too many characters", startingHeight, startingWidth, tooltipId, tooltipText = "", ...inputProps }] = extractFormLabelProps(unfilteredProps);
+	const [characterCount, setCharacterCount] = useState(inputProps.value?.length ?? 0);
+	useEffect(() => {
+		if (inputProps.value !== void 0) setCharacterCount(String(inputProps.value).length);
+	}, [inputProps.value]);
+	const handleOnChange = useCallback((e) => {
+		setCharacterCount(String(e.target.value).length);
+		onChange?.(e);
+	}, [onChange]);
+	const overCharacterLimit = characterLimit ? characterCount > characterLimit : false;
+	const hasError = Boolean(formLabelProps.hasError) || overCharacterLimit;
+	return /* @__PURE__ */ jsx(FormLabel, {
+		...formLabelProps,
+		errorText: overCharacterLimit ? overCharacterLimitText : formLabelProps.errorText,
+		hasError,
+		renderErrorTextAdjacent: true,
+		renderHelpTextAdjacent: true,
+		showTopLeft: Boolean(formLabelProps.labelText) || tooltipText.length > 0,
+		showTopRight: characterLimit > 0,
+		style: {
+			minHeight: startingHeight ?? "100px",
+			minWidth: startingWidth ?? "150px",
+			overflow: "hidden",
+			resize: noResize ? "none" : "both"
+		},
+		topLeft: /* @__PURE__ */ jsxs("span", {
+			className: cn("hui-text-label-mini flex items-center gap-1 whitespace-nowrap", {
+				"text-text-disabled": formLabelProps.disabled,
+				"text-text-secondary": !formLabelProps.disabled
+			}),
+			children: [formLabelProps.labelText, tooltipText && /* @__PURE__ */ jsx(InfoIconTooltip, {
+				content: tooltipText,
+				id: tooltipId,
+				size: "xs"
+			})]
+		}),
+		topRight: /* @__PURE__ */ jsxs(LabelMini, {
+			className: "ml-auto whitespace-nowrap grid-area-[topright]",
+			color: formLabelProps.disabled ? "disabled" : overCharacterLimit ? "critical" : "secondary",
+			children: [
+				characterCount,
+				"/",
+				characterLimit
+			]
+		}),
+		children: /* @__PURE__ */ jsx("textarea", {
+			...inputProps,
+			className: cn("hui-text-body-primary", "h-full w-full resize-none border-0 px-2 py-[5px] outline-none", "cursor-text rounded-container", "bg-background-field border border-border-secondary", "placeholder:text-text-inactive", { "hover:border-border-hover": !formLabelProps.disabled }, { "focus:border-border-focused": !formLabelProps.disabled }, { "border-border-disabled bg-background-disabled": formLabelProps.disabled }, { "border-border-critical": Boolean(formLabelProps.hasError) || overCharacterLimit }),
+			onChange: handleOnChange,
+			ref,
+			style: {
+				minHeight: startingHeight ?? "100px",
+				minWidth: startingWidth ?? "150px"
+			}
+		})
+	});
+});
+TextAreaInput.displayName = "TextAreaInput";
+//#endregion
+export { TextAreaInput };
+
+//# sourceMappingURL=textArea.mjs.map