@omnific/atelier 0.1.0 → 0.2.0

package/dist/system/defaults/spacing.js

@@ -0,0 +1,43 @@
+//#region system/defaults/spacing.ts
+/**
+* 默认间距 scale（对齐 Chakra，值为 px）。
+*/
+const spacing = {
+	0: { value: "0" },
+	.5: { value: "2px" },
+	1: { value: "4px" },
+	1.5: { value: "6px" },
+	2: { value: "8px" },
+	2.5: { value: "10px" },
+	3: { value: "12px" },
+	3.5: { value: "14px" },
+	4: { value: "16px" },
+	4.5: { value: "18px" },
+	5: { value: "20px" },
+	6: { value: "24px" },
+	7: { value: "28px" },
+	8: { value: "32px" },
+	9: { value: "36px" },
+	10: { value: "40px" },
+	11: { value: "44px" },
+	12: { value: "48px" },
+	14: { value: "56px" },
+	16: { value: "64px" },
+	20: { value: "80px" },
+	24: { value: "96px" },
+	28: { value: "112px" },
+	32: { value: "128px" },
+	36: { value: "144px" },
+	40: { value: "160px" },
+	44: { value: "176px" },
+	48: { value: "192px" },
+	52: { value: "208px" },
+	56: { value: "224px" },
+	60: { value: "240px" },
+	64: { value: "256px" },
+	72: { value: "288px" },
+	80: { value: "320px" },
+	96: { value: "384px" }
+};
+//#endregion
+export { spacing };

package/dist/system/define-tokens.d.ts

@@ -0,0 +1,7 @@
+import { ThemeTokens } from "./types.js";
+//#region system/define-tokens.d.ts
+/**
+ * 标注并返回 tokens 对象，保留字面量键供类型推导。
+ */
+export declare const defineTokens: <const T extends ThemeTokens>(tokens: T) => T;
+//#endregion

package/dist/system/define-tokens.js

@@ -0,0 +1,7 @@
+//#region system/define-tokens.ts
+/**
+* 标注并返回 tokens 对象，保留字面量键供类型推导。
+*/
+const defineTokens = (tokens) => tokens;
+//#endregion
+export { defineTokens };

package/dist/system/index.d.ts

@@ -0,0 +1,17 @@
+import { SystemContext, ThemeTokens, TokenCategory, TokenCategoryKeys, TokenNode } from "./types.js";
+import { createSystem } from "./create-system.js";
+import { TokenStyleEntry, applyCssVars, styleFromTokens, toCssVarName } from "./css-vars.js";
+import { defaultSystem } from "./default-system.js";
+import { colors } from "./defaults/colors.js";
+import { controlHeights } from "./defaults/control-heights.js";
+import { focusRings } from "./defaults/focus-rings.js";
+import { fontSizes } from "./defaults/font-sizes.js";
+import { fonts } from "./defaults/fonts.js";
+import { radii } from "./defaults/radii.js";
+import { shadows } from "./defaults/shadows.js";
+import { spacing } from "./defaults/spacing.js";
+import { ColorToken, ControlHeightToken, FocusRingToken, FontSizeToken, FontToken, RadiiToken, ShadowToken, SpacingToken, defaultConfig } from "./defaults/index.js";
+import { defineTokens } from "./define-tokens.js";
+import { MergeTokensResult, mergeTokens } from "./merge-tokens.js";
+import { useTheme } from "./use-theme.js";
+export { type ColorToken, type ControlHeightToken, type FocusRingToken, type FontSizeToken, type FontToken, type MergeTokensResult, type RadiiToken, type ShadowToken, type SpacingToken, type SystemContext, type ThemeTokens, type TokenCategory, type TokenCategoryKeys, type TokenNode, type TokenStyleEntry, applyCssVars, colors, controlHeights, createSystem, defaultConfig, defaultSystem, defineTokens, focusRings, fontSizes, fonts, mergeTokens, radii, shadows, spacing, styleFromTokens, toCssVarName, useTheme };

package/dist/system/index.js

