@aaas-pro/library 0.0.0-stage → 0.1.0

package/dist/styles.js

@@ -0,0 +1 @@
+/* empty css           */

package/dist/theme/index.d.ts

@@ -0,0 +1,110 @@
+import { type ReactNode } from 'react';
+export type ThemeName = 'green' | 'teal' | 'cyan' | 'lime' | 'gold' | 'blue' | 'indigo' | 'violet' | 'rose' | 'orange' | 'slate' | 'dark';
+export declare const themeNames: readonly ThemeName[];
+/** 导航栏外观：浅色随页面表面，深色为品牌色调的深底；与色彩预设相互独立。 */
+export type NavStyle = 'light' | 'dark';
+export declare const navStyleLabels: Record<NavStyle, string>;
+export interface ThemeToken {
+    /** 品牌主色；任意有效 CSS 颜色。 */
+    colorPrimary: string;
+    colorSuccess: string;
+    colorWarning: string;
+    colorDanger: string;
+    colorInfo: string;
+    colorBackground: string;
+    colorSurface: string;
+    colorText: string;
+    colorTextSecondary: string;
+    colorBorder: string;
+    colorPrimaryText: string;
+    /** 基础圆角；控件 = 基础 − 2px，卡片 = 基础 + 4px，弹窗 = 基础 + 8px。 */
+    borderRadius: string;
+    /** 导航栏（侧边栏）背景。浅色预设默认同 colorSurface。 */
+    colorNavBackground: string;
+    /** 导航栏文字与图标。 */
+    colorNavText: string;
+    /** 导航栏选中项的强调色。 */
+    colorNavActive: string;
+}
+export interface ThemeConfig {
+    preset?: ThemeName;
+    token?: Partial<ThemeToken>;
+}
+export interface ConfigProviderProps {
+    children: ReactNode;
+    /** 默认 green；token 可覆盖预设中的单个颜色。 */
+    theme?: ThemeName | ThemeConfig;
+    /** local 仅影响本 Provider；document 同时影响页面背景和第三方 body 浮层。 */
+    scope?: 'local' | 'document';
+    className?: string;
+}
+export declare const themePresets: Record<ThemeName, ThemeToken>;
+export declare const themeLabels: Record<ThemeName, string>;
+export declare const themeDescriptions: Record<ThemeName, string>;
+/** 深色导航栏：由主色调出的深底（12% 主色混入近黑），文字浅灰，选中色为提亮 35% 的主色，保证在深底上可读。 */
+export declare function darkNavTokens(token: ThemeToken): Pick<ThemeToken, 'colorNavBackground' | 'colorNavText' | 'colorNavActive'>;
+export declare function resolveTheme(theme?: ThemeName | ThemeConfig): {
+    preset: ThemeName;
+    token: {
+        colorPrimary: string;
+        colorSuccess: string;
+        colorWarning: string;
+        colorDanger: string;
+        colorInfo: string;
+        colorBackground: string;
+        colorSurface: string;
+        colorText: string;
+        colorTextSecondary: string;
+        colorBorder: string;
+        colorPrimaryText: string;
+        borderRadius: string;
+        colorNavBackground: string;
+        colorNavText: string;
+        colorNavActive: string;
+    };
+};
+export declare function themeVariables(token: ThemeToken): Record<string, string>;
+export declare function useLibraryTheme(): {
+    preset: ThemeName;
+    token: ThemeToken;
+    portalContainer: HTMLElement | undefined;
+};
+export declare function useThemePortalContainer(): HTMLElement | undefined;
+export declare function ConfigProvider({ children, theme, scope, className }: ConfigProviderProps): import("react").JSX.Element;
+export interface ThemeOverrideContext {
+    theme: ThemeName;
+    navStyle: NavStyle;
+}
+export type ThemeOverrides = Partial<Record<ThemeName, Partial<ThemeToken>>> | ((ctx: ThemeOverrideContext) => Partial<ThemeToken> | undefined);
+export interface ThemeProviderProps {
+    children: ReactNode;
+    /** 首次访问使用的预设；本地已有记忆时以记忆为准。默认 green。 */
+    defaultTheme?: ThemeName;
+    /** 可供切换的预设，默认全部；记忆值不在其中时回落到 defaultTheme。 */
+    themes?: readonly ThemeName[];
+    /** 首次访问的导航栏外观，默认 light（白色导航）。深色预设始终使用深色导航。 */
+    defaultNavStyle?: NavStyle;
+    /** 应用级覆盖：按预设声明，或按（预设, 导航外观）计算；在内置深色导航派生之后应用。 */
+    overrides?: ThemeOverrides;
+    /** localStorage 键，默认 `aaas-theme`（导航外观存于 `<key>:nav`）；传 null 不持久化。 */
+    storageKey?: string | null;
+    /** 同 ConfigProvider.scope；整页应用建议 document。默认 document。 */
+    scope?: 'local' | 'document';
+    className?: string;
+}
+export interface ThemeSwitchContext {
+    theme: ThemeName;
+    setTheme: (theme: ThemeName) => void;
+    themes: readonly ThemeName[];
+    labels: Record<ThemeName, string>;
+    /** 当前导航栏外观；深色预设下恒为 dark。 */
+    navStyle: NavStyle;
+    setNavStyle: (style: NavStyle) => void;
+}
+/**
+ * 带记忆的主题容器：在 ConfigProvider 之上提供 `useTheme()` 以读取/切换色彩预设与导航栏外观，
+ * 两者分别写入 localStorage 并跨标签页同步；`overrides` 让应用再补充自己的 token。
+ */
+export declare function ThemeProvider({ children, defaultTheme, themes, defaultNavStyle, overrides, storageKey, scope, className }: ThemeProviderProps): import("react").JSX.Element;
+/** 读取与切换当前主题；须位于 ThemeProvider 内。 */
+export declare function useTheme(): ThemeSwitchContext;

