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

package/dist/NativeSelect.cjs

@@ -1,10 +1,10 @@
 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");
 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");
@@ -24,10 +24,10 @@ const baseStyle = {
 	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") }) => {
+const backgroundStyle = ({ theme, textColor, color = require_themeDefault.themeDefault(theme, "color", "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}`),
+		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")
@@ -39,17 +39,13 @@ const colorBorder = ({ theme, color = require_themeDefault.themeDefault(theme, "
 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 focusVisibleRing = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => ({ "&:has(:focus-visible)": require_inputVariantStyles.getFocusRing(theme, color, error) });
 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 }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: require_inputVariantStyles.getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -71,7 +67,7 @@ const NativeSelectRoot = require_src.styled("div", {
 	shouldForwardProp,
 	systemProps: [require_src.src_exports.space, widthStyles]
 })(baseStyle, require_inputVariantStyles.inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
-const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor";
+const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor" && prop !== "accent";
 const sizeVariants = ({ theme, sizeToken }) => {
 	const s = theme.sizes[sizeToken];
 	return {
@@ -82,9 +78,9 @@ const sizeVariants = ({ theme, sizeToken }) => {
 		fontSize: theme.fontSizes[s.fontSize]
 	};
 };
-const selectSurface = ({ theme, bg = require_themeDefault.themeDefault(theme, "inputBg", "terminal"), textColor }) => {
+const selectSurface = ({ theme, bg = require_themeDefault.themeDefault(theme, "inputBg", "terminal"), textColor, accent }) => {
 	const backgroundColor = (0, require_src.src_exports.get)(theme, `background.${bg}`);
-	const color = (0, require_src.src_exports.get)(theme, `text.${textColor}`);
+	const color = textColor ? (0, require_src.src_exports.get)(theme, `text.${textColor}`) : (0, require_src.src_exports.get)(theme, `palette.${accent}.main`);
 	return {
 		backgroundColor,
 		color,
@@ -137,7 +133,7 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 	const { id, error, disabled, required, size, fullWidth } = fc;
 	const theme = require_theme.useTheme();
 	const color = fc.color ?? require_themeDefault.themeDefault(theme, "color", "primary");
-	const textColor = fc.textColor ?? require_themeDefault.themeDefault(theme, "accentTextColor", "primary");
+	const textColor = fc.textColor;
 	const variant = variantProp ?? require_themeDefault.themeDefault(theme, "inputVariant", "default");
 	const handleChange = (event) => {
 		const match = options.find((option) => String(option.value) === event.target.value);
@@ -165,6 +161,7 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			sizeToken: size,
 			bg,
 			textColor,
+			accent: color,
 			value,
 			defaultValue: uncontrolledDefault,
 			onChange: handleChange,
@@ -180,8 +177,8 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			}, String(option.value)))]
 		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(DropdownIcon, {
 			name: iconName,
-			size: "1.25rem",
-			color: "secondary",
+			size,
+			color: "inherit",
 			...iconProps
 		})]
 	});

package/dist/NativeSelect.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 { SelectHTMLAttributes } from "react";
 import { LayoutProps, SpaceProps } from "@soroush.tech/styled-system";
 //#region src/NativeSelect/NativeSelect.d.ts
@@ -27,7 +27,7 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   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`. */
+  /** Text color of the selected value - resolves against `theme.text`. Default: the accent `color`'s `main`. */
   textColor?: NativeSelectTextColor;
   /** Background color - resolves against `theme.background`. Default: `'terminal'`. */
   bg?: NativeSelectBackgroundToken;

package/dist/NativeSelect.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 { SelectHTMLAttributes } from "react";
 //#region src/NativeSelect/NativeSelect.d.ts
@@ -27,7 +27,7 @@ interface NativeSelectProps extends SpaceProps<Theme>, Pick<LayoutProps<Theme>,
   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`. */
+  /** Text color of the selected value - resolves against `theme.text`. Default: the accent `color`'s `main`. */
   textColor?: NativeSelectTextColor;
   /** Background color - resolves against `theme.background`. Default: `'terminal'`. */
   bg?: NativeSelectBackgroundToken;

package/dist/NativeSelect.mjs

@@ -1,9 +1,9 @@
 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 "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/NativeSelect/NativeSelect.tsx
@@ -22,10 +22,10 @@ const baseStyle = {
 	alignItems: "center",
 	transition: "border-color 0.15s ease"
 };
-const backgroundStyle = ({ theme, textColor = themeDefault(theme, "accentTextColor", "primary"), bg = themeDefault(theme, "inputBg", "terminal") }) => {
+const backgroundStyle = ({ theme, textColor, color = themeDefault(theme, "color", "primary"), bg = themeDefault(theme, "inputBg", "terminal") }) => {
 	return {
 		backgroundColor: (0, src_exports.get)(theme, `background.${bg}`),
-		color: (0, src_exports.get)(theme, `text.${textColor}`),
+		color: textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : (0, src_exports.get)(theme, `palette.${color}.main`),
 		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
 		fontSize: (0, src_exports.get)(theme, "fontSizes.1"),
 		lineHeight: (0, src_exports.get)(theme, "lineHeights.base")
@@ -37,17 +37,13 @@ const colorBorder = ({ theme, color = themeDefault(theme, "color", "primary"), e
 const focusWithinColor = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
 	return { "&:focus-within": { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`) } };
 };
-const focusVisibleRing = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
-	return { "&:has(:focus-visible)": {
-		outline: `2px solid ${error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`)}`,
-		outlineOffset: "2px"
-	} };
-};
+const focusVisibleRing = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => ({ "&:has(:focus-visible)": getFocusRing(theme, color, error) });
 const borderRadiusStyle = ({ variant: v = "default", borderRadius, theme }) => {
 	if (v === "underline" || v === "text" || !borderRadius) return {};
 	return { borderRadius: (0, src_exports.get)(theme, `radii.${borderRadius}`) };
 };
-const layoutStyles = ({ fullWidth, disabled }) => ({
+const layoutStyles = ({ theme, fullWidth, disabled }) => ({
+	minWidth: getInputMinWidth(theme),
 	...fullWidth ? {
 		display: "flex",
 		width: "100%"
@@ -69,7 +65,7 @@ const NativeSelectRoot = styled("div", {
 	shouldForwardProp,
 	systemProps: [src_exports.space, widthStyles]
 })(baseStyle, inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
-const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor";
+const shouldForwardNativeSelectProps = (prop) => prop !== "sizeToken" && prop !== "bg" && prop !== "textColor" && prop !== "accent";
 const sizeVariants = ({ theme, sizeToken }) => {
 	const s = theme.sizes[sizeToken];
 	return {
@@ -80,9 +76,9 @@ const sizeVariants = ({ theme, sizeToken }) => {
 		fontSize: theme.fontSizes[s.fontSize]
 	};
 };
-const selectSurface = ({ theme, bg = themeDefault(theme, "inputBg", "terminal"), textColor }) => {
+const selectSurface = ({ theme, bg = themeDefault(theme, "inputBg", "terminal"), textColor, accent }) => {
 	const backgroundColor = (0, src_exports.get)(theme, `background.${bg}`);
-	const color = (0, src_exports.get)(theme, `text.${textColor}`);
+	const color = textColor ? (0, src_exports.get)(theme, `text.${textColor}`) : (0, src_exports.get)(theme, `palette.${accent}.main`);
 	return {
 		backgroundColor,
 		color,
@@ -135,7 +131,7 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 	const { id, error, disabled, required, size, fullWidth } = fc;
 	const theme = useTheme();
 	const color = fc.color ?? themeDefault(theme, "color", "primary");
-	const textColor = fc.textColor ?? themeDefault(theme, "accentTextColor", "primary");
+	const textColor = fc.textColor;
 	const variant = variantProp ?? themeDefault(theme, "inputVariant", "default");
 	const handleChange = (event) => {
 		const match = options.find((option) => String(option.value) === event.target.value);
@@ -163,6 +159,7 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			sizeToken: size,
 			bg,
 			textColor,
+			accent: color,
 			value,
 			defaultValue: uncontrolledDefault,
 			onChange: handleChange,
@@ -178,8 +175,8 @@ function NativeSelect({ options, value, defaultValue, onChange, placeholder, bor
 			}, String(option.value)))]
 		}), /* @__PURE__ */ jsx(DropdownIcon, {
 			name: iconName,
-			size: "1.25rem",
-			color: "secondary",
+			size,
+			color: "inherit",
 			...iconProps
 		})]
 	});