@soroush.tech/design-system 2.1.0 → 2.1.2-rc.0

package/dist/Tabs/Tabs.d.cts

@@ -1,3 +1,104 @@
-import { t as TabValue } from "../TabsContext-i57cha5W.cjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-C6uLwNRF.cjs";
-export { type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };
+import { nt as Theme, tt as TabsVariants } from "../index-MipJMh6w.cjs";
+import "../theme.cjs";
+import { TabScrollButtonProps } from "./TabScrollButton.cjs";
+import { t as TabValue } from "../TabsContext-DkPIvEhN.cjs";
+import { ComponentType, ReactNode, Ref } from "react";
+import { SpaceProps } from "@soroush.tech/styled-system";
+export type TabsVariant = keyof TabsVariants;
+export type TabsOrientation = 'horizontal' | 'vertical';
+/** What the row does when its tabs don't fit: scroll, list the rest in a menu, or nothing. */
+export type TabsOverflowBehavior = 'scroll' | 'menu' | 'none';
+/** When a scrolling row shows its scroll buttons. */
+export type TabsScrollButtons = 'auto' | 'always' | 'never';
+/** What `action` exposes. */
+export interface TabsActions {
+  /** Re-measures the selected tab for the indicator - after a font loads or a label changes. */
+  updateIndicator: () => void;
+  /** Re-reads whether the tabs overflow - for the scroll buttons, or which tabs go to the menu. */
+  updateOverflow: () => void;
+}
+export interface TabsProps extends SpaceProps<Theme> {
+  /** `Tab`s. */
+  children?: ReactNode;
+  /** The selected tab's value - `null` for none. Controlled with `onChange`. */
+  value?: TabValue | null;
+  /** The selected tab's value at first, when uncontrolled. */
+  defaultValue?: TabValue | null;
+  /** Fired with a tab's value when it is chosen. */
+  onChange?: (value: TabValue) => void;
+  /** Fired with a closable tab's value when its close button, a middle click or Delete closes it. Removing the tab, and picking the next selection, are the app's. */
+  onTabClose?: (value: TabValue) => void;
+  /**
+   * Names each closable tab's close button for assistive technology - and the one in the overflow
+   * menu - by its `closeLabel`, so it is a button a screen reader finds and presses by name, still
+   * out of the tab order. It is a sibling of the tab, not inside it, so a tablist of tabs and their
+   * close buttons is read as one. Without it, the button is the pointer's alone and Delete closes
+   * the focused tab. Default: `false`.
+   */
+  shouldAnnounceClose?: boolean;
+  /** `'nav'` makes it a navigation of links or buttons (`aria-current="page"`) rather than a `tablist`. Default: `'div'`. */
+  as?: 'div' | 'nav';
+  /** Default: `'horizontal'`. */
+  orientation?: TabsOrientation;
+  /** The look: an indicator under the selected tab, the selected tab boxed, or `'tonal'` - the tabs in a rounded container, the selected one a tinted pill. Default: `'underline'`, overridable via `theme.components.Tabs.defaultProps`. */
+  variant?: TabsVariant;
+  /** The indicator's or outline's color - resolves to `theme.palette[color]`. Default: `'primary'`. */
+  color?: keyof Theme['palette'];
+  /** The labels' color - resolves against `theme.text`. Default: `'primary'`. */
+  textColor?: keyof Theme['text'];
+  /** Density token - resolves against `theme.sizes`. Default: `'md'`. */
+  size?: keyof Theme['sizes'];
+  /** The tabs share the row's width equally. Default: `false`. */
+  fullWidth?: boolean;
+  /** The tabs sit in the middle of the row. Default: `false`. */
+  isCentered?: boolean;
+  /** Moving focus with the arrow keys selects as it goes. Default: `false` - Enter or Space selects. */
+  shouldSelectOnFocus?: boolean;
+  /** What the row does when its tabs don't fit: `'scroll'` - it scrolls, with scroll buttons; `'menu'` - it shows the tabs that fit whole and lists the rest in a menu. Default: `'none'`. */
+  overflowBehavior?: TabsOverflowBehavior;
+  /** With `overflowBehavior="menu"`: names the button that opens the menu of the tabs that don't fit ("More tabs"). */
+  overflowLabel?: string;
+  /** With `overflowBehavior="scroll"`: `'auto'` shows them while the tabs overflow, each only while tabs are out of view its way; `'always'` keeps both, disabled at an end; `'never'` hides them. Default: `'auto'`. */
+  scrollButtons?: TabsScrollButtons;
+  /** Show the scroll buttons on narrow screens too, where swiping does the job. Default: `false`. */
+  shouldShowScrollButtonsOnMobile?: boolean;
+  /** Show the list's scrollbar. Default: `false`. */
+  hasVisibleScrollbar?: boolean;
+  /**
+   * A line along the row's foot (a column's end side), under its own content too. In the
+   * enclosed look it runs round the selected tab. Default: `true`, but `false` in the boxed look.
+   */
+  hasDivider?: boolean;
+  /** The tab strip's ground - resolves against `theme.background`. */
+  bg?: keyof Theme['background'];
+  /**
+   * The selected tab's ground - resolves against `theme.background`. Give its `TabPanel` the same
+   * `bg` and the two read as one. Default: `'paper'` in the boxed look, and in the enclosed look
+   * without a divider; none otherwise.
+   */
+  selectedBg?: keyof Theme['background'];
+  /** Components in place of its own: `scrollButton` - a button that takes `TabScrollButton`'s props. */
+  slots?: {
+    scrollButton?: ComponentType<TabScrollButtonProps>;
+  };
+  /** Before the tabs - an icon, a button, any component. The arrow keys don't reach it. */
+  startContent?: ReactNode;
+  /** After the tabs - a toolbar, a "+" button, any component. The arrow keys don't reach it. */
+  endContent?: ReactNode;
+  /** Imperative handle - see `TabsActions`. */
+  action?: Ref<TabsActions>;
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  id?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A row of tabs. By default a `tablist`: one tab in the page's tab order, the
+ * arrow keys of its orientation moving between tabs, Enter or Space selecting (or moving
+ * focus selecting, with `shouldSelectOnFocus`). With `as="nav"`, the same look as a
+ * navigation, its current tab marked `aria-current="page"`. Content of the row's own sits
+ * before and after the tabs.
+ */
+export declare function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose, shouldAnnounceClose, as, orientation, variant: variantProp, color: colorProp, textColor, size: sizeProp, fullWidth, isCentered, shouldSelectOnFocus, overflowBehavior, overflowLabel, scrollButtons, shouldShowScrollButtonsOnMobile, hasVisibleScrollbar, hasDivider: hasDividerProp, bg, selectedBg: selectedBgProp, slots, startContent, endContent, action, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledBy, id, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TabsProps>): import("react").JSX.Element;
+export type { TabValue };

