mm

2026-04-23 18:17:17 +08:00
parent 3a7b48e483
commit 9890864e5c
76 changed files with 1096 additions and 1631 deletions
--- a/.turbo/daemon/934a1a5ec62dbadc-turbo.log.2026-03-28
+++ b/.turbo/daemon/934a1a5ec62dbadc-turbo.log.2026-03-28
@@ -0,0 +1,2 @@
+2026-03-28T01:43:52.309381Z  WARN daemon_server: turborepo_lib::commands::daemon: daemon already running
+2026-03-28T12:18:37.344622Z  WARN daemon_server: turborepo_lib::commands::daemon: daemon already running
--- a/apps/ui-site/package.json
+++ b/apps/ui-site/package.json
@@ -10,9 +10,10 @@
    "preview": "vite preview"
  },
  "dependencies": {
+    "@base-ui/react": "^1.3.0",
+    "@defgov/ui": "workspace:*",
    "react": "^19.2.0",
-    "react-dom": "^19.2.0",
-    "@defgov/ui": "workspace:*"
+    "react-dom": "^19.2.0"
  },
  "devDependencies": {
    "@eslint/js": "^9.39.1",
--- a/apps/ui-site/src/App.tsx
+++ b/apps/ui-site/src/App.tsx
@@ -1,11 +1,15 @@
-import { Skin } from "@defgov/ui";
+import { Theme } from "@defgov/ui";
 import { ButtonGallery } from "./gallery/ButtonGallery";
+import { CheckboxGallery } from "./gallery/CheckboxGallery";
+import { TooltipGallery } from "./gallery/TooltipGallery";

 const App = () => {
  return (
-    <Skin>
+    <Theme>
      <ButtonGallery />
-    </Skin>
+      <CheckboxGallery />
+      <TooltipGallery />
+    </Theme>
  );
 };

--- a/apps/ui-site/src/common/InnerWrap.tsx
+++ b/apps/ui-site/src/common/InnerWrap.tsx
@@ -1,18 +1,20 @@
-import { type ReactNode } from "react";
+import { type CSSProperties, type ReactNode } from "react";

 interface WrapProps {
  children: ReactNode;
+  style?: CSSProperties;
 }

-export function InnerWrap({ children }: WrapProps) {
+export function InnerWrap({ children, style }: WrapProps) {
  return (
    <div
      style={{
        display: "flex",
        margin: "20px",
-        gap: "20px",
+        gap: "10px",
        alignItems: "center",
        flexDirection: "row",
+        ...style,
      }}
    >
      {children}
--- a/apps/ui-site/src/common/OuterWrap.tsx
+++ b/apps/ui-site/src/common/OuterWrap.tsx
@@ -9,8 +9,8 @@ export function OuterWrap({ children }: WrapProps) {
    <div
      style={{
        display: "flex",
-        margin: "20px",
-        gap: "20px",
+        margin: "10px",
+        gap: "10px",
        flexDirection: "column",
      }}
    >
--- a/apps/ui-site/src/gallery/ButtonGallery.tsx
+++ b/apps/ui-site/src/gallery/ButtonGallery.tsx
@@ -6,26 +6,40 @@ export const ButtonGallery = () => {
  return (
    <OuterWrap>
      <InnerWrap>
+        <Button variant="filled" icon={<DownloadSvg />} size="xs">
+          Xsmall
+        </Button>
+        <Button variant="filled" icon={<DownloadSvg />} size="sm">
+          Small
+        </Button>
        <Button variant="filled" icon={<DownloadSvg />} size="md">
-          Button
+          Madium
+        </Button>
+        <Button
+          variant="filled"
+          icon={<DownloadSvg />}
+          size="md"
+          iconOnly={true}
+        >
+          IconOnly
        </Button>
        <Button variant="filled" icon={<DownloadSvg />} size="lg">
-          Button
-        </Button>
-        <Button variant="filled" icon={<DownloadSvg />} size="xl">
-          Button
+          Large
        </Button>
      </InnerWrap>
      <InnerWrap>
        <Button variant="filled" brand="default">
-          Buttun
+          Filled
        </Button>{" "}
        <Button variant="outline" brand="default">
-          Buttun
+          Outline
        </Button>{" "}
        <Button variant="subtle" brand="default">
-          Buttun
+          Subtle
        </Button>
+        <Button variant="ghost" brand="default">
+          Ghost
+        </Button>{" "}
        <Button variant="filled" brand="success">
          Buttun
        </Button>{" "}
@@ -56,7 +70,6 @@ export const ButtonGallery = () => {
          Buttun
        </Button>
      </InnerWrap>
-
      <InnerWrap>
        <Button variant="filled" brand="info">
          Buttun
@@ -67,6 +80,18 @@ export const ButtonGallery = () => {
        <Button variant="subtle" brand="info">
          Buttun
        </Button>
+        <Button variant="filled" brand="info" disabled>
+          Disabled
+        </Button>{" "}
+        <Button variant="outline" brand="info" disabled>
+          Disabled
+        </Button>{" "}
+        <Button variant="subtle" brand="info" disabled>
+          Disabled
+        </Button>{" "}
+        <Button variant="ghost" brand="info" disabled>
+          Disabled
+        </Button>
      </InnerWrap>
    </OuterWrap>
  );
--- a/apps/ui-site/src/gallery/CheckboxGallery.tsx
+++ b/apps/ui-site/src/gallery/CheckboxGallery.tsx
@@ -0,0 +1,26 @@
+import { Checkbox, RulerSvg } from "@defgov/ui";
+import { InnerWrap } from "../common/InnerWrap";
+import { OuterWrap } from "../common/OuterWrap";
+
+export const CheckboxGallery = () => {
+  return (
+    <OuterWrap>
+      <InnerWrap>
+        <Checkbox size="xs" icon={<RulerSvg />}>
+          Ruler
+        </Checkbox>
+        <Checkbox size="sm" icon={<RulerSvg />}>
+          Ruler
+        </Checkbox>
+        <Checkbox
+          size="md"
+          icon={<RulerSvg />}
+          hideIcon={true}
+          iconPlaceholder={true}
+        >
+          Ruler
+        </Checkbox>
+      </InnerWrap>
+    </OuterWrap>
+  );
+};
--- a/apps/ui-site/src/gallery/PopoverGallery.tsx
+++ b/apps/ui-site/src/gallery/PopoverGallery.tsx
--- a/apps/ui-site/src/gallery/TooltipGallery.tsx
+++ b/apps/ui-site/src/gallery/TooltipGallery.tsx
@@ -0,0 +1,43 @@
+import {
+  BoldSvg,
+  Button,
+  Tooltip,
+  TooltipPopup,
+  TooltipTriger,
+} from "@defgov/ui";
+import { InnerWrap } from "../common/InnerWrap";
+import { OuterWrap } from "../common/OuterWrap";
+
+export const TooltipGallery = () => {
+  return (
+    <OuterWrap>
+      <InnerWrap style={{ columnGap: "60px", rowGap: "10px" }}>
+        <Tooltip >
+          <TooltipTriger>
+            <Button icon={<BoldSvg />} iconOnly={true}></Button>
+          </TooltipTriger>
+          <TooltipPopup side="right">Bold</TooltipPopup>
+        </Tooltip>
+        <Tooltip open={true}>
+          <TooltipTriger>
+            <Button icon={<BoldSvg />} iconOnly={true}></Button>
+          </TooltipTriger>
+          <TooltipPopup>Bold</TooltipPopup>
+        </Tooltip>
+        <Tooltip open={true}>
+          <TooltipTriger>
+            <Button icon={<BoldSvg />} iconOnly={true}></Button>
+          </TooltipTriger>
+          <TooltipPopup side="bottom">Bold</TooltipPopup>
+        </Tooltip>
+
+        <Tooltip open={true}>
+          <TooltipTriger>
+            <Button icon={<BoldSvg />} iconOnly={true}></Button>
+          </TooltipTriger>
+          <TooltipPopup side="left">Bold</TooltipPopup>
+        </Tooltip>
+      </InnerWrap>
+    </OuterWrap>
+  );
+};
--- a/package.json
+++ b/package.json
@@ -9,7 +9,7 @@
  "devDependencies": {
    "turbo": "^2.8.0"
  },
-  "packageManager": "pnpm@10.32.1+sha512.a706938f0e89ac1456b6563eab4edf1d1faf3368d1191fc5c59790e96dc918e4456ab2e67d613de1043d2e8c81f87303e6b40d4ffeca9df15ef1ad567348f2be",
+  "packageManager": "pnpm@10.33.1+sha512.05ba3c1d5d1c18f68df06470d74055e62d41fc110a0c660db1b2dfb2785327f04cf0f68345d4609bc52089e7fa0343c31593b2f9594e2c5d5da426230acc9820",
  "engines": {
    "node": ">=20"
  }
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -26,26 +26,19 @@
    "gen-index": "ts-node scripts/generate-index.ts && ts-node scripts/generate-index-css.ts"
  },
  "devDependencies": {
-    "@tsconfig/vite-react": "^7.0.2",
-    "@types/node": "^25.1.0",
-    "@types/react": "^19.2.10",
+    "@types/node": "^25.6.0",
+    "@types/react": "^19.2.14",
    "@types/react-dom": "^19.2.3",
-    "@vitejs/plugin-react": "^5.1.2",
-    "autoprefixer": "^10.4.24",
-    "glob": "^13.0.3",
-    "prettier": "^3.8.1",
+    "glob": "^13.0.6",
    "ts-node": "^10.9.2",
-    "typescript": "^5.9.3",
-    "vite": "^7.3.1",
-    "vite-plugin-dts": "^4.5.4"
+    "typescript": "^6.0.3"
  },
  "dependencies": {
-    "@base-ui/react": "^1.3.0",
-    "@tailwindcss/vite": "^4.2.1",
-    "react": "^19.2.4",
-    "react-dom": "^19.2.4",
+    "@base-ui/react": "^1.4.1",
+    "react": "^19.2.5",
+    "react-dom": "^19.2.5",
    "tailwind-merge": "^3.5.0",
    "tailwind-variants": "^3.2.2",
-    "tailwindcss": "^4.2.1"
+    "tailwindcss": "^4.2.4"
  }
 }
--- a/packages/ui/src/assets/svg/BoldSvg.tsx
+++ b/packages/ui/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/src/assets/svg/CheckIndicatorOutlineSvg.tsx
+++ b/packages/ui/src/assets/svg/CheckIndicatorOutlineSvg.tsx
@@ -1,16 +0,0 @@
-export const CheckIndicatorOutlineSvg = (
-  props: React.SVGProps<SVGSVGElement>,
-) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M19 5v14H5V5zm0-2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2"
-    />
-  </svg>
-);
--- a/packages/ui/src/assets/svg/CheckIndicatorSvg.tsx
+++ b/packages/ui/src/assets/svg/CheckIndicatorSvg.tsx
@@ -1,14 +1,8 @@
 export const CheckIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path
      fill="currentColor"
-      d="M19 3H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2m0 16H5V5h14zM17.99 9l-1.41-1.42l-6.59 6.59l-2.58-2.57l-1.42 1.41l4 3.99z"
+      d="M9 16.17L4.83 12l-1.42 1.41L9 19L21 7l-1.41-1.41z"
    />
  </svg>
 );
--- a/packages/ui/src/assets/svg/ChevronRightSvg.tsx
+++ b/packages/ui/src/assets/svg/ChevronRightSvg.tsx
@@ -1,12 +1,5 @@
-
 export const ChevronRightSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path
      fill="none"
      stroke="currentColor"
--- a/packages/ui/src/assets/svg/CutSvg.tsx
+++ b/packages/ui/src/assets/svg/CutSvg.tsx
@@ -1,11 +1,5 @@
 export const CutSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <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"
--- a/packages/ui/src/assets/svg/DownloadSvg.tsx
+++ b/packages/ui/src/assets/svg/DownloadSvg.tsx
@@ -1,14 +1,8 @@
 export const DownloadSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path
      fill="currentColor"
-      d="M18 15v3H6v-3H4v3c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2v-3zm-1-4l-1.41-1.41L13 12.17V4h-2v8.17L8.41 9.59L7 11l5 5z"
+      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/src/assets/svg/FileSvg.tsx
+++ b/packages/ui/src/assets/svg/FileSvg.tsx
@@ -1,11 +1,5 @@
 export const FileSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <g
      fill="none"
      stroke="currentColor"
--- a/packages/ui/src/assets/svg/KeySvg.tsx
+++ b/packages/ui/src/assets/svg/KeySvg.tsx
@@ -1,11 +1,5 @@
 export const KeySvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <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"
--- a/packages/ui/src/assets/svg/MeshSvg.tsx
+++ b/packages/ui/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/src/assets/svg/MoonSvg.tsx
+++ b/packages/ui/src/assets/svg/MoonSvg.tsx
@@ -1,11 +1,5 @@
 export const MoonSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path
      fill="none"
      stroke="currentColor"
--- a/packages/ui/src/assets/svg/PasteSvg.tsx
+++ b/packages/ui/src/assets/svg/PasteSvg.tsx
@@ -1,11 +1,5 @@
 export const PasteSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <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"
--- a/packages/ui/src/assets/svg/RadioIndicatorOutlineSvg.tsx
+++ b/packages/ui/src/assets/svg/RadioIndicatorOutlineSvg.tsx
@@ -1,16 +0,0 @@
-export const RadioIndicatorOutlineSvg = (
-  props: React.SVGProps<SVGSVGElement>,
-) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8"
-    />
-  </svg>
-);
--- a/packages/ui/src/assets/svg/RadioIndicatorSvg.tsx
+++ b/packages/ui/src/assets/svg/RadioIndicatorSvg.tsx
@@ -1,15 +0,0 @@
-export const RadioIndicatorSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      fill="currentColor"
-      d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10s10-4.48 10-10S17.52 2 12 2m0 18c-4.42 0-8-3.58-8-8s3.58-8 8-8s8 3.58 8 8s-3.58 8-8 8"
-    />
-    <circle cx="12" cy="12" r="5" fill="currentColor" />
-  </svg>
-);
--- a/packages/ui/src/assets/svg/Ruler.tsx
+++ b/packages/ui/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/src/assets/svg/SearchSvg.tsx
+++ b/packages/ui/src/assets/svg/SearchSvg.tsx
@@ -1,11 +1,5 @@
 export const SearchSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <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"
--- a/packages/ui/src/assets/svg/SettingSvg.tsx
+++ b/packages/ui/src/assets/svg/SettingSvg.tsx
@@ -1,11 +1,5 @@
 export const SettingSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path
      fill="currentColor"
      fill-rule="evenodd"
--- a/packages/ui/src/assets/svg/SpinnerSvg.tsx
+++ b/packages/ui/src/assets/svg/SpinnerSvg.tsx
@@ -1,12 +1,6 @@
 export const SpinnerSvg = (props: React.SVGProps<SVGSVGElement>) => {
  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <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"
--- a/packages/ui/src/assets/svg/SunSvg.tsx
+++ b/packages/ui/src/assets/svg/SunSvg.tsx
@@ -1,11 +1,5 @@
 export const SunSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path
      fill="none"
      stroke="currentColor"
--- a/packages/ui/src/assets/svg/UserSvg.tsx
+++ b/packages/ui/src/assets/svg/UserSvg.tsx
@@ -1,12 +1,6 @@
 export const UserSvg = (props: React.SVGProps<SVGSVGElement>) => {
  return (
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="24"
-      height="24"
-      viewBox="0 0 24 24"
-      {...props}
-    >
+    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
      <path
        fill="none"
        stroke="currentColor"
--- a/packages/ui/src/assets/svg/VolumeHighSvg.tsx
+++ b/packages/ui/src/assets/svg/VolumeHighSvg.tsx
@@ -1,19 +1,12 @@
 export const VolumeHighSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    id="a"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path
-      d="M5.91,9h-3.29c-.21,0-.38.17-.38.38v5.25c0,.21.17.38.38.38h3.26c.17,0,.34.06.48.17l4.29,3.51c.17.12.4.09.52-.08.05-.06.07-.14.07-.22V5.63c0-.21-.17-.37-.38-.37-.08,0-.16.03-.22.07l-4.29,3.51c-.13.11-.29.17-.46.17M15,15c.46-.91.75-1.91.75-3s-.28-2.08-.75-3M17.25,17.25c.91-1.59,1.5-3,1.5-5.25s-.56-3.64-1.5-5.25M19.5,19.5c1.41-2.16,2.25-4.29,2.25-7.5s-.84-5.3-2.25-7.5"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
-      stroke-width="1.5"
+      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/src/assets/svg/VolumeLowSvg.tsx
+++ b/packages/ui/src/assets/svg/VolumeLowSvg.tsx
@@ -1,45 +1,12 @@
 export const VolumeLowSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    id="a"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path
-      d="M5.91,9h-3.29c-.21,0-.38.17-.38.38v5.25c0,.21.17.38.38.38h3.26c.17,0,.34.06.48.17l4.29,3.51c.17.12.4.09.52-.08.05-.06.07-.14.07-.22V5.63c0-.21-.17-.37-.38-.37-.08,0-.16.03-.22.07l-4.29,3.51c-.13.11-.29.17-.46.17"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
-      stroke-width="1.5"
-    />
-    <path
-      d="M15,15c.46-.91.75-1.91.75-3s-.28-2.08-.75-3"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
-    />
-    <path
-      d="M17.25,17.25c.91-1.59,1.5-3,1.5-5.25s-.56-3.64-1.5-5.25"
-      fill="none"
-      opacity=".2"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
-    />
-    <path
-      d="M19.5,19.5c1.41-2.16,2.25-4.29,2.25-7.5s-.84-5.3-2.25-7.5"
-      fill="none"
-      opacity=".2"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
+      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/src/assets/svg/VolumeMediumSvg.tsx
+++ b/packages/ui/src/assets/svg/VolumeMediumSvg.tsx
@@ -1,44 +0,0 @@
-export const VolumeMediumSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    id="a"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
-    <path
-      d="M5.91,9h-3.29c-.21,0-.38.17-.38.38v5.25c0,.21.17.38.38.38h3.26c.17,0,.34.06.48.17l4.29,3.51c.17.12.4.09.52-.08.05-.06.07-.14.07-.22V5.63c0-.21-.17-.37-.38-.37-.08,0-.16.03-.22.07l-4.29,3.51c-.13.11-.29.17-.46.17"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
-    />
-    <path
-      d="M15,15c.46-.91.75-1.91.75-3s-.28-2.08-.75-3"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
-    />
-    <path
-      d="M17.25,17.25c.91-1.59,1.5-3,1.5-5.25s-.56-3.64-1.5-5.25"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
-    />
-    <path
-      d="M19.5,19.5c1.41-2.16,2.25-4.29,2.25-7.5s-.84-5.3-2.25-7.5"
-      fill="none"
-      opacity=".2"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
-    />
-  </svg>
-);
--- a/packages/ui/src/assets/svg/VolumeMuteSvg.tsx
+++ b/packages/ui/src/assets/svg/VolumeMuteSvg.tsx
@@ -1,41 +1,12 @@
 export const VolumeMuteSvg = (props: React.SVGProps<SVGSVGElement>) => (
-  <svg
-    id="a"
-    xmlns="http://www.w3.org/2000/svg"
-    width="24"
-    height="24"
-    viewBox="0 0 24 24"
-    {...props}
-  >
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" {...props}>
    <path
-      d="M5.91,9h-3.29c-.21,0-.38.17-.38.38v5.25c0,.21.17.38.38.38h3.26c.17,0,.34.06.48.17l4.29,3.51c.17.12.4.09.52-.08.05-.06.07-.14.07-.22V5.63c0-.21-.17-.37-.38-.37-.08,0-.16.03-.22.07l-4.29,3.51c-.13.11-.29.17-.46.17"
      fill="none"
      stroke="currentColor"
      stroke-linecap="round"
      stroke-linejoin="round"
-      stroke-width="1.5"
-    />
-    <line
-      x1="14.8"
-      y1="8.57"
-      x2="21.2"
-      y2="15.46"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
-    />
-    <line
-      x1="14.79"
-      y1="15.45"
-      x2="21.19"
-      y2="8.55"
-      fill="none"
-      stroke="currentColor"
-      stroke-linecap="round"
-      stroke-linejoin="round"
-      stroke-width="1.5"
+      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/src/common/CommonProps.ts
+++ b/packages/ui/src/common/CommonProps.ts
@@ -1,9 +0,0 @@
-import type { CSSProperties } from "react";
-
-export type CommonProps = {
-  className?: string;
-  style?: CSSProperties;
-  children?: React.ReactNode;
-  key?: string | number;
-  disabled?: boolean;
-};
--- a/packages/ui/src/common/Skin.tsx
+++ b/packages/ui/src/common/Skin.tsx
@@ -1,10 +0,0 @@
-import type { CommonProps } from "./CommonProps";
-
-type SkinProps = CommonProps & {
-  theme?: "light" | "dark";
-};
-
-export const Skin = (props: SkinProps) => {
-  const { theme = "light", children } = props;
-  return <div className={theme}>{children}</div>;
-};
--- a/packages/ui/src/component/accordion/Accordion.css
+++ b/packages/ui/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/src/component/accordion/Accordion.recipe.ts
+++ b/packages/ui/src/component/accordion/Accordion.recipe.ts
@@ -0,0 +1,12 @@
+import { tv } from "tailwind-variants";
+
+export const AccordionRecipe = tv({
+  base: "",
+  variants: {
+    size: {
+      xs: "",
+      sm: "",
+      md: "",
+    },
+  },
+});
--- a/packages/ui/src/component/accordion/Accordion.tsx
+++ b/packages/ui/src/component/accordion/Accordion.tsx
@@ -0,0 +1,20 @@
+import * as BUI from "@base-ui/react";
+import type { CommonProps } from "@/common/CommonProps";
+import type { ComponentProps } from "react";
+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/src/component/accordion/AccordionItem.tsx
+++ b/packages/ui/src/component/accordion/AccordionItem.tsx
--- a/packages/ui/src/component/accordion/AccordionPanel.tsx
+++ b/packages/ui/src/component/accordion/AccordionPanel.tsx
--- a/packages/ui/src/component/accordion/AccordionTrigger.tsx
+++ b/packages/ui/src/component/accordion/AccordionTrigger.tsx
--- a/packages/ui/src/component/avatar/Avatar.css
+++ b/packages/ui/src/component/avatar/Avatar.css
@@ -0,0 +1,15 @@
+@layer components {
+  .avatar-image {
+    object-fit: cover;
+    height: 100%;
+    width: 100%;
+  }
+
+  .avatar-fallback {
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    height: 100%;
+    width: 100%;
+  }
+}
--- a/packages/ui/src/component/avatar/Avatar.tsx
+++ b/packages/ui/src/component/avatar/Avatar.tsx
@@ -0,0 +1,20 @@
+import * as BUI from "@base-ui/react";
+
+type AvatarPorps = {
+  size?: "sm" | "md" | "lg";
+  src?: string;
+  alt?: string;
+};
+
+export const Avatar = (props: AvatarPorps) => {
+  const { size = "md", src, alt } = props;
+
+  
+
+  return (
+    <BUI.Avatar.Root>
+      <BUI.Avatar.Image src={src} alt={alt} />
+      <BUI.Avatar.Fallback></BUI.Avatar.Fallback>
+    </BUI.Avatar.Root>
+  );
+};
--- a/packages/ui/src/component/button/Button.tsx
+++ b/packages/ui/src/component/button/Button.tsx
@@ -1,23 +1,24 @@
 "use client";
-import * as BUI from "@base-ui/react/button";
-import { cn } from "tailwind-variants";
-import type { CommonProps } from "@/common/CommonProps";
-import { itemSizeRecipe } from "@/styles/recipe/ItemSize.recipe";
-import { variantRecipe } from "@/styles/recipe/variant.recipe";
 import type { ReactNode } from "react";
-import { inlineSizeRecipe } from "@/styles/recipe/IinlineSize.recipe";
-import { Slot } from "@/common/Slot";
+import * as BUI from "@base-ui/react";
+import { cn } from "tailwind-variants";
+import { brandRecipe } from "../../styles/recipe/brand.recipe";
+import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
+import { variantRecipe } from "../../styles/recipe/variant.recipe";
+import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
+import { Slot } from "../../common/Slot";
+import { Icon } from "../icon/Icon";

-type ButtonProps = CommonProps & {
-  size?: "md" | "lg" | "xl";
-  variant?: "filled" | "outline" | "subtle";
+type ButtonProps = {
+  size?: "xs" | "sm" | "md" | "lg";
+  variant?: "filled" | "outline" | "subtle" | "ghost";
  shape?: "rounded" | "square" | "circle";
  brand?: "success" | "danger" | "info" | "warning" | "default";
  loading?: boolean;
-  icon?: ReactNode;
+  iconSvg?: ReactNode;
  iconOnly?: boolean;
  hideIcon?: boolean;
-};
+} & BUI.Button.Props;

 export const Button = (props: ButtonProps) => {
  const {
@@ -29,7 +30,7 @@ export const Button = (props: ButtonProps) => {
    brand,
    loading,
    disabled,
-    icon,
+    iconSvg,
    iconOnly,
    hideIcon = false,
  } = props;
@@ -38,22 +39,24 @@ export const Button = (props: ButtonProps) => {
    brand == undefined ? (variant == "filled" ? "info" : "default") : brand;

  const buttonCls = cn(
-    itemSizeRecipe({ size, brand: currentBrand, shape }),
+    itemSizeRecipe({ size, shape, iconOnly }),
    variantRecipe({ variant, disabled: loading || disabled }),
+    brandRecipe({ brand: currentBrand }),
    className,
  );

-  const iconCls = cn(inlineSizeRecipe({ size, iconOnly: true }));
-
  return (
    <BUI.Button className={buttonCls} disabled={loading || disabled}>
-      {!hideIcon &&
-        (iconOnly ? (
-          <span className={iconCls}></span>
+      {iconSvg ? (
+        hideIcon ? (
+          iconOnly ? (
+            <Icon />
+          ) : null
        ) : (
-          <Slot className={iconCls}>{icon}</Slot>
-        ))}
-      {children}
+          <Icon svg={iconSvg} />
+        )
+      ) : null}
+      {!iconOnly && children}
    </BUI.Button>
  );
 };
--- a/packages/ui/src/component/checkbox/Checkbox.css
+++ b/packages/ui/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/src/component/checkbox/Checkbox.tsx
+++ b/packages/ui/src/component/checkbox/Checkbox.tsx
@@ -0,0 +1,76 @@
+"use client";
+import * as BUI from "@base-ui/react";
+import { cn } from "tailwind-variants";
+import type { CommonProps } from "@/common/CommonProps";
+import { itemSizeRecipe } from "@/styles/recipe/ItemSize.recipe";
+import { inlineSizeRecipe } from "@/styles/recipe/IinlineSize.recipe";
+import { CheckIndicatorSvg } from "@/assets/svg/CheckIndicatorSvg";
+import type { ReactNode } from "react";
+import { Slot } from "@/common/Slot";
+import { variantRecipe } from "@/styles/recipe/variant.recipe";
+
+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/src/component/icon/Icon.tsx
+++ b/packages/ui/src/component/icon/Icon.tsx
@@ -0,0 +1,21 @@
+import { ReactNode } from "react";
+import { cn } from "tailwind-variants";
+import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
+import { Slot } from "../../common/Slot";
+
+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/src/component/theme/Theme.tsx
+++ b/packages/ui/src/component/theme/Theme.tsx
@@ -0,0 +1,17 @@
+import { cn } from "tailwind-variants";
+import type { CommonProps } from "../../common/CommonProps";
+import { ThemeContext } from "./ThemeContext";
+
+type ThemeProps = CommonProps & {
+  theme?: "light" | "dark";
+};
+
+export const Theme = (props: ThemeProps) => {
+  const { theme = "light", children, className } = props;
+  const themeCls = cn(theme, "brand-default", className) as string;
+  return (
+    <ThemeContext.Provider value={{ themeCls }}>
+      <div className={themeCls}>{children}</div>
+    </ThemeContext.Provider>
+  );
+};
--- a/packages/ui/src/component/theme/ThemeContext.tsx
+++ b/packages/ui/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/src/component/theme/useTheme.ts
+++ b/packages/ui/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/src/component/tooltip/Tooltip.css
+++ b/packages/ui/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/src/component/tooltip/Tooltip.tsx
+++ b/packages/ui/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/src/component/tooltip/TooltipPopup.tsx
+++ b/packages/ui/src/component/tooltip/TooltipPopup.tsx
@@ -0,0 +1,53 @@
+"use client";
+import * as BUI from "@base-ui/react";
+import { cn } from "tailwind-variants";
+import { useTheme } from "../theme/useTheme";
+import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
+import { ReactNode } from "react";
+
+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/src/component/tooltip/TooltipTrigger.tsx
+++ b/packages/ui/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/src/component/user-field/UserField.tsx
+++ b/packages/ui/src/component/user-field/UserField.tsx
--- a/packages/ui/src/index.css
+++ b/packages/ui/src/index.css
@@ -1,6 +1,10 @@
@import "tailwindcss";
+@import './component/accordion/Accordion.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';
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -2,17 +2,17 @@

 import './index.css'; 

-export * from './assets/svg/CheckIndicatorOutlineSvg';
+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/RadioIndicatorOutlineSvg';
-export * from './assets/svg/RadioIndicatorSvg';
+export * from './assets/svg/Ruler';
 export * from './assets/svg/SearchSvg';
 export * from './assets/svg/SettingSvg';
 export * from './assets/svg/SpinnerSvg';
@@ -20,13 +20,25 @@ export * from './assets/svg/SunSvg';
 export * from './assets/svg/UserSvg';
 export * from './assets/svg/VolumeHighSvg';
 export * from './assets/svg/VolumeLowSvg';
-export * from './assets/svg/VolumeMediumSvg';
 export * from './assets/svg/VolumeMuteSvg';
 export * from './common/Box';
-export * from './common/CommonProps';
-export * from './common/Skin';
 export * from './common/Slot';
+export * from './component/accordion/Accordion.recipe';
+export * from './component/accordion/Accordion';
+export * from './component/accordion/AccordionItem';
+export * from './component/accordion/AccordionPanel';
+export * from './component/accordion/AccordionTrigger';
 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/user-field/UserField';
 export * from './styles/recipe/IinlineSize.recipe';
 export * from './styles/recipe/ItemSize.recipe';
+export * from './styles/recipe/brand.recipe';
 export * from './styles/recipe/variant.recipe';
--- a/packages/ui/src/styles/recipe/IinlineSize.recipe.ts
+++ b/packages/ui/src/styles/recipe/IinlineSize.recipe.ts
@@ -1,7 +1,7 @@
 import { tv } from "tailwind-variants";

 export const inlineSizeRecipe = tv({
-  base: "relative overflow-hidden flex flex-nowrap",
+  base: "relative overflow-hidden flex flex-nowrap justify-center items-center box-border",
  variants: {
    size: {
      xs: "text-xs h-inline-xs",
@@ -16,18 +16,6 @@ export const inlineSizeRecipe = tv({
      rounded: "",
      circle: "rounded-full",
    },
-    variant: {
-      filled: "variant-filled",
-      outline: "variant-outline",
-      subtle: "variant-subtle",
-    },
-    brand: {
-      success: "brand-success",
-      danger: "brand-danger",
-      info: "brand-info",
-      warning: "brand-warning",
-      emphasis: "brand-emphasis",
-    },
    iconOnly: {
      true: "",
      false: "",
@@ -99,21 +87,5 @@ export const inlineSizeRecipe = tv({
      size: "2xl",
      class: "w-inline-2xl",
    },
-    // --------------------------------------------------
-    {
-      disabled: true,
-      variant: "filled",
-      class: "variant-filled-disabled",
-    },
-    {
-      disabled: true,
-      variant: "outline",
-      class: "variant-outline-disabled",
-    },
-    {
-      disabled: true,
-      variant: "subtle",
-      class: "variant-subtle-disabled",
-    },
  ],
 });
--- a/packages/ui/src/styles/recipe/ItemSize.recipe.ts
+++ b/packages/ui/src/styles/recipe/ItemSize.recipe.ts
@@ -1,34 +1,24 @@
 import { tv } from "tailwind-variants";

 export const itemSizeRecipe = tv({
-  base: "relative select-none overflow-hidden flex flex-nowrap justify-center items-center",
+  base: "relative select-none flex flex-nowrap justify-center items-center",
  variants: {
    size: {
-      xs: "text-xs h-xs px-xs gap-xs",
-      sm: "text-sm h-sm px-sm gap-sm",
-      md: "text-md h-md px-md gap-md",
-      lg: "text-lg h-lg px-lg gap-lg",
-      xl: "text-xl h-xl px-xl gap-xl",
-      "2xl": "text-2xl h-2xl px-2xl gap-2xl",
+      xs: "text-xs h-item-xs px-xs gap-xs",
+      sm: "text-sm h-item-sm px-sm gap-sm",
+      md: "text-md h-item-md px-md gap-md",
+      lg: "text-lg h-item-lg px-lg gap-lg",
+      xl: "text-xl h-item-xl px-xl gap-xl",
+      "2xl": "text-2xl h-item-2xl px-2xl gap-2xl",
    },
    shape: {
      square: "rounded-none",
      rounded: "",
      circle: "rounded-full",
    },
-    brand: {
-      success: "brand-success",
-      danger: "brand-danger",
-      info: "brand-info",
-      warning: "brand-warning",
-      default: "brand-default",
-    },
+
    iconOnly: {
-      true: "",
-      false: "",
-    },
-    hasShadow: {
-      true: "shadow-xl",
+      true: "px-none",
      false: "",
    },
    disabled: {
@@ -37,66 +27,62 @@ export const itemSizeRecipe = tv({
    },
  },
  compoundVariants: [
-    {
-      shape: "rounded",
-      size: "xs",
-      class: "rounded-xs",
-    },
+    { shape: "rounded", size: "xs", class: "rounded-sm" },
    {
      shape: "rounded",
      size: "sm",
-      class: "rounded-sm",
-    },
-    {
-      shape: "rounded",
-      size: "md",
      class: "rounded-md",
    },
    {
      shape: "rounded",
-      size: "lg",
+      size: "md",
      class: "rounded-lg",
    },
    {
      shape: "rounded",
-      size: "xl",
+      size: "lg",
      class: "rounded-xl",
    },
    {
      shape: "rounded",
-      size: "2xl",
+      size: "xl",
      class: "rounded-2xl",
    },
+    {
+      shape: "rounded",
+      size: "2xl",
+      class: "rounded-3xl",
+    },
    // --------------------------------------------------
    {
      iconOnly: true,
      size: "xs",
-      class: "w-xs",
+      class: "w-item-xs",
    },
    {
      iconOnly: true,
      size: "sm",
-      class: "w-sm",
+      class: "w-item-sm",
    },
    {
      iconOnly: true,
      size: "md",
-      class: "w-md",
+      class: "w-item-md",
    },
    {
      iconOnly: true,
      size: "lg",
-      class: "w-lg",
+      class: "w-item-lg",
    },
    {
      iconOnly: true,
      size: "xl",
-      class: "w-xl",
+      class: "w-item-xl",
    },
    {
      iconOnly: true,
      size: "2xl",
-      class: "w-2xl",
+      class: "w-item-2xl",
    },
  ],
 });
--- a/packages/ui/src/styles/recipe/brand.recipe.ts
+++ b/packages/ui/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/src/styles/recipe/variant.recipe.ts
+++ b/packages/ui/src/styles/recipe/variant.recipe.ts
@@ -6,6 +6,7 @@ export const variantRecipe = tv({
      filled: "variant-filled",
      outline: "variant-outline",
      subtle: "variant-subtle",
+      ghost: "variant-ghost",
    },
    disabled: {
      true: "",
@@ -28,5 +29,10 @@ export const variantRecipe = tv({
      variant: "subtle",
      class: "variant-subtle-disabled",
    },
+    {
+      disabled: true,
+      variant: "ghost",
+      class: "variant-ghost-disabled",
+    },
  ],
 });
--- a/packages/ui/src/styles/theme/global.css
+++ b/packages/ui/src/styles/theme/global.css
@@ -1,32 +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-high-hover: var(--color-red-500);
-  --danger-bg-high-active: var(--color-red-400);
-  --danger-bg-low-hover: var(--color-red-100);
-  --danger-bg-low-active: var(--color-red-200);
+  --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-high-hover: var(--color-emerald-500);
-  --success-bg-high-active: var(--color-emerald-400);
+  --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-high-hover: var(--color-sky-500);
-  --info-bg-high-active: var(--color-sky-400);
-  --info-bg-low-hover: var(--color-sky-100);
-  --info-bg-low-active: var(--color-sky-200);
+  --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-high-hover: var(--color-yellow-500);
-  --warning-bg-high-active: var(--color-yellow-400);
-  --warning-bg-low-hover: var(--color-yellow-100);
-  --warning-bg-low-active: var(--color-yellow-200);
+  --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-800);
-  --default-bg-high-hover: var(--color-neutral-700);
-  --default-bg-high-active: var(--color-neutral-600);
-  --default-bg-low-hover: var(--color-neutral-100);
-  --default-bg-low-active: var(--color-neutral-200);
+  --default-bg: var(--color-neutral-700);
+  --default-bg-hover: var(--color-neutral-600);
+  --default-bg-active: var(--color-neutral-500);
+  --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-500);
+  --disabled-bg: var(--color-gray-200);
+  --disabled-border-color: var(--color-gray-500);
 }
--- a/packages/ui/src/styles/utility/brand.css
+++ b/packages/ui/src/styles/utility/brand.css
@@ -1,35 +1,40 @@
@utility brand-info {
  --brand-bg: var(--info-bg);
-  --brand-bg-high-hover: var(--info-bg-high-hover);
-  --brand-bg-high-active: var(--info-bg-high-active);
+  --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-high-hover: var(--danger-bg-high-hover);
-  --brand-bg-high-active: var(--danger-bg-high-active);
+  --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-high-hover: var(--success-bg-high-hover);
-  --brand-bg-high-active: var(--success-bg-high-active);
+  --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-high-hover: var(--warning-bg-high-hover);
-  --brand-bg-high-active: var(--warning-bg-high-active);
+  --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-high-hover: var(--default-bg-high-hover);
-  --brand-bg-high-active: var(--default-bg-high-active);
+  --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/src/styles/utility/font.css
+++ b/packages/ui/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/src/styles/utility/gap.css
+++ b/packages/ui/src/styles/utility/gap.css
@@ -2,17 +2,17 @@
  gap: calc(var(--spacing) * 0.5);
 }
@utility gap-sm {
-  gap: calc(var(--spacing) * 2);
+  gap: calc(var(--spacing) * 1);
 }
@utility gap-md {
-  gap: calc(var(--spacing) * 3);
+  gap: calc(var(--spacing) * 1.5);
 }
@utility gap-lg {
-  gap: calc(var(--spacing) * 4);
+  gap: calc(var(--spacing) * 2);
 }
@utility gap-xl {
-  gap: calc(var(--spacing) * 5);
+  gap: calc(var(--spacing) * 2.5);
 }
@utility gap-2xl {
-  gap: calc(var(--spacing) * 6);
+  gap: calc(var(--spacing) * 3);
 }
--- a/packages/ui/src/styles/utility/height.css
+++ b/packages/ui/src/styles/utility/height.css
@@ -1,36 +1,40 @@
-@utility h-xs {
-  height: calc(var(--spacing) * 5);
+@utility h-item-xs {
+  /* 24px minimum touch size for text line */
+  height: 24px;
 }
-@utility h-sm {
-  height: calc(var(--spacing) * 6);
+@utility h-item-sm {
+  /* 30px save space for most used size */
+  height: 30px;
 }
-@utility h-md {
-  height: calc(var(--spacing) * 8);
+@utility h-item-md {
+  /* 34px most used size */
+  height: 34px;
 }
-@utility h-lg {
-  height: calc(var(--spacing) * 9);
+@utility h-item-lg {
+  /* 46px maximum touch size without waste */
+  height: 46px;
 }
-@utility h-xl {
-  height: calc(var(--spacing) * 11);
+@utility h-item-xl {
+  height: calc(var(--spacing) * 16);
 }
-@utility h-2xl {
+@utility h-item-2xl {
  height: calc(var(--spacing) * 16);
 }
@utility h-inline-xs {
-  height: var(--text-xs--line-height);
+  height: calc(var(--text-xs--line-height) * var(--text-xs));
 }
@utility h-inline-sm {
-  height: var(--text-sm--line-height);
+  height: calc(var(--text-sm--line-height) * var(--text-sm));
 }
@utility h-inline-md {
-  height: var(--text-base--line-height);
+  height: calc(var(--text-md--line-height) * var(--text-md));
 }
@utility h-inline-lg {
-  height: var(--text-lg--line-height);
+  height: calc(var(--text-lg--line-height) * var(--text-lg));
 }
@utility h-inline-xl {
-  height: var(--text-xl--line-height);
+  height: calc(var(--text-xl--line-height) * var(--text-xl));
 }
@utility h-inline-2xl {
-  height: var(--text-2xl--line-height);
+  height: calc(var(--text-2xl--line-height) * var(--text-2xl));
 }
--- a/packages/ui/src/styles/utility/margin.css
+++ b/packages/ui/src/styles/utility/margin.css
@@ -1,7 +1,7 @@
@utility mr-none {
  margin-right: 0;
 }
-@utility mr-xs {
+@utility mr-sm {
  margin-right: calc(var(--spacing) * 1);
 }
@utility mr-sm {
--- a/packages/ui/src/styles/utility/padding.css
+++ b/packages/ui/src/styles/utility/padding.css
@@ -1,36 +1,40 @@
+@utility px-none {
+  padding-inline: 0px;
+}
@utility px-xs {
-  padding-inline: calc(var(--spacing) * 2);
+  padding-inline: 6px;
 }
@utility px-sm {
-  padding-inline: calc(var(--spacing) * 3);
+  padding-inline: 8px;
 }
@utility px-md {
-  padding-inline: calc(var(--spacing) * 4);
+  padding-inline: 10px;
 }
@utility px-lg {
-  padding-inline: calc(var(--spacing) * 5);
+  padding-inline: 12px;
 }
@utility px-xl {
-  padding-inline: calc(var(--spacing) * 6);
+  padding-inline: var(--radius-xl);
 }
@utility px-2xl {
-  padding-inline: calc(var(--spacing) * 8);
+  padding-inline: var(--radius-2xl);
 }
@utility py-xs {
-  padding-block: calc(var(--spacing) * 1);
+  /* 2px correspond to rounded-xs */
+  padding-block: var(--radius-xs);
 }
@utility py-sm {
-  padding-block: calc(var(--spacing) * 2);
+  padding-block: var(--radius-sm);
 }
@utility py-md {
-  padding-block: calc(var(--spacing) * 3);
+  padding-block: var(--radius-md);
 }
@utility py-lg {
-  padding-block: calc(var(--spacing) * 4);
+  padding-block: var(--radius-lg);
 }
@utility py-xl {
-  padding-block: calc(var(--spacing) * 5);
+  padding-block: var(--radius-xl);
 }
@utility py-2xl {
-  padding-block: calc(var(--spacing) * 6);
+  padding-block: var(--radius-2xl);
 }
--- a/packages/ui/src/styles/utility/skin.css
+++ b/packages/ui/src/styles/utility/skin.css
@@ -1,13 +1,9 @@
@utility light {
  --base-fg: var(--color-gray-950);
  --base-bg: var(--color-white);
-  --base-fg-subtext: var(--color-gray-500);
-  --base-bg-subtext: var(--color-gray-200);
 }

@utility dark {
  --base-fg: var(--color-gray-50);
  --base-bg: var(--color-black);
-  --base-fg-subtext: var(--color-gray-400);
-  --base-bg-subtext: var(--color-gray-600);
 }
--- a/packages/ui/src/styles/utility/variant.css
+++ b/packages/ui/src/styles/utility/variant.css
@@ -3,8 +3,8 @@
  --filled-fg-hover: var(--color-white);
  --filled-fg-active: var(--color-white);
  --filled-bg: var(--brand-bg);
-  --filled-bg-hover: var(--brand-bg-high-hover);
-  --filled-bg-active: var(--brand-bg-high-active);
+  --filled-bg-hover: var(--brand-bg-hover);
+  --filled-bg-active: var(--brand-bg-active);
  --filled-border-color: var(--color-transparent);

  color: var(--filled-fg);
@@ -61,7 +61,7 @@
  --subtle-fg: var(--brand-bg);
  --subtle-fg-hover: var(--brand-bg);
  --subtle-fg-active: var(--brand-bg);
-  --subtle-bg: var(--color-transparent);
+  --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);
@@ -86,31 +86,60 @@
  }
 }

-@utility variant-filled-disabled {
-  color: var(--filled-fg);
-  background-color: var(--filled-bg);
-  border-color: var(--filled-border-color);
-  filter: grayscale(50%);
+@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 {
-    color: var(--filled-fg);
-    background-color: var(--filled-bg);
-    border-color: var(--filled-border-color);
-    filter: grayscale(50%);
+    background-color: var(--ghost-bg-hover);
+    color: var(--ghost-fg-hover);
  }

  &:active {
-    color: var(--filled-fg);
-    background-color: var(--filled-bg);
-    border-color: var(--filled-border-color);
-    filter: grayscale(50%);
+    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(--filled-fg);
    background-color: var(--filled-bg);
    border-color: var(--filled-border-color);
-    filter: grayscale(50%);
+    filter: grayscale(100%);
  }
 }

@@ -142,30 +171,30 @@
  }
 }

-@utility variant-subtle-disabled {
-  color: var(--subtle-fg);
-  background-color: var(--subtle-bg);
-  border-color: var(--subtle-border-color);
+@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(--subtle-fg);
-    background-color: var(--subtle-bg);
-    border-color: var(--subtle-border-color);
+    color: var(--ghost-fg);
+    background-color: var(--ghost-bg);
+    border-color: var(--ghost-border-color);
    filter: grayscale(50%);
  }

  &:active {
-    color: var(--subtle-fg);
-    background-color: var(--subtle-bg);
-    border-color: var(--subtle-border-color);
+    color: var(--ghost-fg);
+    background-color: var(--ghost-bg);
+    border-color: var(--ghost-border-color);
    filter: grayscale(50%);
  }

  &:focus-visible {
-    color: var(--subtle-fg);
-    background-color: var(--subtle-bg);
-    border-color: var(--subtle-border-color);
+    color: var(--ghost-fg);
+    background-color: var(--ghost-bg);
+    border-color: var(--ghost-border-color);
    filter: grayscale(50%);
  }
 }
--- a/packages/ui/src/styles/utility/width.css
+++ b/packages/ui/src/styles/utility/width.css
@@ -1,36 +1,41 @@
-@utility w-xs {
-  width: calc(var(--spacing) * 5);
-}
-@utility w-sm {
+@utility w-item-xs {
+  /* 24px minimum touch size for text line */
  width: calc(var(--spacing) * 6);
 }
-@utility w-md {
-  width: calc(var(--spacing) * 8);
+@utility w-item-sm {
+  /* 30px save space for most used size */
+  width: calc(var(--spacing) * 7.5);
 }
-@utility w-lg {
-  width: calc(var(--spacing) * 9);
+@utility w-item-md {
+  /* 34px most used size */
+  width: calc(var(--spacing) * 8.5);
 }
-@utility w-xl {
-  width: calc(var(--spacing) * 11);
+@utility w-item-lg {
+  /* 46px maximum touch size without waste */
+  width: calc(var(--spacing) * 11.5);
 }
-@utility w-2xl {
+@utility w-item-xl {
  width: calc(var(--spacing) * 16);
 }
+@utility w-item-2xl {
+  width: calc(var(--spacing) * 16);
+}
+/* ---------------------------------------------------- */
@utility w-inline-xs {
-  width: var(--text-xs--line-height);
+  width: calc(var(--text-xs--line-height) * var(--text-xs));
 }
@utility w-inline-sm {
-  width: var(--text-sm--line-height);
+  width: calc(var(--text-sm--line-height) * var(--text-sm));
 }
@utility w-inline-md {
-  width: var(--text-base--line-height);
+  width: calc(var(--text-md--line-height) * var(--text-md));
 }
@utility w-inline-lg {
-  width: var(--text-lg--line-height);
+  width: calc(var(--text-lg--line-height) * var(--text-lg));
 }
@utility w-inline-xl {
-  width: var(--text-xl--line-height);
+  width: calc(var(--text-xl--line-height) * var(--text-xl));
 }
@utility w-inline-2xl {
-  width: var(--text-2xl--line-height);
+  width: calc(var(--text-2xl--line-height) * var(--text-2xl));
 }
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -1,16 +1,13 @@
 {
-  "extends": "@tsconfig/vite-react/tsconfig.json",
  "compilerOptions": {
    "composite": true,
-    "baseUrl": ".",
-    "paths": {
-      "@/*": ["src/*"]
-    },
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
    "outDir": "./dist",
    "rootDir": "./src",
-    "declaration": true, // 补充：生成类型声明文件，供其他子包引用
-    "skipLibCheck": true, // 补充：跳过第三方库类型校验，避免冲突、提升速度
-    "types": ["vite/client"]
+    "declaration": true,
+    "types": ["node", "react"]
  },
  "include": ["src"],
  "exclude": [
--- a/packages/ui/vite.config.ts
+++ b/packages/ui/vite.config.ts
@@ -1,78 +0,0 @@
-import { defineConfig } from "vite";
-import react from "@vitejs/plugin-react";
-import dts from "vite-plugin-dts";
-import { resolve } from "node:path";
-import tailwindcss from "@tailwindcss/vite";
-
-export default defineConfig(({ mode }) => {
-  const isProduction = mode === "production";
-
-  return {
-    // React 核心插件
-    plugins: [
-      tailwindcss(),
-      react(),
-      dts({
-        include: ["src/**/*"],
-        exclude: ["src/**/*.test.ts", "src/**/*.stories.tsx"],
-        outDir: "./dist",
-        rollupTypes: true, // 合并类型声明文件
-      }),
-    ],
-
-    // 路径别名与后缀配置
-    resolve: {
-      alias: {
-        "@": resolve(__dirname, "./src"),
-      },
-      extensions: [".ts", ".tsx", ".js", ".jsx", ".json"],
-    },
-
-    // 纯 ES 模式打包配置（移除 UMD 相关）
-    build: {
-      lib: {
-        entry: resolve(__dirname, "./src/index.ts"),
-        formats: ["es"], // 仅保留 ES 模块格式
-        fileName: () => "index.es.js", // 固定 ES 模式文件名
-      },
-      rollupOptions: {
-        // 排除 React 相关依赖（用户项目自行引入）
-        external: ["react", "react-dom"],
-        output: {
-          compact: isProduction, // 生产环境压缩代码格式
-          globals: {
-            react: "React",
-            "react-dom": "ReactDOM",
-          },
-          assetFileNames: (assetInfo) => {
-            if (assetInfo.name && assetInfo.name.endsWith(".css")) {
-              return "index.css";
-            }
-            return assetInfo.name || "[name].[ext]";
-          },
-        },
-        // 移除：rollupOptions 下无效的 exclude 配置
-        // exclude: ["example/**/*", "scripts/**/*"],
-      },
-      outDir: "./dist",
-      cssCodeSplit: false,
-      sourcemap: true,
-      minify: isProduction ? "esbuild" : false,
-      emptyOutDir: true,
-    },
-
-    // TS 兼容配置
-    esbuild: {
-      ignoreAnnotations: true,
-      // 移除：esbuild 下无效的 exclude 配置
-      // exclude: ["example/**/*", "scripts/**/*"],
-    },
-
-    // 新增：使用 Vite 官方支持的方式排除文件
-    // 通过 optimizeDeps.exclude 排除依赖，通过 build.assetsInclude 反向控制，
-    // 同时结合 tsconfig.json 的 exclude 确保 TS 编译也排除目标文件
-    optimizeDeps: {
-      exclude: ["example", "scripts"],
-    },
-  };
-});
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
--- a/tsconfig.base.json
+++ b/tsconfig.base.json
@@ -0,0 +1,31 @@
+{
+  "compilerOptions": {
+    "module": "nodenext",
+    "target": "es2022",
+    "lib": ["es2022", "dom"],
+    "jsx": "react-jsx",
+    "forceConsistentCasingInFileNames": true,
+    "strict": true,
+    "noEmit": true,
+    "experimentalDecorators": true,
+    "allowSyntheticDefaultImports": true,
+    "noErrorTruncation": false,
+    "allowJs": true,
+    "skipLibCheck": true,
+    "allowImportingTsExtensions": true,
+    "noUncheckedSideEffectImports": true,
+    "paths": {}
+  },
+  "exclude": [
+    "**/.*/",
+    "**/build",
+    "**/build-tests",
+    "**/node_modules",
+    "docs/export",
+    "**/dist",
+    "**/example",
+    "**/scripts",
+    "**/stories",
+    "**/vite.config.ts"
+  ]
+}