@soroush.tech/design-system 0.1.0

package/dist/Modal-DR60peRg.mjs

@@ -0,0 +1,327 @@
+import { a as createShouldForwardProp, d as styled } from "./src-DcNT2aIK.mjs";
+import { View } from "./View.mjs";
+import { Backdrop } from "./Backdrop.mjs";
+import { Portal } from "./Portal.mjs";
+import { FocusTrap } from "./FocusTrap.mjs";
+import { useCallback, useEffect, useMemo, useRef } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/utils/ownerDocument.ts
+/**
+* Returns the `Document` that owns the given node, falling back to the global
+* `document`. Lets the modal logic work across iframes / portaled containers.
+*/
+function ownerDocument(node) {
+	return node?.ownerDocument ?? document;
+}
+//#endregion
+//#region src/utils/ownerWindow.ts
+/**
+* Returns the `Window` that owns the given node, falling back to the global
+* `window`. Used to read viewport metrics for scroll-lock calculations.
+*/
+function ownerWindow(node) {
+	return ownerDocument(node).defaultView ?? window;
+}
+//#endregion
+//#region src/Modal/utils/getScrollbarSize.ts
+/**
+* Width of the vertical scrollbar for the given window, in pixels. Equal to the
+* gap between the inner window width and the document's client width. Used to
+* pad the container when scroll-lock hides the scrollbar, preventing layout jump.
+*/
+function getScrollbarSize(win) {
+	const documentWidth = win.document.documentElement.clientWidth;
+	return Math.abs(win.innerWidth - documentWidth);
+}
+//#endregion
+//#region src/Modal/ModalManager.ts
+const ARIA_HIDDEN_FORBIDDEN_TAGS = /* @__PURE__ */ new Set([
+	"TEMPLATE",
+	"SCRIPT",
+	"STYLE",
+	"LINK",
+	"MAP",
+	"META",
+	"NOSCRIPT",
+	"PICTURE",
+	"COL",
+	"COLGROUP",
+	"PARAM",
+	"SLOT",
+	"SOURCE",
+	"TRACK"
+]);
+function ariaHidden(element, hide) {
+	if (hide) element.setAttribute("aria-hidden", "true");
+	else element.removeAttribute("aria-hidden");
+}
+function isAriaHiddenForbidden(element) {
+	if (ARIA_HIDDEN_FORBIDDEN_TAGS.has(element.tagName)) return true;
+	return element.tagName === "INPUT" && element.getAttribute("type") === "hidden";
+}
+function ariaHiddenSiblings(container, mountElement, currentElement, hiddenSiblings, hide) {
+	const exclude = /* @__PURE__ */ new Set([
+		mountElement,
+		currentElement,
+		...hiddenSiblings
+	]);
+	Array.from(container.children).forEach((element) => {
+		if (!exclude.has(element) && !isAriaHiddenForbidden(element)) ariaHidden(element, hide);
+	});
+}
+function getHiddenSiblings(container) {
+	return Array.from(container.children).filter((element) => element.getAttribute("aria-hidden") === "true");
+}
+function isOverflowing(container) {
+	const doc = ownerDocument(container);
+	if (container === doc.body) return ownerWindow(container).innerWidth > doc.documentElement.clientWidth;
+	return container.scrollHeight > container.clientHeight;
+}
+function getPaddingRight(element) {
+	return Number.parseFloat(ownerWindow(element).getComputedStyle(element).paddingRight) || 0;
+}
+/**
+* Locks scrolling on the container, padding it by the scrollbar width so hiding
+* the scrollbar causes no horizontal layout shift. Returns a function that
+* restores the exact prior inline styles.
+*/
+function lockScroll(container) {
+	const restores = [];
+	const setStyle = (property, value) => {
+		const previous = container.style.getPropertyValue(property);
+		restores.push(() => {
+			if (previous) container.style.setProperty(property, previous);
+			else container.style.removeProperty(property);
+		});
+		container.style.setProperty(property, value);
+	};
+	if (isOverflowing(container)) {
+		const scrollbarSize = container === ownerDocument(container).body ? getScrollbarSize(ownerWindow(container)) : container.offsetWidth - container.clientWidth;
+		setStyle("padding-right", `${getPaddingRight(container) + scrollbarSize}px`);
+	}
+	setStyle("overflow", "hidden");
+	return () => restores.forEach((restore) => restore());
+}
+/**
+* Tracks every open modal and the containers they live in. A single shared
+* instance coordinates stacking (`isTopModal`), scroll-lock, and `aria-hidden`
+* on background siblings so assistive tech only sees the active modal.
+*/
+var ModalManager = class {
+	modals = [];
+	containers = [];
+	add(modal, container, disableAriaHidden = false) {
+		const existingIndex = this.modals.indexOf(modal);
+		if (existingIndex !== -1) return existingIndex;
+		const modalIndex = this.modals.length;
+		this.modals.push(modal);
+		ariaHidden(modal.modalRef, false);
+		const hiddenSiblings = getHiddenSiblings(container);
+		if (!disableAriaHidden) ariaHiddenSiblings(container, modal.mount, modal.modalRef, hiddenSiblings, true);
+		const containerState = this.containers.find((item) => item.container === container);
+		if (containerState) {
+			containerState.modals.push(modal);
+			if (!disableAriaHidden) containerState.ariaHiddenApplied = true;
+			return modalIndex;
+		}
+		this.containers.push({
+			container,
+			modals: [modal],
+			restore: null,
+			hiddenSiblings,
+			ariaHiddenApplied: !disableAriaHidden
+		});
+		return modalIndex;
+	}
+	mount(modal, props) {
+		const containerState = this.containers.find((item) => item.modals.includes(modal));
+		containerState.restore ??= props.disableScrollLock ? () => {} : lockScroll(containerState.container);
+	}
+	remove(modal, ariaHiddenState = true) {
+		const modalIndex = this.modals.indexOf(modal);
+		if (modalIndex === -1) return modalIndex;
+		const containerState = this.containers.find((item) => item.modals.includes(modal));
+		containerState.modals.splice(containerState.modals.indexOf(modal), 1);
+		this.modals.splice(modalIndex, 1);
+		if (containerState.modals.length === 0) {
+			if (containerState.restore) containerState.restore();
+			ariaHidden(modal.modalRef, ariaHiddenState);
+			if (containerState.ariaHiddenApplied) ariaHiddenSiblings(containerState.container, modal.mount, modal.modalRef, containerState.hiddenSiblings, false);
+			this.containers.splice(this.containers.indexOf(containerState), 1);
+		} else {
+			const nextTop = containerState.modals.at(-1);
+			ariaHidden(modal.modalRef, ariaHiddenState);
+			ariaHidden(nextTop.modalRef, false);
+		}
+		return modalIndex;
+	}
+	isTopModal(modal) {
+		return this.modals.at(-1) === modal;
+	}
+};
+//#endregion
+//#region src/Modal/hooks/useEventCallback.ts
+/**
+* Returns a stable function identity that always calls the latest `fn`. Lets
+* effects depend on the callback without re-running when the handler changes.
+*
+* Syncs the ref in `useEffect` (not `useLayoutEffect`) so it stays SSR-safe —
+* the timing difference is irrelevant for the user-triggered handlers it wraps.
+*/
+function useEventCallback(fn) {
+	const ref = useRef(fn);
+	useEffect(() => {
+		ref.current = fn;
+	});
+	return useCallback((...args) => ref.current(...args), []);
+}
+//#endregion
+//#region src/Modal/hooks/useMergedRefs.ts
+function assignRef(ref, value) {
+	if (typeof ref === "function") ref(value);
+	else if (ref) ref.current = value;
+}
+/**
+* Merges two refs into a single stable ref callback so one DOM node can be
+* tracked by both an internal ref and a forwarded `ref`. Returns `null` when
+* both refs are absent, so React skips attaching a callback ref entirely.
+*/
+function useMergedRefs(refA, refB) {
+	return useMemo(() => {
+		if (refA == null && refB == null) return null;
+		return (value) => {
+			assignRef(refA, value);
+			assignRef(refB, value);
+		};
+	}, [refA, refB]);
+}
+//#endregion
+//#region src/Modal/useModal.ts
+const modalManager = new ModalManager();
+function getContainer(container) {
+	return typeof container === "function" ? container() : container ?? null;
+}
+function useModal(parameters) {
+	const { isOpen, onClose, container, disableScrollLock = false, disableAriaHidden = false, rootRef } = parameters;
+	const modal = useRef({});
+	const mountNodeRef = useRef(null);
+	const modalRef = useRef(null);
+	const handleRef = useMergedRefs(modalRef, rootRef);
+	const getModal = () => {
+		modal.current.modalRef = modalRef.current;
+		modal.current.mount = mountNodeRef.current;
+		return modal.current;
+	};
+	const handleOpen = useEventCallback(() => {
+		const resolvedContainer = getContainer(container) ?? ownerDocument(mountNodeRef.current).body;
+		modalManager.add(getModal(), resolvedContainer, disableAriaHidden);
+		modalManager.mount(getModal(), { disableScrollLock });
+	});
+	const isTopModal = useEventCallback(() => modalManager.isTopModal(getModal()));
+	const handlePortalRef = useEventCallback((node) => {
+		mountNodeRef.current = node;
+	});
+	const handleClose = useEventCallback(() => {
+		modalManager.remove(modal.current);
+	});
+	useEffect(() => {
+		if (!isOpen) return;
+		handleOpen();
+		return () => handleClose();
+	}, [
+		isOpen,
+		container,
+		disableScrollLock,
+		handleOpen,
+		handleClose
+	]);
+	const createHandleKeyDown = (otherHandlers) => (event) => {
+		otherHandlers.onKeyDown?.(event);
+		if (event.key !== "Escape" || event.which === 229 || !isTopModal()) return;
+		event.stopPropagation();
+		onClose?.(event, "escapeKey");
+	};
+	const createHandleRootClick = (otherHandlers) => (event) => {
+		otherHandlers.onClick?.(event);
+		if (event.target !== event.currentTarget) return;
+		onClose?.(event, "backdropClick");
+	};
+	const getRootProps = (otherHandlers = {}) => {
+		return {
+			role: "presentation",
+			...otherHandlers,
+			onKeyDown: createHandleKeyDown(otherHandlers),
+			onClick: createHandleRootClick(otherHandlers),
+			ref: handleRef
+		};
+	};
+	const getBackdropProps = (otherHandlers = {}) => {
+		return {
+			"aria-hidden": true,
+			...otherHandlers,
+			open: isOpen
+		};
+	};
+	return {
+		getRootProps,
+		getBackdropProps,
+		rootRef: handleRef,
+		portalRef: handlePortalRef,
+		isTopModal
+	};
+}
+//#endregion
+//#region src/Modal/Modal.tsx
+const ModalRoot = styled(View, {
+	name: "Modal",
+	label: "Modal",
+	shouldForwardProp: createShouldForwardProp(["scroll", "layer"])
+})(({ theme, scroll, layer }) => ({
+	position: "fixed",
+	inset: 0,
+	zIndex: theme.zOrder[layer],
+	display: "flex",
+	...scroll === "paper" ? {
+		alignItems: "center",
+		justifyContent: "center"
+	} : {
+		flexDirection: "column",
+		overflowY: "auto",
+		"& > :not([aria-hidden=\"true\"])": { margin: "auto" }
+	}
+}));
+/**
+* @description Accessible overlay primitive: portals its content, dims the page,
+* traps focus, locks scroll, and closes on Escape or backdrop click. The base for
+* higher-level overlays such as Drawer.
+*/
+function Modal({ isOpen, children, onClose, hasBackdrop = true, shouldKeepMounted = false, shouldUsePortal = true, portalContainer, shouldLockScroll = true, disableAriaHidden = false, shouldAutoFocus = true, shouldTrapFocus = true, shouldEnforceFocus = true, shouldRestoreFocus = true, scroll = "paper", layer = "modal" }) {
+	const { getRootProps, getBackdropProps } = useModal({
+		isOpen,
+		onClose,
+		container: portalContainer,
+		disableScrollLock: !shouldLockScroll,
+		disableAriaHidden
+	});
+	if (!shouldKeepMounted && !isOpen) return null;
+	const { open: _open, ...backdropProps } = getBackdropProps();
+	const content = /* @__PURE__ */ jsxs(ModalRoot, {
+		scroll,
+		layer,
+		...getRootProps(),
+		children: [hasBackdrop ? /* @__PURE__ */ jsx(Backdrop, { ...backdropProps }) : null, /* @__PURE__ */ jsx(FocusTrap, {
+			isEnabled: isOpen,
+			shouldAutoFocus,
+			shouldTrapFocus,
+			shouldEnforceFocus,
+			shouldRestoreFocus,
+			children
+		})]
+	});
+	return shouldUsePortal ? /* @__PURE__ */ jsx(Portal, {
+		container: portalContainer,
+		children: content
+	}) : content;
+}
+//#endregion
+export { ariaHidden as i, useModal as n, ModalManager as r, Modal as t };

