@zidian-ui/core 0.1.4 → 0.2.0

package/esm/theme/provider/ThemeProvider.js

@@ -0,0 +1,34 @@
+import { jsx } from 'react/jsx-runtime';
+import { createContext, useEffect, useContext } from 'react';
+import { createSemanticTokenVars } from '../utils/token.js';
+
+const createGlobalTheme = (token, themeId = "theme-vars") => {
+  const cssVars = Object.entries(token).map(([key, value]) => `--sys-${key}: ${value};`).join("\n");
+  const cssContent = `:root {
+${cssVars}
+}`;
+  let styleTag = document.getElementById(themeId);
+  if (!styleTag) {
+    styleTag = document.createElement("style");
+    styleTag.id = themeId;
+    document.head.appendChild(styleTag);
+  }
+  styleTag.textContent = cssContent;
+};
+const ThemeContext = createContext(null);
+const ThemeProvider = ({ children, tokens }) => {
+  useEffect(() => {
+    const semanticVars = createSemanticTokenVars(tokens);
+    createGlobalTheme(semanticVars);
+  }, [tokens]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: tokens, children });
+};
+const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useTheme must be used within a ThemeProvider");
+  }
+  return context;
+};
+
+export { ThemeProvider, useTheme };

package/esm/theme/token/contract.js

@@ -0,0 +1,128 @@
+import { colorSetup } from './tokenSetup.js';
+
+const mainColorContractStruct = {
+  main: null,
+  onMain: null,
+  container: null,
+  onContainer: null
+};
+const neutralColorContractStruct = {
+  dim: null,
+  main: null,
+  bright: null,
+  onMain: null,
+  containerHighest: null,
+  containerHigh: null,
+  container: null,
+  containerLow: null,
+  containerLowest: null
+};
+const neutralVariantColorContractStruct = {
+  main: null,
+  variant: null,
+  onSurfaceVariant: null,
+  outlineVariant: null
+};
+const inverseColorContractStruct = {
+  surface: null,
+  onSurface: null,
+  primary: null
+};
+const elevationColorContractStruct = {
+  scrim: null,
+  shadow: null
+};
+const colorStyleContractStruct = {
+  ...Object.keys(colorSetup.main).reduce((res, key) => {
+    res[key] = mainColorContractStruct;
+    return res;
+  }, {}),
+  ...Object.keys(colorSetup.other).reduce((res, key) => {
+    res[key] = mainColorContractStruct;
+    return res;
+  }, {}),
+  ...Object.keys(colorSetup.neutral).reduce((res, key) => {
+    res[key] = neutralColorContractStruct;
+    return res;
+  }, {}),
+  ...Object.keys(colorSetup.neutralVariant).reduce((res, key) => {
+    res[key] = neutralVariantColorContractStruct;
+    return res;
+  }, {}),
+  inverse: inverseColorContractStruct,
+  elevation: {
+    scrim: null,
+    shadow: null
+  }
+};
+const otherStyleContractStruct = {
+  font: {
+    size: {
+      title: {
+        xs: null,
+        sm: null,
+        md: null,
+        lg: null,
+        xl: null
+      },
+      label: {
+        xs: null,
+        sm: null,
+        md: null,
+        lg: null,
+        xl: null
+      }
+    },
+    weight: {
+      lighter: null,
+      light: null,
+      normal: null,
+      medium: null,
+      bold: null,
+      bolder: null
+    },
+    lineHeight: {
+      xs: null,
+      sm: null,
+      md: null,
+      lg: null,
+      xl: null
+    }
+  },
+  spacing: {
+    layout: {
+      xs: null,
+      sm: null,
+      md: null,
+      lg: null,
+      xl: null
+    },
+    content: {
+      xs: null,
+      sm: null,
+      md: null,
+      lg: null,
+      xl: null
+    }
+  },
+  radius: {
+    sm: null,
+    md: null,
+    lg: null,
+    xl: null,
+    full: null
+  }
+};
+const stateContractStruct = {
+  hover: null,
+  focus: null,
+  pressed: null,
+  dragged: null
+};
+const tokenContractStruct = {
+  state: stateContractStruct,
+  color: colorStyleContractStruct,
+  ...otherStyleContractStruct
+};
+
+export { elevationColorContractStruct, inverseColorContractStruct, mainColorContractStruct, neutralColorContractStruct, neutralVariantColorContractStruct, tokenContractStruct };

