@soroush.tech/design-system 2.0.0-rc.2 → 2.0.0-rc.4

package/dist/ScrollArea.d.mts

@@ -0,0 +1,40 @@
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
+import { ReactNode, Ref } from "react";
+//#region src/ScrollArea/hooks/useScrollThumb.d.ts
+/** Which way a thumb runs: down the right edge, or along the bottom. */
+type ScrollAxis = 'y' | 'x';
+//#endregion
+//#region src/ScrollArea/ScrollArea.d.ts
+/** Which ways it scrolls. */
+type ScrollAxes = ScrollAxis | 'both';
+interface ScrollAreaProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width' | 'minWidth' | 'maxWidth' | 'height' | 'minHeight' | 'maxHeight'> {
+  /** What scrolls. */
+  children: ReactNode;
+  /** Which ways it scrolls. Default: `'y'`. */
+  axes?: ScrollAxes;
+  /** The scrolling element - for code that reads or sets its scroll. */
+  viewportRef?: Ref<HTMLDivElement>;
+  /**
+   * `0` puts the scrolling box in the tab order, so the keys scroll it - for content with nothing
+   * focusable in it. Default: none.
+   */
+  tabIndex?: 0;
+  /** Names the scrolling box, as a `region`. */
+  'aria-label'?: string;
+  'aria-labelledby'?: string;
+  className?: string;
+  'data-testid'?: string;
+}
+/**
+ * @description A scrolling area whose scrollbars are drawn over its content rather than beside
+ * it - so a rounded panel keeps its corner clean - and show only while the pointer is over it or
+ * focus is inside. Scrolling itself stays native: the wheel, the keyboard and touch work as they
+ * do anywhere. Each axis that overflows gets a track, down the right edge or along the bottom,
+ * whose thumb drags and whose track pages. It grows to its content and no further than its
+ * container, or `maxHeight`, allows. Colors come from `theme.background.scrollbar` and
+ * `scrollbarTrack`, its size from `theme.space`.
+ */
+declare function ScrollArea({ children, axes: axesProp, viewportRef, tabIndex, 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, className, 'data-testid': dataTestid, ...rest }: Readonly<ScrollAreaProps>): import("react").JSX.Element;
+//#endregion
+export { ScrollArea, ScrollAreaProps, ScrollAxes };

package/dist/ScrollArea.mjs