package/dist/Modal.cjs

@@ -0,0 +1,6 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_Modal = require("./Modal-BDMPTSXv.cjs");
+exports.Modal = require_Modal.Modal;
+exports.ModalManager = require_Modal.ModalManager;
+exports.ariaHidden = require_Modal.ariaHidden;
+exports.useModal = require_Modal.useModal;

package/dist/Modal.d.cts

@@ -0,0 +1,2 @@
+import { a as Modal, c as ModalCloseReason, d as useModal, i as ariaHidden, l as UseModalParameters, n as ManagedModalProps, o as ModalProps, r as ModalManager, s as ModalScroll, t as ManagedModal, u as UseModalReturnValue } from "./index-BX5-NfbX.cjs";
+export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, ariaHidden, useModal };

package/dist/Modal.d.mts

@@ -0,0 +1,2 @@
+import { a as Modal, c as ModalCloseReason, d as useModal, i as ariaHidden, l as UseModalParameters, n as ManagedModalProps, o as ModalProps, r as ModalManager, s as ModalScroll, t as ManagedModal, u as UseModalReturnValue } from "./index-Dy03o__A.mjs";
+export { ManagedModal, ManagedModalProps, Modal, ModalCloseReason, ModalManager, ModalProps, ModalScroll, UseModalParameters, UseModalReturnValue, ariaHidden, useModal };

