@soroush.tech/design-system 0.1.0 → 1.0.0

package/dist/{src-DcNT2aIK.mjs → src-BJy4dM4f.mjs}

@@ -1,8 +1,8 @@
 import { n as __reExport, t as __exportAll } from "./rolldown-runtime-BBjsoOtd.mjs";
 import emotionStyled from "@emotion/styled";
-import { CacheProvider, Global, ThemeContext as EmotionThemeContext, ThemeProvider as EmotionThemeProvider, css, keyframes, useTheme } from "@emotion/react";
+import { css as css$1, keyframes } from "@emotion/react";
 import { createShouldForwardProp, props } from "@soroush.tech/styled-system/should-forward-prop";
-//#region src/styled.ts
+//#region src/style/styled.ts
 const resolveStyle = (style, props) => typeof style === "function" ? style({
 	theme: props.theme,
 	ownerState: props
@@ -32,18 +32,13 @@ const styled = Object.assign(createThemedStyled, emotionStyled);
 //#endregion
 //#region src/index.ts
 var src_exports = /* @__PURE__ */ __exportAll({
-	CacheProvider: () => CacheProvider,
-	EmotionThemeContext: () => EmotionThemeContext,
-	EmotionThemeProvider: () => EmotionThemeProvider,
-	Global: () => Global,
 	createShouldForwardProp: () => createShouldForwardProp,
-	css: () => css,
+	css: () => css$1,
 	keyframes: () => keyframes,
 	props: () => props,
-	styled: () => styled,
-	useTheme: () => useTheme
+	styled: () => styled
 });
 import * as import__soroush_tech_styled_system from "@soroush.tech/styled-system";
 __reExport(src_exports, import__soroush_tech_styled_system);
 //#endregion
-export { createShouldForwardProp as a, props as c, styled as d, Global as i, src_exports as l, EmotionThemeContext as n, css as o, EmotionThemeProvider as r, keyframes as s, CacheProvider as t, useTheme as u };
+export { src_exports as a, props as i, css$1 as n, styled as o, keyframes as r, createShouldForwardProp as t };

package/dist/{src-BiocWFSR.cjs → src-C8PIppTy.cjs}

@@ -3,7 +3,7 @@ let _emotion_styled = require("@emotion/styled");
 _emotion_styled = require_rolldown_runtime.__toESM(_emotion_styled, 1);
 let _emotion_react = require("@emotion/react");
 let _soroush_tech_styled_system_should_forward_prop = require("@soroush.tech/styled-system/should-forward-prop");
-//#region src/styled.ts
+//#region src/style/styled.ts
 const resolveStyle = (style, props) => typeof style === "function" ? style({
 	theme: props.theme,
 	ownerState: props
@@ -33,16 +33,11 @@ const styled = Object.assign(createThemedStyled, _emotion_styled.default);
 //#endregion
 //#region src/index.ts
 var src_exports = /* @__PURE__ */ require_rolldown_runtime.__exportAll({
-	CacheProvider: () => _emotion_react.CacheProvider,
-	EmotionThemeContext: () => _emotion_react.ThemeContext,
-	EmotionThemeProvider: () => _emotion_react.ThemeProvider,
-	Global: () => _emotion_react.Global,
 	createShouldForwardProp: () => _soroush_tech_styled_system_should_forward_prop.createShouldForwardProp,
 	css: () => _emotion_react.css,
 	keyframes: () => _emotion_react.keyframes,
 	props: () => _soroush_tech_styled_system_should_forward_prop.props,
-	styled: () => styled,
-	useTheme: () => _emotion_react.useTheme
+	styled: () => styled
 });
 require_rolldown_runtime.__reExport(src_exports, require("@soroush.tech/styled-system"));
 //#endregion

package/dist/{hooks.cjs → style.cjs}

@@ -1,19 +1,19 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_useDefaultProps = require("./useDefaultProps-Cb-5FNok.cjs");
+const require_theme = require("./theme-Du6xgPsg.cjs");
 let react_jsx_runtime = require("react/jsx-runtime");
 let _emotion_react = require("@emotion/react");
-//#region src/hooks/useStyle.ts
+//#region src/style/hooks/useStyle.ts
 function useStyle(style) {
-	const theme = (0, _emotion_react.useTheme)();
+	const theme = require_theme.useTheme();
 	return typeof style.getStyles === "function" ? style.getStyles(theme) : style;
 }
 //#endregion
-//#region src/hooks/StylesConsumer.tsx
+//#region src/style/StylesConsumer.tsx
 function StylesConsumer({ style, children }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeContext.Consumer, { children: (theme) => children(style.getStyles(theme)) });
 }
 //#endregion
-//#region src/hooks/withStyles.tsx
+//#region src/style/hoc/withStyles.tsx
 function withStyles(style) {
 	return (WrappedComponent) => function WithStyles(props) {
 		return typeof style.getStyles === "function" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StylesConsumer, {
@@ -29,24 +29,6 @@ function withStyles(style) {
 	};
 }
 //#endregion
-//#region src/hooks/withTheme.tsx
-function withTheme(WrappedComponent) {
-	return function WithTheme(props) {
-		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeContext.Consumer, { children: (theme) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrappedComponent, {
-			...props,
-			theme
-		}) });
-	};
-}
-//#endregion
 exports.StylesConsumer = StylesConsumer;
-exports.useDefaultProps = require_useDefaultProps.useDefaultProps;
 exports.useStyle = useStyle;
-Object.defineProperty(exports, "useTheme", {
-	enumerable: true,
-	get: function() {
-		return _emotion_react.useTheme;
-	}
-});
 exports.withStyles = withStyles;
-exports.withTheme = withTheme;

package/dist/style.d.cts

@@ -0,0 +1,23 @@
+import { m as Theme, r as CSSObject } from "./themes-BTGww2YK.cjs";
+import "./index-CJQXZ4hq.cjs";
+import { ComponentType, ReactNode } from "react";
+//#region src/style/hooks/useStyle.d.ts
+type StyleFactory = {
+  getStyles: (theme: Theme) => CSSObject;
+};
+type StyleInput = CSSObject | StyleFactory;
+declare function useStyle(style: StyleInput): CSSObject;
+//#endregion
+//#region src/style/hoc/withStyles.d.ts
+declare function withStyles<P extends object>(style: StyleInput): (WrappedComponent: ComponentType<P & {
+  styles: CSSObject;
+}>) => (props: P) => import("react").JSX.Element;
+//#endregion
+//#region src/style/StylesConsumer.d.ts
+type StylesConsumerProps = {
+  style: StyleFactory;
+  children: (styles: CSSObject) => ReactNode;
+};
+declare function StylesConsumer({ style, children }: Readonly<StylesConsumerProps>): import("react").JSX.Element;
+//#endregion
+export { StyleFactory, StyleInput, StylesConsumer, useStyle, withStyles };

package/dist/style.d.mts

@@ -0,0 +1,23 @@
+import { m as Theme, r as CSSObject } from "./themes-BTGww2YK.mjs";
+import "./index-0J6U39Rl.mjs";
+import { ComponentType, ReactNode } from "react";
+//#region src/style/hooks/useStyle.d.ts
+type StyleFactory = {
+  getStyles: (theme: Theme) => CSSObject;
+};
+type StyleInput = CSSObject | StyleFactory;
+declare function useStyle(style: StyleInput): CSSObject;
+//#endregion
+//#region src/style/hoc/withStyles.d.ts
+declare function withStyles<P extends object>(style: StyleInput): (WrappedComponent: ComponentType<P & {
+  styles: CSSObject;
+}>) => (props: P) => import("react").JSX.Element;
+//#endregion
+//#region src/style/StylesConsumer.d.ts
+type StylesConsumerProps = {
+  style: StyleFactory;
+  children: (styles: CSSObject) => ReactNode;
+};
+declare function StylesConsumer({ style, children }: Readonly<StylesConsumerProps>): import("react").JSX.Element;
+//#endregion
+export { StyleFactory, StyleInput, StylesConsumer, useStyle, withStyles };

package/dist/{hooks.mjs → style.mjs}

@@ -1,18 +1,18 @@
-import { n as EmotionThemeContext, u as useTheme } from "./src-DcNT2aIK.mjs";
-import { t as useDefaultProps } from "./useDefaultProps-CoApb4KT.mjs";
+import { r as useTheme } from "./theme-V6lYzd3j.mjs";
+import { n as EmotionThemeContext } from "./emotion-BAyqVw0c.mjs";
 import { jsx } from "react/jsx-runtime";
-//#region src/hooks/useStyle.ts
+//#region src/style/hooks/useStyle.ts
 function useStyle(style) {
 	const theme = useTheme();
 	return typeof style.getStyles === "function" ? style.getStyles(theme) : style;
 }
 //#endregion
-//#region src/hooks/StylesConsumer.tsx
+//#region src/style/StylesConsumer.tsx
 function StylesConsumer({ style, children }) {
 	return /* @__PURE__ */ jsx(EmotionThemeContext.Consumer, { children: (theme) => children(style.getStyles(theme)) });
 }
 //#endregion
-//#region src/hooks/withStyles.tsx
+//#region src/style/hoc/withStyles.tsx
 function withStyles(style) {
 	return (WrappedComponent) => function WithStyles(props) {
 		return typeof style.getStyles === "function" ? /* @__PURE__ */ jsx(StylesConsumer, {
@@ -28,14 +28,4 @@ function withStyles(style) {
 	};
 }
 //#endregion
-//#region src/hooks/withTheme.tsx
-function withTheme(WrappedComponent) {
-	return function WithTheme(props) {
-		return /* @__PURE__ */ jsx(EmotionThemeContext.Consumer, { children: (theme) => /* @__PURE__ */ jsx(WrappedComponent, {
-			...props,
-			theme
-		}) });
-	};
-}
-//#endregion
-export { StylesConsumer, useDefaultProps, useStyle, useTheme, withStyles, withTheme };
+export { StylesConsumer, useStyle, withStyles };

package/dist/theme-Du6xgPsg.cjs

@@ -0,0 +1,470 @@
+const require_utils = require("./utils.cjs");
+let react = require("react");
+let react_jsx_runtime = require("react/jsx-runtime");
+let _emotion_react = require("@emotion/react");
+//#region src/theme/utils/spacing.ts
+const spacing = (units) => `${8 * units}px`;
+//#endregion
+//#region src/theme/utils/createTheme.ts
+const isPlainObject = (value) => typeof value === "object" && value !== null && !Array.isArray(value);
+const deepMerge = (base, overrides) => {
+	const merged = { ...base };
+	for (const [key, value] of Object.entries(overrides)) {
+		if (value === void 0) continue;
+		const baseValue = merged[key];
+		merged[key] = isPlainObject(baseValue) && isPlainObject(value) ? deepMerge(baseValue, value) : value;
+	}
+	return merged;
+};
+/**
+* Builds a theme by deep-merging sparse `overrides` onto `base`.
+*
+* - Recurses only where both sides are plain objects; arrays (`shadows`,
+*   `fontSizes`) and functions replace wholesale.
+* - `undefined` override values are ignored — a key can be added or replaced,
+*   never removed.
+* - Neither argument is mutated; untouched branches keep referential identity.
+*/
+const createTheme = (base, overrides) => deepMerge(base, overrides);
+//#endregion
+//#region src/theme/themes.ts
+const shadow = {
+	color: "#000000",
+	opacity: .4
+};
+const shadows = Array.from({ length: 25 }, (_, elevation) => require_utils.generateBoxShadow(elevation, require_utils.alpha(shadow.color, shadow.opacity)));
+const radii = {
+	sq: "0",
+	sm: "4px",
+	md: "8px",
+	lg: "16px"
+};
+const borderWidths = {
+	none: "0",
+	thin: "1px",
+	base: "2px",
+	thick: "4px"
+};
+const zOrder = {
+	appBar: 1100,
+	drawer: 1200,
+	modal: 1300
+};
+const fontSizes = [
+	12,
+	14,
+	16,
+	20,
+	24,
+	32,
+	48
+];
+const lineHeights = {
+	none: 1,
+	tight: 1.2,
+	snug: 1.35,
+	base: 1.5,
+	relaxed: 1.625,
+	loose: 2
+};
+const letterSpacings = {
+	tighter: "-0.05em",
+	tight: "-0.025em",
+	normal: "0em",
+	wide: "0.05em",
+	wider: "0.1em",
+	widest: "0.2em"
+};
+const fonts = {
+	body: "'Space Grotesk Variable', 'Space Grotesk', sans-serif",
+	heading: "'Space Grotesk Variable', 'Space Grotesk', sans-serif",
+	mono: "'JetBrains Mono Variable', 'JetBrains Mono', 'Fira Code', 'Cascadia Code', monospace"
+};
+const fontWeights = {
+	thin: 100,
+	extraLight: 200,
+	light: 300,
+	normal: 400,
+	medium: 500,
+	semiBold: 600,
+	bold: 700,
+	extraBold: 800,
+	black: 900
+};
+const avatar = {
+	sm: spacing(4),
+	md: spacing(5),
+	lg: spacing(6),
+	xl: spacing(7)
+};
+const icon = {
+	sm: "1rem",
+	md: "1.25rem",
+	lg: "1.5rem"
+};
+const sizes = {
+	sm: {
+		paddingTop: .5,
+		paddingBottom: .5,
+		paddingLeft: 1.5,
+		paddingRight: 1.5,
+		fontSize: 0
+	},
+	md: {
+		paddingTop: 1,
+		paddingBottom: 1,
+		paddingLeft: 2,
+		paddingRight: 2,
+		fontSize: 1
+	},
+	lg: {
+		paddingTop: 1.5,
+		paddingBottom: 1.5,
+		paddingLeft: 3,
+		paddingRight: 3,
+		fontSize: 1
+	}
+};
+const space = {
+	0: 0,
+	.5: spacing(.5),
+	1: spacing(1),
+	1.5: spacing(1.5),
+	2: spacing(2),
+	3: spacing(3),
+	4: spacing(4),
+	5: spacing(5),
+	6: spacing(6),
+	7: spacing(7),
+	8: spacing(8),
+	9: spacing(9),
+	10: spacing(10),
+	auto: "auto"
+};
+const typography = {
+	h1: {
+		element: "h1",
+		fontSize: 6,
+		fontWeight: "bold"
+	},
+	h2: {
+		element: "h2",
+		fontSize: 5,
+		fontWeight: "bold"
+	},
+	h3: {
+		element: "h3",
+		fontSize: 4,
+		fontWeight: "bold"
+	},
+	h4: {
+		element: "h4",
+		fontSize: 3,
+		fontWeight: "bold"
+	},
+	h5: {
+		element: "h5",
+		fontSize: 2,
+		fontWeight: "bold"
+	},
+	h6: {
+		element: "h6",
+		fontSize: 1,
+		fontWeight: "semiBold"
+	},
+	subtitle1: {
+		element: "h6",
+		fontSize: 2,
+		fontWeight: "medium"
+	},
+	subtitle2: {
+		element: "h6",
+		fontSize: 1,
+		fontWeight: "medium"
+	},
+	body1: {
+		element: "p",
+		fontSize: 2,
+		fontWeight: "normal"
+	},
+	body2: {
+		element: "p",
+		fontSize: 1,
+		fontWeight: "normal"
+	},
+	caption: {
+		element: "span",
+		fontSize: 0,
+		fontWeight: "normal"
+	},
+	overline: {
+		element: "span",
+		fontSize: 0,
+		fontWeight: "medium",
+		textTransform: "uppercase",
+		letterSpacing: "wider"
+	},
+	button: {
+		element: "span",
+		fontSize: 1,
+		fontWeight: "medium",
+		textTransform: "uppercase",
+		letterSpacing: "wide"
+	},
+	inherit: { element: "span" }
+};
+/**
+* The package's complete default theme (dark-schemed). Raw hex only — palettes
+* belong to the consumer, who builds brand themes with `createTheme(baseTheme, …)`.
+*/
+const baseTheme = {
+	name: "base",
+	switch: { thumb: "#FFFFFF" },
+	radii,
+	borderWidths,
+	fontSizes,
+	lineHeights,
+	typography,
+	letterSpacings,
+	fontWeights,
+	fonts,
+	avatar,
+	icon,
+	sizes,
+	space,
+	zOrder,
+	blur: "12px",
+	colorScheme: "dark",
+	palette: {
+		default: {
+			main: "#262626",
+			light: "#363636",
+			dark: "#0E0E0E",
+			contrastText: "#F2F3F4"
+		},
+		primary: {
+			main: "#00FC40",
+			light: "#9CFF93",
+			dark: "#006413",
+			contrastText: "#000000"
+		},
+		secondary: {
+			main: "#b3eeb1",
+			light: "#d4f9d2",
+			dark: "#5acc57",
+			contrastText: "#000000"
+		},
+		success: {
+			main: "#009928",
+			light: "#00FC40",
+			dark: "#006413",
+			contrastText: "#FFFFFF"
+		},
+		error: {
+			main: "#FF3B30",
+			light: "#FF9590",
+			dark: "#E0251A",
+			contrastText: "#FFFFFF"
+		},
+		info: {
+			main: "#00B8D9",
+			light: "#33D9FF",
+			dark: "#0099CC",
+			contrastText: "#000000"
+		},
+		warning: {
+			main: "#FFD930",
+			light: "#FFF0A0",
+			dark: "#CCA800",
+			contrastText: "#000000"
+		}
+	},
+	background: {
+		backdrop: "#000000B3",
+		appBar: "#000000B3",
+		glass: "#0000004D",
+		modal: "#131313",
+		default: "#262626",
+		primary: "#0E0E0E",
+		secondary: "#1A1A1A",
+		paper: "#131313",
+		terminal: "#000000",
+		grid: require_utils.alpha("#00FC40", .06),
+		transparent: "#00000000"
+	},
+	text: {
+		inherit: "inherit",
+		initial: "#FFFFFF",
+		primary: "#00FC40",
+		secondary: "#9C9C9C",
+		disabled: "#363636",
+		error: "#D70015",
+		success: "#009928",
+		info: "#00B8D9",
+		warning: "#8C6D00"
+	},
+	border: {
+		default: "#262626",
+		light: require_utils.alpha("#E8FFE5", .1),
+		primary: "#00FC40",
+		dark: "#006413"
+	},
+	skeleton: { highlight: require_utils.alpha("#363636", .65) },
+	logoFilter: "brightness(0) invert(1)",
+	portraitBlend: "screen",
+	portraitOpacity: .8,
+	shadow,
+	shadows
+};
+//#endregion
+//#region src/theme/ThemeProvider.tsx
+function ThemeProvider({ children, theme = baseTheme, defaults }) {
+	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeProvider, {
+		theme: (0, react.useMemo)(() => defaults ? createTheme(theme, { defaults }) : theme, [theme, defaults]),
+		children
+	});
+}
+//#endregion
+//#region src/theme/hooks/useTheme.ts
+/**
+* The active theme, typed as this package's own `Theme` — Emotion is an
+* internal implementation detail, never part of the public type surface.
+*/
+const useTheme = () => (0, _emotion_react.useTheme)();
+//#endregion
+//#region src/theme/hooks/useDefaultProps.ts
+/**
+* The theme-contributed default prop values for a component
+* (`theme.components[name].defaultProps`), or an empty object.
+*
+* Components apply it as one step of the default-resolution chain:
+* explicit prop → group context → `useDefaultProps` → `theme.defaults.*` → literal fallback.
+*/
+function useDefaultProps(name) {
+	return useTheme().components?.[name]?.defaultProps ?? {};
+}
+//#endregion
+//#region src/theme/hoc/withTheme.tsx
+function withTheme(WrappedComponent) {
+	return function WithTheme(props) {
+		return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_emotion_react.ThemeContext.Consumer, { children: (theme) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(WrappedComponent, {
+			...props,
+			theme
+		}) });
+	};
+}
+//#endregion
+Object.defineProperty(exports, "ThemeProvider", {
+	enumerable: true,
+	get: function() {
+		return ThemeProvider;
+	}
+});
+Object.defineProperty(exports, "avatar", {
+	enumerable: true,
+	get: function() {
+		return avatar;
+	}
+});
+Object.defineProperty(exports, "baseTheme", {
+	enumerable: true,
+	get: function() {
+		return baseTheme;
+	}
+});
+Object.defineProperty(exports, "borderWidths", {
+	enumerable: true,
+	get: function() {
+		return borderWidths;
+	}
+});
+Object.defineProperty(exports, "createTheme", {
+	enumerable: true,
+	get: function() {
+		return createTheme;
+	}
+});
+Object.defineProperty(exports, "fontSizes", {
+	enumerable: true,
+	get: function() {
+		return fontSizes;
+	}
+});
+Object.defineProperty(exports, "fontWeights", {
+	enumerable: true,
+	get: function() {
+		return fontWeights;
+	}
+});
+Object.defineProperty(exports, "fonts", {
+	enumerable: true,
+	get: function() {
+		return fonts;
+	}
+});
+Object.defineProperty(exports, "icon", {
+	enumerable: true,
+	get: function() {
+		return icon;
+	}
+});
+Object.defineProperty(exports, "letterSpacings", {
+	enumerable: true,
+	get: function() {
+		return letterSpacings;
+	}
+});
+Object.defineProperty(exports, "lineHeights", {
+	enumerable: true,
+	get: function() {
+		return lineHeights;
+	}
+});
+Object.defineProperty(exports, "radii", {
+	enumerable: true,
+	get: function() {
+		return radii;
+	}
+});
+Object.defineProperty(exports, "sizes", {
+	enumerable: true,
+	get: function() {
+		return sizes;
+	}
+});
+Object.defineProperty(exports, "space", {
+	enumerable: true,
+	get: function() {
+		return space;
+	}
+});
+Object.defineProperty(exports, "typography", {
+	enumerable: true,
+	get: function() {
+		return typography;
+	}
+});
+Object.defineProperty(exports, "useDefaultProps", {
+	enumerable: true,
+	get: function() {
+		return useDefaultProps;
+	}
+});
+Object.defineProperty(exports, "useTheme", {
+	enumerable: true,
+	get: function() {
+		return useTheme;
+	}
+});
+Object.defineProperty(exports, "withTheme", {
+	enumerable: true,
+	get: function() {
+		return withTheme;
+	}
+});
+Object.defineProperty(exports, "zOrder", {
+	enumerable: true,
+	get: function() {
+		return zOrder;
+	}
+});