folinhilo/defgov
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

mm

Browse Source
This commit is contained in:
folinhilo
2026-05-16 00:51:11 +08:00
parent 92e4fd11f1
commit 0f23a8f7a0
67 changed files with 153 additions and 384 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
packages/ui-web/package.json Normal file
View File

@@ -0,0 +1,44 @@
{
"name": "@defgov/ui-web",
"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": {
"gen-index": "ts-node scripts/gen-index.ts",
"gen-dts": "tsc -p tsconfig.build.json",
"dev": "pnpm gen-index && vite",
"build": "pnpm gen-index && vite build && pnpm gen-dts"
},
"devDependencies": {
"@types/node": "^25.6.0",
"@vitejs/plugin-react": "^6.0.1",
"tinyglobby": "^0.2.16",
"ts-node": "^10.9.2",
"typescript": "^6.0.3",
"vite": "^8.0.10",
"@types/react": "^19.2.14",
"@types/react-dom": "^19.2.3"
},
"peerDependencies": {
"react": "^19",
"react-dom": "^19"
}
}

7
packages/ui-web/playground/App.tsx Normal file
View File

@@ -0,0 +1,7 @@
import { useState } from "react";
function App() {
return <div></div>;
}
export default App;

13
packages/ui-web/playground/index.html Normal file
View File

@@ -0,0 +1,13 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" type="image/svg+xml" href="/favicon.svg" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>vite-project</title>
</head>
<body>
<div id="root"></div>
<script type="module" src="/main.tsx"></script>
</body>
</html>

9
packages/ui-web/playground/main.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { StrictMode } from 'react'
import { createRoot } from 'react-dom/client'
import App from './App.tsx'
createRoot(document.getElementById('root')!).render(
<StrictMode>
<App />
</StrictMode>,
)

147
packages/ui-web/scripts/gen-index.ts Normal file
View File

