@xuefx/ui-theme 1.0.1 → 1.0.4

package/README.md

@@ -0,0 +1,33 @@
+# @xuefx/ui-theme
+
+Design tokens, Tailwind preset, and theming tools for [@xuefx/ui](https://www.npmjs.com/package/@xuefx/ui).
+
+## Usage
+
+```js
+// 1. Import design tokens (CSS custom properties)
+import '@xuefx/ui-theme/styles.css';
+
+// 2. Build your own theme
+import { ThemeProvider, createTheme, themes } from '@xuefx/ui-theme';
+
+const myTheme = createTheme({
+  colors: { primary: '142 76% 36%', 'primary-foreground': '0 0% 100%' },
+});
+
+// 3. Or use a preset
+<ThemeProvider theme={themes.green}>
+  <App />
+</ThemeProvider>
+```
+
+## Presets
+
+| Preset | |
+|---|---|
+| `themes.green` | Emerald green |
+| `themes.cyan` | Sky blue |
+| `themes.red` | Warm red |
+| `themes.purple` | Purple |
+| `themes.orange` | Orange |
+| `themes.dark` | Dark mode |

package/{ThemeProvider.jsx → ThemeProvider.tsx}

@@ -1,40 +1,31 @@
-import React, { createContext, useContext, useMemo } from 'react';
+import { type ReactNode, createContext, useContext, useMemo } from 'react';
+import type { ThemeConfig } from './create-theme.js';
 
-const ThemeContext = createContext(null);
+const ThemeContext = createContext<ThemeConfig | null>(null);
 
 /**
  * Access the current theme object provided by the nearest ThemeProvider.
  * Returns `null` when no ThemeProvider is mounted (i.e. using default :root styles).
  */
-export function useTheme() {
+export function useTheme(): ThemeConfig | null {
   return useContext(ThemeContext);
 }
 
+interface ThemeProviderProps {
+  theme: ThemeConfig | null;
+  children: ReactNode;
+}
+
 /**
  * Inject a custom theme into a component subtree.
  *
  * CSS custom properties are set as inline styles on a wrapper <div>,
  * scoping them to the subtree. When no ThemeProvider is used, the global
  * `:root` variables from `theme/styles.css` serve as the default.
- *
- * @example
- * import { ThemeProvider, createTheme } from 'theme';
- *
- * const brandTheme = createTheme({
- *   colors: { primary: '142 76% 36%', 'primary-foreground': '0 0% 100%' },
- * });
- *
- * function App() {
- *   return (
- *     <ThemeProvider theme={brandTheme}>
- *       <Button>Brand Button</Button>
- *     </ThemeProvider>
- *   );
- * }
  */
-export function ThemeProvider({ theme, children }) {
+export function ThemeProvider({ theme, children }: ThemeProviderProps) {
   const style = useMemo(() => {
-    const vars = {};
+    const vars: Record<string, string> = {};
     if (!theme) return vars;
     if (theme.colors) {
       for (const [key, value] of Object.entries(theme.colors)) {

package/{create-theme.js → create-theme.ts}

@@ -1,30 +1,31 @@
 import { colors, borderRadius, spacing, fontSize } from './tokens.js';
+import type { TokenColors } from './tokens.js';
 
-const defaultTokens = { colors, borderRadius, spacing, fontSize, radius: '0.5rem' };
+export interface ThemeConfig {
+  colors: Partial<TokenColors>;
+  borderRadius: Record<string, string>;
+  spacing: Record<string, string>;
+  fontSize: Record<string, [string, { lineHeight: string }]>;
+  radius: string;
+}
+
+const defaultTokens: ThemeConfig = { colors, borderRadius, spacing, fontSize, radius: '0.5rem' };
 
 /**
  * Create a theme object by merging user overrides with the default design tokens.
  *
- * @param {Object} userConfig
- * @param {Object} [userConfig.colors]    - Partial color token overrides (HSL strings)
- * @param {Object} [userConfig.borderRadius]
- * @param {Object} [userConfig.spacing]
- * @param {Object} [userConfig.fontSize]
- * @param {string} [userConfig.radius]    - Base border radius (e.g. '0.75rem')
- * @returns {Object} A complete theme object
- *
  * @example
  * const brandTheme = createTheme({
  *   colors: { primary: '142 76% 36%', 'primary-foreground': '0 0% 100%' },
  *   radius: '0.75rem',
  * });
  */
-export function createTheme(userConfig = {}) {
+export function createTheme(userConfig: Partial<ThemeConfig> = {}): ThemeConfig {
   return {
     colors: { ...defaultTokens.colors, ...userConfig.colors },
     borderRadius: { ...defaultTokens.borderRadius, ...userConfig.borderRadius },
     spacing: { ...defaultTokens.spacing, ...userConfig.spacing },
     fontSize: { ...defaultTokens.fontSize, ...userConfig.fontSize },
-    radius: userConfig.radius || defaultTokens.radius,
+    radius: userConfig.radius ?? defaultTokens.radius,
   };
 }

package/{index.js → index.ts}

@@ -1,5 +1,6 @@
 export * from './tokens.js';
 export { default as tailwindPreset } from './tailwind-preset.js';
 export { createTheme } from './create-theme.js';
+export type { ThemeConfig } from './create-theme.js';
 export { themes } from './themes.js';
-export { ThemeProvider, useTheme } from './ThemeProvider.jsx';
+export { ThemeProvider, useTheme } from './ThemeProvider.js';

package/package.json

@@ -1,29 +1,48 @@
 {
   "name": "@xuefx/ui-theme",
-  "version": "1.0.1",
+  "version": "1.0.4",
   "description": "Design tokens, Tailwind preset, and theming tools for @xuefx/ui",
   "type": "module",
-  "main": "./index.js",
+  "main": "./index.ts",
   "files": [
-    "*.js",
-    "*.jsx",
+    "*.ts",
+    "*.tsx",
     "*.css"
   ],
   "exports": {
-    ".": "./index.js",
-    "./tokens": "./tokens.js",
-    "./tailwind-preset": "./tailwind-preset.js",
+    ".": {
+      "types": "./index.ts",
+      "default": "./index.ts"
+    },
+    "./tokens": {
+      "types": "./tokens.ts",
+      "default": "./tokens.ts"
+    },
+    "./tailwind-preset": {
+      "types": "./tailwind-preset.ts",
+      "default": "./tailwind-preset.ts"
+    },
     "./styles.css": "./styles.css",
-    "./create-theme": "./create-theme.js",
-    "./ThemeProvider": "./ThemeProvider.jsx",
-    "./themes": "./themes.js"
+    "./create-theme": {
+      "types": "./create-theme.ts",
+      "default": "./create-theme.ts"
+    },
+    "./ThemeProvider": {
+      "types": "./ThemeProvider.tsx",
+      "default": "./ThemeProvider.tsx"
+    },
+    "./themes": {
+      "types": "./themes.ts",
+      "default": "./themes.ts"
+    }
   },
   "peerDependencies": {
     "react": ">=19.0.0"
   },
   "devDependencies": {
     "react": "^19.1.0",
-    "react-dom": "^19.1.0"
+    "react-dom": "^19.1.0",
+    "typescript": "^6.0.3"
   },
   "license": "ISC"
 }

package/{tailwind-preset.js → tailwind-preset.ts}

@@ -1,13 +1,16 @@
+import { borderRadius } from './tokens.js';
+import type { Config } from 'tailwindcss';
+
 /**
  * Tailwind CSS preset that maps CSS custom properties from styles.css
  * into Tailwind's theme namespace.
  *
  * Usage in tailwind.config.js:
- *   import { tailwindPreset } from 'theme';
+ *   import tailwindPreset from '@xuefx/ui-theme/tailwind-preset';
  *   export default { presets: [tailwindPreset], ... }
  */
 
-export default {
+const preset: Partial<Config> = {
   theme: {
     extend: {
       colors: {
@@ -45,11 +48,9 @@ export default {
         input: 'hsl(var(--input))',
         ring: 'hsl(var(--ring))',
       },
-      borderRadius: {
-        lg: 'var(--radius)',
-        md: 'calc(var(--radius) - 2px)',
-        sm: 'calc(var(--radius) - 4px)',
-      },
+      borderRadius,
     },
   },
 };
+
+export default preset;

package/{themes.js → themes.ts}

@@ -1,3 +1,6 @@
+import { createTheme } from './create-theme.js';
+import type { ThemeConfig } from './create-theme.js';
+
 /**
  * Pre-built theme presets.
  *
@@ -7,9 +10,10 @@
  *     <App />
  *   </ThemeProvider>
  */
-import { createTheme } from './create-theme.js';
+export const themes: Record<string, ThemeConfig> = {
+  /** Default navy — matches :root variables, explicitly wraps with ThemeProvider */
+  default: createTheme({}),
 
-export const themes = {
   /** Sky blue brand — 清新科技感 */
   cyan: createTheme({
     colors: {

package/{tokens.js → tokens.ts}

@@ -6,7 +6,30 @@
  * Color tokens use HSL channels as space-separated strings — the format
  * Tailwind's `hsl(var(--name))` expects. No `hsl()` wrapper here.
  */
-export const colors = {
+
+export interface TokenColors {
+  background: string;
+  foreground: string;
+  card: string;
+  'card-foreground': string;
+  popover: string;
+  'popover-foreground': string;
+  primary: string;
+  'primary-foreground': string;
+  secondary: string;
+  'secondary-foreground': string;
+  muted: string;
+  'muted-foreground': string;
+  accent: string;
+  'accent-foreground': string;
+  destructive: string;
+  'destructive-foreground': string;
+  border: string;
+  input: string;
+  ring: string;
+}
+
+export const colors: TokenColors = {
   background: '0 0% 100%',
   foreground: '222.2 84% 4.9%',
   card: '0 0% 100%',
@@ -28,13 +51,13 @@ export const colors = {
   ring: '222.2 84% 4.9%',
 };
 
-export const borderRadius = {
+export const borderRadius: Record<string, string> = {
   lg: 'var(--radius)',
   md: 'calc(var(--radius) - 2px)',
   sm: 'calc(var(--radius) - 4px)',
 };
 
-export const spacing = {
+export const spacing: Record<string, string> = {
   0: '0px',
   1: '0.25rem',
   2: '0.5rem',
@@ -58,7 +81,7 @@ export const spacing = {
   96: '24rem',
 };
 
-export const fontSize = {
+export const fontSize: Record<string, [string, { lineHeight: string }]> = {
   xs: ['0.75rem', { lineHeight: '1rem' }],
   sm: ['0.875rem', { lineHeight: '1.25rem' }],
   base: ['1rem', { lineHeight: '1.5rem' }],