@soroush.tech/design-system 0.1.0 → 1.1.0

package/dist/TextInput-6o37Zddp.cjs

@@ -1,231 +0,0 @@
-const require_src = require("./src-BiocWFSR.cjs");
-const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
-const require_FormControl = require("./FormControl.cjs");
-const require_inputVariantStyles = require("./inputVariantStyles-BBkkYQtE.cjs");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-let _emotion_react = require("@emotion/react");
-//#region src/TextInput/TextAreaAutoResize.tsx
-const adjust = (el, minRows, maxRows) => {
-	const style = getComputedStyle(el);
-	const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2;
-	const paddingY = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
-	el.style.height = "auto";
-	const scrollHeight = el.scrollHeight;
-	const min = minRows == null ? 0 : Number(minRows) * lineHeight + paddingY;
-	const max = maxRows == null ? Infinity : Number(maxRows) * lineHeight + paddingY;
-	el.style.height = `${Math.min(max, Math.max(min, scrollHeight))}px`;
-	el.style.overflow = scrollHeight > max ? "auto" : "hidden";
-};
-const TextAreaAutoResize = (0, react.forwardRef)(function TextAreaAutoResize({ value, onChange, minRows, maxRows, ...rest }, forwardedRef) {
-	const innerRef = (0, react.useRef)(null);
-	const setRef = (0, react.useCallback)((el) => {
-		innerRef.current = el;
-		if (typeof forwardedRef === "function") forwardedRef(el);
-		else if (forwardedRef) forwardedRef.current = el;
-	}, [forwardedRef]);
-	(0, react.useLayoutEffect)(() => {
-		adjust(innerRef.current, minRows, maxRows);
-	}, [
-		value,
-		minRows,
-		maxRows
-	]);
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("textarea", {
-		ref: setRef,
-		value,
-		onChange: (0, react.useCallback)((e) => {
-			adjust(e.currentTarget, minRows, maxRows);
-			onChange?.(e);
-		}, [
-			onChange,
-			minRows,
-			maxRows
-		]),
-		...rest
-	});
-});
-//#endregion
-//#region src/TextInput/TextInput.tsx
-const shouldForwardProp = (0, _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp)([
-	..._soroush_tech_styled_system_should_forward_prop.props,
-	"as",
-	"color",
-	"textColor",
-	"variant",
-	"error",
-	"disabled",
-	"fullWidth"
-]);
-const baseStyle = {
-	display: "inline-flex",
-	alignItems: "center",
-	transition: "border-color 0.15s ease"
-};
-const backgroundStyle = ({ theme, textColor = require_themeDefault.themeDefault(theme, "accentTextColor", "primary") }) => {
-	return {
-		backgroundColor: (0, require_src.src_exports.get)(theme, `background.${require_themeDefault.themeDefault(theme, "inputBg", "terminal")}`),
-		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 focusVisibleRing = ({ theme }) => ({ "&:has(:focus-visible)": {
-	outline: `2px solid ${(0, require_src.src_exports.get)(theme, `palette.${require_themeDefault.themeDefault(theme, "color", "primary")}.main`)}`,
-	outlineOffset: "2px"
-} });
-const focusWithinColor = ({ theme, color = require_themeDefault.themeDefault(theme, "color", "primary"), error }) => ({ "&: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 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 nativeBaseStyles = {
-	flex: 1,
-	minWidth: 0,
-	width: "100%",
-	border: "none",
-	outline: "none",
-	background: "transparent",
-	color: "inherit",
-	fontFamily: "inherit",
-	lineHeight: "inherit",
-	"&::placeholder": {
-		color: "inherit",
-		opacity: .5
-	},
-	"&:disabled": { cursor: "not-allowed" }
-};
-const textAreaBaseStyles = {
-	resize: "none",
-	overflow: "auto"
-};
-function InputBase({ inputSize, inputComponent, ...props }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(inputComponent ?? "input", {
-		...props,
-		size: inputSize
-	});
-}
-const widthStyles = (0, require_src.src_exports.system)({
-	width: true,
-	minWidth: true,
-	maxWidth: true
-});
-const sizeVariants = ({ theme, size }) => {
-	const s = theme.sizes[size];
-	return {
-		paddingTop: theme.space[s.paddingTop],
-		paddingBottom: theme.space[s.paddingBottom],
-		paddingLeft: theme.space[s.paddingLeft],
-		paddingRight: theme.space[s.paddingRight],
-		fontSize: theme.fontSizes[s.fontSize]
-	};
-};
-const TextInputRoot = require_src.styled("div", {
-	name: "TextInput",
-	label: "TextInput",
-	shouldForwardProp,
-	systemProps: [require_src.src_exports.space, widthStyles]
-})(baseStyle, require_inputVariantStyles.inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
-const StyledInput = require_src.styled(InputBase, {
-	name: "TextInput",
-	slot: "input",
-	label: "TextInputInput"
-})(nativeBaseStyles, sizeVariants);
-const shouldForwardInputProps = (prop) => prop !== "size";
-const StyledTextarea = require_src.styled("textarea", {
-	name: "TextInput",
-	slot: "input",
-	label: "TextInputTextarea",
-	shouldForwardProp: shouldForwardInputProps
-})(nativeBaseStyles, textAreaBaseStyles, sizeVariants);
-const StyledAutoResizeTextarea = require_src.styled(TextAreaAutoResize, {
-	name: "TextInput",
-	slot: "input",
-	label: "TextInputTextarea",
-	shouldForwardProp: shouldForwardInputProps
-})(nativeBaseStyles, textAreaBaseStyles, sizeVariants);
-function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline = false, name, onChange, placeholder, readOnly, required: requiredProp, resize = false, rows, size: sizeProp, type = "text", value, 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 isAutoResize = resize;
-	const isMultiline = multiline || rows !== void 0 && Number(rows) > 1;
-	const isTextarea = (isAutoResize || isMultiline) && (!type || type === "text");
-	const rootClassName = [className, classes?.root].filter(Boolean).join(" ") || void 0;
-	const resolvedInputComponent = inputComponent ?? components?.Input;
-	const inputElProps = {
-		...inputProps,
-		id,
-		name,
-		disabled,
-		required,
-		autoComplete,
-		autoFocus,
-		placeholder,
-		readOnly,
-		onChange,
-		value,
-		className: classes?.input,
-		type: isTextarea ? void 0 : type,
-		rows: isMultiline && rows !== void 0 ? Number(rows) : void 0,
-		size,
-		"aria-describedby": inputProps?.["aria-describedby"] ?? fc["aria-describedby"]
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(TextInputRoot, {
-		as: components?.Root,
-		color,
-		textColor,
-		variant,
-		error,
-		disabled,
-		fullWidth,
-		borderRadius,
-		className: rootClassName,
-		"data-testid": dataTestid,
-		...spaceProps,
-		children: isTextarea && isAutoResize ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAutoResizeTextarea, {
-			...inputElProps,
-			minRows: minRows ?? rows,
-			maxRows
-		}) : isTextarea ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledTextarea, { ...inputElProps }) : /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledInput, {
-			inputComponent: resolvedInputComponent,
-			inputSize,
-			...inputElProps
-		})
-	});
-}
-//#endregion
-Object.defineProperty(exports, "TextInput", {
-	enumerable: true,
-	get: function() {
-		return TextInput;
-	}
-});

package/dist/TextInput-D_lHYJlL.mjs

@@ -1,224 +0,0 @@
-import { a as createShouldForwardProp, c as props, d as styled, l as src_exports, u as useTheme } from "./src-DcNT2aIK.mjs";
-import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
-import { useFormControl } from "./FormControl.mjs";
-import { t as inputVariantStyles } from "./inputVariantStyles-CcqpGfuP.mjs";
-import { forwardRef, useCallback, useLayoutEffect, useRef } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/TextInput/TextAreaAutoResize.tsx
-const adjust = (el, minRows, maxRows) => {
-	const style = getComputedStyle(el);
-	const lineHeight = Number.parseFloat(style.lineHeight) || Number.parseFloat(style.fontSize) * 1.2;
-	const paddingY = Number.parseFloat(style.paddingTop) + Number.parseFloat(style.paddingBottom);
-	el.style.height = "auto";
-	const scrollHeight = el.scrollHeight;
-	const min = minRows == null ? 0 : Number(minRows) * lineHeight + paddingY;
-	const max = maxRows == null ? Infinity : Number(maxRows) * lineHeight + paddingY;
-	el.style.height = `${Math.min(max, Math.max(min, scrollHeight))}px`;
-	el.style.overflow = scrollHeight > max ? "auto" : "hidden";
-};
-const TextAreaAutoResize = forwardRef(function TextAreaAutoResize({ value, onChange, minRows, maxRows, ...rest }, forwardedRef) {
-	const innerRef = useRef(null);
-	const setRef = useCallback((el) => {
-		innerRef.current = el;
-		if (typeof forwardedRef === "function") forwardedRef(el);
-		else if (forwardedRef) forwardedRef.current = el;
-	}, [forwardedRef]);
-	useLayoutEffect(() => {
-		adjust(innerRef.current, minRows, maxRows);
-	}, [
-		value,
-		minRows,
-		maxRows
-	]);
-	return /* @__PURE__ */ jsx("textarea", {
-		ref: setRef,
-		value,
-		onChange: useCallback((e) => {
-			adjust(e.currentTarget, minRows, maxRows);
-			onChange?.(e);
-		}, [
-			onChange,
-			minRows,
-			maxRows
-		]),
-		...rest
-	});
-});
-//#endregion
-//#region src/TextInput/TextInput.tsx
-const shouldForwardProp = createShouldForwardProp([
-	...props,
-	"as",
-	"color",
-	"textColor",
-	"variant",
-	"error",
-	"disabled",
-	"fullWidth"
-]);
-const baseStyle = {
-	display: "inline-flex",
-	alignItems: "center",
-	transition: "border-color 0.15s ease"
-};
-const backgroundStyle = ({ theme, textColor = themeDefault(theme, "accentTextColor", "primary") }) => {
-	return {
-		backgroundColor: (0, src_exports.get)(theme, `background.${themeDefault(theme, "inputBg", "terminal")}`),
-		color: (0, src_exports.get)(theme, `text.${textColor}`),
-		fontFamily: (0, src_exports.get)(theme, "fonts.body"),
-		fontSize: (0, src_exports.get)(theme, "fontSizes.1"),
-		lineHeight: (0, src_exports.get)(theme, "lineHeights.base")
-	};
-};
-const colorBorder = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => {
-	return { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.light`) };
-};
-const focusVisibleRing = ({ theme }) => ({ "&:has(:focus-visible)": {
-	outline: `2px solid ${(0, src_exports.get)(theme, `palette.${themeDefault(theme, "color", "primary")}.main`)}`,
-	outlineOffset: "2px"
-} });
-const focusWithinColor = ({ theme, color = themeDefault(theme, "color", "primary"), error }) => ({ "&:focus-within": { borderColor: error ? (0, src_exports.get)(theme, "palette.error.main") : (0, src_exports.get)(theme, `palette.${color}.main`) } });
-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 }) => ({
-	...fullWidth ? {
-		display: "flex",
-		width: "100%"
-	} : {},
-	...disabled ? {
-		opacity: .5,
-		cursor: "not-allowed",
-		pointerEvents: "none"
-	} : {}
-});
-const nativeBaseStyles = {
-	flex: 1,
-	minWidth: 0,
-	width: "100%",
-	border: "none",
-	outline: "none",
-	background: "transparent",
-	color: "inherit",
-	fontFamily: "inherit",
-	lineHeight: "inherit",
-	"&::placeholder": {
-		color: "inherit",
-		opacity: .5
-	},
-	"&:disabled": { cursor: "not-allowed" }
-};
-const textAreaBaseStyles = {
-	resize: "none",
-	overflow: "auto"
-};
-function InputBase({ inputSize, inputComponent, ...props }) {
-	return /* @__PURE__ */ jsx(inputComponent ?? "input", {
-		...props,
-		size: inputSize
-	});
-}
-const widthStyles = (0, src_exports.system)({
-	width: true,
-	minWidth: true,
-	maxWidth: true
-});
-const sizeVariants = ({ theme, size }) => {
-	const s = theme.sizes[size];
-	return {
-		paddingTop: theme.space[s.paddingTop],
-		paddingBottom: theme.space[s.paddingBottom],
-		paddingLeft: theme.space[s.paddingLeft],
-		paddingRight: theme.space[s.paddingRight],
-		fontSize: theme.fontSizes[s.fontSize]
-	};
-};
-const TextInputRoot = styled("div", {
-	name: "TextInput",
-	label: "TextInput",
-	shouldForwardProp,
-	systemProps: [src_exports.space, widthStyles]
-})(baseStyle, inputVariantStyles, borderRadiusStyle, colorBorder, focusWithinColor, focusVisibleRing, backgroundStyle, layoutStyles);
-const StyledInput = styled(InputBase, {
-	name: "TextInput",
-	slot: "input",
-	label: "TextInputInput"
-})(nativeBaseStyles, sizeVariants);
-const shouldForwardInputProps = (prop) => prop !== "size";
-const StyledTextarea = styled("textarea", {
-	name: "TextInput",
-	slot: "input",
-	label: "TextInputTextarea",
-	shouldForwardProp: shouldForwardInputProps
-})(nativeBaseStyles, textAreaBaseStyles, sizeVariants);
-const StyledAutoResizeTextarea = styled(TextAreaAutoResize, {
-	name: "TextInput",
-	slot: "input",
-	label: "TextInputTextarea",
-	shouldForwardProp: shouldForwardInputProps
-})(nativeBaseStyles, textAreaBaseStyles, sizeVariants);
-function TextInput({ autoComplete, autoFocus, borderRadius, classes, components, color: colorProp, textColor: textColorProp, disabled: disabledProp, error: errorProp, fullWidth: fullWidthProp, id: idProp, inputComponent, inputProps, inputSize, maxRows, minRows, multiline = false, name, onChange, placeholder, readOnly, required: requiredProp, resize = false, rows, size: sizeProp, type = "text", value, variant: variantProp, className, "data-testid": dataTestid, ...spaceProps }) {
-	const fc = 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 = useTheme();
-	const color = fc.color ?? themeDefault(theme, "color", "primary");
-	const textColor = fc.textColor ?? themeDefault(theme, "accentTextColor", "primary");
-	const variant = variantProp ?? themeDefault(theme, "inputVariant", "default");
-	const isAutoResize = resize;
-	const isMultiline = multiline || rows !== void 0 && Number(rows) > 1;
-	const isTextarea = (isAutoResize || isMultiline) && (!type || type === "text");
-	const rootClassName = [className, classes?.root].filter(Boolean).join(" ") || void 0;
-	const resolvedInputComponent = inputComponent ?? components?.Input;
-	const inputElProps = {
-		...inputProps,
-		id,
-		name,
-		disabled,
-		required,
-		autoComplete,
-		autoFocus,
-		placeholder,
-		readOnly,
-		onChange,
-		value,
-		className: classes?.input,
-		type: isTextarea ? void 0 : type,
-		rows: isMultiline && rows !== void 0 ? Number(rows) : void 0,
-		size,
-		"aria-describedby": inputProps?.["aria-describedby"] ?? fc["aria-describedby"]
-	};
-	return /* @__PURE__ */ jsx(TextInputRoot, {
-		as: components?.Root,
-		color,
-		textColor,
-		variant,
-		error,
-		disabled,
-		fullWidth,
-		borderRadius,
-		className: rootClassName,
-		"data-testid": dataTestid,
-		...spaceProps,
-		children: isTextarea && isAutoResize ? /* @__PURE__ */ jsx(StyledAutoResizeTextarea, {
-			...inputElProps,
-			minRows: minRows ?? rows,
-			maxRows
-		}) : isTextarea ? /* @__PURE__ */ jsx(StyledTextarea, { ...inputElProps }) : /* @__PURE__ */ jsx(StyledInput, {
-			inputComponent: resolvedInputComponent,
-			inputSize,
-			...inputElProps
-		})
-	});
-}
-//#endregion
-export { TextInput as t };

package/dist/ThemeProvider.cjs

@@ -1,15 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_utils = require("./utils.cjs");
-const require_themes = require("./themes.cjs");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-let _emotion_react = require("@emotion/react");
-//#region src/ThemeProvider/ThemeProvider.tsx
-function ThemeProvider({ children, theme = require_themes.baseTheme, defaults }) {
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeProvider, {
-		theme: (0, react.useMemo)(() => defaults ? require_utils.createTheme(theme, { defaults }) : theme, [theme, defaults]),
-		children
-	});
-}
-//#endregion
-exports.ThemeProvider = ThemeProvider;

package/dist/ThemeProvider.d.cts

@@ -1,20 +0,0 @@
-import { f as Theme, v as ThemeDefaults } from "./themes-D81JYbqm.cjs";
-import { ReactNode } from "react";
-//#region src/ThemeProvider/ThemeProvider.d.ts
-interface ThemeProviderProps {
-  children: ReactNode;
-  /**
-   * The active theme. Bring one theme, or as many as you like — switching
-   * between them is your state, not the provider's. Defaults to the built-in
-   * `baseTheme`.
-   */
-  theme?: Theme;
-  /**
-   * Optional component default token/variant keys, merged into the theme
-   * (e.g. `{ size: 'compact' }` makes every sized component default to your key).
-   */
-  defaults?: ThemeDefaults;
-}
-declare function ThemeProvider({ children, theme, defaults }: Readonly<ThemeProviderProps>): import("react").JSX.Element;
-//#endregion
-export { ThemeProvider };

package/dist/ThemeProvider.d.mts

@@ -1,20 +0,0 @@
-import { f as Theme, v as ThemeDefaults } from "./themes-D1SAp3SL.mjs";
-import { ReactNode } from "react";
-//#region src/ThemeProvider/ThemeProvider.d.ts
-interface ThemeProviderProps {
-  children: ReactNode;
-  /**
-   * The active theme. Bring one theme, or as many as you like — switching
-   * between them is your state, not the provider's. Defaults to the built-in
-   * `baseTheme`.
-   */
-  theme?: Theme;
-  /**
-   * Optional component default token/variant keys, merged into the theme
-   * (e.g. `{ size: 'compact' }` makes every sized component default to your key).
-   */
-  defaults?: ThemeDefaults;
-}
-declare function ThemeProvider({ children, theme, defaults }: Readonly<ThemeProviderProps>): import("react").JSX.Element;
-//#endregion
-export { ThemeProvider };

package/dist/ThemeProvider.mjs

@@ -1,14 +0,0 @@
-import { r as EmotionThemeProvider } from "./src-DcNT2aIK.mjs";
-import { createTheme } from "./utils.mjs";
-import { baseTheme } from "./themes.mjs";
-import { useMemo } from "react";
-import { jsx } from "react/jsx-runtime";
-//#region src/ThemeProvider/ThemeProvider.tsx
-function ThemeProvider({ children, theme = baseTheme, defaults }) {
-	return /* @__PURE__ */ jsx(EmotionThemeProvider, {
-		theme: useMemo(() => defaults ? createTheme(theme, { defaults }) : theme, [theme, defaults]),
-		children
-	});
-}
-//#endregion
-export { ThemeProvider };