@soroush.tech/design-system 0.1.0

package/dist/Select.cjs

@@ -0,0 +1,528 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_src = require("./src-BiocWFSR.cjs");
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+const require_Icon = require("./Icon-1YtNCUKo.cjs");
+const require_FormControl = require("./FormControl.cjs");
+const require_NativeSelect = require("./NativeSelect.cjs");
+const require_Popover = require("./Popover-CRDLmywF.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");
+let _emotion_react = require("@emotion/react");
+//#region src/Select/hooks/useSelectPopover.ts
+/**
+* Owns `Select`'s open state (controlled or uncontrolled) and fires the open/close
+* callbacks. Positioning is delegated to `Popover`.
+*/
+function useSelectPopover({ open: openProp, defaultOpen = false, onOpen, onClose }) {
+	const isControlled = openProp !== void 0;
+	const [uncontrolledOpen, setUncontrolledOpen] = (0, react.useState)(defaultOpen);
+	return {
+		open: isControlled ? openProp : uncontrolledOpen,
+		openMenu: (0, react.useCallback)(() => {
+			if (!isControlled) setUncontrolledOpen(true);
+			onOpen?.();
+		}, [isControlled, onOpen]),
+		closeMenu: (0, react.useCallback)(() => {
+			if (!isControlled) setUncontrolledOpen(false);
+			onClose?.();
+		}, [isControlled, onClose])
+	};
+}
+//#endregion
+//#region src/Select/utils/getOptionsFromChildren.ts
+/**
+* Flattens `Select`'s `MenuItem` children into a plain option list. Any child that
+* is not a valid element carrying a `value` prop (e.g. whitespace, `null`) is skipped,
+* so the returned indices line up with the rendered, selectable rows.
+*/
+function getOptionsFromChildren(children) {
+	return react.Children.toArray(children).flatMap((child) => {
+		if (!(0, react.isValidElement)(child)) return [];
+		const props = child.props;
+		if (props.value === void 0) return [];
+		return [{
+			value: props.value,
+			label: props.children,
+			disabled: props.disabled ?? false
+		}];
+	});
+}
+//#endregion
+//#region src/Select/utils/getNextEnabledIndex.ts
+/**
+* Walks `options` from `from` by `step` (+1 / -1), skipping disabled rows, and
+* returns the first enabled index reached. Stops at the edges (no wrap-around);
+* returns `from` when no enabled option lies in that direction.
+*/
+function getNextEnabledIndex(options, from, step) {
+	for (let next = from + step; next >= 0 && next < options.length; next += step) if (!options[next].disabled) return next;
+	return from;
+}
+/** First (`'first'`) or last (`'last'`) enabled index, or `-1` when every option is disabled. */
+function getEdgeEnabledIndex(options, edge) {
+	if (edge === "first") return options.findIndex((option) => !option.disabled);
+	for (let index = options.length - 1; index >= 0; index -= 1) if (!options[index].disabled) return index;
+	return -1;
+}
+//#endregion
+//#region src/Select/utils/isOptionSelected.ts
+/** True when `optionValue` is the current single value, or is contained in the multiple-mode array. */
+function isOptionSelected(value, optionValue) {
+	return Array.isArray(value) ? value.includes(optionValue) : value === optionValue;
+}
+//#endregion
+//#region src/Select/utils/computeNextValue.ts
+/**
+* The value that results from choosing `optionValue`.
+* - Multiple mode: toggles `optionValue` in/out of the array, preserving order.
+* - Single mode: replaces the value outright.
+*/
+function computeNextValue(value, optionValue) {
+	if (!Array.isArray(value)) return optionValue;
+	return value.includes(optionValue) ? value.filter((item) => item !== optionValue) : [...value, optionValue];
+}
+//#endregion
+//#region src/Select/utils/resolveDisplayLabel.ts
+/**
+* The label(s) to show in the trigger for the current `value`, or `null` when nothing
+* is selected (the caller then falls back to the placeholder). Multiple-mode selections
+* are joined in option order with `, `.
+*/
+function resolveDisplayLabel(options, value) {
+	if (Array.isArray(value)) {
+		const selected = options.filter((option) => value.includes(option.value));
+		if (selected.length === 0) return null;
+		return selected.map((option) => option.label).reduce((acc, label, index) => {
+			if (index > 0) acc.push(", ");
+			acc.push(label);
+			return acc;
+		}, []);
+	}
+	const match = options.find((option) => option.value === value);
+	return match ? match.label : null;
+}
+//#endregion
+//#region src/Select/Select.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"variant",
+	"sizeToken",
+	"color",
+	"textColor",
+	"bg",
+	"error",
+	"disabled",
+	"fullWidth",
+	"borderRadius",
+	"open"
+]);
+const baseStyle = ({ theme }) => ({
+	position: "relative",
+	boxSizing: "border-box",
+	display: "inline-flex",
+	alignItems: "center",
+	justifyContent: "space-between",
+	gap: theme.space[1],
+	cursor: "pointer",
+	outline: "none",
+	textAlign: "left",
+	transition: "border-color 0.15s ease"
+});
+const variantStyles = (0, require_src.src_exports.variant)({
+	prop: "variant",
+	variants: {
+		outlined: {
+			borderRadius: "sq",
+			borderWidth: "thin",
+			borderStyle: "solid"
+		},
+		default: {
+			borderRadius: "sq",
+			borderStyle: "none"
+		},
+		underline: {
+			borderRadius: "sq",
+			borderStyle: "none",
+			borderBottomWidth: "thin",
+			borderBottomStyle: "solid"
+		},
+		text: {
+			borderRadius: "sq",
+			borderStyle: "none"
+		}
+	}
+});
+const borderRadiusStyle = ({ variant: v, borderRadius, theme }) => {
+	if (v === "underline" || v === "text" || !borderRadius) return {};
+	return { borderRadius: (0, require_src.src_exports.get)(theme, `radii.${borderRadius}`) };
+};
+const colorBorder = ({ color, error, theme }) => ({ borderColor: error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.light`) });
+const activeBorder = ({ color, error, open, theme }) => {
+	const activeColor = error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		...open ? { borderColor: activeColor } : {},
+		"&:focus": { borderColor: activeColor },
+		"&:focus-visible": {
+			outline: `2px solid ${(0, require_src.src_exports.get)(theme, `palette.${require_themeDefault.themeDefault(theme, "color", "primary")}.main`)}`,
+			outlineOffset: "2px"
+		}
+	};
+};
+const backgroundStyle = ({ color, textColor, bg, variant: v, theme }) => ({
+	backgroundColor: v === "text" ? "transparent" : (0, require_src.src_exports.get)(theme, `background.${bg}`),
+	color: textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : (0, require_src.src_exports.get)(theme, `palette.${color}.main`),
+	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 sizeVariants = ({ theme, sizeToken }) => {
+	const s = theme.sizes[sizeToken];
+	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 layoutStyles = ({ fullWidth, disabled }) => ({
+	...fullWidth ? {
+		display: "flex",
+		width: "100%"
+	} : { alignSelf: "flex-start" },
+	...disabled ? {
+		opacity: .5,
+		cursor: "not-allowed"
+	} : {}
+});
+const Trigger = require_src.styled("div", {
+	name: "Select",
+	label: "Select",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space, (0, require_src.src_exports.system)({
+		width: true,
+		minWidth: true,
+		maxWidth: true
+	})]
+})(baseStyle, variantStyles, borderRadiusStyle, colorBorder, activeBorder, backgroundStyle, sizeVariants, layoutStyles);
+const ValueArea = require_src.styled("span", {
+	name: "Select",
+	slot: "valueArea",
+	label: "SelectValueArea",
+	shouldForwardProp: (prop) => prop !== "autoWidth"
+})(({ autoWidth }) => ({
+	flex: 1,
+	minWidth: 0,
+	display: autoWidth ? "block" : "inline-grid",
+	"& > *": { gridArea: "1 / 1" }
+}));
+const ValueGhost = require_src.styled("span", {
+	name: "Select",
+	slot: "valueGhost",
+	label: "SelectValueGhost"
+})({
+	height: 0,
+	overflow: "hidden",
+	visibility: "hidden",
+	display: "flex",
+	flexDirection: "column",
+	"& > span": { whiteSpace: "nowrap" }
+});
+const TriggerValue = require_src.styled("span", {
+	name: "Select",
+	slot: "value",
+	label: "SelectValue"
+})({
+	minWidth: 0,
+	overflow: "hidden",
+	textOverflow: "ellipsis",
+	whiteSpace: "nowrap"
+});
+const ListBox = require_src.styled("ul", {
+	name: "Select",
+	slot: "listbox",
+	label: "SelectListbox"
+})(({ theme }) => ({
+	margin: 0,
+	padding: `${theme.space[1]} 0`,
+	width: "100%",
+	maxHeight: "16rem",
+	overflowY: "auto",
+	listStyle: "none"
+}));
+function Select({ children, native = false, multiple = false, autoWidth = false, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId, "aria-label": ariaLabel, 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 = (0, _emotion_react.useTheme)();
+	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
+	const bg = bgProp ?? require_themeDefault.themeDefault(theme, "inputBg", "terminal");
+	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "inputVariant", "default");
+	const textColor = fc.textColor;
+	const options = getOptionsFromChildren(children);
+	const isControlledValue = valueProp !== void 0;
+	const [internalValue, setInternalValue] = (0, react.useState)(defaultValue ?? (multiple ? [] : ""));
+	const rawValue = isControlledValue ? valueProp : internalValue;
+	const value = multiple ? Array.isArray(rawValue) ? rawValue : [] : Array.isArray(rawValue) ? "" : rawValue;
+	if (native) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_NativeSelect.NativeSelect, {
+		options: options.map((option) => ({
+			value: option.value,
+			label: typeof option.label === "string" ? option.label : String(option.label)
+		})),
+		value: Array.isArray(valueProp) ? void 0 : valueProp,
+		defaultValue: Array.isArray(defaultValue) ? void 0 : defaultValue,
+		onChange,
+		placeholder,
+		borderRadius,
+		color: colorProp,
+		textColor: textColorProp,
+		bg,
+		disabled: disabledProp,
+		error: errorProp,
+		fullWidth: fullWidthProp,
+		required: requiredProp,
+		size: sizeProp,
+		variant,
+		iconName,
+		iconProps,
+		id: idProp,
+		name,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(NonNativeSelect, {
+		options,
+		value,
+		onChangeValue: (next) => {
+			if (!isControlledValue) setInternalValue(next);
+			onChange?.(next);
+		},
+		multiple,
+		autoWidth,
+		openProp,
+		defaultOpen,
+		onOpen,
+		onClose,
+		placeholder,
+		renderValue,
+		borderRadius,
+		color,
+		textColor,
+		bg,
+		error,
+		disabled,
+		required,
+		fullWidth,
+		size,
+		variant,
+		iconName,
+		iconProps,
+		id,
+		name,
+		labelId,
+		ariaLabel,
+		ariaDescribedby: fc["aria-describedby"],
+		className,
+		dataTestid,
+		spaceProps,
+		children
+	});
+}
+function NonNativeSelect({ children, options, value, autoWidth, onChangeValue, multiple, openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color, textColor, bg, error, disabled, required, fullWidth, size, variant: variantProp, iconName, iconProps, id, name, labelId, ariaLabel, ariaDescribedby, className, dataTestid, spaceProps }) {
+	const [anchorEl, setAnchorEl] = (0, react.useState)(null);
+	const listboxId = `${(0, react.useId)()}-listbox`;
+	const { open, openMenu, closeMenu } = useSelectPopover({
+		open: openProp,
+		defaultOpen,
+		onOpen,
+		onClose
+	});
+	const [highlightedIndex, setHighlightedIndex] = (0, react.useState)(-1);
+	const getInitialHighlight = () => {
+		if (!Array.isArray(value)) {
+			const current = options.findIndex((option) => option.value === value && !option.disabled);
+			if (current !== -1) return current;
+		}
+		return getEdgeEnabledIndex(options, "first");
+	};
+	const openWithHighlight = () => {
+		setHighlightedIndex(getInitialHighlight());
+		openMenu();
+	};
+	const selectValue = (optionValue) => {
+		onChangeValue(computeNextValue(value, optionValue));
+		setHighlightedIndex(options.findIndex((option) => option.value === optionValue));
+		if (!multiple) closeMenu();
+	};
+	const selectHighlighted = () => {
+		const option = options[highlightedIndex];
+		if (option && !option.disabled) selectValue(option.value);
+	};
+	const moveHighlight = (step) => {
+		if (open) setHighlightedIndex((index) => getNextEnabledIndex(options, index, step));
+		else openWithHighlight();
+	};
+	const handleKeyDown = (event) => {
+		if (disabled) return;
+		switch (event.key) {
+			case "ArrowDown":
+				event.preventDefault();
+				moveHighlight(1);
+				break;
+			case "ArrowUp":
+				event.preventDefault();
+				moveHighlight(-1);
+				break;
+			case "Home":
+				if (open) {
+					event.preventDefault();
+					setHighlightedIndex(getEdgeEnabledIndex(options, "first"));
+				}
+				break;
+			case "End":
+				if (open) {
+					event.preventDefault();
+					setHighlightedIndex(getEdgeEnabledIndex(options, "last"));
+				}
+				break;
+			case "Enter":
+			case " ":
+				event.preventDefault();
+				if (open) selectHighlighted();
+				else openWithHighlight();
+				break;
+			case "Escape":
+				if (open) {
+					event.preventDefault();
+					closeMenu();
+				}
+				break;
+			default: break;
+		}
+	};
+	const handleTriggerClick = () => {
+		if (disabled) return;
+		if (open) closeMenu();
+		else openWithHighlight();
+	};
+	const handleBlur = () => {
+		if (open) closeMenu();
+	};
+	const display = renderValue ? renderValue(value) : resolveDisplayLabel(options, value);
+	const showPlaceholder = !renderValue && resolveDisplayLabel(options, value) === null;
+	const activeDescendant = open && highlightedIndex >= 0 ? `${listboxId}-option-${highlightedIndex}` : void 0;
+	const childArray = react.Children.toArray(children);
+	const isOptionChild = (child) => (0, react.isValidElement)(child) && child.props.value !== void 0;
+	const renderedItems = childArray.map((child, position) => {
+		if (!isOptionChild(child)) return child;
+		const index = childArray.slice(0, position).filter(isOptionChild).length;
+		const option = options[index];
+		const childProps = child.props;
+		return (0, react.cloneElement)(child, {
+			id: `${listboxId}-option-${index}`,
+			selected: isOptionSelected(value, option.value),
+			highlighted: index === highlightedIndex,
+			multiple,
+			size,
+			color: childProps.color ?? color,
+			textColor: childProps.textColor ?? textColor,
+			onSelect: selectValue
+		});
+	});
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [
+		/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Trigger, {
+			ref: setAnchorEl,
+			role: "combobox",
+			tabIndex: disabled ? -1 : 0,
+			"aria-haspopup": "listbox",
+			"aria-expanded": open,
+			"aria-controls": open ? listboxId : void 0,
+			"aria-activedescendant": activeDescendant,
+			"aria-labelledby": labelId,
+			"aria-label": ariaLabel,
+			"aria-describedby": ariaDescribedby,
+			"aria-invalid": error || void 0,
+			"aria-required": required || void 0,
+			"aria-disabled": disabled || void 0,
+			variant: variantProp,
+			sizeToken: size,
+			color,
+			textColor,
+			bg,
+			error,
+			disabled,
+			fullWidth,
+			borderRadius,
+			open,
+			id,
+			className,
+			"data-testid": dataTestid,
+			onClick: handleTriggerClick,
+			onKeyDown: handleKeyDown,
+			onBlur: handleBlur,
+			...spaceProps,
+			children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ValueArea, {
+				autoWidth,
+				children: [!autoWidth && /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(ValueGhost, {
+					"aria-hidden": true,
+					children: [options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: option.label }, String(option.value))), placeholder !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: placeholder })]
+				}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TriggerValue, { children: showPlaceholder ? placeholder ?? "​" : display })]
+			}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
+				name: iconName ?? (open ? "expand_less" : "expand_more"),
+				size: "1.25rem",
+				color: "secondary",
+				...iconProps
+			})]
+		}),
+		name !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
+			type: "hidden",
+			name,
+			value: Array.isArray(value) ? value.join(",") : String(value)
+		}),
+		/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Popover.Popover, {
+			open,
+			anchorEl,
+			anchorOrigin: {
+				vertical: "bottom",
+				horizontal: "left"
+			},
+			transformOrigin: {
+				vertical: "top",
+				horizontal: "left"
+			},
+			onClose: closeMenu,
+			disableScrollLock: true,
+			disableAriaHidden: true,
+			shouldAutoFocus: false,
+			shouldTrapFocus: false,
+			shouldEnforceFocus: false,
+			shouldRestoreFocus: false,
+			slotProps: { paper: {
+				p: 0,
+				bg,
+				borderRadius,
+				style: { minWidth: anchorEl?.offsetWidth }
+			} },
+			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ListBox, {
+				role: "listbox",
+				id: listboxId,
+				"aria-multiselectable": multiple || void 0,
+				"aria-labelledby": labelId,
+				onMouseDown: (event) => event.preventDefault(),
+				children: renderedItems
+			})
+		})
+	] });
+}
+//#endregion
+exports.Select = Select;

package/dist/Select.d.cts

@@ -0,0 +1,68 @@
+import { l as index_d_exports, o as Theme } from "./index-Bihpwn75.cjs";
+import { n as IconProps, r as IconName } from "./index-Dp81rWM1.cjs";
+import { ReactNode } from "react";
+//#region src/Select/utils/isOptionSelected.d.ts
+/** The union of value shapes `Select` holds: a single value, or an array in multiple mode. */
+type SelectValue = string | number | Array<string | number>;
+//#endregion
+//#region src/Select/Select.d.ts
+type SelectColor = keyof Theme['palette'];
+type SelectTextColor = keyof Theme['text'];
+type SelectBackgroundToken = keyof Theme['background'];
+type SelectVariant = 'default' | 'outlined' | 'text' | 'underline';
+type SelectSize = keyof Theme['sizes'];
+interface SelectProps extends index_d_exports.SpaceProps<Theme>, Pick<index_d_exports.LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** `MenuItem` children — one per option. */
+  children: ReactNode;
+  /** Render a native `<select>` (delegates to `NativeSelect`, single-select) instead of the custom listbox. */
+  native?: boolean;
+  /** Allow selecting several options — `value` becomes an array. Ignored on the native path. */
+  multiple?: boolean;
+  /** Size the trigger to the current selection instead of reserving the widest option's width. When `false` (default) the trigger keeps a stable width, avoiding layout shift on selection. */
+  autoWidth?: boolean;
+  /** Controlled value — a single option value, or an array when `multiple`. */
+  value?: SelectValue;
+  /** Uncontrolled initial value. */
+  defaultValue?: SelectValue;
+  /** Fired with the next value whenever the selection changes. */
+  onChange?: (value: SelectValue) => void;
+  /** Controlled open state of the listbox. */
+  open?: boolean;
+  /** Uncontrolled initial open state. */
+  defaultOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  /** Empty-state label shown in the trigger while nothing is selected. */
+  placeholder?: string;
+  /** Override the trigger's rendered content for the current value. */
+  renderValue?: (value: SelectValue) => ReactNode;
+  /** Corner radius — applies only to `default` and `outlined` variants. */
+  borderRadius?: keyof Theme['radii'];
+  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: SelectColor;
+  /** Text color of the trigger value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  textColor?: SelectTextColor;
+  /** Background color — resolves against `theme.background`. Default: `'terminal'`. */
+  bg?: SelectBackgroundToken;
+  disabled?: boolean;
+  error?: boolean;
+  fullWidth?: boolean;
+  required?: boolean;
+  /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: SelectSize;
+  /** Visual style — mirrors `TextInput`/`NativeSelect`. Default: `'default'`. */
+  variant?: SelectVariant;
+  /** Dropdown affordance icon. Default: `'expand_more'` / `'expand_less'` when open. */
+  iconName?: IconName;
+  iconProps?: Omit<IconProps, 'name'>;
+  id?: string;
+  name?: string;
+  /** Labels the trigger for assistive tech (id of a visible label element). */
+  labelId?: string;
+  'aria-label'?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+declare function Select({ children, native, multiple, autoWidth, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId, 'aria-label': ariaLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<SelectProps>): import("react").JSX.Element;
+//#endregion
+export { Select, SelectBackgroundToken, SelectColor, SelectProps, SelectSize, SelectTextColor, type SelectValue, SelectVariant };

package/dist/Select.d.mts

@@ -0,0 +1,68 @@
+import { l as index_d_exports, o as Theme } from "./index-Dm9HfgV6.mjs";
+import { n as IconProps, r as IconName } from "./index-BLfFycfJ.mjs";
+import { ReactNode } from "react";
+//#region src/Select/utils/isOptionSelected.d.ts
+/** The union of value shapes `Select` holds: a single value, or an array in multiple mode. */
+type SelectValue = string | number | Array<string | number>;
+//#endregion
+//#region src/Select/Select.d.ts
+type SelectColor = keyof Theme['palette'];
+type SelectTextColor = keyof Theme['text'];
+type SelectBackgroundToken = keyof Theme['background'];
+type SelectVariant = 'default' | 'outlined' | 'text' | 'underline';
+type SelectSize = keyof Theme['sizes'];
+interface SelectProps extends index_d_exports.SpaceProps<Theme>, Pick<index_d_exports.LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** `MenuItem` children — one per option. */
+  children: ReactNode;
+  /** Render a native `<select>` (delegates to `NativeSelect`, single-select) instead of the custom listbox. */
+  native?: boolean;
+  /** Allow selecting several options — `value` becomes an array. Ignored on the native path. */
+  multiple?: boolean;
+  /** Size the trigger to the current selection instead of reserving the widest option's width. When `false` (default) the trigger keeps a stable width, avoiding layout shift on selection. */
+  autoWidth?: boolean;
+  /** Controlled value — a single option value, or an array when `multiple`. */
+  value?: SelectValue;
+  /** Uncontrolled initial value. */
+  defaultValue?: SelectValue;
+  /** Fired with the next value whenever the selection changes. */
+  onChange?: (value: SelectValue) => void;
+  /** Controlled open state of the listbox. */
+  open?: boolean;
+  /** Uncontrolled initial open state. */
+  defaultOpen?: boolean;
+  onOpen?: () => void;
+  onClose?: () => void;
+  /** Empty-state label shown in the trigger while nothing is selected. */
+  placeholder?: string;
+  /** Override the trigger's rendered content for the current value. */
+  renderValue?: (value: SelectValue) => ReactNode;
+  /** Corner radius — applies only to `default` and `outlined` variants. */
+  borderRadius?: keyof Theme['radii'];
+  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: SelectColor;
+  /** Text color of the trigger value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  textColor?: SelectTextColor;
+  /** Background color — resolves against `theme.background`. Default: `'terminal'`. */
+  bg?: SelectBackgroundToken;
+  disabled?: boolean;
+  error?: boolean;
+  fullWidth?: boolean;
+  required?: boolean;
+  /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: SelectSize;
+  /** Visual style — mirrors `TextInput`/`NativeSelect`. Default: `'default'`. */
+  variant?: SelectVariant;
+  /** Dropdown affordance icon. Default: `'expand_more'` / `'expand_less'` when open. */
+  iconName?: IconName;
+  iconProps?: Omit<IconProps, 'name'>;
+  id?: string;
+  name?: string;
+  /** Labels the trigger for assistive tech (id of a visible label element). */
+  labelId?: string;
+  'aria-label'?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+declare function Select({ children, native, multiple, autoWidth, value: valueProp, defaultValue, onChange, open: openProp, defaultOpen, onOpen, onClose, placeholder, renderValue, borderRadius, color: colorProp, textColor: textColorProp, bg: bgProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, required: requiredProp, size: sizeProp, variant: variantProp, iconName, iconProps, id: idProp, name, labelId, 'aria-label': ariaLabel, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<SelectProps>): import("react").JSX.Element;
+//#endregion
+export { Select, SelectBackgroundToken, SelectColor, SelectProps, SelectSize, SelectTextColor, type SelectValue, SelectVariant };