@soroush.tech/design-system 0.1.0

package/dist/useTableSort-CpDs4cGq.d.mts

@@ -0,0 +1,51 @@
+import { n as TableSortLabelDirection } from "./index-DmJIuQJj.mjs";
+//#region src/Table/hooks/useTablePagination.d.ts
+interface UseTablePaginationOptions {
+  /** Initial zero-based page. Default: `0`. */
+  defaultPage?: number;
+  /** Initial rows per page; `-1` shows all rows. Default: `10`. */
+  defaultRowsPerPage?: number;
+}
+/** Paging state — property names mirror `TablePagination`'s props so it spreads in one go. */
+interface TablePaginationState {
+  page: number;
+  rowsPerPage: number;
+  onPageChange: (page: number) => void;
+  /** Changing the page size resets to the first page. */
+  onRowsPerPageChange: (rowsPerPage: number) => void;
+}
+/**
+ * Pagination state for tables.
+ *
+ * ```tsx
+ * const pagination = useTablePagination({ defaultRowsPerPage: 10 })
+ * <TablePagination count={data.length} {...pagination} />
+ * <TableControl data={data} pagination={pagination}>{(row) => …}</TableControl>
+ * ```
+ */
+declare function useTablePagination({ defaultPage, defaultRowsPerPage }?: UseTablePaginationOptions): TablePaginationState;
+//#endregion
+//#region src/Table/hooks/useTableSort.d.ts
+/** One column's sort state — spreads directly onto `TableSortLabel`. */
+interface TableSortEntry {
+  isActive: boolean;
+  direction: TableSortLabelDirection;
+  /** Activates the column and flips its stored direction. */
+  onClick: () => void;
+}
+type TableSortMap<K extends string = string> = Record<K, TableSortEntry>;
+/**
+ * Column-keyed sort state for sortable tables. Each column remembers its own
+ * direction (initially `'asc'`); clicking a column activates it AND flips its
+ * stored direction — so the first click on a column sorts `'desc'`.
+ * `keys` is read once on mount.
+ *
+ * ```tsx
+ * const sort = useTableSort(['name', 'latency'])
+ * <TableSortLabel {...sort.name}>Service</TableSortLabel>
+ * <TableControl data={rows} sort={sort}>{(row) => …}</TableControl>
+ * ```
+ */
+declare function useTableSort<K extends string>(keys: readonly K[], onChange?: (key: K, direction: TableSortLabelDirection) => void): TableSortMap<K>;
+//#endregion
+export { UseTablePaginationOptions as a, TablePaginationState as i, TableSortMap as n, useTablePagination as o, useTableSort as r, TableSortEntry as t };

package/dist/utils/styleCache.cjs

@@ -0,0 +1,7 @@
+const require_rolldown_runtime = require("../rolldown-runtime-DDXJien1.cjs");
+let _emotion_cache = require("@emotion/cache");
+_emotion_cache = require_rolldown_runtime.__toESM(_emotion_cache, 1);
+//#region src/utils/styleCache.ts
+var styleCache_default = (0, _emotion_cache.default)({ key: "soroush" });
+//#endregion
+module.exports = styleCache_default;

package/dist/utils/styleCache.d.cts

@@ -0,0 +1,3 @@
+//#region src/utils/styleCache.d.ts
+declare const _default: import("@emotion/cache").EmotionCache;
+export = _default;

package/dist/utils/styleCache.d.mts

@@ -0,0 +1,4 @@
+//#region src/utils/styleCache.d.ts
+declare const _default: import("@emotion/cache").EmotionCache;
+//#endregion
+export { _default as default };

package/dist/utils/styleCache.mjs

@@ -0,0 +1,5 @@
+import createCache from "@emotion/cache";
+//#region src/utils/styleCache.ts
+var styleCache_default = createCache({ key: "soroush" });
+//#endregion
+export { styleCache_default as default };

package/dist/utils.cjs

@@ -0,0 +1,65 @@
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_themeDefault = require("./themeDefault-B-QjpGEO.cjs");
+//#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}`;
+};
+//#endregion
+//#region src/utils/clamp.ts
+/** Clamps `value` to the inclusive range `[min, max]`. */
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+//#endregion
+//#region src/utils/luminance.ts
+function luminance(hex) {
+	const r = Number.parseInt(hex.slice(1, 3), 16);
+	const g = Number.parseInt(hex.slice(3, 5), 16);
+	const b = Number.parseInt(hex.slice(5, 7), 16);
+	return (.299 * r + .587 * g + .114 * b) / 255;
+}
+//#endregion
+//#region src/utils/alpha.ts
+/**
+* Appends an alpha channel to a 6-digit hex color, producing an 8-digit `#RRGGBBAA` hex.
+* @param color - 6-digit hex string, e.g. `'#4ade80'`
+* @param opacity - alpha from `0` (transparent) to `1` (opaque)
+* @returns 8-digit hex string, e.g. `'#4ade801A'`
+* @example alpha('#4ade80', 0.1) // '#4ade801A'
+*/
+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
+exports.alpha = alpha;
+exports.clamp = clamp;
+exports.createTheme = createTheme;
+exports.generateBoxShadow = generateBoxShadow;
+exports.luminance = luminance;
+exports.spacing = spacing;
+exports.themeDefault = require_themeDefault.themeDefault;

package/dist/utils.d.cts