@@ -0,0 +1,266 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { n as useDefaultProps } from "./theme-oBfFhJm9.mjs";
+import { t as useMergedRefs } from "./useMergedRefs-BfBckwRY.mjs";
+import { useEffect, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+/**
+* The thumb for a box scrolled to `offset`, or `null` when nothing overflows. Its size is the
+* share of the content in view, never under `MIN_THUMB_PX`; it travels the rest of the track as
+* the box travels its scroll range, so the thumb end meets the track end at the end.
+*/
+const getThumb = ({ offset, content, view }) => {
+	const range = content - view;
+	if (range <= 0 || view <= 0) return null;
+	const size = Math.min(100, Math.max(view / content, 24 / view) * 100);
+	return {
+		start: Math.min(1, Math.max(0, offset / range)) * (100 - size),
+		size
+	};
+};
+/**
+* The scroll offset a thumb dragged `by` pixels from `from` asks for: the drag covers the thumb
+* travel, which maps onto the whole scroll range of the box.
+*/
+const getScrollForDrag = (from, by, metrics) => {
+	const thumb = getThumb(metrics);
+	if (thumb === null) return from;
+	const travel = metrics.view * (1 - thumb.size / 100);
+	const range = metrics.content - metrics.view;
+	return Math.min(range, Math.max(0, from + by * range / travel));
+};
+//#endregion
+//#region src/ScrollArea/hooks/useScrollThumb.ts
+const getMetrics = (box, axis) => axis === "y" ? {
+	offset: box.scrollTop,
+	content: box.scrollHeight,
+	view: box.clientHeight
+} : {
+	offset: box.scrollLeft,
+	content: box.scrollWidth,
+	view: box.clientWidth
+};
+const scrollTo = (box, axis, offset) => {
+	if (axis === "y") box.scrollTop = offset;
+	else box.scrollLeft = offset;
+};
+/**
+* Follows the box `ref` holds along `axis`: its thumb is measured again when it scrolls and when
+* it or its content changes size. A press on the thumb drags it, with the pointer captured so the
+* drag goes on wherever the pointer goes; a press on the track pages toward it, as a native track.
+*/
+function useScrollThumb(ref, axis) {
+	const [thumb, setThumb] = useState(null);
+	const [isDragging, setIsDragging] = useState(false);
+	useEffect(() => {
+		const box = ref.current;
+		const measure = () => setThumb(getThumb(getMetrics(box, axis)));
+		measure();
+		box.addEventListener("scroll", measure, { passive: true });
+		const observer = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+		observer?.observe(box);
+		for (const child of box.children) observer?.observe(child);
+		return () => {
+			box.removeEventListener("scroll", measure);
+			observer?.disconnect();
+		};
+	}, [ref, axis]);
+	const stopDrag = useRef(null);
+	useEffect(() => () => stopDrag.current?.(), []);
+	const startDrag = (event, box) => {
+		const target = event.currentTarget;
+		const origin = axis === "y" ? event.clientY : event.clientX;
+		const from = getMetrics(box, axis).offset;
+		const handleMove = (moved) => {
+			const by = (axis === "y" ? moved.clientY : moved.clientX) - origin;
+			scrollTo(box, axis, getScrollForDrag(from, by, getMetrics(box, axis)));
+		};
+		const end = () => {
+			target.removeEventListener("pointermove", handleMove);
+			target.removeEventListener("pointerup", end);
+			target.removeEventListener("pointercancel", end);
+			stopDrag.current = null;
+			setIsDragging(false);
+		};
+		target.setPointerCapture(event.pointerId);
+		target.addEventListener("pointermove", handleMove);
+		target.addEventListener("pointerup", end);
+		target.addEventListener("pointercancel", end);
+		stopDrag.current = end;
+		setIsDragging(true);
+	};
+	const onTrackPointerDown = (event) => {
+		const box = ref.current;
+		if (thumb === null || event.button !== 0) return;
+		event.preventDefault();
+		const track = event.currentTarget.getBoundingClientRect();
+		const at = axis === "y" ? (event.clientY - track.top) / track.height * 100 : (event.clientX - track.left) / track.width * 100;
+		if (at >= thumb.start && at <= thumb.start + thumb.size) {
+			startDrag(event, box);
+			return;
+		}
+		const page = getMetrics(box, axis).view * (at < thumb.start ? -1 : 1);
+		box.scrollBy(axis === "y" ? { top: page } : { left: page });
+	};
+	return {
+		thumb,
+		onTrackPointerDown,
+		isDragging
+	};
+}
+//#endregion
+//#region src/ScrollArea/ScrollArea.tsx
+const layoutSystem = (0, src_exports.system)({
+	width: true,
+	minWidth: true,
+	maxWidth: true,
+	height: true,
+	minHeight: true,
+	maxHeight: true
+});
+const ScrollAreaRoot = styled("div", {
+	name: "ScrollArea",
+	label: "ScrollArea",
+	shouldForwardProp: createShouldForwardProp([...props]),
+	systemProps: [src_exports.space, layoutSystem]
+})({
+	position: "relative",
+	display: "flex",
+	flex: "1 1 auto",
+	minWidth: 0,
+	minHeight: 0,
+	"&:hover > [data-scroll-track] > [data-scroll-thumb], &:focus-within > [data-scroll-track] > [data-scroll-thumb]": { opacity: 1 }
+});
+const ScrollAreaViewport = styled("div", {
+	name: "ScrollArea",
+	slot: "viewport",
+	label: "ScrollAreaViewport",
+	shouldForwardProp: createShouldForwardProp(["axes"])
+})(({ axes }) => ({
+	flex: 1,
+	minWidth: 0,
+	minHeight: 0,
+	overflowX: axes === "y" ? "hidden" : "auto",
+	overflowY: axes === "x" ? "hidden" : "auto",
+	overscrollBehaviorX: axes === "y" ? "auto" : "none",
+	overscrollBehaviorY: axes === "x" ? "auto" : "none",
+	scrollbarWidth: "none",
+	"&::-webkit-scrollbar": { display: "none" }
+}));
+const ScrollAreaTrack = styled("div", {
+	name: "ScrollArea",
+	slot: "track",
+	label: "ScrollAreaTrack",
+	shouldForwardProp: createShouldForwardProp(["isDragging", "axis"])
+})(({ theme, isDragging, axis }) => {
+	const line = `${theme.borderWidths.thin} solid ${isDragging ? (0, src_exports.get)(theme, "border.default") : "transparent"}`;
+	return {
+		position: "absolute",
+		...axis === "y" ? {
+			top: 0,
+			right: 0,
+			bottom: 0,
+			width: theme.space[1.25],
+			borderLeft: line
+		} : {
+			left: 0,
+			right: 0,
+			bottom: 0,
+			height: theme.space[1.25],
+			borderTop: line
+		},
+		backgroundColor: isDragging ? (0, src_exports.get)(theme, "background.scrollbarTrack") : "transparent",
+		"&:hover": {
+			borderColor: (0, src_exports.get)(theme, "border.default"),
+			backgroundColor: (0, src_exports.get)(theme, "background.scrollbarTrack")
+		}
+	};
+});
+const ScrollAreaThumb = styled("div", {
+	name: "ScrollArea",
+	slot: "thumb",
+	label: "ScrollAreaThumb",
+	shouldForwardProp: createShouldForwardProp(["isShown", "axis"])
+})(({ theme, isShown, axis }) => {
+	const inset = `calc((${theme.space[1.25]} - ${theme.space[.75]}) / 2 - ${theme.borderWidths.thin})`;
+	return {
+		position: "absolute",
+		...axis === "y" ? {
+			left: inset,
+			width: theme.space[.75]
+		} : {
+			top: inset,
+			height: theme.space[.75]
+		},
+		borderRadius: "9999px",
+		backgroundColor: (0, src_exports.get)(theme, "background.scrollbar"),
+		opacity: isShown ? 1 : 0,
+		transition: `opacity ${theme.transitions.duration.short}ms`,
+		"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+	};
+});
+function ScrollBar({ box, axis }) {
+	const { thumb, onTrackPointerDown, isDragging } = useScrollThumb(box, axis);
+	if (thumb === null) return null;
+	const place = axis === "y" ? {
+		top: `${thumb.start}%`,
+		height: `${thumb.size}%`
+	} : {
+		left: `${thumb.start}%`,
+		width: `${thumb.size}%`
+	};
+	return /* @__PURE__ */ jsx(ScrollAreaTrack, {
+		"aria-hidden": true,
+		"data-scroll-track": axis,
+		axis,
+		isDragging,
+		onPointerDown: onTrackPointerDown,
+		children: /* @__PURE__ */ jsx(ScrollAreaThumb, {
+			"data-scroll-thumb": true,
+			axis,
+			isShown: isDragging,
+			style: place
+		})
+	});
+}
+/**
+* @description A scrolling area whose scrollbars are drawn over its content rather than beside
+* it - so a rounded panel keeps its corner clean - and show only while the pointer is over it or
+* focus is inside. Scrolling itself stays native: the wheel, the keyboard and touch work as they
+* do anywhere. Each axis that overflows gets a track, down the right edge or along the bottom,
+* whose thumb drags and whose track pages. It grows to its content and no further than its
+* container, or `maxHeight`, allows. Colors come from `theme.background.scrollbar` and
+* `scrollbarTrack`, its size from `theme.space`.
+*/
+function ScrollArea({ children, axes: axesProp, viewportRef, tabIndex, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, className, "data-testid": dataTestid, ...rest }) {
+	const dp = useDefaultProps("ScrollArea");
+	const axes = axesProp ?? dp.axes ?? "y";
+	const box = useRef(null);
+	const mergedRef = useMergedRefs(box, viewportRef);
+	return /* @__PURE__ */ jsxs(ScrollAreaRoot, {
+		className,
+		"data-testid": dataTestid,
+		...rest,
+		children: [
+			/* @__PURE__ */ jsx(ScrollAreaViewport, {
+				ref: mergedRef,
+				axes,
+				"data-scroll-viewport": true,
+				tabIndex,
+				role: ariaLabel || ariaLabelledby ? "region" : void 0,
+				"aria-label": ariaLabel,
+				"aria-labelledby": ariaLabelledby,
+				children
+			}),
+			axes !== "x" && /* @__PURE__ */ jsx(ScrollBar, {
+				box,
+				axis: "y"
+			}),
+			axes !== "y" && /* @__PURE__ */ jsx(ScrollBar, {
+				box,
+				axis: "x"
+			})
+		]
+	});
+}
+//#endregion
+export { ScrollArea };

package/dist/Select.cjs

@@ -1,12 +1,12 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.cjs");
+const require_theme = require("./theme-DzfwuzMZ.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
-const require_theme = require("./theme-BxXuXRgQ.cjs");
-const require_Icon = require("./Icon-Cvuhp9ek.cjs");
+const require_Icon = require("./Icon-BE7bRsqR.cjs");
+const require_inputVariantStyles = require("./inputVariantStyles-BUK_62Ra.cjs");
 const require_FormControl = require("./FormControl.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 const require_NativeSelect = require("./NativeSelect.cjs");
-const require_Popover = require("./Popover-CiZfgiKE.cjs");
+const require_Popover = require("./Popover-xyJTSjZy.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");
@@ -137,14 +137,10 @@ const borderRadiusStyle = ({ variant: v, borderRadius, theme }) => {
 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`);
-	const focusColor = (0, require_src.src_exports.get)(theme, `palette.${require_themeDefault.themeDefault(theme, "color", "primary")}.main`);
 	return {
 		...open ? { borderColor: activeColor } : {},
 		"&:focus": { borderColor: activeColor },
-		"&:focus-visible": {
-			outline: `2px solid ${focusColor}`,
-			outlineOffset: "2px"
-		}
+		"&:focus-visible": require_inputVariantStyles.getFocusRing(theme, color, error)
 	};
 };
 const backgroundStyle = ({ color, textColor, bg, variant: v, theme }) => ({
@@ -164,7 +160,8 @@ const sizeVariants = ({ theme, sizeToken }) => {
 		fontSize: theme.fontSizes[s.fontSize]
 	};
 };
-const layoutStyles = ({ fullWidth, disabled }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: require_inputVariantStyles.getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -230,7 +227,7 @@ const ListBox = require_src.styled("ul", {
 	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 }) {
+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: labelIdProp, "aria-label": ariaLabel, className, "data-testid": dataTestid, ...spaceProps }) {
 	const fc = require_FormControl.useFormControl({
 		id: idProp,
 		error: errorProp,
@@ -242,6 +239,7 @@ function Select({ children, native = false, multiple = false, autoWidth = false,
 		textColor: textColorProp
 	});
 	const { id, error, disabled, required, size, fullWidth } = fc;
+	const labelId = labelIdProp ?? fc.labelId;
 	const theme = require_theme.useTheme();
 	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
 	const bg = bgProp ?? require_themeDefault.themeDefault(theme, "inputBg", "terminal");
@@ -462,8 +460,8 @@ function NonNativeSelect({ children, options, value, autoWidth, onChangeValue, m
 				}), /* @__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",
+				size,
+				color: "inherit",
 				...iconProps
 			})]
 		}),

package/dist/Select.d.cts

@@ -1,5 +1,5 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
-import { n as IconProps, r as IconName } from "./index-qlfNErNd.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
+import { n as IconProps, r as IconName } from "./index-05VGk0y_.cjs";
 import { ReactNode } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Select/utils/isOptionSelected.d.ts
@@ -64,6 +64,6 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   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;
+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: labelIdProp, '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

@@ -1,5 +1,5 @@
-import { V as Theme } from "./index-CVNJEUwJ.mjs";
-import { n as IconProps, r as IconName } from "./index-BqpS_Huq.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
+import { n as IconProps, r as IconName } from "./index-DNj5P2NH.mjs";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 import { ReactNode } from "react";
 //#region src/Select/utils/isOptionSelected.d.ts
@@ -64,6 +64,6 @@ interface SelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>, 'width
   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;
+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: labelIdProp, '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.mjs

@@ -1,13 +1,13 @@
 import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { r as useTheme } from "./theme-oBfFhJm9.mjs";
 import { t as themeDefault } from "./themeDefault-Z3KmyIbm.mjs";
-import { r as useTheme } from "./theme-Z9_QludW.mjs";
-import { t as Icon } from "./Icon-DlheCTJb.mjs";
+import { t as Icon } from "./Icon-0hPpk-WZ.mjs";
+import { n as getFocusRing, r as getInputMinWidth, t as inputVariantStyles } from "./inputVariantStyles-q_cZsCJg.mjs";
 import { useFormControl } from "./FormControl.mjs";
-import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
 import { NativeSelect } from "./NativeSelect.mjs";
-import { t as Popover } from "./Popover-QjM5Z1CR.mjs";
+import { t as Popover } from "./Popover-Neeqs_7l.mjs";
 import { Children, cloneElement, isValidElement, useCallback, useId, useState } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Select/hooks/useSelectPopover.ts
 /**
 * Owns `Select`'s open state (controlled or uncontrolled) and fires the open/close
@@ -135,14 +135,10 @@ const borderRadiusStyle = ({ variant: v, borderRadius, theme }) => {
 const colorBorder = ({ color, error, theme }) => ({ borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.light`) });
 const activeBorder = ({ color, error, open, theme }) => {
 	const activeColor = error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`);
-	const focusColor = (0, src_exports.get)(theme, `palette.${themeDefault(theme, "color", "primary")}.main`);
 	return {
 		...open ? { borderColor: activeColor } : {},
 		"&:focus": { borderColor: activeColor },
-		"&:focus-visible": {
-			outline: `2px solid ${focusColor}`,
-			outlineOffset: "2px"
-		}
+		"&:focus-visible": getFocusRing(theme, color, error)
 	};
 };
 const backgroundStyle = ({ color, textColor, bg, variant: v, theme }) => ({
@@ -162,7 +158,8 @@ const sizeVariants = ({ theme, sizeToken }) => {
 		fontSize: theme.fontSizes[s.fontSize]
 	};
 };
-const layoutStyles = ({ fullWidth, disabled }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -228,7 +225,7 @@ const ListBox = styled("ul", {
 	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 }) {
+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: labelIdProp, "aria-label": ariaLabel, className, "data-testid": dataTestid, ...spaceProps }) {
 	const fc = useFormControl({
 		id: idProp,
 		error: errorProp,
@@ -240,6 +237,7 @@ function Select({ children, native = false, multiple = false, autoWidth = false,
 		textColor: textColorProp
 	});
 	const { id, error, disabled, required, size, fullWidth } = fc;
+	const labelId = labelIdProp ?? fc.labelId;
 	const theme = useTheme();
 	const color = fc.color ?? themeDefault(theme, "color", "primary");
 	const bg = bgProp ?? themeDefault(theme, "inputBg", "terminal");
@@ -420,7 +418,7 @@ function NonNativeSelect({ children, options, value, autoWidth, onChangeValue, m
 			onSelect: selectValue
 		});
 	});
-	return /* @__PURE__ */ jsxs(Fragment, { children: [
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [
 		/* @__PURE__ */ jsxs(Trigger, {
 			ref: setAnchorEl,
 			role: "combobox",
@@ -460,8 +458,8 @@ function NonNativeSelect({ children, options, value, autoWidth, onChangeValue, m
 				}), /* @__PURE__ */ jsx(TriggerValue, { children: showPlaceholder ? placeholder ?? "​" : display })]
 			}), /* @__PURE__ */ jsx(Icon, {
 				name: iconName ?? (open ? "expand_less" : "expand_more"),
-				size: "1.25rem",
-				color: "secondary",
+				size,
+				color: "inherit",
 				...iconProps
 			})]
 		}),

package/dist/Sidebar/Sidebar.d.cts

@@ -1,4 +1,4 @@
-import { Wt as FlexProps } from "../index-DmJ7yWWi.cjs";
+import { dn as FlexProps } from "../index-XN4-ZqTB.cjs";
 import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.cjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts

package/dist/Sidebar/Sidebar.d.mts

@@ -1,4 +1,4 @@
-import { Wt as FlexProps } from "../index-CVNJEUwJ.mjs";
+import { dn as FlexProps } from "../index-CRQ7XLri.mjs";
 import { i as SidebarItemVariant, t as SidebarAnchor } from "../SidebarContext-B1lWrt77.mjs";
 import { ElementType, ReactNode } from "react";
 //#region src/Sidebar/Sidebar/Sidebar.d.ts

package/dist/Sidebar/SidebarItem.cjs

@@ -1,9 +1,9 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("../src-DU81aGy9.cjs");
-const require_Flex = require("../Flex.cjs");
 const require_utils = require("../utils.cjs");
 const require_Typography = require("../Typography.cjs");
-const require_Icon = require("../Icon-Cvuhp9ek.cjs");
+const require_Icon = require("../Icon-BE7bRsqR.cjs");
+const require_Flex = require("../Flex.cjs");
 const require_Portal = require("../Portal.cjs");
 const require_Pressable = require("../Pressable.cjs");
 const require_SidebarContext = require("../SidebarContext-jG6OioC-.cjs");

package/dist/Sidebar/SidebarItem.d.cts

@@ -1,6 +1,6 @@
-import { V as Theme } from "../index-DmJ7yWWi.cjs";
-import { r as IconName } from "../index-qlfNErNd.cjs";
-import { i as PressableProps } from "../index-BCnKYNlZ.cjs";
+import { nt as Theme } from "../index-XN4-ZqTB.cjs";
+import { r as IconName } from "../index-05VGk0y_.cjs";
+import { i as PressableProps } from "../index-BUeqNHjb.cjs";
 import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.cjs";
 import { ReactNode } from "react";
 //#region src/Sidebar/SidebarItem/SidebarItem.d.ts

package/dist/Sidebar/SidebarItem.d.mts

@@ -1,6 +1,6 @@
-import { V as Theme } from "../index-CVNJEUwJ.mjs";
-import { r as IconName } from "../index-BqpS_Huq.mjs";
-import { i as PressableProps } from "../index-DrVYWt-X.mjs";
+import { nt as Theme } from "../index-CRQ7XLri.mjs";
+import { r as IconName } from "../index-DNj5P2NH.mjs";
+import { i as PressableProps } from "../index-CWPvdEjP.mjs";
 import { i as SidebarItemVariant } from "../SidebarContext-B1lWrt77.mjs";
 import { ReactNode } from "react";
 //#region src/Sidebar/SidebarItem/SidebarItem.d.ts

package/dist/Sidebar/SidebarItem.mjs

@@ -1,13 +1,13 @@
 import { a as src_exports, o as styled } from "../src-DLGYOJMh.mjs";
-import { Flex } from "../Flex.mjs";
 import { alpha } from "../utils.mjs";
 import { Typography } from "../Typography.mjs";
-import { t as Icon } from "../Icon-DlheCTJb.mjs";
+import { t as Icon } from "../Icon-0hPpk-WZ.mjs";
+import { Flex } from "../Flex.mjs";
 import { Portal } from "../Portal.mjs";
 import { Pressable } from "../Pressable.mjs";
 import { t as SidebarContext } from "../SidebarContext-DgSLwjur.mjs";
 import { useContext, useEffect } from "react";
-import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 //#region src/Sidebar/SidebarItem/SidebarItem.tsx
 const densityStyles = ({ theme, size }) => {
 	const s = theme.sizes[size];
@@ -83,7 +83,7 @@ function SidebarItem({ icon, label, variant, size = "sm", color = "primary", chi
 		onClick?.(event);
 		onSelect?.();
 	};
-	return /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx(SidebarItemRoot, {
+	return /* @__PURE__ */ jsxs(Fragment$1, { children: [/* @__PURE__ */ jsx(SidebarItemRoot, {
 		feedback: resolvedVariant === "plain" ? "none" : "highlight",
 		color,
 		size,

package/dist/Skeleton.d.cts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-DmJ7yWWi.cjs";
+import { nt as Theme } from "./index-XN4-ZqTB.cjs";
 import { HTMLAttributes } from "react";
 import { PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/Skeleton/Skeleton.d.ts

package/dist/Skeleton.d.mts

@@ -1,4 +1,4 @@
-import { V as Theme } from "./index-CVNJEUwJ.mjs";
+import { nt as Theme } from "./index-CRQ7XLri.mjs";
 import { PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/Skeleton/Skeleton.d.ts

package/dist/Slide.cjs

@@ -0,0 +1,51 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_isRtl = require("./isRtl-DTkYHRPo.cjs");
+const require_useTransitionChild = require("./useTransitionChild-CikpU0Yh.cjs");
+let react = require("react");
+//#region src/Slide/Slide.tsx
+const mirrored = {
+	up: "up",
+	down: "down",
+	left: "right",
+	right: "left"
+};
+const getOffset = (node, direction) => {
+	const rect = node.getBoundingClientRect();
+	const toward = require_isRtl.isRtl(node) ? mirrored[direction] : direction;
+	if (toward === "left") return `translateX(${-(rect.left + rect.width)}px)`;
+	if (toward === "right") return `translateX(${window.innerWidth - rect.left}px)`;
+	if (toward === "up") return `translateY(${-(rect.top + rect.height)}px)`;
+	return `translateY(${window.innerHeight - rect.top}px)`;
+};
+/**
+* @description Slides one child in from an edge of the window and back out. The child holds a
+* `ref` and takes a `style`; out, it is hidden. Its way out is measured as it starts, so it
+* leaves the window from wherever it sits. A user who asked for less motion sees it change at
+* once.
+*/
+function Slide({ direction = "down", ...props }) {
+	const offset = (0, react.useRef)("");
+	const measure = (node) => {
+		const { transform } = node.style;
+		node.style.transform = "none";
+		offset.current = getOffset(node, direction);
+		node.style.transform = transform;
+	};
+	return require_useTransitionChild.useTransitionChild(props, ({ status, duration, easing }) => ({
+		transform: status === "entering" || status === "entered" ? "none" : offset.current || void 0,
+		transition: `transform ${duration}ms ${easing}`,
+		visibility: status === "exited" ? "hidden" : void 0
+	}), {
+		onEnter: (node) => {
+			measure(node);
+			const { transition } = node.style;
+			node.style.transition = "none";
+			node.style.transform = offset.current;
+			node.getBoundingClientRect();
+			node.style.transition = transition;
+		},
+		onExit: measure
+	});
+}
+//#endregion
+exports.Slide = Slide;

package/dist/Slide.d.cts

@@ -0,0 +1,17 @@
+import { n as TransitionProps } from "./useTransition-l9dv83-Y.cjs";
+//#region src/Slide/Slide.d.ts
+/** The edge of the window the child slides in from. */
+type SlideDirection = 'up' | 'down' | 'left' | 'right';
+interface SlideProps extends TransitionProps {
+  /** The edge it slides in from - and out to. Mirrored in right-to-left pages. Default: `'down'`. */
+  direction?: SlideDirection;
+}
+/**
+ * @description Slides one child in from an edge of the window and back out. The child holds a
+ * `ref` and takes a `style`; out, it is hidden. Its way out is measured as it starts, so it
+ * leaves the window from wherever it sits. A user who asked for less motion sees it change at
+ * once.
+ */
+declare function Slide({ direction, ...props }: Readonly<SlideProps>): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | null;
+//#endregion
+export { Slide, SlideDirection, SlideProps };