mm
This commit is contained in:
2
.vscode/settings.json
vendored
Normal file
2
.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,2 @@
|
|||||||
|
{
|
||||||
|
}
|
||||||
@@ -1 +0,0 @@
|
|||||||
registry = https://registry.npmmirror.com/
|
|
||||||
8
apps/manga-grabber/.vscode/settings.json
vendored
8
apps/manga-grabber/.vscode/settings.json
vendored
@@ -1,8 +0,0 @@
|
|||||||
{
|
|
||||||
"json.schemas": [
|
|
||||||
{
|
|
||||||
"fileMatch": ["/tsconfig.build.json", "/tsconfig.base.json"],
|
|
||||||
"schema": {}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,38 +0,0 @@
|
|||||||
{
|
|
||||||
"name": "@defgov/manga-grabber",
|
|
||||||
"version": "0.0.0",
|
|
||||||
"private": true,
|
|
||||||
"type": "module",
|
|
||||||
"sideEffects": [
|
|
||||||
"*.css"
|
|
||||||
],
|
|
||||||
"module": "./dist/index.es.js",
|
|
||||||
"main": "./dist/index.cjs.js",
|
|
||||||
"types": "./dist/index.d.ts",
|
|
||||||
"style": "./dist/index.css",
|
|
||||||
"exports": {
|
|
||||||
".": {
|
|
||||||
"import": "./dist/index.es.js",
|
|
||||||
"require": "./dist/index.cjs.js",
|
|
||||||
"types": "./dist/index.d.ts"
|
|
||||||
},
|
|
||||||
"./index.css": "./dist/index.css"
|
|
||||||
},
|
|
||||||
"files": [
|
|
||||||
"dist"
|
|
||||||
],
|
|
||||||
"scripts": {
|
|
||||||
"dev": "vite",
|
|
||||||
"build": "vite build --tsconfig tsconfig.build.json"
|
|
||||||
},
|
|
||||||
"devDependencies": {
|
|
||||||
"@types/node": "^25.6.0",
|
|
||||||
"@types/react": "^19.2.14",
|
|
||||||
"@types/react-dom": "^19.2.3",
|
|
||||||
"@vitejs/plugin-react": "^6.0.1",
|
|
||||||
"glob": "^13.0.6",
|
|
||||||
"typescript": "^6.0.3",
|
|
||||||
"vite": "^8.0.9",
|
|
||||||
"vite-plugin-dts": "^4.5.4"
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,137 +0,0 @@
|
|||||||
// plugins/vite-plugin-gen-index-css.ts
|
|
||||||
import type { Plugin } from "vite";
|
|
||||||
import fs from "fs";
|
|
||||||
import path from "path";
|
|
||||||
import { globSync } from "glob";
|
|
||||||
|
|
||||||
interface Config {
|
|
||||||
targetDirs: string[];
|
|
||||||
includeExtensions: string[];
|
|
||||||
importSyntax: "@import";
|
|
||||||
importSyntaxTail?: string;
|
|
||||||
excludeFilePattern: RegExp[];
|
|
||||||
excludeDirs: string[];
|
|
||||||
warnDuplicateTailwindImport: boolean;
|
|
||||||
indexFileName: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CONFIG: Config = {
|
|
||||||
targetDirs: ["src"],
|
|
||||||
includeExtensions: [".css"],
|
|
||||||
importSyntax: "@import",
|
|
||||||
excludeFilePattern: [/index\.css/, /index\.scss/, /\.(test|spec)\./],
|
|
||||||
excludeDirs: [
|
|
||||||
"__tests__",
|
|
||||||
"tests",
|
|
||||||
"story",
|
|
||||||
"stories",
|
|
||||||
"types",
|
|
||||||
"node_modules",
|
|
||||||
"dist",
|
|
||||||
"build",
|
|
||||||
],
|
|
||||||
warnDuplicateTailwindImport: true,
|
|
||||||
indexFileName: "index.css",
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
|
||||||
|
|
||||||
function isValidFile(filePath: string, config: Config): boolean {
|
|
||||||
const filenameWithExt = filePath.split(/[\\/]/).pop()!;
|
|
||||||
const shouldExcludeFile = config.excludeFilePattern.some((p) =>
|
|
||||||
p.test(filenameWithExt),
|
|
||||||
);
|
|
||||||
if (shouldExcludeFile) return false;
|
|
||||||
|
|
||||||
const normalized = normalizePath(filePath);
|
|
||||||
const shouldExcludeDir = config.excludeDirs.some((dir) =>
|
|
||||||
normalized.includes(`/${dir}/`),
|
|
||||||
);
|
|
||||||
if (shouldExcludeDir) return false;
|
|
||||||
|
|
||||||
const ext = path.extname(filePath);
|
|
||||||
if (!config.includeExtensions.includes(ext)) return false;
|
|
||||||
|
|
||||||
if (config.warnDuplicateTailwindImport) {
|
|
||||||
try {
|
|
||||||
const content = fs.readFileSync(filePath, "utf-8");
|
|
||||||
if (
|
|
||||||
content.includes('@import "tailwindcss"') ||
|
|
||||||
content.includes("@import 'tailwindcss'")
|
|
||||||
) {
|
|
||||||
console.warn(
|
|
||||||
`[gen-index-css] ${filePath} 含有重复的 @import "tailwindcss"，建议删除`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateIndexFile(config: Config) {
|
|
||||||
const [targetDir] = config.targetDirs;
|
|
||||||
const dirPath = path.resolve(process.cwd(), targetDir);
|
|
||||||
|
|
||||||
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
|
||||||
|
|
||||||
const allFiles = globSync(searchPattern, {
|
|
||||||
nodir: true,
|
|
||||||
absolute: true,
|
|
||||||
windowsPathsNoEscape: true,
|
|
||||||
dot: false,
|
|
||||||
follow: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const validFiles = allFiles.filter((f) => isValidFile(f, config));
|
|
||||||
|
|
||||||
console.log(`✅ 有效 CSS 文件数量: ${validFiles.length}`);
|
|
||||||
validFiles.sort();
|
|
||||||
|
|
||||||
const importStatements = validFiles.map((file) => {
|
|
||||||
const relPath = path.relative(dirPath, file);
|
|
||||||
const importPath = "./" + relPath.replace(/\\/g, "/");
|
|
||||||
return `${config.importSyntax} '${importPath}';`;
|
|
||||||
});
|
|
||||||
|
|
||||||
const indexContent = `
|
|
||||||
@import "tailwindcss";
|
|
||||||
${importStatements.join("\n")}
|
|
||||||
`.trim();
|
|
||||||
|
|
||||||
const indexFilePath = path.resolve(dirPath, config.indexFileName);
|
|
||||||
|
|
||||||
// ✅ 内容比对，防止无限 rebuild
|
|
||||||
if (fs.existsSync(indexFilePath)) {
|
|
||||||
const old = fs.readFileSync(indexFilePath, "utf8");
|
|
||||||
if (old === indexContent) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
|
||||||
console.log(`✅ 成功生成 ${config.indexFileName}: ${indexFilePath}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function genIndexCssPlugin(): Plugin {
|
|
||||||
return {
|
|
||||||
name: "vite-plugin-gen-index-css",
|
|
||||||
apply: "build",
|
|
||||||
|
|
||||||
buildStart() {
|
|
||||||
try {
|
|
||||||
generateIndexFile(CONFIG);
|
|
||||||
} catch (err) {
|
|
||||||
const msg = err instanceof Error ? err.message : String(err);
|
|
||||||
this.error(`[gen-index-css] failed: ${msg}`);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
handleHotUpdate({ file }) {
|
|
||||||
if (normalizePath(file).endsWith(`/src/${CONFIG.indexFileName}`)) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
// plugins/vite-plugin-gen-index-ts.ts
|
|
||||||
import type { Plugin } from "vite";
|
|
||||||
import fs from "fs";
|
|
||||||
import path from "path";
|
|
||||||
import { globSync } from "glob";
|
|
||||||
|
|
||||||
interface Config {
|
|
||||||
targetDirs: string[];
|
|
||||||
includeExtensions: string[];
|
|
||||||
excludeKeywords: {
|
|
||||||
dirs: string[];
|
|
||||||
fileSuffixes: string[];
|
|
||||||
filePatterns: RegExp[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const CONFIG: Config = {
|
|
||||||
targetDirs: ["src"],
|
|
||||||
includeExtensions: [".ts", ".tsx", ".vue"],
|
|
||||||
excludeKeywords: {
|
|
||||||
dirs: ["__tests__", "tests", "story", "stories", "types"],
|
|
||||||
fileSuffixes: [".d.ts"],
|
|
||||||
filePatterns: [
|
|
||||||
/^index\.(ts|tsx|js|jsx)$/,
|
|
||||||
/\.(test|spec)\./,
|
|
||||||
/\.(story|stories)\./,
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
|
||||||
|
|
||||||
const isInExcludeDir = (filePath: string) => {
|
|
||||||
const normalized = normalizePath(filePath);
|
|
||||||
return CONFIG.excludeKeywords.dirs.some((dir) =>
|
|
||||||
normalized.includes(`/${dir}/`),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const isExcludeSuffix = (filePath: string) =>
|
|
||||||
CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
|
|
||||||
filePath.endsWith(suffix),
|
|
||||||
);
|
|
||||||
|
|
||||||
const isMatchExcludePattern = (fileName: string) =>
|
|
||||||
CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
|
|
||||||
|
|
||||||
function isValidFile(filePath: string): boolean {
|
|
||||||
const fileName = filePath.split(/[\\/]/).pop()!;
|
|
||||||
|
|
||||||
if (isInExcludeDir(filePath)) return false;
|
|
||||||
if (isExcludeSuffix(filePath)) return false;
|
|
||||||
if (isMatchExcludePattern(fileName)) return false;
|
|
||||||
|
|
||||||
const ext = path.extname(filePath);
|
|
||||||
return CONFIG.includeExtensions.includes(ext);
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateIndexFile(dirPath: string) {
|
|
||||||
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
|
||||||
|
|
||||||
const allFiles = globSync(searchPattern, {
|
|
||||||
nodir: true,
|
|
||||||
absolute: true,
|
|
||||||
windowsPathsNoEscape: true,
|
|
||||||
dot: false,
|
|
||||||
follow: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const validFiles = allFiles.filter(isValidFile);
|
|
||||||
if (validFiles.length === 0) return;
|
|
||||||
|
|
||||||
validFiles.sort();
|
|
||||||
|
|
||||||
const exportStatements = validFiles.map((file) => {
|
|
||||||
const relPath = path.relative(dirPath, file);
|
|
||||||
const importPath = `./${relPath
|
|
||||||
.replace(/\.[^.]+$/, "")
|
|
||||||
.replace(/\\/g, "/")}`;
|
|
||||||
return `export * from '${importPath}';`;
|
|
||||||
});
|
|
||||||
|
|
||||||
const indexContent = `
|
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
${exportStatements.join("\n")}
|
|
||||||
`.trim();
|
|
||||||
|
|
||||||
const indexFilePath = path.resolve(dirPath, "index.ts");
|
|
||||||
|
|
||||||
// ✅ 内容比对，避免无限 rebuild
|
|
||||||
if (fs.existsSync(indexFilePath)) {
|
|
||||||
const old = fs.readFileSync(indexFilePath, "utf8");
|
|
||||||
if (old === indexContent) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function genIndexTsPlugin(): Plugin {
|
|
||||||
return {
|
|
||||||
name: "vite-plugin-gen-index-ts",
|
|
||||||
apply: "build",
|
|
||||||
|
|
||||||
buildStart() {
|
|
||||||
const [targetDir] = CONFIG.targetDirs;
|
|
||||||
if (!targetDir) {
|
|
||||||
this.error("CONFIG.targetDirs is empty");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const absTargetDir = path.resolve(process.cwd(), targetDir);
|
|
||||||
|
|
||||||
try {
|
|
||||||
generateIndexFile(absTargetDir);
|
|
||||||
} catch (err) {
|
|
||||||
const msg = err instanceof Error ? err.message : String(err);
|
|
||||||
this.error(`[gen-index-ts] failed: ${msg}`);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
handleHotUpdate({ file }) {
|
|
||||||
if (file.replace(/\\/g, "/").endsWith("/src/index.ts")) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,40 +0,0 @@
|
|||||||
{
|
|
||||||
// tsconfig.base.json，用于被 tesconfig.json 和 tesconfig.build.json 继承
|
|
||||||
"compilerOptions": {
|
|
||||||
// 输出模块语法，使用版本号最新的那个，而不是实验性语法 ESNext
|
|
||||||
"module": "es2022",
|
|
||||||
|
|
||||||
// 模块解析策略，模拟 Vite / Rollup / webpack，支持 exports / imports，不强制 Node ESM 的严格规则
|
|
||||||
"moduleResolution": "bundler",
|
|
||||||
|
|
||||||
// 显式声明使用的类型包
|
|
||||||
"types": ["node", "react", "vite/client"],
|
|
||||||
|
|
||||||
// 开启所有严格类型检查，防止 any / 隐式 any 扩散
|
|
||||||
"strict": true,
|
|
||||||
|
|
||||||
// 允许 ESM 导入 CJS
|
|
||||||
"esModuleInterop": true,
|
|
||||||
|
|
||||||
// 跳过 node_modules 类型检查，加快构建，避免第三方类型污染
|
|
||||||
"skipLibCheck": true,
|
|
||||||
|
|
||||||
// 模块检测策略，不会影响 node_modules 中的第三方 CommonJS 依赖，Vite 会在预构建阶段自动将其转换为 ESM。
|
|
||||||
"moduleDetection": "force",
|
|
||||||
|
|
||||||
// 保留源码中的 import / export 语句原样输出，不进行自动转换（如 import → require），通常与 moduleDetection: "force" 搭配使用
|
|
||||||
"verbatimModuleSyntax": true,
|
|
||||||
|
|
||||||
// 是否检查“未使用的局部变量”
|
|
||||||
"noUnusedLocals": true,
|
|
||||||
|
|
||||||
// 是否检查“未使用的函数参数”
|
|
||||||
"noUnusedParameters": true,
|
|
||||||
|
|
||||||
// 是否只允许“可擦除的语法（Erasable Syntax），确保 TypeScript 语法在编译后可完全移除
|
|
||||||
"erasableSyntaxOnly": true,
|
|
||||||
|
|
||||||
// 是否禁止 switch 语句中的 case 贯穿（fallthrough），如果 case 没有 break / return，会报错
|
|
||||||
"noFallthroughCasesInSwitch": true
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,122 +0,0 @@
|
|||||||
{
|
|
||||||
// 此文件仅用于类型检查，不用于类型检查，构建时会指定使用 tsconfig.build.json
|
|
||||||
"extends": "./tsconfig.base.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
// Browser api，需要加 "DOM"，"DOM.Iterable"
|
|
||||||
// Node api，需要加 "ES2025"，始终使用带版本号的最新版本
|
|
||||||
// NextJs api，属于同构，server 端会预处理 DOM，计算url，三个都需要 "ES2025", "DOM", "DOM.Iterable"
|
|
||||||
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 显式声明使用的类型包
|
|
||||||
* - node：Node.js API
|
|
||||||
* - react：JSX / React 类型
|
|
||||||
* - vite/client：import.meta / env
|
|
||||||
*/
|
|
||||||
"types": ["node", "react", "vite/client"],
|
|
||||||
|
|
||||||
/**
|
|
||||||
* React JSX 编译模式
|
|
||||||
* - 使用 React 17+ 新 JSX Transform
|
|
||||||
* - 不需要手动 import React
|
|
||||||
*/
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 编译输出目录
|
|
||||||
* - tsc / tsc -b 都会用到
|
|
||||||
*/
|
|
||||||
"outDir": "./dist",
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 源码根目录
|
|
||||||
* - 确保 dist 结构与 src 一致
|
|
||||||
* - 对 declaration 路径至关重要
|
|
||||||
*/
|
|
||||||
"rootDir": "./src",
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 生成 .d.ts 类型声明文件
|
|
||||||
* - 组件库 / npm 包发布必需
|
|
||||||
* - 对应用项目无害，仅影响类型输出
|
|
||||||
*/
|
|
||||||
"declaration": true,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 只做类型检查，不生成 JS 输出
|
|
||||||
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
|
|
||||||
* - 防止 tsc 与构建工具重复 emit
|
|
||||||
*/
|
|
||||||
"noEmit": true,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 强制单文件可独立编译
|
|
||||||
* - 适配 esbuild / SWC / bundler 编译模型
|
|
||||||
* - 禁止依赖跨文件类型推断（enum / namespace 等）
|
|
||||||
*/
|
|
||||||
"isolatedModules": true,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 允许在 import 中显式使用 .ts / .tsx 后缀
|
|
||||||
* - 兼容 Node ESM / bundler 对文件扩展名的严格要求
|
|
||||||
* - 避免 `import './foo'` 在 TS + ESM 下歧义
|
|
||||||
*/
|
|
||||||
"allowImportingTsExtensions": true
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 参与类型检查和编译的文件
|
|
||||||
* - 只扫描 src
|
|
||||||
* - 其它目录通过 exclude 排除
|
|
||||||
*/
|
|
||||||
"include": ["src", "scripts"],
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 明确排除非源码内容
|
|
||||||
* - 避免污染类型系统
|
|
||||||
* - 防止误入 dist / test / config
|
|
||||||
* - 保证发布包干净
|
|
||||||
*/
|
|
||||||
"exclude": [
|
|
||||||
"node_modules",
|
|
||||||
"dist",
|
|
||||||
|
|
||||||
// ---------- build / cache ----------
|
|
||||||
".turbo/**/*",
|
|
||||||
".cache/**/*",
|
|
||||||
".vite/**/*",
|
|
||||||
|
|
||||||
// ---------- 配置文件 ----------
|
|
||||||
"vite.config.ts",
|
|
||||||
"*.config.ts",
|
|
||||||
"*.config.js",
|
|
||||||
"tsconfig.*.json",
|
|
||||||
|
|
||||||
// ---------- 测试相关 ----------
|
|
||||||
"__tests__/**/*",
|
|
||||||
"test/**/*",
|
|
||||||
"tests/**/*",
|
|
||||||
"**/*.test.ts",
|
|
||||||
"**/*.test.tsx",
|
|
||||||
"**/*.spec.ts",
|
|
||||||
"**/*.spec.tsx",
|
|
||||||
|
|
||||||
// ---------- Storybook ----------
|
|
||||||
".storybook/**/*",
|
|
||||||
"stories/**/*",
|
|
||||||
|
|
||||||
// ---------- 示例 / 脚本 ----------
|
|
||||||
"example/**/*",
|
|
||||||
"examples/**/*",
|
|
||||||
"scripts/**/*",
|
|
||||||
|
|
||||||
// ---------- 环境与静态资源 ----------
|
|
||||||
".env",
|
|
||||||
".env.*",
|
|
||||||
"public/**/*",
|
|
||||||
|
|
||||||
// ---------- 文档 ----------
|
|
||||||
"docs/**/*",
|
|
||||||
"README.md",
|
|
||||||
"LICENSE"
|
|
||||||
]
|
|
||||||
}
|
|
||||||
@@ -1,16 +0,0 @@
|
|||||||
{
|
|
||||||
// 此文件仅用于类型检查，不用于构建，构建时会指定使用 tsconfig.build.json
|
|
||||||
"extends": "./tsconfig.base.json",
|
|
||||||
"compilerOptions": {
|
|
||||||
// node api 使用最新版本号的 "ESxxxx"，browser api 使用 "DOM" 和 "DOM.Iterable"
|
|
||||||
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
|
||||||
|
|
||||||
//显式声明使用的类型包，避免找不到模块
|
|
||||||
"types": ["node", "react", "vite/client"],
|
|
||||||
|
|
||||||
// React JSX 编译模式
|
|
||||||
"jsx": "react-jsx"
|
|
||||||
},
|
|
||||||
// 将类型检查范围扩大至整个子项目，而不只是 src 文件夹,
|
|
||||||
"include": ["**/*"]
|
|
||||||
}
|
|
||||||
@@ -1,43 +0,0 @@
|
|||||||
import { defineConfig } from "vite";
|
|
||||||
import react from "@vitejs/plugin-react";
|
|
||||||
import dts from "vite-plugin-dts";
|
|
||||||
import path from "path";
|
|
||||||
import { genIndexTsPlugin } from "./scripts-plugin/vite-plugin-gen-index-ts";
|
|
||||||
import { genIndexCssPlugin } from "./scripts-plugin/vite-plugin-gen-index-css";
|
|
||||||
|
|
||||||
export default defineConfig({
|
|
||||||
plugins: [
|
|
||||||
genIndexTsPlugin(),
|
|
||||||
genIndexCssPlugin(),
|
|
||||||
react(),
|
|
||||||
dts({
|
|
||||||
insertTypesEntry: true,
|
|
||||||
}),
|
|
||||||
],
|
|
||||||
|
|
||||||
build: {
|
|
||||||
lib: {
|
|
||||||
entry: path.resolve(__dirname, "src/index.ts"),
|
|
||||||
name: "DefgovUIWeb",
|
|
||||||
formats: ["es", "cjs"],
|
|
||||||
fileName: (format) => `index.${format}.js`,
|
|
||||||
},
|
|
||||||
|
|
||||||
rollupOptions: {
|
|
||||||
external: ["react", "react-dom", "react/jsx-runtime"],
|
|
||||||
output: {
|
|
||||||
globals: {
|
|
||||||
react: "React",
|
|
||||||
"react-dom": "ReactDOM",
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
sourcemap: true,
|
|
||||||
cssCodeSplit: true,
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
exclude: ["node_modules", "dist", ".git"],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
});
|
|
||||||
@@ -26,11 +26,15 @@
|
|||||||
"build": "tsc -p tsconfig.build.json && vite build"
|
"build": "tsc -p tsconfig.build.json && vite build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@rollup/plugin-typescript": "^12.3.0",
|
||||||
"@types/node": "^25.6.0",
|
"@types/node": "^25.6.0",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
"@types/react-dom": "^19.2.3",
|
"@types/react-dom": "^19.2.3",
|
||||||
"@vitejs/plugin-react": "~5.2.0",
|
"@vitejs/plugin-react": "~5.2.0",
|
||||||
"glob": "^13.0.6",
|
"glob": "^13.0.6",
|
||||||
|
"tailwind-merge": "^3.5.0",
|
||||||
|
"tailwind-variants": "^3.2.2",
|
||||||
|
"ts-node": "^10.9.2",
|
||||||
"typescript": "~6.0.3",
|
"typescript": "~6.0.3",
|
||||||
"vite": "~7.3.2",
|
"vite": "~7.3.2",
|
||||||
"vite-plugin-dts": "^4.5.4"
|
"vite-plugin-dts": "^4.5.4"
|
||||||
|
|||||||
@@ -1,137 +0,0 @@
|
|||||||
// plugins/vite-plugin-gen-index-css.ts
|
|
||||||
import type { Plugin } from "vite";
|
|
||||||
import fs from "fs";
|
|
||||||
import path from "path";
|
|
||||||
import { globSync } from "glob";
|
|
||||||
|
|
||||||
interface Config {
|
|
||||||
targetDirs: string[];
|
|
||||||
includeExtensions: string[];
|
|
||||||
importSyntax: "@import";
|
|
||||||
importSyntaxTail?: string;
|
|
||||||
excludeFilePattern: RegExp[];
|
|
||||||
excludeDirs: string[];
|
|
||||||
warnDuplicateTailwindImport: boolean;
|
|
||||||
indexFileName: string;
|
|
||||||
}
|
|
||||||
|
|
||||||
const CONFIG: Config = {
|
|
||||||
targetDirs: ["src"],
|
|
||||||
includeExtensions: [".css"],
|
|
||||||
importSyntax: "@import",
|
|
||||||
excludeFilePattern: [/index\.css/, /index\.scss/, /\.(test|spec)\./],
|
|
||||||
excludeDirs: [
|
|
||||||
"__tests__",
|
|
||||||
"tests",
|
|
||||||
"story",
|
|
||||||
"stories",
|
|
||||||
"types",
|
|
||||||
"node_modules",
|
|
||||||
"dist",
|
|
||||||
"build",
|
|
||||||
],
|
|
||||||
warnDuplicateTailwindImport: true,
|
|
||||||
indexFileName: "index.css",
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
|
||||||
|
|
||||||
function isValidFile(filePath: string, config: Config): boolean {
|
|
||||||
const filenameWithExt = filePath.split(/[\\/]/).pop()!;
|
|
||||||
const shouldExcludeFile = config.excludeFilePattern.some((p) =>
|
|
||||||
p.test(filenameWithExt),
|
|
||||||
);
|
|
||||||
if (shouldExcludeFile) return false;
|
|
||||||
|
|
||||||
const normalized = normalizePath(filePath);
|
|
||||||
const shouldExcludeDir = config.excludeDirs.some((dir) =>
|
|
||||||
normalized.includes(`/${dir}/`),
|
|
||||||
);
|
|
||||||
if (shouldExcludeDir) return false;
|
|
||||||
|
|
||||||
const ext = path.extname(filePath);
|
|
||||||
if (!config.includeExtensions.includes(ext)) return false;
|
|
||||||
|
|
||||||
if (config.warnDuplicateTailwindImport) {
|
|
||||||
try {
|
|
||||||
const content = fs.readFileSync(filePath, "utf-8");
|
|
||||||
if (
|
|
||||||
content.includes('@import "tailwindcss"') ||
|
|
||||||
content.includes("@import 'tailwindcss'")
|
|
||||||
) {
|
|
||||||
console.warn(
|
|
||||||
`[gen-index-css] ${filePath} 含有重复的 @import "tailwindcss"，建议删除`,
|
|
||||||
);
|
|
||||||
}
|
|
||||||
} catch {
|
|
||||||
// ignore
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return true;
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateIndexFile(config: Config) {
|
|
||||||
const [targetDir] = config.targetDirs;
|
|
||||||
const dirPath = path.resolve(process.cwd(), targetDir);
|
|
||||||
|
|
||||||
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
|
||||||
|
|
||||||
const allFiles = globSync(searchPattern, {
|
|
||||||
nodir: true,
|
|
||||||
absolute: true,
|
|
||||||
windowsPathsNoEscape: true,
|
|
||||||
dot: false,
|
|
||||||
follow: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const validFiles = allFiles.filter((f) => isValidFile(f, config));
|
|
||||||
|
|
||||||
console.log(`✅ 有效 CSS 文件数量: ${validFiles.length}`);
|
|
||||||
validFiles.sort();
|
|
||||||
|
|
||||||
const importStatements = validFiles.map((file) => {
|
|
||||||
const relPath = path.relative(dirPath, file);
|
|
||||||
const importPath = "./" + relPath.replace(/\\/g, "/");
|
|
||||||
return `${config.importSyntax} '${importPath}';`;
|
|
||||||
});
|
|
||||||
|
|
||||||
const indexContent = `
|
|
||||||
@import "tailwindcss";
|
|
||||||
${importStatements.join("\n")}
|
|
||||||
`.trim();
|
|
||||||
|
|
||||||
const indexFilePath = path.resolve(dirPath, config.indexFileName);
|
|
||||||
|
|
||||||
// ✅ 内容比对，防止无限 rebuild
|
|
||||||
if (fs.existsSync(indexFilePath)) {
|
|
||||||
const old = fs.readFileSync(indexFilePath, "utf8");
|
|
||||||
if (old === indexContent) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
|
||||||
console.log(`✅ 成功生成 ${config.indexFileName}: ${indexFilePath}`);
|
|
||||||
}
|
|
||||||
|
|
||||||
export function genIndexCssPlugin(): Plugin {
|
|
||||||
return {
|
|
||||||
name: "vite-plugin-gen-index-css",
|
|
||||||
apply: "build",
|
|
||||||
|
|
||||||
buildStart() {
|
|
||||||
try {
|
|
||||||
generateIndexFile(CONFIG);
|
|
||||||
} catch (err) {
|
|
||||||
const msg = err instanceof Error ? err.message : String(err);
|
|
||||||
this.error(`[gen-index-css] failed: ${msg}`);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
handleHotUpdate({ file }) {
|
|
||||||
if (normalizePath(file).endsWith(`/src/${CONFIG.indexFileName}`)) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,129 +0,0 @@
|
|||||||
// plugins/vite-plugin-gen-index-ts.ts
|
|
||||||
import type { Plugin } from "vite";
|
|
||||||
import fs from "fs";
|
|
||||||
import path from "path";
|
|
||||||
import { globSync } from "glob";
|
|
||||||
|
|
||||||
interface Config {
|
|
||||||
targetDirs: string[];
|
|
||||||
includeExtensions: string[];
|
|
||||||
excludeKeywords: {
|
|
||||||
dirs: string[];
|
|
||||||
fileSuffixes: string[];
|
|
||||||
filePatterns: RegExp[];
|
|
||||||
};
|
|
||||||
}
|
|
||||||
|
|
||||||
const CONFIG: Config = {
|
|
||||||
targetDirs: ["src"],
|
|
||||||
includeExtensions: [".ts", ".tsx", ".vue"],
|
|
||||||
excludeKeywords: {
|
|
||||||
dirs: ["__tests__", "tests", "story", "stories", "types"],
|
|
||||||
fileSuffixes: [".d.ts"],
|
|
||||||
filePatterns: [
|
|
||||||
/^index\.(ts|tsx|js|jsx)$/,
|
|
||||||
/\.(test|spec)\./,
|
|
||||||
/\.(story|stories)\./,
|
|
||||||
],
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
const normalizePath = (p: string) => p.replace(/\\/g, "/");
|
|
||||||
|
|
||||||
const isInExcludeDir = (filePath: string) => {
|
|
||||||
const normalized = normalizePath(filePath);
|
|
||||||
return CONFIG.excludeKeywords.dirs.some((dir) =>
|
|
||||||
normalized.includes(`/${dir}/`),
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
const isExcludeSuffix = (filePath: string) =>
|
|
||||||
CONFIG.excludeKeywords.fileSuffixes.some((suffix) =>
|
|
||||||
filePath.endsWith(suffix),
|
|
||||||
);
|
|
||||||
|
|
||||||
const isMatchExcludePattern = (fileName: string) =>
|
|
||||||
CONFIG.excludeKeywords.filePatterns.some((pattern) => pattern.test(fileName));
|
|
||||||
|
|
||||||
function isValidFile(filePath: string): boolean {
|
|
||||||
const fileName = filePath.split(/[\\/]/).pop()!;
|
|
||||||
|
|
||||||
if (isInExcludeDir(filePath)) return false;
|
|
||||||
if (isExcludeSuffix(filePath)) return false;
|
|
||||||
if (isMatchExcludePattern(fileName)) return false;
|
|
||||||
|
|
||||||
const ext = path.extname(filePath);
|
|
||||||
return CONFIG.includeExtensions.includes(ext);
|
|
||||||
}
|
|
||||||
|
|
||||||
function generateIndexFile(dirPath: string) {
|
|
||||||
const searchPattern = path.resolve(dirPath, "**", "*.*");
|
|
||||||
|
|
||||||
const allFiles = globSync(searchPattern, {
|
|
||||||
nodir: true,
|
|
||||||
absolute: true,
|
|
||||||
windowsPathsNoEscape: true,
|
|
||||||
dot: false,
|
|
||||||
follow: true,
|
|
||||||
});
|
|
||||||
|
|
||||||
const validFiles = allFiles.filter(isValidFile);
|
|
||||||
if (validFiles.length === 0) return;
|
|
||||||
|
|
||||||
validFiles.sort();
|
|
||||||
|
|
||||||
const exportStatements = validFiles.map((file) => {
|
|
||||||
const relPath = path.relative(dirPath, file);
|
|
||||||
const importPath = `./${relPath
|
|
||||||
.replace(/\.[^.]+$/, "")
|
|
||||||
.replace(/\\/g, "/")}`;
|
|
||||||
return `export * from '${importPath}';`;
|
|
||||||
});
|
|
||||||
|
|
||||||
const indexContent = `
|
|
||||||
import './index.css';
|
|
||||||
|
|
||||||
${exportStatements.join("\n")}
|
|
||||||
`.trim();
|
|
||||||
|
|
||||||
const indexFilePath = path.resolve(dirPath, "index.ts");
|
|
||||||
|
|
||||||
// ✅ 内容比对，避免无限 rebuild
|
|
||||||
if (fs.existsSync(indexFilePath)) {
|
|
||||||
const old = fs.readFileSync(indexFilePath, "utf8");
|
|
||||||
if (old === indexContent) return;
|
|
||||||
}
|
|
||||||
|
|
||||||
fs.writeFileSync(indexFilePath, indexContent, "utf8");
|
|
||||||
}
|
|
||||||
|
|
||||||
export function genIndexTsPlugin(): Plugin {
|
|
||||||
return {
|
|
||||||
name: "vite-plugin-gen-index-ts",
|
|
||||||
apply: "build",
|
|
||||||
|
|
||||||
buildStart() {
|
|
||||||
const [targetDir] = CONFIG.targetDirs;
|
|
||||||
if (!targetDir) {
|
|
||||||
this.error("CONFIG.targetDirs is empty");
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
|
|
||||||
const absTargetDir = path.resolve(process.cwd(), targetDir);
|
|
||||||
|
|
||||||
try {
|
|
||||||
generateIndexFile(absTargetDir);
|
|
||||||
} catch (err) {
|
|
||||||
const msg = err instanceof Error ? err.message : String(err);
|
|
||||||
this.error(`[gen-index-ts] failed: ${msg}`);
|
|
||||||
throw err;
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
handleHotUpdate({ file }) {
|
|
||||||
if (file.replace(/\\/g, "/").endsWith("/src/index.ts")) {
|
|
||||||
return [];
|
|
||||||
}
|
|
||||||
},
|
|
||||||
};
|
|
||||||
}
|
|
||||||
@@ -1,6 +1,13 @@
|
|||||||
|
import { clsm } from "@defgov/ui-web";
|
||||||
import { ButtonGallery } from "./gallery/ButtonGallery";
|
import { ButtonGallery } from "./gallery/ButtonGallery";
|
||||||
|
import { cn } from "tailwind-variants";
|
||||||
|
|
||||||
export default function App() {
|
export default function App() {
|
||||||
|
const s1 = "hta-xs";
|
||||||
|
const s2 = "hta-sm";
|
||||||
|
const sm = clsm(s1, s2);
|
||||||
|
console.log(sm); // 应该输出 hta-sm
|
||||||
|
// 合并逻辑是，第一个短横线“-”之前的，如果相同，就意味着是冲突项，后面的覆盖前面的
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<ButtonGallery />
|
<ButtonGallery />
|
||||||
|
|||||||
@@ -1,13 +1,12 @@
|
|||||||
import { ReactNode } from "react";
|
import { type ReactNode } from "react";
|
||||||
|
|
||||||
export const InnerWrapper = ({ children }: { children: ReactNode }) => {
|
export const InnerWrapper = ({ children }: { children: ReactNode }) => {
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
gap: "30px",
|
gap: "10px",
|
||||||
display: "flex",
|
display: "flex",
|
||||||
flexWrap: "nowrap",
|
flexWrap: "nowrap",
|
||||||
margin: "50px",
|
|
||||||
alignItems: "center",
|
alignItems: "center",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
|
|||||||
@@ -1,4 +1,4 @@
|
|||||||
import { ReactNode } from "react";
|
import { type ReactNode } from "react";
|
||||||
|
|
||||||
export const OuterWrapper = ({ children }: { children: ReactNode }) => {
|
export const OuterWrapper = ({ children }: { children: ReactNode }) => {
|
||||||
return (
|
return (
|
||||||
@@ -8,6 +8,7 @@ export const OuterWrapper = ({ children }: { children: ReactNode }) => {
|
|||||||
display: "flex",
|
display: "flex",
|
||||||
flexWrap: "nowrap",
|
flexWrap: "nowrap",
|
||||||
flexDirection: "column",
|
flexDirection: "column",
|
||||||
|
margin: "30px",
|
||||||
}}
|
}}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|||||||
@@ -10,12 +10,241 @@ export const ButtonGallery = () => {
|
|||||||
<Button size="xs" iconSvg={<DownloadSvg />}>
|
<Button size="xs" iconSvg={<DownloadSvg />}>
|
||||||
xsmall
|
xsmall
|
||||||
</Button>
|
</Button>
|
||||||
<Button size="xs" iconSvg={<DownloadSvg />} iconOnly>
|
<Button size="xs" iconSvg={<DownloadSvg />} iconOnly={true}>
|
||||||
xsmall
|
xsmall
|
||||||
</Button>
|
</Button>
|
||||||
<Button size="sm">sm</Button>
|
<Button size="sm">small</Button>
|
||||||
<Button size="md">md</Button>
|
<Button size="sm" iconSvg={<DownloadSvg />}>
|
||||||
<Button size="lg">lg</Button>
|
small
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" iconSvg={<DownloadSvg />} iconOnly={true}>
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button size="md">medium</Button>
|
||||||
|
<Button size="md" iconSvg={<DownloadSvg />}>
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button size="md" iconSvg={<DownloadSvg />} iconOnly={true}>
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button size="lg">large</Button>
|
||||||
|
<Button size="lg" iconSvg={<DownloadSvg />}>
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" iconSvg={<DownloadSvg />} iconOnly={true}>
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button size="xs" variant="outline">
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button size="xs" variant="outline" iconSvg={<DownloadSvg />}>
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="xs"
|
||||||
|
variant="outline"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline">
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="outline" iconSvg={<DownloadSvg />}>
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="outline"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button size="md" variant="outline">
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button size="md" variant="outline" iconSvg={<DownloadSvg />}>
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="md"
|
||||||
|
variant="outline"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" variant="outline">
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" variant="outline" iconSvg={<DownloadSvg />}>
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="outline"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button size="xs" variant="subtle">
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button size="xs" variant="subtle" iconSvg={<DownloadSvg />}>
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="xs"
|
||||||
|
variant="subtle"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="subtle">
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="subtle" iconSvg={<DownloadSvg />}>
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="subtle"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button size="md" variant="subtle">
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button size="md" variant="subtle" iconSvg={<DownloadSvg />}>
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="md"
|
||||||
|
variant="subtle"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" variant="subtle">
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" variant="subtle" iconSvg={<DownloadSvg />}>
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="subtle"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
{/* ------------------------------------- */}
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button size="xs" variant="ghost">
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button size="xs" variant="ghost" iconSvg={<DownloadSvg />}>
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="xs"
|
||||||
|
variant="ghost"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
xsmall
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="ghost">
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
<Button size="sm" variant="ghost" iconSvg={<DownloadSvg />}>
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="sm"
|
||||||
|
variant="ghost"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
small
|
||||||
|
</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button size="md" variant="ghost">
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button size="md" variant="ghost" iconSvg={<DownloadSvg />}>
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="md"
|
||||||
|
variant="ghost"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
medium
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" variant="ghost">
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
<Button size="lg" variant="ghost" iconSvg={<DownloadSvg />}>
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
<Button
|
||||||
|
size="lg"
|
||||||
|
variant="ghost"
|
||||||
|
iconSvg={<DownloadSvg />}
|
||||||
|
iconOnly={true}
|
||||||
|
>
|
||||||
|
large
|
||||||
|
</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button variant="filled" brand="info">
|
||||||
|
button
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" brand="info">
|
||||||
|
button
|
||||||
|
</Button>
|
||||||
|
<Button variant="subtle" brand="info">
|
||||||
|
button
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" brand="info">
|
||||||
|
button
|
||||||
|
</Button>
|
||||||
|
</InnerWrapper>
|
||||||
|
<InnerWrapper>
|
||||||
|
<Button variant="filled" disabled>
|
||||||
|
button
|
||||||
|
</Button>
|
||||||
|
<Button variant="outline" disabled>
|
||||||
|
button
|
||||||
|
</Button>
|
||||||
|
<Button variant="subtle" disabled>
|
||||||
|
button
|
||||||
|
</Button>
|
||||||
|
<Button variant="ghost" disabled>
|
||||||
|
button
|
||||||
|
</Button>
|
||||||
</InnerWrapper>
|
</InnerWrapper>
|
||||||
</OuterWrapper>
|
</OuterWrapper>
|
||||||
);
|
);
|
||||||
|
|||||||
@@ -1,26 +1,12 @@
|
|||||||
{
|
{
|
||||||
// tsconfig.base.json，用于被 tesconfig.json 和 tesconfig.build.json 继承
|
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
// 输出模块语法，使用版本号最新的那个，而不是实验性语法 ESNext
|
|
||||||
"module": "es2022",
|
"module": "es2022",
|
||||||
|
|
||||||
// 模块解析策略，模拟 Vite / Rollup / webpack，支持 exports / imports，不强制 Node ESM 的严格规则
|
|
||||||
"moduleResolution": "bundler",
|
"moduleResolution": "bundler",
|
||||||
|
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
||||||
// 显式声明使用的类型包
|
"strict": true,
|
||||||
"types": ["node", "react", "react-dom"],
|
|
||||||
|
|
||||||
// 允许 ESM 导入 CJS
|
|
||||||
"esModuleInterop": true,
|
"esModuleInterop": true,
|
||||||
|
|
||||||
// 跳过 node_modules 类型检查，加快构建，避免第三方类型污染
|
|
||||||
"skipLibCheck": true,
|
"skipLibCheck": true,
|
||||||
|
"isolatedModules": true,
|
||||||
/**
|
"verbatimModuleSyntax": true
|
||||||
* 只做类型检查，不生成 JS 输出
|
|
||||||
* - 适用于 Vite / Next / Nuxt 等 bundler 场景
|
|
||||||
* - 防止 tsc 与构建工具重复 emit
|
|
||||||
*/
|
|
||||||
"noEmit": true
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,67 +1,12 @@
|
|||||||
{
|
{
|
||||||
// 此文件仅用于类型检查，不用于类型检查，构建时会指定使用 tsconfig.build.json
|
|
||||||
"extends": "./tsconfig.base.json",
|
"extends": "./tsconfig.base.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
// Browser api，需要加 "DOM"，"DOM.Iterable"
|
|
||||||
// Node api，需要加 "ES2025"，始终使用带版本号的最新版本
|
|
||||||
// NextJs api，属于同构，server 端会预处理 DOM，计算url，三个都需要 "ES2025", "DOM", "DOM.Iterable"
|
|
||||||
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 显式声明使用的类型包
|
|
||||||
* - node：Node.js API
|
|
||||||
* - react：JSX / React 类型
|
|
||||||
* - vite/client：import.meta / env
|
|
||||||
*/
|
|
||||||
"types": ["node", "react", "react-dom"],
|
|
||||||
|
|
||||||
/**
|
|
||||||
* React JSX 编译模式
|
|
||||||
* - 使用 React 17+ 新 JSX Transform
|
|
||||||
* - 不需要手动 import React
|
|
||||||
*/
|
|
||||||
"jsx": "react-jsx",
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 编译输出目录
|
|
||||||
* - tsc / tsc -b 都会用到
|
|
||||||
*/
|
|
||||||
"outDir": "./dist",
|
"outDir": "./dist",
|
||||||
|
|
||||||
/**
|
|
||||||
* 源码根目录
|
|
||||||
* - 确保 dist 结构与 src 一致
|
|
||||||
* - 对 declaration 路径至关重要
|
|
||||||
*/
|
|
||||||
"rootDir": "./src",
|
"rootDir": "./src",
|
||||||
|
"jsx": "react-jsx",
|
||||||
/**
|
"declaration": true
|
||||||
* 生成 .d.ts 类型声明文件
|
|
||||||
* - 组件库 / npm 包发布必需
|
|
||||||
* - 对应用项目无害，仅影响类型输出
|
|
||||||
*/
|
|
||||||
"declaration": true,
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 强制单文件可独立编译
|
|
||||||
* - 适配 esbuild / SWC / bundler 编译模型
|
|
||||||
* - 禁止依赖跨文件类型推断（enum / namespace 等）
|
|
||||||
*/
|
|
||||||
"isolatedModules": true
|
|
||||||
},
|
},
|
||||||
/**
|
|
||||||
* 参与类型检查和编译的文件
|
|
||||||
* - 只扫描 src
|
|
||||||
* - 其它目录通过 exclude 排除
|
|
||||||
*/
|
|
||||||
"include": ["src"],
|
"include": ["src"],
|
||||||
|
|
||||||
/**
|
|
||||||
* 明确排除非源码内容
|
|
||||||
* - 避免污染类型系统
|
|
||||||
* - 防止误入 dist / test / config
|
|
||||||
* - 保证发布包干净
|
|
||||||
*/
|
|
||||||
"exclude": [
|
"exclude": [
|
||||||
"node_modules",
|
"node_modules",
|
||||||
"dist",
|
"dist",
|
||||||
|
|||||||
@@ -1,17 +1,8 @@
|
|||||||
{
|
{
|
||||||
// 此文件仅用于类型检查，不用于构建，构建时会指定使用 tsconfig.build.json
|
|
||||||
"extends": "./tsconfig.base.json",
|
"extends": "./tsconfig.base.json",
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
// node api 使用最新版本号的 "ESxxxx"，browser api 使用 "DOM" 和 "DOM.Iterable"
|
"jsx": "react-jsx",
|
||||||
"lib": ["ES2025", "DOM", "DOM.Iterable"],
|
"noEmit": true
|
||||||
|
|
||||||
//显式声明使用的类型包，避免找不到模块
|
|
||||||
"types": ["node", "react", "react-dom"],
|
|
||||||
|
|
||||||
// React JSX 编译模式
|
|
||||||
"jsx": "react-jsx"
|
|
||||||
},
|
},
|
||||||
// 将类型检查范围扩大至整个子项目，而不只是 src 文件夹,
|
"include": ["."]
|
||||||
"include": ["**/*"]
|
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,16 +1,31 @@
|
|||||||
import { defineConfig } from "vite"
|
import { defineConfig } from "vite";
|
||||||
import react from "@vitejs/plugin-react"
|
import react from "@vitejs/plugin-react";
|
||||||
import dts from "vite-plugin-dts"
|
import dts from "vite-plugin-dts";
|
||||||
import { genIndexTsPlugin } from "./scripts-plugin/vite-plugin-gen-index-ts"
|
import typescript from "@rollup/plugin-typescript";
|
||||||
import { genIndexCssPlugin } from "./scripts-plugin/vite-plugin-gen-index-css"
|
|
||||||
|
|
||||||
export default defineConfig({
|
export default defineConfig({
|
||||||
plugins: [
|
plugins: [
|
||||||
genIndexTsPlugin(),
|
|
||||||
genIndexCssPlugin(),
|
|
||||||
react(),
|
react(),
|
||||||
dts({
|
dts({
|
||||||
insertTypesEntry: true,
|
insertTypesEntry: true,
|
||||||
}),
|
}),
|
||||||
],
|
],
|
||||||
})
|
|
||||||
|
esbuild: false,
|
||||||
|
|
||||||
|
build: {
|
||||||
|
rollupOptions: {
|
||||||
|
plugins: [typescript({ tsconfig: "./tsconfig.build.json" })],
|
||||||
|
external: ["react", "react-dom", "react/jsx-runtime"],
|
||||||
|
output: {
|
||||||
|
globals: {
|
||||||
|
react: "React",
|
||||||
|
"react-dom": "ReactDOM",
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
sourcemap: true,
|
||||||
|
cssCodeSplit: true,
|
||||||
|
},
|
||||||
|
});
|
||||||
|
|||||||
394
packages/css/base/root.css
Normal file
394
packages/css/base/root.css
Normal file
@@ -0,0 +1,394 @@
|
|||||||
|
:root {
|
||||||
|
--color-red-50: oklch(97.1% 0.013 17.38);
|
||||||
|
--color-red-100: oklch(93.6% 0.032 17.717);
|
||||||
|
--color-red-200: oklch(88.5% 0.062 18.334);
|
||||||
|
--color-red-300: oklch(80.8% 0.114 19.571);
|
||||||
|
--color-red-400: oklch(70.4% 0.191 22.216);
|
||||||
|
--color-red-500: oklch(63.7% 0.237 25.331);
|
||||||
|
--color-red-600: oklch(57.7% 0.245 27.325);
|
||||||
|
--color-red-700: oklch(50.5% 0.213 27.518);
|
||||||
|
--color-red-800: oklch(44.4% 0.177 26.899);
|
||||||
|
--color-red-900: oklch(39.6% 0.141 25.723);
|
||||||
|
--color-red-950: oklch(25.8% 0.092 26.042);
|
||||||
|
--color-orange-50: oklch(98% 0.016 73.684);
|
||||||
|
--color-orange-100: oklch(95.4% 0.038 75.164);
|
||||||
|
--color-orange-200: oklch(90.1% 0.076 70.697);
|
||||||
|
--color-orange-300: oklch(83.7% 0.128 66.29);
|
||||||
|
--color-orange-400: oklch(75% 0.183 55.934);
|
||||||
|
--color-orange-500: oklch(70.5% 0.213 47.604);
|
||||||
|
--color-orange-600: oklch(64.6% 0.222 41.116);
|
||||||
|
--color-orange-700: oklch(55.3% 0.195 38.402);
|
||||||
|
--color-orange-800: oklch(47% 0.157 37.304);
|
||||||
|
--color-orange-900: oklch(40.8% 0.123 38.172);
|
||||||
|
--color-orange-950: oklch(26.6% 0.079 36.259);
|
||||||
|
--color-amber-50: oklch(98.7% 0.022 95.277);
|
||||||
|
--color-amber-100: oklch(96.2% 0.059 95.617);
|
||||||
|
--color-amber-200: oklch(92.4% 0.12 95.746);
|
||||||
|
--color-amber-300: oklch(87.9% 0.169 91.605);
|
||||||
|
--color-amber-400: oklch(82.8% 0.189 84.429);
|
||||||
|
--color-amber-500: oklch(76.9% 0.188 70.08);
|
||||||
|
--color-amber-600: oklch(66.6% 0.179 58.318);
|
||||||
|
--color-amber-700: oklch(55.5% 0.163 48.998);
|
||||||
|
--color-amber-800: oklch(47.3% 0.137 46.201);
|
||||||
|
--color-amber-900: oklch(41.4% 0.112 45.904);
|
||||||
|
--color-amber-950: oklch(27.9% 0.077 45.635);
|
||||||
|
--color-yellow-50: oklch(98.7% 0.026 102.212);
|
||||||
|
--color-yellow-100: oklch(97.3% 0.071 103.193);
|
||||||
|
--color-yellow-200: oklch(94.5% 0.129 101.54);
|
||||||
|
--color-yellow-300: oklch(90.5% 0.182 98.111);
|
||||||
|
--color-yellow-400: oklch(85.2% 0.199 91.936);
|
||||||
|
--color-yellow-500: oklch(79.5% 0.184 86.047);
|
||||||
|
--color-yellow-600: oklch(68.1% 0.162 75.834);
|
||||||
|
--color-yellow-700: oklch(55.4% 0.135 66.442);
|
||||||
|
--color-yellow-800: oklch(47.6% 0.114 61.907);
|
||||||
|
--color-yellow-900: oklch(42.1% 0.095 57.708);
|
||||||
|
--color-yellow-950: oklch(28.6% 0.066 53.813);
|
||||||
|
--color-lime-50: oklch(98.6% 0.031 120.757);
|
||||||
|
--color-lime-100: oklch(96.7% 0.067 122.328);
|
||||||
|
--color-lime-200: oklch(93.8% 0.127 124.321);
|
||||||
|
--color-lime-300: oklch(89.7% 0.196 126.665);
|
||||||
|
--color-lime-400: oklch(84.1% 0.238 128.85);
|
||||||
|
--color-lime-500: oklch(76.8% 0.233 130.85);
|
||||||
|
--color-lime-600: oklch(64.8% 0.2 131.684);
|
||||||
|
--color-lime-700: oklch(53.2% 0.157 131.589);
|
||||||
|
--color-lime-800: oklch(45.3% 0.124 130.933);
|
||||||
|
--color-lime-900: oklch(40.5% 0.101 131.063);
|
||||||
|
--color-lime-950: oklch(27.4% 0.072 132.109);
|
||||||
|
--color-green-50: oklch(98.2% 0.018 155.826);
|
||||||
|
--color-green-100: oklch(96.2% 0.044 156.743);
|
||||||
|
--color-green-200: oklch(92.5% 0.084 155.995);
|
||||||
|
--color-green-300: oklch(87.1% 0.15 154.449);
|
||||||
|
--color-green-400: oklch(79.2% 0.209 151.711);
|
||||||
|
--color-green-500: oklch(72.3% 0.219 149.579);
|
||||||
|
--color-green-600: oklch(62.7% 0.194 149.214);
|
||||||
|
--color-green-700: oklch(52.7% 0.154 150.069);
|
||||||
|
--color-green-800: oklch(44.8% 0.119 151.328);
|
||||||
|
--color-green-900: oklch(39.3% 0.095 152.535);
|
||||||
|
--color-green-950: oklch(26.6% 0.065 152.934);
|
||||||
|
--color-emerald-50: oklch(97.9% 0.021 166.113);
|
||||||
|
--color-emerald-100: oklch(95% 0.052 163.051);
|
||||||
|
--color-emerald-200: oklch(90.5% 0.093 164.15);
|
||||||
|
--color-emerald-300: oklch(84.5% 0.143 164.978);
|
||||||
|
--color-emerald-400: oklch(76.5% 0.177 163.223);
|
||||||
|
--color-emerald-500: oklch(69.6% 0.17 162.48);
|
||||||
|
--color-emerald-600: oklch(59.6% 0.145 163.225);
|
||||||
|
--color-emerald-700: oklch(50.8% 0.118 165.612);
|
||||||
|
--color-emerald-800: oklch(43.2% 0.095 166.913);
|
||||||
|
--color-emerald-900: oklch(37.8% 0.077 168.94);
|
||||||
|
--color-emerald-950: oklch(26.2% 0.051 172.552);
|
||||||
|
--color-teal-50: oklch(98.4% 0.014 180.72);
|
||||||
|
--color-teal-100: oklch(95.3% 0.051 180.801);
|
||||||
|
--color-teal-200: oklch(91% 0.096 180.426);
|
||||||
|
--color-teal-300: oklch(85.5% 0.138 181.071);
|
||||||
|
--color-teal-400: oklch(77.7% 0.152 181.912);
|
||||||
|
--color-teal-500: oklch(70.4% 0.14 182.503);
|
||||||
|
--color-teal-600: oklch(60% 0.118 184.704);
|
||||||
|
--color-teal-700: oklch(51.1% 0.096 186.391);
|
||||||
|
--color-teal-800: oklch(43.7% 0.078 188.216);
|
||||||
|
--color-teal-900: oklch(38.6% 0.063 188.416);
|
||||||
|
--color-teal-950: oklch(27.7% 0.046 192.524);
|
||||||
|
--color-cyan-50: oklch(98.4% 0.019 200.873);
|
||||||
|
--color-cyan-100: oklch(95.6% 0.045 203.388);
|
||||||
|
--color-cyan-200: oklch(91.7% 0.08 205.041);
|
||||||
|
--color-cyan-300: oklch(86.5% 0.127 207.078);
|
||||||
|
--color-cyan-400: oklch(78.9% 0.154 211.53);
|
||||||
|
--color-cyan-500: oklch(71.5% 0.143 215.221);
|
||||||
|
--color-cyan-600: oklch(60.9% 0.126 221.723);
|
||||||
|
--color-cyan-700: oklch(52% 0.105 223.128);
|
||||||
|
--color-cyan-800: oklch(45% 0.085 224.283);
|
||||||
|
--color-cyan-900: oklch(39.8% 0.07 227.392);
|
||||||
|
--color-cyan-950: oklch(30.2% 0.056 229.695);
|
||||||
|
--color-sky-50: oklch(97.7% 0.013 236.62);
|
||||||
|
--color-sky-100: oklch(95.1% 0.026 236.824);
|
||||||
|
--color-sky-200: oklch(90.1% 0.058 230.902);
|
||||||
|
--color-sky-300: oklch(82.8% 0.111 230.318);
|
||||||
|
--color-sky-400: oklch(74.6% 0.16 232.661);
|
||||||
|
--color-sky-500: oklch(68.5% 0.169 237.323);
|
||||||
|
--color-sky-600: oklch(58.8% 0.158 241.966);
|
||||||
|
--color-sky-700: oklch(50% 0.134 242.749);
|
||||||
|
--color-sky-800: oklch(44.3% 0.11 240.79);
|
||||||
|
--color-sky-900: oklch(39.1% 0.09 240.876);
|
||||||
|
--color-sky-950: oklch(29.3% 0.066 243.157);
|
||||||
|
--color-blue-50: oklch(97% 0.014 254.604);
|
||||||
|
--color-blue-100: oklch(93.2% 0.032 255.585);
|
||||||
|
--color-blue-200: oklch(88.2% 0.059 254.128);
|
||||||
|
--color-blue-300: oklch(80.9% 0.105 251.813);
|
||||||
|
--color-blue-400: oklch(70.7% 0.165 254.624);
|
||||||
|
--color-blue-500: oklch(62.3% 0.214 259.815);
|
||||||
|
--color-blue-600: oklch(54.6% 0.245 262.881);
|
||||||
|
--color-blue-700: oklch(48.8% 0.243 264.376);
|
||||||
|
--color-blue-800: oklch(42.4% 0.199 265.638);
|
||||||
|
--color-blue-900: oklch(37.9% 0.146 265.522);
|
||||||
|
--color-blue-950: oklch(28.2% 0.091 267.935);
|
||||||
|
--color-indigo-50: oklch(96.2% 0.018 272.314);
|
||||||
|
--color-indigo-100: oklch(93% 0.034 272.788);
|
||||||
|
--color-indigo-200: oklch(87% 0.065 274.039);
|
||||||
|
--color-indigo-300: oklch(78.5% 0.115 274.713);
|
||||||
|
--color-indigo-400: oklch(67.3% 0.182 276.935);
|
||||||
|
--color-indigo-500: oklch(58.5% 0.233 277.117);
|
||||||
|
--color-indigo-600: oklch(51.1% 0.262 276.966);
|
||||||
|
--color-indigo-700: oklch(45.7% 0.24 277.023);
|
||||||
|
--color-indigo-800: oklch(39.8% 0.195 277.366);
|
||||||
|
--color-indigo-900: oklch(35.9% 0.144 278.697);
|
||||||
|
--color-indigo-950: oklch(25.7% 0.09 281.288);
|
||||||
|
--color-violet-50: oklch(96.9% 0.016 293.756);
|
||||||
|
--color-violet-100: oklch(94.3% 0.029 294.588);
|
||||||
|
--color-violet-200: oklch(89.4% 0.057 293.283);
|
||||||
|
--color-violet-300: oklch(81.1% 0.111 293.571);
|
||||||
|
--color-violet-400: oklch(70.2% 0.183 293.541);
|
||||||
|
--color-violet-500: oklch(60.6% 0.25 292.717);
|
||||||
|
--color-violet-600: oklch(54.1% 0.281 293.009);
|
||||||
|
--color-violet-700: oklch(49.1% 0.27 292.581);
|
||||||
|
--color-violet-800: oklch(43.2% 0.232 292.759);
|
||||||
|
--color-violet-900: oklch(38% 0.189 293.745);
|
||||||
|
--color-violet-950: oklch(28.3% 0.141 291.089);
|
||||||
|
--color-purple-50: oklch(97.7% 0.014 308.299);
|
||||||
|
--color-purple-100: oklch(94.6% 0.033 307.174);
|
||||||
|
--color-purple-200: oklch(90.2% 0.063 306.703);
|
||||||
|
--color-purple-300: oklch(82.7% 0.119 306.383);
|
||||||
|
--color-purple-400: oklch(71.4% 0.203 305.504);
|
||||||
|
--color-purple-500: oklch(62.7% 0.265 303.9);
|
||||||
|
--color-purple-600: oklch(55.8% 0.288 302.321);
|
||||||
|
--color-purple-700: oklch(49.6% 0.265 301.924);
|
||||||
|
--color-purple-800: oklch(43.8% 0.218 303.724);
|
||||||
|
--color-purple-900: oklch(38.1% 0.176 304.987);
|
||||||
|
--color-purple-950: oklch(29.1% 0.149 302.717);
|
||||||
|
--color-fuchsia-50: oklch(97.7% 0.017 320.058);
|
||||||
|
--color-fuchsia-100: oklch(95.2% 0.037 318.852);
|
||||||
|
--color-fuchsia-200: oklch(90.3% 0.076 319.62);
|
||||||
|
--color-fuchsia-300: oklch(83.3% 0.145 321.434);
|
||||||
|
--color-fuchsia-400: oklch(74% 0.238 322.16);
|
||||||
|
--color-fuchsia-500: oklch(66.7% 0.295 322.15);
|
||||||
|
--color-fuchsia-600: oklch(59.1% 0.293 322.896);
|
||||||
|
--color-fuchsia-700: oklch(51.8% 0.253 323.949);
|
||||||
|
--color-fuchsia-800: oklch(45.2% 0.211 324.591);
|
||||||
|
--color-fuchsia-900: oklch(40.1% 0.17 325.612);
|
||||||
|
--color-fuchsia-950: oklch(29.3% 0.136 325.661);
|
||||||
|
--color-pink-50: oklch(97.1% 0.014 343.198);
|
||||||
|
--color-pink-100: oklch(94.8% 0.028 342.258);
|
||||||
|
--color-pink-200: oklch(89.9% 0.061 343.231);
|
||||||
|
--color-pink-300: oklch(82.3% 0.12 346.018);
|
||||||
|
--color-pink-400: oklch(71.8% 0.202 349.761);
|
||||||
|
--color-pink-500: oklch(65.6% 0.241 354.308);
|
||||||
|
--color-pink-600: oklch(59.2% 0.249 0.584);
|
||||||
|
--color-pink-700: oklch(52.5% 0.223 3.958);
|
||||||
|
--color-pink-800: oklch(45.9% 0.187 3.815);
|
||||||
|
--color-pink-900: oklch(40.8% 0.153 2.432);
|
||||||
|
--color-pink-950: oklch(28.4% 0.109 3.907);
|
||||||
|
--color-rose-50: oklch(96.9% 0.015 12.422);
|
||||||
|
--color-rose-100: oklch(94.1% 0.03 12.58);
|
||||||
|
--color-rose-200: oklch(89.2% 0.058 10.001);
|
||||||
|
--color-rose-300: oklch(81% 0.117 11.638);
|
||||||
|
--color-rose-400: oklch(71.2% 0.194 13.428);
|
||||||
|
--color-rose-500: oklch(64.5% 0.246 16.439);
|
||||||
|
--color-rose-600: oklch(58.6% 0.253 17.585);
|
||||||
|
--color-rose-700: oklch(51.4% 0.222 16.935);
|
||||||
|
--color-rose-800: oklch(45.5% 0.188 13.697);
|
||||||
|
--color-rose-900: oklch(41% 0.159 10.272);
|
||||||
|
--color-rose-950: oklch(27.1% 0.105 12.094);
|
||||||
|
--color-slate-50: oklch(98.4% 0.003 247.858);
|
||||||
|
--color-slate-100: oklch(96.8% 0.007 247.896);
|
||||||
|
--color-slate-200: oklch(92.9% 0.013 255.508);
|
||||||
|
--color-slate-300: oklch(86.9% 0.022 252.894);
|
||||||
|
--color-slate-400: oklch(70.4% 0.04 256.788);
|
||||||
|
--color-slate-500: oklch(55.4% 0.046 257.417);
|
||||||
|
--color-slate-600: oklch(44.6% 0.043 257.281);
|
||||||
|
--color-slate-700: oklch(37.2% 0.044 257.287);
|
||||||
|
--color-slate-800: oklch(27.9% 0.041 260.031);
|
||||||
|
--color-slate-900: oklch(20.8% 0.042 265.755);
|
||||||
|
--color-slate-950: oklch(12.9% 0.042 264.695);
|
||||||
|
--color-gray-50: oklch(98.5% 0.002 247.839);
|
||||||
|
--color-gray-100: oklch(96.7% 0.003 264.542);
|
||||||
|
--color-gray-200: oklch(92.8% 0.006 264.531);
|
||||||
|
--color-gray-300: oklch(87.2% 0.01 258.338);
|
||||||
|
--color-gray-400: oklch(70.7% 0.022 261.325);
|
||||||
|
--color-gray-500: oklch(55.1% 0.027 264.364);
|
||||||
|
--color-gray-600: oklch(44.6% 0.03 256.802);
|
||||||
|
--color-gray-700: oklch(37.3% 0.034 259.733);
|
||||||
|
--color-gray-800: oklch(27.8% 0.033 256.848);
|
||||||
|
--color-gray-900: oklch(21% 0.034 264.665);
|
||||||
|
--color-gray-950: oklch(13% 0.028 261.692);
|
||||||
|
--color-zinc-50: oklch(98.5% 0 0);
|
||||||
|
--color-zinc-100: oklch(96.7% 0.001 286.375);
|
||||||
|
--color-zinc-200: oklch(92% 0.004 286.32);
|
||||||
|
--color-zinc-300: oklch(87.1% 0.006 286.286);
|
||||||
|
--color-zinc-400: oklch(70.5% 0.015 286.067);
|
||||||
|
--color-zinc-500: oklch(55.2% 0.016 285.938);
|
||||||
|
--color-zinc-600: oklch(44.2% 0.017 285.786);
|
||||||
|
--color-zinc-700: oklch(37% 0.013 285.805);
|
||||||
|
--color-zinc-800: oklch(27.4% 0.006 286.033);
|
||||||
|
--color-zinc-900: oklch(21% 0.006 285.885);
|
||||||
|
--color-zinc-950: oklch(14.1% 0.005 285.823);
|
||||||
|
--color-neutral-50: oklch(98.5% 0 0);
|
||||||
|
--color-neutral-100: oklch(97% 0 0);
|
||||||
|
--color-neutral-200: oklch(92.2% 0 0);
|
||||||
|
--color-neutral-300: oklch(87% 0 0);
|
||||||
|
--color-neutral-400: oklch(70.8% 0 0);
|
||||||
|
--color-neutral-500: oklch(55.6% 0 0);
|
||||||
|
--color-neutral-600: oklch(43.9% 0 0);
|
||||||
|
--color-neutral-700: oklch(37.1% 0 0);
|
||||||
|
--color-neutral-800: oklch(26.9% 0 0);
|
||||||
|
--color-neutral-900: oklch(20.5% 0 0);
|
||||||
|
--color-neutral-950: oklch(14.5% 0 0);
|
||||||
|
--color-stone-50: oklch(98.5% 0.001 106.423);
|
||||||
|
--color-stone-100: oklch(97% 0.001 106.424);
|
||||||
|
--color-stone-200: oklch(92.3% 0.003 48.717);
|
||||||
|
--color-stone-300: oklch(86.9% 0.005 56.366);
|
||||||
|
--color-stone-400: oklch(70.9% 0.01 56.259);
|
||||||
|
--color-stone-500: oklch(55.3% 0.013 58.071);
|
||||||
|
--color-stone-600: oklch(44.4% 0.011 73.639);
|
||||||
|
--color-stone-700: oklch(37.4% 0.01 67.558);
|
||||||
|
--color-stone-800: oklch(26.8% 0.007 34.298);
|
||||||
|
--color-stone-900: oklch(21.6% 0.006 56.043);
|
||||||
|
--color-stone-950: oklch(14.7% 0.004 49.25);
|
||||||
|
--color-mauve-50: oklch(98.5% 0 0);
|
||||||
|
--color-mauve-100: oklch(96% 0.003 325.6);
|
||||||
|
--color-mauve-200: oklch(92.2% 0.005 325.62);
|
||||||
|
--color-mauve-300: oklch(86.5% 0.012 325.68);
|
||||||
|
--color-mauve-400: oklch(71.1% 0.019 323.02);
|
||||||
|
--color-mauve-500: oklch(54.2% 0.034 322.5);
|
||||||
|
--color-mauve-600: oklch(43.5% 0.029 321.78);
|
||||||
|
--color-mauve-700: oklch(36.4% 0.029 323.89);
|
||||||
|
--color-mauve-800: oklch(26.3% 0.024 320.12);
|
||||||
|
--color-mauve-900: oklch(21.2% 0.019 322.12);
|
||||||
|
--color-mauve-950: oklch(14.5% 0.008 326);
|
||||||
|
--color-olive-50: oklch(98.8% 0.003 106.5);
|
||||||
|
--color-olive-100: oklch(96.6% 0.005 106.5);
|
||||||
|
--color-olive-200: oklch(93% 0.007 106.5);
|
||||||
|
--color-olive-300: oklch(88% 0.011 106.6);
|
||||||
|
--color-olive-400: oklch(73.7% 0.021 106.9);
|
||||||
|
--color-olive-500: oklch(58% 0.031 107.3);
|
||||||
|
--color-olive-600: oklch(46.6% 0.025 107.3);
|
||||||
|
--color-olive-700: oklch(39.4% 0.023 107.4);
|
||||||
|
--color-olive-800: oklch(28.6% 0.016 107.4);
|
||||||
|
--color-olive-900: oklch(22.8% 0.013 107.4);
|
||||||
|
--color-olive-950: oklch(15.3% 0.006 107.1);
|
||||||
|
--color-mist-50: oklch(98.7% 0.002 197.1);
|
||||||
|
--color-mist-100: oklch(96.3% 0.002 197.1);
|
||||||
|
--color-mist-200: oklch(92.5% 0.005 214.3);
|
||||||
|
--color-mist-300: oklch(87.2% 0.007 219.6);
|
||||||
|
--color-mist-400: oklch(72.3% 0.014 214.4);
|
||||||
|
--color-mist-500: oklch(56% 0.021 213.5);
|
||||||
|
--color-mist-600: oklch(45% 0.017 213.2);
|
||||||
|
--color-mist-700: oklch(37.8% 0.015 216);
|
||||||
|
--color-mist-800: oklch(27.5% 0.011 216.9);
|
||||||
|
--color-mist-900: oklch(21.8% 0.008 223.9);
|
||||||
|
--color-mist-950: oklch(14.8% 0.004 228.8);
|
||||||
|
--color-taupe-50: oklch(98.6% 0.002 67.8);
|
||||||
|
--color-taupe-100: oklch(96% 0.002 17.2);
|
||||||
|
--color-taupe-200: oklch(92.2% 0.005 34.3);
|
||||||
|
--color-taupe-300: oklch(86.8% 0.007 39.5);
|
||||||
|
--color-taupe-400: oklch(71.4% 0.014 41.2);
|
||||||
|
--color-taupe-500: oklch(54.7% 0.021 43.1);
|
||||||
|
--color-taupe-600: oklch(43.8% 0.017 39.3);
|
||||||
|
--color-taupe-700: oklch(36.7% 0.016 35.7);
|
||||||
|
--color-taupe-800: oklch(26.8% 0.011 36.5);
|
||||||
|
--color-taupe-900: oklch(21.4% 0.009 43.1);
|
||||||
|
--color-taupe-950: oklch(14.7% 0.004 49.3);
|
||||||
|
--color-black: #000;
|
||||||
|
--color-white: #fff;
|
||||||
|
--color-transparent: transparent;
|
||||||
|
|
||||||
|
--danger-bg: var(--color-red-600);
|
||||||
|
--danger-bg-hover: var(--color-red-500);
|
||||||
|
--danger-bg-active: var(--color-red-400);
|
||||||
|
--danger-bg-low: var(--color-red-100);
|
||||||
|
--danger-bg-low-hover: var(--color-red-200);
|
||||||
|
--danger-bg-low-active: var(--color-red-300);
|
||||||
|
|
||||||
|
--success-bg: var(--color-emerald-600);
|
||||||
|
--success-bg-hover: var(--color-emerald-500);
|
||||||
|
--success-bg-active: var(--color-emerald-400);
|
||||||
|
--success-bg-low: var(--color-emerald-100);
|
||||||
|
--success-bg-low-hover: var(--color-emerald-100);
|
||||||
|
--success-bg-low-active: var(--color-emerald-200);
|
||||||
|
|
||||||
|
--info-bg: var(--color-sky-600);
|
||||||
|
--info-bg-hover: var(--color-sky-500);
|
||||||
|
--info-bg-active: var(--color-sky-400);
|
||||||
|
--info-bg-low: var(--color-sky-100);
|
||||||
|
--info-bg-low-hover: var(--color-sky-200);
|
||||||
|
--info-bg-low-active: var(--color-sky-300);
|
||||||
|
|
||||||
|
--warning-bg: var(--color-yellow-600);
|
||||||
|
--warning-bg-hover: var(--color-yellow-500);
|
||||||
|
--warning-bg-active: var(--color-yellow-400);
|
||||||
|
--warning-bg-low: var(--color-yellow-100);
|
||||||
|
--warning-bg-low-hover: var(--color-yellow-200);
|
||||||
|
--warning-bg-low-active: var(--color-yellow-300);
|
||||||
|
|
||||||
|
--default-bg: var(--color-neutral-600);
|
||||||
|
--default-bg-hover: var(--color-neutral-500);
|
||||||
|
--default-bg-active: var(--color-neutral-400);
|
||||||
|
--default-bg-low: var(--color-neutral-100);
|
||||||
|
--default-bg-low-hover: var(--color-neutral-200);
|
||||||
|
--default-bg-low-active: var(--color-neutral-300);
|
||||||
|
|
||||||
|
--disabled-fg: var(--color-gray-400);
|
||||||
|
--disabled-bg: var(--color-gray-100);
|
||||||
|
--disabled-border-color: var(--color-gray-300);
|
||||||
|
|
||||||
|
--spacing: 2px;
|
||||||
|
|
||||||
|
--font-size-xs: 0.75rem;
|
||||||
|
--font-size-sm: 0.875rem;
|
||||||
|
--font-size-md: 1rem;
|
||||||
|
--font-size-lg: 1.125rem;
|
||||||
|
--font-size-xl: 1.5rem;
|
||||||
|
--font-size-2xl: 1.875rem;
|
||||||
|
|
||||||
|
--line-height-xs: 1.33;
|
||||||
|
--line-height-sm: 1.42;
|
||||||
|
--line-height-md: 1.5;
|
||||||
|
--line-height-lg: 1.55;
|
||||||
|
--line-height-xl: 1.33;
|
||||||
|
--line-height-2xl: 1.2;
|
||||||
|
|
||||||
|
--height-item-xs: 1.5rem;
|
||||||
|
--height-item-sm: 1.75rem;
|
||||||
|
--height-item-md: 2.125rem;
|
||||||
|
--height-item-lg: 2.75rem;
|
||||||
|
--height-item-xl: 4rem;
|
||||||
|
--height-item-2xl: 4rem;
|
||||||
|
|
||||||
|
--animate-spin: spin 1s linear infinite;
|
||||||
|
--animate-ping: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
|
||||||
|
--animate-pulse: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
||||||
|
--animate-bounce: bounce 1s infinite;
|
||||||
|
--animate-fade-in-down: fade-in-down 0.5s ease-out both;
|
||||||
|
--animate-fade-out-down: fade-out-down 0.5s ease-in both;
|
||||||
|
--animate-fade-in-up: fade-in-up 0.5s ease-out both;
|
||||||
|
--animate-fade-out-up: fade-out-up 0.5s ease-in both;
|
||||||
|
|
||||||
|
--radius-xs: 0.125rem;
|
||||||
|
--radius-sm: 0.25rem;
|
||||||
|
--radius-md: 0.375rem;
|
||||||
|
--radius-lg: 0.5rem;
|
||||||
|
--radius-xl: 0.75rem;
|
||||||
|
|
||||||
|
--font-sans:
|
||||||
|
ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji",
|
||||||
|
"Segoe UI Symbol", "Noto Color Emoji";
|
||||||
|
--font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
|
||||||
|
--font-mono:
|
||||||
|
ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono",
|
||||||
|
"Courier New", monospace;
|
||||||
|
|
||||||
|
--margin-xs: calc(var(--spacing) * 2);
|
||||||
|
--margin-sm: calc(var(--spacing) * 4);
|
||||||
|
--margin-md: calc(var(--spacing) * 2);
|
||||||
|
--margin-lg: calc(var(--spacing) * 2);
|
||||||
|
--margin-xl: calc(var(--spacing) * 2);
|
||||||
|
|
||||||
|
--padding-long-xs: calc(var(--spacing) * 3);
|
||||||
|
--padding-long-sm: calc(var(--spacing) * 4);
|
||||||
|
--padding-long-md: calc(var(--spacing) * 5);
|
||||||
|
--padding-long-lg: calc(var(--spacing) * 8);
|
||||||
|
--padding-long-xl: calc(var(--spacing) * 2);
|
||||||
|
|
||||||
|
--padding-xs: calc(var(--spacing) * 2);
|
||||||
|
--padding-sm: calc(var(--spacing) * 4);
|
||||||
|
--padding-md: calc(var(--spacing) * 2);
|
||||||
|
--padding-lg: calc(var(--spacing) * 2);
|
||||||
|
--padding-xl: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
37
packages/css/utility/align-content.css
Normal file
37
packages/css/utility/align-content.css
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
@layer utility {
|
||||||
|
.align-content-normal {
|
||||||
|
align-content: normal;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-content-center {
|
||||||
|
align-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-content-start {
|
||||||
|
align-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-content-end {
|
||||||
|
align-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-content-between {
|
||||||
|
align-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-content-around {
|
||||||
|
align-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-content-evenly {
|
||||||
|
align-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-content-baseline {
|
||||||
|
align-content: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-content-stretch {
|
||||||
|
align-content: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
33
packages/css/utility/align-items.css
Normal file
33
packages/css/utility/align-items.css
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
@layer utility {
|
||||||
|
.items-start {
|
||||||
|
align-items: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-end {
|
||||||
|
align-items: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-end-safe {
|
||||||
|
align-items: safe flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-center {
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-center-safe {
|
||||||
|
align-items: safe center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-baseline {
|
||||||
|
align-items: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-baseline-last {
|
||||||
|
align-items: last baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.items-stretch {
|
||||||
|
align-items: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
37
packages/css/utility/align-self.css
Normal file
37
packages/css/utility/align-self.css
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
@layer utility {
|
||||||
|
.align-self-auto {
|
||||||
|
align-self: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-start {
|
||||||
|
align-self: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-end {
|
||||||
|
align-self: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-end-safe {
|
||||||
|
align-self: safe flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-center {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-center-safe {
|
||||||
|
align-self: safe center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-stretch {
|
||||||
|
align-self: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-baseline {
|
||||||
|
align-self: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.align-self-baseline-last {
|
||||||
|
align-self: last baseline;
|
||||||
|
}
|
||||||
|
}
|
||||||
105
packages/css/utility/animate.css
vendored
Normal file
105
packages/css/utility/animate.css
vendored
Normal file
@@ -0,0 +1,105 @@
|
|||||||
|
@layer utility {
|
||||||
|
.animate-fade-in-down {
|
||||||
|
animation: var(--animate-fade-in-down);
|
||||||
|
|
||||||
|
@keyframes fade-in-down {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(0, -100%, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-fade-out-down {
|
||||||
|
animation: var(--animate-fade-out-down);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-out-down {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(0, 100%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-fade-in-up {
|
||||||
|
animation: var(--animate-fade-in-up);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-in-up {
|
||||||
|
from {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(0, 100%, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-fade-out-up {
|
||||||
|
animation: var(--animate-fade-out-up);
|
||||||
|
}
|
||||||
|
|
||||||
|
@keyframes fade-out-up {
|
||||||
|
from {
|
||||||
|
opacity: 1;
|
||||||
|
transform: translate3d(0, 0, 0);
|
||||||
|
}
|
||||||
|
to {
|
||||||
|
opacity: 0;
|
||||||
|
transform: translate3d(0, -100%, 0);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-spin {
|
||||||
|
animation: var(--animate-spin);
|
||||||
|
|
||||||
|
@keyframes spin {
|
||||||
|
to {
|
||||||
|
transform: rotate(360deg);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-ping {
|
||||||
|
animation: var(--animate-ping);
|
||||||
|
|
||||||
|
@keyframes ping {
|
||||||
|
75%,
|
||||||
|
100% {
|
||||||
|
transform: scale(2);
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-pulse {
|
||||||
|
animation: var(--animate-pulse);
|
||||||
|
|
||||||
|
@keyframes pulse {
|
||||||
|
50% {
|
||||||
|
opacity: 0.5;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-bounce {
|
||||||
|
animation: var(--animate-bounce); /* bounce 1s infinite */
|
||||||
|
|
||||||
|
@keyframes bounce {
|
||||||
|
0%,
|
||||||
|
100% {
|
||||||
|
transform: translateY(-25%);
|
||||||
|
animation-timing-function: cubic-bezier(0.8, 0, 1, 1);
|
||||||
|
}
|
||||||
|
50% {
|
||||||
|
transform: none;
|
||||||
|
animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
.animate-none {
|
||||||
|
animation: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
packages/css/utility/border-radius.css
Normal file
23
packages/css/utility/border-radius.css
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
@layer utility {
|
||||||
|
.rounded-full {
|
||||||
|
border-radius: 9999px;
|
||||||
|
}
|
||||||
|
.rounded-none {
|
||||||
|
border-radius: 0;
|
||||||
|
}
|
||||||
|
.rounded-xs {
|
||||||
|
border-radius: var(--radius-xs);
|
||||||
|
}
|
||||||
|
.rounded-sm {
|
||||||
|
border-radius: var(--radius-sm);
|
||||||
|
}
|
||||||
|
.rounded-md {
|
||||||
|
border-radius: var(--radius-md);
|
||||||
|
}
|
||||||
|
.rounded-lg {
|
||||||
|
border-radius: var(--radius-lg);
|
||||||
|
}
|
||||||
|
.rounded-xl {
|
||||||
|
border-radius: var(--radius-xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
9
packages/css/utility/box-decoration.css
Normal file
9
packages/css/utility/box-decoration.css
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
@layer utility {
|
||||||
|
.box-decoration-clone {
|
||||||
|
box-decoration-break: clone;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-decoration-slice {
|
||||||
|
box-decoration-break: slice;
|
||||||
|
}
|
||||||
|
}
|
||||||
17
packages/css/utility/box-inside.css
Normal file
17
packages/css/utility/box-inside.css
Normal file
@@ -0,0 +1,17 @@
|
|||||||
|
@layer utility {
|
||||||
|
.break-inside-auto {
|
||||||
|
break-inside: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-inside-avoid {
|
||||||
|
break-inside: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-inside-avoid-page {
|
||||||
|
break-inside: avoid-page;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-inside-avoid-column {
|
||||||
|
break-inside: avoid-column;
|
||||||
|
}
|
||||||
|
}
|
||||||
9
packages/css/utility/box-sizing.css
Normal file
9
packages/css/utility/box-sizing.css
Normal file
@@ -0,0 +1,9 @@
|
|||||||
|
@layer utility {
|
||||||
|
.box-sizing-border {
|
||||||
|
box-sizing: border-box;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box-sizing-content {
|
||||||
|
box-sizing: content-box;
|
||||||
|
}
|
||||||
|
}
|
||||||
42
packages/css/utility/brand.css
Normal file
42
packages/css/utility/brand.css
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
@layer utility {
|
||||||
|
.brand-info {
|
||||||
|
--brand-bg: var(--info-bg);
|
||||||
|
--brand-bg-hover: var(--info-bg-hover);
|
||||||
|
--brand-bg-active: var(--info-bg-active);
|
||||||
|
--brand-bg-low: var(--info-bg-low);
|
||||||
|
--brand-bg-low-hover: var(--info-bg-low-hover);
|
||||||
|
--brand-bg-low-active: var(--info-bg-low-active);
|
||||||
|
}
|
||||||
|
.brand-danger {
|
||||||
|
--brand-bg: var(--danger-bg);
|
||||||
|
--brand-bg-hover: var(--danger-bg-hover);
|
||||||
|
--brand-bg-active: var(--danger-bg-active);
|
||||||
|
--brand-bg-low: var(--danger-bg-low);
|
||||||
|
--brand-bg-low-hover: var(--danger-bg-low-hover);
|
||||||
|
--brand-bg-low-active: var(--danger-bg-low-active);
|
||||||
|
}
|
||||||
|
.brand-success {
|
||||||
|
--brand-bg: var(--success-bg);
|
||||||
|
--brand-bg-hover: var(--success-bg-hover);
|
||||||
|
--brand-bg-active: var(--success-bg-active);
|
||||||
|
--brand-bg-low: var(--success-bg-low);
|
||||||
|
--brand-bg-low-hover: var(--success-bg-low-hover);
|
||||||
|
--brand-bg-low-active: var(--success-bg-low-active);
|
||||||
|
}
|
||||||
|
.brand-warning {
|
||||||
|
--brand-bg: var(--warning-bg);
|
||||||
|
--brand-bg-hover: var(--warning-bg-hover);
|
||||||
|
--brand-bg-active: var(--warning-bg-active);
|
||||||
|
--brand-bg-low: var(--warning-bg-low);
|
||||||
|
--brand-bg-low-hover: var(--warning-bg-low-hover);
|
||||||
|
--brand-bg-low-active: var(--warning-bg-low-active);
|
||||||
|
}
|
||||||
|
.brand-default {
|
||||||
|
--brand-bg: var(--default-bg);
|
||||||
|
--brand-bg-hover: var(--default-bg-hover);
|
||||||
|
--brand-bg-active: var(--default-bg-active);
|
||||||
|
--brand-bg-low: var(--default-bg-low);
|
||||||
|
--brand-bg-low-hover: var(--default-bg-low-hover);
|
||||||
|
--brand-bg-low-active: var(--default-bg-low-active);
|
||||||
|
}
|
||||||
|
}
|
||||||
33
packages/css/utility/break-after.css
Normal file
33
packages/css/utility/break-after.css
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
@layer utility {
|
||||||
|
.break-after-auto {
|
||||||
|
break-after: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-after-avoid {
|
||||||
|
break-after: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-after-all {
|
||||||
|
break-after: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-after-avoid-page {
|
||||||
|
break-after: avoid-page;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-after-page {
|
||||||
|
break-after: page;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-after-left {
|
||||||
|
break-after: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-after-right {
|
||||||
|
break-after: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-after-column {
|
||||||
|
break-after: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
33
packages/css/utility/break-before.css
Normal file
33
packages/css/utility/break-before.css
Normal file
@@ -0,0 +1,33 @@
|
|||||||
|
@layer utility {
|
||||||
|
.break-before-auto {
|
||||||
|
break-before: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-before-avoid {
|
||||||
|
break-before: avoid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-before-all {
|
||||||
|
break-before: all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-before-avoid-page {
|
||||||
|
break-before: avoid-page;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-before-page {
|
||||||
|
break-before: page;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-before-left {
|
||||||
|
break-before: left;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-before-right {
|
||||||
|
break-before: right;
|
||||||
|
}
|
||||||
|
|
||||||
|
.break-before-column {
|
||||||
|
break-before: column;
|
||||||
|
}
|
||||||
|
}
|
||||||
111
packages/css/utility/cursor.css
Normal file
111
packages/css/utility/cursor.css
Normal file
@@ -0,0 +1,111 @@
|
|||||||
|
@layer utility {
|
||||||
|
/* ===== 基础光标 ===== */
|
||||||
|
.cursor-auto {
|
||||||
|
cursor: auto;
|
||||||
|
}
|
||||||
|
.cursor-default {
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
.cursor-pointer {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
.cursor-wait {
|
||||||
|
cursor: wait;
|
||||||
|
}
|
||||||
|
.cursor-text {
|
||||||
|
cursor: text;
|
||||||
|
}
|
||||||
|
.cursor-move {
|
||||||
|
cursor: move;
|
||||||
|
}
|
||||||
|
.cursor-help {
|
||||||
|
cursor: help;
|
||||||
|
}
|
||||||
|
.cursor-not-allowed {
|
||||||
|
cursor: not-allowed;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 拖拽 / 抓取 ===== */
|
||||||
|
.cursor-grab {
|
||||||
|
cursor: grab;
|
||||||
|
}
|
||||||
|
.cursor-grabbing {
|
||||||
|
cursor: grabbing;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 调整大小（通用 & 方向）===== */
|
||||||
|
.cursor-resize {
|
||||||
|
cursor: resize;
|
||||||
|
}
|
||||||
|
.cursor-ew-resize {
|
||||||
|
cursor: ew-resize;
|
||||||
|
}
|
||||||
|
.cursor-ns-resize {
|
||||||
|
cursor: ns-resize;
|
||||||
|
}
|
||||||
|
.cursor-nesw-resize {
|
||||||
|
cursor: nesw-resize;
|
||||||
|
}
|
||||||
|
.cursor-nwse-resize {
|
||||||
|
cursor: nwse-resize;
|
||||||
|
}
|
||||||
|
.cursor-col-resize {
|
||||||
|
cursor: col-resize;
|
||||||
|
}
|
||||||
|
.cursor-row-resize {
|
||||||
|
cursor: row-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
.cursor-n-resize {
|
||||||
|
cursor: n-resize;
|
||||||
|
}
|
||||||
|
.cursor-e-resize {
|
||||||
|
cursor: e-resize;
|
||||||
|
}
|
||||||
|
.cursor-s-resize {
|
||||||
|
cursor: s-resize;
|
||||||
|
}
|
||||||
|
.cursor-w-resize {
|
||||||
|
cursor: w-resize;
|
||||||
|
}
|
||||||
|
.cursor-ne-resize {
|
||||||
|
cursor: ne-resize;
|
||||||
|
}
|
||||||
|
.cursor-nw-resize {
|
||||||
|
cursor: nw-resize;
|
||||||
|
}
|
||||||
|
.cursor-se-resize {
|
||||||
|
cursor: se-resize;
|
||||||
|
}
|
||||||
|
.cursor-sw-resize {
|
||||||
|
cursor: sw-resize;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 视觉反馈 ===== */
|
||||||
|
.cursor-crosshair {
|
||||||
|
cursor: crosshair;
|
||||||
|
}
|
||||||
|
.cursor-progress {
|
||||||
|
cursor: progress;
|
||||||
|
}
|
||||||
|
.cursor-no-drop {
|
||||||
|
cursor: no-drop;
|
||||||
|
}
|
||||||
|
.cursor-vertical-text {
|
||||||
|
cursor: vertical-text;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* ===== 现代 / 扩展光标 ===== */
|
||||||
|
.cursor-zoom-in {
|
||||||
|
cursor: zoom-in;
|
||||||
|
}
|
||||||
|
.cursor-zoom-out {
|
||||||
|
cursor: zoom-out;
|
||||||
|
}
|
||||||
|
.cursor-alias {
|
||||||
|
cursor: alias;
|
||||||
|
}
|
||||||
|
.cursor-copy {
|
||||||
|
cursor: copy;
|
||||||
|
}
|
||||||
|
}
|
||||||
90
packages/css/utility/display.css
Normal file
90
packages/css/utility/display.css
Normal file
@@ -0,0 +1,90 @@
|
|||||||
|
@layer utility {
|
||||||
|
/* 基础 display */
|
||||||
|
.display-inline {
|
||||||
|
display: inline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-block {
|
||||||
|
display: block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-inline-block {
|
||||||
|
display: inline-block;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-flow-root {
|
||||||
|
display: flow-root;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-contents {
|
||||||
|
display: contents;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-none {
|
||||||
|
display: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Flex */
|
||||||
|
.display-flex {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-inline-flex {
|
||||||
|
display: inline-flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Grid */
|
||||||
|
.display-grid {
|
||||||
|
display: grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-inline-grid {
|
||||||
|
display: inline-grid;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* Table */
|
||||||
|
.display-table {
|
||||||
|
display: table;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-inline-table {
|
||||||
|
display: inline-table;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-table-caption {
|
||||||
|
display: table-caption;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-table-cell {
|
||||||
|
display: table-cell;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-table-column {
|
||||||
|
display: table-column;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-table-column-group {
|
||||||
|
display: table-column-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-table-footer-group {
|
||||||
|
display: table-footer-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-table-header-group {
|
||||||
|
display: table-header-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-table-row-group {
|
||||||
|
display: table-row-group;
|
||||||
|
}
|
||||||
|
|
||||||
|
.display-table-row {
|
||||||
|
display: table-row;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* List */
|
||||||
|
.display-list-item {
|
||||||
|
display: list-item;
|
||||||
|
}
|
||||||
|
}
|
||||||
14
packages/css/utility/flex-direction.css
Normal file
14
packages/css/utility/flex-direction.css
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
@layer utility {
|
||||||
|
.flex-direction-row {
|
||||||
|
flex-direction: row;
|
||||||
|
}
|
||||||
|
.flex-direction-row-reverse {
|
||||||
|
flex-direction: row-reverse;
|
||||||
|
}
|
||||||
|
.flex-direction-col {
|
||||||
|
flex-direction: column;
|
||||||
|
}
|
||||||
|
.flex-direction-col-reverse {
|
||||||
|
flex-direction: column-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
13
packages/css/utility/flex-wrap.css
Normal file
13
packages/css/utility/flex-wrap.css
Normal file
@@ -0,0 +1,13 @@
|
|||||||
|
@layer utility {
|
||||||
|
.flex-wrap-nowrap {
|
||||||
|
flex-wrap: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-wrap-wrap {
|
||||||
|
flex-wrap: wrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.flex-wrap-wrap-reverse {
|
||||||
|
flex-wrap: wrap-reverse;
|
||||||
|
}
|
||||||
|
}
|
||||||
11
packages/css/utility/font-family.css
Normal file
11
packages/css/utility/font-family.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
@layer utility {
|
||||||
|
.font-family-sans {
|
||||||
|
font-family: var(--font-sans);
|
||||||
|
}
|
||||||
|
.font-family-serif {
|
||||||
|
font-family: var(--font-serif);
|
||||||
|
}
|
||||||
|
.font-family-mono {
|
||||||
|
font-family: var(--font-mono);
|
||||||
|
}
|
||||||
|
}
|
||||||
38
packages/css/utility/font-size.css
Normal file
38
packages/css/utility/font-size.css
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
@layer utility {
|
||||||
|
.text-xs {
|
||||||
|
/* 12px 支持rem字体放大 */
|
||||||
|
font-size: var(--font-size-xs);
|
||||||
|
/* 不能超过 16px */
|
||||||
|
line-height: var(--line-height-xs);
|
||||||
|
}
|
||||||
|
.text-sm {
|
||||||
|
/* 14px 支持rem字体放大 */
|
||||||
|
font-size: var(--font-size-sm);
|
||||||
|
/* 不能超过 20px */
|
||||||
|
line-height: var(--line-height-sm);
|
||||||
|
}
|
||||||
|
.text-md {
|
||||||
|
/* 16px 支持rem字体放大 */
|
||||||
|
font-size: var(--font-size-md);
|
||||||
|
/* 不能超过 24px */
|
||||||
|
line-height: var(--line-height-md);
|
||||||
|
}
|
||||||
|
.text-lg {
|
||||||
|
/* 18px 支持rem字体放大 */
|
||||||
|
font-size: var(--font-size-lg);
|
||||||
|
/* 不能超过 28px */
|
||||||
|
line-height: var(--line-height-lg);
|
||||||
|
}
|
||||||
|
.text-xl {
|
||||||
|
/* 24px 支持rem字体放大 */
|
||||||
|
font-size: var(--font-size-2xl);
|
||||||
|
/* 不能超过 32px */
|
||||||
|
line-height: var(--line-height-2xl);
|
||||||
|
}
|
||||||
|
.text-2xl {
|
||||||
|
/* 30px 支持rem字体放大 */
|
||||||
|
font-size: var(--font-size-2xl);
|
||||||
|
/* 不能超过 36px */
|
||||||
|
line-height: var(--line-height-2xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
20
packages/css/utility/font-weight.css
Normal file
20
packages/css/utility/font-weight.css
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
@layer utility {
|
||||||
|
.font-weight-light {
|
||||||
|
font-weight: 300;
|
||||||
|
}
|
||||||
|
.font-weight-normal {
|
||||||
|
font-weight: 400;
|
||||||
|
}
|
||||||
|
.font-weight-extranormal {
|
||||||
|
font-weight: 500;
|
||||||
|
}
|
||||||
|
.font-weight-semibold {
|
||||||
|
font-weight: 600;
|
||||||
|
}
|
||||||
|
.font-weight-bold {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
.font-weight-extrabold {
|
||||||
|
font-weight: 700;
|
||||||
|
}
|
||||||
|
}
|
||||||
20
packages/css/utility/gap.css
Normal file
20
packages/css/utility/gap.css
Normal file
@@ -0,0 +1,20 @@
|
|||||||
|
@layer utility {
|
||||||
|
.gap-xs {
|
||||||
|
/* 2px */
|
||||||
|
gap: calc(var(--spacing));
|
||||||
|
}
|
||||||
|
.gap-sm {
|
||||||
|
/* 4px */
|
||||||
|
gap: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
.gap-md {
|
||||||
|
/* 6px */
|
||||||
|
gap: calc(var(--spacing) * 3);
|
||||||
|
}
|
||||||
|
.gap-lg {
|
||||||
|
gap: calc(var(--spacing) * 2);
|
||||||
|
}
|
||||||
|
.gap-xl {
|
||||||
|
gap: calc(var(--spacing) * 2.5);
|
||||||
|
}
|
||||||
|
}
|
||||||
45
packages/css/utility/height.css
Normal file
45
packages/css/utility/height.css
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
@layer utility {
|
||||||
|
.h-item-xs {
|
||||||
|
/* 24px minimum touch size for text line */
|
||||||
|
height: var(--height-item-xs);
|
||||||
|
}
|
||||||
|
.h-item-sm {
|
||||||
|
/* 28px save space for most used size */
|
||||||
|
height: var(--height-item-sm);
|
||||||
|
}
|
||||||
|
.h-item-md {
|
||||||
|
/* 34px most used size */
|
||||||
|
height: var(--height-item-md);
|
||||||
|
}
|
||||||
|
.h-item-lg {
|
||||||
|
/* 44px maximum touch size without waste */
|
||||||
|
height: var(--height-item-lg);
|
||||||
|
}
|
||||||
|
.h-item-xl {
|
||||||
|
/* 64px navigation bar */
|
||||||
|
height: var(--height-item-xl);
|
||||||
|
}
|
||||||
|
.h-item-2xl {
|
||||||
|
/* 64px navigation bar */
|
||||||
|
height: var(--height-item-2xl);
|
||||||
|
}
|
||||||
|
/* -------------- */
|
||||||
|
.h-inline-xs {
|
||||||
|
height: calc(var(--font-size-xs) * var(--line-height-xs));
|
||||||
|
}
|
||||||
|
.h-inline-sm {
|
||||||
|
height: calc(var(--font-size-sm) * var(--line-height-sm));
|
||||||
|
}
|
||||||
|
.h-inline-md {
|
||||||
|
height: calc(var(--font-size-md) * var(--line-height-md));
|
||||||
|
}
|
||||||
|
.h-inline-lg {
|
||||||
|
height: calc(var(--font-size-lg) * var(--line-height-lg));
|
||||||
|
}
|
||||||
|
.h-inline-xl {
|
||||||
|
height: calc(var(--font-size-xl) * var(--line-height-xl));
|
||||||
|
}
|
||||||
|
.h-inline-2xl {
|
||||||
|
height: calc(var(--font-size-2xl) * var(--line-height-2xl));
|
||||||
|
}
|
||||||
|
}
|
||||||
45
packages/css/utility/justify-content.css
Normal file
45
packages/css/utility/justify-content.css
Normal file
@@ -0,0 +1,45 @@
|
|||||||
|
@layer utility {
|
||||||
|
.justify-start {
|
||||||
|
justify-content: flex-start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-end {
|
||||||
|
justify-content: flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-end-safe {
|
||||||
|
justify-content: safe flex-end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-center {
|
||||||
|
justify-content: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-center-safe {
|
||||||
|
justify-content: safe center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-between {
|
||||||
|
justify-content: space-between;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-around {
|
||||||
|
justify-content: space-around;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-evenly {
|
||||||
|
justify-content: space-evenly;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-stretch {
|
||||||
|
justify-content: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-baseline {
|
||||||
|
justify-content: baseline;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-normal {
|
||||||
|
justify-content: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
29
packages/css/utility/justify-items.css
Normal file
29
packages/css/utility/justify-items.css
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
@layer utility {
|
||||||
|
.justify-items-start {
|
||||||
|
justify-items: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-items-end {
|
||||||
|
justify-items: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-items-end-safe {
|
||||||
|
justify-items: safe end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-items-center {
|
||||||
|
justify-items: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-items-center-safe {
|
||||||
|
justify-items: safe center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-items-stretch {
|
||||||
|
justify-items: stretch;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-items-normal {
|
||||||
|
justify-items: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
29
packages/css/utility/justify-self.css
Normal file
29
packages/css/utility/justify-self.css
Normal file
@@ -0,0 +1,29 @@
|
|||||||
|
@layer utility {
|
||||||
|
.justify-self-auto {
|
||||||
|
justify-self: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-self-start {
|
||||||
|
justify-self: start;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-self-center {
|
||||||
|
justify-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-self-center-safe {
|
||||||
|
justify-self: safe center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-self-end {
|
||||||
|
justify-self: end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-self-end-safe {
|
||||||
|
justify-self: safe end;
|
||||||
|
}
|
||||||
|
|
||||||
|
.justify-self-stretch {
|
||||||
|
justify-self: stretch;
|
||||||
|
}
|
||||||
|
}
|
||||||
58
packages/css/utility/margin-block.css
Normal file
58
packages/css/utility/margin-block.css
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
@layer utility {
|
||||||
|
.my-e-none {
|
||||||
|
margin-block-end: 0;
|
||||||
|
}
|
||||||
|
.my-e-xs {
|
||||||
|
margin-block-end: var(--margin-xs);
|
||||||
|
}
|
||||||
|
.my-e-sm {
|
||||||
|
margin-block-end: var(--margin-sm);
|
||||||
|
}
|
||||||
|
.my-e-md {
|
||||||
|
margin-block-end: var(--margin-md);
|
||||||
|
}
|
||||||
|
.my-e-lg {
|
||||||
|
margin-block-end: var(--margin-lg);
|
||||||
|
}
|
||||||
|
.my-e-xl {
|
||||||
|
margin-block-end: var(--margin-xl);
|
||||||
|
}
|
||||||
|
/* ------------------ */
|
||||||
|
.my-s-none {
|
||||||
|
margin-block-start: 0;
|
||||||
|
}
|
||||||
|
.my-s-xs {
|
||||||
|
margin-block-start: var(--margin-xs);
|
||||||
|
}
|
||||||
|
.my-s-sm {
|
||||||
|
margin-block-start: var(--margin-sm);
|
||||||
|
}
|
||||||
|
.my-s-md {
|
||||||
|
margin-block-start: var(--margin-md);
|
||||||
|
}
|
||||||
|
.my-s-lg {
|
||||||
|
margin-block-start: var(--margin-lg);
|
||||||
|
}
|
||||||
|
.my-s-xl {
|
||||||
|
margin-block-start: var(--margin-xl);
|
||||||
|
}
|
||||||
|
/* --------------------- */
|
||||||
|
.my-none {
|
||||||
|
margin-block: 0;
|
||||||
|
}
|
||||||
|
.my-xs {
|
||||||
|
margin-block: var(--margin-xs);
|
||||||
|
}
|
||||||
|
.my-sm {
|
||||||
|
margin-block: var(--margin-sm);
|
||||||
|
}
|
||||||
|
.my-md {
|
||||||
|
margin-block: var(--margin-md);
|
||||||
|
}
|
||||||
|
.my-lg {
|
||||||
|
margin-block: var(--margin-lg);
|
||||||
|
}
|
||||||
|
.my-xl {
|
||||||
|
margin-block: var(--margin-xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
58
packages/css/utility/margin-inline.css
Normal file
58
packages/css/utility/margin-inline.css
Normal file
@@ -0,0 +1,58 @@
|
|||||||
|
@layer utility {
|
||||||
|
.mx-e-none {
|
||||||
|
margin-inline-end: 0;
|
||||||
|
}
|
||||||
|
.mx-e-xs {
|
||||||
|
margin-inline-end: var(--margin-xs);
|
||||||
|
}
|
||||||
|
.mx-e-sm {
|
||||||
|
margin-inline-end: var(--margin-sm);
|
||||||
|
}
|
||||||
|
.mx-e-md {
|
||||||
|
margin-inline-end: var(--margin-md);
|
||||||
|
}
|
||||||
|
.mx-e-lg {
|
||||||
|
margin-inline-end: var(--margin-lg);
|
||||||
|
}
|
||||||
|
.mx-e-xl {
|
||||||
|
margin-inline-end: var(--margin-xl);
|
||||||
|
}
|
||||||
|
/* ------------------ */
|
||||||
|
.mx-s-none {
|
||||||
|
margin-inline-start: 0;
|
||||||
|
}
|
||||||
|
.mx-s-xs {
|
||||||
|
margin-inline-start: var(--margin-xs);
|
||||||
|
}
|
||||||
|
.mx-s-sm {
|
||||||
|
margin-inline-start: var(--margin-sm);
|
||||||
|
}
|
||||||
|
.mx-s-md {
|
||||||
|
margin-inline-start: var(--margin-md);
|
||||||
|
}
|
||||||
|
.mx-s-lg {
|
||||||
|
margin-inline-start: var(--margin-lg);
|
||||||
|
}
|
||||||
|
.mx-s-xl {
|
||||||
|
margin-inline-start: var(--margin-xl);
|
||||||
|
}
|
||||||
|
/* --------------------- */
|
||||||
|
.mx-none {
|
||||||
|
margin-inline: 0;
|
||||||
|
}
|
||||||
|
.mx-xs {
|
||||||
|
margin-inline: var(--margin-xs);
|
||||||
|
}
|
||||||
|
.mx-sm {
|
||||||
|
margin-inline: var(--margin-sm);
|
||||||
|
}
|
||||||
|
.mx-md {
|
||||||
|
margin-inline: var(--margin-md);
|
||||||
|
}
|
||||||
|
.mx-lg {
|
||||||
|
margin-inline: var(--margin-lg);
|
||||||
|
}
|
||||||
|
.mx-xl {
|
||||||
|
margin-inline: var(--margin-xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
61
packages/css/utility/overflow.css
Normal file
61
packages/css/utility/overflow.css
Normal file
@@ -0,0 +1,61 @@
|
|||||||
|
@layer utility {
|
||||||
|
.overflow-auto {
|
||||||
|
overflow: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-hidden {
|
||||||
|
overflow: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-clip {
|
||||||
|
overflow: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-visible {
|
||||||
|
overflow: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-scroll {
|
||||||
|
overflow: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-x-auto {
|
||||||
|
overflow-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-y-auto {
|
||||||
|
overflow-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-x-hidden {
|
||||||
|
overflow-x: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-y-hidden {
|
||||||
|
overflow-y: hidden;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-x-clip {
|
||||||
|
overflow-x: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-y-clip {
|
||||||
|
overflow-y: clip;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-x-visible {
|
||||||
|
overflow-x: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-y-visible {
|
||||||
|
overflow-y: visible;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-x-scroll {
|
||||||
|
overflow-x: scroll;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overflow-y-scroll {
|
||||||
|
overflow-y: scroll;
|
||||||
|
}
|
||||||
|
}
|
||||||
37
packages/css/utility/overscroll-behavior.css
Normal file
37
packages/css/utility/overscroll-behavior.css
Normal file
@@ -0,0 +1,37 @@
|
|||||||
|
@layer utility {
|
||||||
|
.overscroll-auto {
|
||||||
|
overscroll-behavior: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overscroll-contain {
|
||||||
|
overscroll-behavior: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overscroll-none {
|
||||||
|
overscroll-behavior: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overscroll-x-auto {
|
||||||
|
overscroll-behavior-x: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overscroll-x-contain {
|
||||||
|
overscroll-behavior-x: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overscroll-x-none {
|
||||||
|
overscroll-behavior-x: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overscroll-y-auto {
|
||||||
|
overscroll-behavior-y: auto;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overscroll-y-contain {
|
||||||
|
overscroll-behavior-y: contain;
|
||||||
|
}
|
||||||
|
|
||||||
|
.overscroll-y-none {
|
||||||
|
overscroll-behavior-y: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
21
packages/css/utility/padding-long.css
Normal file
21
packages/css/utility/padding-long.css
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
@layer utility {
|
||||||
|
.px-long-xs {
|
||||||
|
/* 6px */
|
||||||
|
padding-inline: var(--padding-long-xs);
|
||||||
|
}
|
||||||
|
.px-long-sm {
|
||||||
|
/* 8px */
|
||||||
|
padding-inline: var(--padding-long-sm);
|
||||||
|
}
|
||||||
|
.px-long-md {
|
||||||
|
/* 10px */
|
||||||
|
padding-inline: var(--padding-long-md);
|
||||||
|
}
|
||||||
|
.px-long-lg {
|
||||||
|
/* 16px */
|
||||||
|
padding-inline: var(--padding-long-lg);
|
||||||
|
}
|
||||||
|
.px-long-xl {
|
||||||
|
padding-inline: var(--padding-long-xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
43
packages/css/utility/padding-short.css
Normal file
43
packages/css/utility/padding-short.css
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
@layer utility {
|
||||||
|
.px-none {
|
||||||
|
padding-inline: 0px;
|
||||||
|
}
|
||||||
|
.px-xs {
|
||||||
|
/* 6px */
|
||||||
|
padding-inline: var(--padding-xs);
|
||||||
|
}
|
||||||
|
.px-sm {
|
||||||
|
/* 8px */
|
||||||
|
padding-inline: var(--padding-sm);
|
||||||
|
}
|
||||||
|
.px-md {
|
||||||
|
/* 10px */
|
||||||
|
padding-inline: var(--padding-md);
|
||||||
|
}
|
||||||
|
.px-lg {
|
||||||
|
/* 16px */
|
||||||
|
padding-inline: var(--padding-lg);
|
||||||
|
}
|
||||||
|
.px-xl {
|
||||||
|
padding-inline: var(--padding-xl);
|
||||||
|
}
|
||||||
|
/* ------------------------ */
|
||||||
|
.py-none {
|
||||||
|
padding-block: 0px;
|
||||||
|
}
|
||||||
|
.py-xs {
|
||||||
|
padding-block: var(--padding-xs);
|
||||||
|
}
|
||||||
|
.py-sm {
|
||||||
|
padding-block: var(--padding-sm);
|
||||||
|
}
|
||||||
|
.py-md {
|
||||||
|
padding-block: var(--padding-md);
|
||||||
|
}
|
||||||
|
.py-lg {
|
||||||
|
padding-block: var(--padding-lg);
|
||||||
|
}
|
||||||
|
.py-xl {
|
||||||
|
padding-block: var(--padding-xl);
|
||||||
|
}
|
||||||
|
}
|
||||||
21
packages/css/utility/position.css
Normal file
21
packages/css/utility/position.css
Normal file
@@ -0,0 +1,21 @@
|
|||||||
|
@layer utility {
|
||||||
|
.position-static {
|
||||||
|
position: static;
|
||||||
|
}
|
||||||
|
|
||||||
|
.position-fixed {
|
||||||
|
position: fixed;
|
||||||
|
}
|
||||||
|
|
||||||
|
.position-absolute {
|
||||||
|
position: absolute;
|
||||||
|
}
|
||||||
|
|
||||||
|
.position-relative {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
|
||||||
|
.position-sticky {
|
||||||
|
position: sticky;
|
||||||
|
}
|
||||||
|
}
|
||||||
23
packages/css/utility/screen-reader.css
Normal file
23
packages/css/utility/screen-reader.css
Normal file
@@ -0,0 +1,23 @@
|
|||||||
|
@layer utility {
|
||||||
|
.sr-only {
|
||||||
|
position: absolute;
|
||||||
|
width: 1px;
|
||||||
|
height: 1px;
|
||||||
|
padding: 0;
|
||||||
|
margin: -1px;
|
||||||
|
overflow: hidden;
|
||||||
|
clip-path: inset(50%);
|
||||||
|
white-space: nowrap;
|
||||||
|
border-width: 0;
|
||||||
|
}
|
||||||
|
.sr-only-cancel {
|
||||||
|
position: static;
|
||||||
|
width: auto;
|
||||||
|
height: auto;
|
||||||
|
padding: 0;
|
||||||
|
margin: 0;
|
||||||
|
overflow: visible;
|
||||||
|
clip-path: none;
|
||||||
|
white-space: normal;
|
||||||
|
}
|
||||||
|
}
|
||||||
11
packages/css/utility/theme.css
Normal file
11
packages/css/utility/theme.css
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
@layer utility {
|
||||||
|
.theme-light {
|
||||||
|
--base-fg: var(--color-gray-950);
|
||||||
|
--base-bg: var(--color-white);
|
||||||
|
}
|
||||||
|
|
||||||
|
.theme-dark {
|
||||||
|
--base-fg: var(--color-gray-50);
|
||||||
|
--base-bg: var(--color-black);
|
||||||
|
}
|
||||||
|
}
|
||||||
38
packages/css/utility/width.css
Normal file
38
packages/css/utility/width.css
Normal file
@@ -0,0 +1,38 @@
|
|||||||
|
@layer utility {
|
||||||
|
.w-item-xs {
|
||||||
|
/* 24px minimum touch size for text line */
|
||||||
|
width: var(--height-item-xs);
|
||||||
|
}
|
||||||
|
.w-item-sm {
|
||||||
|
/* 30px save space for most used size */
|
||||||
|
width: var(--height-item-sm);
|
||||||
|
}
|
||||||
|
.w-item-md {
|
||||||
|
/* 34px most used size */
|
||||||
|
width: var(--height-item-lg);
|
||||||
|
}
|
||||||
|
.w-item-lg {
|
||||||
|
/* 44px maximum touch size without waste */
|
||||||
|
width: var(--height-item-lg);
|
||||||
|
}
|
||||||
|
.w-item-xl {
|
||||||
|
/* 64px navigation bar */
|
||||||
|
width: var(--height-item-xl);
|
||||||
|
}
|
||||||
|
/* ---------------------------------------------------- */
|
||||||
|
.w-inline-xs {
|
||||||
|
width: calc(var(--font-size-xs) * var(--line-height-xs));
|
||||||
|
}
|
||||||
|
.w-inline-sm {
|
||||||
|
width: calc(var(--font-size-sm) * var(--line-height-sm));
|
||||||
|
}
|
||||||
|
.w-inline-md {
|
||||||
|
width: calc(var(--font-size-md) * var(--line-height-md));
|
||||||
|
}
|
||||||
|
.w-inline-lg {
|
||||||
|
width: calc(var(--font-size-lg) * var(--line-height-lg));
|
||||||
|
}
|
||||||
|
.w-inline-xl {
|
||||||
|
width: calc(var(--font-size-xl) * var(--line-height-xl));
|
||||||
|
}
|
||||||
|
}
|
||||||
43
packages/css/utility/z-index.css
Normal file
43
packages/css/utility/z-index.css
Normal file
@@ -0,0 +1,43 @@
|
|||||||
|
@layer utility {
|
||||||
|
/* 自动 & 零 */
|
||||||
|
.z-auto {
|
||||||
|
z-index: auto;
|
||||||
|
}
|
||||||
|
.z-0 {
|
||||||
|
z-index: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 正值 */
|
||||||
|
.z-10 {
|
||||||
|
z-index: 10;
|
||||||
|
}
|
||||||
|
.z-20 {
|
||||||
|
z-index: 20;
|
||||||
|
}
|
||||||
|
.z-30 {
|
||||||
|
z-index: 30;
|
||||||
|
}
|
||||||
|
.z-40 {
|
||||||
|
z-index: 40;
|
||||||
|
}
|
||||||
|
.z-50 {
|
||||||
|
z-index: 50;
|
||||||
|
}
|
||||||
|
|
||||||
|
/* 负值（negative） */
|
||||||
|
.z-n-10 {
|
||||||
|
z-index: -10;
|
||||||
|
}
|
||||||
|
.z-n-20 {
|
||||||
|
z-index: -20;
|
||||||
|
}
|
||||||
|
.z-n-30 {
|
||||||
|
z-index: -30;
|
||||||
|
}
|
||||||
|
.z-n-40 {
|
||||||
|
z-index: -40;
|
||||||
|
}
|
||||||
|
.z-n-50 {
|
||||||
|
z-index: -50;
|
||||||
|
}
|
||||||
|
}
|
||||||
42
packages/css/utils/cpm.ts
Normal file
42
packages/css/utils/cpm.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
import { defaultPrefixList } from "./prefix-list";
|
||||||
|
|
||||||
|
function prefixParce(cls: string): { prefix: string; rest: string } {
|
||||||
|
const index = cls.indexOf("-");
|
||||||
|
if (index === -1) return { prefix: "", rest: cls };
|
||||||
|
const prefix = cls.slice(0, index);
|
||||||
|
const rest = cls.slice(index + 1);
|
||||||
|
return { prefix, rest };
|
||||||
|
}
|
||||||
|
|
||||||
|
export function cpm(
|
||||||
|
options?: { externalPrefixList?: string[] },
|
||||||
|
...classes: (string | string[])[]
|
||||||
|
): string {
|
||||||
|
const map = new Map<string, string>();
|
||||||
|
const mergedPrefixList: string[] = [
|
||||||
|
...new Set([...(options?.externalPrefixList ?? []), ...defaultPrefixList]),
|
||||||
|
];
|
||||||
|
|
||||||
|
classes.forEach((item) => {
|
||||||
|
if (Array.isArray(item)) {
|
||||||
|
item.forEach((i) => {
|
||||||
|
const { prefix, rest } = prefixParce(i);
|
||||||
|
if (mergedPrefixList.includes(prefix)) {
|
||||||
|
map.set(prefix, rest);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
if (typeof item === "string") {
|
||||||
|
const { prefix, rest } = prefixParce(item);
|
||||||
|
if (mergedPrefixList.includes(prefix)) {
|
||||||
|
map.set(prefix, rest);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return Array.from(map.entries())
|
||||||
|
.map(([prefix, rest]) => `${prefix}-${rest}`)
|
||||||
|
.join(" ");
|
||||||
|
}
|
||||||
1
packages/css/utils/cvr.ts
Normal file
1
packages/css/utils/cvr.ts
Normal file
@@ -0,0 +1 @@
|
|||||||
|
export function cvr() {}
|
||||||
42
packages/css/utils/prefix-list.ts
Normal file
42
packages/css/utils/prefix-list.ts
Normal file
@@ -0,0 +1,42 @@
|
|||||||
|
export const defaultPrefixList = [
|
||||||
|
"align-content",
|
||||||
|
"items",
|
||||||
|
"align-self",
|
||||||
|
"animate",
|
||||||
|
"rounded",
|
||||||
|
"box-decoration",
|
||||||
|
"break-inside",
|
||||||
|
"box-sizing",
|
||||||
|
"brand",
|
||||||
|
"break-after",
|
||||||
|
"break-before",
|
||||||
|
"cursor",
|
||||||
|
"display",
|
||||||
|
"flex-direction",
|
||||||
|
"flex-wrap",
|
||||||
|
"font-family",
|
||||||
|
"font-weight",
|
||||||
|
"text",
|
||||||
|
"gap",
|
||||||
|
"h",
|
||||||
|
"justify",
|
||||||
|
"justify-items",
|
||||||
|
"justify-self",
|
||||||
|
"mx",
|
||||||
|
"my",
|
||||||
|
"px",
|
||||||
|
"py",
|
||||||
|
"overflow",
|
||||||
|
"overscroll",
|
||||||
|
"position",
|
||||||
|
"sr",
|
||||||
|
"theme",
|
||||||
|
"w",
|
||||||
|
"z",
|
||||||
|
];
|
||||||
|
|
||||||
|
// map 里面 key 是 prefix，value 是完整 class。
|
||||||
|
// prefix 用正则来获取，先检测是否包含前缀，再检测这个前缀是否在开头，再检测前缀后面是否跟着“-”（就怕匹配到首字母）
|
||||||
|
// 用正则套壳，花括号注入前缀。正则要求1，在开头，在尾部跟着“-”或者“没有其他字符”
|
||||||
|
// const reg = new RegExp(`^${prefix}(?:-|$)`);
|
||||||
|
// class如果一次匹配2个prefix，那么就采用较长的那个prefix，因为这种情况肯定是“较短子字符串”的副作用
|
||||||
14
packages/ui-web-tw/.vscode/settings.json
vendored
Normal file
14
packages/ui-web-tw/.vscode/settings.json
vendored
Normal file
@@ -0,0 +1,14 @@
|
|||||||
|
{
|
||||||
|
"json.schemas": [
|
||||||
|
{
|
||||||
|
"fileMatch": ["/tsconfig.build.json", "/tsconfig.base.json"],
|
||||||
|
"schema": {}
|
||||||
|
}
|
||||||
|
],
|
||||||
|
|
||||||
|
"files.associations": {
|
||||||
|
"*.css": "tailwindcss"
|
||||||
|
},
|
||||||
|
|
||||||
|
"extensions.disabledExtensions": ["vunguyentuan.vscode-css-variables"]
|
||||||
|
}
|
||||||
@@ -1,5 +1,5 @@
|
|||||||
{
|
{
|
||||||
"name": "@defgov/ui-web",
|
"name": "@defgov/ui-web-tw",
|
||||||
"version": "0.0.0",
|
"version": "0.0.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"type": "module",
|
"type": "module",
|
||||||
@@ -29,6 +29,7 @@
|
|||||||
"build": "pnpm run gen-index && tsc -p tsconfig.build.json && vite build"
|
"build": "pnpm run gen-index && tsc -p tsconfig.build.json && vite build"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
"@rollup/plugin-typescript": "^12.3.0",
|
||||||
"@tailwindcss/vite": "^4.2.4",
|
"@tailwindcss/vite": "^4.2.4",
|
||||||
"@types/node": "^25.6.0",
|
"@types/node": "^25.6.0",
|
||||||
"@types/react": "^19.2.14",
|
"@types/react": "^19.2.14",
|
||||||
@@ -38,7 +39,7 @@
|
|||||||
"ts-node": "^10.9.2",
|
"ts-node": "^10.9.2",
|
||||||
"typescript": "~6.0.3",
|
"typescript": "~6.0.3",
|
||||||
"vite": "~7.3.2",
|
"vite": "~7.3.2",
|
||||||
"vite-plugin-dts": "^4.5.4"
|
"vite-plugin-dts": "^5.0.0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@base-ui/react": "^1.4.1",
|
"@base-ui/react": "^1.4.1",
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
import * as BUI from "@base-ui/react";
|
import * as BUI from "@base-ui/react";
|
||||||
import type { ComponentProps } from "react";
|
import type { ComponentProps } from "react";
|
||||||
import { CommonProps } from "../../common/CommonProps";
|
import { type CommonProps } from "../../common/CommonProps";
|
||||||
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
||||||
|
|
||||||
type AccordionProps = CommonProps &
|
type AccordionProps = CommonProps &
|
||||||
@@ -1,11 +1,12 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import type { ReactNode } from "react";
|
import type { ComponentProps, ReactNode } from "react";
|
||||||
import * as BUI from "@base-ui/react";
|
import * as BUI from "@base-ui/react";
|
||||||
import { cn } from "tailwind-variants";
|
|
||||||
import { brandRecipe } from "../../styles/recipe/brand.recipe";
|
import { brandRecipe } from "../../styles/recipe/brand.recipe";
|
||||||
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
||||||
import { variantRecipe } from "../../styles/recipe/variant.recipe";
|
import { variantRecipe } from "../../styles/recipe/variant.recipe";
|
||||||
import { Icon } from "../icon/Icon";
|
import { Icon } from "../icon/Icon";
|
||||||
|
import type { CommonProps } from "../../common/CommonProps";
|
||||||
|
import { cn } from "tailwind-variants";
|
||||||
|
|
||||||
type ButtonProps = {
|
type ButtonProps = {
|
||||||
size?: "xs" | "sm" | "md" | "lg";
|
size?: "xs" | "sm" | "md" | "lg";
|
||||||
@@ -16,7 +17,8 @@ type ButtonProps = {
|
|||||||
iconSvg?: ReactNode;
|
iconSvg?: ReactNode;
|
||||||
iconOnly?: boolean;
|
iconOnly?: boolean;
|
||||||
hideIcon?: boolean;
|
hideIcon?: boolean;
|
||||||
} & BUI.Button.Props;
|
} & ComponentProps<typeof BUI.Button> &
|
||||||
|
CommonProps;
|
||||||
|
|
||||||
export const Button = (props: ButtonProps) => {
|
export const Button = (props: ButtonProps) => {
|
||||||
const {
|
const {
|
||||||
@@ -1,13 +1,13 @@
|
|||||||
"use client";
|
"use client";
|
||||||
import * as BUI from "@base-ui/react";
|
import * as BUI from "@base-ui/react";
|
||||||
import { cn } from "tailwind-variants";
|
|
||||||
import type { ReactNode } from "react";
|
import type { ReactNode } from "react";
|
||||||
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
|
||||||
import { variantRecipe } from "../../styles/recipe/variant.recipe";
|
import { variantRecipe } from "../../styles/recipe/variant.recipe";
|
||||||
import { CommonProps } from "../../common/CommonProps";
|
import { type CommonProps } from "../../common/CommonProps";
|
||||||
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
|
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
|
||||||
import { CheckIndicatorSvg } from "../../assets/svg/CheckIndicatorSvg";
|
import { CheckIndicatorSvg } from "../../assets/svg/CheckIndicatorSvg";
|
||||||
import { Slot } from "../../common/Slot";
|
import { Slot } from "../../common/Slot";
|
||||||
|
import { cn } from "tailwind-variants";
|
||||||
|
|
||||||
type CheckboxProps = CommonProps & {
|
type CheckboxProps = CommonProps & {
|
||||||
size?: "xs" | "sm" | "md";
|
size?: "xs" | "sm" | "md";
|
||||||
@@ -1,7 +1,7 @@
|
|||||||
import { ReactNode } from "react";
|
import { type ReactNode } from "react";
|
||||||
import { cn } from "tailwind-variants";
|
|
||||||
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
|
import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
|
||||||
import { Slot } from "../../common/Slot";
|
import { Slot } from "../../common/Slot";
|
||||||
|
import { cn } from "tailwind-variants";
|
||||||
|
|
||||||
type IconProps = {
|
type IconProps = {
|
||||||
size?: "xs" | "sm" | "md" | "lg";
|
size?: "xs" | "sm" | "md" | "lg";
|
||||||
@@ -1,6 +1,7 @@
|
|||||||
import { cn } from "tailwind-variants";
|
|
||||||
import { ThemeContext } from "./ThemeContext";
|
import { ThemeContext } from "./ThemeContext";
|
||||||
import { ReactNode } from "react";
|
import { type ReactNode } from "react";
|
||||||
|
import { cn } from "tailwind-variants";
|
||||||
|
|
||||||
type ThemeProps = {
|
type ThemeProps = {
|
||||||
theme?: "light" | "dark";
|
theme?: "light" | "dark";
|
||||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user