@@ -0,0 +1,39 @@
+import { n as ThemeOverride, r as createTheme, t as DeepPartial } from "./createTheme-Dts2F4R_.cjs";
+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
+//#region src/utils/clamp.d.ts
+/** Clamps `value` to the inclusive range `[min, max]`. */
+declare function clamp(value: number, min: number, max: number): number;
+//#endregion
+//#region src/utils/luminance.d.ts
+declare function luminance(hex: string): number;
+//#endregion
+//#region src/utils/alpha.d.ts
+/**
+ * Appends an alpha channel to a 6-digit hex color, producing an 8-digit `#RRGGBBAA` hex.
+ * @param color - 6-digit hex string, e.g. `'#4ade80'`
+ * @param opacity - alpha from `0` (transparent) to `1` (opaque)
+ * @returns 8-digit hex string, e.g. `'#4ade801A'`
+ * @example alpha('#4ade80', 0.1) // '#4ade801A'
+ */
+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 };

package/dist/utils.d.mts

@@ -0,0 +1,39 @@
+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
+//#region src/utils/clamp.d.ts
+/** Clamps `value` to the inclusive range `[min, max]`. */
+declare function clamp(value: number, min: number, max: number): number;
+//#endregion
+//#region src/utils/luminance.d.ts
+declare function luminance(hex: string): number;
+//#endregion
+//#region src/utils/alpha.d.ts
+/**
+ * Appends an alpha channel to a 6-digit hex color, producing an 8-digit `#RRGGBBAA` hex.
+ * @param color - 6-digit hex string, e.g. `'#4ade80'`
+ * @param opacity - alpha from `0` (transparent) to `1` (opaque)
+ * @returns 8-digit hex string, e.g. `'#4ade801A'`
+ * @example alpha('#4ade80', 0.1) // '#4ade801A'
+ */
+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 };

package/dist/utils.mjs

@@ -0,0 +1,58 @@
+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}`;
+};
+//#endregion
+//#region src/utils/clamp.ts
+/** Clamps `value` to the inclusive range `[min, max]`. */
+function clamp(value, min, max) {
+	return Math.min(Math.max(value, min), max);
+}
+//#endregion
+//#region src/utils/luminance.ts
+function luminance(hex) {
+	const r = Number.parseInt(hex.slice(1, 3), 16);
+	const g = Number.parseInt(hex.slice(3, 5), 16);
+	const b = Number.parseInt(hex.slice(5, 7), 16);
+	return (.299 * r + .587 * g + .114 * b) / 255;
+}
+//#endregion
+//#region src/utils/alpha.ts
+/**
+* Appends an alpha channel to a 6-digit hex color, producing an 8-digit `#RRGGBBAA` hex.
+* @param color - 6-digit hex string, e.g. `'#4ade80'`
+* @param opacity - alpha from `0` (transparent) to `1` (opaque)
+* @returns 8-digit hex string, e.g. `'#4ade801A'`
+* @example alpha('#4ade80', 0.1) // '#4ade801A'
+*/
+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 };

package/package.json

@@ -0,0 +1,125 @@
+{
+  "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.",
+  "keywords": [
+    "design-system",
+    "react",
+    "emotion",
+    "styled-system",
+    "components",
+    "theme",
+    "markdown",
+    "typescript"
+  ],
+  "author": "Masoud Soroush <masoud@soroush.tech>",
+  "license": "MIT",
+  "homepage": "https://soroush.tech",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/soroush-tech/core.git",
+    "directory": "packages/design-system"
+  },
+  "bugs": {
+    "url": "https://github.com/soroush-tech/core/issues"
+  },
+  "type": "module",
+  "sideEffects": false,
+  "files": [
+    "dist"
+  ],
+  "exports": {
+    ".": {
+      "import": {
+        "types": "./dist/index.d.mts",
+        "default": "./dist/index.mjs"
+      },
+      "require": {
+        "types": "./dist/index.d.cts",
+        "default": "./dist/index.cjs"
+      }
+    },
+    "./*": {
+      "import": {
+        "types": "./dist/*.d.mts",
+        "default": "./dist/*.mjs"
+      },
+      "require": {
+        "types": "./dist/*.d.cts",
+        "default": "./dist/*.cjs"
+      }
+    }
+  },
+  "types": "./dist/index.d.mts",
+  "publishConfig": {
+    "access": "public"
+  },
+  "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",
+    "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",
+    "@types/react": "^19.2.17",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/browser-playwright": "^4.1.10",
+    "@vitest/coverage-v8": "^4.1.10",
+    "eslint": "^10.7.0",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.1.1",
+    "eslint-plugin-react-refresh": "^0.5.3",
+    "eslint-plugin-storybook": "^10.5.0",
+    "globals": "^17.7.0",
+    "jsdom": "^29.1.1",
+    "playwright": "^1.61.1",
+    "react": "^19.2.7",
+    "react-dom": "^19.2.7",
+    "storybook": "^10.5.0",
+    "tsdown": "^0.22.7",
+    "typescript": "~6.0.3",
+    "vitest": "^4.1.10",
+    "zod": "^4.4.3",
+    "@soroush.tech/eslint-config": "0.0.0"
+  },
+  "scripts": {
+    "build": "tsdown",
+    "storybook": "pnpm --filter @soroush/web storybook",
+    "lint": "eslint . --max-warnings 0",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:coverage": "vitest run --coverage",
+    "test:types": "pnpm build && tsc -p type-tests/tsconfig.json",
+    "audit:styled": "node scripts/audit-styled.mjs"
+  },
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.mjs",
+  "typesVersions": {
+    "*": {
+      "*": [
+        "./dist/*.d.cts"
+      ]
+    }
+  }
+}