@@ -0,0 +1,147 @@
import fs from "fs";
import path from "path";
// 1. 引入 tinyglobby
import { globSync } from "tinyglobby";
interface Config {
outputDir: string;
outputFilenameWithExt: string;
scanDirs: string[];
importPrefix: string;
predefineStatements: string[];
includeExtensions: string[];
excludeDirs: string[];
excludeFileExtensions: string[];
excludePatterns: RegExp[];
}
const cssConfig: Config = {
outputDir: "src",
outputFilenameWithExt: "index.css",
scanDirs: ["src"],
importPrefix: "@import",
predefineStatements: [],
includeExtensions: [".css"],
excludeDirs: ["__tests__", "tests", "story", "stories", "types"],
excludeFileExtensions: [],
excludePatterns: [/^index\.(css)$/, /\.(test|spec)\./, /\.(story|stories)\./],
};
const tsConfig: Config = {
outputDir: "src",
outputFilenameWithExt: "index.ts",
scanDirs: ["src"],
importPrefix: "export * from",
predefineStatements: ["import './index.css'"],
includeExtensions: [".ts", "tsx", "js", "jsx"],
excludeDirs: ["__tests__", "tests", "story", "stories", "types"],
excludeFileExtensions: [".d.ts"],
excludePatterns: [
/^index\.(ts|tsx|js|jsx)$/,
/\.(test|spec)\./,
/\.(story|stories)\./,
],
};
const normalizePath = (p: string) => p.replace(/\\/g, "/");
const isExcludeDir = (filePath: string, excludeDirs: string[]) => {
const normalized = normalizePath(filePath);
return excludeDirs.some((dir) => normalized.includes(`/${dir}/`));
};
const isExcludeFileExtensions = (
filePath: string,
excludeFileExtensions: string[],
) => excludeFileExtensions.some((ext) => filePath.endsWith(ext));
const isExcludePattern = (fileName: string, excludePatterns: RegExp[]) =>
excludePatterns.some((pattern) => pattern.test(fileName));
// ----------------------------------------
function isValidFile(filePath: string, config: Config): boolean {
const fileName = filePath.split(/[\\/]/).pop()!;
if (isExcludeDir(filePath, config.excludeDirs)) return false;
if (isExcludeFileExtensions(filePath, config.excludeFileExtensions))
return false;
if (isExcludePattern(fileName, config.excludePatterns)) return false;
const ext = path.extname(filePath);
return config.includeExtensions.includes(ext);
}
// -----------------------------------------
function generateIndexFile(config: Config) {
const currentPath = process.cwd();
const outputPath = path.resolve(currentPath, config.outputDir);
let exportStatements: string[] = [];
// ------ scanDirs forEach start ------------------------
config.scanDirs.forEach((dir) => {
// 2. 路径模式保持不变，tinyglobby 能够正确处理
const scanPattern = path.resolve(currentPath, dir, "**", "*.*");
const allFilePath = globSync(scanPattern, {
absolute: true,
// 3. 移除了 windowsPathsNoEscape，tinyglobby 默认处理路径更智能
});
const validFiles = allFilePath.filter((filePath) => {
return isValidFile(filePath, config);
});
if (validFiles.length === 0) {
console.log(
`⚠️ 未找到符合条件的文件，跳过生成 ${config.outputFilenameWithExt}`,
);
return;
}
validFiles.sort();
validFiles.forEach((file) => {
const relativePath = path.relative(outputPath, file);
const importPath = `./${relativePath.replace(/\\/g, "/")}`;
exportStatements.push(`${config.importPrefix} '${importPath}';`);
});
});
// --------- scanDirs forEach end ----------------
const indexFileContent = `
${config.predefineStatements.join("\n")}
${exportStatements.join("\n")}
`.trim();
const indexFilePath = path.resolve(
currentPath,
config.outputDir,
config.outputFilenameWithExt,
);
// ✅ 内容比对，避免重复写入
if (fs.existsSync(indexFilePath)) {
const old = fs.readFileSync(indexFilePath, "utf8");
if (old === indexFileContent) {
console.log(
`✅ ${config.outputFilenameWithExt} 内容无变化，无需重新生成`,
);
return;
}
}
fs.writeFileSync(indexFilePath, indexFileContent, "utf8");
console.log(`✅ 成功生成 ${config.outputFilenameWithExt}: ${indexFilePath}`);
}
// --------------------------------------------------
try {
console.log(`🚀 [gen-index] 开始扫描`);
generateIndexFile(cssConfig);
generateIndexFile(tsConfig);
} catch (err) {
const msg = err instanceof Error ? err.message : String(err);
console.error(`❌ [gen-index] 执行失败: ${msg}`);
process.exit(1);
}

9
packages/ui-web/src/componnets/button/ButtonIcon.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ComponentPropsWithRef } from "react";
type ButtonIconProps = ComponentPropsWithRef<"span">;
export const ButtonIcon = (props: ButtonIconProps) => {
const { children, ...rest } = props;
return <span {...rest}>{children}</span>;
};
ButtonIcon.displayName = "ButtonIcon";

9
packages/ui-web/src/componnets/button/ButtonLoading.tsx Normal file
View File

@@ -0,0 +1,9 @@
import { ComponentPropsWithRef } from "react";
type ButtonLoadingProps = ComponentPropsWithRef<"span">;
export const ButtonLoading = (props: ButtonLoadingProps) => {
const { children, ...rest } = props;
return <span {...rest}>{children}</span>;
};
ButtonLoading.displayName = "ButtonLoading";

44
packages/ui-web/src/componnets/button/ButtonRoot.tsx Normal file
View File

