@soroush.tech/design-system 0.1.0 → 1.1.0

package/dist/utils.d.mts

@@ -1,11 +1,3 @@
-import { n as ThemeOverride, r as createTheme, t as DeepPartial } from "./createTheme-Dts2F4R_.mjs";
-import { Theme, ThemeDefaults } from "@emotion/react";
-//#region src/utils/spacing.d.ts
-/** The default `theme.space` steps. Kept for back-compat; `spacing()` accepts any
- * number so values can be built for consumer-augmented space keys. */
-type SpaceUnits = 0 | 0.5 | 1 | 1.5 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10;
-declare const spacing: (units: number) => string;
-//#endregion
 //#region src/utils/generateBoxShadow.d.ts
 declare const generateBoxShadow: (elevation: number, shadowColor: string) => string;
 //#endregion
@@ -26,14 +18,4 @@ declare function luminance(hex: string): number;
  */
 declare const alpha: (color: string, opacity: number) => string;
 //#endregion
-//#region src/utils/themeDefault.d.ts
-/**
- * Resolves a component's default token/variant key: the theme's optional
- * `defaults` override wins, otherwise the component's literal `fallback`.
- * Components call this in their prop defaults (`size = themeDefault(theme,
- * 'size', 'md')`) so every built-in default stays visible in the component
- * yet overridable per theme or via `ThemeProvider`'s `defaults` prop.
- */
-declare const themeDefault: <K extends keyof ThemeDefaults>(theme: Theme, key: K, fallback: NonNullable<ThemeDefaults[K]>) => NonNullable<ThemeDefaults[K]>;
-//#endregion
-export { DeepPartial, SpaceUnits, ThemeOverride, alpha, clamp, createTheme, generateBoxShadow, luminance, spacing, themeDefault };
+export { alpha, clamp, generateBoxShadow, luminance };

package/dist/utils.mjs

@@ -1,7 +1,3 @@
-import { t as themeDefault } from "./themeDefault-CjXaY3ok.mjs";
-//#region src/utils/spacing.ts
-const spacing = (units) => `${8 * units}px`;
-//#endregion
 //#region src/utils/generateBoxShadow.ts
 const generateBoxShadow = (elevation, shadowColor) => {
 	return `0 ${elevation}px ${elevation * 2}px ${shadowColor}`;
@@ -33,26 +29,4 @@ const alpha = (color, opacity) => {
 	return `${color}${Math.round(clamp(opacity, 0, 1) * 255).toString(16).padStart(2, "0").toUpperCase()}`;
 };
 //#endregion
-//#region src/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
-export { alpha, clamp, createTheme, generateBoxShadow, luminance, spacing, themeDefault };
+export { alpha, clamp, generateBoxShadow, luminance };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@soroush.tech/design-system",
-  "version": "0.1.0",
-  "description": "Emotion + @soroush.tech/styled-system React component library — token-driven light/dark themes, layout primitives, forms, overlays, and a headless markdown editor/renderer.",
+  "version": "1.1.0",
+  "description": "Emotion + @soroush.tech/styled-system React component library — token-driven light/dark themes, layout primitives, forms, and overlays.",
   "keywords": [
     "design-system",
     "react",
@@ -9,12 +9,11 @@
     "styled-system",
     "components",
     "theme",
-    "markdown",
     "typescript"
   ],
   "author": "Masoud Soroush <masoud@soroush.tech>",
   "license": "MIT",
-  "homepage": "https://soroush.tech",
+  "homepage": "https://soroush.tech/design-system",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/soroush-tech/core.git",
@@ -39,14 +38,434 @@
         "default": "./dist/index.cjs"
       }
     },
