@zidian-ui/core 0.1.4 → 0.2.0

package/lib/theme/token/tokenMap.d.ts

@@ -0,0 +1,90 @@
+export declare const defaultColorMap: {
+    main: {
+        main: {
+            light: number;
+            dark: number;
+        };
+        onMain: {
+            light: number;
+            dark: number;
+        };
+        container: {
+            light: number;
+            dark: number;
+        };
+        onContainer: {
+            light: number;
+            dark: number;
+        };
+    };
+    neutral: {
+        dim: {
+            light: number;
+            dark: number;
+        };
+        main: {
+            light: number;
+            dark: number;
+        };
+        bright: {
+            light: number;
+            dark: number;
+        };
+        onMain: {
+            light: number;
+            dark: number;
+        };
+        containerLowest: {
+            light: number;
+            dark: number;
+        };
+        containerLow: {
+            light: number;
+            dark: number;
+        };
+        container: {
+            light: number;
+            dark: number;
+        };
+        containerHigh: {
+            light: number;
+            dark: number;
+        };
+        containerHighest: {
+            light: number;
+            dark: number;
+        };
+    };
+    neutralVariant: {
+        main: {
+            light: number;
+            dark: number;
+        };
+        variant: {
+            light: number;
+            dark: number;
+        };
+        onSurfaceVariant: {
+            light: number;
+            dark: number;
+        };
+        outlineVariant: {
+            light: number;
+            dark: number;
+        };
+    };
+    inverse: {
+        primary: {
+            light: number;
+            dark: number;
+        };
+        surface: {
+            light: number;
+            dark: number;
+        };
+        onSurface: {
+            light: number;
+            dark: number;
+        };
+    };
+};

package/lib/theme/token/tokenSetup.d.ts

