@composy/keyboard-core 0.0.1

package/lib/managers/position-manager.d.ts

@@ -0,0 +1,72 @@
+/**
+ * 弹出位置管理器
+ * @module managers/position-manager
+ */
+import type { PopupPlacement, PopupPositionConfig, PopupPositionResult } from '../types';
+/**
+ * 位置管理器类
+ * 计算键盘弹出层的位置，支持 PC 和移动端自适应
+ */
+export declare class PositionManager {
+    private config;
+    constructor(config?: PopupPositionConfig);
+    /**
+     * 更新配置
+     */
+    updateConfig(config: Partial<PopupPositionConfig>): void;
+    /**
+     * 获取配置
+     */
+    getConfig(): Readonly<Required<PopupPositionConfig>>;
+    /**
+     * 计算弹出位置
+     * @param targetElement - 目标元素（如 input）
+     * @param popupSize - 弹出层尺寸
+     * @returns 位置计算结果
+     */
+    calculate(targetElement: HTMLElement | null, popupSize: {
+        width: number;
+        height: number;
+    }): PopupPositionResult;
+    /**
+     * 计算 bottom-sheet 位置（移动端从底部滑出）
+     */
+    private calculateBottomSheet;
+    /**
+     * 计算居中位置
+     */
+    private calculateCentered;
+    /**
+     * 计算相对于目标元素的位置
+     */
+    private calculateRelativeToTarget;
+    /**
+     * 获取弹出层初始样式（用于动画）
+     */
+    getInitialStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration>;
+    /**
+     * 获取弹出层最终样式（动画结束）
+     */
+    getFinalStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration>;
+    /**
+     * 获取弹出层退出样式
+     */
+    getExitStyles(placement: PopupPlacement): Partial<CSSStyleDeclaration>;
+    /**
+     * 获取动画时长
+     */
+    getAnimationDuration(): number;
+    /**
+     * 检查是否显示遮罩
+     */
+    shouldShowMask(): boolean;
+    /**
+     * 检查遮罩是否可点击关闭
+     */
+    isMaskClosable(): boolean;
+}
+/**
+ * 创建位置管理器实例
+ */
+export declare function createPositionManager(config?: PopupPositionConfig): PositionManager;
+//# sourceMappingURL=position-manager.d.ts.map

package/lib/package.json

@@ -0,0 +1,3 @@
+{
+  "type": "commonjs"
+}

package/lib/themes/index.cjs

@@ -0,0 +1,117 @@
+/*!
+* ***********************************
+* @composy/keyboard-core v0.0.1   *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:29 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_presets = require("./presets.cjs");
+//#region src/themes/index.ts
+const customThemes = /* @__PURE__ */ new Map();
+let currentTheme = require_presets.defaultTheme;
+function getTheme(name) {
+	return customThemes.get(name) || require_presets.presetThemes[name] || require_presets.defaultTheme;
+}
+function registerTheme(theme) {
+	customThemes.set(theme.name, theme);
+}
+function getAvailableThemes() {
+	return [...Object.keys(require_presets.presetThemes), ...customThemes.keys()];
+}
+function getAllThemes() {
+	return [...Object.values(require_presets.presetThemes), ...customThemes.values()];
+}
+function setCurrentTheme(name) {
+	currentTheme = getTheme(name);
+	return currentTheme;
+}
+function getCurrentTheme() {
+	return currentTheme;
+}
+function themeToCSS(theme) {
+	return {
+		"--keyboard-bg": theme.colors.background,
+		"--keyboard-key-bg": theme.colors.keyBackground,
+		"--keyboard-key-color": theme.colors.keyColor,
+		"--keyboard-key-active-bg": theme.colors.keyActiveBackground,
+		"--keyboard-fn-key-bg": theme.colors.fnKeyBackground,
+		"--keyboard-fn-key-color": theme.colors.fnKeyColor,
+		"--keyboard-fn-key-active-bg": theme.colors.fnKeyActiveBackground,
+		"--keyboard-primary-bg": theme.colors.primaryBackground,
+		"--keyboard-primary-active-bg": theme.colors.primaryActiveBackground,
+		"--keyboard-primary-color": theme.colors.primaryColor,
+		"--keyboard-key-height": `${theme.sizes.keyHeight}px`,
+		"--keyboard-key-radius": `${theme.sizes.keyRadius}px`,
+		"--keyboard-key-gap": `${theme.sizes.keyGap}px`,
+		"--keyboard-font-size": `${theme.sizes.fontSize}px`,
+		"--keyboard-fn-font-size": `${theme.sizes.fnFontSize}px`,
+		"--keyboard-padding": `${theme.sizes.padding}px`,
+		"--keyboard-key-shadow": theme.effects.keyShadow,
+		"--keyboard-transition-duration": `${theme.effects.transitionDuration}ms`,
+		"--keyboard-border-color": theme.colors.borderColor,
+		"--keyboard-divider-color": theme.colors.dividerColor
+	};
+}
+function applyTheme(element, theme) {
+	const cssVars = themeToCSS(theme);
+	Object.entries(cssVars).forEach(([key, value]) => {
+		if (value) element.style.setProperty(key, value);
+	});
+	element.classList.remove("keyboard-theme-light", "keyboard-theme-dark");
+	element.classList.add(theme.isDark ? "keyboard-theme-dark" : "keyboard-theme-light");
+	element.dataset.theme = theme.name;
+}
+function generateThemeStyle(theme) {
+	const cssVars = themeToCSS(theme);
+	return Object.entries(cssVars).filter(([, value]) => value).map(([key, value]) => `${key}: ${value}`).join("; ");
+}
+function mergeTheme(base, overrides) {
+	return {
+		...base,
+		...overrides,
+		colors: {
+			...base.colors,
+			...overrides.colors
+		},
+		sizes: {
+			...base.sizes,
+			...overrides.sizes
+		},
+		effects: {
+			...base.effects,
+			...overrides.effects
+		}
+	};
+}
+function createTheme(name, baseTheme, customization) {
+	const theme = mergeTheme(getTheme(baseTheme), {
+		...customization,
+		name
+	});
+	registerTheme(theme);
+	return theme;
+}
+//#endregion
+exports.applyTheme = applyTheme;
+exports.createTheme = createTheme;
+exports.darkTheme = require_presets.darkTheme;
+exports.defaultTheme = require_presets.defaultTheme;
+exports.generateThemeStyle = generateThemeStyle;
+exports.getAllThemes = getAllThemes;
+exports.getAvailableThemes = getAvailableThemes;
+exports.getCurrentTheme = getCurrentTheme;
+exports.getTheme = getTheme;
+exports.iosTheme = require_presets.iosTheme;
+exports.materialTheme = require_presets.materialTheme;
+exports.mergeTheme = mergeTheme;
+exports.minimalTheme = require_presets.minimalTheme;
+exports.miuiTheme = require_presets.miuiTheme;
+exports.presetThemes = require_presets.presetThemes;
+exports.registerTheme = registerTheme;
+exports.setCurrentTheme = setCurrentTheme;
+exports.themeToCSS = themeToCSS;
+/*! End of @composy/keyboard-core | Powered by @composy/builder */
+//# sourceMappingURL=index.cjs.map

