@rebasepro/ui 0.24.0 → 0.24.1-canary.gcb918fc

package/dist/components/Table.d.ts

@@ -5,11 +5,20 @@ export type TableProps = {
     style?: React.CSSProperties;
 } & React.TableHTMLAttributes<HTMLTableElement>;
 export declare const Table: React.MemoExoticComponent<({ children, className, style, ...rest }: TableProps) => React.JSX.Element>;
+/**
+ * `"card"` (the default) paints the body and every row with the card fill —
+ * a table that is an object of its own. `"list"` is a list of rows on the
+ * sheet: no fill of its own, only the hovered row takes an alpha highlight
+ * (packages/ui/DESIGN.md, "a list row has NO fill of its own").
+ */
+export type TableVariant = "card" | "list";
 export type TableBodyProps = {
     children?: React.ReactNode;
     className?: string;
+    /** See {@link TableVariant}. Rows inside take it unless they say otherwise. */
+    variant?: TableVariant;
 } & React.HTMLAttributes<HTMLTableSectionElement>;
-export declare const TableBody: React.MemoExoticComponent<({ children, className, ...rest }: TableBodyProps) => React.JSX.Element>;
+export declare const TableBody: React.MemoExoticComponent<({ children, className, variant, ...rest }: TableBodyProps) => React.JSX.Element>;
 export type TableHeaderProps = {
     children?: React.ReactNode;
     className?: string;
@@ -18,13 +27,19 @@ export declare const TableHeader: React.MemoExoticComponent<({ children, classNa
 export type TableRowProps = {
     children?: React.ReactNode;
     className?: string;
-    onClick?: React.MouseEventHandler<any>;
+    onClick?: React.MouseEventHandler<HTMLTableRowElement>;
     style?: React.CSSProperties;
+    /** The rendered `<tr>`, e.g. for an IntersectionObserver. */
+    ref?: React.Ref<HTMLTableRowElement>;
+    /** See {@link TableVariant}. Defaults to the enclosing {@link TableBody}'s. */
+    variant?: TableVariant;
 } & React.HTMLAttributes<HTMLTableRowElement>;
-export declare const TableRow: React.MemoExoticComponent<({ children, className, onClick, style, ...rest }: TableRowProps) => React.JSX.Element>;
+export declare const TableRow: React.MemoExoticComponent<({ children, className, onClick, style, ref, variant, ...rest }: TableRowProps) => React.JSX.Element>;
 export type TableCellProps = {
     children?: React.ReactNode;
+    /** Render as a header cell (`th`). Implied inside {@link TableHeader}. */
     header?: boolean;
+    /** Defaults to `col` for a cell inside {@link TableHeader}. */
     scope?: string;
     className?: string;
     style?: React.CSSProperties;

package/dist/components/Table.es.js

@@ -0,0 +1,69 @@
+"use client";
+import { defaultBorderMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import React from "react";
+import { jsx } from "react/jsx-runtime";
+//#region src/components/Table.tsx
+var Table = React.memo(({ children, className, style, ...rest }) => /* @__PURE__ */ jsx("table", {
+	className: cls("text-left text-text-primary dark:text-text-primary-dark rounded-lg overflow-x-auto", className),
+	style,
+	...rest,
+	children
+}));
+/** The variant a {@link TableBody} gives the rows inside it. */
+var TableVariantContext = React.createContext("card");
+var TableBody = React.memo(({ children, className, variant = "card", ...rest }) => /* @__PURE__ */ jsx("tbody", {
+	className: cls(variant === "card" && "bg-surface-card", "text-sm divide-y divide-hairline", className),
+	...rest,
+	children: /* @__PURE__ */ jsx(TableVariantContext.Provider, {
+		value: variant,
+		children
+	})
+}));
+/**
+* True for a cell rendered inside {@link TableHeader}, so it renders as a
+* column header (`th scope="col"`) without having to pass `header`.
+*/
+var TableHeaderContext = React.createContext(false);
+var TableHeader = React.memo(({ children, className, ...rest }) => /* @__PURE__ */ jsx("thead", {
+	...rest,
+	children: /* @__PURE__ */ jsx("tr", {
+		className: cls(defaultBorderMixin, "text-sm font-medium text-surface-700 dark:text-surface-accent-300", "bg-surface-sheet border-b", className),
+		children: /* @__PURE__ */ jsx(TableHeaderContext.Provider, {
+			value: true,
+			children
+		})
+	})
+}));
+var TableRow = React.memo(({ children, className, onClick, style, ref, variant, ...rest }) => {
+	const bodyVariant = React.useContext(TableVariantContext);
+	const card = (variant ?? bodyVariant) === "card";
+	return /* @__PURE__ */ jsx("tr", {
+		ref,
+		onClick,
+		style,
+		className: cls(card && "bg-surface-card", onClick ? cls("transition-colors duration-150 cursor-pointer", card ? "hover:bg-surface-card-hover" : "hover:bg-surface-hover") : "", className),
+		...rest,
+		children
+	});
+});
+var TableCell = React.memo(({ children, header = false, scope, align, className, style, colspan, ...rest }) => {
+	const inHeader = React.useContext(TableHeaderContext);
+	return /* @__PURE__ */ jsx(header || inHeader ? "th" : "td", {
+		scope: scope ?? (inHeader ? "col" : void 0),
+		colSpan: colspan,
+		style,
+		className: cls("px-4 py-3 text-clip ", align === "center" ? "text-center" : align === "right" ? "text-right" : "text-left", className),
+		...rest,
+		children
+	});
+});
+Table.displayName = "Table";
+TableBody.displayName = "TableBody";
+TableHeader.displayName = "TableHeader";
+TableRow.displayName = "TableRow";
+TableCell.displayName = "TableCell";
+//#endregion
+export { Table, TableBody, TableCell, TableHeader, TableRow };
+
+//# sourceMappingURL=Table.es.js.map

package/dist/components/Table.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Table.es.js","names":[],"sources":["../../src/components/Table.tsx"],"sourcesContent":["\n\"use client\";\n\nimport React from \"react\";\nimport { defaultBorderMixin } from \"../styles\";\nimport { cls } from \"../util\";\n\nexport type TableProps = {\n    children: React.ReactNode;\n    className?: string;\n    style?: React.CSSProperties;\n} & React.TableHTMLAttributes<HTMLTableElement>;\n\nexport const Table = React.memo(({\n                          children,\n                          className,\n                          style,\n                          ...rest\n                      }: TableProps) => (\n    <table\n        className={cls(\"text-left text-text-primary dark:text-text-primary-dark rounded-lg overflow-x-auto\", className)}\n        style={style}\n        {...rest}\n    >\n        {children}\n    </table>\n));\n\n/**\n * `\"card\"` (the default) paints the body and every row with the card fill —\n * a table that is an object of its own. `\"list\"` is a list of rows on the\n * sheet: no fill of its own, only the hovered row takes an alpha highlight\n * (packages/ui/DESIGN.md, \"a list row has NO fill of its own\").\n */\nexport type TableVariant = \"card\" | \"list\";\n\n/** The variant a {@link TableBody} gives the rows inside it. */\nconst TableVariantContext = React.createContext<TableVariant>(\"card\");\n\nexport type TableBodyProps = {\n    children?: React.ReactNode;\n    className?: string;\n    /** See {@link TableVariant}. Rows inside take it unless they say otherwise. */\n    variant?: TableVariant;\n} & React.HTMLAttributes<HTMLTableSectionElement>;\n\nexport const TableBody = React.memo(({\n                              children,\n                              className,\n                              variant = \"card\",\n                              ...rest\n                          }: TableBodyProps) => (\n    <tbody\n        className={cls(variant === \"card\" && \"bg-surface-card\", \"text-sm divide-y divide-hairline\", className)}\n        {...rest}\n    >\n    <TableVariantContext.Provider value={variant}>\n        {children}\n    </TableVariantContext.Provider>\n    </tbody>\n));\n\nexport type TableHeaderProps = {\n    children?: React.ReactNode;\n    className?: string;\n} & React.HTMLAttributes<HTMLTableSectionElement>;\n\n/**\n * True for a cell rendered inside {@link TableHeader}, so it renders as a\n * column header (`th scope=\"col\"`) without having to pass `header`.\n */\nconst TableHeaderContext = React.createContext(false);\n\nexport const TableHeader = React.memo(({\n                                children,\n                                className,\n                                ...rest\n                            }: TableHeaderProps) => (\n    <thead {...rest}>\n    <tr\n        className={cls(\n            defaultBorderMixin,\n            \"text-sm font-medium text-surface-700 dark:text-surface-accent-300\",\n            \"bg-surface-sheet border-b\",\n            className\n        )}\n    >\n        <TableHeaderContext.Provider value={true}>\n            {children}\n        </TableHeaderContext.Provider>\n    </tr>\n    </thead>\n));\n\nexport type TableRowProps = {\n    children?: React.ReactNode;\n    className?: string;\n    onClick?: React.MouseEventHandler<HTMLTableRowElement>;\n    style?: React.CSSProperties;\n    /** The rendered `<tr>`, e.g. for an IntersectionObserver. */\n    ref?: React.Ref<HTMLTableRowElement>;\n    /** See {@link TableVariant}. Defaults to the enclosing {@link TableBody}'s. */\n    variant?: TableVariant;\n} & React.HTMLAttributes<HTMLTableRowElement>;\n\nexport const TableRow = React.memo(({\n                             children,\n                             className,\n                             onClick,\n                             style,\n                             ref,\n                             variant,\n                             ...rest\n                         }: TableRowProps) => {\n    const bodyVariant = React.useContext(TableVariantContext);\n    const card = (variant ?? bodyVariant) === \"card\";\n    return (\n        <tr\n            ref={ref}\n            onClick={onClick}\n            style={style}\n            className={cls(\n                card && \"bg-surface-card\",\n                onClick ? cls(\"transition-colors duration-150 cursor-pointer\", card ? \"hover:bg-surface-card-hover\" : \"hover:bg-surface-hover\") : \"\",\n                className\n            )}\n            {...rest}\n        >\n            {children}\n        </tr>\n    );\n});\n\nexport type TableCellProps = {\n    children?: React.ReactNode;\n    /** Render as a header cell (`th`). Implied inside {@link TableHeader}. */\n    header?: boolean;\n    /** Defaults to `col` for a cell inside {@link TableHeader}. */\n    scope?: string;\n    className?: string;\n    style?: React.CSSProperties;\n    align?: \"left\" | \"center\" | \"right\";\n    colspan?: number;\n} & React.HTMLAttributes<HTMLTableCellElement>;\n\nexport const TableCell = React.memo(({\n                              children,\n                              header = false,\n                              scope,\n                              align,\n                              className,\n                              style,\n                              colspan,\n                              ...rest\n                          }: TableCellProps) => {\n    const inHeader = React.useContext(TableHeaderContext);\n    const isHeader = header || inHeader;\n    const Tag = isHeader ? \"th\" : \"td\";\n    return (\n        <Tag\n            scope={scope ?? (inHeader ? \"col\" : undefined)}\n            colSpan={colspan}\n            style={style}\n            className={cls(\n                \"px-4 py-3 text-clip \",\n                align === \"center\" ? \"text-center\" : (align === \"right\" ? \"text-right\" : \"text-left\"),\n                className\n            )}\n            {...rest}\n        >\n            {children}\n        </Tag>\n    );\n});\n\nTable.displayName = \"Table\";\nTableBody.displayName = \"TableBody\";\nTableHeader.displayName = \"TableHeader\";\nTableRow.displayName = \"TableRow\";\nTableCell.displayName = \"TableCell\";\n"],"mappings":";;;;;;AAaA,IAAa,QAAQ,MAAM,MAAM,EACP,UACA,WACA,OACA,GAAG,WAEzB,oBAAC,SAAD;CACI,WAAW,IAAI,sFAAsF,SAAS;CACvG;CACP,GAAI;CAEH;AACE,CAAA,CACV;;AAWD,IAAM,sBAAsB,MAAM,cAA4B,MAAM;AASpE,IAAa,YAAY,MAAM,MAAM,EACP,UACA,WACA,UAAU,QACV,GAAG,WAE7B,oBAAC,SAAD;CACI,WAAW,IAAI,YAAY,UAAU,mBAAmB,oCAAoC,SAAS;CACrG,GAAI;WAER,oBAAC,oBAAoB,UAArB;EAA8B,OAAO;EAChC;CACyB,CAAA;AACvB,CAAA,CACV;;;;;AAWD,IAAM,qBAAqB,MAAM,cAAc,KAAK;AAEpD,IAAa,cAAc,MAAM,MAAM,EACP,UACA,WACA,GAAG,WAE/B,oBAAC,SAAD;CAAO,GAAI;WACX,oBAAC,MAAD;EACI,WAAW,IACP,oBACA,qEACA,6BACA,SACJ;YAEA,oBAAC,mBAAmB,UAApB;GAA6B,OAAO;GAC/B;EACwB,CAAA;CAC7B,CAAA;AACG,CAAA,CACV;AAaD,IAAa,WAAW,MAAM,MAAM,EACP,UACA,WACA,SACA,OACA,KACA,SACA,GAAG,WACc;CAC1C,MAAM,cAAc,MAAM,WAAW,mBAAmB;CACxD,MAAM,QAAQ,WAAW,iBAAiB;CAC1C,OACI,oBAAC,MAAD;EACS;EACI;EACF;EACP,WAAW,IACP,QAAQ,mBACR,UAAU,IAAI,iDAAiD,OAAO,gCAAgC,wBAAwB,IAAI,IAClI,SACJ;EACA,GAAI;EAEH;CACD,CAAA;AAEZ,CAAC;AAcD,IAAa,YAAY,MAAM,MAAM,EACP,UACA,SAAS,OACT,OACA,OACA,WACA,OACA,SACA,GAAG,WACe;CAC5C,MAAM,WAAW,MAAM,WAAW,kBAAkB;CAGpD,OACI,oBAHa,UAAU,WACJ,OAAO,MAE1B;EACI,OAAO,UAAU,WAAW,QAAQ,KAAA;EACpC,SAAS;EACF;EACP,WAAW,IACP,wBACA,UAAU,WAAW,gBAAiB,UAAU,UAAU,eAAe,aACzE,SACJ;EACA,GAAI;EAEH;CACA,CAAA;AAEb,CAAC;AAED,MAAM,cAAc;AACpB,UAAU,cAAc;AACxB,YAAY,cAAc;AAC1B,SAAS,cAAc;AACvB,UAAU,cAAc"}

package/dist/components/Tabs.es.js

@@ -0,0 +1,101 @@
+import "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { iconSize } from "../icons/Icon.es.js";
+import { createContext, useContext, useEffect, useMemo, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { ChevronLeftIcon, ChevronRightIcon } from "lucide-react";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+//#region src/components/Tabs.tsx
+var TabsContext = createContext({ variant: "standard" });
+function Tabs({ value, onValueChange, className, innerClassName, variant = "standard", children }) {
+	const scrollContainerRef = useRef(null);
+	const [showLeftScroll, setShowLeftScroll] = useState(false);
+	const [showRightScroll, setShowRightScroll] = useState(false);
+	const [isScrollable, setIsScrollable] = useState(false);
+	const checkScroll = () => {
+		if (scrollContainerRef.current) {
+			const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;
+			setShowLeftScroll(scrollLeft > 0);
+			setShowRightScroll(Math.ceil(scrollLeft + clientWidth) < scrollWidth);
+			setIsScrollable(scrollWidth > clientWidth);
+		}
+	};
+	useEffect(() => {
+		checkScroll();
+		window.addEventListener("resize", checkScroll);
+		let observer;
+		if (scrollContainerRef.current) {
+			observer = new ResizeObserver(checkScroll);
+			observer.observe(scrollContainerRef.current);
+			if (scrollContainerRef.current.firstElementChild) observer.observe(scrollContainerRef.current.firstElementChild);
+		}
+		return () => {
+			window.removeEventListener("resize", checkScroll);
+			observer?.disconnect();
+		};
+	}, [children]);
+	const scroll = (direction) => {
+		if (scrollContainerRef.current) {
+			const container = scrollContainerRef.current;
+			const scrollAmount = Math.max(container.clientWidth / 2, 200);
+			const targetScroll = container.scrollLeft + (direction === "left" ? -scrollAmount : scrollAmount);
+			container.scrollTo({
+				left: targetScroll,
+				behavior: "smooth"
+			});
+		}
+	};
+	const contextValue = useMemo(() => ({ variant }), [variant]);
+	return /* @__PURE__ */ jsx(TabsContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsxs(TabsPrimitive.Root, {
+			value,
+			onValueChange,
+			className: cls("relative flex flex-row items-center min-w-0 w-full", className),
+			children: [
+				isScrollable && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: !showLeftScroll,
+					"aria-label": "Scroll tabs left",
+					onClick: () => scroll("left"),
+					className: cls("absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showLeftScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-hover", "bg-surface-card border shadow-sm", "border-hairline"),
+					children: /* @__PURE__ */ jsx(ChevronLeftIcon, { size: iconSize.smallest })
+				}),
+				/* @__PURE__ */ jsx("div", {
+					ref: scrollContainerRef,
+					className: "flex-1 overflow-x-auto no-scrollbar min-w-0",
+					onScroll: checkScroll,
+					style: {
+						scrollbarWidth: "none",
+						msOverflowStyle: "none"
+					},
+					children: /* @__PURE__ */ jsx(TabsPrimitive.List, {
+						className: cls(variant === "standard" && "inline-flex h-9 items-center justify-start rounded-md bg-surface-field p-1 text-surface-600 dark:text-surface-400 gap-2", variant === "boxy" && "flex items-end h-full", variant === "pill" && "flex items-center gap-0.5", innerClassName),
+						children
+					})
+				}),
+				isScrollable && /* @__PURE__ */ jsx("button", {
+					type: "button",
+					disabled: !showRightScroll,
+					"aria-label": "Scroll tabs right",
+					onClick: () => scroll("right"),
+					className: cls("absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400", !showRightScroll ? "pointer-events-none opacity-0" : "text-surface-600 dark:text-surface-400 hover:bg-surface-hover", "bg-surface-card border shadow-sm", "border-hairline"),
+					children: /* @__PURE__ */ jsx(ChevronRightIcon, { size: iconSize.smallest })
+				})
+			]
+		})
+	});
+}
+function Tab({ value, className, innerClassName, children, disabled }) {
+	const { variant } = useContext(TabsContext);
+	return /* @__PURE__ */ jsx(TabsPrimitive.Trigger, {
+		value,
+		disabled,
+		className: cls("inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all", "focus-visible:outline-none focus-visible:ring-surface-400", "disabled:pointer-events-none disabled:opacity-50", variant === "standard" && "rounded-md px-3 py-1 data-[state=active]:bg-surface-lifted data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:text-surface-50", variant === "boxy" && cls("flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 cursor-pointer text-xs font-medium transition-colors group relative box-border", "rounded-t-lg -mb-px border border-transparent border-b-0", "data-[state=active]:bg-surface-card data-[state=active]:border-hairline", "data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark", "text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover"), variant === "pill" && cls("px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors", "data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-primary", "text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark"), className, variant === "standard" && innerClassName),
+		children
+	});
+}
+//#endregion
+export { Tab, Tabs };
+
+//# sourceMappingURL=Tabs.es.js.map

package/dist/components/Tabs.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.es.js","names":[],"sources":["../../src/components/Tabs.tsx"],"sourcesContent":["\nimport React, { createContext, useContext, useRef, useState, useEffect, useMemo } from \"react\";\nimport * as TabsPrimitive from \"@radix-ui/react-tabs\";\nimport { cls } from \"../util\";\nimport { defaultBorderMixin } from \"../styles\";\n\nexport type TabVariant = \"standard\" | \"boxy\" | \"pill\";\n\nconst TabsContext = createContext<{ variant: TabVariant }>({ variant: \"standard\" });\nimport { IconButton } from \"./IconButton\";\nimport { ChevronLeftIcon, ChevronRightIcon } from \"lucide-react\";\nimport { iconSize } from \"../icons/Icon\";\n\nexport type TabsProps = {\n    value: string,\n    children: React.ReactNode,\n    innerClassName?: string,\n    className?: string,\n    variant?: TabVariant,\n    onValueChange: (value: string) => void\n};\n\nexport function Tabs({\n    value,\n    onValueChange,\n    className,\n    innerClassName,\n    variant = \"standard\",\n    children\n}: TabsProps) {\n    const scrollContainerRef = useRef<HTMLDivElement>(null);\n    const [showLeftScroll, setShowLeftScroll] = useState(false);\n    const [showRightScroll, setShowRightScroll] = useState(false);\n    const [isScrollable, setIsScrollable] = useState(false);\n\n    const checkScroll = () => {\n        if (scrollContainerRef.current) {\n            const { scrollLeft, scrollWidth, clientWidth } = scrollContainerRef.current;\n            setShowLeftScroll(scrollLeft > 0);\n            setShowRightScroll(Math.ceil(scrollLeft + clientWidth) < scrollWidth);\n            setIsScrollable(scrollWidth > clientWidth);\n        }\n    };\n\n    useEffect(() => {\n        checkScroll();\n        window.addEventListener(\"resize\", checkScroll);\n\n        let observer: ResizeObserver;\n        if (scrollContainerRef.current) {\n            observer = new ResizeObserver(checkScroll);\n            observer.observe(scrollContainerRef.current);\n            if (scrollContainerRef.current.firstElementChild) {\n                observer.observe(scrollContainerRef.current.firstElementChild);\n            }\n        }\n\n        return () => {\n            window.removeEventListener(\"resize\", checkScroll);\n            observer?.disconnect();\n        };\n    }, [children]);\n\n    const scroll = (direction: \"left\" | \"right\") => {\n        if (scrollContainerRef.current) {\n            const container = scrollContainerRef.current;\n            const scrollAmount = Math.max(container.clientWidth / 2, 200);\n            const targetScroll = container.scrollLeft + (direction === \"left\" ? -scrollAmount : scrollAmount);\n\n            container.scrollTo({\n                left: targetScroll,\n                behavior: \"smooth\"\n            });\n            // checkScroll will be called by onScroll event\n        }\n    };\n\n    const contextValue = useMemo(() => ({ variant }), [variant]);\n\n    return <TabsContext.Provider value={contextValue}>\n        <TabsPrimitive.Root\n            value={value}\n            onValueChange={onValueChange}\n            className={cls(\"relative flex flex-row items-center min-w-0 w-full\", className)}\n        >\n            {isScrollable && (\n                <button\n                    type=\"button\"\n                    disabled={!showLeftScroll}\n                    aria-label=\"Scroll tabs left\"\n                    onClick={() => scroll(\"left\")}\n                    className={cls(\n                        \"absolute left-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6\",\n                        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400\",\n                        !showLeftScroll ? \"pointer-events-none opacity-0\" : \"text-surface-600 dark:text-surface-400 hover:bg-surface-hover\",\n                        \"bg-surface-card border shadow-sm\", defaultBorderMixin\n                    )}\n                >\n                    <ChevronLeftIcon size={iconSize.smallest}/>\n                </button>\n            )}\n            <div\n                ref={scrollContainerRef}\n                className=\"flex-1 overflow-x-auto no-scrollbar min-w-0\"\n                onScroll={checkScroll}\n                style={{ scrollbarWidth: \"none\",\nmsOverflowStyle: \"none\" }}\n            >\n                <TabsPrimitive.List className={cls(\n                    // A segmented track is a region, not an object: an inset fill and no border.\n                    variant === \"standard\" && \"inline-flex h-9 items-center justify-start rounded-md bg-surface-field p-1 text-surface-600 dark:text-surface-400 gap-2\",\n                    // Folder tabs sit on the strip's bottom edge, so the list aligns\n                    // them to the end; the active tab overlaps that edge by 1px.\n                    variant === \"boxy\" && \"flex items-end h-full\",\n                    variant === \"pill\" && \"flex items-center gap-0.5\",\n                    innerClassName)\n                }>\n                    {children}\n                </TabsPrimitive.List>\n            </div>\n            {isScrollable && (\n                <button\n                    type=\"button\"\n                    disabled={!showRightScroll}\n                    aria-label=\"Scroll tabs right\"\n                    onClick={() => scroll(\"right\")}\n                    className={cls(\n                        \"absolute right-0 top-1/2 -translate-y-1/2 z-10 flex items-center justify-center rounded-md transition-all h-8 w-6\",\n                        \"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-surface-400\",\n                        !showRightScroll ? \"pointer-events-none opacity-0\" : \"text-surface-600 dark:text-surface-400 hover:bg-surface-hover\",\n                        \"bg-surface-card border shadow-sm\", defaultBorderMixin\n                    )}\n                >\n                    <ChevronRightIcon size={iconSize.smallest}/>\n                </button>\n            )}\n        </TabsPrimitive.Root>\n    </TabsContext.Provider>;\n}\n\nexport type TabProps = {\n    value: string,\n    className?: string,\n    innerClassName?: string,\n    children: React.ReactNode,\n    disabled?: boolean\n};\n\nexport function Tab({\n    value,\n    className,\n    innerClassName,\n    children,\n    disabled\n}: TabProps) {\n    const { variant } = useContext(TabsContext);\n\n    return (\n        <TabsPrimitive.Trigger\n            value={value}\n            disabled={disabled}\n            className={cls(\n                \"inline-flex items-center justify-center whitespace-nowrap text-sm font-medium transition-all\",\n                // Colour only. The width and the inset come from the global rule:\n                // the tab list scrolls horizontally, so a ring 2px out — with a\n                // further 2px of offset — was clipped by the scrollport on the\n                // first and last tab. `ring-offset-white` went with it; with an\n                // inset ring there is no offset for it to colour.\n                \"focus-visible:outline-none focus-visible:ring-surface-400\",\n                \"disabled:pointer-events-none disabled:opacity-50\",\n                variant === \"standard\" && \"rounded-md px-3 py-1 data-[state=active]:bg-surface-lifted data-[state=active]:text-surface-900 data-[state=active]:shadow-sm dark:data-[state=active]:text-surface-50\",\n                // A folder tab. The active one is cut from the same surface as the\n                // panel it opens and sits over the strip's hairline (`-mb-px`), so\n                // it reads as CONNECTED to what it shows rather than underlined,\n                // and the primary is not spent on it. The vertical dividers and\n                // the blue underline this variant used to draw were the boxiest\n                // thing on the record view; the reference separates tabs with\n                // nothing but their own rounded tops.\n                variant === \"boxy\" && cls(\n                    \"flex-shrink-0 flex items-center gap-1.5 px-3.5 h-9 cursor-pointer text-xs font-medium transition-colors group relative box-border\",\n                    \"rounded-t-lg -mb-px border border-transparent border-b-0\",\n                    \"data-[state=active]:bg-surface-card data-[state=active]:border-hairline\",\n                    \"data-[state=active]:text-text-primary dark:data-[state=active]:text-text-primary-dark\",\n                    \"text-text-secondary dark:text-text-secondary-dark hover:bg-surface-hover\"\n                ),\n                variant === \"pill\" && cls(\n                    \"px-2 py-0.5 rounded-md text-[10px] font-medium transition-colors\",\n                    \"data-[state=active]:bg-primary/10 data-[state=active]:text-primary dark:data-[state=active]:bg-primary/20 dark:data-[state=active]:text-primary\",\n                    \"text-text-disabled dark:text-text-disabled-dark hover:text-text-secondary dark:hover:text-text-secondary-dark\"\n                ),\n                className,\n                variant === \"standard\" && innerClassName\n            )}\n        >\n            {children}\n        </TabsPrimitive.Trigger>\n    );\n}\n"],"mappings":"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"}