package/dist/Modal.mjs

@@ -0,0 +1,2 @@
+import { i as ariaHidden, n as useModal, r as ModalManager, t as Modal } from "./Modal-DR60peRg.mjs";
+export { Modal, ModalManager, ariaHidden, useModal };

package/dist/NativeSelect.cjs

@@ -0,0 +1,189 @@
+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_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
+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/NativeSelect/NativeSelect.tsx
+const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
+	..._soroush_tech_styled_system_should_forward_prop.props,
+	"color",
+	"textColor",
+	"variant",
+	"error",
+	"disabled",
+	"fullWidth"
+]);
+const baseStyle = {
+	position: "relative",
+	display: "inline-flex",
+	alignItems: "center",
+	transition: "border-color 0.15s ease"
+};
+const backgroundStyle = ({ theme, textColor = require_themeDefault.themeDefault(theme, "accentTextColor", "primary"), bg = require_themeDefault.themeDefault(theme, "inputBg", "terminal") }) => {
+	return {
+		backgroundColor: (0, require_src.src_exports.get)(theme, `background.${bg}`),
+		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 focusWithinColor = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => {
+	return { "&: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 focusVisibleRing = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => {
+	return { "&:has(:focus-visible)": {
+		outline: `2px solid ${error ? (0, require_src.src_exports.get)(theme, "palette.error.main") : (0, require_src.src_exports.get)(theme, `palette.${color}.main`)}`,
+		outlineOffset: "2px"
+	} };
+};
+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 NativeSelectRoot = require_src.styled("div", {
+	name: "NativeSelect",
+	label: "NativeSelect",
+	shouldForwardProp,
+	systemProps: [require_src.src_exports.space, (0, require_src.src_exports.system)({
+		width: true,
+		minWidth: true,
+		maxWidth: true
+	})]
+})(baseStyle, require_inputVariantStyles.inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
+const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor";
+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: `calc(${theme.space[s.paddingRight]} + 1.5rem)`,
+		fontSize: theme.fontSizes[s.fontSize]
+	};
+};
+const selectSurface = ({ theme, bg = require_themeDefault.themeDefault(theme, "inputBg", "terminal"), textColor }) => {
+	const backgroundColor = (0, require_src.src_exports.get)(theme, `background.${bg}`);
+	const color = (0, require_src.src_exports.get)(theme, `text.${textColor}`);
+	return {
+		backgroundColor,
+		color,
+		"& option": {
+			backgroundColor,
+			color
+		}
+	};
+};
+const StyledNativeSelect = require_src.styled("select", {
+	name: "NativeSelect",
+	slot: "select",
+	label: "NativeSelectSelect",
+	shouldForwardProp: shouldForwardNativeSelectProps
+})({
+	appearance: "none",
+	flex: 1,
+	minWidth: 0,
+	width: "100%",
+	border: "none",
+	borderRadius: "inherit",
+	outline: "none",
+	fontFamily: "inherit",
+	lineHeight: "inherit",
+	cursor: "pointer",
+	"&:disabled": { cursor: "not-allowed" }
+}, sizeVariants, selectSurface);
+const DropdownIcon = require_src.styled(require_Icon.Icon, {
+	name: "NativeSelect",
+	slot: "icon",
+	label: "NativeSelectIcon"
+})({
+	position: "absolute",
+	right: "0.375rem",
+	top: "50%",
+	transform: "translateY(-50%)",
+	pointerEvents: "none"
+});
+function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName = "expand_more", iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, 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 = (0, _emotion_react.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 handleChange = (event) => {
+		const match = options.find((option) => String(option.value) === event.target.value);
+		onChange?.(match ? match.value : event.target.value);
+	};
+	const uncontrolledDefault = value === void 0 ? defaultValue ?? (placeholder !== void 0 ? "" : void 0) : void 0;
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(NativeSelectRoot, {
+		color,
+		textColor,
+		bg,
+		variant,
+		error,
+		disabled,
+		fullWidth,
+		borderRadius,
+		className,
+		"data-testid": dataTestid,
+		...spaceProps,
+		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledNativeSelect, {
+			...selectProps,
+			id,
+			name,
+			disabled,
+			required,
+			sizeToken: size,
+			bg,
+			textColor,
+			value,
+			defaultValue: uncontrolledDefault,
+			onChange: handleChange,
+			"aria-describedby": selectProps?.["aria-describedby"] ?? fc["aria-describedby"],
+			children: [placeholder !== void 0 && /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: "",
+				disabled: true,
+				hidden: true,
+				children: placeholder
+			}), options.map((option) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("option", {
+				value: String(option.value),
+				children: option.label
+			}, String(option.value)))]
+		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownIcon, {
+			name: iconName,
+			size: "1.25rem",
+			color: "secondary",
+			...iconProps
+		})]
+	});
+}
+//#endregion
+exports.NativeSelect = NativeSelect;

