mm

apps/ui-site/src/gallery/ButtonGallery.tsx

@@ -6,24 +6,24 @@ export const ButtonGallery = () => {
   return (
     <OuterWrap>
       <InnerWrap>
-        <Button variant="filled" icon={<DownloadSvg />} size="xs">
+        <Button variant="filled" iconSvg={<DownloadSvg />} size="xs">
           Xsmall
         </Button>
-        <Button variant="filled" icon={<DownloadSvg />} size="sm">
+        <Button variant="filled" iconSvg={<DownloadSvg />} size="sm">
           Small
         </Button>
-        <Button variant="filled" icon={<DownloadSvg />} size="md">
+        <Button variant="filled" iconSvg={<DownloadSvg />} size="md">
           Madium
         </Button>
         <Button
           variant="filled"
-          icon={<DownloadSvg />}
+          iconSvg={<DownloadSvg />}
           size="md"
           iconOnly={true}
         >
           IconOnly
         </Button>
-        <Button variant="filled" icon={<DownloadSvg />} size="lg">
+        <Button variant="filled" iconSvg={<DownloadSvg />} size="lg">
           Large
         </Button>
       </InnerWrap>

bun.lock

@@ -0,0 +1,139 @@
+{
+  "lockfileVersion": 1,
+  "configVersion": 1,
+  "workspaces": {
+    "": {
+      "name": "defgov",
+      "devDependencies": {
+        "turbo": "^2.8.0",
+      },
+    },
+    "packages/ui": {
+      "name": "@defgov/ui",
+      "version": "0.0.0",
+      "dependencies": {
+        "@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.4",
+      },
+      "devDependencies": {
+        "@types/node": "^25.6.0",
+        "@types/react": "^19.2.14",
+        "@types/react-dom": "^19.2.3",
+        "glob": "^13.0.6",
+        "ts-node": "^10.9.2",
+        "typescript": "^6.0.3",
+      },
+    },
+  },
+  "packages": {
+    "@babel/runtime": ["@babel/runtime@7.29.2", "https://registry.npmmirror.com/@babel/runtime/-/runtime-7.29.2.tgz", {}, "sha512-JiDShH45zKHWyGe4ZNVRrCjBz8Nh9TMmZG1kh4QTK8hCBTWBi8Da+i7s1fJw7/lYpM4ccepSNfqzZ/QvABBi5g=="],
+
+    "@base-ui/react": ["@base-ui/react@1.4.1", "https://registry.npmmirror.com/@base-ui/react/-/react-1.4.1.tgz", { "dependencies": { "@babel/runtime": "^7.29.2", "@base-ui/utils": "0.2.8", "@floating-ui/react-dom": "^2.1.8", "@floating-ui/utils": "^0.2.11", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@date-fns/tz": "^1.2.0", "@types/react": "^17 || ^18 || ^19", "date-fns": "^4.0.0", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@date-fns/tz", "@types/react", "date-fns"] }, "sha512-Ab5/LIhcmL8BQcsBUYiOfkSDRdLpvgUBzMK30cu684JPcLclYlztharvCZyNNgzJtbAiREzI9q0pI5erHCMgCw=="],
+
+    "@base-ui/utils": ["@base-ui/utils@0.2.8", "https://registry.npmmirror.com/@base-ui/utils/-/utils-0.2.8.tgz", { "dependencies": { "@babel/runtime": "^7.29.2", "@floating-ui/utils": "^0.2.11", "reselect": "^5.1.1", "use-sync-external-store": "^1.6.0" }, "peerDependencies": { "@types/react": "^17 || ^18 || ^19", "react": "^17 || ^18 || ^19", "react-dom": "^17 || ^18 || ^19" }, "optionalPeers": ["@types/react"] }, "sha512-jvOi+c+ftGlGotNcKnzPVg2IhCaDTB6/6R3JeqdjdXktuAJi3wKH9T7+svuaKh1mmfVU11UWzUZVH74JDfi/wQ=="],
+
+    "@cspotcode/source-map-support": ["@cspotcode/source-map-support@0.8.1", "https://registry.npmmirror.com/@cspotcode/source-map-support/-/source-map-support-0.8.1.tgz", { "dependencies": { "@jridgewell/trace-mapping": "0.3.9" } }, "sha512-IchNf6dN4tHoMFIn/7OE8LWZ19Y6q/67Bmf6vnGREv8RSbBVb9LPJxEcnwrcwX6ixSvaiGoomAUvu4YSxXrVgw=="],
+
+    "@defgov/ui": ["@defgov/ui@workspace:packages/ui"],
+
+    "@floating-ui/core": ["@floating-ui/core@1.7.5", "https://registry.npmmirror.com/@floating-ui/core/-/core-1.7.5.tgz", { "dependencies": { "@floating-ui/utils": "^0.2.11" } }, "sha512-1Ih4WTWyw0+lKyFMcBHGbb5U5FtuHJuujoyyr5zTaWS5EYMeT6Jb2AuDeftsCsEuchO+mM2ij5+q9crhydzLhQ=="],
+
+    "@floating-ui/dom": ["@floating-ui/dom@1.7.6", "https://registry.npmmirror.com/@floating-ui/dom/-/dom-1.7.6.tgz", { "dependencies": { "@floating-ui/core": "^1.7.5", "@floating-ui/utils": "^0.2.11" } }, "sha512-9gZSAI5XM36880PPMm//9dfiEngYoC6Am2izES1FF406YFsjvyBMmeJ2g4SAju3xWwtuynNRFL2s9hgxpLI5SQ=="],
+
+    "@floating-ui/react-dom": ["@floating-ui/react-dom@2.1.8", "https://registry.npmmirror.com/@floating-ui/react-dom/-/react-dom-2.1.8.tgz", { "dependencies": { "@floating-ui/dom": "^1.7.6" }, "peerDependencies": { "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-cC52bHwM/n/CxS87FH0yWdngEZrjdtLW/qVruo68qg+prK7ZQ4YGdut2GyDVpoGeAYe/h899rVeOVm6Oi40k2A=="],
+
+    "@floating-ui/utils": ["@floating-ui/utils@0.2.11", "https://registry.npmmirror.com/@floating-ui/utils/-/utils-0.2.11.tgz", {}, "sha512-RiB/yIh78pcIxl6lLMG0CgBXAZ2Y0eVHqMPYugu+9U0AeT6YBeiJpf7lbdJNIugFP5SIjwNRgo4DhR1Qxi26Gg=="],
+
+    "@jridgewell/resolve-uri": ["@jridgewell/resolve-uri@3.1.2", "https://registry.npmmirror.com/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz", {}, "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw=="],
+
+    "@jridgewell/sourcemap-codec": ["@jridgewell/sourcemap-codec@1.5.5", "https://registry.npmmirror.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz", {}, "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og=="],
+
+    "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.9", "https://registry.npmmirror.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz", { "dependencies": { "@jridgewell/resolve-uri": "^3.0.3", "@jridgewell/sourcemap-codec": "^1.4.10" } }, "sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ=="],
+
+    "@tsconfig/node10": ["@tsconfig/node10@1.0.12", "https://registry.npmmirror.com/@tsconfig/node10/-/node10-1.0.12.tgz", {}, "sha512-UCYBaeFvM11aU2y3YPZ//O5Rhj+xKyzy7mvcIoAjASbigy8mHMryP5cK7dgjlz2hWxh1g5pLw084E0a/wlUSFQ=="],
+
+    "@tsconfig/node12": ["@tsconfig/node12@1.0.11", "https://registry.npmmirror.com/@tsconfig/node12/-/node12-1.0.11.tgz", {}, "sha512-cqefuRsh12pWyGsIoBKJA9luFu3mRxCA+ORZvA4ktLSzIuCUtWVxGIuXigEwO5/ywWFMZ2QEGKWvkZG1zDMTag=="],
+
+    "@tsconfig/node14": ["@tsconfig/node14@1.0.3", "https://registry.npmmirror.com/@tsconfig/node14/-/node14-1.0.3.tgz", {}, "sha512-ysT8mhdixWK6Hw3i1V2AeRqZ5WfXg1G43mqoYlM2nc6388Fq5jcXyr5mRsqViLx/GJYdoL0bfXD8nmF+Zn/Iow=="],
+
+    "@tsconfig/node16": ["@tsconfig/node16@1.0.4", "https://registry.npmmirror.com/@tsconfig/node16/-/node16-1.0.4.tgz", {}, "sha512-vxhUy4J8lyeyinH7Azl1pdd43GJhZH/tP2weN8TntQblOY+A0XbT8DJk1/oCPuOOyg/Ja757rG0CgHcWC8OfMA=="],
+
+    "@turbo/darwin-64": ["@turbo/darwin-64@2.9.6", "https://registry.npmmirror.com/@turbo/darwin-64/-/darwin-64-2.9.6.tgz", { "os": "darwin", "cpu": "x64" }, "sha512-X/56SnVXIQZBLKwniGTwEQTGmtE5brSACnKMBWpY3YafuxVYefrC2acamfjgxP7BG5w3I+6jf0UrLoSzgPcSJg=="],
+
+    "@turbo/darwin-arm64": ["@turbo/darwin-arm64@2.9.6", "https://registry.npmmirror.com/@turbo/darwin-arm64/-/darwin-arm64-2.9.6.tgz", { "os": "darwin", "cpu": "arm64" }, "sha512-aalBeSl4agT/QtYGDyf/XLajedWzUC9Vg/pm/YO6QQ93vkQ91Vz5uK1ta5RbVRDozQSz4njxUNqRNmOXDzW+qw=="],
+
+    "@turbo/linux-64": ["@turbo/linux-64@2.9.6", "https://registry.npmmirror.com/@turbo/linux-64/-/linux-64-2.9.6.tgz", { "os": "linux", "cpu": "x64" }, "sha512-YKi05jnNHaD7vevgYwahpzGwbsNNTwzU2c7VZdmdFm7+cGDP4oREUWSsainiMfRqjRuolQxBwRn8wf1jmu+YZA=="],
+
+    "@turbo/linux-arm64": ["@turbo/linux-arm64@2.9.6", "https://registry.npmmirror.com/@turbo/linux-arm64/-/linux-arm64-2.9.6.tgz", { "os": "linux", "cpu": "arm64" }, "sha512-02o/ZS69cOYEDczXvOB2xmyrtzjQ2hVFtWZK1iqxXUfzMmTjZK4UumrfNnjckSg+gqeBfnPRHa0NstA173Ik3g=="],
+
+    "@turbo/windows-64": ["@turbo/windows-64@2.9.6", "https://registry.npmmirror.com/@turbo/windows-64/-/windows-64-2.9.6.tgz", { "os": "win32", "cpu": "x64" }, "sha512-wVdQjvnBI15wB6JrA+43CtUtagjIMmX6XYO758oZHAsCNSxqRlJtdyujih0D8OCnwCRWiGWGI63zAxR0hO6s9g=="],
+
+    "@turbo/windows-arm64": ["@turbo/windows-arm64@2.9.6", "https://registry.npmmirror.com/@turbo/windows-arm64/-/windows-arm64-2.9.6.tgz", { "os": "win32", "cpu": "arm64" }, "sha512-1XUUyWW0W6FTSqGEhU8RHVqb2wP1SPkr7hIvBlMEwH9jr+sJQK5kqeosLJ/QaUv4ecSAd1ZhIrLoW7qslAzT4A=="],
+
+    "@types/node": ["@types/node@25.6.0", "https://registry.npmmirror.com/@types/node/-/node-25.6.0.tgz", { "dependencies": { "undici-types": "~7.19.0" } }, "sha512-+qIYRKdNYJwY3vRCZMdJbPLJAtGjQBudzZzdzwQYkEPQd+PJGixUL5QfvCLDaULoLv+RhT3LDkwEfKaAkgSmNQ=="],
+
+    "@types/react": ["@types/react@19.2.14", "https://registry.npmmirror.com/@types/react/-/react-19.2.14.tgz", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
+
+    "@types/react-dom": ["@types/react-dom@19.2.3", "https://registry.npmmirror.com/@types/react-dom/-/react-dom-19.2.3.tgz", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
+
+    "acorn": ["acorn@8.16.0", "https://registry.npmmirror.com/acorn/-/acorn-8.16.0.tgz", { "bin": { "acorn": "bin/acorn" } }, "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw=="],
+
+    "acorn-walk": ["acorn-walk@8.3.5", "https://registry.npmmirror.com/acorn-walk/-/acorn-walk-8.3.5.tgz", { "dependencies": { "acorn": "^8.11.0" } }, "sha512-HEHNfbars9v4pgpW6SO1KSPkfoS0xVOM/9UzkJltjlsHZmJasxg8aXkuZa7SMf8vKGIBhpUsPluQSqhJFCqebw=="],
+
+    "arg": ["arg@4.1.3", "https://registry.npmmirror.com/arg/-/arg-4.1.3.tgz", {}, "sha512-58S9QDqG0Xx27YwPSt9fJxivjYl432YCwfDMfZ+71RAqUrZef7LrKQZ3LHLOwCS4FLNBplP533Zx895SeOCHvA=="],
+
+    "balanced-match": ["balanced-match@4.0.4", "https://registry.npmmirror.com/balanced-match/-/balanced-match-4.0.4.tgz", {}, "sha512-BLrgEcRTwX2o6gGxGOCNyMvGSp35YofuYzw9h1IMTRmKqttAZZVU67bdb9Pr2vUHA8+j3i2tJfjO6C6+4myGTA=="],
+
+    "brace-expansion": ["brace-expansion@5.0.5", "https://registry.npmmirror.com/brace-expansion/-/brace-expansion-5.0.5.tgz", { "dependencies": { "balanced-match": "^4.0.2" } }, "sha512-VZznLgtwhn+Mact9tfiwx64fA9erHH/MCXEUfB/0bX/6Fz6ny5EGTXYltMocqg4xFAQZtnO3DHWWXi8RiuN7cQ=="],
+
+    "create-require": ["create-require@1.1.1", "https://registry.npmmirror.com/create-require/-/create-require-1.1.1.tgz", {}, "sha512-dcKFX3jn0MpIaXjisoRvexIJVEKzaq7z2rZKxf+MSr9TkdmHmsU4m2lcLojrj/FHl8mk5VxMmYA+ftRkP/3oKQ=="],
+
+    "csstype": ["csstype@3.2.3", "https://registry.npmmirror.com/csstype/-/csstype-3.2.3.tgz", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
+
+    "diff": ["diff@4.0.4", "https://registry.npmmirror.com/diff/-/diff-4.0.4.tgz", {}, "sha512-X07nttJQkwkfKfvTPG/KSnE2OMdcUCao6+eXF3wmnIQRn2aPAHH3VxDbDOdegkd6JbPsXqShpvEOHfAT+nCNwQ=="],
+
+    "glob": ["glob@13.0.6", "https://registry.npmmirror.com/glob/-/glob-13.0.6.tgz", { "dependencies": { "minimatch": "^10.2.2", "minipass": "^7.1.3", "path-scurry": "^2.0.2" } }, "sha512-Wjlyrolmm8uDpm/ogGyXZXb1Z+Ca2B8NbJwqBVg0axK9GbBeoS7yGV6vjXnYdGm6X53iehEuxxbyiKp8QmN4Vw=="],
+
+    "lru-cache": ["lru-cache@11.3.5", "https://registry.npmmirror.com/lru-cache/-/lru-cache-11.3.5.tgz", {}, "sha512-NxVFwLAnrd9i7KUBxC4DrUhmgjzOs+1Qm50D3oF1/oL+r1NpZ4gA7xvG0/zJ8evR7zIKn4vLf7qTNduWFtCrRw=="],
+
+    "make-error": ["make-error@1.3.6", "https://registry.npmmirror.com/make-error/-/make-error-1.3.6.tgz", {}, "sha512-s8UhlNe7vPKomQhC1qFelMokr/Sc3AgNbso3n74mVPA5LTZwkB9NlXf4XPamLxJE8h0gh73rM94xvwRT2CVInw=="],
+
+    "minimatch": ["minimatch@10.2.5", "https://registry.npmmirror.com/minimatch/-/minimatch-10.2.5.tgz", { "dependencies": { "brace-expansion": "^5.0.5" } }, "sha512-MULkVLfKGYDFYejP07QOurDLLQpcjk7Fw+7jXS2R2czRQzR56yHRveU5NDJEOviH+hETZKSkIk5c+T23GjFUMg=="],
+
+    "minipass": ["minipass@7.1.3", "https://registry.npmmirror.com/minipass/-/minipass-7.1.3.tgz", {}, "sha512-tEBHqDnIoM/1rXME1zgka9g6Q2lcoCkxHLuc7ODJ5BxbP5d4c2Z5cGgtXAku59200Cx7diuHTOYfSBD8n6mm8A=="],
+
+    "path-scurry": ["path-scurry@2.0.2", "https://registry.npmmirror.com/path-scurry/-/path-scurry-2.0.2.tgz", { "dependencies": { "lru-cache": "^11.0.0", "minipass": "^7.1.2" } }, "sha512-3O/iVVsJAPsOnpwWIeD+d6z/7PmqApyQePUtCndjatj/9I5LylHvt5qluFaBT3I5h3r1ejfR056c+FCv+NnNXg=="],
+
+    "react": ["react@19.2.5", "https://registry.npmmirror.com/react/-/react-19.2.5.tgz", {}, "sha512-llUJLzz1zTUBrskt2pwZgLq59AemifIftw4aB7JxOqf1HY2FDaGDxgwpAPVzHU1kdWabH7FauP4i1oEeer2WCA=="],
+
+    "react-dom": ["react-dom@19.2.5", "https://registry.npmmirror.com/react-dom/-/react-dom-19.2.5.tgz", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.5" } }, "sha512-J5bAZz+DXMMwW/wV3xzKke59Af6CHY7G4uYLN1OvBcKEsWOs4pQExj86BBKamxl/Ik5bx9whOrvBlSDfWzgSag=="],
+
+    "reselect": ["reselect@5.1.1", "https://registry.npmmirror.com/reselect/-/reselect-5.1.1.tgz", {}, "sha512-K/BG6eIky/SBpzfHZv/dd+9JBFiS4SWV7FIujVyJRux6e45+73RaUHXLmIR1f7WOMaQ0U1km6qwklRQxpJJY0w=="],
+
+    "scheduler": ["scheduler@0.27.0", "https://registry.npmmirror.com/scheduler/-/scheduler-0.27.0.tgz", {}, "sha512-eNv+WrVbKu1f3vbYJT/xtiF5syA5HPIMtf9IgY/nKg0sWqzAUEvqY/xm7OcZc/qafLx/iO9FgOmeSAp4v5ti/Q=="],
+
+    "tailwind-merge": ["tailwind-merge@3.5.0", "https://registry.npmmirror.com/tailwind-merge/-/tailwind-merge-3.5.0.tgz", {}, "sha512-I8K9wewnVDkL1NTGoqWmVEIlUcB9gFriAEkXkfCjX5ib8ezGxtR3xD7iZIxrfArjEsH7F1CHD4RFUtxefdqV/A=="],
+
+    "tailwind-variants": ["tailwind-variants@3.2.2", "https://registry.npmmirror.com/tailwind-variants/-/tailwind-variants-3.2.2.tgz", { "peerDependencies": { "tailwind-merge": ">=3.0.0", "tailwindcss": "*" }, "optionalPeers": ["tailwind-merge"] }, "sha512-Mi4kHeMTLvKlM98XPnK+7HoBPmf4gygdFmqQPaDivc3DpYS6aIY6KiG/PgThrGvii5YZJqRsPz0aPyhoFzmZgg=="],
+
+    "tailwindcss": ["tailwindcss@4.2.4", "https://registry.npmmirror.com/tailwindcss/-/tailwindcss-4.2.4.tgz", {}, "sha512-HhKppgO81FQof5m6TEnuBWCZGgfRAWbaeOaGT00KOy/Pf/j6oUihdvBpA7ltCeAvZpFhW3j0PTclkxsd4IXYDA=="],
+
+    "ts-node": ["ts-node@10.9.2", "https://registry.npmmirror.com/ts-node/-/ts-node-10.9.2.tgz", { "dependencies": { "@cspotcode/source-map-support": "^0.8.0", "@tsconfig/node10": "^1.0.7", "@tsconfig/node12": "^1.0.7", "@tsconfig/node14": "^1.0.0", "@tsconfig/node16": "^1.0.2", "acorn": "^8.4.1", "acorn-walk": "^8.1.1", "arg": "^4.1.0", "create-require": "^1.1.0", "diff": "^4.0.1", "make-error": "^1.1.1", "v8-compile-cache-lib": "^3.0.1", "yn": "3.1.1" }, "peerDependencies": { "@swc/core": ">=1.2.50", "@swc/wasm": ">=1.2.50", "@types/node": "*", "typescript": ">=2.7" }, "optionalPeers": ["@swc/core", "@swc/wasm"], "bin": { "ts-node": "dist/bin.js", "ts-node-cwd": "dist/bin-cwd.js", "ts-node-esm": "dist/bin-esm.js", "ts-node-script": "dist/bin-script.js", "ts-node-transpile-only": "dist/bin-transpile.js", "ts-script": "dist/bin-script-deprecated.js" } }, "sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ=="],
+
+    "turbo": ["turbo@2.9.6", "https://registry.npmmirror.com/turbo/-/turbo-2.9.6.tgz", { "optionalDependencies": { "@turbo/darwin-64": "2.9.6", "@turbo/darwin-arm64": "2.9.6", "@turbo/linux-64": "2.9.6", "@turbo/linux-arm64": "2.9.6", "@turbo/windows-64": "2.9.6", "@turbo/windows-arm64": "2.9.6" }, "bin": { "turbo": "bin/turbo" } }, "sha512-+v2QJey7ZUeUiuigkU+uFfklvNUyPI2VO2vBpMYJA+a1hKFLFiKtUYlRHdb3P9CrAvMzi0upbjI4WT+zKtqkBg=="],
+
+    "typescript": ["typescript@6.0.3", "https://registry.npmmirror.com/typescript/-/typescript-6.0.3.tgz", { "bin": { "tsc": "bin/tsc", "tsserver": "bin/tsserver" } }, "sha512-y2TvuxSZPDyQakkFRPZHKFm+KKVqIisdg9/CZwm9ftvKXLP8NRWj38/ODjNbr43SsoXqNuAisEf1GdCxqWcdBw=="],
+
+    "undici-types": ["undici-types@7.19.2", "https://registry.npmmirror.com/undici-types/-/undici-types-7.19.2.tgz", {}, "sha512-qYVnV5OEm2AW8cJMCpdV20CDyaN3g0AjDlOGf1OW4iaDEx8MwdtChUp4zu4H0VP3nDRF/8RKWH+IPp9uW0YGZg=="],
+
+    "use-sync-external-store": ["use-sync-external-store@1.6.0", "https://registry.npmmirror.com/use-sync-external-store/-/use-sync-external-store-1.6.0.tgz", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
+
+    "v8-compile-cache-lib": ["v8-compile-cache-lib@3.0.1", "https://registry.npmmirror.com/v8-compile-cache-lib/-/v8-compile-cache-lib-3.0.1.tgz", {}, "sha512-wa7YjyUGfNZngI/vtK0UHAN+lgDCxBPCylVXGp0zu59Fz5aiGtNXaq3DhIov063MorB+VfufLh3JlF2KdTK3xg=="],
+
+    "yn": ["yn@3.1.1", "https://registry.npmmirror.com/yn/-/yn-3.1.1.tgz", {}, "sha512-Ux4ygGWsu2c7isFWe8Yu1YluJmqVhxqK2cLXNQA5AcC3QfbGNpM7fu0Y8b/z16pXLnFxZYvWhd3fhBY9DLmC6Q=="],
+  }
+}

package.json

@@ -9,8 +9,12 @@
   "devDependencies": {
     "turbo": "^2.8.0"
   },
-  "packageManager": "pnpm@10.33.1+sha512.05ba3c1d5d1c18f68df06470d74055e62d41fc110a0c660db1b2dfb2785327f04cf0f68345d4609bc52089e7fa0343c31593b2f9594e2c5d5da426230acc9820",
   "engines": {
     "node": ">=20"
-  }
+  },
+  "workspaces": [
+    "packages/*",
+    "app/*"
+  ],
+  "packageManager": "pnpm@11.0.0-rc.5+sha512.c469fb6aa13a99e57aec935cd7b86ff422701f4602ecac2231d3dc20910586ebfb6b50a7b455d0778ec22ae56912d8d8e88e9f9e0a03c0875a6a41783a94a1bd"
 }

packages/ui/package.json

@@ -6,13 +6,14 @@
   "sideEffects": [
     "*.css"
   ],
-  "main": "./dist/index.es.js",
+  "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "style": "./dist/index.css",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
+      "require": "./dist/index.umd.js",
       "types": "./dist/index.d.ts"
     },
     "./index.css": "./dist/index.css"
@@ -21,24 +22,29 @@
     "dist"
   ],
   "scripts": {
-    "dev": "pnpm gen-index && tsc && vite build -w",
+    "dev": "pnpm run gen-index && vite build --watch",
-    "build": "pnpm gen-index && tsc && vite build",
+    "build": "pnpm run gen-index && vite build",
     "gen-index": "ts-node scripts/generate-index.ts && ts-node scripts/generate-index-css.ts"
   },
   "devDependencies": {
     "@types/node": "^25.6.0",
     "@types/react": "^19.2.14",
     "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react": "^6.0.1",
     "glob": "^13.0.6",
     "ts-node": "^10.9.2",
-    "typescript": "^6.0.3"
+    "typescript": "^6.0.3",
+    "vite": "^8.0.9",
+    "vite-plugin-dts": "^4.5.4"
   },
   "dependencies": {
     "@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.4"
+  },
+  "peerDependencies": {
+    "react": "^19",
+    "react-dom": "^19"
   }
 }

packages/ui/src/common/Box.tsx

@@ -1,6 +1,6 @@
 import React from "react";
 import { cn } from "tailwind-variants";
-import type { CommonProps } from "@/common/CommonProps";
+import { CommonProps } from "./CommonProps";
 
 // 别名<约束>=值
 // 千万不要 C = As extend React.ElementType，这样子连等号，会切断推导

packages/ui/src/common/CommonProps.ts

@@ -0,0 +1,9 @@
+import { CSSProperties, ReactNode } from "react";
+
+export type CommonProps = {
+  className?: string;
+  style?: CSSProperties;
+  children?: ReactNode;
+  disabled?: boolean;
+  key?: string;
+};

packages/ui/src/component/accordion/Accordion.recipe.ts

@@ -1,12 +0,0 @@
-import { tv } from "tailwind-variants";
-
-export const AccordionRecipe = tv({
-  base: "",
-  variants: {
-    size: {
-      xs: "",
-      sm: "",
-      md: "",
-    },
-  },
-});

packages/ui/src/component/accordion/Accordion.tsx

@@ -1,7 +1,7 @@
 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";
+import { CommonProps } from "../../common/CommonProps";
+import { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
 
 type AccordionProps = CommonProps &
   ComponentProps<typeof BUI.Accordion.Root> & {

packages/ui/src/component/accordion/AccordionItem.tsx

@@ -0,0 +1 @@
+export const AccordionItem = () => {};

packages/ui/src/component/accordion/AccordionPanel.tsx

@@ -0,0 +1 @@
+export const AccordionPanel = () => {};

packages/ui/src/component/accordion/AccordionTrigger.tsx

@@ -0,0 +1 @@
+export const AccordionTrigger = () => {};

packages/ui/src/component/avatar/Avatar.css

@@ -1,4 +1,7 @@
 @layer components {
+  .avatar-root {
+    background-color: var(--default-bg);
+  }
   .avatar-image {
     object-fit: cover;
     height: 100%;
@@ -11,5 +14,6 @@
     justify-content: center;
     height: 100%;
     width: 100%;
+    background-color: var(--default-bg);
   }
 }

packages/ui/src/component/avatar/Avatar.tsx

@@ -1,20 +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;
-  alt?: string;
+  name?: string;
 };
 
 export const Avatar = (props: AvatarPorps) => {
-  const { size = "md", src, alt } = props;
+  const { size = "md", src, name } = props;
 
-  
+  const avatarCls = itemSizeRecipe({ size, iconOnly: true });
 
   return (
-    <BUI.Avatar.Root>
+    <BUI.Avatar.Root className={avatarCls}>
-      <BUI.Avatar.Image src={src} alt={alt} />
+      <BUI.Avatar.Image src={src} />
-      <BUI.Avatar.Fallback></BUI.Avatar.Fallback>
+      <BUI.Avatar.Fallback>
+        <Icon size={size} svg={<UserSvg />} />
+      </BUI.Avatar.Fallback>
     </BUI.Avatar.Root>
   );
 };

packages/ui/src/component/button/Button.tsx

@@ -5,8 +5,6 @@ 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 = {

packages/ui/src/component/checkbox/Checkbox.tsx

@@ -1,13 +1,13 @@
 "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 { itemSizeRecipe } from "../../styles/recipe/ItemSize.recipe";
-import { variantRecipe } from "@/styles/recipe/variant.recipe";
+import { variantRecipe } from "../../styles/recipe/variant.recipe";
+import { CommonProps } from "../../common/CommonProps";
+import { inlineSizeRecipe } from "../../styles/recipe/IinlineSize.recipe";
+import { CheckIndicatorSvg } from "../../assets/svg/CheckIndicatorSvg";
+import { Slot } from "../../common/Slot";
 
 type CheckboxProps = CommonProps & {
   size?: "xs" | "sm" | "md";

packages/ui/src/component/theme/Theme.tsx

@@ -1,14 +1,15 @@
 import { cn } from "tailwind-variants";
-import type { CommonProps } from "../../common/CommonProps";
 import { ThemeContext } from "./ThemeContext";
+import { ReactNode } from "react";
 
-type ThemeProps = CommonProps & {
+type ThemeProps = {
   theme?: "light" | "dark";
+  children?: ReactNode;
 };
 
 export const Theme = (props: ThemeProps) => {
-  const { theme = "light", children, className } = props;
+  const { theme = "light", children } = props;
-  const themeCls = cn(theme, "brand-default", className) as string;
+  const themeCls = cn(theme, "brand-default") as string;
   return (
     <ThemeContext.Provider value={{ themeCls }}>
       <div className={themeCls}>{children}</div>

packages/ui/src/component/username-field/UsernameField.tsx

@@ -0,0 +1 @@
+export const UsernameField = () => {};

packages/ui/src/index.css

@@ -1,5 +1,6 @@
 @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';

packages/ui/src/index.ts

@@ -22,12 +22,13 @@ 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.recipe';
 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';
@@ -37,7 +38,7 @@ 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 './component/username-field/UsernameField';
 export * from './styles/recipe/IinlineSize.recipe';
 export * from './styles/recipe/ItemSize.recipe';
 export * from './styles/recipe/brand.recipe';

packages/ui/src/styles/utility/height.css

@@ -3,16 +3,16 @@
   height: 24px;
 }
 @utility h-item-sm {
-  /* 30px save space for most used size */
+  /* 28px save space for most used size */
-  height: 30px;
+  height: 28px;
 }
 @utility h-item-md {
   /* 34px most used size */
   height: 34px;
 }
 @utility h-item-lg {
-  /* 46px maximum touch size without waste */
+  /* 44px maximum touch size without waste */
-  height: 46px;
+  height: 44px;
 }
 @utility h-item-xl {
   height: calc(var(--spacing) * 16);

packages/ui/src/types/css.d.ts

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

packages/ui/tsconfig.json

@@ -1,6 +1,5 @@
 {
   "compilerOptions": {
-    "composite": true,
     "module": "ESNext",
     "moduleResolution": "bundler",
     "jsx": "react-jsx",

packages/ui/vite.config.ts

@@ -0,0 +1,44 @@
+// vite.config.ts
+import { defineConfig } from "vite";
+import react from "@vitejs/plugin-react";
+import dts from "vite-plugin-dts";
+import path from "path";
+
+export default defineConfig({
+  plugins: [
+    react(),
+    dts({
+      rollupTypes: true,
+      include: ["src"],
+    }),
+  ],
+
+  optimizeDeps: {
+    include: ["react", "react-dom"],
+  },
+
+  build: {
+    lib: {
+      entry: path.resolve(__dirname, "src/index.ts"),
+      name: "DefgovUI",
+      formats: ["es", "umd"],
+      fileName: (format) => {
+        return `index.${format}.js`;
+      },
+    },
+
+    rollupOptions: {
+      external: ["react", "react-dom", "react/jsx-runtime"],
+      output: {
+        globals: {
+          react: "React",
+          "react-dom": "ReactDOM",
+        },
+      },
+    },
+
+    sourcemap: true,
+    minify: "esbuild",
+    cssCodeSplit: true,
+  },
+});

pnpm-workspace.yaml

@@ -1,3 +1,5 @@
 packages:
-  - "apps/*"
   - "packages/*"
+  - "app/*"
+allowBuilds:
+  sharp: false