package/dist/components/TextField.d.ts

@@ -20,10 +20,6 @@ export type TextFieldProps<T extends string | number> = {
     inputClassName?: string;
     inputStyle?: React.CSSProperties;
     inputRef?: React.ForwardedRef<any>;
-    /**
-     * Maximum number of rows to display.
-     */
-    maxRows?: number | string;
     /**
      * Minimum number of rows to display.
      * @default 1
@@ -50,10 +46,6 @@ export declare const TextField: React.ForwardRefExoticComponent<{
     inputClassName?: string;
     inputStyle?: React.CSSProperties;
     inputRef?: React.ForwardedRef<any>;
-    /**
-     * Maximum number of rows to display.
-     */
-    maxRows?: number | string;
     /**
      * Minimum number of rows to display.
      * @default 1

package/dist/components/TextField.es.js

@@ -0,0 +1,111 @@
+"use client";
+import { fieldBackgroundDisabledMixin, fieldBackgroundHoverMixin, fieldBackgroundInvisibleMixin, fieldBackgroundMixin, focusedInvisibleMixin } from "../styles.es.js";
+import { cls } from "../util/cls.es.js";
+import { InputLabel } from "./InputLabel.es.js";
+import React, { forwardRef, useEffect, useId, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/components/TextField.tsx
+var TextField = forwardRef(({ value, onChange, onFocus, onBlur, label, type = "text", multiline = false, invisible, minRows, disabled, error, endAdornment, autoFocus, placeholder, size = "large", className, style, inputClassName, inputStyle, inputRef: inputRefProp, ...inputProps }, ref) => {
+	const fallbackRef = useRef(null);
+	const inputRef = inputRefProp ?? fallbackRef;
+	const autoId = useId();
+	const inputId = inputProps.id ?? autoId;
+	const labelId = `${inputId}-label`;
+	const [focused, setFocused] = React.useState(false);
+	const hasValue = value !== void 0 && value !== null && value !== "";
+	const handleFocus = (event) => {
+		setFocused(true);
+		onFocus?.(event);
+	};
+	const handleBlur = (event) => {
+		setFocused(false);
+		onBlur?.(event);
+	};
+	useEffect(() => {
+		const element = inputRef && "current" in inputRef ? inputRef.current : null;
+		if (element && document.activeElement === element) setFocused(true);
+	}, []);
+	const handleWheel = (event) => {
+		if (type === "number") event.currentTarget.blur();
+		inputProps.onWheel?.(event);
+	};
+	const input = multiline ? /* @__PURE__ */ jsx("textarea", {
+		...inputProps,
+		ref: inputRef,
+		id: inputId,
+		"aria-labelledby": label ? labelId : inputProps["aria-labelledby"],
+		"aria-invalid": error || void 0,
+		"aria-disabled": disabled || void 0,
+		disabled,
+		placeholder: focused || hasValue || !label ? placeholder : void 0,
+		autoFocus,
+		rows: typeof minRows === "string" ? parseInt(minRows) : minRows ?? 3,
+		value: value ?? "",
+		onChange,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		style: inputStyle,
+		className: cls(invisible ? focusedInvisibleMixin : "", "rounded-lg resize-none w-full outline-none text-sm bg-transparent min-h-[64px] px-3", label ? "pt-8 pb-2" : "py-2", disabled && "outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500", inputClassName)
+	}) : /* @__PURE__ */ jsx("input", {
+		...inputProps,
+		ref: inputRef,
+		id: inputId,
+		"aria-labelledby": label ? labelId : inputProps["aria-labelledby"],
+		"aria-invalid": error || void 0,
+		"aria-disabled": disabled || void 0,
+		disabled,
+		style: inputStyle,
+		className: cls("w-full outline-none bg-transparent leading-normal px-3 text-sm", "rounded-lg", invisible ? focusedInvisibleMixin : "", {
+			"min-h-[28px]": size === "smallest",
+			"min-h-[32px]": size === "small",
+			"min-h-[40px]": size === "medium",
+			"min-h-[48px]": size === "large"
+		}, label ? {
+			smallest: "pt-4 pb-1",
+			small: "pt-5 pb-1",
+			medium: "pt-6 pb-2",
+			large: "pt-8 pb-2"
+		}[size] : size === "smallest" ? "py-0.5" : size === "small" ? "py-1" : "py-2", endAdornment ? "pr-12" : "pr-3", disabled && "outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white", inputClassName),
+		placeholder: focused || hasValue || !label ? placeholder : void 0,
+		autoFocus,
+		onFocus: handleFocus,
+		onBlur: handleBlur,
+		onWheel: handleWheel,
+		type,
+		value: type === "number" && Number.isNaN(value) ? "" : value ?? "",
+		onChange
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		ref,
+		className: cls("rounded-lg relative max-w-full", invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin, disabled ? fieldBackgroundDisabledMixin : invisible ? "" : fieldBackgroundHoverMixin, error ? "border border-red-500 dark:border-red-600" : "", {
+			"min-h-[28px]": size === "smallest",
+			"min-h-[32px]": size === "small",
+			"min-h-[40px]": size === "medium",
+			"min-h-[48px]": size === "large"
+		}, className),
+		style,
+		children: [
+			label && /* @__PURE__ */ jsx(InputLabel, {
+				id: labelId,
+				htmlFor: inputId,
+				className: cls("pointer-events-none absolute", size === "large" ? "top-1" : "top-[-1px]", !error ? focused ? "text-primary dark:text-primary" : "text-text-secondary dark:text-text-secondary-dark" : "text-red-500 dark:text-red-600", disabled ? "text-text-disabled dark:text-text-disabled-dark" : ""),
+				shrink: hasValue || focused,
+				children: label
+			}),
+			input,
+			endAdornment && /* @__PURE__ */ jsx("div", {
+				className: cls("flex flex-row justify-center items-center absolute h-full right-0 top-0", {
+					"mr-4": size === "large",
+					"mr-3": size === "medium",
+					"mr-2": size === "small" || size === "smallest"
+				}),
+				children: endAdornment
+			})
+		]
+	});
+});
+TextField.displayName = "TextField";
+//#endregion
+export { TextField };
+
+//# sourceMappingURL=TextField.es.js.map

