@soroush.tech/design-system 0.1.0 → 1.0.0

package/dist/Table.d.mts

@@ -1,16 +1,15 @@
-import { a as UseTablePaginationOptions, i as TablePaginationState, n as TableSortMap, o as useTablePagination, r as useTableSort, t as TableSortEntry } from "./useTableSort-CpDs4cGq.mjs";
-import { i as useTableSelection, n as TableSelectionAllProps, r as TableSelectionRowProps, t as TableSelection } from "./index-DCQ2fsDu.mjs";
-import { n as TableSortLabelDirection, r as TableSortLabelProps, t as TableSortLabel } from "./index-DmJIuQJj.mjs";
-import { n as TableContext, r as TableContextValue, t as TableCellPadding } from "./TableContext-2qH7XYJB.mjs";
-import { a as TableProps, i as TableBorderColorToken, n as TableAlign, o as TableSize, r as TableBackgroundToken, t as Table } from "./index-CEOZI-6L.mjs";
-import { a as TableBodyProps, i as TableBodyColorToken, n as TableBodyBackgroundToken, r as TableBodyBorderColorToken, t as TableBody } from "./index-C-P_hipv.mjs";
-import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, l as TableSection, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell, u as TableSectionContext } from "./index-BH8jQOdF.mjs";
-import { n as TableContainerProps, t as TableContainer } from "./index-DBGE6yKw.mjs";
-import { n as TableControlProps, t as TableControl } from "./index-u57CbuAU2.mjs";
-import { a as TableFooterProps, i as TableFooterColorToken, n as TableFooterBackgroundToken, r as TableFooterBorderColorToken, t as TableFooter } from "./index-g9EThkSg.mjs";
-import { a as TableHeadProps, i as TableHeadColorToken, n as TableHeadBackgroundToken, r as TableHeadBorderColorToken, t as TableHead } from "./index-DvW2eETV.mjs";
-import { n as TablePaginationActions, r as TablePaginationActionsProps, t as TablePaginationActionType } from "./index-BnzUumAC2.mjs";
-import { n as TablePaginationDisplayedRowsInfo, r as TablePaginationProps, t as TablePagination } from "./index-kpk9e3xM2.mjs";
-import { a as TableRowProps, i as TableRowColor, n as TableRowBackgroundToken, r as TableRowBorderColorToken, t as TableRow } from "./index-CLU39rUS2.mjs";
-import "./index-Cl_yBpzW2.mjs";
+import { n as TableContext, r as TableContextValue, t as TableCellPadding } from "./TableContext-adilRIJZ.mjs";
+import { Table, TableAlign, TableBackgroundToken, TableBorderColorToken, TableProps, TableSize } from "./Table/Table.mjs";
+import { TableBody, TableBodyBackgroundToken, TableBodyBorderColorToken, TableBodyColorToken, TableBodyProps } from "./Table/TableBody.mjs";
+import { a as TableCellColorToken, c as TableCellVariant, i as TableCellBorderColorToken, l as TableSection, n as TableCellAlign, o as TableCellProps, r as TableCellBackgroundToken, s as TableCellSortDirection, t as TableCell, u as TableSectionContext } from "./index-DGqakgRN.mjs";
+import { TableContainer, TableContainerProps } from "./Table/TableContainer.mjs";
+import { n as TableSortLabelDirection, r as TableSortLabelProps, t as TableSortLabel } from "./index-BGzs2cKy.mjs";
+import { a as TableSortMap, i as TableSortEntry, n as UseTablePaginationOptions, o as useTableSort, r as useTablePagination, t as TablePaginationState } from "./useTablePagination-D6T-fQFc.mjs";
+import { TableControl, TableControlProps } from "./Table/TableControl.mjs";
+import { TableFooter, TableFooterBackgroundToken, TableFooterBorderColorToken, TableFooterColorToken, TableFooterProps } from "./Table/TableFooter.mjs";
+import { TableHead, TableHeadBackgroundToken, TableHeadBorderColorToken, TableHeadColorToken, TableHeadProps } from "./Table/TableHead.mjs";
+import { n as TablePaginationActions, r as TablePaginationActionsProps, t as TablePaginationActionType } from "./index-DCwLdUQH.mjs";
+import { TablePagination, TablePaginationDisplayedRowsInfo, TablePaginationProps } from "./Table/TablePagination.mjs";
+import { TableRow, TableRowBackgroundToken, TableRowBorderColorToken, TableRowColor, TableRowProps } from "./Table/TableRow.mjs";
+import { TableSelection, TableSelectionAllProps, TableSelectionRowProps, useTableSelection } from "./Table/hooks.mjs";
 export { Table, TableAlign, TableBackgroundToken, TableBody, TableBodyBackgroundToken, TableBodyBorderColorToken, TableBodyColorToken, TableBodyProps, TableBorderColorToken, TableCell, TableCellAlign, TableCellBackgroundToken, TableCellBorderColorToken, TableCellColorToken, TableCellPadding, TableCellProps, TableCellSortDirection, TableCellVariant, TableContainer, TableContainerProps, TableContext, TableContextValue, TableControl, TableControlProps, TableFooter, TableFooterBackgroundToken, TableFooterBorderColorToken, TableFooterColorToken, TableFooterProps, TableHead, TableHeadBackgroundToken, TableHeadBorderColorToken, TableHeadColorToken, TableHeadProps, TablePagination, TablePaginationActionType, TablePaginationActions, TablePaginationActionsProps, TablePaginationDisplayedRowsInfo, TablePaginationProps, TablePaginationState, TableProps, TableRow, TableRowBackgroundToken, TableRowBorderColorToken, TableRowColor, TableRowProps, TableSection, TableSectionContext, TableSelection, TableSelectionAllProps, TableSelectionRowProps, TableSize, TableSortEntry, TableSortLabel, TableSortLabelDirection, TableSortLabelProps, TableSortMap, UseTablePaginationOptions, useTablePagination, useTableSelection, useTableSort };