package/dist/Tabs/Tabs.d.mts

@@ -1,3 +1,3 @@
-import { t as TabValue } from "../TabsContext-D5E7s9i5.mjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-BbWQZ2Wj.mjs";
+import { t as TabValue } from "../TabsContext-cm-4w5HV.mjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "../index-CgZujUBc.mjs";
 export { type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs/Tabs.mjs

@@ -1 +1 @@
-export { t as Tabs } from "../Tabs-CE8iDr0D.mjs";
+export { t as Tabs } from "../Tabs-DPCVKt9p.mjs";

package/dist/{Tabs-CE8iDr0D.mjs → Tabs-DPCVKt9p.mjs}

@@ -1,16 +1,16 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-B6LFWZ98.mjs";
 import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
-import { t as Icon } from "./Icon-XpXU-SuF.mjs";
+import { t as Icon } from "./Icon-gVHlFgdH.mjs";
+import { n as Tooltip } from "./Tooltip-CqGB8Pgm.mjs";
 import { View } from "./View.mjs";
+import { t as Menu } from "./Menu-31GXflmP.mjs";
+import { t as MenuItem } from "./MenuItem-DfS3Q2Ha.mjs";
 import { t as isRtl } from "./isRtl-DN-EdUlg.mjs";
-import { n as Tooltip } from "./Tooltip-Cx4ez9vY.mjs";
-import { t as MenuItem } from "./MenuItem-hJeCsQZX.mjs";
-import { t as Menu } from "./Menu-Cv887y7O.mjs";
-import { a as TabsContext, i as TabIndexContext, n as getDividerShadow, r as getEnclosedPieceStyle, t as getDividerColor } from "./dividerLine-BC8E38Ed.mjs";
-import "./tonalRadius-CvXRueqT.mjs";
 import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
-import { n as getPanelId, r as getTabId, t as surfaceSystem } from "./surfaceSystem-4XDqbvf4.mjs";
+import { a as TabsContext, i as TabIndexContext, n as getDividerShadow, r as getEnclosedPieceStyle, t as getDividerColor } from "./dividerLine-CjHOunP8.mjs";
+import { n as getPanelId, r as getTabId, t as surfaceSystem } from "./surfaceSystem-Bsd7LqgB.mjs";
+import "./tonalRadius-CvXRueqT.mjs";
 import { Children, createContext, isValidElement, useCallback, useContext, useEffect, useId, useImperativeHandle, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 // src/Tabs/utils/fitTabs.ts
@@ -345,6 +345,10 @@ const OverflowClose = styled("button", {
 		"&:hover": { backgroundColor: `${main}1F` }
 	};
 });
+const overshoot = (start, end, viewStart, viewEnd) => {
+	if (start < viewStart) return start - viewStart;
+	return Math.max(end - viewEnd, 0);
+};
 const readTabs = (children) => Children.toArray(children).flatMap((child, index) => {
 	if (!isValidElement(child)) return [];
 	const { value, disabled, label, icon, closeLabel, color, size } = child.props;
@@ -504,12 +508,18 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 	}), [updateIndicator, updateOverflow]);
 	useEffect(() => {
 		if (!isScrolling) return;
-		const selected = listRef.current.querySelector("[data-tab-selected]");
-		if (typeof selected?.scrollIntoView === "function") selected.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	}, [isScrolling, selectedValue]);
+		const row = listRef.current;
+		const selected = row.querySelector("[data-tab-selected]");
+		if (!selected) return;
+		const rowBox = row.getBoundingClientRect();
+		const tabBox = selected.getBoundingClientRect();
+		if (isVertical) row.scrollTop += overshoot(tabBox.top, tabBox.bottom, rowBox.top, rowBox.bottom);
+		else row.scrollLeft += overshoot(tabBox.left, tabBox.right, rowBox.left, rowBox.right);
+	}, [
+		isScrolling,
+		isVertical,
+		selectedValue
+	]);
 	const hasScrollButtons = isScrolling && (scrollButtons === "always" || scrollButtons === "auto" && scroll.isOverflowing);
 	const ScrollButton = slots?.scrollButton ?? TabScrollButton;
 	const renderScrollButton = (direction) => {

package/dist/{Tabs-BTa2myRe.cjs → Tabs-DipA7I2c.cjs}

@@ -1,16 +1,16 @@
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
 const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
-const require_Icon = require("./Icon-C5Iz5ekp.cjs");
+const require_Icon = require("./Icon-C4QMiNHJ.cjs");
+const require_Tooltip = require("./Tooltip-Bzt4mirM.cjs");
 const require_View = require("./View.cjs");
+const require_Menu = require("./Menu-CTqplttU.cjs");
+const require_MenuItem = require("./MenuItem-Be4xFEww.cjs");
 const require_isRtl = require("./isRtl-Dl6QQWib.cjs");
-const require_Tooltip = require("./Tooltip-rkGm1HnP.cjs");
-const require_MenuItem = require("./MenuItem-BWm8DC-S.cjs");
-const require_Menu = require("./Menu-DOOK_gM9.cjs");
-const require_dividerLine = require("./dividerLine-DFuLn1zU.cjs");
-require("./tonalRadius-CU9GHoHx.cjs");
 const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
-const require_surfaceSystem = require("./surfaceSystem-DI6bqK5F.cjs");
+const require_dividerLine = require("./dividerLine-BL7qyMS7.cjs");
+const require_surfaceSystem = require("./surfaceSystem-BeGFjViA.cjs");
+require("./tonalRadius-CU9GHoHx.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
@@ -346,6 +346,10 @@ const OverflowClose = require_src.styled("button", {
 		"&:hover": { backgroundColor: `${main}1F` }
 	};
 });
+const overshoot = (start, end, viewStart, viewEnd) => {
+	if (start < viewStart) return start - viewStart;
+	return Math.max(end - viewEnd, 0);
+};
 const readTabs = (children) => react.Children.toArray(children).flatMap((child, index) => {
 	if (!(0, react.isValidElement)(child)) return [];
 	const { value, disabled, label, icon, closeLabel, color, size } = child.props;
@@ -505,12 +509,18 @@ function Tabs({ children, value: valueProp, defaultValue, onChange, onTabClose,
 	}), [updateIndicator, updateOverflow]);
 	(0, react.useEffect)(() => {
 		if (!isScrolling) return;
-		const selected = listRef.current.querySelector("[data-tab-selected]");
-		if (typeof selected?.scrollIntoView === "function") selected.scrollIntoView({
-			block: "nearest",
-			inline: "nearest"
-		});
-	}, [isScrolling, selectedValue]);
+		const row = listRef.current;
+		const selected = row.querySelector("[data-tab-selected]");
+		if (!selected) return;
+		const rowBox = row.getBoundingClientRect();
+		const tabBox = selected.getBoundingClientRect();
+		if (isVertical) row.scrollTop += overshoot(tabBox.top, tabBox.bottom, rowBox.top, rowBox.bottom);
+		else row.scrollLeft += overshoot(tabBox.left, tabBox.right, rowBox.left, rowBox.right);
+	}, [
+		isScrolling,
+		isVertical,
+		selectedValue
+	]);
 	const hasScrollButtons = isScrolling && (scrollButtons === "always" || scrollButtons === "auto" && scroll.isOverflowing);
 	const ScrollButton = slots?.scrollButton ?? require_Tabs_TabScrollButton.TabScrollButton;
 	const renderScrollButton = (direction) => {

package/dist/Tabs.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_Tabs_Tab = require("./Tabs/Tab.cjs");
 const require_Tabs_TabContext = require("./Tabs/TabContext.cjs");
 const require_Tabs_TabScrollButton = require("./Tabs/TabScrollButton.cjs");
-const require_Tabs = require("./Tabs-BTa2myRe.cjs");
+const require_Tabs = require("./Tabs-DipA7I2c.cjs");
 const require_Tabs_TabList = require("./Tabs/TabList.cjs");
 const require_Tabs_TabPanel = require("./Tabs/TabPanel.cjs");
 exports.Tab = require_Tabs_Tab.Tab;

package/dist/Tabs.d.cts

@@ -1,8 +1,8 @@
-import { t as TabValue } from "./TabsContext-i57cha5W.cjs";
+import { t as TabValue } from "./TabsContext-DkPIvEhN.cjs";
 import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.cjs";
 import { TabContext, TabContextProps } from "./Tabs/TabContext.cjs";
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-qgFJF8n2.cjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-C6uLwNRF.cjs";
 import { TabList, TabListProps } from "./Tabs/TabList.cjs";
 import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.cjs";
+import { TabScrollButton, TabScrollButtonProps, TabScrollDirection } from "./Tabs/TabScrollButton.cjs";
+import { Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant } from "./Tabs/Tabs.cjs";
 export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.d.mts

@@ -1,8 +1,8 @@
-import { t as TabValue } from "./TabsContext-D5E7s9i5.mjs";
+import { t as TabValue } from "./TabsContext-cm-4w5HV.mjs";
 import { Tab, TabIconPosition, TabProps } from "./Tabs/Tab.mjs";
 import { TabContext, TabContextProps } from "./Tabs/TabContext.mjs";
-import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-DXUVsHux.mjs";
-import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-BbWQZ2Wj.mjs";
 import { TabList, TabListProps } from "./Tabs/TabList.mjs";
 import { TabPanel, TabPanelProps } from "./Tabs/TabPanel.mjs";
+import { n as TabScrollButtonProps, r as TabScrollDirection, t as TabScrollButton } from "./index-B4rMxnAI.mjs";
+import { a as TabsProps, i as TabsOverflowBehavior, n as TabsActions, o as TabsScrollButtons, r as TabsOrientation, s as TabsVariant, t as Tabs } from "./index-CgZujUBc.mjs";
 export { Tab, TabContext, TabContextProps, TabIconPosition, TabList, TabListProps, TabPanel, TabPanelProps, TabProps, TabScrollButton, TabScrollButtonProps, TabScrollDirection, type TabValue, Tabs, TabsActions, TabsOrientation, TabsOverflowBehavior, TabsProps, TabsScrollButtons, TabsVariant };

package/dist/Tabs.mjs

@@ -1,7 +1,7 @@
 import { Tab } from "./Tabs/Tab.mjs";
 import { TabContext } from "./Tabs/TabContext.mjs";
 import { TabScrollButton } from "./Tabs/TabScrollButton.mjs";
-import { t as Tabs } from "./Tabs-CE8iDr0D.mjs";
+import { t as Tabs } from "./Tabs-DPCVKt9p.mjs";
 import { TabList } from "./Tabs/TabList.mjs";
 import { TabPanel } from "./Tabs/TabPanel.mjs";
 export { Tab, TabContext, TabList, TabPanel, TabScrollButton, Tabs };

package/dist/{TabsContext-D5E7s9i5.d.mts → TabsContext-DkPIvEhN.d.cts}

@@ -1,4 +1,4 @@
-import "./index-C_K0hsEr.mjs";
+import "./theme.cjs";
 /** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
 type TabValue = string | number;
 export { TabValue as t };

package/dist/{TabsContext-i57cha5W.d.cts → TabsContext-cm-4w5HV.d.mts}

@@ -1,4 +1,4 @@
-import "./index-CvV0TCBK.cjs";
+import "./index-2yg1ycx-.mjs";
 /** A tab's value: what it is chosen as. A `Tab` without one takes its position. */
 type TabValue = string | number;
 export { TabValue as t };

package/dist/TextInput.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-GsJaknFt.cjs");
 const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-DhClkDHY.cjs");
-const require_FormControl = require("./FormControl.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
@@ -15,7 +15,7 @@ const adjust = (el, minRows, maxRows) => {
 	el.style.height = "auto";
 	const scrollHeight = el.scrollHeight;
 	const min = minRows == null ? 0 : Number(minRows) * lineHeight + paddingY;
-	const max = maxRows == null ? Infinity : Number(maxRows) * lineHeight + paddingY;
+	const max = maxRows == null ? 1e400 : Number(maxRows) * lineHeight + paddingY;
 	el.style.height = `${Math.min(max, Math.max(min, scrollHeight))}px`;
 	el.style.overflow = scrollHeight > max ? "auto" : "hidden";
 };

package/dist/TextInput.d.cts

@@ -1,15 +1,15 @@
-import { nt as Theme } from "./index-CK-uaK5U.cjs";
+import { nt as Theme } from "./index-MipJMh6w.cjs";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
-type TextInputColor = keyof Theme['palette'];
-type TextInputTextColor = keyof Theme['text'];
-type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
-type TextInputSize = keyof Theme['sizes'];
-interface TextInputClasses {
+export type TextInputColor = keyof Theme['palette'];
+export type TextInputTextColor = keyof Theme['text'];
+export type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+export type TextInputSize = keyof Theme['sizes'];
+export interface TextInputClasses {
   root?: string;
   input?: string;
 }
-interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+export interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** Corner radius - applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
   borderRadius?: keyof Theme['radii'];
   autoComplete?: string;
@@ -74,5 +74,4 @@ interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'wi
   className?: string;
   'data-testid'?: string;
 }
-declare function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline, name, onChange, placeholder, readOnly, required: requiredProp, resize, rows, size: sizeProp, type, value, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TextInputProps>): import("react").JSX.Element;
-export { TextInput, TextInputClasses, TextInputColor, TextInputProps, TextInputSize, TextInputTextColor, TextInputVariant };
+export declare function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline, name, onChange, placeholder, readOnly, required: requiredProp, resize, rows, size: sizeProp, type, value, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TextInputProps>): import("react").JSX.Element;