package/dist/components/TextField.es.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.es.js","names":[],"sources":["../../src/components/TextField.tsx"],"sourcesContent":["\"use client\";\nimport React, { ForwardedRef, forwardRef, useEffect, useId, useRef } from \"react\";\n\nimport {\n    fieldBackgroundDisabledMixin,\n    fieldBackgroundHoverMixin,\n    fieldBackgroundInvisibleMixin,\n    fieldBackgroundMixin,\n    focusedInvisibleMixin\n} from \"../styles\";\nimport { InputLabel } from \"./InputLabel\";\nimport { cls } from \"../util\";\n\nexport type InputType =\n    | \"text\"\n    | \"number\"\n    | \"phone\"\n    | \"email\"\n    | \"password\"\n    | \"search\"\n    | \"url\"\n    | \"date\"\n    | \"time\"\n    | \"datetime-local\"\n    | \"month\"\n    | \"week\"\n    | \"color\";\n\nexport type TextFieldProps<T extends string | number> = {\n    type?: InputType;\n    value?: T;\n    onChange?: (event: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;\n    onFocus?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n    onBlur?: React.FocusEventHandler<HTMLInputElement | HTMLTextAreaElement>;\n    label?: React.ReactNode;\n    multiline?: boolean;\n    disabled?: boolean;\n    invisible?: boolean;\n    error?: boolean;\n    endAdornment?: React.ReactNode;\n    autoFocus?: boolean;\n    placeholder?: string;\n    size?: \"smallest\" | \"small\" | \"medium\" | \"large\";\n    className?: string;\n    style?: React.CSSProperties;\n    inputClassName?: string;\n    inputStyle?: React.CSSProperties;\n    inputRef?: React.ForwardedRef<any>;\n    /**\n     * Minimum number of rows to display.\n     * @default 1\n     */\n    minRows?: number | string;\n} & Omit<React.InputHTMLAttributes<HTMLInputElement>, \"size\" | \"value\" | \"onFocus\" | \"onBlur\">;\n\nexport const TextField = forwardRef<HTMLDivElement, TextFieldProps<string | number>>(\n    <T extends string | number>(\n        {\n            value,\n            onChange,\n            onFocus,\n            onBlur,\n            label,\n            type = \"text\",\n            multiline = false,\n            invisible,\n            minRows,\n            disabled,\n            error,\n            endAdornment,\n            autoFocus,\n            placeholder,\n            size = \"large\",\n            className,\n            style,\n            inputClassName,\n            inputStyle,\n            inputRef: inputRefProp,\n            ...inputProps\n        }: TextFieldProps<T>,\n        ref: ForwardedRef<HTMLDivElement>\n    ) => {\n\n        const fallbackRef = useRef(null);\n        const inputRef = inputRefProp ?? fallbackRef;\n        const autoId = useId();\n        const inputId = inputProps.id ?? autoId;\n        const labelId = `${inputId}-label`;\n\n        const [focused, setFocused] = React.useState(false);\n        const hasValue = value !== undefined && value !== null && value !== \"\";\n\n        // The field tracks focus for its label, and the caller still hears about\n        // it: `DebouncedTextField` flushes on blur, and a form marks a field\n        // touched on blur.\n        const handleFocus = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n            setFocused(true);\n            onFocus?.(event);\n        };\n        const handleBlur = (event: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => {\n            setFocused(false);\n            onBlur?.(event);\n        };\n\n        useEffect(() => {\n            const element = inputRef && \"current\" in inputRef ? inputRef.current : null;\n            if (element && document.activeElement === element) {\n                setFocused(true);\n            }\n        }, []);\n\n        // A focused number input steps its value on wheel, so scrolling the page\n        // past one edited it. It gives up the focus instead. A React handler\n        // rather than a listener on `inputRef.current`: a callback ref has no\n        // `current`, and reading one crashed the render.\n        const handleWheel = (event: React.WheelEvent<HTMLInputElement>) => {\n            if (type === \"number\") event.currentTarget.blur();\n            inputProps.onWheel?.(event);\n        };\n\n        const input = multiline ? (\n            <textarea\n                {...(inputProps as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}\n                ref={inputRef}\n                id={inputId}\n                // Falls back to the caller's own value rather than to `undefined`:\n                // this sits after the spread, so hardcoding `undefined` silently\n                // erased an `aria-labelledby` a consumer had passed, and the\n                // unlabelled field it was meant to name stayed unnamed.\n                aria-labelledby={label ? labelId : inputProps[\"aria-labelledby\"]}\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                disabled={disabled}\n                placeholder={focused || hasValue || !label ? placeholder : undefined}\n                autoFocus={autoFocus}\n                rows={typeof minRows === \"string\" ? parseInt(minRows) : (minRows ?? 3)}\n                value={value ?? \"\"}\n                onChange={onChange}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                style={inputStyle}\n                className={cls(\n                    invisible ? focusedInvisibleMixin : \"\",\n                    \"rounded-lg resize-none w-full outline-none text-sm bg-transparent min-h-[64px] px-3\",\n                    label ? \"pt-8 pb-2\" : \"py-2\",\n                    disabled && \"outline-none opacity-50 text-surface-accent-600 dark:text-surface-accent-500\",\n                    inputClassName\n                )}\n            />\n        ) : (\n            <input\n                {...inputProps}\n                ref={inputRef}\n                id={inputId}\n                // See the textarea branch: preserve a caller-supplied\n                // `aria-labelledby` instead of overwriting it with `undefined`.\n                aria-labelledby={label ? labelId : inputProps[\"aria-labelledby\"]}\n                aria-invalid={error || undefined}\n                aria-disabled={disabled || undefined}\n                disabled={disabled}\n                style={inputStyle}\n                className={cls(\n                    \"w-full outline-none bg-transparent leading-normal px-3 text-sm\",\n                    \"rounded-lg\",\n                    invisible ? focusedInvisibleMixin : \"\",\n                    // No fill, hover or disabled tint on the input itself: the\n                    // wrapper carries all three. Both used to carry the hover\n                    // fill, so a hovered field painted the alpha twice — once on\n                    // the box and once on the input a pixel inside its border,\n                    // at the same radius — and read as a box inside a box.\n                    {\n                        \"min-h-[28px]\": size === \"smallest\",\n                        \"min-h-[32px]\": size === \"small\",\n                        \"min-h-[40px]\": size === \"medium\",\n                        \"min-h-[48px]\": size === \"large\"\n                    },\n                    /* A shrunk label occupies roughly the first 16px of the\n                       box (`top-[-1px]`, translated down 2px, ~15px tall at\n                       scale-75). `pt-4` put the value's first line at exactly\n                       16px, so label and content shared a row: a labelled\n                       `small` field with a placeholder rendered \"Name\" on top\n                       of \"e.g. Analytics Pipeline\". `large` was never affected\n                       — it reserves `pt-8`. */\n                    label\n                        // Labelled fields sit exactly 16px above the unlabelled\n                        // scale (44/48/56/64 against 28/32/40/48). smallest,\n                        // small and medium all used to share `pt-5 pb-1.5`, so\n                        // they rendered at an identical 50px and `size` looked\n                        // inert whenever a label was present.\n                        ? { smallest: \"pt-4 pb-1\", small: \"pt-5 pb-1\", medium: \"pt-6 pb-2\", large: \"pt-8 pb-2\" }[size]\n                        : size === \"smallest\"\n                            ? \"py-0.5\"\n                            : size === \"small\"\n                                ? \"py-1\"\n                                : \"py-2\",\n                    endAdornment ? \"pr-12\" : \"pr-3\",\n                    disabled &&\n                    \"outline-none opacity-65 dark:opacity-60 text-surface-accent-800 dark:text-white\",\n                    inputClassName\n                )}\n                placeholder={focused || hasValue || !label ? placeholder : undefined}\n                autoFocus={autoFocus}\n                onFocus={handleFocus}\n                onBlur={handleBlur}\n                onWheel={handleWheel}\n                type={type}\n                value={type === \"number\" && Number.isNaN(value) ? \"\" : value ?? \"\"}\n                onChange={onChange}\n            />\n        );\n\n        return (\n            <div\n                ref={ref}\n                className={cls(\n                    \"rounded-lg relative max-w-full\",\n                    invisible ? fieldBackgroundInvisibleMixin : fieldBackgroundMixin,\n                    // An invisible field has no hover fill of its own: whatever frames it (a table cell) carries the hover.\n                disabled ? fieldBackgroundDisabledMixin : (invisible ? \"\" : fieldBackgroundHoverMixin),\n                    error ? \"border border-red-500 dark:border-red-600\" : \"\",\n                    {\n                        \"min-h-[28px]\": size === \"smallest\",\n                        \"min-h-[32px]\": size === \"small\",\n                        \"min-h-[40px]\": size === \"medium\",\n                        \"min-h-[48px]\": size === \"large\"\n                    },\n                    className\n                )}\n                style={style}\n            >\n                {label && (\n                    <InputLabel\n                        id={labelId}\n                        htmlFor={inputId}\n                        className={cls(\n                            \"pointer-events-none absolute\",\n                            size === \"large\" ? \"top-1\" : \"top-[-1px]\",\n                            !error\n                                ? focused\n                                    ? \"text-primary dark:text-primary\"\n                                    : \"text-text-secondary dark:text-text-secondary-dark\"\n                                : \"text-red-500 dark:text-red-600\",\n                            // A disabled field's LABEL is the one part that must\n                            // stay readable — it is what tells you which field\n                            // you cannot edit. `opacity-50` halved the alpha of\n                            // an already-muted #737373, landing near 2.2:1 over\n                            // the field fill; the label was effectively gone.\n                            //\n                            // The value below it keeps its own `opacity-50`,\n                            // which is the correct signal: the CONTENT is\n                            // inactive. Naming the field is not content.\n                            disabled ? \"text-text-disabled dark:text-text-disabled-dark\" : \"\"\n                        )}\n                        shrink={hasValue || focused}\n                    >\n                        {label}\n                    </InputLabel>\n                )}\n\n                {input}\n\n                {endAdornment && (\n                    <div\n                        className={cls(\n                            \"flex flex-row justify-center items-center absolute h-full right-0 top-0\",\n                            {\n                                \"mr-4\": size === \"large\",\n                                \"mr-3\": size === \"medium\",\n                                \"mr-2\": size === \"small\" || size === \"smallest\"\n                            }\n                        )}\n                    >\n                        {endAdornment}\n                    </div>\n                )}\n            </div>\n        );\n    }\n);\n\nTextField.displayName = \"TextField\";\n"],"mappings":"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"}