package/esm/theme/token/tokenMap.js

@@ -0,0 +1,52 @@
+const defaultColorMap = {
+  main: {
+    main: { light: 40, dark: 80 },
+    // primary
+    onMain: { light: 100, dark: 20 },
+    // onPrimary
+    container: { light: 90, dark: 30 },
+    // primaryContainer
+    onContainer: { light: 10, dark: 90 }
+    // onPrimaryContainer
+  },
+  neutral: {
+    dim: { light: 87, dark: 6 },
+    // surfaceDim
+    main: { light: 98, dark: 6 },
+    // surface
+    bright: { light: 98, dark: 24 },
+    // surfaceBright
+    onMain: { light: 10, dark: 90 },
+    // onSurface
+    containerLowest: { light: 100, dark: 4 },
+    // surfaceContainerLowest
+    containerLow: { light: 96, dark: 10 },
+    // surfaceContainerLow
+    container: { light: 94, dark: 12 },
+    // surfaceContainer
+    containerHigh: { light: 92, dark: 17 },
+    // surfaceContainerHigh
+    containerHighest: { light: 90, dark: 22 }
+    // surfaceContainerHighest
+  },
+  neutralVariant: {
+    main: { light: 50, dark: 60 },
+    // outline (M3 规范: Light 50, Dark 60)
+    variant: { light: 90, dark: 30 },
+    // surfaceVariant
+    onSurfaceVariant: { light: 30, dark: 80 },
+    // onSurfaceVariant
+    outlineVariant: { light: 80, dark: 30 }
+    // outlineVariant (补充：常用于分割线)
+  },
+  inverse: {
+    primary: { light: 80, dark: 40 },
+    // inversePrimary
+    surface: { light: 20, dark: 90 },
+    // inverseSurface
+    onSurface: { light: 95, dark: 20 }
+    // inverseOnSurface
+  }
+};
+
+export { defaultColorMap };

package/esm/theme/token/tokenSetup.js

@@ -0,0 +1,87 @@
+const colorSetup = {
+  main: {
+    primary: "#00B872",
+    secondary: "#F3A81A",
+    tertiary: "#3B6470"
+  },
+  other: {
+    info: "#93CCFF",
+    error: "#FFB4AB",
+    warning: "#FFB870",
+    success: "#78DC77"
+  },
+  neutral: {
+    surface: "#111411"
+  },
+  neutralVariant: {
+    outline: "#9e9e9e"
+  }
+};
+const otherSetup = {
+  font: {
+    size: {
+      title: {
+        xs: "16px",
+        sm: "20px",
+        md: "24px",
+        lg: "28px",
+        xl: "32px"
+      },
+      label: {
+        xs: "10px",
+        sm: "12px",
+        md: "14px",
+        lg: "16px",
+        xl: "18px"
+      }
+    },
+    weight: {
+      lighter: 200,
+      light: 300,
+      normal: 400,
+      medium: 500,
+      bold: 600,
+      bolder: 700
+    },
+    lineHeight: {
+      xs: 1,
+      sm: 1.2,
+      md: 1.4,
+      lg: 1.5,
+      xl: 1.6
+    }
+  },
+  radius: {
+    sm: "4px",
+    md: "8px",
+    lg: "12px",
+    xl: "16px",
+    full: "9999px"
+  },
+  spacing: {
+    layout: {
+      xs: "16px",
+      sm: "18px",
+      md: "24px",
+      lg: "28px",
+      xl: "32px"
+    },
+    content: {
+      xs: "4px",
+      sm: "8px",
+      md: "12px",
+      lg: "14px",
+      xl: "16px"
+    }
+  }
+};
+const interactionSetup = {
+  state: {
+    hover: 0.08,
+    focus: 0.12,
+    pressed: 0.12,
+    dragged: 0.16
+  }
+};
+
+export { colorSetup, interactionSetup, otherSetup };

package/esm/theme/utils/color.js

