mm

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",
-    "build": "pnpm gen-index && tsc && vite build",
+    "dev": "pnpm run gen-index && vite build --watch",
+    "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.Image src={src} alt={alt} />
-      <BUI.Avatar.Fallback></BUI.Avatar.Fallback>
+    <BUI.Avatar.Root className={avatarCls}>
+      <BUI.Avatar.Image src={src} />
+      <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 { variantRecipe } from "@/styles/recipe/variant.recipe";
+import { itemSizeRecipe } from "../../styles/recipe/ItemSize.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 themeCls = cn(theme, "brand-default", className) as string;
+  const { theme = "light", children } = props;
+  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 */
-  height: 30px;
+  /* 28px save space for most used size */
+  height: 28px;
 }
 @utility h-item-md {
   /* 34px most used size */
   height: 34px;
 }
 @utility h-item-lg {
-  /* 46px maximum touch size without waste */
-  height: 46px;
+  /* 44px maximum touch size without waste */
+  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,
+  },
+});