package/lib/themes/index.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.cjs","names":[],"sources":["../../src/themes/index.ts"],"sourcesContent":["/**\n * 主题管理模块\n * @module themes\n */\n\nimport type { ThemeConfig, ThemeCSSVariables, ThemeName } from './types'\nimport { defaultTheme, presetThemes } from './presets'\n\nexport * from './types'\nexport * from './presets'\n\n/**\n * 自定义主题存储\n */\nconst customThemes: Map<string, ThemeConfig> = new Map()\n\n/**\n * 当前激活的主题\n */\nlet currentTheme: ThemeConfig = defaultTheme\n\n/**\n * 获取主题配置\n * @param name - 主题名称\n * @returns 主题配置，如果不存在则返回默认主题\n */\nexport function getTheme(name: ThemeName | string): ThemeConfig {\n  return customThemes.get(name) || presetThemes[name] || defaultTheme\n}\n\n/**\n * 注册自定义主题\n * @param theme - 主题配置\n */\nexport function registerTheme(theme: ThemeConfig): void {\n  customThemes.set(theme.name, theme)\n}\n\n/**\n * 获取所有可用主题\n * @returns 主题名称列表\n */\nexport function getAvailableThemes(): string[] {\n  return [...Object.keys(presetThemes), ...customThemes.keys()]\n}\n\n/**\n * 获取所有主题配置\n * @returns 主题配置列表\n */\nexport function getAllThemes(): ThemeConfig[] {\n  return [\n    ...Object.values(presetThemes),\n    ...customThemes.values(),\n  ]\n}\n\n/**\n * 设置当前主题\n * @param name - 主题名称\n */\nexport function setCurrentTheme(name: ThemeName | string): ThemeConfig {\n  currentTheme = getTheme(name)\n  return currentTheme\n}\n\n/**\n * 获取当前主题\n */\nexport function getCurrentTheme(): ThemeConfig {\n  return currentTheme\n}\n\n/**\n * 将主题配置转换为 CSS 变量\n * @param theme - 主题配置\n * @returns CSS 变量对象\n */\nexport function themeToCSS(theme: ThemeConfig): ThemeCSSVariables {\n  return {\n    '--keyboard-bg': theme.colors.background,\n    '--keyboard-key-bg': theme.colors.keyBackground,\n    '--keyboard-key-color': theme.colors.keyColor,\n    '--keyboard-key-active-bg': theme.colors.keyActiveBackground,\n    '--keyboard-fn-key-bg': theme.colors.fnKeyBackground,\n    '--keyboard-fn-key-color': theme.colors.fnKeyColor,\n    '--keyboard-fn-key-active-bg': theme.colors.fnKeyActiveBackground,\n    '--keyboard-primary-bg': theme.colors.primaryBackground,\n    '--keyboard-primary-active-bg': theme.colors.primaryActiveBackground,\n    '--keyboard-primary-color': theme.colors.primaryColor,\n    '--keyboard-key-height': `${theme.sizes.keyHeight}px`,\n    '--keyboard-key-radius': `${theme.sizes.keyRadius}px`,\n    '--keyboard-key-gap': `${theme.sizes.keyGap}px`,\n    '--keyboard-font-size': `${theme.sizes.fontSize}px`,\n    '--keyboard-fn-font-size': `${theme.sizes.fnFontSize}px`,\n    '--keyboard-padding': `${theme.sizes.padding}px`,\n    '--keyboard-key-shadow': theme.effects.keyShadow,\n    '--keyboard-transition-duration': `${theme.effects.transitionDuration}ms`,\n    '--keyboard-border-color': theme.colors.borderColor,\n    '--keyboard-divider-color': theme.colors.dividerColor,\n  }\n}\n\n/**\n * 将 CSS 变量应用到元素\n * @param element - 目标元素\n * @param theme - 主题配置\n */\nexport function applyTheme(element: HTMLElement, theme: ThemeConfig): void {\n  const cssVars = themeToCSS(theme)\n  Object.entries(cssVars).forEach(([key, value]) => {\n    if (value) {\n      element.style.setProperty(key, value)\n    }\n  })\n\n  // 添加主题类名\n  element.classList.remove('keyboard-theme-light', 'keyboard-theme-dark')\n  element.classList.add(theme.isDark ? 'keyboard-theme-dark' : 'keyboard-theme-light')\n  element.dataset.theme = theme.name\n}\n\n/**\n * 生成主题的内联样式字符串\n * @param theme - 主题配置\n * @returns 内联样式字符串\n */\nexport function generateThemeStyle(theme: ThemeConfig): string {\n  const cssVars = themeToCSS(theme)\n  return Object.entries(cssVars)\n    .filter(([, value]) => value)\n    .map(([key, value]) => `${key}: ${value}`)\n    .join('; ')\n}\n\n/**\n * 合并主题配置\n * @param base - 基础主题\n * @param overrides - 覆盖配置\n * @returns 合并后的主题\n */\nexport function mergeTheme(\n  base: ThemeConfig,\n  overrides: Partial<ThemeConfig>,\n): ThemeConfig {\n  return {\n    ...base,\n    ...overrides,\n    colors: { ...base.colors, ...overrides.colors },\n    sizes: { ...base.sizes, ...overrides.sizes },\n    effects: { ...base.effects, ...overrides.effects },\n  }\n}\n\n/**\n * 创建自定义主题\n * @param name - 主题名称\n * @param baseTheme - 基础主题名称\n * @param customization - 自定义配置\n */\nexport function createTheme(\n  name: string,\n  baseTheme: ThemeName | string,\n  customization: Partial<Omit<ThemeConfig, 'name'>>,\n): ThemeConfig {\n  const base = getTheme(baseTheme)\n  const theme = mergeTheme(base, {\n    ...customization,\n    name,\n  })\n  registerTheme(theme)\n  return theme\n}\n"],"mappings":";;;;;;;;;;;;AAcA,MAAM,+BAAyC,IAAI,IAAI;AAKvD,IAAI,eAA4B,gBAAA;AAOzB,SAAS,SAAS,MAAuC;CAC9D,OAAO,aAAa,IAAI,IAAI,KAAK,gBAAA,aAAa,SAAS,gBAAA;AACzD;AAMO,SAAS,cAAc,OAA0B;CACtD,aAAa,IAAI,MAAM,MAAM,KAAK;AACpC;AAMO,SAAS,qBAA+B;CAC7C,OAAO,CAAC,GAAG,OAAO,KAAK,gBAAA,YAAY,GAAG,GAAG,aAAa,KAAK,CAAC;AAC9D;AAMO,SAAS,eAA8B;CAC5C,OAAO,CACL,GAAG,OAAO,OAAO,gBAAA,YAAY,GAC7B,GAAG,aAAa,OAAO,CACzB;AACF;AAMO,SAAS,gBAAgB,MAAuC;CACrE,eAAe,SAAS,IAAI;CAC5B,OAAO;AACT;AAKO,SAAS,kBAA+B;CAC7C,OAAO;AACT;AAOO,SAAS,WAAW,OAAuC;CAChE,OAAO;EACL,iBAAiB,MAAM,OAAO;EAC9B,qBAAqB,MAAM,OAAO;EAClC,wBAAwB,MAAM,OAAO;EACrC,4BAA4B,MAAM,OAAO;EACzC,wBAAwB,MAAM,OAAO;EACrC,2BAA2B,MAAM,OAAO;EACxC,+BAA+B,MAAM,OAAO;EAC5C,yBAAyB,MAAM,OAAO;EACtC,gCAAgC,MAAM,OAAO;EAC7C,4BAA4B,MAAM,OAAO;EACzC,yBAAyB,GAAG,MAAM,MAAM,UAAS;EACjD,yBAAyB,GAAG,MAAM,MAAM,UAAS;EACjD,sBAAsB,GAAG,MAAM,MAAM,OAAM;EAC3C,wBAAwB,GAAG,MAAM,MAAM,SAAQ;EAC/C,2BAA2B,GAAG,MAAM,MAAM,WAAU;EACpD,sBAAsB,GAAG,MAAM,MAAM,QAAO;EAC5C,yBAAyB,MAAM,QAAQ;EACvC,kCAAkC,GAAG,MAAM,QAAQ,mBAAkB;EACrE,2BAA2B,MAAM,OAAO;EACxC,4BAA4B,MAAM,OAAO;CAC3C;AACF;AAOO,SAAS,WAAW,SAAsB,OAA0B;CACzE,MAAM,UAAU,WAAW,KAAK;CAChC,OAAO,QAAQ,OAAO,CAAA,CAAE,SAAS,CAAC,KAAK,WAAW;EAChD,IAAI,OACF,QAAQ,MAAM,YAAY,KAAK,KAAK;CAExC,CAAC;CAGD,QAAQ,UAAU,OAAO,wBAAwB,qBAAqB;CACtE,QAAQ,UAAU,IAAI,MAAM,SAAS,wBAAwB,sBAAsB;CACnF,QAAQ,QAAQ,QAAQ,MAAM;AAChC;AAOO,SAAS,mBAAmB,OAA4B;CAC7D,MAAM,UAAU,WAAW,KAAK;CAChC,OAAO,OAAO,QAAQ,OAAO,CAAA,CAC1B,QAAQ,GAAG,WAAW,KAAK,CAAA,CAC3B,KAAK,CAAC,KAAK,WAAW,GAAG,IAAG,IAAK,OAAO,CAAA,CACxC,KAAK,IAAI;AACd;AAQO,SAAS,WACd,MACA,WACa;CACb,OAAO;EACL,GAAG;EACH,GAAG;EACH,QAAQ;GAAE,GAAG,KAAK;GAAQ,GAAG,UAAU;EAAO;EAC9C,OAAO;GAAE,GAAG,KAAK;GAAO,GAAG,UAAU;EAAM;EAC3C,SAAS;GAAE,GAAG,KAAK;GAAS,GAAG,UAAU;EAAQ;CACnD;AACF;AAQO,SAAS,YACd,MACA,WACA,eACa;CAEb,MAAM,QAAQ,WADD,SAAS,SACG,GAAM;EAC7B,GAAG;EACH;CACF,CAAC;CACD,cAAc,KAAK;CACnB,OAAO;AACT"}

package/lib/themes/index.d.ts

@@ -0,0 +1,70 @@
+/**
+ * 主题管理模块
+ * @module themes
+ */
+import type { ThemeConfig, ThemeCSSVariables, ThemeName } from './types';
+export * from './types';
+export * from './presets';
+/**
+ * 获取主题配置
+ * @param name - 主题名称
+ * @returns 主题配置，如果不存在则返回默认主题
+ */
+export declare function getTheme(name: ThemeName | string): ThemeConfig;
+/**
+ * 注册自定义主题
+ * @param theme - 主题配置
+ */
+export declare function registerTheme(theme: ThemeConfig): void;
+/**
+ * 获取所有可用主题
+ * @returns 主题名称列表
+ */
+export declare function getAvailableThemes(): string[];
+/**
+ * 获取所有主题配置
+ * @returns 主题配置列表
+ */
+export declare function getAllThemes(): ThemeConfig[];
+/**
+ * 设置当前主题
+ * @param name - 主题名称
+ */
+export declare function setCurrentTheme(name: ThemeName | string): ThemeConfig;
+/**
+ * 获取当前主题
+ */
+export declare function getCurrentTheme(): ThemeConfig;
+/**
+ * 将主题配置转换为 CSS 变量
+ * @param theme - 主题配置
+ * @returns CSS 变量对象
+ */
+export declare function themeToCSS(theme: ThemeConfig): ThemeCSSVariables;
+/**
+ * 将 CSS 变量应用到元素
+ * @param element - 目标元素
+ * @param theme - 主题配置
+ */
+export declare function applyTheme(element: HTMLElement, theme: ThemeConfig): void;
+/**
+ * 生成主题的内联样式字符串
+ * @param theme - 主题配置
+ * @returns 内联样式字符串
+ */
+export declare function generateThemeStyle(theme: ThemeConfig): string;
+/**
+ * 合并主题配置
+ * @param base - 基础主题
+ * @param overrides - 覆盖配置
+ * @returns 合并后的主题
+ */
+export declare function mergeTheme(base: ThemeConfig, overrides: Partial<ThemeConfig>): ThemeConfig;
+/**
+ * 创建自定义主题
+ * @param name - 主题名称
+ * @param baseTheme - 基础主题名称
+ * @param customization - 自定义配置
+ */
+export declare function createTheme(name: string, baseTheme: ThemeName | string, customization: Partial<Omit<ThemeConfig, 'name'>>): ThemeConfig;
+//# sourceMappingURL=index.d.ts.map

package/lib/themes/presets.cjs

@@ -0,0 +1,214 @@
+/*!
+* ***********************************
+* @composy/keyboard-core v0.0.1   *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:29 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+//#region src/themes/presets.ts
+const miuiTheme = {
+	name: "miui",
+	displayName: "MIUI",
+	description: "小米风格 - 纯净简洁",
+	isDark: false,
+	colors: {
+		background: "#f5f5f5",
+		keyBackground: "#ffffff",
+		keyColor: "#1a1a1a",
+		keyActiveBackground: "#e8e8e8",
+		fnKeyBackground: "#e0e0e0",
+		fnKeyColor: "#666666",
+		fnKeyActiveBackground: "#d0d0d0",
+		primaryBackground: "#ff6700",
+		primaryActiveBackground: "#e55d00",
+		primaryColor: "#ffffff",
+		borderColor: "transparent",
+		dividerColor: "#eeeeee"
+	},
+	sizes: {
+		keyHeight: 46,
+		keyRadius: 8,
+		keyGap: 6,
+		fontSize: 18,
+		fnFontSize: 14,
+		padding: 8
+	},
+	effects: {
+		keyShadow: "none",
+		keyActiveShadow: "none",
+		keyActiveScale: .96,
+		transitionDuration: 100,
+		enableBlur: false,
+		blurAmount: 0,
+		enableRipple: false
+	}
+};
+const iosTheme = {
+	name: "ios",
+	displayName: "iOS",
+	description: "Apple 风格 - 精致优雅",
+	isDark: false,
+	colors: {
+		background: "#d1d3d9",
+		keyBackground: "#ffffff",
+		keyColor: "#000000",
+		keyActiveBackground: "#b8bac2",
+		fnKeyBackground: "#a8aab4",
+		fnKeyColor: "#000000",
+		fnKeyActiveBackground: "#9699a3",
+		primaryBackground: "#007aff",
+		primaryActiveBackground: "#0062cc",
+		primaryColor: "#ffffff",
+		borderColor: "transparent",
+		dividerColor: "#c8cad0"
+	},
+	sizes: {
+		keyHeight: 43,
+		keyRadius: 5,
+		keyGap: 6,
+		fontSize: 22,
+		fnFontSize: 15,
+		padding: 4
+	},
+	effects: {
+		keyShadow: "0 1px 0 rgba(0,0,0,0.35)",
+		keyActiveShadow: "0 0 0 rgba(0,0,0,0)",
+		keyActiveScale: 1,
+		transitionDuration: 80,
+		enableBlur: true,
+		blurAmount: 20,
+		enableRipple: false
+	}
+};
+const materialTheme = {
+	name: "material",
+	displayName: "Material",
+	description: "Google 风格 - 深邃现代",
+	isDark: true,
+	colors: {
+		background: "#263238",
+		keyBackground: "#37474f",
+		keyColor: "#ffffff",
+		keyActiveBackground: "#455a64",
+		fnKeyBackground: "#455a64",
+		fnKeyColor: "#b0bec5",
+		fnKeyActiveBackground: "#546e7a",
+		primaryBackground: "#4caf50",
+		primaryActiveBackground: "#43a047",
+		primaryColor: "#ffffff",
+		borderColor: "transparent",
+		dividerColor: "#37474f"
+	},
+	sizes: {
+		keyHeight: 48,
+		keyRadius: 4,
+		keyGap: 4,
+		fontSize: 20,
+		fnFontSize: 14,
+		padding: 6
+	},
+	effects: {
+		keyShadow: "0 1px 3px rgba(0,0,0,0.2)",
+		keyActiveShadow: "0 2px 6px rgba(0,0,0,0.3)",
+		keyActiveScale: 1,
+		transitionDuration: 150,
+		enableBlur: false,
+		blurAmount: 0,
+		enableRipple: true
+	}
+};
+const minimalTheme = {
+	name: "minimal",
+	displayName: "Minimal",
+	description: "极简风格 - 轻盈透明",
+	isDark: false,
+	colors: {
+		background: "rgba(250, 250, 250, 0.95)",
+		keyBackground: "transparent",
+		keyColor: "#333333",
+		keyActiveBackground: "rgba(0, 0, 0, 0.08)",
+		fnKeyBackground: "transparent",
+		fnKeyColor: "#888888",
+		fnKeyActiveBackground: "rgba(0, 0, 0, 0.08)",
+		primaryBackground: "#333333",
+		primaryActiveBackground: "#000000",
+		primaryColor: "#ffffff",
+		borderColor: "#eeeeee",
+		dividerColor: "#eeeeee"
+	},
+	sizes: {
+		keyHeight: 44,
+		keyRadius: 12,
+		keyGap: 8,
+		fontSize: 17,
+		fnFontSize: 13,
+		padding: 12
+	},
+	effects: {
+		keyShadow: "none",
+		keyActiveShadow: "none",
+		keyActiveScale: .92,
+		transitionDuration: 120,
+		enableBlur: true,
+		blurAmount: 30,
+		enableRipple: false
+	}
+};
+const darkTheme = {
+	name: "dark",
+	displayName: "Dark",
+	description: "深色模式 - 护眼舒适",
+	isDark: true,
+	colors: {
+		background: "#1c1c1e",
+		keyBackground: "#3a3a3c",
+		keyColor: "#ffffff",
+		keyActiveBackground: "#4a4a4c",
+		fnKeyBackground: "#2c2c2e",
+		fnKeyColor: "#ebebf5",
+		fnKeyActiveBackground: "#3c3c3e",
+		primaryBackground: "#0a84ff",
+		primaryActiveBackground: "#0070e0",
+		primaryColor: "#ffffff",
+		borderColor: "#3a3a3c",
+		dividerColor: "#3a3a3c"
+	},
+	sizes: {
+		keyHeight: 45,
+		keyRadius: 8,
+		keyGap: 6,
+		fontSize: 18,
+		fnFontSize: 14,
+		padding: 8
+	},
+	effects: {
+		keyShadow: "0 1px 2px rgba(0,0,0,0.4)",
+		keyActiveShadow: "0 0 8px rgba(10,132,255,0.3)",
+		keyActiveScale: .97,
+		transitionDuration: 100,
+		enableBlur: true,
+		blurAmount: 20,
+		enableRipple: false
+	}
+};
+const presetThemes = {
+	miui: miuiTheme,
+	ios: iosTheme,
+	material: materialTheme,
+	minimal: minimalTheme,
+	dark: darkTheme
+};
+const defaultTheme = miuiTheme;
+//#endregion
+exports.darkTheme = darkTheme;
+exports.defaultTheme = defaultTheme;
+exports.iosTheme = iosTheme;
+exports.materialTheme = materialTheme;
+exports.minimalTheme = minimalTheme;
+exports.miuiTheme = miuiTheme;
+exports.presetThemes = presetThemes;
+/*! End of @composy/keyboard-core | Powered by @composy/builder */
+//# sourceMappingURL=presets.cjs.map

package/lib/themes/presets.cjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"presets.cjs","names":[],"sources":["../../src/themes/presets.ts"],"sourcesContent":["/**\n * 预设主题配置\n * @module themes/presets\n */\n\nimport type { ThemeConfig } from './types'\n\n/**\n * MIUI 小米风格主题（默认）\n * 特点：纯净、扁平、简洁、无多余装饰\n */\nexport const miuiTheme: ThemeConfig = {\n  name: 'miui',\n  displayName: 'MIUI',\n  description: '小米风格 - 纯净简洁',\n  isDark: false,\n  colors: {\n    background: '#f5f5f5',\n    keyBackground: '#ffffff',\n    keyColor: '#1a1a1a',\n    keyActiveBackground: '#e8e8e8',\n    fnKeyBackground: '#e0e0e0',\n    fnKeyColor: '#666666',\n    fnKeyActiveBackground: '#d0d0d0',\n    primaryBackground: '#ff6700', // 小米橙\n    primaryActiveBackground: '#e55d00',\n    primaryColor: '#ffffff',\n    borderColor: 'transparent',\n    dividerColor: '#eeeeee',\n  },\n  sizes: {\n    keyHeight: 46,\n    keyRadius: 8,\n    keyGap: 6,\n    fontSize: 18,\n    fnFontSize: 14,\n    padding: 8,\n  },\n  effects: {\n    keyShadow: 'none',\n    keyActiveShadow: 'none',\n    keyActiveScale: 0.96,\n    transitionDuration: 100,\n    enableBlur: false,\n    blurAmount: 0,\n    enableRipple: false,\n  },\n}\n\n/**\n * iOS 风格主题\n * 特点：毛玻璃、圆润阴影、精致\n */\nexport const iosTheme: ThemeConfig = {\n  name: 'ios',\n  displayName: 'iOS',\n  description: 'Apple 风格 - 精致优雅',\n  isDark: false,\n  colors: {\n    background: '#d1d3d9',\n    keyBackground: '#ffffff',\n    keyColor: '#000000',\n    keyActiveBackground: '#b8bac2',\n    fnKeyBackground: '#a8aab4',\n    fnKeyColor: '#000000',\n    fnKeyActiveBackground: '#9699a3',\n    primaryBackground: '#007aff',\n    primaryActiveBackground: '#0062cc',\n    primaryColor: '#ffffff',\n    borderColor: 'transparent',\n    dividerColor: '#c8cad0',\n  },\n  sizes: {\n    keyHeight: 43,\n    keyRadius: 5,\n    keyGap: 6,\n    fontSize: 22,\n    fnFontSize: 15,\n    padding: 4,\n  },\n  effects: {\n    keyShadow: '0 1px 0 rgba(0,0,0,0.35)',\n    keyActiveShadow: '0 0 0 rgba(0,0,0,0)',\n    keyActiveScale: 1,\n    transitionDuration: 80,\n    enableBlur: true,\n    blurAmount: 20,\n    enableRipple: false,\n  },\n}\n\n/**\n * Material Design 主题\n * 特点：深色、涟漪动效、层次感\n */\nexport const materialTheme: ThemeConfig = {\n  name: 'material',\n  displayName: 'Material',\n  description: 'Google 风格 - 深邃现代',\n  isDark: true,\n  colors: {\n    background: '#263238',\n    keyBackground: '#37474f',\n    keyColor: '#ffffff',\n    keyActiveBackground: '#455a64',\n    fnKeyBackground: '#455a64',\n    fnKeyColor: '#b0bec5',\n    fnKeyActiveBackground: '#546e7a',\n    primaryBackground: '#4caf50', // Material Green\n    primaryActiveBackground: '#43a047',\n    primaryColor: '#ffffff',\n    borderColor: 'transparent',\n    dividerColor: '#37474f',\n  },\n  sizes: {\n    keyHeight: 48,\n    keyRadius: 4,\n    keyGap: 4,\n    fontSize: 20,\n    fnFontSize: 14,\n    padding: 6,\n  },\n  effects: {\n    keyShadow: '0 1px 3px rgba(0,0,0,0.2)',\n    keyActiveShadow: '0 2px 6px rgba(0,0,0,0.3)',\n    keyActiveScale: 1,\n    transitionDuration: 150,\n    enableBlur: false,\n    blurAmount: 0,\n    enableRipple: true,\n  },\n}\n\n/**\n * 极简主题\n * 特点：无边框、超简洁、透明感\n */\nexport const minimalTheme: ThemeConfig = {\n  name: 'minimal',\n  displayName: 'Minimal',\n  description: '极简风格 - 轻盈透明',\n  isDark: false,\n  colors: {\n    background: 'rgba(250, 250, 250, 0.95)',\n    keyBackground: 'transparent',\n    keyColor: '#333333',\n    keyActiveBackground: 'rgba(0, 0, 0, 0.08)',\n    fnKeyBackground: 'transparent',\n    fnKeyColor: '#888888',\n    fnKeyActiveBackground: 'rgba(0, 0, 0, 0.08)',\n    primaryBackground: '#333333',\n    primaryActiveBackground: '#000000',\n    primaryColor: '#ffffff',\n    borderColor: '#eeeeee',\n    dividerColor: '#eeeeee',\n  },\n  sizes: {\n    keyHeight: 44,\n    keyRadius: 12,\n    keyGap: 8,\n    fontSize: 17,\n    fnFontSize: 13,\n    padding: 12,\n  },\n  effects: {\n    keyShadow: 'none',\n    keyActiveShadow: 'none',\n    keyActiveScale: 0.92,\n    transitionDuration: 120,\n    enableBlur: true,\n    blurAmount: 30,\n    enableRipple: false,\n  },\n}\n\n/**\n * 深色主题\n * 特点：护眼、现代、高对比\n */\nexport const darkTheme: ThemeConfig = {\n  name: 'dark',\n  displayName: 'Dark',\n  description: '深色模式 - 护眼舒适',\n  isDark: true,\n  colors: {\n    background: '#1c1c1e',\n    keyBackground: '#3a3a3c',\n    keyColor: '#ffffff',\n    keyActiveBackground: '#4a4a4c',\n    fnKeyBackground: '#2c2c2e',\n    fnKeyColor: '#ebebf5',\n    fnKeyActiveBackground: '#3c3c3e',\n    primaryBackground: '#0a84ff',\n    primaryActiveBackground: '#0070e0',\n    primaryColor: '#ffffff',\n    borderColor: '#3a3a3c',\n    dividerColor: '#3a3a3c',\n  },\n  sizes: {\n    keyHeight: 45,\n    keyRadius: 8,\n    keyGap: 6,\n    fontSize: 18,\n    fnFontSize: 14,\n    padding: 8,\n  },\n  effects: {\n    keyShadow: '0 1px 2px rgba(0,0,0,0.4)',\n    keyActiveShadow: '0 0 8px rgba(10,132,255,0.3)',\n    keyActiveScale: 0.97,\n    transitionDuration: 100,\n    enableBlur: true,\n    blurAmount: 20,\n    enableRipple: false,\n  },\n}\n\n/**\n * 所有预设主题\n */\nexport const presetThemes: Record<string, ThemeConfig> = {\n  miui: miuiTheme,\n  ios: iosTheme,\n  material: materialTheme,\n  minimal: minimalTheme,\n  dark: darkTheme,\n}\n\n/**\n * 默认主题\n */\nexport const defaultTheme = miuiTheme\n"],"mappings":"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"}