package/dist/TextInput.d.mts

@@ -1,15 +1,15 @@
-import { nt as Theme } from "./index-B-1sp9oV.mjs";
+import { nt as Theme } from "./index-nw0pvCoK.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
-type TextInputColor = keyof Theme['palette'];
-type TextInputTextColor = keyof Theme['text'];
-type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
-type TextInputSize = keyof Theme['sizes'];
-interface TextInputClasses {
+export type TextInputColor = keyof Theme['palette'];
+export type TextInputTextColor = keyof Theme['text'];
+export type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+export type TextInputSize = keyof Theme['sizes'];
+export interface TextInputClasses {
   root?: string;
   input?: string;
 }
-interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+export interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
   /** Corner radius - applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
   borderRadius?: keyof Theme['radii'];
   autoComplete?: string;
@@ -74,5 +74,4 @@ interface TextInputProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'wi
   className?: string;
   'data-testid'?: string;
 }
-declare function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline, name, onChange, placeholder, readOnly, required: requiredProp, resize, rows, size: sizeProp, type, value, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TextInputProps>): import("react").JSX.Element;
-export { TextInput, TextInputClasses, TextInputColor, TextInputProps, TextInputSize, TextInputTextColor, TextInputVariant };
+export declare function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline, name, onChange, placeholder, readOnly, required: requiredProp, resize, rows, size: sizeProp, type, value, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<TextInputProps>): import("react").JSX.Element;

package/dist/TextInput.mjs

@@ -1,8 +1,8 @@
-import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { r as useTheme } from "./theme-DyyZQFzQ.mjs";
-import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
-import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-DCGRUY9c.mjs";
 import { useFormControl } from "./FormControl.mjs";
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { r as useTheme } from "./theme-B6LFWZ98.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-GEyyFeaq.mjs";
+import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/TextInput/TextAreaAutoResize.tsx
@@ -13,7 +13,7 @@ const adjust = (el, minRows, maxRows) => {
 	el.style.height = "auto";
 	const scrollHeight = el.scrollHeight;
 	const min = minRows == null ? 0 : Number(minRows) * lineHeight + paddingY;
-	const max = maxRows == null ? Infinity : Number(maxRows) * lineHeight + paddingY;
+	const max = maxRows == null ? 1e400 : Number(maxRows) * lineHeight + paddingY;
 	el.style.height = `${Math.min(max, Math.max(min, scrollHeight))}px`;
 	el.style.overflow = scrollHeight > max ? "auto" : "hidden";
 };

package/dist/ToggleButton/ToggleButton.cjs

@@ -1,11 +1,11 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-yC1f5WR2.cjs");
-const require_utils = require("../utils.cjs");
+const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-CHA83ShW.cjs");
+const require_Button = require("../Button.cjs");
+const require_ButtonGroupContext = require("../ButtonGroupContext-n0wa0q6H.cjs");
+const require_src = require("../src-B1PmaZ-2.cjs");
 const require_theme = require("../theme-XJvMdOnY.cjs");
 const require_themeDefault = require("../themeDefault-DbPHBbNO.cjs");
-const require_ButtonGroupContext = require("../ButtonGroupContext-n0wa0q6H.cjs");
-const require_Button = require("../Button.cjs");
-const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-CHA83ShW.cjs");
+const require_utils = require("../utils.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ToggleButton/ToggleButton/ToggleButton.tsx

package/dist/ToggleButton/ToggleButton.d.cts

@@ -1,6 +1,6 @@
-import { i as ButtonProps } from "../index-Cf2D7Y1b.cjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.cjs";
-interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
+import { ButtonProps } from "../Button.cjs";
+export interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
   /** The value associated with the button inside a `ToggleButtonGroup`. */
   value: ToggleButtonValue;
   /** Active state - inferred from the group's value when omitted. Drives `aria-pressed`. */
@@ -8,5 +8,4 @@ interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'targ
   /** Fired with the button's `value` when toggled. */
   onChange?: (value: ToggleButtonValue) => void;
 }