@@ -0,0 +1,42 @@
+import { colord } from 'colord';
+import { TonalPalette, argbFromHex, Hct, hexFromArgb } from '@material/material-color-utilities';
+
+function createSourceColor(colorName, color) {
+  const colorInstance = colord(color);
+  if (colorInstance.isValid()) {
+    const sourceColor = argbFromHex(colorInstance.toHex());
+    const sourceColorHct = Hct.fromInt(sourceColor);
+    return {
+      name: colorName,
+      level: sourceColorHct.tone,
+      color: colorInstance.toHex(),
+      colorInt: sourceColorHct.toInt()
+    };
+  } else {
+    throw new Error("Please provide the correct color value.");
+  }
+}
+function createTonalPalette(seedColorInt) {
+  return TonalPalette.fromInt(seedColorInt);
+}
+function transHctToHex(tonalPalette, level) {
+  return colord(hexFromArgb(tonalPalette.tone(level))).toHex();
+}
+function createPalette(levels, seedColorInt, colorType) {
+  const tonalPalette = TonalPalette.fromInt(seedColorInt);
+  return levels.map((level) => ({
+    name: `${level}`,
+    level,
+    value: transHctToHex(tonalPalette, level)
+  }));
+}
+function getTonalRange(colorInt, step = 1) {
+  const tonalPalette = TonalPalette.fromInt(colorInt);
+  const levels = [];
+  for (let i = 0; i <= 100; i += step) {
+    levels.push(i);
+  }
+  return levels.map((level) => transHctToHex(tonalPalette, level));
+}
+
+export { createPalette, createSourceColor, createTonalPalette, getTonalRange, transHctToHex };

package/esm/theme/utils/contract.js

@@ -0,0 +1,15 @@
+import { unflatten } from 'flat';
+import { handleToken } from './token.js';
+
+function createContract(contractStruct) {
+  const semanticContract = {};
+  const camelToKebab = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  handleToken(contractStruct, (key, value) => {
+    const parts = key.split(".").map(camelToKebab);
+    const varName = parts.join("-");
+    semanticContract[key] = varName;
+  });
+  return unflatten(semanticContract);
+}
+
+export { createContract };

package/esm/theme/utils/token.js

@@ -0,0 +1,39 @@
+import { flatten } from 'flat';
+
+function handleToken(token, handler) {
+  const flattenedToken = flatten(token);
+  Object.entries(flattenedToken).forEach(([key, value]) => {
+    const path = key.split(".");
+    const category = path[0];
+    const type = path.length > 1 ? path[1] : "";
+    const isColor = category === "color" && path.length >= 2;
+    handler(key, value, path, isColor, type);
+  });
+}
+function createSemanticTokenVars(semantic) {
+  const semanticVars = {};
+  const camelToKebab = (str) => str.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
+  handleToken(semantic, (key, value) => {
+    const parts = key.split(".").map(camelToKebab);
+    const varName = parts.join("-");
+    semanticVars[varName] = value;
+  });
+  return semanticVars;
+}
+function createColorToken(contract, globalContract, colorNames) {
+  return colorNames.reduce((res, colorName) => {
+    const current = globalContract?.[colorName];
+    if (!current) return res;
+    res[colorName] = {
+      vars: {
+        [contract.main]: current.main,
+        [contract.onMain]: current.onMain,
+        [contract.container]: current.container,
+        [contract.onContainer]: current.onContainer
+      }
+    };
+    return res;
+  }, {});
+}
+
+export { createColorToken, createSemanticTokenVars, handleToken };

package/lib/components/collection/List/List.css.d.ts

@@ -0,0 +1,5 @@
+export declare const Container: string;
+export declare const Item: string;
+export declare const Content: string;
+export declare const ItemPlace: string;
+export declare const ContentPlace: string;

package/lib/components/collection/List/List.d.ts

@@ -0,0 +1 @@
+export declare const List: import("react").ForwardRefExoticComponent<Omit<any, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/collection/List/List.prop.d.ts

@@ -0,0 +1,13 @@
+import { ForwardRefRenderFunction } from "react";
+export type ListStatus = "normal" | "empty" | "error" | "loading";
+export interface ListProps {
+    list: any[];
+    listStatus: {
+        status: ListStatus;
+        initLoad: boolean;
+    };
+    onLoadMore: () => Promise<void>;
+    itemSlot: ForwardRefRenderFunction<any, any>;
+    itemPlaceSlot: ForwardRefRenderFunction<any, any>;
+    contentPlaceSlot: ForwardRefRenderFunction<any, any>;
+}

package/lib/components/collection/List/components/DefaultContentPlace.d.ts