@@ -0,0 +1,16 @@
+import { applyCssVars, styleFromTokens, toCssVarName } from "./css-vars.js";
+import { mergeTokens } from "./merge-tokens.js";
+import { createSystem } from "./create-system.js";
+import { colors } from "./defaults/colors.js";
+import { controlHeights } from "./defaults/control-heights.js";
+import { focusRings } from "./defaults/focus-rings.js";
+import { fontSizes } from "./defaults/font-sizes.js";
+import { fonts } from "./defaults/fonts.js";
+import { radii } from "./defaults/radii.js";
+import { shadows } from "./defaults/shadows.js";
+import { spacing } from "./defaults/spacing.js";
+import { defineTokens } from "./define-tokens.js";
+import { defaultConfig } from "./defaults/index.js";
+import { defaultSystem } from "./default-system.js";
+import { useTheme } from "./use-theme.js";
+export { applyCssVars, colors, controlHeights, createSystem, defaultConfig, defaultSystem, defineTokens, focusRings, fontSizes, fonts, mergeTokens, radii, shadows, spacing, styleFromTokens, toCssVarName, useTheme };

package/dist/system/merge-tokens.d.ts

@@ -0,0 +1,20 @@
+import { ThemeTokens } from "./types.js";
+//#region system/merge-tokens.d.ts
+/**
+ * 合并 tokens 后的结果，含 CSS 变量表。
+ */
+export type MergeTokensResult = {
+  /**
+   * 合并后的 tokens。
+   */
+  tokens: ThemeTokens;
+  /**
+   * 已冻结的 CSS 变量表。
+   */
+  cssVars: Readonly<Record<string, string>>;
+};
+/**
+ * 按传入顺序浅合并 token set，后写入覆盖同名键，并同步生成扁平 `cssVars`。
+ */
+export declare const mergeTokens: (...tokenSets: ThemeTokens[]) => MergeTokensResult;
+//#endregion

package/dist/system/merge-tokens.js

@@ -0,0 +1,27 @@
+import { toCssVarName } from "./css-vars.js";
+import { hasValue, isNil } from "@omnific/utils";
+//#region system/merge-tokens.ts
+/**
+* 按传入顺序浅合并 token set，后写入覆盖同名键，并同步生成扁平 `cssVars`。
+*/
+const mergeTokens = (...tokenSets) => {
+	const tokens = {};
+	const cssVars = {};
+	for (const next of tokenSets) for (const category of Object.keys(next)) {
+		const entries = next[category];
+		if (isNil(entries)) continue;
+		const current = tokens[category];
+		if (hasValue(current)) Object.assign(current, entries);
+		else tokens[category] = Object.assign({}, entries);
+		for (const [key, node] of Object.entries(entries)) {
+			if (isNil(node)) continue;
+			cssVars[toCssVarName(category, key)] = node.value;
+		}
+	}
+	return {
+		tokens,
+		cssVars: Object.freeze(cssVars)
+	};
+};
+//#endregion
+export { mergeTokens };

package/dist/system/types.d.ts

@@ -0,0 +1,73 @@
+//#region system/types.d.ts
+/**
+ * 单个 token 节点。
+ */
+export type TokenNode = {
+  /**
+   * CSS 值。
+   */
+  value: string;
+};
+/**
+ * 一类 token；键可用 `bg.muted` 这类带点路径段。
+ */
+export type TokenCategory = Record<string, TokenNode>;
+/**
+ * 从具体 token 分类对象推导可用键的联合类型。
+ */
+export type TokenCategoryKeys<T> = keyof T & (string | number);
+/**
+ * 主题 tokens。
+ */
+export type ThemeTokens = {
+  /**
+   * 颜色 token。
+   */
+  colors?: TokenCategory;
+  /**
+   * 间距 token。
+   */
+  spacing?: TokenCategory;
+  /**
+   * 圆角 token。
+   */
+  radii?: TokenCategory;
+  /**
+   * 阴影 token。
+   */
+  shadows?: TokenCategory;
+  /**
+   * 字体族 token。
+   */
+  fonts?: TokenCategory;
+  /**
+   * 字号 token。
+   */
+  fontSizes?: TokenCategory;
+  /**
+   * 控件高度 token。
+   */
+  controlHeights?: TokenCategory;
+  /**
+   * 焦点环 token。
+   */
+  focusRings?: TokenCategory;
+};
+/**
+ * 精简版 SystemContext；实例只描述运行时主题能力，不携带具体 tokens 泛型。
+ */
+export type SystemContext = {
+  /**
+   * 主题名称；同名 system 在注入时复用同一张 `<style>`。
+   */
+  name: string;
+  /**
+   * 合并后的 tokens。
+   */
+  _config: ThemeTokens;
+  /**
+   * 已缓存的扁平 CSS 变量表（变量名 → 值）。
+   */
+  cssVars: Readonly<Record<string, string>>;
+};
+//#endregion