package/dist/Table.mjs

@@ -1,4 +1,4 @@
-import { t as TableContext } from "./TableContext-BRWPghAI.mjs";
+import { t as TableContext } from "./TableContext-Dyr89h_k.mjs";
 import { TableSortLabel } from "./Table/TableSortLabel.mjs";
 import { useTablePagination, useTableSelection, useTableSort } from "./Table/hooks.mjs";
 import { Table } from "./Table/Table.mjs";

package/dist/{TableContext-qqp35o8z.cjs → TableContext-Bfg1C3Sr.cjs}

@@ -1,4 +1,3 @@
-require("@emotion/react");
 //#region src/Table/TableContext.ts
 const TableContext = (0, require("react").createContext)({});
 //#endregion

package/dist/{TableContext-2qH7XYJB.d.cts → TableContext-DOhYeOFx.d.cts}

@@ -1,4 +1,4 @@
-import { Theme } from "@emotion/react";
+import { m as Theme } from "./themes-BTGww2YK.cjs";
 //#region src/Table/TableContext.d.ts
 /** Cell padding modes broadcast from `Table` to descendant cells. */
 type TableCellPadding = 'normal' | 'none';

package/dist/{TableContext-BRWPghAI.mjs → TableContext-Dyr89h_k.mjs}

@@ -1,4 +1,3 @@
-import "@emotion/react";
 import { createContext } from "react";
 //#region src/Table/TableContext.ts
 const TableContext = createContext({});

package/dist/{TableContext-2qH7XYJB.d.mts → TableContext-adilRIJZ.d.mts}

@@ -1,4 +1,4 @@
-import { Theme } from "@emotion/react";
+import { m as Theme } from "./themes-BTGww2YK.mjs";
 //#region src/Table/TableContext.d.ts
 /** Cell padding modes broadcast from `Table` to descendant cells. */
 type TableCellPadding = 'normal' | 'none';

package/dist/TextInput.cjs