-declare function ToggleButton({ value, isSelected, color, onChange, onClick, type, ...rest }: Readonly<ToggleButtonProps>): import("react").JSX.Element;
-export { ToggleButton, ToggleButtonProps };
+export declare function ToggleButton({ value, isSelected, color, onChange, onClick, type, ...rest }: Readonly<ToggleButtonProps>): import("react").JSX.Element;

package/dist/ToggleButton/ToggleButton.d.mts

@@ -1,6 +1,6 @@
-import { i as ButtonProps } from "../index-BMeqk34D.mjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.mjs";
-interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
+import { i as ButtonProps } from "../index-DuW9P_vU.mjs";
+export interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'target' | 'rel' | 'value' | 'onChange'> {
   /** The value associated with the button inside a `ToggleButtonGroup`. */
   value: ToggleButtonValue;
   /** Active state - inferred from the group's value when omitted. Drives `aria-pressed`. */
@@ -8,5 +8,4 @@ interface ToggleButtonProps extends Omit<ButtonProps, 'variant' | 'href' | 'targ
   /** Fired with the button's `value` when toggled. */
   onChange?: (value: ToggleButtonValue) => void;
 }
-declare function ToggleButton({ value, isSelected, color, onChange, onClick, type, ...rest }: Readonly<ToggleButtonProps>): import("react").JSX.Element;
-export { ToggleButton, ToggleButtonProps };
+export declare function ToggleButton({ value, isSelected, color, onChange, onClick, type, ...rest }: Readonly<ToggleButtonProps>): import("react").JSX.Element;