-    "./*": {
+    "./AppBar": {
       "import": {
-        "types": "./dist/*.d.mts",
-        "default": "./dist/*.mjs"
+        "types": "./dist/AppBar.d.mts",
+        "default": "./dist/AppBar.mjs"
       },
       "require": {
-        "types": "./dist/*.d.cts",
-        "default": "./dist/*.cjs"
+        "types": "./dist/AppBar.d.cts",
+        "default": "./dist/AppBar.cjs"
+      }
+    },
+    "./Avatar": {
+      "import": {
+        "types": "./dist/Avatar.d.mts",
+        "default": "./dist/Avatar.mjs"
+      },
+      "require": {
+        "types": "./dist/Avatar.d.cts",
+        "default": "./dist/Avatar.cjs"
+      }
+    },
+    "./Backdrop": {
+      "import": {
+        "types": "./dist/Backdrop.d.mts",
+        "default": "./dist/Backdrop.mjs"
+      },
+      "require": {
+        "types": "./dist/Backdrop.d.cts",
+        "default": "./dist/Backdrop.cjs"
+      }
+    },
+    "./Button": {
+      "import": {
+        "types": "./dist/Button.d.mts",
+        "default": "./dist/Button.mjs"
+      },
+      "require": {
+        "types": "./dist/Button.d.cts",
+        "default": "./dist/Button.cjs"
+      }
+    },
+    "./ButtonGroup": {
+      "import": {
+        "types": "./dist/ButtonGroup.d.mts",
+        "default": "./dist/ButtonGroup.mjs"
+      },
+      "require": {
+        "types": "./dist/ButtonGroup.d.cts",
+        "default": "./dist/ButtonGroup.cjs"
+      }
+    },
+    "./Card": {
+      "import": {
+        "types": "./dist/Card.d.mts",
+        "default": "./dist/Card.mjs"
+      },
+      "require": {
+        "types": "./dist/Card.d.cts",
+        "default": "./dist/Card.cjs"
+      }
+    },
+    "./Checkbox": {
+      "import": {
+        "types": "./dist/Checkbox.d.mts",
+        "default": "./dist/Checkbox.mjs"
+      },
+      "require": {
+        "types": "./dist/Checkbox.d.cts",
+        "default": "./dist/Checkbox.cjs"
+      }
+    },
+    "./CircularProgress": {
+      "import": {
+        "types": "./dist/CircularProgress.d.mts",
+        "default": "./dist/CircularProgress.mjs"
+      },
+      "require": {
+        "types": "./dist/CircularProgress.d.cts",
+        "default": "./dist/CircularProgress.cjs"
+      }
+    },
+    "./Drawer": {
+      "import": {
+        "types": "./dist/Drawer.d.mts",
+        "default": "./dist/Drawer.mjs"
+      },
+      "require": {
+        "types": "./dist/Drawer.d.cts",
+        "default": "./dist/Drawer.cjs"
+      }
+    },
+    "./Flex": {
+      "import": {
+        "types": "./dist/Flex.d.mts",
+        "default": "./dist/Flex.mjs"
+      },
+      "require": {
+        "types": "./dist/Flex.d.cts",
+        "default": "./dist/Flex.cjs"
+      }
+    },
+    "./FocusTrap": {
+      "import": {
+        "types": "./dist/FocusTrap.d.mts",
+        "default": "./dist/FocusTrap.mjs"
+      },
+      "require": {
+        "types": "./dist/FocusTrap.d.cts",
+        "default": "./dist/FocusTrap.cjs"
+      }
+    },
+    "./Form": {
+      "import": {
+        "types": "./dist/Form.d.mts",
+        "default": "./dist/Form.mjs"
+      },
+      "require": {
+        "types": "./dist/Form.d.cts",
+        "default": "./dist/Form.cjs"
+      }
+    },
+    "./FormControl": {
+      "import": {
+        "types": "./dist/FormControl.d.mts",
+        "default": "./dist/FormControl.mjs"
+      },
+      "require": {
+        "types": "./dist/FormControl.d.cts",
+        "default": "./dist/FormControl.cjs"
+      }
+    },
+    "./FormHelperText": {
+      "import": {
+        "types": "./dist/FormHelperText.d.mts",
+        "default": "./dist/FormHelperText.mjs"
+      },
+      "require": {
+        "types": "./dist/FormHelperText.d.cts",
+        "default": "./dist/FormHelperText.cjs"
+      }
+    },
+    "./FormLabel": {
+      "import": {
+        "types": "./dist/FormLabel.d.mts",
+        "default": "./dist/FormLabel.mjs"
+      },
+      "require": {
+        "types": "./dist/FormLabel.d.cts",
+        "default": "./dist/FormLabel.cjs"
+      }
+    },
+    "./Grid": {
+      "import": {
+        "types": "./dist/Grid.d.mts",
+        "default": "./dist/Grid.mjs"
+      },
+      "require": {
+        "types": "./dist/Grid.d.cts",
+        "default": "./dist/Grid.cjs"
+      }
+    },
+    "./Icon": {
+      "import": {
+        "types": "./dist/Icon.d.mts",
+        "default": "./dist/Icon.mjs"
+      },
+      "require": {
+        "types": "./dist/Icon.d.cts",
+        "default": "./dist/Icon.cjs"
+      }
+    },
+    "./Image": {
+      "import": {
+        "types": "./dist/Image.d.mts",
+        "default": "./dist/Image.mjs"
+      },
+      "require": {
+        "types": "./dist/Image.d.cts",
+        "default": "./dist/Image.cjs"
+      }
+    },
+    "./LinearProgress": {
+      "import": {
+        "types": "./dist/LinearProgress.d.mts",
+        "default": "./dist/LinearProgress.mjs"
+      },
+      "require": {
+        "types": "./dist/LinearProgress.d.cts",
+        "default": "./dist/LinearProgress.cjs"
+      }
+    },
+    "./Link": {
+      "import": {
+        "types": "./dist/Link.d.mts",
+        "default": "./dist/Link.mjs"
+      },
+      "require": {
+        "types": "./dist/Link.d.cts",
+        "default": "./dist/Link.cjs"
+      }
+    },
+    "./MenuItem": {
+      "import": {
+        "types": "./dist/MenuItem.d.mts",
+        "default": "./dist/MenuItem.mjs"
+      },
+      "require": {
+        "types": "./dist/MenuItem.d.cts",
+        "default": "./dist/MenuItem.cjs"
+      }
+    },
+    "./Modal": {
+      "import": {
+        "types": "./dist/Modal.d.mts",
+        "default": "./dist/Modal.mjs"
+      },
+      "require": {
+        "types": "./dist/Modal.d.cts",
+        "default": "./dist/Modal.cjs"
+      }
+    },
+    "./NativeSelect": {
+      "import": {
+        "types": "./dist/NativeSelect.d.mts",
+        "default": "./dist/NativeSelect.mjs"
+      },
+      "require": {
+        "types": "./dist/NativeSelect.d.cts",
+        "default": "./dist/NativeSelect.cjs"
+      }
+    },
+    "./Pagination": {
+      "import": {
+        "types": "./dist/Pagination.d.mts",
+        "default": "./dist/Pagination.mjs"
+      },
+      "require": {
+        "types": "./dist/Pagination.d.cts",
+        "default": "./dist/Pagination.cjs"
+      }
+    },
+    "./Paper": {
+      "import": {
+        "types": "./dist/Paper.d.mts",
+        "default": "./dist/Paper.mjs"
+      },
+      "require": {
+        "types": "./dist/Paper.d.cts",
+        "default": "./dist/Paper.cjs"
+      }
+    },
+    "./Popover": {
+      "import": {
+        "types": "./dist/Popover.d.mts",
+        "default": "./dist/Popover.mjs"
+      },
+      "require": {
+        "types": "./dist/Popover.d.cts",
+        "default": "./dist/Popover.cjs"
+      }
+    },
+    "./Portal": {
+      "import": {
+        "types": "./dist/Portal.d.mts",
+        "default": "./dist/Portal.mjs"
+      },
+      "require": {
+        "types": "./dist/Portal.d.cts",
+        "default": "./dist/Portal.cjs"
+      }
+    },
+    "./Pressable": {
+      "import": {
+        "types": "./dist/Pressable.d.mts",
+        "default": "./dist/Pressable.mjs"
+      },
+      "require": {
+        "types": "./dist/Pressable.d.cts",
+        "default": "./dist/Pressable.cjs"
+      }
+    },
+    "./Quote": {
+      "import": {
+        "types": "./dist/Quote.d.mts",
+        "default": "./dist/Quote.mjs"
+      },
+      "require": {
+        "types": "./dist/Quote.d.cts",
+        "default": "./dist/Quote.cjs"
+      }
+    },
+    "./Radio": {
+      "import": {
+        "types": "./dist/Radio.d.mts",
+        "default": "./dist/Radio.mjs"
+      },
+      "require": {
+        "types": "./dist/Radio.d.cts",
+        "default": "./dist/Radio.cjs"
+      }
+    },
+    "./Select": {
+      "import": {
+        "types": "./dist/Select.d.mts",
+        "default": "./dist/Select.mjs"
+      },
+      "require": {
+        "types": "./dist/Select.d.cts",
+        "default": "./dist/Select.cjs"
+      }
+    },
+    "./Sidebar": {
+      "import": {
+        "types": "./dist/Sidebar.d.mts",
+        "default": "./dist/Sidebar.mjs"
+      },
+      "require": {
+        "types": "./dist/Sidebar.d.cts",
+        "default": "./dist/Sidebar.cjs"
+      }
+    },
+    "./Skeleton": {
+      "import": {
+        "types": "./dist/Skeleton.d.mts",
+        "default": "./dist/Skeleton.mjs"
+      },
+      "require": {
+        "types": "./dist/Skeleton.d.cts",
+        "default": "./dist/Skeleton.cjs"
+      }
+    },
+    "./Switch": {
+      "import": {
+        "types": "./dist/Switch.d.mts",
+        "default": "./dist/Switch.mjs"
+      },
+      "require": {
+        "types": "./dist/Switch.d.cts",
+        "default": "./dist/Switch.cjs"
+      }
+    },
+    "./Table": {
+      "import": {
+        "types": "./dist/Table.d.mts",
+        "default": "./dist/Table.mjs"
+      },
+      "require": {
+        "types": "./dist/Table.d.cts",
+        "default": "./dist/Table.cjs"
+      }
+    },
+    "./TextInput": {
+      "import": {
+        "types": "./dist/TextInput.d.mts",
+        "default": "./dist/TextInput.mjs"
+      },
+      "require": {
+        "types": "./dist/TextInput.d.cts",
+        "default": "./dist/TextInput.cjs"
+      }
+    },
+    "./theme": {
+      "import": {
+        "types": "./dist/theme.d.mts",
+        "default": "./dist/theme.mjs"
+      },
+      "require": {
+        "types": "./dist/theme.d.cts",
+        "default": "./dist/theme.cjs"
+      }
+    },
+    "./style": {
+      "import": {
+        "types": "./dist/style.d.mts",
+        "default": "./dist/style.mjs"
+      },
+      "require": {
+        "types": "./dist/style.d.cts",
+        "default": "./dist/style.cjs"
+      }
+    },
+    "./ToggleButton": {
+      "import": {
+        "types": "./dist/ToggleButton.d.mts",
+        "default": "./dist/ToggleButton.mjs"
+      },
+      "require": {
+        "types": "./dist/ToggleButton.d.cts",
+        "default": "./dist/ToggleButton.cjs"
+      }
+    },
+    "./Typography": {
+      "import": {
+        "types": "./dist/Typography.d.mts",
+        "default": "./dist/Typography.mjs"
+      },
+      "require": {
+        "types": "./dist/Typography.d.cts",
+        "default": "./dist/Typography.cjs"
+      }
+    },
+    "./View": {
+      "import": {
+        "types": "./dist/View.d.mts",
+        "default": "./dist/View.mjs"
+      },
+      "require": {
+        "types": "./dist/View.d.cts",
+        "default": "./dist/View.cjs"
+      }
+    },
+    "./utils": {
+      "import": {
+        "types": "./dist/utils.d.mts",
+        "default": "./dist/utils.mjs"
+      },
+      "require": {
+        "types": "./dist/utils.d.cts",
+        "default": "./dist/utils.cjs"
+      }
+    },
+    "./engine": {
+      "import": {
+        "types": "./dist/engine.d.mts",
+        "default": "./dist/engine.mjs"
+      },
+      "require": {
+        "types": "./dist/engine.d.cts",
+        "default": "./dist/engine.cjs"
       }
     }
   },