@@ -1,3 +1,229 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_TextInput = require("./TextInput-6o37Zddp.cjs");
-exports.TextInput = require_TextInput.TextInput;
+const require_src = require("./src-C8PIppTy.cjs");
+const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
+const require_theme = require("./theme-Du6xgPsg.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.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");
+//#region src/TextInput/TextAreaAutoResize.tsx
+const adjust = (el, minRows, maxRows) => {
+	const style = getComputedStyle(el);
+	const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2;
+	const paddingY = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
+	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;
+	el.style.height = `${Math.min(max, Math.max(min, scrollHeight))}px`;
+	el.style.overflow = scrollHeight > max ? "auto" : "hidden";
+};
+const TextAreaAutoResize = (0, react.forwardRef)(function TextAreaAutoResize({ value, onChange, minRows, maxRows, ...rest }, forwardedRef) {
+	const innerRef = (0, react.useRef)(null);
+	const setRef = (0, react.useCallback)((el) => {
+		innerRef.current = el;
+		if (typeof forwardedRef === "function") forwardedRef(el);
+		else if (forwardedRef) forwardedRef.current = el;
+	}, [forwardedRef]);
+	(0, react.useLayoutEffect)(() => {
+		adjust(innerRef.current, minRows, maxRows);
+	}, [
+		value,
+		minRows,
+		maxRows
+	]);
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
+		ref: setRef,
+		value,
+		onChange: (0, react.useCallback)((e) => {
+			adjust(e.currentTarget, minRows, maxRows);
+			onChange?.(e);
+		}, [
+			onChange,
+			minRows,
+			maxRows
+		]),
+		...rest
+	});
+});
+//#endregion
+//#region src/TextInput/TextInput.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"as",
+	"color",
+	"textColor",
+	"variant",
+	"error",
+	"disabled",
+	"fullWidth"
+]);
+const baseStyle = {
+	display: "inline-flex",
+	alignItems: "center",
+	transition: "border-color 0.15s ease"
+};
+const backgroundStyle = ({ theme, textColor = require_themeDefault.themeDefault(theme, "accentTextColor", "primary") }) => {
+	return {
+		backgroundColor: (0, require_src.src_exports.get)(theme, `background.${require_themeDefault.themeDefault(theme, "inputBg", "terminal")}`),
+		color: (0, require_src.src_exports.get)(theme, `text.${textColor}`),
+		fontFamily: (0, require_src.src_exports.get)(theme, "fonts.body"),
+		fontSize: (0, require_src.src_exports.get)(theme, "fontSizes.1"),
+		lineHeight: (0, require_src.src_exports.get)(theme, "lineHeights.base")
+	};
+};
+const colorBorder = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => {
+	return { borderColor: error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.light`) };
+};
+const focusVisibleRing = ({ theme }) => {
+	return { "&:has(:focus-visible)": {
+		outline: `2px solid ${(0, require_src.src_exports.get)(theme, `palette.${require_themeDefault.themeDefault(theme, "color", "primary")}.main`)}`,
+		outlineOffset: "2px"
+	} };
+};
+const focusWithinColor = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => ({ "&:focus-within": { borderColor: error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`) } });
+const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
+	if (v === "underline" || v === "text" || !borderRadius) return {};
+	return { borderRadius: (0, require_src.src_exports.get)(theme, `radii.${borderRadius}`) };
+};
+const layoutStyles = ({ fullWidth, disabled }) => ({
+	...fullWidth ? {
+		display: "flex",
+		width: "100%"
+	} : {},
+	...disabled ? {
+		opacity: .5,
+		cursor: "not-allowed",
+		pointerEvents: "none"
+	} : {}
+});
+const nativeBaseStyles = {
+	flex: 1,
+	minWidth: 0,
+	width: "100%",
+	border: "none",
+	outline: "none",
+	background: "transparent",
+	color: "inherit",
+	fontFamily: "inherit",
+	lineHeight: "inherit",
+	"&::placeholder": {
+		color: "inherit",
+		opacity: .5
+	},
+	"&:disabled": { cursor: "not-allowed" }
+};
+const textAreaBaseStyles = {
+	resize: "none",
+	overflow: "auto"
+};
+function InputBase({ inputSize, inputComponent, ...props }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(inputComponent ?? "input", {
+		...props,
+		size: inputSize
+	});
+}
+const widthStyles = (0, require_src.src_exports.system)({
+	width: true,
+	minWidth: true,
+	maxWidth: true
+});
+const sizeVariants = ({ theme, size }) => {
+	const s = theme.sizes[size];
+	return {
+		paddingTop: theme.space[s.paddingTop],
+		paddingBottom: theme.space[s.paddingBottom],
+		paddingLeft: theme.space[s.paddingLeft],
+		paddingRight: theme.space[s.paddingRight],
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const TextInputRoot = require_src.styled("div", {
+	name: "TextInput",
+	label: "TextInput",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space, widthStyles]
+})(baseStyle, require_inputVariantStyles.inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
+const StyledInput = require_src.styled(InputBase, {
+	name: "TextInput",
+	slot: "input",
+	label: "TextInputInput"
+})(nativeBaseStyles, sizeVariants);
+const shouldForwardInputProps = (prop) => prop !== "size";
+const StyledTextarea = require_src.styled("textarea", {
+	name: "TextInput",
+	slot: "input",
+	label: "TextInputTextarea",
+	shouldForwardProp: shouldForwardInputProps
+})(nativeBaseStyles, textAreaBaseStyles, sizeVariants);
+const StyledAutoResizeTextarea = require_src.styled(TextAreaAutoResize, {
+	name: "TextInput",
+	slot: "input",
+	label: "TextInputTextarea",
+	shouldForwardProp: shouldForwardInputProps
+})(nativeBaseStyles, textAreaBaseStyles, sizeVariants);
+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 = false, name, onChange, placeholder, readOnly, required: requiredProp, resize = false, rows, size: sizeProp, type = "text", value, variant: variantProp, className, "data-testid": dataTestid, ...spaceProps }) {
+	const fc = require_FormControl.useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp,
+		fullWidth: fullWidthProp,
+		color: colorProp,
+		textColor: textColorProp
+	});
+	const { id, error, disabled, required, size, fullWidth } = fc;
+	const theme = require_theme.useTheme();
+	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
+	const textColor = fc.textColor ?? require_themeDefault.themeDefault(theme, "accentTextColor", "primary");
+	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "inputVariant", "default");
+	const isAutoResize = resize;
+	const isMultiline = multiline || rows !== void 0 && Number(rows) > 1;
+	const isTextarea = (isAutoResize || isMultiline) && (!type || type === "text");
+	const rootClassName = [className, classes?.root].filter(Boolean).join(" ") || void 0;
+	const resolvedInputComponent = inputComponent ?? components?.Input;
+	const inputElProps = {
+		...inputProps,
+		id,
+		name,
+		disabled,
+		required,
+		autoComplete,
+		autoFocus,
+		placeholder,
+		readOnly,
+		onChange,
+		value,
+		className: classes?.input,
+		type: isTextarea ? void 0 : type,
+		rows: isMultiline && rows !== void 0 ? Number(rows) : void 0,
+		size,
+		"aria-describedby": inputProps?.["aria-describedby"] ?? fc["aria-describedby"]
+	};
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputRoot, {
+		as: components?.Root,
+		color,
+		textColor,
+		variant,
+		error,
+		disabled,
+		fullWidth,
+		borderRadius,
+		className: rootClassName,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: isTextarea && isAutoResize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAutoResizeTextarea, {
+			...inputElProps,
+			minRows: minRows ?? rows,
+			maxRows
+		}) : isTextarea ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTextarea, { ...inputElProps }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledInput, {
+			inputComponent: resolvedInputComponent,
+			inputSize,
+			...inputElProps
+		})
+	});
+}
+//#endregion
+exports.TextInput = TextInput;