@@ -0,0 +1 @@
+export declare const DefaultContentPlace: (props: any, ref: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/collection/List/components/DefaultItemPlace.d.ts

@@ -0,0 +1 @@
+export declare const DefaultItemPlace: (props: any, ref: any) => import("react/jsx-runtime").JSX.Element;

package/lib/components/collection/List/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./List";
+export type { ListProps, ListStatus } from "./List.prop";

package/lib/components/collection/index.d.ts

@@ -0,0 +1 @@
+export * from "./List";

package/lib/components/common/Button/Button.css.d.ts

@@ -0,0 +1,137 @@
+import { ComplexStyleRule } from '@vanilla-extract/css';
+import { ColorVariantName } from '../../../theme/contract/colorContract.css';
+export declare const buttonToken: {
+    borderColor: `var(--${string})`;
+    contentColor: `var(--${string})`;
+    backgroundColor: `var(--${string})`;
+    stateLayerColor: `var(--${string})`;
+    fontSize: `var(--${string})`;
+    paddingX: `var(--${string})`;
+    paddingY: `var(--${string})`;
+    minHeight: `var(--${string})`;
+    contentGap: `var(--${string})`;
+    borderRadius: `var(--${string})`;
+};
+export declare const buttonRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: Record<ColorVariantName, string>;
+    size: {
+        small: {
+            vars: Record<string, string> | undefined;
+            minHeight: `var(--${string})`;
+            paddingInline: `var(--${string})`;
+            paddingBlock: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        } & ComplexStyleRule;
+        normal: {
+            vars: Record<string, string> | undefined;
+            minHeight: `var(--${string})`;
+            paddingInline: `var(--${string})`;
+            paddingBlock: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        } & ComplexStyleRule;
+        full: {
+            vars: Record<string, string> | undefined;
+            minHeight: `var(--${string})`;
+            paddingInline: `var(--${string})`;
+            paddingBlock: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        } & ComplexStyleRule;
+    };
+    shape: {
+        round: {
+            vars: Record<string, string> | undefined;
+            borderRadius: `var(--${string})`;
+        } & ComplexStyleRule;
+        square: {
+            vars: Record<string, string> | undefined;
+            borderRadius: `var(--${string})`;
+        } & ComplexStyleRule;
+    };
+    variant: {
+        filled: {
+            vars: {
+                [buttonToken.contentColor]: `var(--${string})`;
+                [buttonToken.backgroundColor]: `var(--${string})`;
+            };
+            selectors: {
+                '&:hover::before': {
+                    vars: {
+                        [buttonToken.stateLayerColor]: string;
+                    };
+                };
+                '&:active::before': {
+                    vars: {
+                        [buttonToken.stateLayerColor]: string;
+                    };
+                };
+            };
+        };
+        tonal: {
+            vars: {
+                [buttonToken.contentColor]: `var(--${string})`;
+                [buttonToken.backgroundColor]: `var(--${string})`;
+            };
+            selectors: {
+                '&:hover::before': {
+                    vars: {
+                        [buttonToken.stateLayerColor]: string;
+                    };
+                };
+                '&:active::before': {
+                    vars: {
+                        [buttonToken.stateLayerColor]: string;
+                    };
+                };
+            };
+        };
+        outlined: {
+            vars: {
+                [buttonToken.contentColor]: `var(--${string})`;
+                [buttonToken.borderColor]: `var(--${string})`;
+            };
+            selectors: {
+                '&:hover::before': {
+                    vars: {
+                        [buttonToken.stateLayerColor]: string;
+                    };
+                };
+                '&:active::before': {
+                    vars: {
+                        [buttonToken.stateLayerColor]: string;
+                    };
+                };
+            };
+        };
+        plain: {
+            vars: {
+                [buttonToken.contentColor]: `var(--${string})`;
+            };
+            selectors: {
+                '&:hover::before': {
+                    vars: {
+                        [buttonToken.stateLayerColor]: string;
+                    };
+                };
+                '&:active::before': {
+                    vars: {
+                        [buttonToken.stateLayerColor]: string;
+                    };
+                };
+            };
+        };
+    };
+    disabled: {
+        true: {
+            cursor: "not-allowed";
+            pointerEvents: "none";
+            backgroundColor: `color-mix(in srgb, var(--${string}) 12%, transparent)`;
+        };
+    };
+    loading: {
+        true: {
+            cursor: "wait";
+            pointerEvents: "none";
+            color: "transparent !important";
+        };
+    };
+}>;