package/dist/ToggleButton/ToggleButton.mjs

@@ -1,10 +1,10 @@
-import { a as src_exports, o as styled } from "../src-B-rNjHIL.mjs";
-import { alpha } from "../utils.mjs";
-import { r as useTheme } from "../theme-DyyZQFzQ.mjs";
-import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
-import { t as ButtonGroupContext } from "../ButtonGroupContext-DK9whWFt.mjs";
-import { Button } from "../Button.mjs";
 import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-C0owas90.mjs";
+import { Button } from "../Button.mjs";
+import { t as ButtonGroupContext } from "../ButtonGroupContext-DK9whWFt.mjs";
+import { a as src_exports, o as styled } from "../src-BSo7bM2g.mjs";
+import { r as useTheme } from "../theme-B6LFWZ98.mjs";
+import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
+import { alpha } from "../utils.mjs";
 import { useContext } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/ToggleButton/ToggleButton/ToggleButton.tsx

package/dist/ToggleButton/ToggleButtonGroup.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("../src-yC1f5WR2.cjs");
+const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-CHA83ShW.cjs");
+const require_ButtonGroup = require("../ButtonGroup.cjs");
+const require_src = require("../src-B1PmaZ-2.cjs");
 const require_theme = require("../theme-XJvMdOnY.cjs");
 const require_themeDefault = require("../themeDefault-DbPHBbNO.cjs");