@@ -0,0 +1,44 @@
import { type ComponentPropsWithoutRef, forwardRef } from "react";
import { useButtonSlot } from "./useButtonSlots";
import { useStateProps } from "../../utils/useStateProps";
export type ButtonRootOwnProps = {
iconOnly?: boolean;
hideIcon?: boolean;
loading?: boolean;
};
export type ButtonRootStateProps = {
disabled?: boolean;
};
export type ButtonRootPrimitiveProps = Omit<
ComponentPropsWithoutRef<"button">,
keyof ButtonRootStateProps
>;
export type ButtonRootProps = ButtonRootOwnProps &
ButtonRootStateProps &
ButtonRootPrimitiveProps;
export const ButtonRoot = forwardRef<HTMLButtonElement, ButtonRootProps>(
(props, ref) => {
const {
children,
loading,
iconOnly,
hideIcon,
disabled = false,
...rest
} = props;
const stateProps = useStateProps({ disabled: disabled });
const filteredChildren = useButtonSlot(children, props);
return (
<button ref={ref} {...stateProps} {...rest}>
{filteredChildren}
</button>
);
},
);
ButtonRoot.displayName = "ButtonRoot";

9
packages/ui-web/src/componnets/button/index.ts Normal file
View File

@@ -0,0 +1,9 @@
import { ButtonIcon } from "./ButtonIcon";
import { ButtonLoading } from "./ButtonLoading";
import { ButtonRoot } from "./ButtonRoot";
export namespace Button {
export const Root = ButtonRoot;
export const Icon = ButtonIcon;
export const Loading = ButtonLoading;
}

52
packages/ui-web/src/componnets/button/useButtonSlots.ts Normal file
View File

@@ -0,0 +1,52 @@
import {
type ReactNode,
Children,
isValidElement,
cloneElement,
type ReactElement,
} from "react";
import { ButtonIcon } from "./ButtonIcon";
import { ButtonLoading } from "./ButtonLoading";
export function useButtonSlot(
children: ReactNode,
props: { hideIcon?: boolean; loading?: boolean },
) {
const filterNodes = (nodes: ReactNode): ReactNode => {
const filtered: ReactNode[] = [];
Children.forEach(nodes, (child) => {
if (!isValidElement(child)) {
filtered.push(child);
return;
}
// loading：只保留 Loading
if (props.loading) {
if (child.type === ButtonLoading) {
filtered.push(child);
}
return;
}
// 隐藏图标：移除 ButtonIcon
if (props.hideIcon && child.type === ButtonIcon) {
return;
}
// 普通节点
const element = child as ReactElement<{ children?: ReactNode }>;
filtered.push(
cloneElement(element, {
children: filterNodes(element.props.children),
}),
);
});
return filtered;
};
return filterNodes(children);
}

401
packages/ui-web/src/styles/base/root.css Normal file
View File

@@ -0,0 +1,401 @@
: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;
--radius-2xl: 1rem;
--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);
--margin-2xl: 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-long-2xl: 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);
--padding-2xl: calc(var(--spacing) * 2);
--drop-shadow: drop-shadow(0 0 4px rgba(0, 0, 0, 0.12))
drop-shadow(0 8px 16px rgba(0, 0, 0, 0.14));
}

89
packages/ui-web/src/styles/recipe/itemSizeRecipe.ts Normal file
View File

@@ -0,0 +1,89 @@
import { cvr } from "../utils/cvr";
export const itemSizeRecipe = cvr({
base: "relative select-none flex flex-nowrap justify-center items-center",
variants: {
size: {
xs: "text-xs h-item-xs gap-xs px-xs",
sm: "text-sm h-item-sm gap-sm px-sm",
md: "text-md h-item-md gap-md px-md",
lg: "text-lg h-item-lg gap-lg px-lg",
xl: "text-xl h-item-xl gap-xl px-xl",
"2xl": "text-2xl h-item-2xl gap-2xl px-2xl",
},
shape: {
square: "rounded-none",
rounded: "",
circle: "rounded-full",
},
iconOnly: {
true: "px-none",
false: "",
},
},
compoundVariants: [
{ iconOnly: false, size: "xs", class: "px-xs" },
{ iconOnly: false, size: "sm", class: "px-sm" },
{ iconOnly: false, size: "md", class: "px-md" },
{ iconOnly: false, size: "lg", class: "px-lg" },
{ iconOnly: false, size: "xl", class: "px-xl" },
{ iconOnly: false, size: "2xl", class: "px-2xl" },
{ shape: "rounded", size: "xs", class: "rounded-sm" },
{
shape: "rounded",
size: "sm",
class: "rounded-md",
},
{
shape: "rounded",
size: "md",
class: "rounded-lg",
},
{
shape: "rounded",
size: "lg",
class: "rounded-xl",
},
{
shape: "rounded",
size: "xl",
class: "rounded-2xl",
},
{
shape: "rounded",
size: "2xl",
class: "rounded-3xl",
},
// --------------------------------------------------
{
iconOnly: true,
size: "xs",
class: "w-item-xs",
},
{
iconOnly: true,
size: "sm",
class: "w-item-sm",
},
{
iconOnly: true,
size: "md",
class: "w-item-md",
},
{
iconOnly: true,
size: "lg",
class: "w-item-lg",
},
{
iconOnly: true,
size: "xl",
class: "w-item-xl",
},
{
iconOnly: true,
size: "2xl",
class: "w-item-2xl",
},
],
});