package/dist/system/use-theme.d.ts

@@ -0,0 +1,31 @@
+import { SystemContext } from "./types.js";
+import { RefObject } from "react";
+//#region system/use-theme.d.ts
+/**
+ * 将 `system.cssVars` 运行时注入到 DOM。
+ *
+ * 返回对象 ref：
+ * - 挂到元素上时，给该节点打上 `data-atelier-theme={system.name}`；
+ * - 未挂载（`ref.current === null`）时，变量写在 `document.documentElement`（同样打上该属性）。
+ *
+ * 样式节点统一挂在 `document.head` 下；同一 `system.name` 复用一张 `<style>`，以引用次数管理生命周期。
+ * 不使用 inline style / React Context。
+ *
+ * @example
+ * ```tsx
+ * const system = createSystem('app', defaultConfig);
+ *
+ * function App() {
+ *   const themeRef = useTheme<HTMLDivElement>(system);
+ *   return <div ref={themeRef}>...</div>;
+ * }
+ *
+ * // 或不挂 ref，自动注册到 documentElement
+ * function App() {
+ *   useTheme(system);
+ *   return <div>...</div>;
+ * }
+ * ```
+ */
+export declare const useTheme: <TElement extends HTMLElement = HTMLElement>(system: SystemContext) => RefObject<TElement | null>;
+//#endregion

package/dist/system/use-theme.js

@@ -0,0 +1,39 @@
+import { applyCssVars } from "./css-vars.js";
+import { useLayoutEffect, useRef } from "react";
+//#region system/use-theme.ts
+/**
+* 将 `system.cssVars` 运行时注入到 DOM。
+*
+* 返回对象 ref：
+* - 挂到元素上时，给该节点打上 `data-atelier-theme={system.name}`；
+* - 未挂载（`ref.current === null`）时，变量写在 `document.documentElement`（同样打上该属性）。
+*
+* 样式节点统一挂在 `document.head` 下；同一 `system.name` 复用一张 `<style>`，以引用次数管理生命周期。
+* 不使用 inline style / React Context。
+*
+* @example
+* ```tsx
+* const system = createSystem('app', defaultConfig);
+*
+* function App() {
+*   const themeRef = useTheme<HTMLDivElement>(system);
+*   return <div ref={themeRef}>...</div>;
+* }
+*
+* // 或不挂 ref，自动注册到 documentElement
+* function App() {
+*   useTheme(system);
+*   return <div>...</div>;
+* }
+* ```
+*/
+const useTheme = (system) => {
+	const ref = useRef(null);
+	useLayoutEffect(() => {
+		const target = ref.current ?? document.documentElement;
+		return applyCssVars(system, target);
+	}, [system]);
+	return ref;
+};
+//#endregion
+export { useTheme };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@omnific/atelier",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "A refined React component library for Omnific",
   "license": "MIT",
   "type": "module",
@@ -27,6 +27,11 @@
       "import": "./dist/main.js",
       "default": "./dist/main.js"
     },
+    "./box": {
+      "types": "./dist/box/index.d.ts",
+      "import": "./dist/box/index.js",
+      "default": "./dist/box/index.js"
+    },
     "./button": {
       "types": "./dist/button/index.d.ts",
       "import": "./dist/button/index.js",
@@ -37,6 +42,11 @@
       "import": "./dist/transition/index.js",
       "default": "./dist/transition/index.js"
     },
+    "./system": {
+      "types": "./dist/system/index.d.ts",
+      "import": "./dist/system/index.js",
+      "default": "./dist/system/index.js"
+    },
     "./styles.css": {
       "default": "./dist/styles.css"
     }
@@ -64,10 +74,10 @@
     "@omnific/tsconfig": "0.2.0",
     "@types/react": "^19.3.0",
     "@types/react-dom": "^19.3.0",
-    "motion": "^13.4.0",
+    "motion": "^13.4.4",
     "react": "^19.3.0",
     "react-dom": "^19.3.0",
-    "sass-embedded": "1.104.1"
+    "sass-embedded": "1.105.0"
   },
   "scripts": {
     "dev": "pnpm --dir ../.. storybook",