package/dist/theme/index.js

@@ -0,0 +1,199 @@
+import { jsx } from "react/jsx-runtime";
+import { createContext, useContext, useState, useMemo, useLayoutEffect, useCallback, useEffect } from "react";
+const themeNames = ["green", "teal", "cyan", "lime", "gold", "blue", "indigo", "violet", "rose", "orange", "slate", "dark"];
+const navStyleLabels = { light: "浅色导航", dark: "深色导航" };
+const light = { colorPrimary: "#00875a", colorSuccess: "#15803d", colorWarning: "#b45309", colorDanger: "#dc2626", colorInfo: "#2563eb", colorBackground: "#f3f6f5", colorSurface: "#ffffff", colorText: "#17241f", colorTextSecondary: "#5b6b65", colorBorder: "#e1e7e4", colorPrimaryText: "#ffffff", borderRadius: "0.5rem", colorNavBackground: "#ffffff", colorNavText: "#17241f", colorNavActive: "#00875a" };
+const themePresets = {
+  green: light,
+  teal: { ...light, colorPrimary: "#0f766e", colorBackground: "#f1f7f6", colorText: "#132a28", colorTextSecondary: "#53706d", colorBorder: "#dbe8e6", colorNavText: "#132a28", colorNavActive: "#0f766e" },
+  cyan: { ...light, colorPrimary: "#0e7490", colorBackground: "#f0f9fb", colorText: "#15313b", colorTextSecondary: "#536e79", colorBorder: "#d9eaf0", colorNavText: "#15313b", colorNavActive: "#0e7490" },
+  lime: { ...light, colorPrimary: "#4d7c0f", colorBackground: "#f6faee", colorText: "#253313", colorTextSecondary: "#626f4e", colorBorder: "#e1e9d1", colorNavText: "#253313", colorNavActive: "#4d7c0f" },
+  gold: { ...light, colorPrimary: "#a16207", colorBackground: "#fdf8ed", colorText: "#3b2d14", colorTextSecondary: "#78684b", colorBorder: "#eee4cb", colorNavText: "#3b2d14", colorNavActive: "#a16207" },
+  blue: { ...light, colorPrimary: "#175cd3", colorBackground: "#f2f6fd", colorText: "#182b4d", colorTextSecondary: "#536b8e", colorBorder: "#dbe4f3", colorNavText: "#182b4d", colorNavActive: "#175cd3" },
+  indigo: { ...light, colorPrimary: "#4338ca", colorBackground: "#f4f4fc", colorText: "#1e1b4b", colorTextSecondary: "#5b5b8a", colorBorder: "#e0e1f2", colorNavText: "#1e1b4b", colorNavActive: "#4338ca" },
+  violet: { ...light, colorPrimary: "#6d28d9", colorBackground: "#f7f4fc", colorText: "#2a1d4a", colorTextSecondary: "#6b5e8a", colorBorder: "#e6dff3", colorNavText: "#2a1d4a", colorNavActive: "#6d28d9" },
+  rose: { ...light, colorPrimary: "#be123c", colorBackground: "#fbf4f6", colorText: "#3f1a26", colorTextSecondary: "#80606a", colorBorder: "#f0dde3", colorNavText: "#3f1a26", colorNavActive: "#be123c" },
+  orange: { ...light, colorPrimary: "#c4510b", colorBackground: "#fbf5f0", colorText: "#402818", colorTextSecondary: "#826348", colorBorder: "#efe1d4", colorNavText: "#402818", colorNavActive: "#c4510b" },
+  // 石墨：主色为深石板灰，适合强调数据本身而非品牌色的报表场景；语义色不变。
+  slate: { ...light, colorPrimary: "#334155", colorBackground: "#f4f5f7", colorText: "#0f172a", colorTextSecondary: "#5b667a", colorBorder: "#e0e4ea", colorNavText: "#0f172a", colorNavActive: "#334155" },
+  // 深色：以深海军蓝为底（与 aaaspro 导航同族），表面比底色亮一级、边框再亮一级，主色提亮以保证深底文字对比度。
+  dark: { ...light, colorPrimary: "#3ddc97", colorSuccess: "#4ade80", colorWarning: "#fbbf24", colorDanger: "#fb7185", colorInfo: "#60a5fa", colorBackground: "#0d151d", colorSurface: "#16222d", colorText: "#e6edf3", colorTextSecondary: "#9fb0bf", colorBorder: "#2a3845", colorPrimaryText: "#07261a", colorNavBackground: "#0a1118", colorNavText: "#d5dee7", colorNavActive: "#3ddc97" }
+};
+const themeLabels = { green: "生态绿", teal: "青碧", cyan: "青空", lime: "青柠", gold: "鎏金", blue: "科技蓝", indigo: "靛蓝", violet: "紫罗兰", rose: "玫红", orange: "暖橙", slate: "石墨", dark: "深色" };
+const themeDescriptions = { green: "农牧品牌默认", teal: "环控与水产场景", cyan: "清透青蓝与浅色表面", lime: "自然青柠与柔和底色", gold: "沉稳金色与暖色表面", blue: "数据与监控场景", indigo: "财务与审批场景", violet: "AI 与分析场景", rose: "营销与活动场景", orange: "交易与采购场景", slate: "报表与打印场景", dark: "弱光环境 / 大屏" };
+function darkNavTokens(token) {
+  return { colorNavBackground: mix(token.colorPrimary, "#0f1720", 12), colorNavText: "#d5dee7", colorNavActive: mix(token.colorPrimary, "#ffffff", 65) };
+}
+const mix = (a, b, percent) => `color-mix(in srgb, ${a} ${percent}%, ${b})`;
+function resolveTheme(theme = "green") {
+  const preset = typeof theme === "string" ? theme : theme.preset ?? "green";
+  return { preset, token: { ...themePresets[preset], ...typeof theme === "object" ? theme.token : {} } };
+}
+function themeVariables(token) {
+  const primarySoft = mix(token.colorPrimary, token.colorSurface, 16);
+  const vars = {
+    "--primary": token.colorPrimary,
+    "--primary-foreground": token.colorPrimaryText,
+    "--primary-hover": mix(token.colorPrimary, token.colorText, 85),
+    "--primary-soft": primarySoft,
+    "--primary-light": mix(token.colorPrimary, token.colorSurface, 70),
+    "--background": token.colorBackground,
+    "--foreground": token.colorText,
+    "--card": token.colorSurface,
+    "--card-foreground": token.colorText,
+    "--popover": token.colorSurface,
+    "--popover-foreground": token.colorText,
+    "--muted": mix(token.colorText, token.colorSurface, 4),
+    "--muted-foreground": token.colorTextSecondary,
+    "--secondary": primarySoft,
+    "--secondary-foreground": token.colorPrimary,
+    "--accent": primarySoft,
+    "--accent-foreground": token.colorText,
+    // 输入框边框比分隔线更深，便于识别可编辑区域。
+    "--border": token.colorBorder,
+    "--input": mix(token.colorText, token.colorBorder, 16),
+    "--ring": token.colorPrimary,
+    "--destructive": token.colorDanger,
+    "--success": token.colorSuccess,
+    "--warning": token.colorWarning,
+    "--info": token.colorInfo,
+    "--radius": token.borderRadius,
+    "--page-bg": token.colorBackground,
+    "--eco-green": token.colorPrimary,
+    "--eco-green-light": primarySoft,
+    "--eco-green-dark": mix(token.colorPrimary, "#000", 80),
+    "--sidebar": token.colorNavBackground,
+    "--sidebar-foreground": token.colorNavText,
+    "--sidebar-accent": mix(token.colorNavText, token.colorNavBackground, 7),
+    "--sidebar-accent-foreground": token.colorNavText,
+    "--sidebar-border": mix(token.colorNavText, token.colorNavBackground, 10),
+    "--sidebar-ring": token.colorNavActive,
+    "--sidebar-primary": token.colorNavActive,
+    "--sidebar-primary-foreground": token.colorNavBackground,
+    "--chart-1": token.colorPrimary,
+    "--chart-2": token.colorSuccess,
+    "--chart-3": token.colorInfo,
+    "--chart-4": token.colorWarning,
+    "--chart-5": token.colorDanger,
+    "--docs-blue": token.colorPrimary,
+    "--docs-border": token.colorBorder,
+    "--doc-accent": token.colorPrimary,
+    "--doc-active": primarySoft
+  };
+  return vars;
+}
+const ThemeContext = createContext({ preset: "green", token: light, portalContainer: void 0 });
+function useLibraryTheme() {
+  return useContext(ThemeContext);
+}
+function useThemePortalContainer() {
+  return useLibraryTheme().portalContainer;
+}
+function ConfigProvider({ children, theme = "green", scope = "local", className = "" }) {
+  const { preset, token } = resolveTheme(theme);
+  const [container, setContainer] = useState(null);
+  const vars = useMemo(() => themeVariables(token), [JSON.stringify(token)]);
+  useLayoutEffect(() => {
+    if (scope !== "document") return;
+    const root = document.documentElement;
+    const old = Object.fromEntries(Object.keys(vars).map((k) => [k, root.style.getPropertyValue(k)]));
+    const wasDark = root.classList.contains("dark");
+    for (const [k, v] of Object.entries(vars)) root.style.setProperty(k, v);
+    root.classList.toggle("dark", preset === "dark");
+    return () => {
+      for (const [k, v] of Object.entries(old)) v ? root.style.setProperty(k, v) : root.style.removeProperty(k);
+      root.classList.toggle("dark", wasDark);
+    };
+  }, [vars, scope, preset]);
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value: { preset, token, portalContainer: container ?? void 0 }, children: /* @__PURE__ */ jsx("div", { ref: setContainer, "data-aaas-theme": preset, className: `${preset === "dark" ? "dark " : ""}aaas-theme ${className}`, style: { ...vars, colorScheme: preset === "dark" ? "dark" : "light" }, children }) });
+}
+const ThemeSwitchCtx = createContext(null);
+const isThemeName = (v) => typeof v === "string" && themeNames.includes(v);
+const isNavStyle = (v) => v === "light" || v === "dark";
+function readStored(key, guard) {
+  if (!key || typeof window === "undefined") return void 0;
+  try {
+    const v = window.localStorage.getItem(key);
+    return guard(v) ? v : void 0;
+  } catch {
+    return void 0;
+  }
+}
+function writeStored(key, value) {
+  if (!key || typeof window === "undefined") return;
+  try {
+    window.localStorage.setItem(key, value);
+  } catch {
+  }
+}
+function markSwitching() {
+  if (typeof document === "undefined") return;
+  const root = document.documentElement;
+  root.setAttribute("data-theme-switching", "");
+  window.setTimeout(() => root.removeAttribute("data-theme-switching"), 260);
+}
+function ThemeProvider({ children, defaultTheme = "green", themes = themeNames, defaultNavStyle = "light", overrides, storageKey = "aaas-theme", scope = "document", className }) {
+  const navKey = storageKey ? `${storageKey}:nav` : null;
+  const allowed = useCallback((v) => v && themes.includes(v) ? v : themes.includes(defaultTheme) ? defaultTheme : themes[0] ?? "green", [themes, defaultTheme]);
+  const [theme, setThemeState] = useState(() => allowed(readStored(storageKey, isThemeName)));
+  const [navPref, setNavPref] = useState(() => readStored(navKey, isNavStyle) ?? defaultNavStyle);
+  const setTheme = useCallback((next) => {
+    const value = allowed(next);
+    setThemeState((prev) => {
+      if (prev !== value) markSwitching();
+      return value;
+    });
+    writeStored(storageKey, value);
+  }, [allowed, storageKey]);
+  const setNavStyle = useCallback((next) => {
+    setNavPref((prev) => {
+      if (prev !== next) markSwitching();
+      return next;
+    });
+    writeStored(navKey, next);
+  }, [navKey]);
+  useEffect(() => {
+    if (!storageKey || typeof window === "undefined") return;
+    const onStorage = (e) => {
+      if (e.key === storageKey && isThemeName(e.newValue)) {
+        markSwitching();
+        setThemeState(allowed(e.newValue));
+      }
+      if (e.key === navKey && isNavStyle(e.newValue)) {
+        markSwitching();
+        setNavPref(e.newValue);
+      }
+    };
+    window.addEventListener("storage", onStorage);
+    return () => window.removeEventListener("storage", onStorage);
+  }, [storageKey, navKey, allowed]);
+  const navStyle = theme === "dark" ? "dark" : navPref;
+  const config = useMemo(() => {
+    const preset = themePresets[theme];
+    const nav = navStyle === "dark" && theme !== "dark" ? darkNavTokens(preset) : {};
+    const extra = typeof overrides === "function" ? overrides({ theme, navStyle }) : overrides?.[theme];
+    return { preset: theme, token: { ...nav, ...extra } };
+  }, [theme, navStyle, overrides]);
+  const ctx = useMemo(() => ({ theme, setTheme, themes, labels: themeLabels, navStyle, setNavStyle }), [theme, setTheme, themes, navStyle, setNavStyle]);
+  return /* @__PURE__ */ jsx(ThemeSwitchCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx(ConfigProvider, { theme: config, scope, className, children }) });
+}
+function useTheme() {
+  const ctx = useContext(ThemeSwitchCtx);
+  if (!ctx) throw new Error("useTheme 须在 <ThemeProvider> 内使用");
+  return ctx;
+}
+export {
+  ConfigProvider,
+  ThemeProvider,
+  darkNavTokens,
+  navStyleLabels,
+  resolveTheme,
+  themeDescriptions,
+  themeLabels,
+  themeNames,
+  themePresets,
+  themeVariables,
+  useLibraryTheme,
+  useTheme,
+  useThemePortalContainer
+};