@@ -56,29 +475,17 @@
   },
   "dependencies": {
     "@emotion/cache": "^11.14.0",
-    "react-markdown": "^10.1.0",
-    "rehype-highlight": "^7.0.2",
-    "remark-gfm": "^4.0.1",
-    "@soroush.tech/styled-system": "^5.7.1"
-  },
-  "peerDependencies": {
     "@emotion/react": "^11.14.0",
     "@emotion/styled": "^11.14.1",
-    "@tanstack/react-form": "^1.33.2",
+    "@soroush.tech/styled-system": "^5.8.0"
+  },
+  "peerDependencies": {
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "peerDependenciesMeta": {
-    "@tanstack/react-form": {
-      "optional": true
-    }
-  },
   "devDependencies": {
     "@emotion/css": "^11.13.5",
-    "@emotion/react": "^11.14.0",
-    "@emotion/styled": "^11.14.1",
     "@storybook/react-vite": "^10.5.0",
-    "@tanstack/react-form": "^1.33.2",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.2",
     "@types/node": "^26.1.1",

package/dist/CodeBlock.cjs

@@ -1,101 +0,0 @@
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const require_src = require("./src-BiocWFSR.cjs");
-const require_hooks_useCopyToClipboard = require("./hooks/useCopyToClipboard.cjs");
-const require_View = require("./View.cjs");
-const require_Button = require("./Button.cjs");
-const require_Icon = require("./Icon-1YtNCUKo.cjs");
-let react = require("react");
-let react_jsx_runtime = require("react/jsx-runtime");
-//#region src/CodeBlock/CodeBlock.tsx
-const syntaxStyles = ({ theme }) => ({
-	color: theme.syntax.base,
-	fontFamily: theme.fonts.mono,
-	"& .hljs-comment, & .hljs-quote, & .hljs-doctag, & .hljs-meta.prompt_": {
-		color: theme.syntax.comment,
-		fontStyle: "italic"
-	},
-	"& .hljs-keyword, & .hljs-built_in, & .hljs-literal, & .hljs-selector-tag, & .hljs-selector-pseudo, & .hljs-selector-attr": { color: theme.syntax.keyword },
-	"& .hljs-type, & .hljs-title.class_": { color: theme.syntax.type },
-	"& .hljs-string, & .hljs-regexp, & .hljs-char, & .hljs-meta .hljs-string, & .hljs-addition": { color: theme.syntax.string },
-	"& .hljs-number, & .hljs-symbol, & .hljs-bullet, & .hljs-link": { color: theme.syntax.number },
-	"& .hljs-variable.constant_, & .hljs-property": { color: theme.syntax.constant },
-	"& .hljs-title, & .hljs-section, & .hljs-attr, & .hljs-attribute, & .hljs-selector-id": { color: theme.syntax.title },
-	"& .hljs-tag, & .hljs-name, & .hljs-meta, & .hljs-variable, & .hljs-selector-class, & .hljs-deletion": { color: theme.syntax.tag },
-	"& .hljs-emphasis": { fontStyle: "italic" },
-	"& .hljs-strong": { fontWeight: "bold" }
-});
-const CodeSurface = require_src.styled(require_View.View, {
-	name: "CodeBlock",
-	slot: "surface",
-	label: "CodeSurface"
-})(syntaxStyles);
-const Wrapper = require_src.styled(require_View.View, {
-	name: "CodeBlock",
-	label: "CodeBlock"
-})({
-	display: "grid",
-	gridTemplateColumns: "minmax(0, 1fr)",
-	"& .code-copy": {
-		opacity: 0,
-		transition: "opacity 120ms ease"
-	},
-	"&:hover .code-copy, &:focus-within .code-copy": { opacity: 1 },
-	"@media (hover: none)": { "& .code-copy": { opacity: 1 } }
-});
-/**
-* Fenced-code block: a horizontally scrollable, syntax-highlighted surface with a
-* copy-to-clipboard button that sticks to the top-right while the block is in view.
-*/
-function CodeBlock({ children, ...rest }) {
-	const surfaceRef = (0, react.useRef)(null);
-	const { copied, copy } = require_hooks_useCopyToClipboard.useCopyToClipboard();
-	const handleCopy = () => {
-		const raw = surfaceRef.current.textContent;
-		let end = raw.length;
-		while (end > 0 && raw[end - 1] === "\n") end--;
-		const text = raw.slice(0, end);
-		if (text) copy(text);
-	};
-	return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(Wrapper, {
-		my: 2,
-		position: "relative",
-		...rest,
-		children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_View.View, {
-			position: "absolute",
-			top: "8px",
-			right: "8px",
-			zIndex: 1,
-			bg: "paper",
-			borderRadius: "sm",
-			className: "code-copy",
-			children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Button.Button, {
-				type: "button",
-				variant: "outlined",
-				color: "default",
-				size: "sm",
-				borderRadius: "sm",
-				onClick: handleCopy,
-				"aria-label": copied ? "Copied" : "Copy code",
-				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_Icon.Icon, {
-					name: copied ? "check" : "content_copy",
-					color: copied ? "success" : "primary",
-					size: "1.1rem"
-				})
-			})
-		}), /* @__PURE__ */ (0, react_jsx_runtime.jsx)(CodeSurface, {
-			as: "pre",
-			tabIndex: 0,
-			ref: surfaceRef,
-			bg: "terminal",
-			p: 3,
-			borderRadius: "md",
-			borderColor: "light",
-			borderWidth: "thin",
-			maxWidth: "100%",
-			overflow: "auto",
-			children
-		})]
-	});
-}
-//#endregion
-exports.CodeBlock = CodeBlock;

package/dist/CodeBlock.d.cts

@@ -1,2 +0,0 @@
-import { n as CodeBlockProps, t as CodeBlock } from "./index-BPrjvi7B.cjs";
-export { CodeBlock, CodeBlockProps };

package/dist/CodeBlock.d.mts

@@ -1,2 +0,0 @@
-import { n as CodeBlockProps, t as CodeBlock } from "./index-BoqlPb3Z.mjs";
-export { CodeBlock, CodeBlockProps };