mm

2026-05-07 02:15:20 +08:00
parent da0a6d0f81
commit ccc46844b6
141 changed files with 2358 additions and 1661 deletions
--- a/packages/ui-web-tw/.vscode/settings.json
+++ b/packages/ui-web-tw/.vscode/settings.json
@@ -0,0 +1,14 @@
+{
+  "json.schemas": [
+    {
+      "fileMatch": ["/tsconfig.build.json", "/tsconfig.base.json"],
+      "schema": {}
+    }
+  ],
+
+  "files.associations": {
+    "*.css": "tailwindcss"
+  },
+
+  "extensions.disabledExtensions": ["vunguyentuan.vscode-css-variables"]
+}
--- a/packages/ui-web-tw/package.json
+++ b/packages/ui-web-tw/package.json
@@ -0,0 +1,54 @@
+{
+  "name": "@defgov/ui-web-tw",
+  "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": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.es.js",
+      "require": "./dist/index.cjs.js"
+    },
+    "./index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "gen-css": "ts-node scripts/gen-index-css.ts",
+    "gen-ts": "ts-node scripts/gen-index-ts.ts",
+    "gen-index": "pnpm run gen-css && pnpm run gen-ts",
+    "dev": "pnpm run gen-index && vite build --watch",
+    "build": "pnpm run gen-index && tsc -p tsconfig.build.json && vite build"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "^12.3.0",
+    "@tailwindcss/vite": "^4.2.4",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "~5.2.0",
+    "glob": "^13.0.6",
+    "ts-node": "^10.9.2",
+    "typescript": "~6.0.3",
+    "vite": "~7.3.2",
+    "vite-plugin-dts": "^5.0.0"
+  },
+  "dependencies": {
+    "@base-ui/react": "^1.4.1",
+    "tailwind-merge": "^3.5.0",
+    "tailwind-variants": "^3.2.2",
+    "tailwindcss": "^4.2.4"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
+  }
+}
--- a/packages/ui-web-tw/scripts/gen-index-css.ts
+++ b/packages/ui-web-tw/scripts/gen-index-css.ts
@@ -0,0 +1,121 @@
+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) {
+    console.log("⚠️ 未找到符合条件的文件，跳过生成 index.ts");
+    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");
+
+  // ✅ 内容比对，避免重复写入
+  if (fs.existsSync(indexFilePath)) {
+    const old = fs.readFileSync(indexFilePath, "utf8");
+    if (old === indexContent) {
+      console.log("✅ index.ts 内容无变化，无需重新生成");
+      return;
+    }
+  }
+
+  fs.writeFileSync(indexFilePath, indexContent, "utf8");
+  console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
+}
+
+// 脚本入口
+const [targetDir] = CONFIG.targetDirs;
+if (!targetDir) {
+  console.error("❌ CONFIG.targetDirs 不能为空");
+  process.exit(1);
+}
+
+const absTargetDir = path.resolve(process.cwd(), targetDir);
+
+try {
+  console.log(`🚀 开始扫描目录: ${absTargetDir}`);
+  generateIndexFile(absTargetDir);
+} catch (err) {
+  const msg = err instanceof Error ? err.message : String(err);
+  console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
+  process.exit(1);
+}
--- a/packages/ui-web-tw/scripts/gen-index-ts.ts
+++ b/packages/ui-web-tw/scripts/gen-index-ts.ts
@@ -0,0 +1,121 @@
+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) {
+    console.log("⚠️ 未找到符合条件的文件，跳过生成 index.ts");
+    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");
+
+  // ✅ 内容比对，避免重复写入
+  if (fs.existsSync(indexFilePath)) {
+    const old = fs.readFileSync(indexFilePath, "utf8");
+    if (old === indexContent) {
+      console.log("✅ index.ts 内容无变化，无需重新生成");
+      return;
+    }
+  }
+
+  fs.writeFileSync(indexFilePath, indexContent, "utf8");
+  console.log(`✅ 成功生成 index.ts: ${indexFilePath}`);
+}
+
+// 脚本入口
+const [targetDir] = CONFIG.targetDirs;
+if (!targetDir) {
+  console.error("❌ CONFIG.targetDirs 不能为空");
+  process.exit(1);
+}
+
+const absTargetDir = path.resolve(process.cwd(), targetDir);
+
+try {
+  console.log(`🚀 开始扫描目录: ${absTargetDir}`);
+  generateIndexFile(absTargetDir);
+} catch (err) {
+  const msg = err instanceof Error ? err.message : String(err);
+  console.error(`❌ [gen-index-ts] 执行失败: ${msg}`);
+  process.exit(1);
+}
--- a/packages/ui-web-tw/src/assets/svg/BoldSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/BoldSvg.tsx
@@ -0,0 +1,12 @@
+export const BoldSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M7 5h6a3.5 3.5 0 0 1 0 7H7zm6 7h1a3.5 3.5 0 0 1 0 7H7v-7"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/CheckIndicatorSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/CheckIndicatorSvg.tsx
@@ -0,0 +1,8 @@
+export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/ChevronRightSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/ChevronRightSvg.tsx
@@ -0,0 +1,12 @@
+export const ChevronRightSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="m9 6l6 6l-6 6"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/CutSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/CutSvg.tsx
@@ -0,0 +1,8 @@
+export const CutSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M12.14 9.342L7.37 2.329a.75.75 0 1 0-1.24.844l5.13 7.545l-2.395 3.743a4 4 0 1 0 1.178.943l2.135-3.337l2.065 3.036a4 4 0 1 0 1.261-.813l-2.447-3.597l.002-.002zM4.5 18a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m10 0a2.5 2.5 0 1 1 5 0a2.5 2.5 0 0 1-5 0m-.562-8.684l3.943-6.162a.75.75 0 1 0-1.263-.808L13.02 7.968z"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/DownloadSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/DownloadSvg.tsx
@@ -0,0 +1,8 @@
+export const DownloadSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M20 16a1 1 0 0 1 1 1v2a3 3 0 0 1-3 3H6a3 3 0 0 1-3-3v-2a1 1 0 0 1 2 0v2a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1v-2a1 1 0 0 1 1-1M12 3a1 1 0 0 1 1 1v9.585l3.293-3.292a1 1 0 0 1 1.414 1.414l-5 5a1 1 0 0 1-.09.08l.09-.08a1 1 0 0 1-.674.292L12 17h-.032l-.054-.004L12 17a1 1 0 0 1-.617-.213a1 1 0 0 1-.09-.08l-5-5a1 1 0 0 1 1.414-1.414L11 13.585V4a1 1 0 0 1 1-1"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/FileSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/FileSvg.tsx
@@ -0,0 +1,14 @@
+export const FileSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="M14 3v4a1 1 0 0 0 1 1h4" />
+      <path d="M17 21H7a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2" />
+    </g>
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/KeySvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/KeySvg.tsx
@@ -0,0 +1,8 @@
+export const KeySvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M7 14q-.825 0-1.412-.587T5 12t.588-1.412T7 10t1.413.588T9 12t-.587 1.413T7 14m0 4q-2.5 0-4.25-1.75T1 12t1.75-4.25T7 6q1.675 0 3.038.825T12.2 9h8.375q.2 0 .388.075t.337.225l2 2q.15.15.212.325t.063.375t-.063.375t-.212.325l-3.175 3.175q-.125.125-.3.2t-.35.1t-.35-.025t-.325-.175L17.5 15l-1.425 1.075q-.125.1-.275.15t-.3.05t-.313-.05t-.287-.15L13.375 15H12.2q-.8 1.35-2.163 2.175T7 18m0-2q1.4 0 2.463-.85T10.875 13H14l1.45 1.025v.013v-.013L17.5 12.5l1.775 1.375L21.15 12h-.012h.012l-1-1v-.012V11h-9.275q-.35-1.3-1.412-2.15T7 8Q5.35 8 4.175 9.175T3 12t1.175 2.825T7 16"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/MeshSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/MeshSvg.tsx
@@ -0,0 +1,14 @@
+export const MeshSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <g
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+    >
+      <path d="M3 9h18M3 15h18M8 4c.485.445 3.5 3.312 3.5 8c0 .663-.07 4.848-3.5 8m7-16a17 17 0 0 1 2.004 8c0 1.51-.201 4.628-2.004 8" />
+      <path d="M18.778 20H5.222A2.22 2.22 0 0 1 3 17.778V6.222C3 4.995 3.995 4 5.222 4h13.556C20.005 4 21 4.995 21 6.222v11.556A2.22 2.22 0 0 1 18.778 20" />
+    </g>
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/MoonSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/MoonSvg.tsx
@@ -0,0 +1,12 @@
+export const MoonSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M12 3h.393a7.5 7.5 0 0 0 7.92 12.446A9 9 0 1 1 12 2.992z"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/PasteSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/PasteSvg.tsx
@@ -0,0 +1,8 @@
+export const PasteSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M12.753 2c1.158 0 2.111.875 2.234 2h1.763a2.25 2.25 0 0 1 2.245 2.096L19 6.25a.75.75 0 0 1-.647.742L18.249 7a.75.75 0 0 1-.742-.647L17.5 6.25a.75.75 0 0 0-.648-.743L16.75 5.5h-2.132a2.24 2.24 0 0 1-1.865.993H9.247a2.24 2.24 0 0 1-1.865-.992L5.25 5.5a.75.75 0 0 0-.743.648L4.5 6.25v13.505c0 .38.282.693.648.743l.102.007h3a.75.75 0 0 1 .743.647l.007.102a.75.75 0 0 1-.75.75h-3a2.25 2.25 0 0 1-2.245-2.095L3 19.755V6.25a2.25 2.25 0 0 1 2.096-2.245L5.25 4h1.763a2.247 2.247 0 0 1 2.234-2zm5.997 6a2.25 2.25 0 0 1 2.245 2.096l.005.154v9.5a2.25 2.25 0 0 1-2.096 2.245L18.75 22h-6.5a2.25 2.25 0 0 1-2.245-2.096L10 19.75v-9.5a2.25 2.25 0 0 1 2.096-2.245L12.25 8zm0 1.5h-6.5a.75.75 0 0 0-.743.648l-.007.102v9.5c0 .38.282.694.648.743l.102.007h6.5a.75.75 0 0 0 .743-.648l.007-.102v-9.5a.75.75 0 0 0-.648-.743zm-5.997-6H9.247a.747.747 0 0 0 0 1.493h3.506a.747.747 0 1 0 0-1.493"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/Ruler.tsx
+++ b/packages/ui-web-tw/src/assets/svg/Ruler.tsx
@@ -0,0 +1,12 @@
+export const RulerSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M5 4h14a1 1 0 0 1 1 1v5a1 1 0 0 1-1 1h-7a1 1 0 0 0-1 1v7a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1M4 8h2m-2 4h3m-3 4h2M8 4v2m4-2v3m4-3v2"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/SearchSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/SearchSvg.tsx
@@ -0,0 +1,8 @@
+export const SearchSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      d="M9.5 16q-2.725 0-4.612-1.888T3 9.5t1.888-4.612T9.5 3t4.613 1.888T16 9.5q0 1.1-.35 2.075T14.7 13.3l5.6 5.6q.275.275.275.7t-.275.7t-.7.275t-.7-.275l-5.6-5.6q-.75.6-1.725.95T9.5 16m0-2q1.875 0 3.188-1.312T14 9.5t-1.312-3.187T9.5 5T6.313 6.313T5 9.5t1.313 3.188T9.5 14"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/SettingSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/SettingSvg.tsx
@@ -0,0 +1,9 @@
+export const SettingSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="currentColor"
+      fill-rule="evenodd"
+      d="M12.563 3.2h-1.126l-.645 2.578l-.647.2a6.3 6.3 0 0 0-1.091.452l-.599.317l-2.28-1.368l-.796.797l1.368 2.28l-.317.598a6.3 6.3 0 0 0-.453 1.091l-.199.647l-2.578.645v1.126l2.578.645l.2.647q.173.568.452 1.091l.317.599l-1.368 2.28l.797.796l2.28-1.368l.598.317q.523.278 1.091.453l.647.199l.645 2.578h1.126l.645-2.578l.647-.2a6.3 6.3 0 0 0 1.091-.452l.599-.317l2.28 1.368l.796-.797l-1.368-2.28l.317-.598q.278-.523.453-1.091l.199-.647l2.578-.645v-1.126l-2.578-.645l-.2-.647a6.3 6.3 0 0 0-.452-1.091l-.317-.599l1.368-2.28l-.797-.796l-2.28 1.368l-.598-.317a6.3 6.3 0 0 0-1.091-.453l-.647-.199zm2.945 2.17l1.833-1.1a1 1 0 0 1 1.221.15l1.018 1.018a1 1 0 0 1 .15 1.221l-1.1 1.833q.33.62.54 1.3l2.073.519a1 1 0 0 1 .757.97v1.438a1 1 0 0 1-.757.97l-2.073.519q-.21.68-.54 1.3l1.1 1.833a1 1 0 0 1-.15 1.221l-1.018 1.018a1 1 0 0 1-1.221.15l-1.833-1.1q-.62.33-1.3.54l-.519 2.073a1 1 0 0 1-.97.757h-1.438a1 1 0 0 1-.97-.757l-.519-2.073a7.5 7.5 0 0 1-1.3-.54l-1.833 1.1a1 1 0 0 1-1.221-.15L4.42 18.562a1 1 0 0 1-.15-1.221l1.1-1.833a7.5 7.5 0 0 1-.54-1.3l-2.073-.519A1 1 0 0 1 2 12.72v-1.438a1 1 0 0 1 .757-.97l2.073-.519q.21-.68.54-1.3L4.27 6.66a1 1 0 0 1 .15-1.221L5.438 4.42a1 1 0 0 1 1.221-.15l1.833 1.1q.62-.33 1.3-.54l.519-2.073A1 1 0 0 1 11.28 2h1.438a1 1 0 0 1 .97.757l.519 2.073q.68.21 1.3.54zM12 14.8a2.8 2.8 0 1 0 0-5.6a2.8 2.8 0 0 0 0 5.6m0 1.2a4 4 0 1 1 0-8a4 4 0 0 1 0 8"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/SpinnerSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/SpinnerSvg.tsx
@@ -0,0 +1,23 @@
+export const SpinnerSvg = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="currentColor"
+        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+        opacity="0.25"
+      />
+      <path
+        fill="currentColor"
+        d="M10.14,1.16a11,11,0,0,0-9,8.92A1.59,1.59,0,0,0,2.46,12,1.52,1.52,0,0,0,4.11,10.7a8,8,0,0,1,6.66-6.61A1.42,1.42,0,0,0,12,2.69h0A1.57,1.57,0,0,0,10.14,1.16Z"
+      >
+        <animateTransform
+          attributeName="transform"
+          dur="0.75s"
+          repeatCount="indefinite"
+          type="rotate"
+          values="0 12 12;360 12 12"
+        />
+      </path>
+    </svg>
+  );
+};
--- a/packages/ui-web-tw/src/assets/svg/SunSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/SunSvg.tsx
@@ -0,0 +1,12 @@
+export const SunSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth="2"
+      d="M8 12a4 4 0 1 0 8 0a4 4 0 1 0-8 0m-5 0h1m8-9v1m8 8h1m-9 8v1M5.6 5.6l.7.7m12.1-.7l-.7.7m0 11.4l.7.7m-12.1-.7l-.7.7"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/UserSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/UserSvg.tsx
@@ -0,0 +1,14 @@
+export const UserSvg = (props: React.SVGProps<SVGSVGElement>) => {
+  return (
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+      <path
+        fill="none"
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        strokeWidth="1.5"
+        d="M19.618 21.25c0-3.602-4.016-6.53-7.618-6.53s-7.618 2.928-7.618 6.53M12 11.456a4.353 4.353 0 1 0 0-8.706a4.353 4.353 0 0 0 0 8.706"
+      />
+    </svg>
+  );
+};
--- a/packages/ui-web-tw/src/assets/svg/VolumeHighSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/VolumeHighSvg.tsx
@@ -0,0 +1,12 @@
+export const VolumeHighSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M15 8a5 5 0 0 1 0 8m2.7-11a9 9 0 0 1 0 14M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/VolumeLowSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/VolumeLowSvg.tsx
@@ -0,0 +1,12 @@
+export const VolumeLowSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M15 8a5 5 0 0 1 0 8m-9-1H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5z"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/assets/svg/VolumeMuteSvg.tsx
+++ b/packages/ui-web-tw/src/assets/svg/VolumeMuteSvg.tsx
@@ -0,0 +1,12 @@
+export const VolumeMuteSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
+    <path
+      fill="none"
+      stroke="currentColor"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+      stroke-width="2"
+      d="M6 15H4a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h2l3.5-4.5A.8.8 0 0 1 11 5v14a.8.8 0 0 1-1.5.5zm10-5l4 4m0-4l-4 4"
+    />
+  </svg>
+);
--- a/packages/ui-web-tw/src/common/Box.tsx
+++ b/packages/ui-web-tw/src/common/Box.tsx
@@ -0,0 +1,40 @@
+import React from "react";
+import { cn } from "tailwind-variants";
+import { type CommonProps } from "./CommonProps";
+
+// 别名<约束>=值
+// 千万不要 C = As extend React.ElementType，这样子连等号，会切断推导
+type AsProp<C extends React.ElementType> = { as?: C };
+
+type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
+
+export type PolymorphicProps<C extends React.ElementType, P = {}> = (P &
+  AsProp<C>) &
+  Omit<React.ComponentPropsWithRef<C>, PropsToOmit<C, P>>;
+
+interface BoxProps<C extends React.ElementType> extends CommonProps {
+  as?: C;
+}
+
+const Box = <C extends React.ElementType = "div">(
+  props: PolymorphicProps<C, BoxProps<C>>,
+  ref?: React.ComponentPropsWithRef<C>["ref"],
+) => {
+  const { as: Component = "div", children, className, ...rest } = props;
+
+  const boxRootClass = cn(className);
+
+  return (
+    <Component ref={ref} className={boxRootClass} {...(rest as any)}>
+      {children}
+    </Component>
+  );
+};
+
+export type BoxComponent = <C extends React.ElementType = "div">(
+  props: PolymorphicProps<C, BoxProps<C>> & {
+    ref?: React.ComponentPropsWithRef<C>["ref"];
+  },
+) => React.ReactElement | null;
+
+export default Box as BoxComponent;
--- a/packages/ui-web-tw/src/common/CommonProps.ts
+++ b/packages/ui-web-tw/src/common/CommonProps.ts
@@ -0,0 +1,9 @@
+import { type CSSProperties, type ReactNode } from "react";
+
+export type CommonProps = {
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  disabled?: boolean;
+  key?: string;
+};
--- a/packages/ui-web-tw/src/common/Slot.tsx
+++ b/packages/ui-web-tw/src/common/Slot.tsx
@@ -0,0 +1,33 @@
+import { mergeProps } from "@base-ui/react";
+import * as React from "react";
+import { cn } from "tailwind-variants";
+
+export interface SlotProps extends React.HTMLAttributes<HTMLElement> {
+  children: React.ReactNode;
+}
+
+export const Slot = React.forwardRef<HTMLElement, SlotProps>(
+  ({ children, className: externalClassName, ...restProps }, ref) => {
+    if (!React.isValidElement(children)) {
+      return null;
+    }
+
+    const child = children as React.ReactElement<Record<string, unknown>>;
+    const childProps = child.props || {};
+
+    const mergedClassName = cn(
+      childProps.className as string | undefined,
+      externalClassName,
+    );
+
+    const otherMergedProps = mergeProps(childProps, restProps);
+
+    return React.cloneElement(child, {
+      ...otherMergedProps,
+      className: mergedClassName,
+      ref,
+    });
+  },
+);
+
+Slot.displayName = "Slot";
--- a/packages/ui-web-tw/src/component/accordion/Accordion.css
+++ b/packages/ui-web-tw/src/component/accordion/Accordion.css
@@ -0,0 +1,9 @@
+.accordion-root {
+  box-sizing: border-box;
+  display: flex;
+  width: 24rem;
+  max-width: calc(100vw - 8rem);
+  flex-direction: column;
+  justify-content: center;
+  color: var(--color-gray-900);
+}
--- a/packages/ui-web-tw/src/component/accordion/Accordion.tsx
+++ b/packages/ui-web-tw/src/component/accordion/Accordion.tsx
@@ -0,0 +1,20 @@
+import * as BUI from "@base-ui/react";
+import type { ComponentProps } from "react";
+import { type CommonProps } from "../../common/CommonProps";
+import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
+
+type AccordionProps = CommonProps &
+  ComponentProps<typeof BUI.Accordion.Root> & {
+    size?: "xs" | "sm" | "md" | "lg";
+    chevronPosition?: "left" | "right";
+  };
+
+export const Accordion = (props: AccordionProps) => {
+  const { children, size, ...rest } = props;
+  const accordionRootCls = itemSizeRecipe({ size });
+  return (
+    <BUI.Accordion.Root className={accordionRootCls} {...rest}>
+      {children}
+    </BUI.Accordion.Root>
+  );
+};
--- a/packages/ui-web-tw/src/component/accordion/AccordionItem.tsx
+++ b/packages/ui-web-tw/src/component/accordion/AccordionItem.tsx
@@ -0,0 +1 @@
+export const AccordionItem = () => {};
--- a/packages/ui-web-tw/src/component/accordion/AccordionPanel.tsx
+++ b/packages/ui-web-tw/src/component/accordion/AccordionPanel.tsx
@@ -0,0 +1 @@
+export const AccordionPanel = () => {};
--- a/packages/ui-web-tw/src/component/accordion/AccordionTrigger.tsx
+++ b/packages/ui-web-tw/src/component/accordion/AccordionTrigger.tsx
@@ -0,0 +1 @@
+export const AccordionTrigger = () => {};
--- a/packages/ui-web-tw/src/component/avatar/Avatar.css
+++ b/packages/ui-web-tw/src/component/avatar/Avatar.css
@@ -0,0 +1,19 @@
+@layer components {
+  .avatar-root {
+    background-color: var(--default-bg);
+  }
+  .avatar-image {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+  }
+
+  .avatar-fallback {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+    background-color: var(--default-bg);
+  }
+}
--- a/packages/ui-web-tw/src/component/avatar/Avatar.tsx
+++ b/packages/ui-web-tw/src/component/avatar/Avatar.tsx
@@ -0,0 +1,25 @@
+import * as BUI from "@base-ui/react";
+import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
+import { UserSvg } from "../../assets/svg/UserSvg";
+import { Icon } from "../icon/Icon";
+
+type AvatarPorps = {
+  size?: "sm" | "md" | "lg";
+  src?: string;
+  name?: string;
+};
+
+export const Avatar = (props: AvatarPorps) => {
+  const { size = "md", src, name } = props;
+
+  const avatarCls = itemSizeRecipe({ size, iconOnly: true });
+
+  return (
+    <BUI.Avatar.Root className={avatarCls}>
+      <BUI.Avatar.Image src={src} />
+      <BUI.Avatar.Fallback>
+        <Icon size={size} svg={<UserSvg />} />
+      </BUI.Avatar.Fallback>
+    </BUI.Avatar.Root>
+  );
+};
--- a/packages/ui-web-tw/src/component/button/Button.tsx
+++ b/packages/ui-web-tw/src/component/button/Button.tsx
@@ -0,0 +1,62 @@
+"use client";
+import type { ComponentProps, ReactNode } from "react";
+import * as BUI from "@base-ui/react";
+import { brandRecipe } from "../../styles/recipe/brand.recipe";
+import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
+import { variantRecipe } from "../../styles/recipe/variant.recipe";
+import { Icon } from "../icon/Icon";
+import type { CommonProps } from "../../common/CommonProps";
+import { cn } from "tailwind-variants";
+
+type ButtonProps = {
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "filled" | "outline" | "subtle" | "ghost";
+  shape?: "rounded" | "square" | "circle";
+  brand?: "success" | "danger" | "info" | "warning" | "default";
+  loading?: boolean;
+  iconSvg?: ReactNode;
+  iconOnly?: boolean;
+  hideIcon?: boolean;
+} & ComponentProps<typeof BUI.Button> &
+  CommonProps;
+
+export const Button = (props: ButtonProps) => {
+  const {
+    className,
+    children,
+    size = "md",
+    variant = "filled",
+    shape = "rounded",
+    brand,
+    loading,
+    disabled,
+    iconSvg,
+    iconOnly,
+    hideIcon = false,
+  } = props;
+
+  const currentBrand =
+    brand == undefined ? (variant == "filled" ? "info" : "default") : brand;
+
+  const buttonCls = cn(
+    itemSizeRecipe({ size, shape, iconOnly }),
+    variantRecipe({ variant, disabled: loading || disabled }),
+    brandRecipe({ brand: currentBrand }),
+    className,
+  );
+
+  return (
+    <BUI.Button className={buttonCls} disabled={loading || disabled}>
+      {iconSvg ? (
+        hideIcon ? (
+          iconOnly ? (
+            <Icon size={size} />
+          ) : null
+        ) : (
+          <Icon size={size} svg={iconSvg} />
+        )
+      ) : null}
+      {!iconOnly && children}
+    </BUI.Button>
+  );
+};
--- a/packages/ui-web-tw/src/component/checkbox/Checkbox.css
+++ b/packages/ui-web-tw/src/component/checkbox/Checkbox.css
@@ -0,0 +1,19 @@
+@layer components {
+  .checkbox-root {
+    &[data-unchecked] {
+      border: 1px solid var(--color-gray-300);
+      background-color: transparent;
+    }
+    &[data-checked] {
+      background-color: var(--brand-bg);
+    }
+  }
+  .checkbox-indicator {
+    display: flex;
+    color: var(--color-gray-50);
+
+    &[data-unchecked] {
+      display: none;
+    }
+  }
+}
--- a/packages/ui-web-tw/src/component/checkbox/Checkbox.tsx
+++ b/packages/ui-web-tw/src/component/checkbox/Checkbox.tsx
@@ -0,0 +1,76 @@
+"use client";
+import * as BUI from "@base-ui/react";
+import type { ReactNode } from "react";
+import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
+import { variantRecipe } from "../../styles/recipe/variant.recipe";
+import { type CommonProps } from "../../common/CommonProps";
+import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
+import { CheckIndicatorSvg } from "../../assets/svg/CheckIndicatorSvg";
+import { Slot } from "../../common/Slot";
+import { cn } from "tailwind-variants";
+
+type CheckboxProps = CommonProps & {
+  size?: "xs" | "sm" | "md";
+  shape?: "square" | "rounded";
+  icon?: ReactNode;
+  hideIcon?: boolean;
+  iconPlaceholder?: boolean;
+};
+
+export const Checkbox = (props: CheckboxProps) => {
+  const {
+    className,
+    children,
+    size = "sm",
+    shape = "square",
+    icon,
+    hideIcon = false,
+    iconPlaceholder = false,
+    disabled,
+  } = props;
+
+  const checkboxCls = cn(
+    itemSizeRecipe({ size, shape }),
+    variantRecipe({ variant: "ghost", disabled }),
+    "brand-default",
+    className,
+  );
+  const checkboxRootCls = cn(
+    inlineSizeRecipe({
+      size,
+      shape: "rounded",
+      iconOnly: true,
+    }),
+    "checkbox-root",
+    "brand-info",
+  );
+  const checkIndicatorCls = cn(
+    inlineSizeRecipe({
+      size,
+      shape: "rounded",
+      iconOnly: true,
+    }),
+    "checkbox-indicator",
+  );
+  const checkIndicatorSvgCls = inlineSizeRecipe({
+    size,
+    iconOnly: true,
+  });
+
+  const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
+
+  return (
+    <BUI.Field.Root>
+      <BUI.Field.Label className={checkboxCls}>
+        <BUI.Checkbox.Root className={checkboxRootCls}>
+          <BUI.Checkbox.Indicator className={checkIndicatorCls}>
+            <CheckIndicatorSvg className={checkIndicatorSvgCls} />
+          </BUI.Checkbox.Indicator>
+        </BUI.Checkbox.Root>
+        {icon && !hideIcon && <Slot className={iconCls}>{icon}</Slot>}
+        {hideIcon && iconPlaceholder && <span className={iconCls}></span>}
+        {children}
+      </BUI.Field.Label>
+    </BUI.Field.Root>
+  );
+};
--- a/packages/ui-web-tw/src/component/icon/Icon.tsx
+++ b/packages/ui-web-tw/src/component/icon/Icon.tsx
@@ -0,0 +1,21 @@
+import { type ReactNode } from "react";
+import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
+import { Slot } from "../../common/Slot";
+import { cn } from "tailwind-variants";
+
+type IconProps = {
+  size?: "xs" | "sm" | "md" | "lg";
+  svg?: ReactNode;
+};
+
+export const Icon = (props: IconProps) => {
+  const { size, svg } = props;
+
+  const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
+
+  return (
+    <span className={iconCls}>
+      {svg ? <Slot className={iconCls}>{svg}</Slot> : null}
+    </span>
+  );
+};
--- a/packages/ui-web-tw/src/component/theme/Theme.tsx
+++ b/packages/ui-web-tw/src/component/theme/Theme.tsx
@@ -0,0 +1,19 @@
+
+import { ThemeContext } from "./ThemeContext";
+import { type ReactNode } from "react";
+import { cn } from "tailwind-variants";
+
+type ThemeProps = {
+  theme?: "light" | "dark";
+  children?: ReactNode;
+};
+
+export const Theme = (props: ThemeProps) => {
+  const { theme = "light", children } = props;
+  const themeCls = cn(theme, "brand-default") as string;
+  return (
+    <ThemeContext.Provider value={{ themeCls }}>
+      <div className={themeCls}>{children}</div>
+    </ThemeContext.Provider>
+  );
+};
--- a/packages/ui-web-tw/src/component/theme/ThemeContext.tsx
+++ b/packages/ui-web-tw/src/component/theme/ThemeContext.tsx
@@ -0,0 +1,5 @@
+import React from "react";
+
+type ThemeContextValue = { themeCls?: string };
+
+export const ThemeContext = React.createContext<ThemeContextValue>({});
--- a/packages/ui-web-tw/src/component/theme/useTheme.ts
+++ b/packages/ui-web-tw/src/component/theme/useTheme.ts
@@ -0,0 +1,6 @@
+import { useContext } from "react";
+import { ThemeContext } from "./ThemeContext";
+
+export const useTheme = () => {
+  return useContext(ThemeContext);
+};
--- a/packages/ui-web-tw/src/component/tooltip/Tooltip.css
+++ b/packages/ui-web-tw/src/component/tooltip/Tooltip.css
@@ -0,0 +1,50 @@
+@layer components {
+  .tooltip-arrow {
+    display: flex;
+    fill: aquamarine;
+
+    &[data-side="top"] {
+      bottom: -6px;
+      rotate: 180deg;
+    }
+
+    &[data-side="bottom"] {
+      top: -6px;
+      rotate: 0deg;
+    }
+
+    &[data-side="left"] {
+      right: -8px;
+      rotate: 90deg;
+    }
+
+    &[data-side="right"] {
+      left: -8px;
+      rotate: -90deg;
+    }
+  }
+
+  .tooltip-popup {
+    display: flex;
+    background-color: var(--base-bg);
+    border: 1px solid color-mix(in srgb, var(--brand-bg) 40%, white);
+    filter: drop-shadow(var(--drop-shadow-sm));
+    transform-origin: var(--transform-origin);
+    transition:
+      transform 50ms,
+      opacity 50ms;
+    &[data-starting-style],
+    &[data-ending-style] {
+      opacity: 0;
+      transform: scale(0.9);
+    }
+
+    &[data-instant] {
+      transition: none;
+    }
+  }
+
+  .tooltip-arrow-border {
+    fill: color-mix(in srgb, var(--brand-bg) 40%, white);
+  }
+}
--- a/packages/ui-web-tw/src/component/tooltip/Tooltip.tsx
+++ b/packages/ui-web-tw/src/component/tooltip/Tooltip.tsx
@@ -0,0 +1,14 @@
+"use client";
+import * as BUI from "@base-ui/react";
+
+type TooltipProps = BUI.Tooltip.Root.Props;
+
+export const Tooltip = (props: TooltipProps) => {
+  const { children, open } = props;
+
+  return (
+    <BUI.Tooltip.Provider>
+      <BUI.Tooltip.Root open={open}>{children}</BUI.Tooltip.Root>
+    </BUI.Tooltip.Provider>
+  );
+};
--- a/packages/ui-web-tw/src/component/tooltip/TooltipPopup.tsx
+++ b/packages/ui-web-tw/src/component/tooltip/TooltipPopup.tsx
@@ -0,0 +1,53 @@
+"use client";
+import * as BUI from "@base-ui/react";
+import { useTheme } from "../theme/useTheme";
+import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
+import { type ReactNode } from "react";
+import { cn } from "tailwind-variants";
+
+type TooltipPopupProps = {
+  hideArrow?: boolean;
+  side?: "top" | "bottom" | "left" | "right";
+  children?: ReactNode;
+};
+
+export const TooltipPopup = (props: TooltipPopupProps) => {
+  const { children, hideArrow = false, side } = props;
+  const { themeCls } = useTheme();
+
+  const tooltipPopupCls = cn(
+    themeCls,
+    itemSizeRecipe({ size: "xs", shape: "rounded" }),
+    "tooltip-popup",
+  );
+
+  return (
+    <BUI.Tooltip.Portal>
+      <BUI.Tooltip.Positioner sideOffset={8} side={side}>
+        <BUI.Tooltip.Popup className={tooltipPopupCls}>
+          {!hideArrow && (
+            <BUI.Tooltip.Arrow className="tooltip-arrow">
+              <PopupArrowUpSvg />
+            </BUI.Tooltip.Arrow>
+          )}
+          {children}
+        </BUI.Tooltip.Popup>
+      </BUI.Tooltip.Positioner>
+    </BUI.Tooltip.Portal>
+  );
+};
+
+const PopupArrowUpSvg = (props: React.SVGProps<SVGSVGElement>) => (
+  <svg
+    width="10"
+    height="6"
+    viewBox="0 0 10 6"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path d="M0 6 L5 0 L10 6 Z" className="tooltip-arrow-border" />
+
+    <path d="M1 6 L5 1 L9 6 Z" fill="var(--base-bg)" />
+  </svg>
+);
--- a/packages/ui-web-tw/src/component/tooltip/TooltipTrigger.tsx
+++ b/packages/ui-web-tw/src/component/tooltip/TooltipTrigger.tsx
@@ -0,0 +1,13 @@
+"use client";
+import * as BUI from "@base-ui/react";
+
+type TooltipTrigerProps = BUI.Tooltip.Trigger.Props;
+
+export const TooltipTriger = (props: TooltipTrigerProps) => {
+  const { children, delay = 100 } = props;
+  return (
+    <BUI.Tooltip.Trigger render={<div />} delay={delay}>
+      {children}
+    </BUI.Tooltip.Trigger>
+  );
+};
--- a/packages/ui-web-tw/src/component/username-field/UsernameField.tsx
+++ b/packages/ui-web-tw/src/component/username-field/UsernameField.tsx
@@ -0,0 +1 @@
+export const UsernameField = () => {};
--- a/packages/ui-web-tw/src/index.css
+++ b/packages/ui-web-tw/src/index.css
@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@import './component/accordion/Accordion.css';
+@import './component/avatar/Avatar.css';
+@import './component/checkbox/Checkbox.css';
+@import './component/tooltip/Tooltip.css';
+@import './styles/theme/global.css';
+@import './styles/utility/brand.css';
+@import './styles/utility/font.css';
+@import './styles/utility/gap.css';
+@import './styles/utility/height.css';
+@import './styles/utility/loading.css';
+@import './styles/utility/margin.css';
+@import './styles/utility/padding.css';
+@import './styles/utility/skin.css';
+@import './styles/utility/variant.css';
+@import './styles/utility/width.css';
--- a/packages/ui-web-tw/src/index.ts
+++ b/packages/ui-web-tw/src/index.ts
@@ -0,0 +1,44 @@
+import './index.css';
+
+export * from './assets/svg/BoldSvg';
+export * from './assets/svg/CheckIndicatorSvg';
+export * from './assets/svg/ChevronRightSvg';
+export * from './assets/svg/CutSvg';
+export * from './assets/svg/DownloadSvg';
+export * from './assets/svg/FileSvg';
+export * from './assets/svg/KeySvg';
+export * from './assets/svg/MeshSvg';
+export * from './assets/svg/MoonSvg';
+export * from './assets/svg/PasteSvg';
+export * from './assets/svg/Ruler';
+export * from './assets/svg/SearchSvg';
+export * from './assets/svg/SettingSvg';
+export * from './assets/svg/SpinnerSvg';
+export * from './assets/svg/SunSvg';
+export * from './assets/svg/UserSvg';
+export * from './assets/svg/VolumeHighSvg';
+export * from './assets/svg/VolumeLowSvg';
+export * from './assets/svg/VolumeMuteSvg';
+export * from './common/Box';
+export * from './common/CommonProps';
+export * from './common/Slot';
+export * from './component/accordion/Accordion';
+export * from './component/accordion/AccordionItem';
+export * from './component/accordion/AccordionPanel';
+export * from './component/accordion/AccordionTrigger';
+export * from './component/avatar/Avatar';
+export * from './component/button/Button';
+export * from './component/checkbox/Checkbox';
+export * from './component/icon/Icon';
+export * from './component/theme/Theme';
+export * from './component/theme/ThemeContext';
+export * from './component/theme/useTheme';
+export * from './component/tooltip/Tooltip';
+export * from './component/tooltip/TooltipPopup';
+export * from './component/tooltip/TooltipTrigger';
+export * from './component/username-field/UsernameField';
+export * from './styles/recipe/IinlineSize.recipe';
+export * from './styles/recipe/ItemSize.recipe';
+export * from './styles/recipe/brand.recipe';
+export * from './styles/recipe/variant.recipe';
+export * from '../../css/utils/clspm';
--- a/packages/ui-web-tw/src/styles/recipe/IinlineSize.recipe.ts
+++ b/packages/ui-web-tw/src/styles/recipe/IinlineSize.recipe.ts
@@ -0,0 +1,91 @@
+import { tv } from "tailwind-variants";
+
+export const inlineSizeRecipe = tv({
+  base: "relative overflow-hidden flex flex-nowrap justify-center items-center box-border",
+  variants: {
+    size: {
+      xs: "text-xs h-inline-xs",
+      sm: "text-sm h-inline-sm",
+      md: "text-md h-inline-md",
+      lg: "text-lg h-inline-lg",
+      xl: "text-xl h-inline-xl",
+      "2xl": "text-2xl h-inline-2xl",
+    },
+    shape: {
+      square: "rounded-none",
+      rounded: "",
+      circle: "rounded-full",
+    },
+    iconOnly: {
+      true: "",
+      false: "",
+    },
+    disabled: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      shape: "rounded",
+      size: "xs",
+      class: "rounded-xs",
+    },
+    {
+      shape: "rounded",
+      size: "sm",
+      class: "rounded-sm",
+    },
+    {
+      shape: "rounded",
+      size: "md",
+      class: "rounded-md",
+    },
+    {
+      shape: "rounded",
+      size: "lg",
+      class: "rounded-lg",
+    },
+    {
+      shape: "rounded",
+      size: "xl",
+      class: "rounded-xl",
+    },
+    {
+      shape: "rounded",
+      size: "2xl",
+      class: "rounded-2xl",
+    },
+    // --------------------------------------------------
+    {
+      iconOnly: true,
+      size: "xs",
+      class: "w-inline-xs",
+    },
+    {
+      iconOnly: true,
+      size: "sm",
+      class: "w-inline-sm",
+    },
+    {
+      iconOnly: true,
+      size: "md",
+      class: "w-inline-md",
+    },
+    {
+      iconOnly: true,
+      size: "lg",
+      class: "w-inline-lg",
+    },
+    {
+      iconOnly: true,
+      size: "xl",
+      class: "w-inline-xl",
+    },
+    {
+      iconOnly: true,
+      size: "2xl",
+      class: "w-inline-2xl",
+    },
+  ],
+});
--- a/packages/ui-web-tw/src/styles/recipe/ItemSize.recipe.ts
+++ b/packages/ui-web-tw/src/styles/recipe/ItemSize.recipe.ts
@@ -0,0 +1,93 @@
+import { tv } from "tailwind-variants";
+
+export const itemSizeRecipe = tv({
+  base: "relative select-none flex flex-nowrap justify-center items-center",
+  variants: {
+    size: {
+      xs: "text-xs h-item-xs gap-xs",
+      sm: "text-sm h-item-sm gap-sm",
+      md: "text-md h-item-md gap-md",
+      lg: "text-lg h-item-lg gap-lg",
+      xl: "text-xl h-item-xl gap-xl",
+      "2xl": "text-2xl h-item-2xl gap-2xl",
+    },
+    shape: {
+      square: "rounded-none",
+      rounded: "",
+      circle: "rounded-full",
+    },
+    iconOnly: {
+      true: "px-none",
+      false: "",
+    },
+    disabled: {
+      true: "",
+      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",
+    },
+  ],
+});
--- a/packages/ui-web-tw/src/styles/recipe/brand.recipe.ts
+++ b/packages/ui-web-tw/src/styles/recipe/brand.recipe.ts
@@ -0,0 +1,13 @@
+import { tv } from "tailwind-variants";
+
+export const brandRecipe = tv({
+  variants: {
+    brand: {
+      success: "brand-success",
+      danger: "brand-danger",
+      info: "brand-info",
+      warning: "brand-warning",
+      default: "brand-default",
+    },
+  },
+});
--- a/packages/ui-web-tw/src/styles/recipe/variant.recipe.ts
+++ b/packages/ui-web-tw/src/styles/recipe/variant.recipe.ts
@@ -0,0 +1,58 @@
+import { tv } from "tailwind-variants";
+
+export const variantRecipe = tv({
+  variants: {
+    variant: {
+      filled: "",
+      outline: "",
+      subtle: "",
+      ghost: "",
+    },
+    disabled: {
+      true: "",
+      false: "",
+    },
+  },
+  compoundVariants: [
+    {
+      disabled: false,
+      variant: "filled",
+      class: "variant-filled",
+    },
+    {
+      disabled: false,
+      variant: "outline",
+      class: "variant-outline",
+    },
+    {
+      disabled: false,
+      variant: "subtle",
+      class: "variant-subtle",
+    },
+    {
+      disabled: false,
+      variant: "ghost",
+      class: "variant-ghost",
+    },
+    {
+      disabled: true,
+      variant: "filled",
+      class: "variant-filled-disabled",
+    },
+    {
+      disabled: true,
+      variant: "outline",
+      class: "variant-outline-disabled",
+    },
+    {
+      disabled: true,
+      variant: "subtle",
+      class: "variant-subtle-disabled",
+    },
+    {
+      disabled: true,
+      variant: "ghost",
+      class: "variant-ghost-disabled",
+    },
+  ],
+});
--- a/packages/ui-web-tw/src/styles/theme/global.css
+++ b/packages/ui-web-tw/src/styles/theme/global.css
@@ -0,0 +1,44 @@
+@theme {
+  --text-md: 1rem;
+  --text-md--line-height: calc(1.5 / 1);
+  --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);
+}
--- a/packages/ui-web-tw/src/styles/utility/brand.css
+++ b/packages/ui-web-tw/src/styles/utility/brand.css
@@ -0,0 +1,40 @@
+@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);
+}
+@utility 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);
+}
+@utility 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);
+}
+@utility 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);
+}
+@utility 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);
+}
--- a/packages/ui-web-tw/src/styles/utility/font.css
+++ b/packages/ui-web-tw/src/styles/utility/font.css
@@ -0,0 +1,4 @@
+@utility text-md {
+  font-size: var(--text-md); /* 1rem (16px) */
+  line-height: var(--text-md--line-height); /* calc(1.5 / 1) */
+}
--- a/packages/ui-web-tw/src/styles/utility/gap.css
+++ b/packages/ui-web-tw/src/styles/utility/gap.css
@@ -0,0 +1,18 @@
+@utility gap-xs {
+  gap: calc(var(--spacing) * 0.5);
+}
+@utility gap-sm {
+  gap: calc(var(--spacing) * 1);
+}
+@utility gap-md {
+  gap: calc(var(--spacing) * 1.5);
+}
+@utility gap-lg {
+  gap: calc(var(--spacing) * 2);
+}
+@utility gap-xl {
+  gap: calc(var(--spacing) * 2.5);
+}
+@utility gap-2xl {
+  gap: calc(var(--spacing) * 3);
+}
--- a/packages/ui-web-tw/src/styles/utility/height.css
+++ b/packages/ui-web-tw/src/styles/utility/height.css
@@ -0,0 +1,40 @@
+@utility h-item-xs {
+  /* 24px minimum touch size for text line */
+  height: 24px;
+}
+@utility h-item-sm {
+  /* 28px save space for most used size */
+  height: 28px;
+}
+@utility h-item-md {
+  /* 34px most used size */
+  height: 34px;
+}
+@utility h-item-lg {
+  /* 44px maximum touch size without waste */
+  height: 44px;
+}
+@utility h-item-xl {
+  height: calc(var(--spacing) * 16);
+}
+@utility h-item-2xl {
+  height: calc(var(--spacing) * 16);
+}
+@utility h-inline-xs {
+  height: calc(var(--text-xs--line-height) * var(--text-xs));
+}
+@utility h-inline-sm {
+  height: calc(var(--text-sm--line-height) * var(--text-sm));
+}
+@utility h-inline-md {
+  height: calc(var(--text-md--line-height) * var(--text-md));
+}
+@utility h-inline-lg {
+  height: calc(var(--text-lg--line-height) * var(--text-lg));
+}
+@utility h-inline-xl {
+  height: calc(var(--text-xl--line-height) * var(--text-xl));
+}
+@utility h-inline-2xl {
+  height: calc(var(--text-2xl--line-height) * var(--text-2xl));
+}
--- a/packages/ui-web-tw/src/styles/utility/loading.css
+++ b/packages/ui-web-tw/src/styles/utility/loading.css
@@ -0,0 +1,16 @@
+@utility loading-true {
+  position: "absolute";
+  top: "50%";
+  left: "50%";
+  transform: "translate(-50%, -50%)";
+  opacity: 1;
+  transition: "top 0.15s ease-in, opacity 0.1s ease-in";
+}
+@utility loading-false {
+  position: "absolute";
+  top: "-50%";
+  left: "50%";
+  transform: "translate(-50%, -50%)";
+  opacity: 0;
+  transition: "top 0.15s ease-out, opacity 0.1s ease-out";
+}
--- a/packages/ui-web-tw/src/styles/utility/margin.css
+++ b/packages/ui-web-tw/src/styles/utility/margin.css
@@ -0,0 +1,21 @@
+@utility mr-none {
+  margin-right: 0;
+}
+@utility mr-sm {
+  margin-right: calc(var(--spacing) * 1);
+}
+@utility mr-sm {
+  margin-right: calc(var(--spacing) * 2);
+}
+@utility mr-md {
+  margin-right: calc(var(--spacing) * 3);
+}
+@utility mr-lg {
+  margin-right: calc(var(--spacing) * 4);
+}
+@utility mr-xl {
+  margin-right: calc(var(--spacing) * 2);
+}
+@utility mr-2xl {
+  margin-right: calc(var(--spacing) * 2);
+}
--- a/packages/ui-web-tw/src/styles/utility/padding.css
+++ b/packages/ui-web-tw/src/styles/utility/padding.css
@@ -0,0 +1,40 @@
+@utility px-none {
+  padding-inline: 0px;
+}
+@utility px-xs {
+  padding-inline: 6px;
+}
+@utility px-sm {
+  padding-inline: 8px;
+}
+@utility px-md {
+  padding-inline: 10px;
+}
+@utility px-lg {
+  padding-inline: 16px;
+}
+@utility px-xl {
+  padding-inline: var(--radius-xl);
+}
+@utility px-2xl {
+  padding-inline: var(--radius-2xl);
+}
+@utility py-xs {
+  /* 2px correspond to rounded-xs */
+  padding-block: var(--radius-xs);
+}
+@utility py-sm {
+  padding-block: var(--radius-sm);
+}
+@utility py-md {
+  padding-block: var(--radius-md);
+}
+@utility py-lg {
+  padding-block: var(--radius-lg);
+}
+@utility py-xl {
+  padding-block: var(--radius-xl);
+}
+@utility py-2xl {
+  padding-block: var(--radius-2xl);
+}
--- a/packages/ui-web-tw/src/styles/utility/skin.css
+++ b/packages/ui-web-tw/src/styles/utility/skin.css
@@ -0,0 +1,9 @@
+@utility light {
+  --base-fg: var(--color-gray-950);
+  --base-bg: var(--color-white);
+}
+
+@utility dark {
+  --base-fg: var(--color-gray-50);
+  --base-bg: var(--color-black);
+}
--- a/packages/ui-web-tw/src/styles/utility/variant.css
+++ b/packages/ui-web-tw/src/styles/utility/variant.css
@@ -0,0 +1,204 @@
+@utility variant-filled {
+  --filled-fg: var(--color-white);
+  --filled-fg-hover: var(--color-white);
+  --filled-fg-active: var(--color-white);
+  --filled-bg: var(--brand-bg);
+  --filled-bg-hover: var(--brand-bg-hover);
+  --filled-bg-active: var(--brand-bg-active);
+  --filled-border-color: var(--color-transparent);
+
+  color: var(--filled-fg);
+  background-color: var(--filled-bg);
+  border-color: var(--filled-border-color);
+
+  &:hover {
+    background-color: var(--filled-bg-hover);
+    color: var(--filled-fg-hover);
+  }
+
+  &:active {
+    background-color: var(--filled-bg-active);
+    color: var(--filled-fg-active);
+  }
+
+  &:focus-visible {
+    background-color: var(--filled-bg-hover);
+    color: var(--filled-fg-hover);
+  }
+}
+
+@utility variant-outline {
+  --outline-fg: var(--brand-bg);
+  --outline-fg-hover: var(--brand-bg);
+  --outline-fg-active: var(--brand-bg);
+  --outline-bg: var(--color-transparent);
+  --outline-bg-hover: var(--brand-bg-low);
+  --outline-bg-active: var(--brand-bg-low-hover);
+  --outline-border-color: var(--brand-bg);
+
+  color: var(--outline-fg);
+  background-color: var(--outline-bg);
+  border: solid 1px;
+  border-color: var(--outline-border-color);
+
+  &:hover {
+    background-color: var(--outline-bg-hover);
+    color: var(--outline-fg-hover);
+  }
+
+  &:active {
+    background-color: var(--outline-bg-active);
+    color: var(--outline-fg-active);
+  }
+
+  &:focus-visible {
+    background-color: var(--outline-bg-hover);
+    color: var(--outline-fg-hover);
+  }
+}
+
+@utility variant-subtle {
+  --subtle-fg: var(--brand-bg);
+  --subtle-fg-hover: var(--brand-bg);
+  --subtle-fg-active: var(--brand-bg);
+  --subtle-bg: var(--brand-bg-low);
+  --subtle-bg-hover: var(--brand-bg-low-hover);
+  --subtle-bg-active: var(--brand-bg-low-active);
+  --subtle-border-color: var(--color-transparent);
+
+  color: var(--subtle-fg);
+  background-color: var(--subtle-bg);
+  border-color: var(--subtle-border-color);
+
+  &:hover {
+    background-color: var(--subtle-bg-hover);
+    color: var(--subtle-fg-hover);
+  }
+
+  &:active {
+    background-color: var(--subtle-bg-active);
+    color: var(--subtle-fg-active);
+  }
+
+  &:focus-visible {
+    background-color: var(--subtle-bg-hover);
+    color: var(--subtle-fg-hover);
+  }
+}
+
+@utility variant-ghost {
+  --ghost-fg: var(--brand-bg);
+  --ghost-fg-hover: var(--brand-bg);
+  --ghost-fg-active: var(--brand-bg);
+  --ghost-bg: var(--color-transparent);
+  --ghost-bg-hover: var(--brand-bg-low);
+  --ghost-bg-active: var(--brand-bg-low-hover);
+  --ghost-border-color: var(--color-transparent);
+
+  color: var(--ghost-fg);
+  background-color: var(--ghost-bg);
+  border-color: var(--ghost-border-color);
+
+  &:hover {
+    background-color: var(--ghost-bg-hover);
+    color: var(--ghost-fg-hover);
+  }
+
+  &:active {
+    background-color: var(--ghost-bg-active);
+    color: var(--ghost-fg-active);
+  }
+
+  &:focus-visible {
+    background-color: var(--ghost-bg-hover);
+    color: var(--ghost-fg-hover);
+  }
+}
+
+@utility variant-filled-disabled {
+  color: var(--disabled-fg);
+  background-color: var(--disabled-bg);
+  border-color: var(--disabled-border-color);
+  filter: grayscale(100%);
+
+  &:hover {
+    color: var(--disabled-fg);
+    background-color: var(--disabled-bg);
+    border-color: var(--disabled-border-color);
+    filter: grayscale(100%);
+  }
+
+  &:active {
+    color: var(--disabled-fg);
+    background-color: var(--disabled-bg);
+    border-color: var(--disabled-border-color);
+    filter: grayscale(100%);
+  }
+
+  &:focus-visible {
+    color: var(--disabled-fg);
+    background-color: var(--disabled-bg);
+    border-color: var(--disabled-border-color);
+    filter: grayscale(100%);
+  }
+}
+
+@utility variant-outline-disabled {
+  color: var(--disabled-fg);
+  background-color: var(--disabled-bg);
+  border: solid 1px;
+  border-color: var(--disabled-border-color);
+  filter: grayscale(100%);
+
+  &:hover {
+    color: var(--disabled-fg);
+    background-color: var(--disabled-bg);
+    border: solid 1px;
+    border-color: var(--disabled-border-color);
+    filter: grayscale(100%);
+  }
+
+  &:active {
+    color: var(--disabled-fg);
+    background-color: var(--disabled-bg);
+    border: solid 1px;
+    border-color: var(--disabled-border-color);
+    filter: grayscale(100%);
+  }
+
+  &:focus-visible {
+    color: var(--disabled-fg);
+    background-color: var(--disabled-bg);
+    border: solid 1px;
+    border-color: var(--disabled-border-color);
+    filter: grayscale(100%);
+  }
+}
+
+@utility variant-ghost-disabled {
+  color: var(--ghost-fg);
+  background-color: var(--ghost-bg);
+  border-color: var(--ghost-border-color);
+  filter: grayscale(50%);
+
+  &:hover {
+    color: var(--ghost-fg);
+    background-color: var(--ghost-bg);
+    border-color: var(--ghost-border-color);
+    filter: grayscale(50%);
+  }
+
+  &:active {
+    color: var(--ghost-fg);
+    background-color: var(--ghost-bg);
+    border-color: var(--ghost-border-color);
+    filter: grayscale(50%);
+  }
+
+  &:focus-visible {
+    color: var(--ghost-fg);
+    background-color: var(--ghost-bg);
+    border-color: var(--ghost-border-color);
+    filter: grayscale(50%);
+  }
+}
--- a/packages/ui-web-tw/src/styles/utility/width.css
+++ b/packages/ui-web-tw/src/styles/utility/width.css
@@ -0,0 +1,41 @@
+@utility w-item-xs {
+  /* 24px minimum touch size for text line */
+  width: calc(var(--spacing) * 6);
+}
+@utility w-item-sm {
+  /* 30px save space for most used size */
+  width: calc(var(--spacing) * 7.5);
+}
+@utility w-item-md {
+  /* 34px most used size */
+  width: calc(var(--spacing) * 8.5);
+}
+@utility w-item-lg {
+  /* 46px maximum touch size without waste */
+  width: calc(var(--spacing) * 11.5);
+}
+@utility w-item-xl {
+  width: calc(var(--spacing) * 16);
+}
+@utility w-item-2xl {
+  width: calc(var(--spacing) * 16);
+}
+/* ---------------------------------------------------- */
+@utility w-inline-xs {
+  width: calc(var(--text-xs--line-height) * var(--text-xs));
+}
+@utility w-inline-sm {
+  width: calc(var(--text-sm--line-height) * var(--text-sm));
+}
+@utility w-inline-md {
+  width: calc(var(--text-md--line-height) * var(--text-md));
+}
+@utility w-inline-lg {
+  width: calc(var(--text-lg--line-height) * var(--text-lg));
+}
+@utility w-inline-xl {
+  width: calc(var(--text-xl--line-height) * var(--text-xl));
+}
+@utility w-inline-2xl {
+  width: calc(var(--text-2xl--line-height) * var(--text-2xl));
+}
--- a/packages/ui-web-tw/src/types/css.d.ts
+++ b/packages/ui-web-tw/src/types/css.d.ts
@@ -0,0 +1,4 @@
+declare module '*.css' {
+  const content: { [className: string]: string };
+  export default content;
+}
--- a/packages/ui-web-tw/tsconfig.base.json
+++ b/packages/ui-web-tw/tsconfig.base.json
@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "module": "es2022",
+    "moduleResolution": "bundler",
+    "lib": ["ES2025", "DOM", "DOM.Iterable"],
+    "strict": true,
+    "esModuleInterop": true,
+    "skipLibCheck": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true
+  }
+}
--- a/packages/ui-web-tw/tsconfig.build.json
+++ b/packages/ui-web-tw/tsconfig.build.json
@@ -0,0 +1,39 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "./dist",
+    "rootDir": "./src",
+    "jsx": "react-jsx",
+    "declaration": true
+  },
+  "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"
+  ]
+}
--- a/packages/ui-web-tw/tsconfig.json
+++ b/packages/ui-web-tw/tsconfig.json
@@ -0,0 +1,8 @@
+{
+  "extends": "./tsconfig.base.json",
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "noEmit": true
+  },
+  "include": [".", "../css/utils/clspm.ts"]
+}
--- a/packages/ui-web-tw/vite.config.ts
+++ b/packages/ui-web-tw/vite.config.ts
@@ -0,0 +1,41 @@
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import path from "path";
+import tailwindcss from "@tailwindcss/vite";
+import typescript from "@rollup/plugin-typescript";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    tailwindcss(),
+    dts({
+      insertTypesEntry: true,
+    }),
+  ],
+
+  esbuild: false,
+
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "DefgovUIWebTw",
+      formats: ["es", "cjs"],
+      fileName: (format) => `index.${format}.js`,
+    },
+
+    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,
+  },
+});