-const require_ButtonGroup = require("../ButtonGroup.cjs");
-const require_ToggleButtonGroupContext = require("../ToggleButtonGroupContext-CHA83ShW.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 // src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.tsx

package/dist/ToggleButton/ToggleButtonGroup.d.cts

@@ -1,6 +1,6 @@
-import { a as ButtonGroupProps } from "../index-CZofj6vc.cjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.cjs";
-interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
+import { ButtonGroupProps } from "../ButtonGroup.cjs";
+export interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
   /** Selected value(s) - single when `isExclusive`, array otherwise. Controlled. */
   value?: ToggleButtonValue | ToggleButtonValue[] | null;
   /**
@@ -17,5 +17,4 @@ interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onC
  * owns `value`. Visual props (`color` / `size` / `disabled` / `fullWidth`) broadcast
  * through `ButtonGroup` as usual.
  */
-declare function ToggleButtonGroup({ value, onChange, isExclusive, color: colorProp, children, ...rest }: Readonly<ToggleButtonGroupProps>): import("react").JSX.Element;
-export { ToggleButtonGroup, ToggleButtonGroupProps };
+export declare function ToggleButtonGroup({ value, onChange, isExclusive, color: colorProp, children, ...rest }: Readonly<ToggleButtonGroupProps>): import("react").JSX.Element;

package/dist/ToggleButton/ToggleButtonGroup.d.mts

@@ -1,6 +1,6 @@
-import { a as ButtonGroupProps } from "../index-3-LXZL7g.mjs";
 import { r as ToggleButtonValue } from "../ToggleButtonGroupContext-CA-4EgZL.mjs";
-interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
+import { a as ButtonGroupProps } from "../index-BX05FTzq.mjs";
+export interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onChange'> {
   /** Selected value(s) - single when `isExclusive`, array otherwise. Controlled. */
   value?: ToggleButtonValue | ToggleButtonValue[] | null;
   /**
@@ -17,5 +17,4 @@ interface ToggleButtonGroupProps extends Omit<ButtonGroupProps, 'variant' | 'onC
  * owns `value`. Visual props (`color` / `size` / `disabled` / `fullWidth`) broadcast
  * through `ButtonGroup` as usual.
  */
-declare function ToggleButtonGroup({ value, onChange, isExclusive, color: colorProp, children, ...rest }: Readonly<ToggleButtonGroupProps>): import("react").JSX.Element;
-export { ToggleButtonGroup, ToggleButtonGroupProps };
+export declare function ToggleButtonGroup({ value, onChange, isExclusive, color: colorProp, children, ...rest }: Readonly<ToggleButtonGroupProps>): import("react").JSX.Element;

package/dist/ToggleButton/ToggleButtonGroup.mjs

@@ -1,8 +1,8 @@
-import { o as styled } from "../src-B-rNjHIL.mjs";
-import { r as useTheme } from "../theme-DyyZQFzQ.mjs";
-import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
-import { ButtonGroup } from "../ButtonGroup.mjs";
 import { t as ToggleButtonGroupContext } from "../ToggleButtonGroupContext-C0owas90.mjs";
+import { ButtonGroup } from "../ButtonGroup.mjs";
+import { o as styled } from "../src-BSo7bM2g.mjs";
+import { r as useTheme } from "../theme-B6LFWZ98.mjs";
+import { t as themeDefault } from "../themeDefault-BeZJzqJj.mjs";
 import { useMemo } from "react";
 import { jsx } from "react/jsx-runtime";
 // src/ToggleButton/ToggleButtonGroup/ToggleButtonGroup.tsx

package/dist/ToggleButton.d.cts

@@ -1,4 +1,4 @@
-import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CA-4EgZL.cjs";
 import { ToggleButton, ToggleButtonProps } from "./ToggleButton/ToggleButton.cjs";
 import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.cjs";
+import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CA-4EgZL.cjs";
 export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext, ToggleButtonGroupContextValue, ToggleButtonGroupProps, ToggleButtonProps, ToggleButtonValue };