37
packages/ui-web/src/styles/utility/size-insensitive/align-content.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/align-items.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/align-self.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/animation.css Normal file
View 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;
}
}

9
packages/ui-web/src/styles/utility/size-insensitive/box-decoration.css Normal file
View File

@@ -0,0 +1,9 @@
@layer utility {
.box-decoration-clone {
box-decoration-break: clone;
}
.box-decoration-slice {
box-decoration-break: slice;
}
}

17
packages/ui-web/src/styles/utility/size-insensitive/box-inside.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/box-sizing.css Normal file
View File

@@ -0,0 +1,9 @@
@layer utility {
.box-sizing-border {
box-sizing: border-box;
}
.box-sizing-content {
box-sizing: content-box;
}
}

42
packages/ui-web/src/styles/utility/size-insensitive/brand.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/break-after.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/break-before.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/cursor.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/display.css Normal file
View 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;
}
}

5
packages/ui-web/src/styles/utility/size-insensitive/drop-shadow.css Normal file
View File

@@ -0,0 +1,5 @@
@layer utility {
.drop-shadow {
filter: var(--drop-shadow);
}
}

14
packages/ui-web/src/styles/utility/size-insensitive/flex-direction.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/flex-wrap.css Normal file
View File

@@ -0,0 +1,13 @@
@layer utility {
.flex-nowrap {
flex-wrap: nowrap;
}
.flex-wrap {
flex-wrap: wrap;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse;
}
}

11
packages/ui-web/src/styles/utility/size-insensitive/font-family.css Normal file
View 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);
}
}

45
packages/ui-web/src/styles/utility/size-insensitive/justify-content.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/justify-items.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/justify-self.css Normal file
View 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;
}
}

61
packages/ui-web/src/styles/utility/size-insensitive/overflow.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/overscroll-behavior.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/position.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/screen-reader.css Normal file
View 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/ui-web/src/styles/utility/size-insensitive/theme.css Normal file
View 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);
}
}

14
packages/ui-web/src/styles/utility/size-insensitive/user-select.css Normal file
View File

@@ -0,0 +1,14 @@
@layer utility {
.select-none {
user-select: none;
}
.select-text {
user-select: text;
}
.select-all {
user-select: all;
}
.select-auto {
user-select: auto;
}
}

43
packages/ui-web/src/styles/utility/size-insensitive/z-index.css Normal file
View 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;
}
}

26
packages/ui-web/src/styles/utility/size-sensitive/border-radius.css Normal file
View File

@@ -0,0 +1,26 @@
@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);
}
.rounded-2xl {
border-radius: var(--radius-2xl);
}
}

38
packages/ui-web/src/styles/utility/size-sensitive/font-size.css Normal file
View 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/ui-web/src/styles/utility/size-sensitive/font-weight.css Normal file
View 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;
}
}

23
packages/ui-web/src/styles/utility/size-sensitive/gap.css Normal file
View File

@@ -0,0 +1,23 @@
@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);
}
.gap-2xl {
gap: calc(var(--spacing) * 2.5);
}
}

47
packages/ui-web/src/styles/utility/size-sensitive/height.css Normal file
View File