package/lib/components/common/Button/Button.d.ts

@@ -0,0 +1,2 @@
+import type { ButtonProps } from "./Button.props";
+export declare const Button: import("react").ForwardRefExoticComponent<Omit<ButtonProps, "ref"> & import("react").RefAttributes<HTMLButtonElement>>;

package/lib/components/common/Button/Button.props.d.ts

@@ -0,0 +1,10 @@
+import { ComponentPropsWithRef, ElementType, ReactElement } from "react";
+import { RecipeVariants } from "@vanilla-extract/recipes";
+import { buttonRecipe } from "./Button.css";
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+    asChild?: boolean;
+    loading?: boolean;
+    variants?: Omit<RecipeVariants<typeof buttonRecipe>, "disabled" | "loading">;
+    loadingSlot?: ReactElement;
+    componentType?: ElementType;
+}

package/lib/components/common/Button/index.d.ts

@@ -0,0 +1,2 @@
+export { Button } from './Button';
+export type { ButtonProps } from "./Button.props";

package/lib/components/common/Tag/Tag.css.d.ts

@@ -0,0 +1,67 @@
+import { ComplexStyleRule } from "@vanilla-extract/css";
+import { ColorVariantName } from '../../../theme/contract/colorContract.css';
+export declare const tagToken: {
+    borderColor: `var(--${string})`;
+    contentColor: `var(--${string})`;
+    backgroundColor: `var(--${string})`;
+    stateLayerColor: `var(--${string})`;
+    fontSize: `var(--${string})`;
+    paddingX: `var(--${string})`;
+    paddingY: `var(--${string})`;
+    minHeight: `var(--${string})`;
+    contentGap: `var(--${string})`;
+    borderRadius: `var(--${string})`;
+};
+export declare const tagRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
+    color: Record<ColorVariantName, string>;
+    variant: {
+        filled: {
+            vars: {
+                [tagToken.contentColor]: `var(--${string})`;
+                [tagToken.backgroundColor]: `var(--${string})`;
+            };
+        };
+        tonal: {
+            vars: {
+                [tagToken.contentColor]: `var(--${string})`;
+                [tagToken.backgroundColor]: `var(--${string})`;
+            };
+        };
+        outlined: {
+            vars: {
+                [tagToken.contentColor]: `var(--${string})`;
+                [tagToken.borderColor]: `var(--${string})`;
+            };
+        };
+        plain: {
+            vars: {
+                [tagToken.contentColor]: `var(--${string})`;
+                [tagToken.backgroundColor]: string;
+            };
+        };
+    };
+    size: {
+        small: {
+            vars: Record<string, string> | undefined;
+            paddingInline: `var(--${string})`;
+            paddingBlock: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        } & ComplexStyleRule;
+        normal: {
+            vars: Record<string, string> | undefined;
+            paddingInline: `var(--${string})`;
+            paddingBlock: `var(--${string})`;
+            fontSize: `var(--${string})`;
+        } & ComplexStyleRule;
+    };
+    shape: {
+        round: {
+            vars: Record<string, string> | undefined;
+            borderRadius: `var(--${string})`;
+        } & ComplexStyleRule;
+        square: {
+            vars: Record<string, string> | undefined;
+            borderRadius: `var(--${string})`;
+        } & ComplexStyleRule;
+    };
+}>;

package/lib/components/common/Tag/Tag.d.ts

@@ -0,0 +1,2 @@
+import type { TagProps } from "./Tag.props";
+export declare const Tag: import("react").ForwardRefExoticComponent<Omit<TagProps, "ref"> & import("react").RefAttributes<HTMLDivElement>>;

package/lib/components/common/Tag/Tag.props.d.ts

@@ -0,0 +1,8 @@
+import type { ComponentPropsWithRef } from "react";
+import { RecipeVariants } from "@vanilla-extract/recipes";
+import { tagRecipe } from "./Tag.css";
+export interface TagProps extends ComponentPropsWithRef<'div'> {
+    color?: string;
+    asChild?: boolean;
+    variants?: RecipeVariants<typeof tagRecipe>;
+}

package/lib/components/common/Tag/index.d.ts

@@ -0,0 +1,2 @@
+export { Tag } from "./Tag";
+export type { TagProps } from "./Tag.props";

package/lib/components/common/index.d.ts

@@ -0,0 +1,2 @@
+export * from "./Button";
+export * from "./Tag";