package/dist/components/TextareaAutosize.es.js

@@ -0,0 +1,187 @@
+"use client";
+import { cls } from "../util/cls.es.js";
+import { debounce } from "../util/debounce.es.js";
+import * as React$1 from "react";
+import { useLayoutEffect } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import * as ReactDOM from "react-dom";
+//#region src/components/TextareaAutosize.tsx
+function getStyleValue(value) {
+	return parseInt(value, 10) || 0;
+}
+var styles = { shadow: {
+	visibility: "hidden",
+	position: "absolute",
+	overflow: "hidden",
+	height: 0,
+	top: 0,
+	left: 0,
+	transform: "translateZ(0)"
+} };
+function isEmpty(obj) {
+	return obj === void 0 || obj === null || Object.keys(obj).length === 0 || obj.outerHeightStyle === 0 && !obj.overflow;
+}
+var TextareaAutosize = React$1.forwardRef(function TextareaAutosize(props, ref) {
+	const { onChange, onScroll, onResize, maxRows, minRows = 1, style, value, onFocus, onBlur, sizeRef, ignoreBoxSizing, ...other } = props;
+	const { current: isControlled } = React$1.useRef(value != null);
+	const inputRef = React$1.useRef(null);
+	const handleRef = useForkRef(ref, inputRef);
+	const shadowRef = React$1.useRef(null);
+	const renders = React$1.useRef(0);
+	const [state, setState] = React$1.useState({ outerHeightStyle: 0 });
+	const getUpdatedState = React$1.useCallback(() => {
+		const input = inputRef.current;
+		if (typeof window === "undefined") return { outerHeightStyle: 0 };
+		const computedStyle = window.getComputedStyle(input);
+		if (computedStyle.width === "0px") return { outerHeightStyle: 0 };
+		const sizeReferenceElement = sizeRef?.current ?? shadowRef.current;
+		const inputShallow = shadowRef.current;
+		sizeReferenceElement.style.width = computedStyle.width;
+		inputShallow.value = input.value || props.placeholder || "x";
+		if (inputShallow.value.slice(-1) === "\n") inputShallow.value += " ";
+		const boxSizing = computedStyle.boxSizing;
+		const padding = getStyleValue(computedStyle.paddingBottom) + getStyleValue(computedStyle.paddingTop);
+		const border = getStyleValue(computedStyle.borderBottomWidth) + getStyleValue(computedStyle.borderTopWidth);
+		const minHeight = getStyleValue(computedStyle.minHeight);
+		const innerHeight = sizeReferenceElement.scrollHeight;
+		inputShallow.value = "x";
+		const singleRowHeight = sizeReferenceElement.scrollHeight;
+		let outerHeight = innerHeight;
+		if (minRows) outerHeight = Math.max(Number(minRows) * singleRowHeight, outerHeight);
+		if (maxRows) outerHeight = Math.min(Number(maxRows) * singleRowHeight, outerHeight);
+		outerHeight = Math.max(outerHeight, singleRowHeight, minHeight);
+		return {
+			outerHeightStyle: outerHeight + (!ignoreBoxSizing && boxSizing === "border-box" ? padding + border : 0),
+			overflow: Math.abs(outerHeight - innerHeight) <= 1
+		};
+	}, [
+		maxRows,
+		minRows,
+		props.placeholder
+	]);
+	const updateState = React$1.useCallback((prevState, newState) => {
+		const { outerHeightStyle, overflow } = newState;
+		if (renders.current < 20 && (outerHeightStyle > 0 && Math.abs((prevState.outerHeightStyle || 0) - outerHeightStyle) > 1 || prevState.overflow !== overflow)) {
+			renders.current += 1;
+			return {
+				overflow,
+				outerHeightStyle
+			};
+		}
+		if (process.env.NODE_ENV !== "production") {
+			if (renders.current === 20) console.error(["MUI: Too many re-renders. The layout is unstable.", "TextareaAutosize limits the number of renders to prevent an infinite loop."].join("\n"));
+		}
+		return prevState;
+	}, []);
+	const syncHeight = React$1.useCallback(() => {
+		const newState = getUpdatedState();
+		if (isEmpty(newState)) return;
+		if (onResize) onResize(newState);
+		setState((prevState) => {
+			return updateState(prevState, newState);
+		});
+	}, [
+		getUpdatedState,
+		onResize,
+		updateState
+	]);
+	const syncHeightWithFlushSync = React$1.useCallback(() => {
+		const newState = getUpdatedState();
+		if (isEmpty(newState)) return;
+		ReactDOM.flushSync(() => {
+			setState((prevState) => {
+				return updateState(prevState, newState);
+			});
+		});
+	}, [getUpdatedState, updateState]);
+	React$1.useEffect(() => {
+		const handleResize = debounce(() => {
+			renders.current = 0;
+			if (inputRef.current) syncHeightWithFlushSync();
+		});
+		let resizeObserver;
+		const input = inputRef.current;
+		const containerWindow = window;
+		if (typeof window === "undefined") return;
+		containerWindow.addEventListener("resize", handleResize);
+		if (typeof ResizeObserver !== "undefined") {
+			resizeObserver = new ResizeObserver(handleResize);
+			resizeObserver.observe(input);
+		}
+		return () => {
+			handleResize.clear();
+			containerWindow.removeEventListener("resize", handleResize);
+			if (resizeObserver) resizeObserver.disconnect();
+		};
+	}, [syncHeightWithFlushSync]);
+	const styleKey = style ? JSON.stringify(style) : "";
+	useLayoutEffect(() => {
+		syncHeight();
+	}, [
+		syncHeight,
+		value,
+		props.className,
+		props.shadowClassName,
+		styleKey,
+		sizeRef,
+		ignoreBoxSizing
+	]);
+	React$1.useEffect(() => {
+		renders.current = 0;
+	}, [value]);
+	const handleChange = (event) => {
+		renders.current = 0;
+		if (!isControlled) syncHeight();
+		if (onChange) onChange(event);
+	};
+	return /* @__PURE__ */ jsxs(React$1.Fragment, { children: [/* @__PURE__ */ jsx("textarea", {
+		value,
+		onChange: handleChange,
+		className: props.className,
+		ref: handleRef,
+		onFocus,
+		onBlur,
+		rows: minRows,
+		style: {
+			height: state.outerHeightStyle,
+			overflow: state.overflow ? "hidden" : void 0,
+			...style
+		},
+		onScroll,
+		...other
+	}), /* @__PURE__ */ jsx("textarea", {
+		"aria-hidden": true,
+		className: cls(props.className, props.shadowClassName),
+		readOnly: true,
+		ref: shadowRef,
+		tabIndex: -1,
+		style: {
+			padding: 0,
+			...styles.shadow,
+			...style
+		}
+	})] });
+});
+function useForkRef(...refs) {
+	/**
+	* This will create a new function if the refs passed to this hook change and are all defined.
+	* This means react will call the old forkRef with `null` and the new forkRef
+	* with the ref. Cleanup naturally emerges from this behavior.
+	*/
+	return React$1.useMemo(() => {
+		if (refs.every((ref) => ref == null)) return null;
+		return (instance) => {
+			refs.forEach((ref) => {
+				setRef(ref, instance);
+			});
+		};
+	}, refs);
+}
+function setRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+//#endregion
+export { TextareaAutosize };
+
+//# sourceMappingURL=TextareaAutosize.es.js.map