package/dist/ToggleButton.d.mts

@@ -1,4 +1,4 @@
-import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CA-4EgZL.mjs";
 import { ToggleButton, ToggleButtonProps } from "./ToggleButton/ToggleButton.mjs";
 import { ToggleButtonGroup, ToggleButtonGroupProps } from "./ToggleButton/ToggleButtonGroup.mjs";
+import { n as ToggleButtonGroupContextValue, r as ToggleButtonValue, t as ToggleButtonGroupContext } from "./ToggleButtonGroupContext-CA-4EgZL.mjs";
 export { ToggleButton, ToggleButtonGroup, ToggleButtonGroupContext, ToggleButtonGroupContextValue, ToggleButtonGroupProps, ToggleButtonProps, ToggleButtonValue };

package/dist/{Tooltip-rkGm1HnP.cjs → Tooltip-Bzt4mirM.cjs}

@@ -1,11 +1,11 @@
-const require_src = require("./src-yC1f5WR2.cjs");
+const require_src = require("./src-B1PmaZ-2.cjs");
 const require_theme = require("./theme-XJvMdOnY.cjs");
 const require_themeDefault = require("./themeDefault-DbPHBbNO.cjs");
 const require_getSurfaceRadius = require("./getSurfaceRadius-DwOn3ALC.cjs");