package/dist/TextInput.d.cts

@@ -1,2 +1,80 @@
-import { a as TextInputSize, i as TextInputProps, n as TextInputClasses, o as TextInputTextColor, r as TextInputColor, s as TextInputVariant, t as TextInput } from "./index-C5_ciaeo.cjs";
+import { r as index_d_exports } from "./index-BVX_Jq2G.cjs";
+import { m as Theme } from "./themes-BTGww2YK.cjs";
+import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+//#region src/TextInput/TextInput.d.ts
+type TextInputColor = keyof Theme['palette'];
+type TextInputTextColor = keyof Theme['text'];
+type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+type TextInputSize = keyof Theme['sizes'];
+interface TextInputClasses {
+  root?: string;
+  input?: string;
+}
+interface TextInputProps extends index_d_exports.SpaceProps<Theme>, Pick<index_d_exports.LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** Corner radius — applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
+  borderRadius?: keyof Theme['radii'];
+  autoComplete?: string;
+  autoFocus?: boolean;
+  /** Class names applied to inner elements. `root` targets the wrapper; `input` targets the native element. */
+  classes?: TextInputClasses;
+  /** Override components for the Root and Input slots. */
+  components?: {
+    Input?: ElementType;
+    Root?: ElementType;
+  };
+  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: TextInputColor;
+  /** Text color of the typed value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  textColor?: TextInputTextColor;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the field as invalid — applies error border color. */
+  error?: boolean;
+  /** Stretches the root to fill its container. */
+  fullWidth?: boolean;
+  id?: string;
+  /** Custom component for the input element. Takes priority over `components.Input`. Default: `'input'`. */
+  inputComponent?: ElementType;
+  /** Native HTML `size` attribute — visible width in character widths. Has no effect with `multiline` or `resize`. */
+  inputSize?: number;
+  /** Extra props spread onto the native element. Explicit top-level props take priority. */
+  inputProps?: InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>;
+  /** Maximum rows before the auto-grow textarea starts scrolling. Only applies when `resize` is set. */
+  maxRows?: number | string;
+  /** Minimum rows for the auto-grow textarea. Only applies when `resize` is set. */
+  minRows?: number | string;
+  /**
+   * Renders a `<textarea>` that grows with its content.
+   * Combine with `rows` to fix the height instead of auto-growing.
+   */
+  multiline?: boolean;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  placeholder?: string;
+  readOnly?: boolean;
+  required?: boolean;
+  /** Auto-grows the textarea as content increases. Requires `multiline`. */
+  resize?: boolean;
+  /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: TextInputSize;
+  /**
+   * Fixes the textarea height to this many rows. Also enables `multiline`
+   * when value is greater than 1. Disables resize.
+   */
+  rows?: number | string;
+  /** HTML input type. Ignored when multiline. Default: `'text'`. */
+  type?: string;
+  /**
+   * Visual style of the input.
+   * - `outlined` / `default` — full border box (default)
+   * - `underline` — border on bottom only
+   * - `text` — no border, transparent background
+   */
+  variant?: TextInputVariant;
+  value?: string | number | readonly string[];
+  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;
+//#endregion
 export { TextInput, TextInputClasses, TextInputColor, TextInputProps, TextInputSize, TextInputTextColor, TextInputVariant };