package/lib/themes/presets.d.ts

@@ -0,0 +1,39 @@
+/**
+ * 预设主题配置
+ * @module themes/presets
+ */
+import type { ThemeConfig } from './types';
+/**
+ * MIUI 小米风格主题（默认）
+ * 特点：纯净、扁平、简洁、无多余装饰
+ */
+export declare const miuiTheme: ThemeConfig;
+/**
+ * iOS 风格主题
+ * 特点：毛玻璃、圆润阴影、精致
+ */
+export declare const iosTheme: ThemeConfig;
+/**
+ * Material Design 主题
+ * 特点：深色、涟漪动效、层次感
+ */
+export declare const materialTheme: ThemeConfig;
+/**
+ * 极简主题
+ * 特点：无边框、超简洁、透明感
+ */
+export declare const minimalTheme: ThemeConfig;
+/**
+ * 深色主题
+ * 特点：护眼、现代、高对比
+ */
+export declare const darkTheme: ThemeConfig;
+/**
+ * 所有预设主题
+ */
+export declare const presetThemes: Record<string, ThemeConfig>;
+/**
+ * 默认主题
+ */
+export declare const defaultTheme: ThemeConfig;
+//# sourceMappingURL=presets.d.ts.map

package/lib/themes/types.cjs

@@ -0,0 +1,11 @@
+/*!
+* ***********************************
+* @composy/keyboard-core v0.0.1   *
+* Built with rollup               *
+* Build time: 2024-08-17 11:33:29 *
+* Build mode: production          *
+* Minified: No                    *
+* ***********************************
+*/
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/*! End of @composy/keyboard-core | Powered by @composy/builder */