package/dist/NativeSelect.d.cts

@@ -0,0 +1,62 @@
+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 { SelectHTMLAttributes } from "react";
+//#region src/NativeSelect/NativeSelect.d.ts
+type NativeSelectColor = keyof Theme['palette'];
+type NativeSelectTextColor = keyof Theme['text'];
+type NativeSelectBackgroundToken = keyof Theme['background'];
+type NativeSelectVariant = 'default' | 'outlined' | 'text' | 'underline';
+type NativeSelectSize = keyof Theme['sizes'];
+interface NativeSelectOption {
+  label: string;
+  value: string | number;
+}
+interface NativeSelectProps extends index_d_exports.SpaceProps<Theme>, Pick<index_d_exports.LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** The options to populate the select with. */
+  options: NativeSelectOption[];
+  /** Controlled value — matches an option's `value`. */
+  value?: string | number;
+  /** Uncontrolled initial value. */
+  defaultValue?: string | number;
+  /** Fired with the selected option's original `value` (number values stay numbers). */
+  onChange?: (value: string | number) => void;
+  /** Empty-state label rendered as a disabled first option, shown while nothing is selected. */
+  placeholder?: string;
+  /** Corner radius — applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
+  borderRadius?: keyof Theme['radii'];
+  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: NativeSelectColor;
+  /** Text color of the selected value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  textColor?: NativeSelectTextColor;
+  /** Background color — resolves against `theme.background`. Default: `'terminal'`. */
+  bg?: NativeSelectBackgroundToken;
+  /** Disables the select. */
+  disabled?: boolean;
+  /** Marks the field as invalid — applies error border color. */
+  error?: boolean;
+  /** Stretches the root to fill its container. */
+  fullWidth?: boolean;
+  /** Dropdown affordance icon. Default: `'expand_more'`. */
+  iconName?: IconName;
+  /** Extra props for the dropdown icon. */
+  iconProps?: Omit<IconProps, 'name'>;
+  /** Extra attributes spread onto the native `<select>`. Explicit top-level props take priority. */
+  selectProps?: SelectHTMLAttributes<HTMLSelectElement>;
+  id?: string;
+  name?: string;
+  required?: boolean;
+  /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: NativeSelectSize;
+  /**
+   * Visual style of the select.
+   * - `outlined` / `default` — full border box (default)
+   * - `underline` — border on bottom only
+   * - `text` — no border, transparent background
+   */
+  variant?: NativeSelectVariant;
+  className?: string;
+  'data-testid'?: string;
+}
+declare function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName, iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<NativeSelectProps>): import("react").JSX.Element;
+//#endregion
+export { NativeSelect, NativeSelectBackgroundToken, NativeSelectColor, NativeSelectOption, NativeSelectProps, NativeSelectSize, NativeSelectTextColor, NativeSelectVariant };