package/dist/TextInput.d.mts

@@ -1,2 +1,80 @@
-import { a as TextInputSize, i as TextInputProps, n as TextInputClasses, o as TextInputTextColor, r as TextInputColor, s as TextInputVariant, t as TextInput } from "./index-Bwi4kRpf.mjs";
+import { m as Theme } from "./themes-BTGww2YK.mjs";
+import { r as index_d_exports } from "./index-B66h9kbP.mjs";
+import { ChangeEventHandler, ElementType, InputHTMLAttributes, TextareaHTMLAttributes } from "react";
+//#region src/TextInput/TextInput.d.ts
+type TextInputColor = keyof Theme['palette'];
+type TextInputTextColor = keyof Theme['text'];
+type TextInputVariant = 'default' | 'outlined' | 'text' | 'underline';
+type TextInputSize = keyof Theme['sizes'];
+interface TextInputClasses {
+  root?: string;
+  input?: string;
+}
+interface TextInputProps extends index_d_exports.SpaceProps<Theme>, Pick<index_d_exports.LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** Corner radius — applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
+  borderRadius?: keyof Theme['radii'];
+  autoComplete?: string;
+  autoFocus?: boolean;
+  /** Class names applied to inner elements. `root` targets the wrapper; `input` targets the native element. */
+  classes?: TextInputClasses;
+  /** Override components for the Root and Input slots. */
+  components?: {
+    Input?: ElementType;
+    Root?: ElementType;
+  };
+  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: TextInputColor;
+  /** Text color of the typed value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  textColor?: TextInputTextColor;
+  /** Disables the input. */
+  disabled?: boolean;
+  /** Marks the field as invalid — applies error border color. */
+  error?: boolean;
+  /** Stretches the root to fill its container. */
+  fullWidth?: boolean;
+  id?: string;
+  /** Custom component for the input element. Takes priority over `components.Input`. Default: `'input'`. */
+  inputComponent?: ElementType;
+  /** Native HTML `size` attribute — visible width in character widths. Has no effect with `multiline` or `resize`. */
+  inputSize?: number;
+  /** Extra props spread onto the native element. Explicit top-level props take priority. */
+  inputProps?: InputHTMLAttributes<HTMLInputElement> & TextareaHTMLAttributes<HTMLTextAreaElement>;
+  /** Maximum rows before the auto-grow textarea starts scrolling. Only applies when `resize` is set. */
+  maxRows?: number | string;
+  /** Minimum rows for the auto-grow textarea. Only applies when `resize` is set. */
+  minRows?: number | string;
+  /**
+   * Renders a `<textarea>` that grows with its content.
+   * Combine with `rows` to fix the height instead of auto-growing.
+   */
+  multiline?: boolean;
+  name?: string;
+  onChange?: ChangeEventHandler<HTMLInputElement | HTMLTextAreaElement>;
+  placeholder?: string;
+  readOnly?: boolean;
+  required?: boolean;
+  /** Auto-grows the textarea as content increases. Requires `multiline`. */
+  resize?: boolean;
+  /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: TextInputSize;
+  /**
+   * Fixes the textarea height to this many rows. Also enables `multiline`
+   * when value is greater than 1. Disables resize.
+   */
+  rows?: number | string;
+  /** HTML input type. Ignored when multiline. Default: `'text'`. */
+  type?: string;
+  /**
+   * Visual style of the input.
+   * - `outlined` / `default` — full border box (default)
+   * - `underline` — border on bottom only
+   * - `text` — no border, transparent background
+   */
+  variant?: TextInputVariant;
+  value?: string | number | readonly string[];
+  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;
+//#endregion
 export { TextInput, TextInputClasses, TextInputColor, TextInputProps, TextInputSize, TextInputTextColor, TextInputVariant };