@@ -0,0 +1,47 @@
@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 {
/* 56px section-header bar */
height: var(--height-item-xl);
}
.h-item-2xl {
/* 64px navigation bar */
height: var(--height-item-2xl);
}
/* -------------- */
.h-inline-xs {
/* 16px */
height: calc(var(--font-size-xs) * var(--line-height-xs));
}
.h-inline-sm {
/* 20px */
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));
}
}

67
packages/ui-web/src/styles/utility/size-sensitive/margin-block.css Normal file
View File

@@ -0,0 +1,67 @@
@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-e-2xl {
margin-block-end: var(--margin-2xl);
}
/* ------------------ */
.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-s-2xl {
margin-block-start: var(--margin-2xl);
}
/* --------------------- */
.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);
}
.my-2xl {
margin-block: var(--margin-2xl);
}
}

67
packages/ui-web/src/styles/utility/size-sensitive/margin-inline.css Normal file
View File

@@ -0,0 +1,67 @@
@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-e-2xl {
margin-inline-end: var(--margin-2xl);
}
/* ------------------ */
.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-s-2xl {
margin-inline-start: var(--margin-2xl);
}
/* --------------------- */
.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);
}
.mx-2xl {
margin-inline: var(--margin-2xl);
}
}

24
packages/ui-web/src/styles/utility/size-sensitive/padding-long.css Normal file
View File

@@ -0,0 +1,24 @@
@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);
}
.px-long-2xl {
padding-inline: var(--padding-long-2xl);
}
}

49
packages/ui-web/src/styles/utility/size-sensitive/padding-short.css Normal file
View File

@@ -0,0 +1,49 @@
@layer utility {
.px-none {
padding-inline: 0px;
}
.px-xs {
/* 4px, 24px - 16px = 8px */
padding-inline: var(--padding-xs);
}
.px-sm {
/* 4px, 28px - 20px = 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);
}
.px-2xl {
padding-inline: var(--padding-2xl);
}
/* ------------------------ */
.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);
}
.py-2xl {
padding-block: var(--padding-2xl);
}
}

45
packages/ui-web/src/styles/utility/size-sensitive/width.css Normal file
View File