package/licenses/Lucide.txt

@@ -0,0 +1,15 @@
+ISC License
+
+Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
+
+Permission to use, copy, modify, and/or distribute this software for any
+purpose with or without fee is hereby granted, provided that the above
+copyright notice and this permission notice appear in all copies.
+
+THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
+WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
+MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
+ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
+WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
+ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
+OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/package.json

@@ -1,6 +1,69 @@
 {
   "name": "@aaas-pro/library",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
-}
+  "version": "0.1.0",
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "README.md",
+    "licenses"
+  ],
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "source": "./src/index.ts",
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": {
+      "source": "./src/styles.css",
+      "default": "./dist/styles.css"
+    },
+    "./theme": {
+      "source": "./src/theme/index.tsx",
+      "types": "./dist/theme/index.d.ts",
+      "import": "./dist/theme/index.js"
+    },
+    "./lib/utils": {
+      "source": "./src/lib/utils.ts",
+      "types": "./dist/lib/utils.d.ts",
+      "import": "./dist/lib/utils.js"
+    },
+    "./hooks/*": {
+      "source": "./src/hooks/*.ts",
+      "types": "./dist/hooks/*.d.ts",
+      "import": "./dist/hooks/*.js"
+    },
+    "./components/*": {
+      "source": "./src/components/*.tsx",
+      "types": "./dist/components/*.d.ts",
+      "import": "./dist/components/*.js"
+    },
+    "./icons": {
+      "source": "./src/icons/index.tsx",
+      "types": "./dist/icons/index.d.ts",
+      "import": "./dist/icons/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "react-router-dom": "^7.0.0"
+  },
+  "dependencies": {},
+  "scripts": {
+    "dev": "vite --config docs/vite.config.ts",
+    "check": "tsc --noEmit",
+    "build": "vite build && tsc -p tsconfig.build.json",
+    "build:docs": "pnpm run docs && vite build --config docs/vite.config.ts",
+    "test": "vitest run --config vitest.config.ts",
+    "test:permissions": "vitest run --config vitest.permissions.config.ts",
+    "docs": "node --max-old-space-size=8192 scripts/生成组件文档.mjs",
+    "check:examples": "node --max-old-space-size=8192 scripts/check-examples.mjs"
+  }
+}