package/lib/themes/types.d.ts

@@ -0,0 +1,118 @@
+/**
+ * 主题系统类型定义
+ * @module themes/types
+ */
+/**
+ * 预设主题名称
+ */
+export type ThemeName = 'miui' | 'ios' | 'material' | 'minimal' | 'dark' | 'custom';
+/**
+ * 主题色彩配置
+ */
+export interface ThemeColors {
+    /** 键盘背景色 */
+    background: string;
+    /** 按键背景色 */
+    keyBackground: string;
+    /** 按键文字颜色 */
+    keyColor: string;
+    /** 按键按下背景色 */
+    keyActiveBackground: string;
+    /** 功能键背景色 */
+    fnKeyBackground: string;
+    /** 功能键文字颜色 */
+    fnKeyColor: string;
+    /** 功能键按下背景色 */
+    fnKeyActiveBackground: string;
+    /** 主色调（确认/完成键） */
+    primaryBackground: string;
+    /** 主色调按下 */
+    primaryActiveBackground: string;
+    /** 主色调文字 */
+    primaryColor: string;
+    /** 边框颜色（可选） */
+    borderColor?: string;
+    /** 分割线颜色 */
+    dividerColor?: string;
+}
+/**
+ * 主题尺寸配置
+ */
+export interface ThemeSizes {
+    /** 按键高度 */
+    keyHeight: number;
+    /** 按键圆角 */
+    keyRadius: number;
+    /** 按键间距 */
+    keyGap: number;
+    /** 字体大小 */
+    fontSize: number;
+    /** 功能键字体大小 */
+    fnFontSize: number;
+    /** 键盘内边距 */
+    padding: number;
+}
+/**
+ * 主题效果配置
+ */
+export interface ThemeEffects {
+    /** 按键阴影 */
+    keyShadow: string;
+    /** 按键按下阴影 */
+    keyActiveShadow: string;
+    /** 按键按下缩放 */
+    keyActiveScale: number;
+    /** 动画时长 (ms) */
+    transitionDuration: number;
+    /** 是否启用毛玻璃效果 */
+    enableBlur: boolean;
+    /** 毛玻璃模糊度 */
+    blurAmount: number;
+    /** 是否启用涟漪效果 */
+    enableRipple: boolean;
+}
+/**
+ * 完整主题配置
+ */
+export interface ThemeConfig {
+    /** 主题名称 */
+    name: ThemeName | string;
+    /** 显示名称 */
+    displayName: string;
+    /** 主题描述 */
+    description?: string;
+    /** 色彩配置 */
+    colors: ThemeColors;
+    /** 尺寸配置 */
+    sizes: ThemeSizes;
+    /** 效果配置 */
+    effects: ThemeEffects;
+    /** 是否为深色主题 */
+    isDark: boolean;
+}
+/**
+ * 主题CSS变量映射
+ */
+export interface ThemeCSSVariables {
+    '--keyboard-bg': string;
+    '--keyboard-key-bg': string;
+    '--keyboard-key-color': string;
+    '--keyboard-key-active-bg': string;
+    '--keyboard-fn-key-bg': string;
+    '--keyboard-fn-key-color': string;
+    '--keyboard-fn-key-active-bg': string;
+    '--keyboard-primary-bg': string;
+    '--keyboard-primary-active-bg': string;
+    '--keyboard-primary-color': string;
+    '--keyboard-key-height': string;
+    '--keyboard-key-radius': string;
+    '--keyboard-key-gap': string;
+    '--keyboard-font-size': string;
+    '--keyboard-fn-font-size': string;
+    '--keyboard-padding': string;
+    '--keyboard-key-shadow': string;
+    '--keyboard-transition-duration': string;
+    '--keyboard-border-color'?: string;
+    '--keyboard-divider-color'?: string;
+}
+//# sourceMappingURL=types.d.ts.map