@@ -0,0 +1,45 @@
@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 {
/* 56px section-header bar */
width: var(--height-item-xl);
}
.w-item-2xl {
/* 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));
}
.w-inline-xl {
width: calc(var(--font-size-2xl) * var(--line-height-2xl));
}
}

61
packages/ui-web/src/styles/utils/cpm.ts Normal file
View File

@@ -0,0 +1,61 @@
import { defaultPrefixList } from "./prefix-list";
function matchLongestPrefix(cls: string, prefixList: string[]): string {
let bestPrefix: string | undefined;
for (const prefix of prefixList) {
const reg = new RegExp(`^${prefix}(?:-|$)`);
if (reg.test(cls) && (!bestPrefix || prefix.length > bestPrefix.length)) {
bestPrefix = prefix;
}
}
return bestPrefix ?? cls;
}
// 重载 1
export function cpm(...classes: Array<string | string[]>): string;
// 重载 2
export function cpm(
options: { extendedPrefixList?: string[] },
...classes: Array<string | string[]>
): string;
export function cpm(
arg1: { extendedPrefixList?: string[] } | string | string[],
...rest: Array<string | string[]>
): string {
const map = new Map<string, string>();
let options: { extendedPrefixList?: string[] } = {};
let classes: Array<string | string[]>;
if (typeof arg1 === "object" && !Array.isArray(arg1)) {
options = arg1 as { extendedPrefixList?: string[] };
classes = rest;
} else {
classes = [arg1, ...rest];
}
const mergedPrefixList: string[] = [
...new Set([...(options.extendedPrefixList ?? []), ...defaultPrefixList]),
];
classes.forEach((item) => {
if (Array.isArray(item)) {
item.forEach((i) => {
const bestPrefix = matchLongestPrefix(i, mergedPrefixList);
map.set(bestPrefix, i);
});
return;
}
if (typeof item === "string") {
const bestPrefix = matchLongestPrefix(item, mergedPrefixList);
map.set(bestPrefix, item);
}
});
return Object.values(map).join(" ");
}

58
packages/ui-web/src/styles/utils/cvr.ts Normal file
View File

@@ -0,0 +1,58 @@
import { cpm } from "./cpm";
// 1. 允许变体值的键可以是字符串，也可以是布尔值（为了开发体验，允许传 true/false）
// 但底层存储我们统一视为字符串处理
type VariantValue = string | boolean;
type VariantsConfig<V extends Record<string, Record<string, string>>> = {
base?: string;
variants?: V;
compoundVariants?: Array<
// 修改这里：允许 compoundVariants 的值是 VariantValue，而不仅仅是 keyof V[K]
Partial<{ [K in keyof V]: VariantValue }> & { class: string }
>;
};
// 2. 修改 Props 定义，允许传入 boolean，因为 JS 对象 key 访问时，boolean 会被转为 string
type VariantProps<V extends Record<string, Record<string, string>>> = Partial<{
[K in keyof V]: keyof V[K] | boolean;
}>;
export function cvr<V extends Record<string, Record<string, string>>>(
config: VariantsConfig<V>,
) {
return function (props: VariantProps<V> = {}): string {
const classes: string[] = [];
if (config.base) classes.push(config.base);
if (config.variants) {
for (const [key, map] of Object.entries(config.variants)) {
const value = props[key];
// 运行时修复：如果传入的是 boolean true，需要转为字符串 "true" 才能匹配 map
const stringifiedValue = String(value);
if (value && map[stringifiedValue]) {
classes.push(map[stringifiedValue]);
}
}
}
if (config.compoundVariants) {
for (const cv of config.compoundVariants) {
const match = Object.entries(cv)
.filter(([k]) => k !== "class")
.every(([k, v]) => {
const propValue = props[k as keyof V];
// 运行时修复：统一转为字符串比较，确保 "true" === true 能匹配（虽然不建议混用，但要兼容）
return String(propValue) === String(v);
});
if (match && cv.class) {
classes.push(cv.class);
}
}
}
return cpm(...classes);
};
}

38
packages/ui-web/src/styles/utils/prefix-list.ts Normal file
View File

@@ -0,0 +1,38 @@
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",
"font-family",
"font-weight",
"text",
"gap",
"h",
"justify",
"justify-items",
"justify-self",
"mx",
"my",
"px",
"py",
"overflow",
"overscroll",
"position",
"sr",
"theme",
"w",
"z",
"drop-shadow",
"select",
];

4
packages/ui-web/src/types/env.d.ts vendored Normal file
View File

@@ -0,0 +1,4 @@
declare module "*.css" {
const content: string;
export default content;
}

103
packages/ui-web/src/utils/mergeProps.ts Normal file
View File

@@ -0,0 +1,103 @@
function defaultClassMergeFn(...classes: string[]): string {
return classes
.map((str) => str.trim())
.filter(Boolean)
.join(" ")
.trim();
}
// 重载1
export function mergeProps(
...propsN: Record<string, any>[]
): Record<string, any>;
// 重载2
export function mergeProps(
options: { classMergeFn: Function },
...propsN: Record<string, any>[]
): Record<string, any>;
// 实现
export function mergeProps(
arg1: { classMergeFn: Function } | Record<string, any>,
...rest: Record<string, any>[]
) {
let options: { classMergeFn: Function } = {
classMergeFn: defaultClassMergeFn,
};
let propsN: Record<string, any>[];
if (
arg1 &&
typeof arg1 === "object" &&
!Array.isArray(arg1) &&
"classMergeFn" in arg1 &&
typeof (arg1 as any).classMergeFn === "function"
) {
options = arg1 as { classMergeFn: Function };
propsN = rest;
} else {
propsN = [arg1 as Record<string, any>, ...rest];
}
// --------------------------------
const result: any = {};
const eventHandlerMap = new Map<string, Function[]>();
const refs: any[] = [];
propsN.forEach((props) => {
if (!props) return;
if (props.className) {
result.className = options.classMergeFn(
result.className || "",
props.className,
);
}
if (props.style) {
result.style = { ...(result.style || {}), ...props.style };
}
if (props.ref) {
refs.push(props.ref);
}
Object.keys(props).forEach((key) => {
if (key.startsWith("on") && typeof props[key] === "function") {
if (!eventHandlerMap.has(key)) {
eventHandlerMap.set(key, []);
}
eventHandlerMap.get(key)!.push(props[key]);
} else if (key !== "ref" && key !== "className" && key !== "style") {
// 其他普通属性，后面的覆盖前面的
result[key] = props[key];
}
});
});
// 合并 Refs
if (refs.length > 0) {
if (refs.length === 1) {
result.ref = refs[0];
} else {
result.ref = (node: any) => {
refs.forEach((ref) => {
if (typeof ref === "function") {
ref(node);
} else if (ref) {
ref.current = node;
}
});
};
}
}
// 合并事件处理器
eventHandlerMap.forEach((handlers, key) => {
result[key] = (...args: any[]) => {
handlers.forEach((handler) => handler(...args));
};
});
return result;
}

12
packages/ui-web/src/utils/useStateProps.ts Normal file
View File

@@ -0,0 +1,12 @@
export function useStateProps(props: Record<string, any>) {
const state: Record<string, any> = {};
Object.entries(props).forEach(([key, value]) => {
const stateKey = `data-${key}:`;
const stateValue = `"${value}"`;
state[stateKey] = stateValue;
});
return state;
}

41
packages/ui-web/tsconfig.build.json Normal file
View File

@@ -0,0 +1,41 @@
{
"extends": "./tsconfig.json",
"compilerOptions": {
"noEmit": false,
"emitDeclarationOnly": true,
"declaration": true,
"declarationDir": "./dist",
"rootDir": "./src",
"outDir": "./dist"
},
"include": ["src"],
"exclude": [
"node_modules",
"dist",
".turbo/**/*",
".cache/**/*",
".vite/**/*",
"vite.config.ts",
"*.config.ts",
"*.config.js",
"tsconfig.*.json",
"__tests__/**/*",
"test/**/*",
"tests/**/*",
"**/*.test.ts",
"**/*.test.tsx",
"**/*.spec.ts",
"**/*.spec.tsx",
".storybook/**/*",
"stories/**/*",
"example/**/*",
"examples/**/*",
"scripts/**/*",
".env",
".env.*",
"public/**/*",
"docs/**/*",
"README.md",
"LICENSE"
]
}