@@ -0,0 +1,85 @@
+export declare const colorSetup: {
+    main: {
+        primary: string;
+        secondary: string;
+        tertiary: string;
+    };
+    other: {
+        info: string;
+        error: string;
+        warning: string;
+        success: string;
+    };
+    neutral: {
+        surface: string;
+    };
+    neutralVariant: {
+        outline: string;
+    };
+};
+export declare const otherSetup: {
+    font: {
+        size: {
+            title: {
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+            label: {
+                xs: string;
+                sm: string;
+                md: string;
+                lg: string;
+                xl: string;
+            };
+        };
+        weight: {
+            lighter: number;
+            light: number;
+            normal: number;
+            medium: number;
+            bold: number;
+            bolder: number;
+        };
+        lineHeight: {
+            xs: number;
+            sm: number;
+            md: number;
+            lg: number;
+            xl: number;
+        };
+    };
+    radius: {
+        sm: string;
+        md: string;
+        lg: string;
+        xl: string;
+        full: string;
+    };
+    spacing: {
+        layout: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+        content: {
+            xs: string;
+            sm: string;
+            md: string;
+            lg: string;
+            xl: string;
+        };
+    };
+};
+export declare const interactionSetup: {
+    state: {
+        hover: number;
+        focus: number;
+        pressed: number;
+        dragged: number;
+    };
+};

package/lib/theme/types/token.d.ts

@@ -0,0 +1,41 @@
+export type OnString = `on${Capitalize<string>}`;
+export type Container = `container`;
+export type ContainerString = `container${Capitalize<string>}`;
+export type ColorTokenValueType = string;
+export type TokenValue = ColorTokenValueType | number;
+/******   Color   ******/
+export type ColorTokenRoleType = OnString | Container | ContainerString | (string & {});
+export type NormalColorTokenType = {
+    main: string;
+    onMain: string;
+    container: string;
+    onContainer: string;
+};
+export type SpecialColorTokenType = {
+    dim: string;
+    bright: string;
+    main: string;
+    onMain: string;
+    container: string;
+    containerLow: string;
+    containerHigh: string;
+    containerLowest: string;
+    containerHighest: string;
+};
+export type ColorToken = {
+    [key: string]: ColorTokenValueType | Record<ColorTokenRoleType, ColorTokenValueType>;
+};
+/******   Other   ******/
+export type OtherToken = {
+    [key: string]: TokenValue | OtherToken;
+};
+/******   Token   ******/
+export type Token = {
+    color: Record<string, ColorToken>;
+} & {
+    [key: string]: OtherToken;
+};
+export type TokenStructure<T> = {
+    [K in keyof T]: T[K] extends object ? TokenStructure<T[K]> : string;
+};
+export type TokenHandler = (key: string, value: TokenValue, path: string[], isColor: boolean, type: string) => void;

package/lib/theme/utils/color.d.ts

@@ -0,0 +1,37 @@
+import { AnyColor } from "colord";
+import { TonalPalette } from "@material/material-color-utilities";
+/**
+ * @desc Create seed color info
+ * @param color Seed color value
+ * @param colorName Seed color name
+ */
+export declare function createSourceColor(colorName: string, color: string): {
+    name: string;
+    level: number;
+    color: string;
+    colorInt: number;
+};
+/**
+ * @desc Create tonal palette by source color int
+ * @param seedColorInt The seed color int
+ */
+export declare function createTonalPalette(seedColorInt: number): TonalPalette;
+export declare function transHctToHex(tonalPalette: TonalPalette, level: number): string;
+/**
+ * @desc Create palette by levels and source color
+ * @param seedColorInt The seed color int
+ * @param levels Level list for get one of the tonalPalette
+ * @param colorType Return color value's type
+ */
+export declare function createPalette(levels: number[], seedColorInt: number, colorType?: AnyColor): {
+    name: string;
+    level: number;
+    value: string;
+}[];
+/**
+ * @desc Generate tonal range from 0 to 100 for continuous color gradient
+ * @param hex The hex color value
+ * @param step The step interval for generating colors (default: 1)
+ * @returns Array of color values with levels from 0 to 100
+ */
+export declare function getTonalRange(colorInt: any, step?: number): string[];

package/lib/theme/utils/contract.d.ts

@@ -0,0 +1,2 @@
+import { TokenContract, TokenContractStruct } from "../token/contract";
+export declare function createContract(contractStruct: TokenContractStruct): TokenContract;

package/lib/theme/utils/token.d.ts

@@ -0,0 +1,19 @@
+import type { TokenHandler, Token } from "../../../src/theme/types/token";
+/**
+ * @desc Process a token by flattening it and calling the handler for each entry
+ * @param token The token to process
+ * @param handler The handler function to call for each token entry
+ */
+export declare function handleToken(token: Token, handler: TokenHandler): void;
+/**
+ * @desc Create semantic token from semantic definitions
+ * @param semantic Semantic token definitions
+ * @returns Flattened semantic token object with CSS variables
+ */
+export declare function createSemanticTokenVars(semantic: Token): Record<string, string | number>;
+/**
+ * @desc Generate color contract from color token
+ * @param colorToken Color token object
+ * @returns Color contract object
+ */
+export declare function createColorToken(contract: Record<string, any>, globalContract: Record<string, any>, colorNames: readonly string[]): Record<string, any>;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zidian-ui/core",
-  "version": "0.1.4",
+  "version": "0.2.0",
   "source": "./src/index.ts",
   "license": "MIT",
   "type": "module",
@@ -28,12 +28,10 @@
   ],
   "author": "GWR",
   "peerDependencies": {
-    "@radix-ui/react-slot": "^1.2.4",
-    "@radix-ui/react-visually-hidden": "^1.2.4",
     "motion": "^12.23.25",
     "react": "^18.x || ^19.x",
     "react-dom": "^18.x || ^19.x",
-    "@zidian-primitive/cascader": "^0.1.1"
+    "@zidian-primitive/cascader": "^0.1.2"
   },
   "devDependencies": {
     "motion": "^12.23.25",
@@ -43,6 +41,8 @@
   "dependencies": {
     "@material/material-color-utilities": "^0.3.0",
     "@radix-ui/react-dialog": "^1.1.15",
+    "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-select": "^2.2.6",
     "@radix-ui/react-slot": "^1.2.4",
     "@radix-ui/react-visually-hidden": "^1.2.4",
     "@vanilla-extract/css": "^1.18.0",
@@ -53,7 +53,7 @@
     "flat": "^6.0.1",
     "lucide-react": "^0.554.0",
     "react-loader-spinner": "^7.0.3",
-    "@zidian-primitive/cascader": "^0.1.1",
+    "@zidian-primitive/cascader": "^0.1.2",
     "@zidian-primitive/list": "^0.1.0"
   }
 }