package/dist/NativeSelect.d.mts

@@ -0,0 +1,62 @@
+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 { SelectHTMLAttributes } from "react";
+//#region src/NativeSelect/NativeSelect.d.ts
+type NativeSelectColor = keyof Theme['palette'];
+type NativeSelectTextColor = keyof Theme['text'];
+type NativeSelectBackgroundToken = keyof Theme['background'];
+type NativeSelectVariant = 'default' | 'outlined' | 'text' | 'underline';
+type NativeSelectSize = keyof Theme['sizes'];
+interface NativeSelectOption {
+  label: string;
+  value: string | number;
+}
+interface NativeSelectProps extends index_d_exports.SpaceProps<Theme>, Pick<index_d_exports.LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth'> {
+  /** The options to populate the select with. */
+  options: NativeSelectOption[];
+  /** Controlled value — matches an option's `value`. */
+  value?: string | number;
+  /** Uncontrolled initial value. */
+  defaultValue?: string | number;
+  /** Fired with the selected option's original `value` (number values stay numbers). */
+  onChange?: (value: string | number) => void;
+  /** Empty-state label rendered as a disabled first option, shown while nothing is selected. */
+  placeholder?: string;
+  /** Corner radius — applies only to `default` and `outlined` variants. Resolves against `theme.radii`. */
+  borderRadius?: keyof Theme['radii'];
+  /** Focus/active border color — resolves to `theme.palette[color].main`. Default: 'primary', overridable via `theme.defaults.color`. */
+  color?: NativeSelectColor;
+  /** Text color of the selected value — resolves against `theme.text`. Default: 'primary', overridable via `theme.defaults.accentTextColor`. */
+  textColor?: NativeSelectTextColor;
+  /** Background color — resolves against `theme.background`. Default: `'terminal'`. */
+  bg?: NativeSelectBackgroundToken;
+  /** Disables the select. */
+  disabled?: boolean;
+  /** Marks the field as invalid — applies error border color. */
+  error?: boolean;
+  /** Stretches the root to fill its container. */
+  fullWidth?: boolean;
+  /** Dropdown affordance icon. Default: `'expand_more'`. */
+  iconName?: IconName;
+  /** Extra props for the dropdown icon. */
+  iconProps?: Omit<IconProps, 'name'>;
+  /** Extra attributes spread onto the native `<select>`. Explicit top-level props take priority. */
+  selectProps?: SelectHTMLAttributes<HTMLSelectElement>;
+  id?: string;
+  name?: string;
+  required?: boolean;
+  /** Controls padding and font size. Default: 'md', overridable via `theme.defaults.size`. */
+  size?: NativeSelectSize;
+  /**
+   * Visual style of the select.
+   * - `outlined` / `default` — full border box (default)
+   * - `underline` — border on bottom only
+   * - `text` — no border, transparent background
+   */
+  variant?: NativeSelectVariant;
+  className?: string;
+  'data-testid'?: string;
+}
+declare function NativeSelect({ options, value, defaultValue, onChange, placeholder, borderRadius, color: colorProp, textColor: textColorProp, bg, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, iconName, iconProps, selectProps, id: idProp, name, required: requiredProp, size: sizeProp, variant: variantProp, className, 'data-testid': dataTestid, ...spaceProps }: Readonly<NativeSelectProps>): import("react").JSX.Element;
+//#endregion
+export { NativeSelect, NativeSelectBackgroundToken, NativeSelectColor, NativeSelectOption, NativeSelectProps, NativeSelectSize, NativeSelectTextColor, NativeSelectVariant };