26
packages/ui-web/tsconfig.json Normal file
View File

@@ -0,0 +1,26 @@
{
"compilerOptions": {
"target": "es2025",
"lib": ["ES2025", "DOM", "DOM.Iterable"],
"module": "ESNext",
"types": ["node", "vite/client"],
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
/* Bundler mode */
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"verbatimModuleSyntax": true,
"moduleDetection": "force",
"noEmit": true,
"jsx": "react-jsx",
/* Linting */
"noUnusedLocals": true,
"noUnusedParameters": true,
"erasableSyntaxOnly": true,
"noFallthroughCasesInSwitch": true
},
"include": ["src", "scripts", "vite.config.ts"]
}

41
packages/ui-web/vite.config.ts Normal file
View File

@@ -0,0 +1,41 @@
import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
export default defineConfig(({ command }) => {
if (command === "serve") {
return {
plugins: [react()],
root: "playground",
};
}
return {
plugins: [react()],
build: {
cssMinify: false,
lib: {
entry: path.resolve(import.meta.dirname, "src/index.ts"),
formats: ["es", "cjs"],
fileName: (format) => `index.${format}.js`,
},
rolldownOptions: {
external: ["react", "react-dom", "react/jsx-runtime"],
output: {
globals: {
react: "React",
"react-dom": "ReactDOM",
},
},
},
emptyOutDir: true,
sourcemap: true,
cssCodeSplit: false,
outDir: "dist",
},
};
});