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

package/dist/Rating.mjs

@@ -0,0 +1,371 @@
+import { a as src_exports, i as props, o as styled, t as createShouldForwardProp } from "./src-DLGYOJMh.mjs";
+import { clamp } from "./utils.mjs";
+import { n as useDefaultProps } from "./theme-Z9_QludW.mjs";
+import { t as Icon } from "./Icon-BihOAP4u.mjs";
+import { t as FormControlContext } from "./FormControlContext-CC2kToms.mjs";
+import { useFormControl } from "./FormControl.mjs";
+import { t as isRtl } from "./isRtl-BJDtm86G.mjs";
+import { t as useControlled } from "./useControlled-CBRLsO-H.mjs";
+import { r as roundToPrecision } from "./precision-B1lhxnnO.mjs";
+import { useContext, useId, useRef, useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/Rating/utils/precision.ts
+/** The value under the pointer: along the width, rounded to a step, between one step and `max`. */
+function getHoverValue({ offset, width, max, precision }) {
+	const raw = max * (offset / width) + precision / 2;
+	return clamp(roundToPrecision(raw, precision), precision, max);
+}
+//#endregion
+//#region src/Rating/hooks/useRating.ts
+const NONE = -1;
+const parseRating = (raw) => raw === "" ? null : Number.parseFloat(raw);
+const getDisplayValue = (focus, rounded) => focus === NONE ? rounded : focus;
+/**
+* A rating's state: the rating itself (controlled or not, rounded to its precision), what the
+* pointer and the focus are on, and the handlers that move them. The pointer takes priority over
+* the keys when both change at once, and pressing the chosen item again clears it.
+*/
+function useRating({ value: valueProp, defaultValue, precision, max, rootRef, onChange, onChangeActive }) {
+	const [value, setValue] = useControlled({
+		controlled: valueProp,
+		default: defaultValue ?? null
+	});
+	const rounded = roundToPrecision(value, precision);
+	const [{ hover, focus }, setActive] = useState({
+		hover: NONE,
+		focus: NONE
+	});
+	const handleMouseMove = (event) => {
+		const { left, right, width } = rootRef.current.getBoundingClientRect();
+		if (width === 0) return;
+		const next = getHoverValue({
+			offset: isRtl(rootRef.current) ? right - event.clientX : event.clientX - left,
+			width,
+			max,
+			precision
+		});
+		setActive({
+			hover: next,
+			focus: next
+		});
+		if (hover !== next) onChangeActive?.(event, next);
+	};
+	const handleMouseLeave = (event) => {
+		setActive({
+			hover: NONE,
+			focus: NONE
+		});
+		if (hover !== NONE) onChangeActive?.(event, NONE);
+	};
+	const handleChange = (event) => {
+		const next = hover === NONE ? parseRating(event.currentTarget.value) : hover;
+		setValue(next);
+		onChange?.(event, next);
+	};
+	const handleClear = (event) => {
+		if (event.clientX === 0 && event.clientY === 0) return;
+		setActive({
+			hover: NONE,
+			focus: NONE
+		});
+		setValue(null);
+		if (Number.parseFloat(event.currentTarget.value) === rounded) onChange?.(event, null);
+	};
+	const handleFocus = (event) => {
+		const next = Number.parseFloat(event.currentTarget.value);
+		setActive((previous) => ({
+			hover: previous.hover,
+			focus: next
+		}));
+	};
+	const handleBlur = () => {
+		if (hover !== NONE) return;
+		setActive((previous) => ({
+			hover: previous.hover,
+			focus: NONE
+		}));
+	};
+	return {
+		rounded,
+		displayValue: getDisplayValue(focus, rounded),
+		isActive: hover !== NONE || focus !== NONE,
+		handleMouseMove,
+		handleMouseLeave,
+		handleChange,
+		handleClear,
+		handleFocus,
+		handleBlur
+	};
+}
+//#endregion
+//#region src/Rating/Rating.tsx
+const visuallyHidden = {
+	position: "absolute",
+	width: 1,
+	height: 1,
+	margin: -1,
+	padding: 0,
+	border: 0,
+	overflow: "hidden",
+	clip: "rect(0 0 0 0)",
+	whiteSpace: "nowrap"
+};
+const RatingRoot = styled("span", {
+	name: "Rating",
+	label: "Rating",
+	shouldForwardProp: createShouldForwardProp([
+		...props,
+		"size",
+		"color",
+		"isDisabled",
+		"isReadOnly",
+		"isInField"
+	]),
+	systemProps: [src_exports.space]
+})(({ theme, size, isDisabled, isReadOnly, isInField }) => ({
+	display: isInField ? "flex" : "inline-flex",
+	position: "relative",
+	width: "min-content",
+	fontSize: theme.icon[size],
+	lineHeight: 1,
+	cursor: isReadOnly ? "default" : "pointer",
+	...isDisabled && {
+		opacity: .5,
+		cursor: "not-allowed"
+	},
+	...(isDisabled || isReadOnly) && { pointerEvents: "none" }
+}));
+const focusRing = (theme, color) => {
+	const main = (0, src_exports.get)(theme, `palette.${color}.main`);
+	return {
+		outline: `${theme.borderWidths.base} solid ${main}`,
+		outlineOffset: theme.borderWidths.thin
+	};
+};
+const RatingItem = styled("label", {
+	name: "Rating",
+	slot: "item",
+	label: "RatingItem",
+	shouldForwardProp: createShouldForwardProp(["color"])
+})(({ theme, color }) => ({
+	display: "block",
+	position: "relative",
+	cursor: "inherit",
+	"&:has(input:focus-visible)": focusRing(theme, color)
+}));
+const RatingEmptyLabel = styled("label", {
+	name: "Rating",
+	slot: "emptyLabel",
+	label: "RatingEmptyLabel",
+	shouldForwardProp: createShouldForwardProp(["color"])
+})(({ theme, color }) => ({
+	position: "absolute",
+	inset: 0,
+	pointerEvents: "none",
+	"&:has(input:focus-visible)": focusRing(theme, color)
+}));
+const RatingInput = styled("input", {
+	name: "Rating",
+	slot: "input",
+	label: "RatingInput"
+})(visuallyHidden);
+const RatingText = styled("span", {
+	name: "Rating",
+	slot: "text",
+	label: "RatingText"
+})(visuallyHidden);
+const getIconColor = (theme, { color, isFilled, isError }) => {
+	if (isFilled) return (0, src_exports.get)(theme, `palette.${color}.main`);
+	if (isError) return (0, src_exports.get)(theme, "palette.error.main");
+	return (0, src_exports.get)(theme, "text.disabled");
+};
+const activeTransform = (isActive) => isActive ? "scale(1.2)" : "none";
+const RatingIcon = styled("span", {
+	name: "Rating",
+	slot: "icon",
+	label: "RatingIcon",
+	shouldForwardProp: createShouldForwardProp([
+		"color",
+		"isFilled",
+		"isActive",
+		"isError"
+	])
+})(({ theme, ...style }) => ({
+	display: "flex",
+	flexShrink: 0,
+	width: "max-content",
+	pointerEvents: "none",
+	color: getIconColor(theme, style),
+	transition: "transform 0.2s",
+	transform: activeTransform(style.isActive),
+	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+}));
+const RatingDecimal = styled("span", {
+	name: "Rating",
+	slot: "decimal",
+	label: "RatingDecimal",
+	shouldForwardProp: createShouldForwardProp(["isActive"])
+})(({ isActive }) => ({
+	position: "relative",
+	display: "flex",
+	transition: "transform 0.2s",
+	transform: activeTransform(isActive),
+	"@media (prefers-reduced-motion: reduce)": { transition: "none" }
+}));
+function Item({ itemValue, isFilled, isActive, isChecked, isInteractive, label, labelStyle, icon, emptyIcon, name, required, disabled, color, isError, state }) {
+	const glyph = /* @__PURE__ */ jsx(RatingIcon, {
+		color,
+		isFilled,
+		isActive,
+		isError,
+		children: isFilled ? icon : emptyIcon
+	});
+	if (!isInteractive) return /* @__PURE__ */ jsx(RatingItem, {
+		as: "span",
+		color,
+		style: labelStyle,
+		children: glyph
+	});
+	return /* @__PURE__ */ jsxs(RatingItem, {
+		color,
+		style: labelStyle,
+		children: [
+			glyph,
+			/* @__PURE__ */ jsx(RatingText, { children: label }),
+			/* @__PURE__ */ jsx(RatingInput, {
+				type: "radio",
+				name,
+				value: itemValue,
+				checked: isChecked,
+				required,
+				disabled,
+				onChange: state.handleChange,
+				onClick: state.handleClear,
+				onFocus: state.handleFocus,
+				onBlur: state.handleBlur
+			})
+		]
+	});
+}
+/**
+* @description A rating: a row of icons the user sets - or, `readOnly`, shows. A group of visually
+* hidden native radio inputs, so keys (Tab to the rating, the arrows to change it), assistive
+* technology and forms work as the platform's; hovering previews the value, and pressing the
+* chosen item clears it. In a `FormControl` it takes the field's size, color, error and
+* disabled state, and its `FormLabel` names it.
+*/
+function Rating({ value, defaultValue, onChange, onChangeActive, max: maxProp, precision: precisionProp, highlightSelectedOnly: highlightSelectedOnlyProp, icon: iconProp, emptyIcon: emptyIconProp, getLabelText = String, emptyLabelText, readOnly = false, size: sizeProp, color: colorProp, disabled: disabledProp, required: requiredProp, error: errorProp, name: nameProp, id: idProp, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+	const dp = useDefaultProps("Rating");
+	const isInField = useContext(FormControlContext) !== null;
+	const fc = useFormControl({
+		id: idProp,
+		error: errorProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp ?? dp.size,
+		color: colorProp ?? dp.color
+	});
+	const color = fc.color ?? "warning";
+	const max = maxProp ?? dp.max ?? 5;
+	const precision = precisionProp ?? dp.precision ?? 1;
+	const highlightSelectedOnly = highlightSelectedOnlyProp ?? dp.highlightSelectedOnly ?? false;
+	const icon = iconProp ?? /* @__PURE__ */ jsx(Icon, {
+		name: "star",
+		size: "1em",
+		color: "inherit"
+	});
+	const emptyIcon = emptyIconProp ?? /* @__PURE__ */ jsx(Icon, {
+		name: "star_border",
+		size: "1em",
+		color: "inherit"
+	});
+	const generatedName = useId();
+	const name = nameProp ?? generatedName;
+	const isInput = !readOnly;
+	const rootRef = useRef(null);
+	const state = useRating({
+		value,
+		defaultValue,
+		precision,
+		max,
+		rootRef,
+		onChange,
+		onChangeActive
+	});
+	const shown = state.displayValue ?? 0;
+	const renderItem = (itemValue, labelStyle, isActive = false) => /* @__PURE__ */ jsx(Item, {
+		itemValue,
+		isFilled: highlightSelectedOnly ? itemValue === shown : itemValue <= shown,
+		isActive,
+		isChecked: itemValue === state.rounded,
+		isInteractive: isInput,
+		label: getLabelText(itemValue),
+		labelStyle,
+		icon,
+		emptyIcon,
+		name,
+		required: fc.required,
+		disabled: fc.disabled,
+		color,
+		isError: fc.error,
+		state
+	}, itemValue);
+	const items = Array.from({ length: max }, (_, index) => {
+		const itemValue = index + 1;
+		const isActive = state.isActive && itemValue === Math.ceil(shown);
+		if (precision >= 1) return renderItem(itemValue, void 0, isActive);
+		const steps = Math.round(1 / precision);
+		return /* @__PURE__ */ jsx(RatingDecimal, {
+			isActive,
+			children: Array.from({ length: steps }, (__, step) => {
+				const stepValue = roundToPrecision(itemValue - 1 + (step + 1) * precision, precision);
+				const isLast = step === steps - 1;
+				const width = stepValue === state.displayValue ? `${(step + 1) * precision * 100}%` : "0%";
+				return renderItem(stepValue, isLast ? void 0 : {
+					width,
+					overflow: "hidden",
+					position: "absolute"
+				});
+			})
+		}, itemValue);
+	});
+	const displayLabel = isInput ? void 0 : getLabelText(state.rounded ?? 0);
+	const groupProps = isInput ? {
+		role: "radiogroup",
+		"aria-labelledby": ariaLabelledby ?? fc.labelId,
+		"aria-describedby": ariaDescribedby ?? fc["aria-describedby"],
+		"aria-required": fc.required || void 0,
+		"aria-invalid": fc.error || void 0,
+		onMouseMove: state.handleMouseMove,
+		onMouseLeave: state.handleMouseLeave
+	} : {
+		role: "img",
+		"aria-labelledby": ariaLabelledby
+	};
+	return /* @__PURE__ */ jsxs(RatingRoot, {
+		ref: rootRef,
+		id: fc.id,
+		size: fc.size,
+		color,
+		isDisabled: fc.disabled,
+		isReadOnly: readOnly,
+		isInField,
+		className,
+		"data-testid": dataTestid,
+		"aria-label": ariaLabel ?? displayLabel,
+		...groupProps,
+		...spaceProps,
+		children: [items, isInput && !fc.disabled && emptyLabelText !== void 0 && /* @__PURE__ */ jsxs(RatingEmptyLabel, {
+			color,
+			children: [/* @__PURE__ */ jsx(RatingInput, {
+				type: "radio",
+				name,
+				value: "",
+				checked: state.rounded === null,
+				onChange: state.handleChange
+			}), /* @__PURE__ */ jsx(RatingText, { children: emptyLabelText })]
+		})]
+	});
+}
+//#endregion
+export { Rating };

package/dist/Select.cjs

@@ -2,7 +2,7 @@ Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const require_src = require("./src-DU81aGy9.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-D-EWsBVg.cjs");
 const require_FormControl = require("./FormControl.cjs");
 const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
 const require_NativeSelect = require("./NativeSelect.cjs");
@@ -230,7 +230,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 +242,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");

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 { W as Theme } from "./index-DJ0f69wh.cjs";
+import { n as IconProps, r as IconName } from "./index-Dv_fk1_F.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 { W as Theme } from "./index-CJhK7JND.mjs";
+import { n as IconProps, r as IconName } from "./index-ha1WjSZ5.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 { 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-BihOAP4u.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 { 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
@@ -228,7 +228,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 +240,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 +421,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",

package/dist/Sidebar/Sidebar.d.cts

@@ -1,4 +1,4 @@
-import { Wt as FlexProps } from "../index-DmJ7yWWi.cjs";
+import { Jt as FlexProps } from "../index-DJ0f69wh.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 { Jt as FlexProps } from "../index-CJhK7JND.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

@@ -3,7 +3,7 @@ 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-D-EWsBVg.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 { W as Theme } from "../index-DJ0f69wh.cjs";
+import { r as IconName } from "../index-Dv_fk1_F.cjs";
+import { i as PressableProps } from "../index-YKrfFC_I.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 { W as Theme } from "../index-CJhK7JND.mjs";
+import { r as IconName } from "../index-ha1WjSZ5.mjs";
+import { i as PressableProps } from "../index-CUz2h5xY.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

@@ -2,12 +2,12 @@ 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-BihOAP4u.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 { W as Theme } from "./index-DJ0f69wh.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 { W as Theme } from "./index-CJhK7JND.mjs";
 import { PaddingProps, SpaceProps } from "@soroush.tech/styled-system";
 import { HTMLAttributes } from "react";
 //#region src/Skeleton/Skeleton.d.ts

package/dist/Switch.cjs

@@ -3,6 +3,7 @@ const require_src = require("./src-DU81aGy9.cjs");
 const require_themeDefault = require("./themeDefault-Cebi08Cv.cjs");
 const require_utils = require("./utils.cjs");
 const require_theme = require("./theme-BxXuXRgQ.cjs");
+const require_FormControl = require("./FormControl.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");
@@ -65,10 +66,7 @@ const INSIDE_TRANSLATE = {
 	md: "20px",
 	lg: "24px"
 };
-const knownSize = (size, theme) => {
-	const resolved = size ?? require_themeDefault.themeDefault(theme, "size", "md");
-	return resolved === "sm" || resolved === "lg" ? resolved : "md";
-};
+const knownSize = (size) => size === "sm" || size === "lg" ? size : "md";
 const CheckMarkIcon = () => /* @__PURE__ */ (0, react_jsx_runtime.jsx)("svg", {
 	viewBox: "0 0 12 12",
 	width: "0.6em",
@@ -120,15 +118,15 @@ const SwitchTrack = require_src.styled("span", {
 		display: "inline-block",
 		position: "relative",
 		flexShrink: 0,
-		width: OUTSIDE_TRACK[knownSize(size, theme)].width,
-		height: OUTSIDE_THUMB[knownSize(size, theme)],
+		width: OUTSIDE_TRACK[knownSize(size)].width,
+		height: OUTSIDE_THUMB[knownSize(size)],
 		"&::before": {
 			content: "\"\"",
 			position: "absolute",
 			top: "50%",
 			left: 0,
 			right: 0,
-			height: OUTSIDE_TRACK[knownSize(size, theme)].height,
+			height: OUTSIDE_TRACK[knownSize(size)].height,
 			transform: "translateY(-50%)",
 			borderRadius: "999px",
 			backgroundColor: trackBg,
@@ -139,8 +137,8 @@ const SwitchTrack = require_src.styled("span", {
 		display: "inline-block",
 		position: "relative",
 		flexShrink: 0,
-		width: INSIDE_TRACK[knownSize(size, theme)].width,
-		height: INSIDE_TRACK[knownSize(size, theme)].height,
+		width: INSIDE_TRACK[knownSize(size)].width,
+		height: INSIDE_TRACK[knownSize(size)].height,
 		borderRadius: "999px",
 		backgroundColor: trackBg,
 		transition: "background-color 0.3s ease"
@@ -152,8 +150,8 @@ const SwitchThumb = require_src.styled("span", {
 	label: "SwitchThumb",
 	shouldForwardProp: (p) => p !== "size" && p !== "variant"
 })(({ size, variant = "outside", theme }) => {
-	const thumbSize = variant === "outside" ? OUTSIDE_THUMB[knownSize(size, theme)] : INSIDE_THUMB[knownSize(size, theme)];
-	const thumbStart = variant === "outside" ? OUTSIDE_THUMB_START[knownSize(size, theme)] : INSIDE_THUMB_START[knownSize(size, theme)];
+	const thumbSize = variant === "outside" ? OUTSIDE_THUMB[knownSize(size)] : INSIDE_THUMB[knownSize(size)];
+	const thumbStart = variant === "outside" ? OUTSIDE_THUMB_START[knownSize(size)] : INSIDE_THUMB_START[knownSize(size)];
 	const transitionDuration = variant === "inside" ? "0.3s" : "0.15s";
 	return {
 		position: "absolute",
@@ -185,7 +183,7 @@ const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.cr
 ]);
 const baseStyle = ({ disabled, size, variant = "outside", theme, color = require_themeDefault.themeDefault(theme, "neutralColor", "default") }) => {
 	const focusRing = theme.palette[require_themeDefault.themeDefault(theme, "color", "primary")].main;
-	const thumbTranslate = variant === "outside" ? OUTSIDE_TRANSLATE[knownSize(size, theme)] : INSIDE_TRANSLATE[knownSize(size, theme)];
+	const thumbTranslate = variant === "outside" ? OUTSIDE_TRANSLATE[knownSize(size)] : INSIDE_TRANSLATE[knownSize(size)];
 	const gap = theme?.space?.[1];
 	return {
 		display: "inline-flex",
@@ -251,7 +249,7 @@ const baseStyle = ({ disabled, size, variant = "outside", theme, color = require
 	};
 };
 const colorStyle = ({ theme, color = require_themeDefault.themeDefault(theme, "neutralColor", "default") }) => {
-	return { color: theme.palette[color].main };
+	return { color: color === "default" ? theme.text.secondary : theme.palette[color].main };
 };
 const edgeStyle = ({ edge }) => {
 	if (!edge) return {};
@@ -266,8 +264,17 @@ const SwitchRoot = require_src.styled("label", {
 	shouldForwardProp,
 	systemProps: [require_src.src_exports.space]
 })(baseStyle, colorStyle, edgeStyle);
-function Switch({ checked, defaultChecked, disabled = false, disableRipple: _disableRipple, color, size, variant: variantProp, marked = false, bg, edge = false, icon, checkedIcon, onChange, id, required, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
+function Switch({ checked, defaultChecked, disabled: disabledProp, disableRipple: _disableRipple, color: colorProp, size: sizeProp, variant: variantProp, marked = false, bg, edge = false, icon, checkedIcon, onChange, id: idProp, required: requiredProp, children, className, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledby, "aria-describedby": ariaDescribedby, "data-testid": dataTestid, ...spaceProps }) {
 	const theme = require_theme.useTheme();
+	const fc = require_FormControl.useFormControl({
+		id: idProp,
+		disabled: disabledProp,
+		required: requiredProp,
+		size: sizeProp
+	});
+	const { id, disabled, required, size } = fc;
+	const color = colorProp ?? fc.color;
+	const describedBy = ariaDescribedby ?? fc["aria-describedby"];
 	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "switchVariant", "outside");
 	const effectiveIcon = icon ?? (marked && variant === "outside" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(XMarkIcon, {}) : null);
 	const effectiveCheckedIcon = checkedIcon ?? (marked && variant === "outside" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CheckMarkIcon, {}) : null);
@@ -298,7 +305,7 @@ function Switch({ checked, defaultChecked, disabled = false, disableRipple: _dis
 				onKeyDown: handleKeyDown,
 				"aria-label": ariaLabel,
 				"aria-labelledby": ariaLabelledby,
-				"aria-describedby": ariaDescribedby
+				"aria-describedby": describedBy
 			}),
 			/* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SwitchTrack, {
 				className: "sw-track",