-const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
 const require_Portal = require("./Portal.cjs");
-const require_useAnchoredPlacement = require("./useAnchoredPlacement-BSfjNMut.cjs");
 const require_useMergedRefs = require("./useMergedRefs-BtctsnmX.cjs");
+const require_useAnchoredPlacement = require("./useAnchoredPlacement-BSfjNMut.cjs");
+const require_useControlled = require("./useControlled-CzCxM4J3.cjs");
 const require_getTooltipOrigins = require("./getTooltipOrigins-8b5zQafY.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");

package/dist/{Tooltip-Cx4ez9vY.mjs → Tooltip-CqGB8Pgm.mjs}

@@ -1,11 +1,11 @@
-import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-B-rNjHIL.mjs";
-import { n as useDefaultProps, r as useTheme } from "./theme-DyyZQFzQ.mjs";
+import { a as src_exports, o as styled, t as createShouldForwardProp } from "./src-BSo7bM2g.mjs";
+import { n as useDefaultProps, r as useTheme } from "./theme-B6LFWZ98.mjs";
 import { t as themeDefault } from "./themeDefault-BeZJzqJj.mjs";
 import { t as getSurfaceRadius } from "./getSurfaceRadius-B1QE_VLa.mjs";
-import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
 import { Portal } from "./Portal.mjs";
-import { t as useAnchoredPlacement } from "./useAnchoredPlacement-txSaWzfk.mjs";
 import { t as useMergedRefs } from "./useMergedRefs-CdfwtmUd.mjs";
+import { t as useAnchoredPlacement } from "./useAnchoredPlacement-txSaWzfk.mjs";
+import { t as useControlled } from "./useControlled-B4uQ9Bj6.mjs";
 import { n as resolveTooltipPlacement, t as getTooltipOrigins } from "./getTooltipOrigins-D0bLLXwY.mjs";
 import { cloneElement, createContext, useCallback, useContext, useEffect, useId, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";

package/dist/Tooltip.cjs

@@ -1,4 +1,4 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_Tooltip = require("./Tooltip-rkGm1HnP.cjs");
+const require_Tooltip = require("./Tooltip-Bzt4mirM.cjs");
 exports.Tooltip = require_Tooltip.Tooltip;
 exports.TooltipGroup = require_Tooltip.TooltipGroup;