@ug666/ui-react 0.1.0 → 0.2.0

package/dist/index.cjs

@@ -1,4 +1,5 @@
 "use strict";
+"use client";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -120,14 +121,121 @@ __export(index_exports, {
   Tooltip: () => Tooltip,
   TooltipContent: () => TooltipContent,
   TooltipTrigger: () => TooltipTrigger,
+  UGAccordion: () => Accordion,
+  UGAccordionContent: () => AccordionContent,
+  UGAccordionItem: () => AccordionItem,
+  UGAccordionTrigger: () => AccordionTrigger,
+  UGAlert: () => Alert,
+  UGAlertDescription: () => AlertDescription,
+  UGAlertTitle: () => AlertTitle,
+  UGAvatar: () => Avatar,
+  UGAvatarFallback: () => AvatarFallback,
+  UGAvatarGroup: () => AvatarGroup,
+  UGAvatarImage: () => AvatarImage,
+  UGBadge: () => Badge,
+  UGBreadcrumb: () => Breadcrumb,
+  UGBreadcrumbItem: () => BreadcrumbItem,
+  UGBreadcrumbLink: () => BreadcrumbLink,
+  UGBreadcrumbSeparator: () => BreadcrumbSeparator,
+  UGButton: () => Button,
+  UGCard: () => Card,
+  UGCardContent: () => CardContent,
+  UGCardDescription: () => CardDescription,
+  UGCardFooter: () => CardFooter,
+  UGCardHeader: () => CardHeader,
+  UGCardTitle: () => CardTitle,
+  UGCheckbox: () => Checkbox,
+  UGContextMenu: () => ContextMenu,
+  UGContextMenuContent: () => ContextMenuContent,
+  UGContextMenuItem: () => ContextMenuItem,
+  UGContextMenuSeparator: () => ContextMenuSeparator,
+  UGContextMenuTrigger: () => ContextMenuTrigger,
+  UGDescriptions: () => Descriptions,
+  UGDescriptionsItem: () => DescriptionsItem,
+  UGDialog: () => Dialog,
+  UGDrawer: () => Drawer,
+  UGDrawerClose: () => DrawerClose,
+  UGDrawerContent: () => DrawerContent,
+  UGDrawerDescription: () => DrawerDescription,
+  UGDrawerFooter: () => DrawerFooter,
+  UGDrawerHeader: () => DrawerHeader,
+  UGDrawerTitle: () => DrawerTitle,
+  UGDropdown: () => DropdownMenu,
+  UGDropdownContent: () => DropdownContent,
+  UGDropdownItem: () => DropdownItem,
+  UGDropdownMenu: () => DropdownMenu,
+  UGDropdownSeparator: () => DropdownSeparator,
+  UGDropdownTrigger: () => DropdownTrigger,
+  UGEmptyState: () => EmptyState,
+  UGForm: () => Form,
+  UGFormControl: () => FormControl,
+  UGFormDescription: () => FormDescription,
+  UGFormField: () => FormField,
+  UGFormItem: () => FormItem,
+  UGFormLabel: () => FormLabel,
+  UGFormMessage: () => FormMessage,
+  UGInput: () => Input,
+  UGLabel: () => Label,
+  UGModal: () => Modal,
+  UGModalCloseButton: () => ModalCloseButton,
+  UGModalContent: () => ModalContent,
+  UGModalFooter: () => ModalFooter,
+  UGModalHeader: () => ModalHeader,
+  UGModalTitle: () => ModalTitle,
+  UGNavigationMenu: () => NavigationMenu,
+  UGNavigationMenuContent: () => NavigationMenuContent,
+  UGNavigationMenuItem: () => NavigationMenuItem,
+  UGNavigationMenuLink: () => NavigationMenuLink,
+  UGNavigationMenuTrigger: () => NavigationMenuTrigger,
+  UGNumberInput: () => NumberInput,
+  UGOTPInput: () => OTPInput,
+  UGPagination: () => Pagination,
+  UGPopover: () => Popover,
+  UGPopoverContent: () => PopoverContent,
+  UGPopoverTrigger: () => PopoverTrigger,
+  UGProgress: () => Progress,
+  UGRadio: () => Radio,
+  UGRadioGroup: () => RadioGroup,
+  UGSelect: () => Select,
+  UGSeparator: () => Separator,
+  UGSheet: () => Sheet,
+  UGSidebar: () => Sidebar,
+  UGSkeleton: () => Skeleton,
+  UGSlider: () => Slider,
+  UGSpinner: () => Spinner,
+  UGStatistic: () => Statistic,
+  UGSteps: () => Steps,
+  UGSwitch: () => Switch,
+  UGTable: () => Table,
+  UGTableBody: () => TableBody,
+  UGTableCell: () => TableCell,
+  UGTableHead: () => TableHead,
+  UGTableHeader: () => TableHeader,
+  UGTableRow: () => TableRow,
+  UGTabs: () => Tabs,
+  UGTabsContent: () => TabsContent,
+  UGTabsList: () => TabsList,
+  UGTabsTrigger: () => TabsTrigger,
+  UGTag: () => Tag,
+  UGTextarea: () => Textarea,
+  UGToaster: () => Toaster,
+  UGTooltip: () => Tooltip,
+  UGTooltipContent: () => TooltipContent,
+  UGTooltipTrigger: () => TooltipTrigger,
   badgeVariants: () => badgeVariants,
   buttonVariants: () => buttonVariants,
   checkboxVariants: () => checkboxVariants,
-  cn: () => import_ui_utils43.cn,
+  cn: () => cn,
   numberInputVariants: () => numberInputVariants,
+  reactComponentLayers: () => reactComponentLayers,
   tagVariants: () => tagVariants,
   theme: () => theme,
   toast: () => toast,
+  ugBadgeVariants: () => badgeVariants,
+  ugButtonVariants: () => buttonVariants,
+  ugCheckboxVariants: () => checkboxVariants,
+  ugNumberInputVariants: () => numberInputVariants,
+  ugTagVariants: () => tagVariants,
   useClickOutside: () => useClickOutside,
   useCopyToClipboard: () => useCopyToClipboard,
   useDebounce: () => useDebounce,
@@ -148,24 +256,32 @@ module.exports = __toCommonJS(index_exports);
 var import_react = require("react");
 var import_lucide_react = require("lucide-react");
 var import_class_variance_authority = require("class-variance-authority");
-var import_ui_utils = require("@ug666/ui-utils");
+
+// src/internal/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/button.tsx
 var import_jsx_runtime = require("react/jsx-runtime");
 var buttonVariants = (0, import_class_variance_authority.cva)(
-  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-[background,border-color,color,box-shadow,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-fg hover:bg-primary-hover focus-visible:ring-ring",
-        destructive: "bg-danger text-danger-fg hover:bg-danger-hover focus-visible:ring-danger",
-        outline: "border border-border-strong bg-surface-1 text-text-primary hover:bg-surface-2 focus-visible:ring-ring/30",
-        secondary: "bg-surface-2 text-text-primary hover:bg-surface-3 focus-visible:ring-ring/30",
+        default: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover hover:shadow-md focus-visible:ring-ring",
+        destructive: "bg-danger text-danger-fg shadow-sm hover:bg-danger-hover hover:shadow-md focus-visible:ring-danger",
+        outline: "border border-border-strong bg-surface-1 text-text-primary shadow-sm hover:border-primary/55 hover:bg-surface-2 focus-visible:ring-ring/30",
+        secondary: "border border-border-base bg-surface-2 text-text-primary shadow-sm hover:bg-surface-3 focus-visible:ring-ring/30",
         ghost: "text-text-primary hover:bg-surface-2 focus-visible:ring-ring/30",
         link: "text-text-primary underline-offset-4 hover:underline focus-visible:ring-ring/30"
       },
       size: {
         default: "h-9 px-4 py-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-12 rounded-md px-6 text-base",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-11 px-5 text-base",
         icon: "h-9 w-9"
       }
     },
@@ -181,7 +297,7 @@ var Button = (0, import_react.forwardRef)(
       "button",
       {
         ref,
-        className: (0, import_ui_utils.cn)(buttonVariants({ variant, size }), className),
+        className: cn(buttonVariants({ variant, size }), className),
         disabled: disabled || loading,
         ...props,
         children: [
@@ -196,7 +312,6 @@ Button.displayName = "Button";
 
 // src/components/input.tsx
 var import_react2 = require("react");
-var import_ui_utils2 = require("@ug666/ui-utils");
 var import_jsx_runtime2 = require("react/jsx-runtime");
 var Input = (0, import_react2.forwardRef)(
   ({ className, label, error, helperText, id, ...props }, ref) => {
@@ -216,7 +331,7 @@ var Input = (0, import_react2.forwardRef)(
         {
           ref,
           id: inputId,
-          className: (0, import_ui_utils2.cn)(
+          className: cn(
             "flex h-9 w-full rounded-md border bg-surface-1 px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
             "disabled:cursor-not-allowed disabled:opacity-50",
@@ -235,14 +350,13 @@ Input.displayName = "Input";
 
 // src/components/label.tsx
 var import_react3 = require("react");
-var import_ui_utils3 = require("@ug666/ui-utils");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 var Label = (0, import_react3.forwardRef)(({ className, required, children, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(
     "label",
     {
       ref,
-      className: (0, import_ui_utils3.cn)(
+      className: cn(
         "leading-none text-sm font-medium text-text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
         className
       ),
@@ -258,25 +372,24 @@ Label.displayName = "Label";
 
 // src/components/card.tsx
 var import_react4 = require("react");
-var import_ui_utils4 = require("@ug666/ui-utils");
 var import_jsx_runtime4 = require("react/jsx-runtime");
 var Card = (0, import_react4.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: (0, import_ui_utils4.cn)("rounded-lg border border-border-base bg-surface-1", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("rounded-lg border border-border-base bg-surface-1 shadow-sm", className), ...props });
 });
 var CardHeader = (0, import_react4.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: (0, import_ui_utils4.cn)("flex flex-col gap-1 px-5 py-4 border-b border-border-base", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("flex flex-col gap-1 px-5 py-4 border-b border-border-base", className), ...props });
 });
 var CardTitle = (0, import_react4.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { ref, className: (0, import_ui_utils4.cn)("leading-none font-semibold tracking-tight text-text-primary", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h3", { ref, className: cn("leading-none font-semibold text-text-primary", className), ...props });
 });
 var CardDescription = (0, import_react4.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { ref, className: (0, import_ui_utils4.cn)("text-sm text-text-secondary", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("p", { ref, className: cn("text-sm text-text-secondary", className), ...props });
 });
 var CardContent = (0, import_react4.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: (0, import_ui_utils4.cn)("px-5 py-4", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("px-5 py-4", className), ...props });
 });
 var CardFooter = (0, import_react4.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: (0, import_ui_utils4.cn)("flex items-center px-5 py-4 border-t border-border-base", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("flex items-center px-5 py-4 border-t border-border-base", className), ...props });
 });
 Card.displayName = "Card";
 CardHeader.displayName = "CardHeader";
@@ -288,19 +401,18 @@ CardFooter.displayName = "CardFooter";
 // src/components/badge.tsx
 var import_react5 = require("react");
 var import_class_variance_authority2 = require("class-variance-authority");
-var import_ui_utils5 = require("@ug666/ui-utils");
 var import_jsx_runtime5 = require("react/jsx-runtime");
 var badgeVariants = (0, import_class_variance_authority2.cva)(
-  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold transition-colors",
+  "inline-flex min-h-6 items-center rounded-md px-2.5 py-0.5 text-xs font-semibold leading-none transition-colors",
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-fg",
-        secondary: "bg-surface-3 text-text-primary",
-        destructive: "bg-danger-soft text-danger-soft-fg",
-        outline: "border border-border-strong text-text-primary bg-transparent",
-        success: "bg-success-soft text-success-soft-fg",
-        warning: "bg-warning-soft text-warning-soft-fg"
+        default: "border border-primary/20 bg-primary-soft text-primary-soft-fg",
+        secondary: "border border-border-base bg-surface-2 text-text-primary",
+        destructive: "border border-danger/20 bg-danger-soft text-danger-soft-fg",
+        outline: "border border-border-strong bg-transparent text-text-primary",
+        success: "border border-success/20 bg-success-soft text-success-soft-fg",
+        warning: "border border-warning/20 bg-warning-soft text-warning-soft-fg"
       }
     },
     defaultVariants: {
@@ -309,7 +421,7 @@ var badgeVariants = (0, import_class_variance_authority2.cva)(
   }
 );
 var Badge = (0, import_react5.forwardRef)(({ className, variant, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { ref, className: (0, import_ui_utils5.cn)(badgeVariants({ variant }), className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { ref, className: cn(badgeVariants({ variant }), className), ...props });
 });
 Badge.displayName = "Badge";
 
@@ -317,23 +429,22 @@ Badge.displayName = "Badge";
 var import_react6 = require("react");
 var import_lucide_react2 = require("lucide-react");
 var import_class_variance_authority3 = require("class-variance-authority");
-var import_ui_utils6 = require("@ug666/ui-utils");
 var import_jsx_runtime6 = require("react/jsx-runtime");
 var tagVariants = (0, import_class_variance_authority3.cva)(
-  "inline-flex items-center gap-1 rounded font-medium transition-colors",
+  "inline-flex items-center gap-1.5 rounded-md border font-medium leading-none transition-colors",
   {
     variants: {
       variant: {
-        default: "bg-surface-3 text-text-primary",
-        primary: "bg-success-soft text-success-soft-fg",
-        success: "bg-success-soft text-success-soft-fg",
-        warning: "bg-warning-soft text-warning-soft-fg",
-        destructive: "bg-danger-soft text-danger-soft-fg",
-        outline: "border border-border-strong bg-transparent text-text-primary"
+        default: "border-border-base bg-surface-2 text-text-primary",
+        primary: "border-primary/20 bg-primary-soft text-primary-soft-fg",
+        success: "border-success/20 bg-success-soft text-success-soft-fg",
+        warning: "border-warning/20 bg-warning-soft text-warning-soft-fg",
+        destructive: "border-danger/20 bg-danger-soft text-danger-soft-fg",
+        outline: "border-border-strong bg-transparent text-text-primary"
       },
       size: {
-        sm: "px-1.5 py-0 text-xs",
-        default: "px-2 py-0.5 text-xs"
+        sm: "min-h-6 px-2 text-[11px]",
+        default: "min-h-7 px-2.5 text-xs"
       }
     },
     defaultVariants: {
@@ -344,7 +455,7 @@ var tagVariants = (0, import_class_variance_authority3.cva)(
 );
 var Tag = (0, import_react6.forwardRef)(
   ({ variant, size, closable = false, disabled = false, color, onClose, className, children, style, ...props }, ref) => {
-    const customStyle = color ? { backgroundColor: color, color: "#fff", borderColor: color, ...style } : style ?? {};
+    const customStyle = color ? { backgroundColor: color, color: "hsl(var(--primary-fg))", borderColor: color, ...style } : style ?? {};
     function handleClose(event) {
       event.stopPropagation();
       if (!disabled) {
@@ -355,7 +466,7 @@ var Tag = (0, import_react6.forwardRef)(
       "span",
       {
         ref,
-        className: (0, import_ui_utils6.cn)(tagVariants({ variant, size }), disabled && "cursor-not-allowed opacity-50", className),
+        className: cn(tagVariants({ variant, size }), disabled && "cursor-not-allowed opacity-50", className),
         style: customStyle,
         ...props,
         children: [
@@ -366,7 +477,7 @@ var Tag = (0, import_react6.forwardRef)(
               type: "button",
               onClick: handleClose,
               disabled,
-              className: "inline-flex items-center justify-center rounded-sm opacity-60 transition-opacity hover:opacity-100 focus-visible:outline-none disabled:pointer-events-none",
+              className: "-mr-1 inline-flex h-4 w-4 items-center justify-center rounded-sm opacity-70 transition hover:bg-surface-3 hover:opacity-100 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-current disabled:pointer-events-none",
               "aria-label": "\u5173\u95ED\u6807\u7B7E",
               children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react2.X, { size: 10, strokeWidth: 2.5 })
             }
@@ -379,10 +490,9 @@ var Tag = (0, import_react6.forwardRef)(
 Tag.displayName = "Tag";
 
 // src/components/modal.tsx
-var import_react8 = require("react");
+var import_react9 = require("react");
 var import_react_dom = require("react-dom");
 var import_lucide_react3 = require("lucide-react");
-var import_ui_utils7 = require("@ug666/ui-utils");
 
 // src/hooks/use-escape-key.ts
 var import_react7 = require("react");
@@ -394,7 +504,7 @@ function useEscapeKey(open, onEscape) {
     [onEscape]
   );
   (0, import_react7.useEffect)(() => {
-    if (!open) return;
+    if (!open || typeof document === "undefined") return;
     document.addEventListener("keydown", handleEscape);
     document.body.style.overflow = "hidden";
     return () => {
@@ -404,18 +514,30 @@ function useEscapeKey(open, onEscape) {
   }, [open, handleEscape]);
 }
 
+// src/internal/use-portal-container.ts
+var import_react8 = require("react");
+function usePortalContainer() {
+  const [container, setContainer] = (0, import_react8.useState)(null);
+  (0, import_react8.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    setContainer(document.body);
+  }, []);
+  return container;
+}
+
 // src/components/modal.tsx
 var import_jsx_runtime7 = require("react/jsx-runtime");
-var Modal = (0, import_react8.forwardRef)(({ open, onClose, children, className }, ref) => {
+var Modal = (0, import_react9.forwardRef)(({ open, onClose, children, className }, ref) => {
   useEscapeKey(open, onClose);
-  if (!open) return null;
+  const portalContainer = usePortalContainer();
+  if (!open || !portalContainer) return null;
   return (0, import_react_dom.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils7.cn)(
-          "fixed inset-0 z-50 flex items-center justify-center",
+        className: cn(
+          "fixed inset-0 z-[80] flex items-center justify-center p-4",
           className
         ),
         role: "dialog",
@@ -433,29 +555,29 @@ var Modal = (0, import_react8.forwardRef)(({ open, onClose, children, className
         ]
       }
     ),
-    document.body
+    portalContainer
   );
 });
-var ModalContent = (0, import_react8.forwardRef)(({ className, maxWidth = "max-w-lg", children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, className: (0, import_ui_utils7.cn)("w-full rounded-lg bg-surface-1 shadow-lg", maxWidth, className), ...props, children });
+var ModalContent = (0, import_react9.forwardRef)(({ className, maxWidth = "max-w-lg", children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, className: cn("flex max-h-[85vh] w-full flex-col rounded-lg border border-border-base bg-surface-1 shadow-xl", maxWidth, className), ...props, children });
 });
-var ModalHeader = (0, import_react8.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, className: (0, import_ui_utils7.cn)("flex items-center justify-between border-b border-border-base px-6 py-4", className), ...props });
+var ModalHeader = (0, import_react9.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, className: cn("flex shrink-0 items-center justify-between border-b border-border-base px-6 py-4", className), ...props });
 });
-var ModalTitle = (0, import_react8.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { ref, className: (0, import_ui_utils7.cn)("text-lg font-semibold text-text-primary", className), ...props });
+var ModalTitle = (0, import_react9.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h2", { ref, className: cn("text-lg font-semibold text-text-primary", className), ...props });
 });
-var ModalFooter = (0, import_react8.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, className: (0, import_ui_utils7.cn)("flex items-center justify-end gap-2 border-t border-border-base px-6 py-4", className), ...props });
+var ModalFooter = (0, import_react9.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { ref, className: cn("flex shrink-0 items-center justify-end gap-2 border-t border-border-base px-6 py-4", className), ...props });
 });
-var ModalCloseButton = (0, import_react8.forwardRef)(({ onClick, className, type = "button", ...props }, ref) => {
+var ModalCloseButton = (0, import_react9.forwardRef)(({ onClick, className, type = "button", ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
     "button",
     {
       ref,
       type,
       onClick,
-      className: (0, import_ui_utils7.cn)(
+      className: cn(
         "rounded-md p-1 text-text-tertiary transition-colors hover:bg-surface-3 hover:text-text-secondary",
         className
       ),
@@ -473,15 +595,14 @@ ModalFooter.displayName = "ModalFooter";
 ModalCloseButton.displayName = "ModalCloseButton";
 
 // src/components/dialog.tsx
-var import_react9 = require("react");
+var import_react10 = require("react");
 var import_react_dom2 = require("react-dom");
-var import_ui_utils8 = require("@ug666/ui-utils");
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var CONFIRM_VARIANT_CLASSES = {
   default: "bg-primary text-primary-fg hover:bg-primary-hover focus-visible:ring-ring",
   destructive: "bg-danger text-danger-fg hover:bg-danger-hover focus-visible:ring-danger"
 };
-var Dialog = (0, import_react9.forwardRef)(
+var Dialog = (0, import_react10.forwardRef)(
   ({
     open,
     onOpenChange,
@@ -494,40 +615,27 @@ var Dialog = (0, import_react9.forwardRef)(
     onCancel,
     className
   }, ref) => {
-    const handleClose = (0, import_react9.useCallback)(() => {
+    const portalContainer = usePortalContainer();
+    const handleClose = (0, import_react10.useCallback)(() => {
       onOpenChange(false);
     }, [onOpenChange]);
-    const handleCancel = (0, import_react9.useCallback)(() => {
+    const handleCancel = (0, import_react10.useCallback)(() => {
       onCancel?.();
       handleClose();
     }, [onCancel, handleClose]);
-    const handleConfirm = (0, import_react9.useCallback)(() => {
+    const handleConfirm = (0, import_react10.useCallback)(() => {
       onConfirm?.();
       handleClose();
     }, [onConfirm, handleClose]);
-    const handleEscape = (0, import_react9.useCallback)(
-      (e) => {
-        if (e.key === "Escape") handleCancel();
-      },
-      [handleCancel]
-    );
-    (0, import_react9.useEffect)(() => {
-      if (!open) return;
-      document.addEventListener("keydown", handleEscape);
-      document.body.style.overflow = "hidden";
-      return () => {
-        document.removeEventListener("keydown", handleEscape);
-        document.body.style.overflow = "";
-      };
-    }, [open, handleEscape]);
-    if (!open) return null;
+    useEscapeKey(open, handleCancel);
+    if (!open || !portalContainer) return null;
     return (0, import_react_dom2.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
         "div",
         {
           ref,
-          className: (0, import_ui_utils8.cn)(
-            "fixed inset-0 z-50 flex items-center justify-center p-4",
+          className: cn(
+            "fixed inset-0 z-[90] flex items-center justify-center p-4",
             className
           ),
           role: "alertdialog",
@@ -543,7 +651,7 @@ var Dialog = (0, import_react9.forwardRef)(
                 "aria-hidden": "true"
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative z-10 w-full max-w-sm rounded-lg bg-surface-1 shadow-lg", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "relative z-10 w-full max-w-sm rounded-lg border border-border-base bg-surface-1 shadow-xl", children: [
               /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)("div", { className: "px-6 pt-6 pb-4", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
                   "h2",
@@ -568,7 +676,7 @@ var Dialog = (0, import_react9.forwardRef)(
                   {
                     type: "button",
                     onClick: handleCancel,
-                    className: (0, import_ui_utils8.cn)(
+                    className: cn(
                       "inline-flex h-9 items-center justify-center rounded-md border border-border-strong bg-surface-1 px-4 text-sm font-medium text-text-secondary transition-colors",
                       "hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-ring/30"
                     ),
@@ -580,7 +688,7 @@ var Dialog = (0, import_react9.forwardRef)(
                   {
                     type: "button",
                     onClick: handleConfirm,
-                    className: (0, import_ui_utils8.cn)(
+                    className: cn(
                       "inline-flex h-9 items-center justify-center rounded-md px-4 text-sm font-medium transition-colors",
                       "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2",
                       CONFIRM_VARIANT_CLASSES[variant]
@@ -593,21 +701,20 @@ var Dialog = (0, import_react9.forwardRef)(
           ]
         }
       ),
-      document.body
+      portalContainer
     );
   }
 );
 Dialog.displayName = "Dialog";
 
 // src/components/drawer.tsx
-var import_react10 = require("react");
+var import_react11 = require("react");
 var import_react_dom3 = require("react-dom");
 var import_lucide_react4 = require("lucide-react");
-var import_ui_utils9 = require("@ug666/ui-utils");
 var import_jsx_runtime9 = require("react/jsx-runtime");
-var DrawerContext = (0, import_react10.createContext)(null);
+var DrawerContext = (0, import_react11.createContext)(null);
 function useDrawerContext() {
-  const ctx = (0, import_react10.useContext)(DrawerContext);
+  const ctx = (0, import_react11.useContext)(DrawerContext);
   if (!ctx) throw new Error("Drawer \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Drawer> \u5185\u4F7F\u7528");
   return ctx;
 }
@@ -622,9 +729,10 @@ var Drawer = ({ open, onOpenChange, side = "right", children }) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(DrawerContext.Provider, { value: { open, onOpenChange, side }, children });
 };
 Drawer.displayName = "Drawer";
-var DrawerContent = (0, import_react10.forwardRef)(({ className, children, ...props }, ref) => {
+var DrawerContent = (0, import_react11.forwardRef)(({ className, children, ...props }, ref) => {
   const { open, onOpenChange, side } = useDrawerContext();
-  if (!open) return null;
+  const portalContainer = usePortalContainer();
+  if (!open || !portalContainer) return null;
   return (0, import_react_dom3.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "fixed inset-0 z-50", role: "dialog", "aria-modal": "true", children: [
       /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
@@ -639,7 +747,7 @@ var DrawerContent = (0, import_react10.forwardRef)(({ className, children, ...pr
         "div",
         {
           ref,
-          className: (0, import_ui_utils9.cn)(
+          className: cn(
             "absolute flex flex-col bg-surface-1 shadow-xl transition-transform duration-300 ease-in-out",
             SIDE_CLASSES[side],
             className
@@ -650,41 +758,41 @@ var DrawerContent = (0, import_react10.forwardRef)(({ className, children, ...pr
         }
       )
     ] }),
-    document.body
+    portalContainer
   );
 });
 DrawerContent.displayName = "DrawerContent";
-var DrawerHeader = (0, import_react10.forwardRef)(({ className, ...props }, ref) => {
+var DrawerHeader = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       ref,
-      className: (0, import_ui_utils9.cn)("flex flex-col gap-1.5 border-b border-border-base px-6 py-4", className),
+      className: cn("flex flex-col gap-1.5 border-b border-border-base px-6 py-4", className),
       ...props
     }
   );
 });
 DrawerHeader.displayName = "DrawerHeader";
-var DrawerTitle = (0, import_react10.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { ref, className: (0, import_ui_utils9.cn)("text-lg font-semibold text-text-primary", className), ...props });
+var DrawerTitle = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("h2", { ref, className: cn("text-lg font-semibold text-text-primary", className), ...props });
 });
 DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = (0, import_react10.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ref, className: (0, import_ui_utils9.cn)("text-sm text-text-secondary", className), ...props });
+var DrawerDescription = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("p", { ref, className: cn("text-sm text-text-secondary", className), ...props });
 });
 DrawerDescription.displayName = "DrawerDescription";
-var DrawerFooter = (0, import_react10.forwardRef)(({ className, ...props }, ref) => {
+var DrawerFooter = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "div",
     {
       ref,
-      className: (0, import_ui_utils9.cn)("mt-auto flex items-center justify-end gap-2 border-t border-border-base px-6 py-4", className),
+      className: cn("mt-auto flex items-center justify-end gap-2 border-t border-border-base px-6 py-4", className),
       ...props
     }
   );
 });
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerClose = (0, import_react10.forwardRef)(({ className, children, type = "button", ...props }, ref) => {
+var DrawerClose = (0, import_react11.forwardRef)(({ className, children, type = "button", ...props }, ref) => {
   const { onOpenChange } = useDrawerContext();
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     "button",
@@ -692,7 +800,7 @@ var DrawerClose = (0, import_react10.forwardRef)(({ className, children, type =
       ref,
       type,
       onClick: () => onOpenChange(false),
-      className: (0, import_ui_utils9.cn)(
+      className: cn(
         "inline-flex items-center justify-center rounded-md px-4 py-2 text-sm font-medium text-text-secondary transition-colors hover:bg-surface-3 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30",
         className
       ),
@@ -704,33 +812,32 @@ var DrawerClose = (0, import_react10.forwardRef)(({ className, children, type =
 DrawerClose.displayName = "DrawerClose";
 
 // src/components/table.tsx
-var import_react11 = require("react");
-var import_ui_utils10 = require("@ug666/ui-utils");
+var import_react12 = require("react");
 var import_jsx_runtime10 = require("react/jsx-runtime");
-var Table = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
+var Table = (0, import_react12.forwardRef)(({ className, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
     "table",
     {
       ref,
-      className: (0, import_ui_utils10.cn)("w-full caption-bottom text-sm", className),
+      className: cn("w-full caption-bottom text-sm", className),
       ...props
     }
   ) });
 });
-var TableHeader = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { ref, className: (0, import_ui_utils10.cn)("[&_tr]:border-b border-border-base", className), ...props });
+var TableHeader = (0, import_react12.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("thead", { ref, className: cn("[&_tr]:border-b border-border-base", className), ...props });
 });
-var TableBody = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { ref, className: (0, import_ui_utils10.cn)("[&_tr:last-child]:border-0", className), ...props });
+var TableBody = (0, import_react12.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tbody", { ref, className: cn("[&_tr:last-child]:border-0", className), ...props });
 });
-var TableRow = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { ref, className: (0, import_ui_utils10.cn)("border-b border-border-base transition-colors hover:bg-surface-2", className), ...props });
+var TableRow = (0, import_react12.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("tr", { ref, className: cn("border-b border-border-base transition-colors hover:bg-surface-2", className), ...props });
 });
-var TableHead = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { ref, className: (0, import_ui_utils10.cn)("h-10 px-4 text-left align-middle font-medium text-text-secondary [&:has([role=checkbox])]:pr-0", className), ...props });
+var TableHead = (0, import_react12.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("th", { ref, className: cn("h-10 px-4 text-left align-middle font-medium text-text-secondary [&:has([role=checkbox])]:pr-0", className), ...props });
 });
-var TableCell = (0, import_react11.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { ref, className: (0, import_ui_utils10.cn)("px-4 py-3 align-middle text-text-primary [&:has([role=checkbox])]:pr-0", className), ...props });
+var TableCell = (0, import_react12.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("td", { ref, className: cn("px-4 py-3 align-middle text-text-primary [&:has([role=checkbox])]:pr-0", className), ...props });
 });
 Table.displayName = "Table";
 TableHeader.displayName = "TableHeader";
@@ -740,10 +847,9 @@ TableHead.displayName = "TableHead";
 TableCell.displayName = "TableCell";
 
 // src/components/toast.tsx
-var import_react12 = require("react");
+var import_react13 = require("react");
 var import_react_dom4 = require("react-dom");
 var import_lucide_react5 = require("lucide-react");
-var import_ui_utils11 = require("@ug666/ui-utils");
 var import_jsx_runtime11 = require("react/jsx-runtime");
 var listeners = /* @__PURE__ */ new Set();
 var toastItems = [];
@@ -782,35 +888,36 @@ var typeLabel = {
   error: "\u9519\u8BEF",
   info: "\u63D0\u793A"
 };
-var Toaster = (0, import_react12.forwardRef)(({ className, ...props }, ref) => {
-  const [items, setItems] = (0, import_react12.useState)([]);
-  const mountedRef = (0, import_react12.useRef)(true);
-  const handleUpdate = (0, import_react12.useCallback)((next) => {
+var Toaster = (0, import_react13.forwardRef)(({ className, ...props }, ref) => {
+  const [items, setItems] = (0, import_react13.useState)([]);
+  const mountedRef = (0, import_react13.useRef)(true);
+  const portalContainer = usePortalContainer();
+  const handleUpdate = (0, import_react13.useCallback)((next) => {
     if (mountedRef.current) {
       setItems(next);
     }
   }, []);
-  (0, import_react12.useEffect)(() => {
+  (0, import_react13.useEffect)(() => {
     listeners.add(handleUpdate);
     return () => {
       mountedRef.current = false;
       listeners.delete(handleUpdate);
     };
   }, [handleUpdate]);
-  if (items.length === 0) return null;
+  if (items.length === 0 || !portalContainer) return null;
   return (0, import_react_dom4.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils11.cn)("fixed top-4 right-4 z-[9999] flex w-80 flex-col gap-2", className),
+        className: cn("fixed top-4 right-4 z-[9999] flex w-80 flex-col gap-2", className),
         role: "region",
         "aria-label": "\u901A\u77E5",
         ...props,
         children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime11.jsxs)(
           "div",
           {
-            className: (0, import_ui_utils11.cn)(
+            className: cn(
               "flex items-start justify-between gap-2 rounded-md border px-4 py-3 text-sm shadow-md",
               typeStyles[item.type]
             ),
@@ -839,65 +946,238 @@ var Toaster = (0, import_react12.forwardRef)(({ className, ...props }, ref) => {
         ))
       }
     ),
-    document.body
+    portalContainer
   );
 });
 Toaster.displayName = "Toaster";
 
 // src/components/sidebar.tsx
-var import_react13 = require("react");
-var import_ui_utils12 = require("@ug666/ui-utils");
+var import_react14 = require("react");
+var import_lucide_react6 = require("lucide-react");
 var import_jsx_runtime12 = require("react/jsx-runtime");
 var variantStyles = {
   primary: {
-    container: "bg-primary text-primary-fg",
-    active: "bg-primary-active text-primary-fg",
-    inactive: "text-primary-fg/70 hover:bg-primary-hover hover:text-primary-fg",
-    divider: "border-primary-active"
+    container: "border-r border-border-base bg-surface-1 text-text-primary shadow-sm",
+    active: "bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20 before:absolute before:left-0 before:top-1/2 before:h-6 before:w-[3px] before:-translate-y-1/2 before:rounded-r-full before:bg-primary",
+    inactive: "text-text-secondary hover:bg-surface-2 hover:text-text-primary",
+    divider: "border-border-base",
+    icon: "bg-transparent text-text-tertiary group-hover:bg-surface-3 group-hover:text-primary",
+    activeIcon: "bg-primary/15 text-primary"
   },
   dark: {
-    container: "bg-slate-950 text-slate-100",
-    active: "bg-slate-800/80 text-white before:absolute before:left-0 before:top-1/2 before:-translate-y-1/2 before:h-5 before:w-[3px] before:rounded-r-full before:bg-primary",
-    inactive: "text-slate-400 hover:bg-slate-800/40 hover:text-slate-100",
-    divider: "border-slate-800/80"
+    container: "border-r border-border-base bg-surface-1 text-text-primary shadow-sm",
+    active: "bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20 before:absolute before:left-0 before:top-1/2 before:h-6 before:w-[3px] before:-translate-y-1/2 before:rounded-r-full before:bg-primary",
+    inactive: "text-text-secondary hover:bg-surface-2 hover:text-text-primary",
+    divider: "border-border-base",
+    icon: "bg-transparent text-text-tertiary group-hover:bg-surface-3 group-hover:text-primary",
+    activeIcon: "bg-primary/15 text-primary"
   }
 };
-var Sidebar = (0, import_react13.forwardRef)(
-  ({ items, variant = "primary", collapsed = false, footer, className }, ref) => {
+function getItemKey(item, index, parentKey) {
+  return item.id ?? item.href ?? `${parentKey}-${index}-${item.label}`;
+}
+function itemHasActiveChild(item) {
+  return Boolean(item.children?.some((child) => child.active || itemHasActiveChild(child)));
+}
+function normalizeSearch(value) {
+  return value.toLowerCase().replace(/\s+/g, "");
+}
+function filterSidebarItems(items, query) {
+  if (!query) return items;
+  return items.reduce((result, item) => {
+    const children = item.children ? filterSidebarItems(item.children, query) : [];
+    const matched = normalizeSearch(item.label).includes(query);
+    if (matched || children.length > 0) {
+      result.push({ ...item, children });
+    }
+    return result;
+  }, []);
+}
+var Sidebar = (0, import_react14.forwardRef)(
+  ({
+    items,
+    variant = "primary",
+    collapsed,
+    defaultCollapsed = false,
+    onCollapsedChange,
+    collapsible = false,
+    searchable = false,
+    searchPlaceholder = "\u641C\u7D22\u83DC\u5355...",
+    responsive = false,
+    mobileOpen = false,
+    onMobileOpenChange,
+    header,
+    footer,
+    className
+  }, ref) => {
     const styles = variantStyles[variant];
-    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    const [internalCollapsed, setInternalCollapsed] = (0, import_react14.useState)(defaultCollapsed);
+    const [expandedKeys, setExpandedKeys] = (0, import_react14.useState)(() => /* @__PURE__ */ new Set());
+    const [query, setQuery] = (0, import_react14.useState)("");
+    const effectiveCollapsed = collapsed ?? internalCollapsed;
+    const normalizedQuery = normalizeSearch(query);
+    const visibleItems = (0, import_react14.useMemo)(() => filterSidebarItems(items, normalizedQuery), [items, normalizedQuery]);
+    function setCollapsedState(nextCollapsed) {
+      setInternalCollapsed(nextCollapsed);
+      onCollapsedChange?.(nextCollapsed);
+    }
+    function toggleExpanded(key) {
+      setExpandedKeys((current) => {
+        const next = new Set(current);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      });
+    }
+    function closeMobile() {
+      onMobileOpenChange?.(false);
+    }
+    function renderItems(list, depth = 0, parentKey = "root") {
+      return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: cn("flex flex-col gap-1", depth === 0 ? "px-2.5" : "ml-6 mt-1 border-l border-border-base pl-2"), children: list.map((item, index) => {
+        const key = getItemKey(item, index, parentKey);
+        const hasChildren = Boolean(item.children?.length);
+        const active = Boolean(item.active || itemHasActiveChild(item));
+        const expanded = !effectiveCollapsed && hasChildren && (normalizedQuery.length > 0 || active || expandedKeys.has(key));
+        const itemContent = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              className: cn(
+                "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors",
+                active ? styles.activeIcon : styles.icon
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(item.icon, { size: 16 })
+            }
+          ),
+          !effectiveCollapsed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label }),
+          !effectiveCollapsed && hasChildren && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            import_lucide_react6.ChevronDown,
+            {
+              size: 15,
+              className: cn("shrink-0 text-text-tertiary transition-transform", expanded && "rotate-180"),
+              "aria-hidden": "true"
+            }
+          )
+        ] });
+        const itemClassName = cn(
+          "group relative flex min-w-0 items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium outline-none transition-all duration-150 focus-visible:ring-2 focus-visible:ring-primary/35",
+          effectiveCollapsed && "justify-center px-2",
+          active ? styles.active : styles.inactive
+        );
+        return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("li", { children: [
+          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "button",
+            {
+              type: "button",
+              className: cn("w-full", itemClassName),
+              "aria-expanded": expanded,
+              title: effectiveCollapsed ? item.label : void 0,
+              onClick: () => toggleExpanded(key),
+              children: itemContent
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "a",
+            {
+              href: item.href ?? "#",
+              "aria-current": item.active ? "page" : void 0,
+              className: itemClassName,
+              title: effectiveCollapsed ? item.label : void 0,
+              onClick: closeMobile,
+              children: itemContent
+            }
+          ),
+          expanded && item.children ? renderItems(item.children, depth + 1, key) : null
+        ] }, key);
+      }) });
+    }
+    const sidebar = /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
       "aside",
       {
         ref,
-        className: (0, import_ui_utils12.cn)(
-          "flex flex-col transition-all duration-300",
+        className: cn(
+          "flex flex-col overflow-hidden transition-all duration-300",
           styles.container,
-          collapsed ? "w-16" : "w-60",
+          effectiveCollapsed ? "w-[72px]" : "w-64",
+          responsive && [
+            "fixed inset-y-0 left-0 z-50 md:relative md:inset-auto md:z-auto",
+            mobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
+          ],
           className
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { className: "flex-1 overflow-y-auto py-4", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("ul", { className: "flex flex-col gap-1 px-2", children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-            "a",
+          (header || collapsible || responsive && mobileOpen) && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+            "div",
             {
-              href: item.href,
-              className: (0, import_ui_utils12.cn)(
-                "relative flex items-center gap-3 rounded-md px-3 py-2 text-sm font-medium transition-colors duration-150",
-                item.active ? styles.active : styles.inactive
+              className: cn(
+                "flex border-b px-3 py-3",
+                styles.divider,
+                effectiveCollapsed ? "justify-center" : "items-center gap-2"
               ),
-              title: collapsed ? item.label : void 0,
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(item.icon, { size: 17, className: "shrink-0" }),
-                !collapsed && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "truncate", children: item.label })
+                !effectiveCollapsed && header ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("div", { className: "min-w-0 flex-1", children: header }) : null,
+                collapsible && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border-base bg-surface-2 text-text-secondary transition-colors hover:border-primary/40 hover:text-text-primary",
+                    "aria-label": effectiveCollapsed ? "\u5C55\u5F00\u4FA7\u8FB9\u680F" : "\u6298\u53E0\u4FA7\u8FB9\u680F",
+                    onClick: () => setCollapsedState(!effectiveCollapsed),
+                    children: effectiveCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.PanelLeftOpen, { size: 17 }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.PanelLeftClose, { size: 17 })
+                  }
+                ),
+                responsive && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border-base bg-surface-2 text-text-secondary transition-colors hover:border-primary/40 hover:text-text-primary md:hidden",
+                    "aria-label": "\u5173\u95ED\u4FA7\u8FB9\u680F",
+                    onClick: closeMobile,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.X, { size: 17 })
+                  }
+                )
               ]
             }
-          ) }, item.href)) }) }),
+          ),
+          searchable && !effectiveCollapsed && /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: cn("border-b px-3 py-3", styles.divider), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("label", { className: "sr-only", htmlFor: "ug-sidebar-search", children: "\u641C\u7D22\u83DC\u5355" }),
+            /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-tertiary", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "input",
+                {
+                  id: "ug-sidebar-search",
+                  value: query,
+                  onChange: (event) => setQuery(event.target.value),
+                  placeholder: searchPlaceholder,
+                  autoComplete: "off",
+                  className: "h-10 w-full rounded-lg border border-border-base bg-surface-0 px-3 pl-9 pr-9 text-sm text-text-primary outline-none transition-colors placeholder:text-text-tertiary focus:border-primary focus:ring-2 focus:ring-primary/20",
+                  type: "text",
+                  role: "searchbox"
+                }
+              ),
+              query ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "absolute right-1 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-surface-2 hover:text-text-primary",
+                  "aria-label": "\u6E05\u7A7A\u641C\u7D22",
+                  onClick: () => setQuery(""),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_lucide_react6.X, { size: 14 })
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("nav", { className: "flex-1 overflow-y-auto py-3.5", children: visibleItems.length > 0 ? renderItems(visibleItems) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("p", { className: "mx-3 rounded-lg border border-dashed border-border-base bg-surface-0 px-3 py-3 text-sm text-text-tertiary", children: "\u6CA1\u6709\u5339\u914D\u7684\u83DC\u5355" }) }),
           footer && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
             "div",
             {
-              className: (0, import_ui_utils12.cn)(
-                "border-t px-2 py-4",
+              className: cn(
+                "border-t px-2.5 py-3",
                 styles.divider,
-                collapsed && "flex justify-center"
+                effectiveCollapsed && "flex justify-center"
               ),
               children: footer
             }
@@ -905,61 +1185,62 @@ var Sidebar = (0, import_react13.forwardRef)(
         ]
       }
     );
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_jsx_runtime12.Fragment, { children: [
+      responsive && mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "fixed inset-0 z-40 bg-overlay md:hidden",
+          "aria-label": "\u5173\u95ED\u4FA7\u8FB9\u680F\u906E\u7F69",
+          onClick: closeMobile
+        }
+      ) : null,
+      sidebar
+    ] });
   }
 );
 Sidebar.displayName = "Sidebar";
 
 // src/components/pagination.tsx
-var import_react14 = require("react");
-var import_lucide_react6 = require("lucide-react");
-var import_ui_utils13 = require("@ug666/ui-utils");
+var import_react15 = require("react");
+var import_lucide_react7 = require("lucide-react");
 var import_jsx_runtime13 = require("react/jsx-runtime");
-var MAX_VISIBLE_PAGES = 5;
 function getPageNumbers(page, totalPages) {
-  if (totalPages <= MAX_VISIBLE_PAGES) {
+  if (totalPages <= 5) {
     return Array.from({ length: totalPages }, (_, i) => i + 1);
   }
-  const half = Math.floor(MAX_VISIBLE_PAGES / 2);
-  let start = Math.max(1, page - half);
-  const end = Math.min(totalPages, start + MAX_VISIBLE_PAGES - 1);
-  if (end - start < MAX_VISIBLE_PAGES - 1) {
-    start = Math.max(1, end - MAX_VISIBLE_PAGES + 1);
-  }
-  const pages = [];
-  if (start > 1) {
-    pages.push(1);
-    if (start > 2) pages.push("...");
+  if (page <= 3) {
+    return [1, 2, 3, "...", totalPages];
   }
-  for (let i = start; i <= end; i++) pages.push(i);
-  if (end < totalPages) {
-    if (end < totalPages - 1) pages.push("...");
-    pages.push(totalPages);
+  if (page >= totalPages - 2) {
+    return [1, "...", totalPages - 2, totalPages - 1, totalPages];
   }
-  return pages;
+  return [1, "...", page, "...", totalPages];
 }
-var Pagination = (0, import_react14.forwardRef)(({ page, totalPages, onPageChange, className }, ref) => {
+var Pagination = (0, import_react15.forwardRef)(({ page, totalPages, onPageChange, className }, ref) => {
   const pageNumbers = getPageNumbers(page, totalPages);
-  const btnBase = "inline-flex h-8 min-w-8 items-center justify-center rounded-md px-2 text-sm transition-colors disabled:pointer-events-none disabled:opacity-40";
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref, className: (0, import_ui_utils13.cn)("flex items-center gap-1", className), children: [
+  const btnBase = "inline-flex h-8 min-w-8 shrink-0 items-center justify-center rounded-lg px-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0 disabled:pointer-events-none disabled:opacity-40";
+  const btnGhost = "border border-border-strong bg-surface-1 text-text-primary hover:border-primary/60 hover:bg-surface-2";
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { ref, className: cn("flex max-w-full flex-wrap items-center gap-1", className), children: [
     /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
       "button",
       {
         type: "button",
-        className: (0, import_ui_utils13.cn)(btnBase, "border border-border-strong bg-surface-1 text-text-primary hover:bg-surface-3"),
+        className: cn(btnBase, btnGhost),
         disabled: page <= 1,
         onClick: () => onPageChange(page - 1),
         "aria-label": "\u4E0A\u4E00\u9875",
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.ChevronLeft, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronLeft, { size: 16 })
       }
     ),
     pageNumbers.map(
-      (p, idx) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "px-1 text-text-tertiary select-none", children: "\u2026" }, `ellipsis-${idx}`) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      (p, idx) => p === "..." ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "inline-flex h-8 min-w-6 shrink-0 items-center justify-center text-text-tertiary select-none", children: "\u2026" }, `ellipsis-${idx}`) : /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
         "button",
         {
           type: "button",
-          className: (0, import_ui_utils13.cn)(
+          className: cn(
             btnBase,
-            p === page ? "bg-primary text-primary-fg" : "border border-border-strong bg-surface-1 text-text-primary hover:bg-surface-3"
+            p === page ? "bg-primary text-primary-fg shadow-sm" : btnGhost
           ),
           onClick: () => onPageChange(p),
           "aria-current": p === page ? "page" : void 0,
@@ -972,11 +1253,11 @@ var Pagination = (0, import_react14.forwardRef)(({ page, totalPages, onPageChang
       "button",
       {
         type: "button",
-        className: (0, import_ui_utils13.cn)(btnBase, "border border-border-strong bg-surface-1 text-text-primary hover:bg-surface-3"),
+        className: cn(btnBase, btnGhost),
         disabled: page >= totalPages,
         onClick: () => onPageChange(page + 1),
         "aria-label": "\u4E0B\u4E00\u9875",
-        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react6.ChevronRight, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_lucide_react7.ChevronRight, { size: 16 })
       }
     )
   ] });
@@ -984,34 +1265,190 @@ var Pagination = (0, import_react14.forwardRef)(({ page, totalPages, onPageChang
 Pagination.displayName = "Pagination";
 
 // src/components/select.tsx
-var import_react15 = require("react");
-var import_ui_utils14 = require("@ug666/ui-utils");
+var import_react16 = require("react");
+var import_lucide_react8 = require("lucide-react");
 var import_jsx_runtime14 = require("react/jsx-runtime");
-var Select = (0, import_react15.forwardRef)(
-  ({ className, label, error, helperText, options, placeholder, id, ...props }, ref) => {
-    const generatedId = (0, import_react15.useId)();
+var Select = (0, import_react16.forwardRef)(
+  ({
+    className,
+    label,
+    error,
+    helperText,
+    options,
+    placeholder,
+    id,
+    value,
+    defaultValue,
+    onChange,
+    disabled,
+    name,
+    required,
+    ...props
+  }, ref) => {
+    const generatedId = (0, import_react16.useId)();
     const selectId = id ?? generatedId;
-    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex flex-col gap-1", children: [
+    const listboxId = `${selectId}-listbox`;
+    const rootRef = (0, import_react16.useRef)(null);
+    const hiddenSelectRef = (0, import_react16.useRef)(null);
+    const isControlled = value !== void 0;
+    const [open, setOpen] = (0, import_react16.useState)(false);
+    const [internalValue, setInternalValue] = (0, import_react16.useState)(() => String(defaultValue ?? ""));
+    const selectedValue = String(isControlled ? value : internalValue);
+    const selectedOption = (0, import_react16.useMemo)(
+      () => options.find((option) => String(option.value) === selectedValue),
+      [options, selectedValue]
+    );
+    function setSelectRef(node) {
+      hiddenSelectRef.current = node;
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        ref.current = node;
+      }
+    }
+    function handleSelect(nextValue) {
+      if (disabled) return;
+      if (!isControlled) {
+        setInternalValue(nextValue);
+      }
+      if (hiddenSelectRef.current) {
+        hiddenSelectRef.current.value = nextValue;
+        onChange?.({ target: hiddenSelectRef.current, currentTarget: hiddenSelectRef.current });
+      }
+      setOpen(false);
+    }
+    function toggleOpen() {
+      if (disabled) return;
+      setOpen((current) => !current);
+    }
+    function handleTriggerKeyDown(event) {
+      if (event.key === "Enter" || event.key === " " || event.key === "ArrowDown") {
+        event.preventDefault();
+        setOpen(true);
+        return;
+      }
+      if (event.key === "Escape") {
+        event.preventDefault();
+        setOpen(false);
+      }
+    }
+    (0, import_react16.useEffect)(() => {
+      if (!open) return;
+      function handlePointerDown(event) {
+        if (!rootRef.current?.contains(event.target)) {
+          setOpen(false);
+        }
+      }
+      function handleKeyDown(event) {
+        if (event.key === "Escape") {
+          setOpen(false);
+        }
+      }
+      document.addEventListener("pointerdown", handlePointerDown);
+      document.addEventListener("keydown", handleKeyDown);
+      return () => {
+        document.removeEventListener("pointerdown", handlePointerDown);
+        document.removeEventListener("keydown", handleKeyDown);
+      };
+    }, [open]);
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { ref: rootRef, className: "relative flex flex-col gap-1.5", children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("label", { htmlFor: selectId, className: "text-sm font-medium text-text-primary", children: label }),
       /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
         "select",
         {
-          ref,
-          id: selectId,
-          className: (0, import_ui_utils14.cn)(
-            "flex h-9 w-full rounded-md border bg-surface-1 px-3 py-1.5 text-sm text-text-primary",
-            "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
-            "disabled:cursor-not-allowed disabled:opacity-50",
-            error ? "border-red-400 focus-visible:ring-red-400" : "border-border-strong focus-visible:ring-ring/30",
-            className
-          ),
+          ref: setSelectRef,
+          id: `${selectId}-native`,
+          name,
+          value: selectedValue,
+          required,
+          disabled,
+          tabIndex: -1,
+          "aria-hidden": "true",
+          className: "sr-only",
+          onChange,
           ...props,
           children: [
-            placeholder && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "", disabled: true, children: placeholder }),
+            placeholder && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: "", children: placeholder }),
             options.map((opt) => /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("option", { value: opt.value, children: opt.label }, opt.value))
           ]
         }
       ),
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "relative", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "button",
+          {
+            type: "button",
+            id: selectId,
+            disabled,
+            "aria-haspopup": "listbox",
+            "aria-expanded": open,
+            "aria-controls": listboxId,
+            className: cn(
+              "flex h-10 w-full items-center justify-between rounded-lg border bg-surface-1 px-3 py-2 text-left text-sm leading-5 text-text-primary shadow-sm",
+              "transition-colors hover:border-primary/60",
+              "focus-visible:border-primary focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/25 focus-visible:ring-offset-1 focus-visible:ring-offset-surface-0",
+              "disabled:cursor-not-allowed disabled:bg-surface-2 disabled:text-text-tertiary disabled:opacity-70",
+              error ? "border-danger focus-visible:ring-danger/25" : "border-border-strong",
+              className
+            ),
+            onClick: toggleOpen,
+            onKeyDown: handleTriggerKeyDown,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: cn("truncate", !selectedOption && "text-text-tertiary"), children: selectedOption?.label ?? placeholder ?? "\u8BF7\u9009\u62E9" }),
+              /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                import_lucide_react8.ChevronDown,
+                {
+                  "aria-hidden": "true",
+                  className: cn("h-4 w-4 shrink-0 text-text-tertiary transition-transform", open && "rotate-180")
+                }
+              )
+            ]
+          }
+        ),
+        open && /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+          "div",
+          {
+            id: listboxId,
+            role: "listbox",
+            className: "absolute left-0 right-0 top-full z-[70] mt-1 max-h-60 overflow-auto rounded-lg border border-border-strong bg-surface-1 p-1 shadow-xl",
+            children: [
+              placeholder && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": selectedValue === "",
+                  className: cn(
+                    "flex w-full items-center rounded-md px-2.5 py-2 text-left text-sm text-text-tertiary transition-colors hover:bg-surface-2",
+                    selectedValue === "" && "bg-surface-2 text-text-primary"
+                  ),
+                  onClick: () => handleSelect(""),
+                  children: placeholder
+                }
+              ),
+              options.map((option) => {
+                const optionValue = String(option.value);
+                const selected = optionValue === selectedValue;
+                return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    role: "option",
+                    "aria-selected": selected,
+                    className: cn(
+                      "flex w-full items-center rounded-md px-2.5 py-2 text-left text-sm text-text-primary transition-colors hover:bg-surface-2",
+                      selected && "bg-primary-soft text-primary-soft-fg"
+                    ),
+                    onClick: () => handleSelect(optionValue),
+                    children: option.label
+                  },
+                  option.value
+                );
+              })
+            ]
+          }
+        )
+      ] }),
       error && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs text-danger", children: error }),
       !error && helperText && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("p", { className: "text-xs text-text-secondary", children: helperText })
     ] });
@@ -1020,10 +1457,9 @@ var Select = (0, import_react15.forwardRef)(
 Select.displayName = "Select";
 
 // src/components/spinner.tsx
-var import_react16 = require("react");
-var import_lucide_react7 = require("lucide-react");
+var import_react17 = require("react");
+var import_lucide_react9 = require("lucide-react");
 var import_class_variance_authority4 = require("class-variance-authority");
-var import_ui_utils15 = require("@ug666/ui-utils");
 var import_jsx_runtime15 = require("react/jsx-runtime");
 var spinnerVariants = (0, import_class_variance_authority4.cva)("animate-spin text-text-tertiary", {
   variants: {
@@ -1037,12 +1473,12 @@ var spinnerVariants = (0, import_class_variance_authority4.cva)("animate-spin te
     size: "md"
   }
 });
-var Spinner = (0, import_react16.forwardRef)(({ className, size, label = "\u52A0\u8F7D\u4E2D", ...props }, ref) => {
+var Spinner = (0, import_react17.forwardRef)(({ className, size, label = "\u52A0\u8F7D\u4E2D", ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
-    import_lucide_react7.Loader2,
+    import_lucide_react9.Loader2,
     {
       ref,
-      className: (0, import_ui_utils15.cn)(spinnerVariants({ size }), className),
+      className: cn(spinnerVariants({ size }), className),
       "aria-label": label,
       role: "status",
       ...props
@@ -1052,24 +1488,23 @@ var Spinner = (0, import_react16.forwardRef)(({ className, size, label = "\u52A0
 Spinner.displayName = "Spinner";
 
 // src/components/checkbox.tsx
-var import_react17 = require("react");
-var import_lucide_react8 = require("lucide-react");
+var import_react18 = require("react");
+var import_lucide_react10 = require("lucide-react");
 var import_class_variance_authority5 = require("class-variance-authority");
-var import_ui_utils16 = require("@ug666/ui-utils");
 var import_jsx_runtime16 = require("react/jsx-runtime");
 var checkboxVariants = (0, import_class_variance_authority5.cva)(
-  "peer inline-flex shrink-0 items-center justify-center rounded border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  "peer inline-flex shrink-0 items-center justify-center rounded-md border shadow-sm transition-colors peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring/35 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-0 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
   {
     variants: {
       size: {
-        sm: "h-3.5 w-3.5",
-        default: "h-4 w-4",
+        sm: "h-4 w-4",
+        default: "h-[18px] w-[18px]",
         lg: "h-5 w-5"
       },
       state: {
-        unchecked: "border-border-strong bg-surface-1 hover:border-border-strong",
-        checked: "border-primary bg-primary text-primary-fg focus-visible:ring-ring",
-        indeterminate: "border-primary bg-primary text-primary-fg focus-visible:ring-ring"
+        unchecked: "border-border-strong bg-surface-1 text-transparent hover:border-primary/70 hover:bg-surface-2",
+        checked: "border-primary bg-primary text-primary-fg",
+        indeterminate: "border-primary bg-primary text-primary-fg"
       }
     },
     defaultVariants: {
@@ -1078,7 +1513,7 @@ var checkboxVariants = (0, import_class_variance_authority5.cva)(
     }
   }
 );
-var Checkbox = (0, import_react17.forwardRef)(
+var Checkbox = (0, import_react18.forwardRef)(
   ({
     className,
     size,
@@ -1091,14 +1526,16 @@ var Checkbox = (0, import_react17.forwardRef)(
     id,
     ...props
   }, ref) => {
-    const innerRef = (0, import_react17.useRef)(null);
-    (0, import_react17.useEffect)(() => {
+    const innerRef = (0, import_react18.useRef)(null);
+    const generatedId = (0, import_react18.useId)();
+    const inputId = id ?? generatedId;
+    (0, import_react18.useEffect)(() => {
       if (innerRef.current) {
         innerRef.current.indeterminate = indeterminate;
       }
     }, [indeterminate]);
     const state = indeterminate ? "indeterminate" : checked ? "checked" : "unchecked";
-    const iconSize = size === "sm" ? 10 : size === "lg" ? 14 : 12;
+    const iconSize = size === "sm" ? 11 : size === "lg" ? 14 : 12;
     const control = /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("span", { className: "relative inline-flex", children: [
       /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
         "input",
@@ -1108,7 +1545,7 @@ var Checkbox = (0, import_react17.forwardRef)(
             if (typeof ref === "function") ref(node);
             else if (ref) ref.current = node;
           },
-          id,
+          id: inputId,
           type: "checkbox",
           className: "peer sr-only",
           checked: checked ?? false,
@@ -1121,8 +1558,8 @@ var Checkbox = (0, import_react17.forwardRef)(
         "span",
         {
           "aria-hidden": "true",
-          className: (0, import_ui_utils16.cn)(checkboxVariants({ size, state }), className),
-          children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Minus, { size: iconSize }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react8.Check, { size: iconSize }) : null
+          className: cn(checkboxVariants({ size, state }), className),
+          children: indeterminate ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.Minus, { size: iconSize }) : checked ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react10.Check, { size: iconSize }) : null
         }
       )
     ] });
@@ -1130,15 +1567,15 @@ var Checkbox = (0, import_react17.forwardRef)(
     return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
       "label",
       {
-        htmlFor: id,
-        className: (0, import_ui_utils16.cn)(
-          "inline-flex cursor-pointer items-center gap-2 text-sm text-text-primary select-none",
+        htmlFor: inputId,
+        className: cn(
+          "inline-flex min-h-5 cursor-pointer items-center gap-2.5 text-sm leading-5 text-text-primary select-none",
           disabled && "cursor-not-allowed opacity-60",
           labelClassName
         ),
         children: [
           control,
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "pt-px", children: label })
         ]
       }
     );
@@ -1147,26 +1584,25 @@ var Checkbox = (0, import_react17.forwardRef)(
 Checkbox.displayName = "Checkbox";
 
 // src/components/radio.tsx
-var import_react18 = require("react");
+var import_react19 = require("react");
 var import_class_variance_authority6 = require("class-variance-authority");
-var import_ui_utils17 = require("@ug666/ui-utils");
 var import_jsx_runtime17 = require("react/jsx-runtime");
-var RadioGroupContext = (0, import_react18.createContext)(null);
+var RadioGroupContext = (0, import_react19.createContext)(null);
 function useRadioGroupContext() {
-  return (0, import_react18.useContext)(RadioGroupContext);
+  return (0, import_react19.useContext)(RadioGroupContext);
 }
 var radioVariants = (0, import_class_variance_authority6.cva)(
-  "relative inline-flex shrink-0 items-center justify-center rounded-full border transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+  "relative inline-flex shrink-0 items-center justify-center rounded-full border shadow-sm transition-colors peer-focus-visible:outline-none peer-focus-visible:ring-2 peer-focus-visible:ring-ring/35 peer-focus-visible:ring-offset-2 peer-focus-visible:ring-offset-surface-0 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
   {
     variants: {
       size: {
-        sm: "h-3.5 w-3.5",
-        default: "h-4 w-4",
+        sm: "h-4 w-4",
+        default: "h-[18px] w-[18px]",
         lg: "h-5 w-5"
       },
       checked: {
-        true: "border-primary bg-primary focus-visible:ring-ring",
-        false: "border-border-strong bg-surface-1 hover:border-border-strong"
+        true: "border-primary bg-surface-1",
+        false: "border-border-strong bg-surface-1 hover:border-primary/70 hover:bg-surface-2"
       }
     },
     defaultVariants: {
@@ -1175,7 +1611,7 @@ var radioVariants = (0, import_class_variance_authority6.cva)(
     }
   }
 );
-var Radio = (0, import_react18.forwardRef)(
+var Radio = (0, import_react19.forwardRef)(
   ({
     className,
     size,
@@ -1189,7 +1625,7 @@ var Radio = (0, import_react18.forwardRef)(
     ...props
   }, ref) => {
     const group = useRadioGroupContext();
-    const generatedId = (0, import_react18.useId)();
+    const generatedId = (0, import_react19.useId)();
     const inputId = id ?? generatedId;
     const isChecked = group ? group.value === value : checkedProp ?? false;
     const isDisabled = group ? group.disabled || (disabledProp ?? false) : disabledProp ?? false;
@@ -1222,8 +1658,8 @@ var Radio = (0, import_react18.forwardRef)(
         "span",
         {
           "aria-hidden": "true",
-          className: (0, import_ui_utils17.cn)(radioVariants({ size, checked: isChecked }), className),
-          children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: (0, import_ui_utils17.cn)("rounded-full bg-white", dotSize) })
+          className: cn(radioVariants({ size, checked: isChecked }), className),
+          children: isChecked && /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: cn("rounded-full bg-primary", dotSize) })
         }
       )
     ] });
@@ -1232,20 +1668,20 @@ var Radio = (0, import_react18.forwardRef)(
       "label",
       {
         htmlFor: inputId,
-        className: (0, import_ui_utils17.cn)(
-          "inline-flex cursor-pointer items-center gap-2 text-sm text-text-primary select-none",
+        className: cn(
+          "inline-flex min-h-5 cursor-pointer items-center gap-2.5 text-sm leading-5 text-text-primary select-none",
           isDisabled && "cursor-not-allowed opacity-60"
         ),
         children: [
           control,
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { children: label })
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "pt-px", children: label })
         ]
       }
     );
   }
 );
 Radio.displayName = "Radio";
-var RadioGroup = (0, import_react18.forwardRef)(
+var RadioGroup = (0, import_react19.forwardRef)(
   ({
     className,
     value: valueProp,
@@ -1257,7 +1693,7 @@ var RadioGroup = (0, import_react18.forwardRef)(
     children,
     ...props
   }, ref) => {
-    const [uncontrolledValue, setUncontrolledValue] = (0, import_react18.useState)(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = (0, import_react19.useState)(defaultValue);
     const isControlled = valueProp !== void 0;
     const currentValue = isControlled ? valueProp : uncontrolledValue;
     function handleValueChange(newValue) {
@@ -1280,9 +1716,9 @@ var RadioGroup = (0, import_react18.forwardRef)(
           {
             ref,
             role: "radiogroup",
-            className: (0, import_ui_utils17.cn)(
+            className: cn(
               "flex",
-              orientation === "vertical" ? "flex-col gap-2" : "flex-row flex-wrap gap-4",
+              orientation === "vertical" ? "flex-col gap-2.5" : "flex-row flex-wrap gap-x-5 gap-y-2.5",
               className
             ),
             ...props,
@@ -1296,10 +1732,9 @@ var RadioGroup = (0, import_react18.forwardRef)(
 RadioGroup.displayName = "RadioGroup";
 
 // src/components/slider.tsx
-var import_react19 = require("react");
-var import_ui_utils18 = require("@ug666/ui-utils");
+var import_react20 = require("react");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var Slider = (0, import_react19.forwardRef)(
+var Slider = (0, import_react20.forwardRef)(
   ({
     className,
     value: valueProp,
@@ -1313,20 +1748,29 @@ var Slider = (0, import_react19.forwardRef)(
     ...props
   }, ref) => {
     const isControlled = valueProp !== void 0;
-    const [uncontrolledValue, setUncontrolledValue] = (0, import_react19.useState)(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = (0, import_react20.useState)(defaultValue);
     const currentValue = isControlled ? valueProp : uncontrolledValue;
     const fillPercent = max === min ? 0 : (currentValue - min) / (max - min) * 100;
+    function updateValue(nextValue) {
+      if (!isControlled) {
+        setUncontrolledValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    }
+    function handleInput(e) {
+      updateValue(Number(e.currentTarget.value));
+    }
     function handleChange(e) {
       const newValue = Number(e.target.value);
-      if (!isControlled) {
-        setUncontrolledValue(newValue);
+      if (newValue === currentValue) {
+        return;
       }
-      onValueChange?.(newValue);
+      updateValue(newValue);
     }
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: (0, import_ui_utils18.cn)("flex flex-col gap-1", className), children: [
-      showValue && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "self-start text-xs font-medium text-text-primary", children: currentValue }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative flex h-5 w-full items-center", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pointer-events-none absolute h-1.5 w-full overflow-hidden rounded-full bg-surface-3", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: cn("flex flex-col gap-1.5", className), children: [
+      showValue && /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "self-start text-xs font-semibold leading-none text-text-primary", children: currentValue }),
+      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "relative flex h-6 w-full items-center", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className: "pointer-events-none absolute h-2 w-full overflow-hidden rounded-full bg-surface-3", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "div",
           {
             className: "h-full rounded-full bg-primary transition-all",
@@ -1343,17 +1787,18 @@ var Slider = (0, import_react19.forwardRef)(
             step,
             value: currentValue,
             disabled,
+            onInput: handleInput,
             onChange: handleChange,
-            className: (0, import_ui_utils18.cn)(
-              "relative h-5 w-full cursor-pointer appearance-none bg-transparent",
+            className: cn(
+              "relative h-6 w-full cursor-pointer appearance-none bg-transparent",
               // thumb 样式
-              "[&::-webkit-slider-thumb]:h-4 [&::-webkit-slider-thumb]:w-4 [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-border-strong [&::-webkit-slider-thumb]:bg-surface-1 [&::-webkit-slider-thumb]:shadow-sm [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110",
-              "[&::-moz-range-thumb]:h-4 [&::-moz-range-thumb]:w-4 [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-border-strong [&::-moz-range-thumb]:bg-surface-1 [&::-moz-range-thumb]:shadow-sm",
+              "[&::-webkit-slider-thumb]:h-[18px] [&::-webkit-slider-thumb]:w-[18px] [&::-webkit-slider-thumb]:appearance-none [&::-webkit-slider-thumb]:rounded-full [&::-webkit-slider-thumb]:border-2 [&::-webkit-slider-thumb]:border-primary [&::-webkit-slider-thumb]:bg-surface-1 [&::-webkit-slider-thumb]:shadow-md [&::-webkit-slider-thumb]:transition-transform [&::-webkit-slider-thumb]:hover:scale-110",
+              "[&::-moz-range-thumb]:h-[18px] [&::-moz-range-thumb]:w-[18px] [&::-moz-range-thumb]:appearance-none [&::-moz-range-thumb]:rounded-full [&::-moz-range-thumb]:border-2 [&::-moz-range-thumb]:border-primary [&::-moz-range-thumb]:bg-surface-1 [&::-moz-range-thumb]:shadow-md",
               // track 透明（用自定义 div 代替）
               "[&::-webkit-slider-runnable-track]:bg-transparent",
               "[&::-moz-range-track]:bg-transparent",
               // focus
-              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0",
               // disabled
               "disabled:cursor-not-allowed disabled:opacity-50"
             ),
@@ -1367,13 +1812,12 @@ var Slider = (0, import_react19.forwardRef)(
 Slider.displayName = "Slider";
 
 // src/components/number-input.tsx
-var import_react20 = require("react");
-var import_lucide_react9 = require("lucide-react");
+var import_react21 = require("react");
+var import_lucide_react11 = require("lucide-react");
 var import_class_variance_authority7 = require("class-variance-authority");
-var import_ui_utils19 = require("@ug666/ui-utils");
 var import_jsx_runtime19 = require("react/jsx-runtime");
 var numberInputVariants = (0, import_class_variance_authority7.cva)(
-  "inline-flex items-center rounded-md border border-border-strong bg-surface-1 transition-colors focus-within:ring-2 focus-within:ring-ring focus-within:ring-offset-1 has-[:disabled]:pointer-events-none has-[:disabled]:opacity-50",
+  "inline-flex items-center overflow-hidden rounded-lg border border-border-strong bg-surface-1 shadow-sm transition-colors focus-within:border-primary focus-within:ring-2 focus-within:ring-ring/25 has-[:disabled]:pointer-events-none has-[:disabled]:opacity-60",
   {
     variants: {
       size: {
@@ -1387,7 +1831,7 @@ var numberInputVariants = (0, import_class_variance_authority7.cva)(
     }
   }
 );
-var NumberInput = (0, import_react20.forwardRef)(
+var NumberInput = (0, import_react21.forwardRef)(
   ({
     className,
     size,
@@ -1403,7 +1847,7 @@ var NumberInput = (0, import_react20.forwardRef)(
     ...props
   }, ref) => {
     const isControlled = valueProp !== void 0;
-    const [uncontrolledValue, setUncontrolledValue] = (0, import_react20.useState)(defaultValue);
+    const [uncontrolledValue, setUncontrolledValue] = (0, import_react21.useState)(defaultValue);
     const currentValue = isControlled ? valueProp : uncontrolledValue;
     function clamp(val) {
       let result = val;
@@ -1445,10 +1889,10 @@ var NumberInput = (0, import_react20.forwardRef)(
     }
     const atMin = min !== void 0 && currentValue <= min;
     const atMax = max !== void 0 && currentValue >= max;
-    const btnBase = "inline-flex shrink-0 items-center justify-center text-text-secondary transition-colors hover:bg-surface-3 hover:text-text-primary disabled:pointer-events-none disabled:opacity-40";
-    const btnSizeCls = size === "sm" ? "h-8 w-7" : size === "lg" ? "h-11 w-9" : "h-9 w-8";
+    const btnBase = "inline-flex shrink-0 items-center justify-center bg-surface-2 text-text-secondary transition-colors hover:bg-surface-3 hover:text-text-primary disabled:pointer-events-none disabled:opacity-40";
+    const btnSizeCls = size === "sm" ? "h-8 w-7" : size === "lg" ? "h-11 w-10" : "h-9 w-9";
     const iconSize = size === "sm" ? 12 : size === "lg" ? 16 : 14;
-    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: (0, import_ui_utils19.cn)(numberInputVariants({ size }), className), children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: cn(numberInputVariants({ size }), className), children: [
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
         "button",
         {
@@ -1456,9 +1900,9 @@ var NumberInput = (0, import_react20.forwardRef)(
           "aria-label": "\u51CF\u5C11\u6570\u503C",
           disabled: disabled || atMin,
           onClick: handleDecrement,
-          className: (0, import_ui_utils19.cn)(btnBase, btnSizeCls, "rounded-l-md border-r border-border-base"),
+          className: cn(btnBase, btnSizeCls, "border-r border-border-base"),
           tabIndex: -1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Minus, { size: iconSize })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.Minus, { size: iconSize })
         }
       ),
       /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
@@ -1466,8 +1910,8 @@ var NumberInput = (0, import_react20.forwardRef)(
         {
           ref,
           type: "number",
-          className: (0, import_ui_utils19.cn)(
-            "min-w-0 flex-1 bg-transparent text-center text-text-primary outline-none",
+          className: cn(
+            "min-w-0 flex-1 bg-transparent px-2 text-center font-medium text-text-primary outline-none",
             "placeholder:text-text-tertiary",
             // 隐藏原生 spinner
             "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
@@ -1490,9 +1934,9 @@ var NumberInput = (0, import_react20.forwardRef)(
           "aria-label": "\u589E\u52A0\u6570\u503C",
           disabled: disabled || atMax,
           onClick: handleIncrement,
-          className: (0, import_ui_utils19.cn)(btnBase, btnSizeCls, "rounded-r-md border-l border-border-base"),
+          className: cn(btnBase, btnSizeCls, "border-l border-border-base"),
           tabIndex: -1,
-          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react9.Plus, { size: iconSize })
+          children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react11.Plus, { size: iconSize })
         }
       )
     ] });
@@ -1501,10 +1945,9 @@ var NumberInput = (0, import_react20.forwardRef)(
 NumberInput.displayName = "NumberInput";
 
 // src/components/otp-input.tsx
-var import_react21 = require("react");
-var import_ui_utils20 = require("@ug666/ui-utils");
+var import_react22 = require("react");
 var import_jsx_runtime20 = require("react/jsx-runtime");
-var OTPInput = (0, import_react21.forwardRef)(
+var OTPInput = (0, import_react22.forwardRef)(
   ({
     value,
     onValueChange,
@@ -1513,15 +1956,15 @@ var OTPInput = (0, import_react21.forwardRef)(
     onComplete,
     className
   }, ref) => {
-    const inputRefs = (0, import_react21.useRef)([]);
-    const focusAt = (0, import_react21.useCallback)((index) => {
+    const inputRefs = (0, import_react22.useRef)([]);
+    const focusAt = (0, import_react22.useCallback)((index) => {
       const el = inputRefs.current[index];
       if (el) {
         el.focus();
         el.setSelectionRange(el.value.length, el.value.length);
       }
     }, []);
-    const updateValueAt = (0, import_react21.useCallback)(
+    const updateValueAt = (0, import_react22.useCallback)(
       (index, char) => {
         const chars = value.padEnd(length, "").split("").slice(0, length);
         chars[index] = char;
@@ -1533,7 +1976,7 @@ var OTPInput = (0, import_react21.forwardRef)(
       },
       [value, length, onValueChange, onComplete]
     );
-    const handleChange = (0, import_react21.useCallback)(
+    const handleChange = (0, import_react22.useCallback)(
       (index, e) => {
         const raw = e.target.value;
         const digit = raw.replace(/\D/g, "").slice(-1);
@@ -1544,7 +1987,7 @@ var OTPInput = (0, import_react21.forwardRef)(
       },
       [length, updateValueAt, focusAt]
     );
-    const handleKeyDown = (0, import_react21.useCallback)(
+    const handleKeyDown = (0, import_react22.useCallback)(
       (index, e) => {
         if (e.key === "ArrowLeft") {
           e.preventDefault();
@@ -1565,7 +2008,7 @@ var OTPInput = (0, import_react21.forwardRef)(
       },
       [value, length, focusAt, updateValueAt]
     );
-    const handlePaste = (0, import_react21.useCallback)(
+    const handlePaste = (0, import_react22.useCallback)(
       (e) => {
         e.preventDefault();
         const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
@@ -1585,7 +2028,7 @@ var OTPInput = (0, import_react21.forwardRef)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils20.cn)("flex items-center gap-2", className),
+        className: cn("flex items-center gap-2", className),
         role: "group",
         "aria-label": "\u9A8C\u8BC1\u7801\u8F93\u5165",
         children: Array.from({ length }, (_, i) => {
@@ -1604,7 +2047,7 @@ var OTPInput = (0, import_react21.forwardRef)(
               value: char,
               disabled,
               "aria-label": `\u9A8C\u8BC1\u7801\u7B2C ${i + 1} \u4F4D`,
-              className: (0, import_ui_utils20.cn)(
+              className: cn(
                 "h-10 w-10 rounded-md border text-center text-sm font-medium text-text-primary transition-colors",
                 "outline-none focus:border-primary focus:ring-2 focus:ring-ring/20",
                 "disabled:cursor-not-allowed disabled:opacity-50",
@@ -1625,18 +2068,17 @@ var OTPInput = (0, import_react21.forwardRef)(
 OTPInput.displayName = "OTPInput";
 
 // src/components/form.tsx
-var import_react22 = require("react");
-var import_ui_utils21 = require("@ug666/ui-utils");
+var import_react23 = require("react");
 var import_jsx_runtime21 = require("react/jsx-runtime");
-var FormFieldContext = (0, import_react22.createContext)(null);
+var FormFieldContext = (0, import_react23.createContext)(null);
 function useFormFieldContext() {
-  const ctx = (0, import_react22.useContext)(FormFieldContext);
+  const ctx = (0, import_react23.useContext)(FormFieldContext);
   if (!ctx) {
     throw new Error("FormField \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <FormField> \u5185\u4F7F\u7528");
   }
   return ctx;
 }
-var Form = (0, import_react22.forwardRef)(
+var Form = (0, import_react23.forwardRef)(
   ({ className, onSubmit, children, ...props }, ref) => {
     function handleSubmit(event) {
       event.preventDefault();
@@ -1646,7 +2088,7 @@ var Form = (0, import_react22.forwardRef)(
       "form",
       {
         ref,
-        className: (0, import_ui_utils21.cn)(className),
+        className: cn(className),
         onSubmit: handleSubmit,
         ...props,
         children
@@ -1655,20 +2097,20 @@ var Form = (0, import_react22.forwardRef)(
   }
 );
 Form.displayName = "Form";
-var FormField = (0, import_react22.forwardRef)(
+var FormField = (0, import_react23.forwardRef)(
   ({ name, error, className, children, ...props }, ref) => {
-    const generatedId = (0, import_react22.useId)();
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FormFieldContext.Provider, { value: { name, error, id: generatedId }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: (0, import_ui_utils21.cn)(className), ...props, children }) });
+    const generatedId = (0, import_react23.useId)();
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(FormFieldContext.Provider, { value: { name, error, id: generatedId }, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { ref, className: cn(className), ...props, children }) });
   }
 );
 FormField.displayName = "FormField";
-var FormItem = (0, import_react22.forwardRef)(
+var FormItem = (0, import_react23.forwardRef)(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils21.cn)("flex flex-col gap-1.5", className),
+        className: cn("flex flex-col gap-1.5", className),
         ...props,
         children
       }
@@ -1676,7 +2118,7 @@ var FormItem = (0, import_react22.forwardRef)(
   }
 );
 FormItem.displayName = "FormItem";
-var FormLabel = (0, import_react22.forwardRef)(
+var FormLabel = (0, import_react23.forwardRef)(
   ({ className, required, children, htmlFor, ...props }, ref) => {
     const ctx = useFormFieldContext();
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -1685,7 +2127,7 @@ var FormLabel = (0, import_react22.forwardRef)(
         ref,
         htmlFor: htmlFor ?? ctx.id,
         required,
-        className: (0, import_ui_utils21.cn)(className),
+        className: cn(className),
         ...props,
         children
       }
@@ -1697,14 +2139,14 @@ function FormControl({ children }) {
   const ctx = useFormFieldContext();
   const descriptionId = `${ctx.id}-description`;
   const messageId = `${ctx.id}-message`;
-  return (0, import_react22.cloneElement)(children, {
+  return (0, import_react23.cloneElement)(children, {
     id: ctx.id,
     "aria-describedby": ctx.error ? `${descriptionId} ${messageId}` : descriptionId,
     "aria-invalid": ctx.error ? true : void 0
   });
 }
 FormControl.displayName = "FormControl";
-var FormDescription = (0, import_react22.forwardRef)(
+var FormDescription = (0, import_react23.forwardRef)(
   ({ className, children, ...props }, ref) => {
     const ctx = useFormFieldContext();
     return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
@@ -1712,7 +2154,7 @@ var FormDescription = (0, import_react22.forwardRef)(
       {
         ref,
         id: `${ctx.id}-description`,
-        className: (0, import_ui_utils21.cn)("text-xs text-text-secondary", className),
+        className: cn("text-xs text-text-secondary", className),
         ...props,
         children
       }
@@ -1720,7 +2162,7 @@ var FormDescription = (0, import_react22.forwardRef)(
   }
 );
 FormDescription.displayName = "FormDescription";
-var FormMessage = (0, import_react22.forwardRef)(
+var FormMessage = (0, import_react23.forwardRef)(
   ({ className, children, ...props }, ref) => {
     const ctx = useFormFieldContext();
     const message = ctx.error ?? (typeof children === "string" ? children : void 0);
@@ -1730,7 +2172,7 @@ var FormMessage = (0, import_react22.forwardRef)(
       {
         ref,
         id: `${ctx.id}-message`,
-        className: (0, import_ui_utils21.cn)("text-xs text-danger-soft-fg", className),
+        className: cn("text-xs text-danger-soft-fg", className),
         role: "alert",
         ...props,
         children: message
@@ -1741,31 +2183,30 @@ var FormMessage = (0, import_react22.forwardRef)(
 FormMessage.displayName = "FormMessage";
 
 // src/components/tabs.tsx
-var import_react23 = require("react");
-var import_ui_utils22 = require("@ug666/ui-utils");
+var import_react24 = require("react");
 var import_jsx_runtime22 = require("react/jsx-runtime");
-var TabsContext = (0, import_react23.createContext)(null);
+var TabsContext = (0, import_react24.createContext)(null);
 function useTabsContext() {
-  const ctx = (0, import_react23.useContext)(TabsContext);
+  const ctx = (0, import_react24.useContext)(TabsContext);
   if (!ctx) throw new Error("Tabs \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Tabs> \u5185\u4F7F\u7528");
   return ctx;
 }
-var Tabs = (0, import_react23.forwardRef)(({ value, onValueChange, children, className }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: (0, import_ui_utils22.cn)("w-full", className), children }) });
+var Tabs = (0, import_react24.forwardRef)(({ value, onValueChange, children, className }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(TabsContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ref, className: cn("w-full", className), children }) });
 });
-var TabsList = (0, import_react23.forwardRef)(({ className, children, ...props }, ref) => {
+var TabsList = (0, import_react24.forwardRef)(({ className, children, ...props }, ref) => {
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
     "div",
     {
       ref,
       role: "tablist",
-      className: (0, import_ui_utils22.cn)("inline-flex w-full items-center gap-0 border-b border-border-base", className),
+      className: cn("inline-flex w-full items-center gap-0 border-b border-border-base", className),
       ...props,
       children
     }
   );
 });
-var TabsTrigger = (0, import_react23.forwardRef)(({ value, className, children, ...props }, ref) => {
+var TabsTrigger = (0, import_react24.forwardRef)(({ value, className, children, ...props }, ref) => {
   const { value: activeValue, onValueChange } = useTabsContext();
   const isActive = activeValue === value;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -1777,7 +2218,7 @@ var TabsTrigger = (0, import_react23.forwardRef)(({ value, className, children,
       "aria-selected": isActive,
       tabIndex: isActive ? 0 : -1,
       onClick: () => onValueChange(value),
-      className: (0, import_ui_utils22.cn)(
+      className: cn(
         "relative px-4 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-1",
         "after:absolute after:bottom-0 after:left-0 after:h-0.5 after:w-full after:transition-colors",
         isActive ? "text-text-primary after:bg-primary" : "text-text-secondary hover:text-text-primary after:bg-transparent",
@@ -1788,7 +2229,7 @@ var TabsTrigger = (0, import_react23.forwardRef)(({ value, className, children,
     }
   );
 });
-var TabsContent = (0, import_react23.forwardRef)(({ value, className, children, ...props }, ref) => {
+var TabsContent = (0, import_react24.forwardRef)(({ value, className, children, ...props }, ref) => {
   const { value: activeValue } = useTabsContext();
   if (activeValue !== value) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
@@ -1797,7 +2238,7 @@ var TabsContent = (0, import_react23.forwardRef)(({ value, className, children,
       ref,
       role: "tabpanel",
       tabIndex: 0,
-      className: (0, import_ui_utils22.cn)("mt-4 focus-visible:outline-none", className),
+      className: cn("mt-4 focus-visible:outline-none", className),
       ...props,
       children
     }
@@ -1809,30 +2250,29 @@ TabsTrigger.displayName = "TabsTrigger";
 TabsContent.displayName = "TabsContent";
 
 // src/components/accordion.tsx
-var import_react24 = require("react");
-var import_lucide_react10 = require("lucide-react");
-var import_ui_utils23 = require("@ug666/ui-utils");
+var import_react25 = require("react");
+var import_lucide_react12 = require("lucide-react");
 var import_jsx_runtime23 = require("react/jsx-runtime");
-var AccordionContext = (0, import_react24.createContext)(null);
-var AccordionItemContext = (0, import_react24.createContext)(null);
+var AccordionContext = (0, import_react25.createContext)(null);
+var AccordionItemContext = (0, import_react25.createContext)(null);
 function useAccordionContext() {
-  const ctx = (0, import_react24.useContext)(AccordionContext);
+  const ctx = (0, import_react25.useContext)(AccordionContext);
   if (!ctx) throw new Error("Accordion \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Accordion> \u5185\u4F7F\u7528");
   return ctx;
 }
 function useAccordionItemContext() {
-  const ctx = (0, import_react24.useContext)(AccordionItemContext);
+  const ctx = (0, import_react25.useContext)(AccordionItemContext);
   if (!ctx) throw new Error("AccordionTrigger/AccordionContent \u5FC5\u987B\u5728 <AccordionItem> \u5185\u4F7F\u7528");
   return ctx;
 }
-var Accordion = (0, import_react24.forwardRef)(
+var Accordion = (0, import_react25.forwardRef)(
   (props, ref) => {
     const { type, children, className, ...rest } = props;
     const isSingle = type === "single";
     const singleProps = isSingle ? props : null;
     const multiProps = !isSingle ? props : null;
-    const [internalSingle, setInternalSingle] = (0, import_react24.useState)(singleProps?.defaultValue ?? "");
-    const [internalMulti, setInternalMulti] = (0, import_react24.useState)(multiProps?.defaultValue ?? []);
+    const [internalSingle, setInternalSingle] = (0, import_react25.useState)(singleProps?.defaultValue ?? "");
+    const [internalMulti, setInternalMulti] = (0, import_react25.useState)(multiProps?.defaultValue ?? []);
     const isControlledSingle = isSingle && singleProps?.value !== void 0;
     const isControlledMulti = !isSingle && multiProps?.value !== void 0;
     const value = isSingle ? isControlledSingle ? singleProps.value ?? "" : internalSingle : isControlledMulti ? multiProps.value ?? [] : internalMulti;
@@ -1854,17 +2294,17 @@ var Accordion = (0, import_react24.forwardRef)(
     void _dv;
     void _ov;
     void _col;
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AccordionContext.Provider, { value: { type, value, onValueChange: handleValueChange, collapsible }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: (0, import_ui_utils23.cn)("w-full divide-y divide-border-base rounded-md border border-border-base", className), ...domRest, children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AccordionContext.Provider, { value: { type, value, onValueChange: handleValueChange, collapsible }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: cn("w-full divide-y divide-border-base rounded-md border border-border-base", className), ...domRest, children }) });
   }
 );
 Accordion.displayName = "Accordion";
-var AccordionItem = (0, import_react24.forwardRef)(({ value, className, children, ...props }, ref) => {
+var AccordionItem = (0, import_react25.forwardRef)(({ value, className, children, ...props }, ref) => {
   const { value: activeValue, type } = useAccordionContext();
   const isOpen = type === "single" ? activeValue === value : activeValue.includes(value);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AccordionItemContext.Provider, { value: { value, isOpen }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: (0, import_ui_utils23.cn)("", className), ...props, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(AccordionItemContext.Provider, { value: { value, isOpen }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { ref, className: cn("", className), ...props, children }) });
 });
 AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = (0, import_react24.forwardRef)(({ className, children, ...props }, ref) => {
+var AccordionTrigger = (0, import_react25.forwardRef)(({ className, children, ...props }, ref) => {
   const { onValueChange } = useAccordionContext();
   const { value, isOpen } = useAccordionItemContext();
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
@@ -1874,7 +2314,7 @@ var AccordionTrigger = (0, import_react24.forwardRef)(({ className, children, ..
       type: "button",
       "aria-expanded": isOpen,
       onClick: () => onValueChange(value),
-      className: (0, import_ui_utils23.cn)(
+      className: cn(
         "flex w-full items-center justify-between px-4 py-3 text-left text-sm font-medium text-text-primary transition-colors hover:bg-surface-2 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-inset",
         className
       ),
@@ -1882,10 +2322,10 @@ var AccordionTrigger = (0, import_react24.forwardRef)(({ className, children, ..
       children: [
         children,
         /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
-          import_lucide_react10.ChevronDown,
+          import_lucide_react12.ChevronDown,
           {
             size: 16,
-            className: (0, import_ui_utils23.cn)("shrink-0 text-text-secondary transition-transform duration-200", isOpen && "rotate-180")
+            className: cn("shrink-0 text-text-secondary transition-transform duration-200", isOpen && "rotate-180")
           }
         )
       ]
@@ -1893,14 +2333,14 @@ var AccordionTrigger = (0, import_react24.forwardRef)(({ className, children, ..
   );
 });
 AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = (0, import_react24.forwardRef)(({ className, children, ...props }, ref) => {
+var AccordionContent = (0, import_react25.forwardRef)(({ className, children, ...props }, ref) => {
   const { isOpen } = useAccordionItemContext();
   if (!isOpen) return null;
   return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     "div",
     {
       ref,
-      className: (0, import_ui_utils23.cn)("px-4 pb-4 pt-1 text-sm text-text-secondary", className),
+      className: cn("px-4 pb-4 pt-1 text-sm text-text-secondary", className),
       ...props,
       children
     }
@@ -1909,19 +2349,18 @@ var AccordionContent = (0, import_react24.forwardRef)(({ className, children, ..
 AccordionContent.displayName = "AccordionContent";
 
 // src/components/steps.tsx
-var import_react25 = require("react");
-var import_lucide_react11 = require("lucide-react");
-var import_ui_utils24 = require("@ug666/ui-utils");
+var import_react26 = require("react");
+var import_lucide_react13 = require("lucide-react");
 var import_jsx_runtime24 = require("react/jsx-runtime");
-var Steps = (0, import_react25.forwardRef)(
+var Steps = (0, import_react26.forwardRef)(
   ({ current, items, direction = "horizontal", status = "process", className, ...props }, ref) => {
     const isHorizontal = direction === "horizontal";
     return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils24.cn)(
-          isHorizontal ? "flex items-start" : "flex flex-col",
+        className: cn(
+          isHorizontal ? "flex items-start" : "flex flex-col gap-1",
           className
         ),
         ...props,
@@ -1933,51 +2372,51 @@ var Steps = (0, import_react25.forwardRef)(
           return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
             "div",
             {
-              className: (0, import_ui_utils24.cn)(
+              className: cn(
                 isHorizontal ? "flex flex-1 items-start" : "flex items-start"
               ),
               children: [
-                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: (0, import_ui_utils24.cn)("flex", isHorizontal ? "flex-col items-center" : "items-start"), children: [
+                /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex", isHorizontal ? "flex-col items-center" : "items-start"), children: [
                   /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     "div",
                     {
-                      className: (0, import_ui_utils24.cn)(
-                        "flex h-8 w-8 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold transition-colors",
-                        isFinished && "border-primary bg-primary text-primary-fg",
-                        isCurrent && !isError && "border-primary bg-surface-1 text-text-primary",
-                        isError && "border-red-500 bg-surface-1 text-red-500",
+                      className: cn(
+                        "flex h-9 w-9 shrink-0 items-center justify-center rounded-full border-2 text-sm font-semibold shadow-sm transition-colors",
+                        isFinished && "border-primary bg-primary text-primary-fg shadow-primary/20",
+                        isCurrent && !isError && "border-primary bg-primary-soft text-primary-soft-fg shadow-primary/10",
+                        isError && "border-danger bg-danger-soft text-danger-soft-fg shadow-danger/10",
                         !isFinished && !isCurrent && !isError && "border-border-strong bg-surface-1 text-text-tertiary"
                       ),
-                      children: isFinished ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react11.Check, { size: 16, strokeWidth: 2.5 }) : item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: index + 1 })
+                      children: isFinished ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(import_lucide_react13.Check, { size: 16, strokeWidth: 2.5 }) : item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: index + 1 })
                     }
                   ),
                   !isLast && !isHorizontal && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                     "div",
                     {
-                      className: (0, import_ui_utils24.cn)(
-                        "ml-[15px] mt-1 w-0.5 flex-1 self-stretch",
-                        isFinished ? "bg-primary" : "bg-border-base"
+                      className: cn(
+                        "ml-[17px] mt-1 w-0.5 flex-1 self-stretch rounded-full",
+                        isFinished ? "bg-primary" : "bg-border-strong"
                       ),
-                      style: { minHeight: "24px" }
+                      style: { minHeight: "26px" }
                     }
                   )
                 ] }),
                 /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
                   "div",
                   {
-                    className: (0, import_ui_utils24.cn)(
-                      isHorizontal ? "mt-2 text-center" : "ml-3 pb-6",
+                    className: cn(
+                      isHorizontal ? "mt-2 text-center" : "ml-3.5 pb-5",
                       isLast && !isHorizontal && "pb-0"
                     ),
                     children: [
                       /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         "p",
                         {
-                          className: (0, import_ui_utils24.cn)(
-                            "text-sm font-medium",
+                          className: cn(
+                            "text-sm font-semibold leading-5",
                             isFinished && "text-text-primary",
-                            isCurrent && !isError && "text-text-primary",
-                            isError && "text-red-500",
+                            isCurrent && !isError && "text-primary",
+                            isError && "text-danger",
                             !isFinished && !isCurrent && !isError && "text-text-tertiary"
                           ),
                           children: item.title
@@ -1986,9 +2425,9 @@ var Steps = (0, import_react25.forwardRef)(
                       item.description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                         "p",
                         {
-                          className: (0, import_ui_utils24.cn)(
-                            "mt-0.5 text-xs",
-                            isError ? "text-red-400" : "text-text-secondary"
+                          className: cn(
+                            "mt-0.5 text-xs leading-5",
+                            isError ? "text-danger" : "text-text-secondary"
                           ),
                           children: item.description
                         }
@@ -1999,7 +2438,7 @@ var Steps = (0, import_react25.forwardRef)(
                 !isLast && isHorizontal && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
                   "div",
                   {
-                    className: (0, import_ui_utils24.cn)(
+                    className: cn(
                       "mx-2 mt-4 h-0.5 flex-1",
                       isFinished ? "bg-primary" : "bg-border-base"
                     )
@@ -2017,11 +2456,10 @@ var Steps = (0, import_react25.forwardRef)(
 Steps.displayName = "Steps";
 
 // src/components/dropdown.tsx
-var import_react26 = require("react");
+var import_react27 = require("react");
 var import_react_dom5 = require("react-dom");
-var import_ui_utils25 = require("@ug666/ui-utils");
 var import_jsx_runtime25 = require("react/jsx-runtime");
-var DropdownContext = (0, import_react26.createContext)(null);
+var DropdownContext = (0, import_react27.createContext)(null);
 function assignRef(ref, value) {
   if (typeof ref === "function") {
     ref(value);
@@ -2032,18 +2470,18 @@ function assignRef(ref, value) {
   }
 }
 function useDropdownContext() {
-  const ctx = (0, import_react26.useContext)(DropdownContext);
+  const ctx = (0, import_react27.useContext)(DropdownContext);
   if (!ctx) throw new Error("Dropdown \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <DropdownMenu> \u5185\u4F7F\u7528");
   return ctx;
 }
-var DropdownMenu = (0, import_react26.forwardRef)(({ children, className }, ref) => {
-  const [open, setOpen] = (0, import_react26.useState)(false);
-  const triggerRef = (0, import_react26.useRef)(null);
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownContext.Provider, { value: { open, setOpen, triggerRef }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: (0, import_ui_utils25.cn)("relative inline-block", className), children }) });
+var DropdownMenu = (0, import_react27.forwardRef)(({ children, className }, ref) => {
+  const [open, setOpen] = (0, import_react27.useState)(false);
+  const triggerRef = (0, import_react27.useRef)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownContext.Provider, { value: { open, setOpen, triggerRef }, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn("relative inline-block", className), children }) });
 });
-var DropdownTrigger = (0, import_react26.forwardRef)(({ children, className }, ref) => {
+var DropdownTrigger = (0, import_react27.forwardRef)(({ children, className }, ref) => {
   const { setOpen, open, triggerRef } = useDropdownContext();
-  const handleRef = (0, import_react26.useCallback)(
+  const handleRef = (0, import_react27.useCallback)(
     (node) => {
       triggerRef.current = node;
       assignRef(ref, node);
@@ -2054,35 +2492,36 @@ var DropdownTrigger = (0, import_react26.forwardRef)(({ children, className }, r
     "div",
     {
       ref: handleRef,
-      className: (0, import_ui_utils25.cn)("inline-flex", className),
+      className: cn("inline-flex cursor-pointer", className),
       onClick: () => setOpen(!open),
       children
     }
   );
 });
-var DropdownContent = (0, import_react26.forwardRef)(({ children, className, align = "start" }, ref) => {
+var DropdownContent = (0, import_react27.forwardRef)(({ children, className, align = "start" }, ref) => {
   const { open, setOpen, triggerRef } = useDropdownContext();
-  const contentRef = (0, import_react26.useRef)(null);
-  const [position, setPosition] = (0, import_react26.useState)({ top: 0, left: 0 });
-  const handleRef = (0, import_react26.useCallback)(
+  const contentRef = (0, import_react27.useRef)(null);
+  const portalContainer = usePortalContainer();
+  const [position, setPosition] = (0, import_react27.useState)({ top: 0, left: 0 });
+  const handleRef = (0, import_react27.useCallback)(
     (node) => {
       contentRef.current = node;
       assignRef(ref, node);
     },
     [ref]
   );
-  const updatePosition = (0, import_react26.useCallback)(() => {
+  const updatePosition = (0, import_react27.useCallback)(() => {
     if (!triggerRef.current) return;
     const rect = triggerRef.current.getBoundingClientRect();
     const top = rect.bottom + window.scrollY + 4;
     const left = align === "end" ? rect.right + window.scrollX - (contentRef.current?.offsetWidth ?? 0) : rect.left + window.scrollX;
     setPosition({ top, left });
   }, [align, triggerRef]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!open) return;
     updatePosition();
   }, [open, updatePosition]);
-  (0, import_react26.useEffect)(() => {
+  (0, import_react27.useEffect)(() => {
     if (!open) return;
     function handleClickOutside(e) {
       if (contentRef.current && !contentRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
@@ -2092,24 +2531,24 @@ var DropdownContent = (0, import_react26.forwardRef)(({ children, className, ali
     document.addEventListener("mousedown", handleClickOutside);
     return () => document.removeEventListener("mousedown", handleClickOutside);
   }, [open, setOpen, triggerRef]);
-  if (!open) return null;
+  if (!open || !portalContainer) return null;
   return (0, import_react_dom5.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
       "div",
       {
         ref: handleRef,
         style: { top: position.top, left: position.left },
-        className: (0, import_ui_utils25.cn)(
-          "absolute z-50 min-w-40 rounded-md border border-border-base bg-surface-1 py-1 shadow-lg",
+        className: cn(
+          "absolute z-50 min-w-44 overflow-hidden rounded-lg border border-border-base bg-surface-1 p-1 text-text-primary shadow-xl",
           className
         ),
         children
       }
     ),
-    document.body
+    portalContainer
   );
 });
-var DropdownItem = (0, import_react26.forwardRef)(({ children, className, destructive = false, onClick, ...props }, ref) => {
+var DropdownItem = (0, import_react27.forwardRef)(({ children, className, destructive = false, onClick, ...props }, ref) => {
   const { setOpen } = useDropdownContext();
   function handleClick(e) {
     setOpen(false);
@@ -2120,9 +2559,9 @@ var DropdownItem = (0, import_react26.forwardRef)(({ children, className, destru
     {
       ref,
       type: "button",
-      className: (0, import_ui_utils25.cn)(
-        "w-full px-3 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:bg-surface-3",
-        destructive ? "text-red-600 hover:bg-red-50" : "text-text-primary hover:bg-surface-3",
+      className: cn(
+        "flex min-h-8 w-full items-center gap-2 rounded-md px-2.5 py-2 text-left text-sm leading-none transition-colors focus-visible:outline-none disabled:pointer-events-none disabled:opacity-50",
+        destructive ? "text-danger hover:bg-danger-soft focus-visible:bg-danger-soft" : "text-text-primary hover:bg-surface-2 focus-visible:bg-surface-2",
         className
       ),
       onClick: handleClick,
@@ -2131,8 +2570,8 @@ var DropdownItem = (0, import_react26.forwardRef)(({ children, className, destru
     }
   );
 });
-var DropdownSeparator = (0, import_react26.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: (0, import_ui_utils25.cn)("my-1 h-px bg-border-base", className), ...props });
+var DropdownSeparator = (0, import_react27.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ref, className: cn("-mx-1 my-1 h-px bg-border-base", className), ...props });
 });
 DropdownMenu.displayName = "DropdownMenu";
 DropdownTrigger.displayName = "DropdownTrigger";
@@ -2141,13 +2580,12 @@ DropdownItem.displayName = "DropdownItem";
 DropdownSeparator.displayName = "DropdownSeparator";
 
 // src/components/popover.tsx
-var import_react27 = require("react");
+var import_react28 = require("react");
 var import_react_dom6 = require("react-dom");
-var import_ui_utils26 = require("@ug666/ui-utils");
 var import_jsx_runtime26 = require("react/jsx-runtime");
-var PopoverContext = (0, import_react27.createContext)(null);
+var PopoverContext = (0, import_react28.createContext)(null);
 function usePopoverContext() {
-  const ctx = (0, import_react27.useContext)(PopoverContext);
+  const ctx = (0, import_react28.useContext)(PopoverContext);
   if (!ctx) throw new Error("Popover \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Popover> \u5185\u4F7F\u7528");
   return ctx;
 }
@@ -2161,11 +2599,11 @@ function assignRef2(ref, value) {
   }
 }
 var Popover = ({ open: controlledOpen, defaultOpen = false, onOpenChange, children }) => {
-  const [internalOpen, setInternalOpen] = (0, import_react27.useState)(defaultOpen);
-  const triggerRef = (0, import_react27.useRef)(null);
+  const [internalOpen, setInternalOpen] = (0, import_react28.useState)(defaultOpen);
+  const triggerRef = (0, import_react28.useRef)(null);
   const isControlled = controlledOpen !== void 0;
   const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = (0, import_react27.useCallback)(
+  const setOpen = (0, import_react28.useCallback)(
     (value) => {
       if (!isControlled) setInternalOpen(value);
       onOpenChange?.(value);
@@ -2175,9 +2613,9 @@ var Popover = ({ open: controlledOpen, defaultOpen = false, onOpenChange, childr
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(PopoverContext.Provider, { value: { open, setOpen, triggerRef }, children });
 };
 Popover.displayName = "Popover";
-var PopoverTrigger = (0, import_react27.forwardRef)(({ children, className }, ref) => {
+var PopoverTrigger = (0, import_react28.forwardRef)(({ children, className }, ref) => {
   const { setOpen, open, triggerRef } = usePopoverContext();
-  const handleRef = (0, import_react27.useCallback)(
+  const handleRef = (0, import_react28.useCallback)(
     (node) => {
       triggerRef.current = node;
       assignRef2(ref, node);
@@ -2188,7 +2626,7 @@ var PopoverTrigger = (0, import_react27.forwardRef)(({ children, className }, re
     "div",
     {
       ref: handleRef,
-      className: (0, import_ui_utils26.cn)("inline-flex", className),
+      className: cn("inline-flex", className),
       onClick: () => setOpen(!open),
       children
     }
@@ -2222,27 +2660,28 @@ function calcPosition(triggerRect, contentEl, side, align, sideOffset) {
   }
   return { top, left };
 }
-var PopoverContent = (0, import_react27.forwardRef)(
+var PopoverContent = (0, import_react28.forwardRef)(
   ({ children, className, side = "bottom", align = "center", sideOffset = 4, ...props }, ref) => {
     const { open, setOpen, triggerRef } = usePopoverContext();
-    const contentRef = (0, import_react27.useRef)(null);
-    const [pos, setPos] = (0, import_react27.useState)({ top: 0, left: 0 });
-    const handleRef = (0, import_react27.useCallback)(
+    const contentRef = (0, import_react28.useRef)(null);
+    const portalContainer = usePortalContainer();
+    const [pos, setPos] = (0, import_react28.useState)({ top: 0, left: 0 });
+    const handleRef = (0, import_react28.useCallback)(
       (node) => {
         contentRef.current = node;
         assignRef2(ref, node);
       },
       [ref]
     );
-    const updatePos = (0, import_react27.useCallback)(() => {
+    const updatePos = (0, import_react28.useCallback)(() => {
       if (!triggerRef.current || !contentRef.current) return;
       const rect = triggerRef.current.getBoundingClientRect();
       setPos(calcPosition(rect, contentRef.current, side, align, sideOffset));
     }, [side, align, sideOffset, triggerRef]);
-    (0, import_react27.useEffect)(() => {
+    (0, import_react28.useEffect)(() => {
       if (open) updatePos();
     }, [open, updatePos]);
-    (0, import_react27.useEffect)(() => {
+    (0, import_react28.useEffect)(() => {
       if (!open) return;
       function handleMouseDown(e) {
         if (contentRef.current && !contentRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
@@ -2252,14 +2691,14 @@ var PopoverContent = (0, import_react27.forwardRef)(
       document.addEventListener("mousedown", handleMouseDown);
       return () => document.removeEventListener("mousedown", handleMouseDown);
     }, [open, setOpen, triggerRef]);
-    if (!open) return null;
+    if (!open || !portalContainer) return null;
     return (0, import_react_dom6.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "div",
         {
           ref: handleRef,
           style: { top: pos.top, left: pos.left },
-          className: (0, import_ui_utils26.cn)(
+          className: cn(
             "absolute z-50 min-w-40 rounded-md border border-border-base bg-surface-1 p-3 shadow-lg",
             className
           ),
@@ -2267,20 +2706,19 @@ var PopoverContent = (0, import_react27.forwardRef)(
           children
         }
       ),
-      document.body
+      portalContainer
     );
   }
 );
 PopoverContent.displayName = "PopoverContent";
 
 // src/components/context-menu.tsx
-var import_react28 = require("react");
+var import_react29 = require("react");
 var import_react_dom7 = require("react-dom");
-var import_ui_utils27 = require("@ug666/ui-utils");
 var import_jsx_runtime27 = require("react/jsx-runtime");
-var ContextMenuContext = (0, import_react28.createContext)(null);
+var ContextMenuContext = (0, import_react29.createContext)(null);
 function useContextMenuContext() {
-  const ctx = (0, import_react28.useContext)(ContextMenuContext);
+  const ctx = (0, import_react29.useContext)(ContextMenuContext);
   if (!ctx) throw new Error("ContextMenu \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <ContextMenu> \u5185\u4F7F\u7528");
   return ctx;
 }
@@ -2293,18 +2731,18 @@ function assignRef3(ref, value) {
     ref.current = value;
   }
 }
-var ContextMenu = (0, import_react28.forwardRef)(
+var ContextMenu = (0, import_react29.forwardRef)(
   ({ children, className }, ref) => {
-    const [open, setOpen] = (0, import_react28.useState)(false);
-    const [position, setPosition] = (0, import_react28.useState)({ x: 0, y: 0 });
-    const openAt = (0, import_react28.useCallback)((pos) => {
+    const [open, setOpen] = (0, import_react29.useState)(false);
+    const [position, setPosition] = (0, import_react29.useState)({ x: 0, y: 0 });
+    const openAt = (0, import_react29.useCallback)((pos) => {
       setPosition(pos);
       setOpen(true);
     }, []);
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ContextMenuContext.Provider, { value: { open, position, setOpen, openAt }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: (0, import_ui_utils27.cn)("relative", className), children }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ContextMenuContext.Provider, { value: { open, position, setOpen, openAt }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: cn("relative", className), children }) });
   }
 );
-var ContextMenuTrigger = (0, import_react28.forwardRef)(
+var ContextMenuTrigger = (0, import_react29.forwardRef)(
   ({ children, className, ...props }, ref) => {
     const { openAt } = useContextMenuContext();
     function handleContextMenu(e) {
@@ -2315,7 +2753,7 @@ var ContextMenuTrigger = (0, import_react28.forwardRef)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils27.cn)(className),
+        className: cn(className),
         onContextMenu: handleContextMenu,
         ...props,
         children
@@ -2323,18 +2761,19 @@ var ContextMenuTrigger = (0, import_react28.forwardRef)(
     );
   }
 );
-var ContextMenuContent = (0, import_react28.forwardRef)(
+var ContextMenuContent = (0, import_react29.forwardRef)(
   ({ children, className, ...props }, ref) => {
     const { open, position, setOpen } = useContextMenuContext();
-    const contentRef = (0, import_react28.useRef)(null);
-    const handleRef = (0, import_react28.useCallback)(
+    const contentRef = (0, import_react29.useRef)(null);
+    const portalContainer = usePortalContainer();
+    const handleRef = (0, import_react29.useCallback)(
       (node) => {
         contentRef.current = node;
         assignRef3(ref, node);
       },
       [ref]
     );
-    (0, import_react28.useEffect)(() => {
+    (0, import_react29.useEffect)(() => {
       if (!open) return;
       function handleMouseDown(e) {
         if (contentRef.current && !contentRef.current.contains(e.target)) {
@@ -2353,14 +2792,14 @@ var ContextMenuContent = (0, import_react28.forwardRef)(
         document.removeEventListener("keydown", handleKeyDown);
       };
     }, [open, setOpen]);
-    if (!open) return null;
+    if (!open || !portalContainer) return null;
     return (0, import_react_dom7.createPortal)(
       /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
         "div",
         {
           ref: handleRef,
           style: { top: position.y, left: position.x },
-          className: (0, import_ui_utils27.cn)(
+          className: cn(
             "fixed z-50 min-w-40 rounded-md border border-border-base bg-surface-1 py-1 shadow-lg",
             className
           ),
@@ -2368,11 +2807,11 @@ var ContextMenuContent = (0, import_react28.forwardRef)(
           children
         }
       ),
-      document.body
+      portalContainer
     );
   }
 );
-var ContextMenuItem = (0, import_react28.forwardRef)(
+var ContextMenuItem = (0, import_react29.forwardRef)(
   ({ children, className, destructive = false, onClick, ...props }, ref) => {
     const { setOpen } = useContextMenuContext();
     function handleClick(e) {
@@ -2384,9 +2823,9 @@ var ContextMenuItem = (0, import_react28.forwardRef)(
       {
         ref,
         type: "button",
-        className: (0, import_ui_utils27.cn)(
+        className: cn(
           "w-full px-3 py-1.5 text-left text-sm transition-colors focus-visible:outline-none focus-visible:bg-surface-3",
-          destructive ? "text-red-600 hover:bg-red-50" : "text-text-primary hover:bg-surface-3",
+          destructive ? "text-danger hover:bg-danger-soft/10" : "text-text-primary hover:bg-surface-3",
           className
         ),
         onClick: handleClick,
@@ -2396,9 +2835,9 @@ var ContextMenuItem = (0, import_react28.forwardRef)(
     );
   }
 );
-var ContextMenuSeparator = (0, import_react28.forwardRef)(
+var ContextMenuSeparator = (0, import_react29.forwardRef)(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: (0, import_ui_utils27.cn)("my-1 h-px bg-border-base", className), ...props });
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { ref, className: cn("my-1 h-px bg-border-base", className), ...props });
   }
 );
 ContextMenu.displayName = "ContextMenu";
@@ -2408,53 +2847,52 @@ ContextMenuItem.displayName = "ContextMenuItem";
 ContextMenuSeparator.displayName = "ContextMenuSeparator";
 
 // src/components/navigation-menu.tsx
-var import_react29 = require("react");
-var import_lucide_react12 = require("lucide-react");
-var import_ui_utils28 = require("@ug666/ui-utils");
+var import_react30 = require("react");
+var import_lucide_react14 = require("lucide-react");
 var import_jsx_runtime28 = require("react/jsx-runtime");
-var NavigationMenuContext = (0, import_react29.createContext)(null);
+var NavigationMenuContext = (0, import_react30.createContext)(null);
 function useNavigationMenuContext() {
-  const ctx = (0, import_react29.useContext)(NavigationMenuContext);
+  const ctx = (0, import_react30.useContext)(NavigationMenuContext);
   if (!ctx) throw new Error("NavigationMenu \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <NavigationMenu> \u5185\u4F7F\u7528");
   return ctx;
 }
-var NavigationMenuItemContext = (0, import_react29.createContext)(null);
+var NavigationMenuItemContext = (0, import_react30.createContext)(null);
 function useNavigationMenuItemContext() {
-  const ctx = (0, import_react29.useContext)(NavigationMenuItemContext);
+  const ctx = (0, import_react30.useContext)(NavigationMenuItemContext);
   if (!ctx) throw new Error("NavigationMenuTrigger/Content \u5FC5\u987B\u5728 <NavigationMenuItem> \u5185\u4F7F\u7528");
   return ctx;
 }
 var _idCounter = 0;
-var NavigationMenu = (0, import_react29.forwardRef)(
+var NavigationMenu = (0, import_react30.forwardRef)(
   ({ className, children, ...props }, ref) => {
-    const [activeItem, setActiveItem] = (0, import_react29.useState)(null);
+    const [activeItem, setActiveItem] = (0, import_react30.useState)(null);
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(NavigationMenuContext.Provider, { value: { activeItem, setActiveItem }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "nav",
       {
         ref,
-        className: (0, import_ui_utils28.cn)("relative flex items-center gap-1", className),
+        className: cn("relative flex items-center gap-1", className),
         ...props,
         children
       }
     ) });
   }
 );
-var NavigationMenuItem = (0, import_react29.forwardRef)(
+var NavigationMenuItem = (0, import_react30.forwardRef)(
   ({ className, children, ...props }, ref) => {
-    const itemIdRef = (0, import_react29.useRef)(`nav-item-${++_idCounter}`);
+    const itemIdRef = (0, import_react30.useRef)(`nav-item-${++_idCounter}`);
     const { activeItem, setActiveItem } = useNavigationMenuContext();
     const isOpen = activeItem === itemIdRef.current;
-    const handleMouseEnter = (0, import_react29.useCallback)(() => {
+    const handleMouseEnter = (0, import_react30.useCallback)(() => {
       setActiveItem(itemIdRef.current);
     }, [setActiveItem]);
-    const handleMouseLeave = (0, import_react29.useCallback)(() => {
+    const handleMouseLeave = (0, import_react30.useCallback)(() => {
       setActiveItem(null);
     }, [setActiveItem]);
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(NavigationMenuItemContext.Provider, { value: { itemId: itemIdRef.current }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils28.cn)("relative", className),
+        className: cn("relative", className),
         onMouseEnter: handleMouseEnter,
         onMouseLeave: handleMouseLeave,
         "data-state": isOpen ? "open" : "closed",
@@ -2464,13 +2902,13 @@ var NavigationMenuItem = (0, import_react29.forwardRef)(
     ) });
   }
 );
-var NavigationMenuLink = (0, import_react29.forwardRef)(
+var NavigationMenuLink = (0, import_react30.forwardRef)(
   ({ className, active = false, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
       "a",
       {
         ref,
-        className: (0, import_ui_utils28.cn)(
+        className: cn(
           "inline-flex items-center rounded-md px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-1",
           active ? "bg-surface-3 text-text-primary" : "text-text-secondary hover:bg-surface-3 hover:text-text-primary",
           className
@@ -2481,7 +2919,7 @@ var NavigationMenuLink = (0, import_react29.forwardRef)(
     );
   }
 );
-var NavigationMenuTrigger = (0, import_react29.forwardRef)(
+var NavigationMenuTrigger = (0, import_react30.forwardRef)(
   ({ className, children, ...props }, ref) => {
     const { activeItem } = useNavigationMenuContext();
     const { itemId } = useNavigationMenuItemContext();
@@ -2492,7 +2930,7 @@ var NavigationMenuTrigger = (0, import_react29.forwardRef)(
         ref,
         type: "button",
         "aria-expanded": isOpen,
-        className: (0, import_ui_utils28.cn)(
+        className: cn(
           "inline-flex items-center gap-1 rounded-md px-3 py-2 text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/30 focus-visible:ring-offset-1",
           isOpen ? "bg-surface-3 text-text-primary" : "text-text-secondary hover:bg-surface-3 hover:text-text-primary",
           className
@@ -2501,10 +2939,10 @@ var NavigationMenuTrigger = (0, import_react29.forwardRef)(
         children: [
           children,
           /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
-            import_lucide_react12.ChevronDown,
+            import_lucide_react14.ChevronDown,
             {
               size: 14,
-              className: (0, import_ui_utils28.cn)("transition-transform duration-200", isOpen && "rotate-180")
+              className: cn("transition-transform duration-200", isOpen && "rotate-180")
             }
           )
         ]
@@ -2512,7 +2950,7 @@ var NavigationMenuTrigger = (0, import_react29.forwardRef)(
     );
   }
 );
-var NavigationMenuContent = (0, import_react29.forwardRef)(
+var NavigationMenuContent = (0, import_react30.forwardRef)(
   ({ className, children, ...props }, ref) => {
     const { activeItem } = useNavigationMenuContext();
     const { itemId } = useNavigationMenuItemContext();
@@ -2522,7 +2960,7 @@ var NavigationMenuContent = (0, import_react29.forwardRef)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils28.cn)(
+        className: cn(
           "absolute left-0 top-full z-50 mt-1 min-w-40 rounded-md border border-border-base bg-surface-1 py-1 shadow-lg",
           className
         ),
@@ -2539,14 +2977,13 @@ NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
 NavigationMenuContent.displayName = "NavigationMenuContent";
 
 // src/components/avatar.tsx
-var import_react30 = require("react");
-var import_lucide_react13 = require("lucide-react");
+var import_react31 = require("react");
+var import_lucide_react15 = require("lucide-react");
 var import_class_variance_authority8 = require("class-variance-authority");
-var import_ui_utils29 = require("@ug666/ui-utils");
 var import_jsx_runtime29 = require("react/jsx-runtime");
-var AvatarContext = (0, import_react30.createContext)(null);
+var AvatarContext = (0, import_react31.createContext)(null);
 function useAvatarContext(componentName) {
-  const ctx = (0, import_react30.useContext)(AvatarContext);
+  const ctx = (0, import_react31.useContext)(AvatarContext);
   if (!ctx) {
     throw new Error(`<${componentName}> \u5FC5\u987B\u5728 <Avatar> \u5185\u4F7F\u7528`);
   }
@@ -2566,16 +3003,16 @@ var avatarVariants = (0, import_class_variance_authority8.cva)(
     defaultVariants: { size: "md" }
   }
 );
-var Avatar = (0, import_react30.forwardRef)(
+var Avatar = (0, import_react31.forwardRef)(
   ({ size, className, children, ...props }, ref) => {
-    const [imageLoadingStatus, setImageLoadingStatus] = (0, import_react30.useState)("idle");
-    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AvatarContext.Provider, { value: { imageLoadingStatus, setImageLoadingStatus }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { ref, className: (0, import_ui_utils29.cn)(avatarVariants({ size }), className), ...props, children }) });
+    const [imageLoadingStatus, setImageLoadingStatus] = (0, import_react31.useState)("idle");
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(AvatarContext.Provider, { value: { imageLoadingStatus, setImageLoadingStatus }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { ref, className: cn(avatarVariants({ size }), className), ...props, children }) });
   }
 );
-var AvatarImage = (0, import_react30.forwardRef)(
+var AvatarImage = (0, import_react31.forwardRef)(
   ({ src, alt = "", className, onLoad, onError, ...props }, ref) => {
     const { imageLoadingStatus, setImageLoadingStatus } = useAvatarContext("AvatarImage");
-    (0, import_react30.useEffect)(() => {
+    (0, import_react31.useEffect)(() => {
       if (!src) {
         setImageLoadingStatus("error");
         return;
@@ -2599,7 +3036,7 @@ var AvatarImage = (0, import_react30.forwardRef)(
           setImageLoadingStatus("error");
           onError?.(event);
         },
-        className: (0, import_ui_utils29.cn)(
+        className: cn(
           "h-full w-full object-cover",
           imageLoadingStatus === "loading" && "invisible",
           className
@@ -2609,7 +3046,7 @@ var AvatarImage = (0, import_react30.forwardRef)(
     );
   }
 );
-var AvatarFallback = (0, import_react30.forwardRef)(
+var AvatarFallback = (0, import_react31.forwardRef)(
   ({ className, children, ...props }, ref) => {
     const { imageLoadingStatus } = useAvatarContext("AvatarFallback");
     if (imageLoadingStatus === "loaded") return null;
@@ -2617,12 +3054,12 @@ var AvatarFallback = (0, import_react30.forwardRef)(
       "span",
       {
         ref,
-        className: (0, import_ui_utils29.cn)(
+        className: cn(
           "absolute inset-0 flex items-center justify-center font-medium text-text-secondary",
           className
         ),
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react13.User, { size: 16 })
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react15.User, { size: 16 })
       }
     );
   }
@@ -2632,8 +3069,7 @@ AvatarImage.displayName = "AvatarImage";
 AvatarFallback.displayName = "AvatarFallback";
 
 // src/components/avatar-group.tsx
-var import_react31 = require("react");
-var import_ui_utils30 = require("@ug666/ui-utils");
+var import_react32 = require("react");
 var import_jsx_runtime30 = require("react/jsx-runtime");
 var SIZE_CLASSES = {
   sm: "h-8 w-8 text-xs",
@@ -2646,27 +3082,27 @@ var RING_SIZE_CLASSES = {
   lg: "ring-[3px]"
 };
 var OVERLAP_CLASSES = {
-  sm: "-ml-2",
-  default: "-ml-3",
-  lg: "-ml-4"
+  sm: "-ml-1.5",
+  default: "-ml-2",
+  lg: "-ml-3"
 };
-var AvatarGroup = (0, import_react31.forwardRef)(
+var AvatarGroup = (0, import_react32.forwardRef)(
   ({ max = 5, size = "default", className, children, ...props }, ref) => {
-    const allItems = import_react31.Children.toArray(children).filter(import_react31.isValidElement);
+    const allItems = import_react32.Children.toArray(children).filter(import_react32.isValidElement);
     const visibleItems = allItems.slice(0, max);
     const overflowCount = allItems.length - max;
     return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils30.cn)("flex items-center", className),
+        className: cn("flex max-w-full items-center overflow-hidden py-0.5", className),
         ...props,
         children: [
           visibleItems.map((child, idx) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "span",
             {
-              className: (0, import_ui_utils30.cn)(
-                "relative inline-flex shrink-0 overflow-hidden rounded-full ring-surface-1",
+              className: cn(
+                "relative inline-flex shrink-0 overflow-hidden rounded-full border border-border-base bg-surface-2 ring-surface-1",
                 SIZE_CLASSES[size],
                 RING_SIZE_CLASSES[size],
                 idx > 0 && OVERLAP_CLASSES[size]
@@ -2678,8 +3114,8 @@ var AvatarGroup = (0, import_react31.forwardRef)(
           overflowCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
             "span",
             {
-              className: (0, import_ui_utils30.cn)(
-                "relative inline-flex shrink-0 items-center justify-center rounded-full bg-surface-3 font-medium text-text-secondary ring-surface-1",
+              className: cn(
+                "relative inline-flex shrink-0 items-center justify-center rounded-full border border-border-base bg-surface-2 font-medium text-text-secondary ring-surface-1",
                 SIZE_CLASSES[size],
                 RING_SIZE_CLASSES[size],
                 OVERLAP_CLASSES[size]
@@ -2699,11 +3135,10 @@ var AvatarGroup = (0, import_react31.forwardRef)(
 AvatarGroup.displayName = "AvatarGroup";
 
 // src/components/tooltip.tsx
-var import_react32 = require("react");
+var import_react33 = require("react");
 var import_react_dom8 = require("react-dom");
-var import_ui_utils31 = require("@ug666/ui-utils");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var TooltipContext = (0, import_react32.createContext)(null);
+var TooltipContext = (0, import_react33.createContext)(null);
 function assignRef4(ref, value) {
   if (typeof ref === "function") {
     ref(value);
@@ -2714,26 +3149,26 @@ function assignRef4(ref, value) {
   }
 }
 function useTooltipContext() {
-  const ctx = (0, import_react32.useContext)(TooltipContext);
+  const ctx = (0, import_react33.useContext)(TooltipContext);
   if (!ctx) throw new Error("Tooltip \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Tooltip> \u5185\u4F7F\u7528");
   return ctx;
 }
-var Tooltip = (0, import_react32.forwardRef)(({ children, className }, ref) => {
-  const [open, setOpen] = (0, import_react32.useState)(false);
-  const triggerRef = (0, import_react32.useRef)(null);
-  const delayRef = (0, import_react32.useRef)(null);
-  (0, import_react32.useEffect)(() => {
+var Tooltip = (0, import_react33.forwardRef)(({ children, className }, ref) => {
+  const [open, setOpen] = (0, import_react33.useState)(false);
+  const triggerRef = (0, import_react33.useRef)(null);
+  const delayRef = (0, import_react33.useRef)(null);
+  (0, import_react33.useEffect)(() => {
     return () => {
       if (delayRef.current) {
         clearTimeout(delayRef.current);
       }
     };
   }, []);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContext.Provider, { value: { open, setOpen, triggerRef, delayRef }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { ref, className: (0, import_ui_utils31.cn)("relative inline-flex", className), children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(TooltipContext.Provider, { value: { open, setOpen, triggerRef, delayRef }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { ref, className: cn("relative inline-flex", className), children }) });
 });
-var TooltipTrigger = (0, import_react32.forwardRef)(({ children, className }, ref) => {
+var TooltipTrigger = (0, import_react33.forwardRef)(({ children, className }, ref) => {
   const { setOpen, triggerRef, delayRef } = useTooltipContext();
-  const handleRef = (0, import_react32.useCallback)(
+  const handleRef = (0, import_react33.useCallback)(
     (node) => {
       triggerRef.current = node;
       assignRef4(ref, node);
@@ -2751,7 +3186,7 @@ var TooltipTrigger = (0, import_react32.forwardRef)(({ children, className }, re
     "span",
     {
       ref: handleRef,
-      className: (0, import_ui_utils31.cn)("inline-flex", className),
+      className: cn("inline-flex", className),
       onMouseEnter: handleMouseEnter,
       onMouseLeave: handleMouseLeave,
       children
@@ -2764,18 +3199,19 @@ var arrowPositionClasses = {
   left: "after:absolute after:left-full after:top-1/2 after:-translate-y-1/2 after:border-4 after:border-transparent after:border-l-text-primary",
   right: "after:absolute after:right-full after:top-1/2 after:-translate-y-1/2 after:border-4 after:border-transparent after:border-r-text-primary"
 };
-var TooltipContent = (0, import_react32.forwardRef)(({ children, side = "top", className }, ref) => {
+var TooltipContent = (0, import_react33.forwardRef)(({ children, side = "top", className }, ref) => {
   const { open, triggerRef } = useTooltipContext();
-  const contentRef = (0, import_react32.useRef)(null);
-  const [pos, setPos] = (0, import_react32.useState)({ top: 0, left: 0 });
-  const handleRef = (0, import_react32.useCallback)(
+  const contentRef = (0, import_react33.useRef)(null);
+  const portalContainer = usePortalContainer();
+  const [pos, setPos] = (0, import_react33.useState)({ top: 0, left: 0 });
+  const handleRef = (0, import_react33.useCallback)(
     (node) => {
       contentRef.current = node;
       assignRef4(ref, node);
     },
     [ref]
   );
-  const updatePos = (0, import_react32.useCallback)(() => {
+  const updatePos = (0, import_react33.useCallback)(() => {
     if (!triggerRef.current || !contentRef.current) return;
     const rect = triggerRef.current.getBoundingClientRect();
     const cw = contentRef.current.offsetWidth;
@@ -2798,17 +3234,17 @@ var TooltipContent = (0, import_react32.forwardRef)(({ children, side = "top", c
     }
     setPos({ top, left });
   }, [side, triggerRef]);
-  (0, import_react32.useEffect)(() => {
+  (0, import_react33.useEffect)(() => {
     if (open) updatePos();
   }, [open, updatePos]);
-  if (!open) return null;
+  if (!open || !portalContainer) return null;
   return (0, import_react_dom8.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       "div",
       {
         ref: handleRef,
         style: { top: pos.top, left: pos.left },
-        className: (0, import_ui_utils31.cn)(
+        className: cn(
           "absolute z-50 rounded-md bg-text-primary px-2.5 py-1.5 text-xs text-surface-1 shadow-md",
           arrowPositionClasses[side],
           className
@@ -2816,7 +3252,7 @@ var TooltipContent = (0, import_react32.forwardRef)(({ children, side = "top", c
         children
       }
     ),
-    document.body
+    portalContainer
   );
 });
 Tooltip.displayName = "Tooltip";
@@ -2824,10 +3260,9 @@ TooltipTrigger.displayName = "TooltipTrigger";
 TooltipContent.displayName = "TooltipContent";
 
 // src/components/alert.tsx
-var import_react33 = require("react");
-var import_lucide_react14 = require("lucide-react");
+var import_react34 = require("react");
+var import_lucide_react16 = require("lucide-react");
 var import_class_variance_authority9 = require("class-variance-authority");
-var import_ui_utils32 = require("@ug666/ui-utils");
 var import_jsx_runtime32 = require("react/jsx-runtime");
 var alertVariants = (0, import_class_variance_authority9.cva)(
   "relative flex gap-3 rounded-md border-l-4 p-4",
@@ -2845,11 +3280,11 @@ var alertVariants = (0, import_class_variance_authority9.cva)(
   }
 );
 var iconMap = {
-  default: import_lucide_react14.AlertCircle,
-  info: import_lucide_react14.Info,
-  success: import_lucide_react14.CheckCircle,
-  warning: import_lucide_react14.AlertTriangle,
-  destructive: import_lucide_react14.AlertCircle
+  default: import_lucide_react16.AlertCircle,
+  info: import_lucide_react16.Info,
+  success: import_lucide_react16.CheckCircle,
+  warning: import_lucide_react16.AlertTriangle,
+  destructive: import_lucide_react16.AlertCircle
 };
 var iconColorMap = {
   default: "text-info",
@@ -2858,7 +3293,7 @@ var iconColorMap = {
   warning: "text-warning",
   destructive: "text-danger"
 };
-var Alert = (0, import_react33.forwardRef)(
+var Alert = (0, import_react34.forwardRef)(
   ({ variant = "default", className, children, ...props }, ref) => {
     const Icon = iconMap[variant ?? "default"];
     const iconColor = iconColorMap[variant ?? "default"];
@@ -2867,55 +3302,54 @@ var Alert = (0, import_react33.forwardRef)(
       {
         ref,
         role: "alert",
-        className: (0, import_ui_utils32.cn)(alertVariants({ variant }), className),
+        className: cn(alertVariants({ variant }), className),
         ...props,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { size: 18, className: (0, import_ui_utils32.cn)("mt-0.5 shrink-0", iconColor) }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { size: 18, className: cn("mt-0.5 shrink-0", iconColor) }),
           /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-0.5", children })
         ]
       }
     );
   }
 );
-var AlertTitle = (0, import_react33.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { ref, className: (0, import_ui_utils32.cn)("text-sm font-semibold leading-5", className), ...props });
+var AlertTitle = (0, import_react34.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { ref, className: cn("text-sm font-semibold leading-5", className), ...props });
 });
-var AlertDescription = (0, import_react33.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { ref, className: (0, import_ui_utils32.cn)("text-sm leading-5 opacity-90", className), ...props });
+var AlertDescription = (0, import_react34.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("p", { ref, className: cn("text-sm leading-5 opacity-90", className), ...props });
 });
 Alert.displayName = "Alert";
 AlertTitle.displayName = "AlertTitle";
 AlertDescription.displayName = "AlertDescription";
 
 // src/components/breadcrumb.tsx
-var import_react34 = require("react");
-var import_lucide_react15 = require("lucide-react");
-var import_ui_utils33 = require("@ug666/ui-utils");
+var import_react35 = require("react");
+var import_lucide_react17 = require("lucide-react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var Breadcrumb = (0, import_react34.forwardRef)(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("nav", { ref, "aria-label": "\u9762\u5305\u5C51\u5BFC\u822A", className: (0, import_ui_utils33.cn)(className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ol", { className: "flex flex-wrap items-center gap-0 text-sm text-text-secondary", children }) });
+var Breadcrumb = (0, import_react35.forwardRef)(({ className, children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("nav", { ref, "aria-label": "\u9762\u5305\u5C51\u5BFC\u822A", className: cn(className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("ol", { className: "flex flex-wrap items-center gap-0 text-sm text-text-secondary", children }) });
 });
-var BreadcrumbItem = (0, import_react34.forwardRef)(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { ref, className: (0, import_ui_utils33.cn)("flex items-center gap-1", className), ...props });
+var BreadcrumbItem = (0, import_react35.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("li", { ref, className: cn("flex items-center gap-1", className), ...props });
 });
-var BreadcrumbLink = (0, import_react34.forwardRef)(
+var BreadcrumbLink = (0, import_react35.forwardRef)(
   ({ current = false, className, children, href, ...props }, ref) => {
     if (current) {
-      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { "aria-current": "page", className: (0, import_ui_utils33.cn)("font-medium text-text-primary", className), children });
+      return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { "aria-current": "page", className: cn("font-medium text-text-primary", className), children });
     }
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "a",
       {
         ref,
         href,
-        className: (0, import_ui_utils33.cn)("transition-colors hover:text-text-primary", className),
+        className: cn("transition-colors hover:text-text-primary", className),
         ...props,
         children
       }
     );
   }
 );
-var BreadcrumbSeparator = (0, import_react34.forwardRef)(
+var BreadcrumbSeparator = (0, import_react35.forwardRef)(
   ({ className, children, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
       "li",
@@ -2923,9 +3357,9 @@ var BreadcrumbSeparator = (0, import_react34.forwardRef)(
         ref,
         role: "presentation",
         "aria-hidden": "true",
-        className: (0, import_ui_utils33.cn)("text-text-tertiary", className),
+        className: cn("text-text-tertiary", className),
         ...props,
-        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react15.ChevronRight, { size: 14 })
+        children: children ?? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react17.ChevronRight, { size: 14 })
       }
     );
   }
@@ -2936,10 +3370,9 @@ BreadcrumbLink.displayName = "BreadcrumbLink";
 BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
 
 // src/components/switch.tsx
-var import_react35 = require("react");
-var import_ui_utils34 = require("@ug666/ui-utils");
+var import_react36 = require("react");
 var import_jsx_runtime34 = require("react/jsx-runtime");
-var Switch = (0, import_react35.forwardRef)(
+var Switch = (0, import_react36.forwardRef)(
   ({
     checked,
     onCheckedChange,
@@ -2950,7 +3383,7 @@ var Switch = (0, import_react35.forwardRef)(
     id,
     ...props
   }, ref) => {
-    const generatedId = (0, import_react35.useId)();
+    const generatedId = (0, import_react36.useId)();
     const switchId = id ?? generatedId;
     const track = /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
       "button",
@@ -2962,19 +3395,19 @@ var Switch = (0, import_react35.forwardRef)(
         "aria-checked": checked,
         disabled,
         onClick: () => !disabled && onCheckedChange(!checked),
-        className: (0, import_ui_utils34.cn)(
-          "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors duration-200",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+        className: cn(
+          "relative inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border border-transparent p-0.5 shadow-sm transition-colors duration-200",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/35 focus-visible:ring-offset-2 focus-visible:ring-offset-surface-0",
           "disabled:cursor-not-allowed disabled:opacity-50",
-          checked ? "bg-primary" : "bg-surface-3",
+          checked ? "bg-primary hover:bg-primary-hover" : "bg-surface-3 hover:bg-border-strong",
           className
         ),
         ...props,
         children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
           "span",
           {
-            className: (0, import_ui_utils34.cn)(
-              "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm ring-0 transition-transform duration-200",
+            className: cn(
+              "pointer-events-none block h-5 w-5 rounded-full bg-primary-fg shadow-md ring-0 transition-transform duration-200",
               checked ? "translate-x-5" : "translate-x-0"
             )
           }
@@ -2986,14 +3419,14 @@ var Switch = (0, import_react35.forwardRef)(
       "label",
       {
         htmlFor: switchId,
-        className: (0, import_ui_utils34.cn)(
-          "inline-flex items-center gap-2 cursor-pointer",
+        className: cn(
+          "inline-flex cursor-pointer items-center gap-2.5 text-sm font-medium leading-5 text-text-primary",
           disabled && "cursor-not-allowed opacity-50"
         ),
         children: [
-          labelPlacement === "left" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-sm font-medium text-text-primary", children: label }),
+          labelPlacement === "left" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: label }),
           track,
-          labelPlacement === "right" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-sm font-medium text-text-primary", children: label })
+          labelPlacement === "right" && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: label })
         ]
       }
     );
@@ -3002,12 +3435,11 @@ var Switch = (0, import_react35.forwardRef)(
 Switch.displayName = "Switch";
 
 // src/components/textarea.tsx
-var import_react36 = require("react");
-var import_ui_utils35 = require("@ug666/ui-utils");
+var import_react37 = require("react");
 var import_jsx_runtime35 = require("react/jsx-runtime");
-var Textarea = (0, import_react36.forwardRef)(
+var Textarea = (0, import_react37.forwardRef)(
   ({ className, label, error, helperText, id, rows = 3, ...props }, ref) => {
-    const generatedId = (0, import_react36.useId)();
+    const generatedId = (0, import_react37.useId)();
     const textareaId = id ?? generatedId;
     return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-col gap-1", children: [
       label && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("label", { htmlFor: textareaId, className: "text-sm font-medium text-text-primary", children: label }),
@@ -3017,7 +3449,7 @@ var Textarea = (0, import_react36.forwardRef)(
           ref,
           id: textareaId,
           rows,
-          className: (0, import_ui_utils35.cn)(
+          className: cn(
             "w-full rounded-md border bg-surface-1 px-3 py-2 text-sm text-text-primary placeholder:text-text-tertiary",
             "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-1",
             "disabled:cursor-not-allowed disabled:opacity-50",
@@ -3036,9 +3468,8 @@ var Textarea = (0, import_react36.forwardRef)(
 Textarea.displayName = "Textarea";
 
 // src/components/skeleton.tsx
-var import_react37 = require("react");
+var import_react38 = require("react");
 var import_class_variance_authority10 = require("class-variance-authority");
-var import_ui_utils36 = require("@ug666/ui-utils");
 var import_jsx_runtime36 = require("react/jsx-runtime");
 var skeletonVariants = (0, import_class_variance_authority10.cva)(
   "animate-pulse bg-surface-3",
@@ -3053,26 +3484,32 @@ var skeletonVariants = (0, import_class_variance_authority10.cva)(
     defaultVariants: { variant: "rect" }
   }
 );
-var Skeleton = (0, import_react37.forwardRef)(({ variant, className, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, className: (0, import_ui_utils36.cn)(skeletonVariants({ variant }), className), "aria-hidden": "true", ...props });
+var Skeleton = (0, import_react38.forwardRef)(({ variant, className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { ref, className: cn(skeletonVariants({ variant }), className), "aria-hidden": "true", ...props });
 });
 Skeleton.displayName = "Skeleton";
 
 // src/components/progress.tsx
-var import_react38 = require("react");
-var import_ui_utils37 = require("@ug666/ui-utils");
+var import_react39 = require("react");
 var import_jsx_runtime37 = require("react/jsx-runtime");
-var Progress = (0, import_react38.forwardRef)(({
+var progressColorClasses = {
+  primary: "bg-primary",
+  success: "bg-success",
+  warning: "bg-warning",
+  danger: "bg-danger",
+  info: "bg-info"
+};
+var Progress = (0, import_react39.forwardRef)(({
   value,
   max = 100,
   showLabel = false,
-  color = "bg-indigo-500",
+  color = "primary",
   className,
   ...props
 }, ref) => {
   const clamped = Math.min(Math.max(value, 0), max);
   const percent = Math.round(clamped / max * 100);
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref, className: (0, import_ui_utils37.cn)("flex items-center gap-3", className), ...props, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { ref, className: cn("flex items-center gap-3", className), ...props, children: [
     /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       "div",
       {
@@ -3084,7 +3521,7 @@ var Progress = (0, import_react38.forwardRef)(({
         children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           "div",
           {
-            className: (0, import_ui_utils37.cn)("h-full rounded-full transition-all duration-500 ease-out", color),
+            className: cn("h-full rounded-full transition-all duration-500 ease-out", progressColorClasses[color]),
             style: { width: `${percent}%` }
           }
         )
@@ -3099,14 +3536,14 @@ var Progress = (0, import_react38.forwardRef)(({
 Progress.displayName = "Progress";
 
 // src/components/sheet.tsx
-var import_react39 = require("react");
+var import_react40 = require("react");
 var import_react_dom9 = require("react-dom");
-var import_lucide_react16 = require("lucide-react");
-var import_ui_utils38 = require("@ug666/ui-utils");
+var import_lucide_react18 = require("lucide-react");
 var import_jsx_runtime38 = require("react/jsx-runtime");
-var Sheet = (0, import_react39.forwardRef)(({ open, onClose, side = "right", title, children, className }, ref) => {
+var Sheet = (0, import_react40.forwardRef)(({ open, onClose, side = "right", title, children, className }, ref) => {
   useEscapeKey(open, onClose);
-  if (!open) return null;
+  const portalContainer = usePortalContainer();
+  if (!open || !portalContainer) return null;
   return (0, import_react_dom9.createPortal)(
     /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "fixed inset-0 z-50 flex", role: "dialog", "aria-modal": "true", children: [
       /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
@@ -3121,7 +3558,7 @@ var Sheet = (0, import_react39.forwardRef)(({ open, onClose, side = "right", tit
         "div",
         {
           ref,
-          className: (0, import_ui_utils38.cn)(
+          className: cn(
             "relative flex h-full w-80 max-w-full flex-col bg-surface-1 shadow-xl",
             "transition-transform duration-300 ease-in-out",
             side === "right" ? "ml-auto translate-x-0" : "mr-auto translate-x-0",
@@ -3137,7 +3574,7 @@ var Sheet = (0, import_react39.forwardRef)(({ open, onClose, side = "right", tit
                   onClick: onClose,
                   className: "rounded-md p-1 text-text-tertiary hover:bg-surface-3 hover:text-text-secondary transition-colors",
                   "aria-label": "\u5173\u95ED",
-                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react16.X, { size: 18 })
+                  children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_lucide_react18.X, { size: 18 })
                 }
               )
             ] }),
@@ -3146,22 +3583,21 @@ var Sheet = (0, import_react39.forwardRef)(({ open, onClose, side = "right", tit
         }
       )
     ] }),
-    document.body
+    portalContainer
   );
 });
 Sheet.displayName = "Sheet";
 
 // src/components/empty-state.tsx
-var import_react40 = require("react");
-var import_ui_utils39 = require("@ug666/ui-utils");
+var import_react41 = require("react");
 var import_jsx_runtime39 = require("react/jsx-runtime");
-var EmptyState = (0, import_react40.forwardRef)(
+var EmptyState = (0, import_react41.forwardRef)(
   ({ icon: Icon, title, description, action, className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
       "div",
       {
         ref,
-        className: (0, import_ui_utils39.cn)(
+        className: cn(
           "flex flex-col items-center justify-center gap-3 py-16 text-center",
           className
         ),
@@ -3181,14 +3617,13 @@ var EmptyState = (0, import_react40.forwardRef)(
 EmptyState.displayName = "EmptyState";
 
 // src/components/separator.tsx
-var import_react41 = require("react");
-var import_ui_utils40 = require("@ug666/ui-utils");
+var import_react42 = require("react");
 var import_jsx_runtime40 = require("react/jsx-runtime");
 var ORIENTATION_CLASSES = {
   horizontal: "h-px w-full bg-border-base",
   vertical: "w-px h-full bg-border-base"
 };
-var Separator = (0, import_react41.forwardRef)(
+var Separator = (0, import_react42.forwardRef)(
   ({ orientation = "horizontal", className, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "div",
@@ -3196,7 +3631,7 @@ var Separator = (0, import_react41.forwardRef)(
         ref,
         role: "separator",
         "aria-orientation": orientation,
-        className: (0, import_ui_utils40.cn)(ORIENTATION_CLASSES[orientation], className),
+        className: cn(ORIENTATION_CLASSES[orientation], className),
         ...props
       }
     );
@@ -3205,20 +3640,19 @@ var Separator = (0, import_react41.forwardRef)(
 Separator.displayName = "Separator";
 
 // src/components/descriptions.tsx
-var import_react42 = require("react");
-var import_ui_utils41 = require("@ug666/ui-utils");
+var import_react43 = require("react");
 var import_jsx_runtime41 = require("react/jsx-runtime");
 var SIZE_LABEL_CLASSES = {
-  sm: "text-xs py-1 px-2",
-  default: "text-sm py-2 px-3",
-  lg: "text-base py-3 px-4"
+  sm: "px-3 py-2 text-xs",
+  default: "px-3.5 py-2.5 text-sm",
+  lg: "px-4 py-3 text-base"
 };
 var SIZE_VALUE_CLASSES = {
-  sm: "text-xs py-1 px-2",
-  default: "text-sm py-2 px-3",
-  lg: "text-base py-3 px-4"
+  sm: "px-3 py-2 text-xs",
+  default: "px-3.5 py-2.5 text-sm",
+  lg: "px-4 py-3 text-base"
 };
-var DescriptionsItem = (0, import_react42.forwardRef)(
+var DescriptionsItem = (0, import_react43.forwardRef)(
   ({ label, children, className, span: _span, ...props }, ref) => {
     return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className, ...props, children: [
       /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "text-text-secondary", children: label }),
@@ -3227,10 +3661,10 @@ var DescriptionsItem = (0, import_react42.forwardRef)(
   }
 );
 DescriptionsItem.displayName = "DescriptionsItem";
-var Descriptions = (0, import_react42.forwardRef)(
+var Descriptions = (0, import_react43.forwardRef)(
   ({ column = 2, bordered = false, size = "default", title, className, children, ...props }, ref) => {
-    const items = import_react42.Children.toArray(children).filter(
-      (child) => (0, import_react42.isValidElement)(child) && child.type.displayName === "DescriptionsItem"
+    const items = import_react43.Children.toArray(children).filter(
+      (child) => (0, import_react43.isValidElement)(child) && child.type.displayName === "DescriptionsItem"
     );
     if (bordered) {
       const rows = [];
@@ -3247,34 +3681,38 @@ var Descriptions = (0, import_react42.forwardRef)(
         currentColCount += span;
       }
       if (currentRow.length > 0) rows.push(currentRow);
-      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: (0, import_ui_utils41.cn)("w-full", className), ...props, children: [
+      const labelColumnWidth = column === 1 ? "34%" : `${Math.max(12, 100 / (column * 2))}%`;
+      return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
         title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mb-3 text-base font-semibold text-text-primary", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("table", { className: "w-full border-collapse border border-border-base", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            "td",
-            {
-              className: (0, import_ui_utils41.cn)(
-                "border border-border-base bg-surface-2 font-medium text-text-secondary",
-                SIZE_LABEL_CLASSES[size]
-              ),
-              style: { width: `${1 / (column * 2) * 100}%` },
-              children: cell.label
-            },
-            `label-${cellIdx}`
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
-            "td",
-            {
-              className: (0, import_ui_utils41.cn)(
-                "border border-border-base text-text-primary",
-                SIZE_VALUE_CLASSES[size]
-              ),
-              colSpan: cell.span > 1 ? cell.span * 2 - 1 : 1,
-              children: cell.value
-            },
-            `value-${cellIdx}`
-          )
-        ] })) }, rowIdx)) }) })
+        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "overflow-hidden rounded-lg border border-border-base bg-surface-1", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("table", { className: "w-full table-fixed border-separate border-spacing-0", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("tr", { children: row.map((cell, cellIdx) => {
+          const hasRowDivider = rowIdx < rows.length - 1;
+          return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_react43.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "td",
+              {
+                className: cn(
+                  "border-r border-border-base bg-surface-2/80 font-medium text-text-secondary",
+                  hasRowDivider && "border-b",
+                  SIZE_LABEL_CLASSES[size]
+                ),
+                style: { width: labelColumnWidth },
+                children: cell.label
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+              "td",
+              {
+                className: cn(
+                  "break-words font-medium text-text-primary",
+                  hasRowDivider && "border-b border-border-base",
+                  SIZE_VALUE_CLASSES[size]
+                ),
+                colSpan: cell.span > 1 ? cell.span * 2 - 1 : 1,
+                children: cell.value
+              }
+            )
+          ] }, `${rowIdx}-${cellIdx}`);
+        }) }, rowIdx)) }) }) })
       ] });
     }
     const GRID_COLS = {
@@ -3283,14 +3721,14 @@ var Descriptions = (0, import_react42.forwardRef)(
       3: "grid-cols-3",
       4: "grid-cols-4"
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: (0, import_ui_utils41.cn)("w-full", className), ...props, children: [
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { ref, className: cn("w-full", className), ...props, children: [
       title && /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "mb-3 text-base font-semibold text-text-primary", children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: (0, import_ui_utils41.cn)("grid gap-x-6 gap-y-4", GRID_COLS[column]), children: items.map((item, idx) => {
+      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: cn("grid gap-x-6 gap-y-4", GRID_COLS[column]), children: items.map((item, idx) => {
         const span = item.props.span ?? 1;
         const colSpanClass = span === 2 ? "col-span-2" : span === 3 ? "col-span-3" : span === 4 ? "col-span-4" : "";
-        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: (0, import_ui_utils41.cn)("flex flex-col gap-0.5", colSpanClass, item.props.className), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: (0, import_ui_utils41.cn)("font-medium text-text-secondary", size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-xs"), children: item.props.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: (0, import_ui_utils41.cn)("text-text-primary", size === "sm" ? "text-sm" : size === "lg" ? "text-base" : "text-sm"), children: item.props.children })
+        return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cn("flex flex-col gap-0.5", colSpanClass, item.props.className), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("font-medium text-text-secondary", size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-xs"), children: item.props.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: cn("text-text-primary", size === "sm" ? "text-sm" : size === "lg" ? "text-base" : "text-sm"), children: item.props.children })
         ] }, idx);
       }) })
     ] });
@@ -3299,9 +3737,8 @@ var Descriptions = (0, import_react42.forwardRef)(
 Descriptions.displayName = "Descriptions";
 
 // src/components/statistic.tsx
-var import_react43 = require("react");
-var import_lucide_react17 = require("lucide-react");
-var import_ui_utils42 = require("@ug666/ui-utils");
+var import_react44 = require("react");
+var import_lucide_react19 = require("lucide-react");
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var SIZE_TITLE_CLASSES = {
   sm: "text-xs",
@@ -3335,20 +3772,20 @@ function formatValue(value, precision) {
     maximumFractionDigits: precision ?? 0
   }).format(value);
 }
-var Statistic = (0, import_react43.forwardRef)(
+var Statistic = (0, import_react44.forwardRef)(
   ({ title, value, precision, prefix, suffix, trend, change, size = "default", className, ...props }, ref) => {
-    const TrendIcon = trend === "up" ? import_lucide_react17.TrendingUp : trend === "down" ? import_lucide_react17.TrendingDown : trend === "flat" ? import_lucide_react17.Minus : null;
+    const TrendIcon = trend === "up" ? import_lucide_react19.TrendingUp : trend === "down" ? import_lucide_react19.TrendingDown : trend === "flat" ? import_lucide_react19.Minus : null;
     const iconSize = size === "sm" ? 14 : size === "lg" ? 18 : 16;
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref, className: (0, import_ui_utils42.cn)("flex flex-col gap-1", className), ...props, children: [
-      title && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_ui_utils42.cn)("font-medium text-text-secondary", SIZE_TITLE_CLASSES[size]), children: title }),
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { ref, className: cn("flex flex-col gap-1", className), ...props, children: [
+      title && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cn("font-medium text-text-secondary", SIZE_TITLE_CLASSES[size]), children: title }),
       /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-baseline gap-1", children: [
-        prefix && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_ui_utils42.cn)("text-text-primary", SIZE_SUFFIX_CLASSES[size]), children: prefix }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_ui_utils42.cn)("font-bold tabular-nums text-text-primary", SIZE_VALUE_CLASSES2[size]), children: formatValue(value, precision) }),
-        suffix && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_ui_utils42.cn)("text-text-secondary", SIZE_SUFFIX_CLASSES[size]), children: suffix })
+        prefix && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cn("text-text-primary", SIZE_SUFFIX_CLASSES[size]), children: prefix }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cn("font-bold tabular-nums text-text-primary", SIZE_VALUE_CLASSES2[size]), children: formatValue(value, precision) }),
+        suffix && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cn("text-text-secondary", SIZE_SUFFIX_CLASSES[size]), children: suffix })
       ] }),
       (trend || change) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1", children: [
         TrendIcon && trend && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(TrendIcon, { size: iconSize, className: TREND_ICON_COLOR[trend] }),
-        change && trend && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: (0, import_ui_utils42.cn)("text-xs font-medium", TREND_TEXT_COLOR[trend]), children: change })
+        change && trend && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cn("text-xs font-medium", TREND_TEXT_COLOR[trend]), children: change })
       ] })
     ] });
   }
@@ -3358,29 +3795,185 @@ Statistic.displayName = "Statistic";
 // src/theme.ts
 var theme = {
   colors: {
-    primary: { DEFAULT: "#6366f1", hover: "#4f46e5", light: "#eef2ff" },
-    secondary: { DEFAULT: "#64748b", hover: "#475569", light: "#f1f5f9" },
-    destructive: { DEFAULT: "#ef4444", hover: "#dc2626", light: "#fef2f2" },
-    success: { DEFAULT: "#22c55e", hover: "#16a34a", light: "#f0fdf4" },
-    warning: { DEFAULT: "#f59e0b", hover: "#d97706", light: "#fffbeb" },
-    background: "#ffffff",
-    foreground: "#0f172a",
-    muted: "#f1f5f9",
-    border: "#e2e8f0",
-    ring: "#6366f1"
+    primary: {
+      DEFAULT: "hsl(var(--primary))",
+      hover: "hsl(var(--primary-hover))",
+      active: "hsl(var(--primary-active))",
+      foreground: "hsl(var(--primary-fg))",
+      soft: "hsl(var(--primary-soft) / 0.12)",
+      softForeground: "hsl(var(--primary-soft-fg))"
+    },
+    success: {
+      DEFAULT: "hsl(var(--success))",
+      hover: "hsl(var(--success-hover))",
+      foreground: "hsl(var(--success-fg))",
+      soft: "hsl(var(--success-soft) / 0.12)",
+      softForeground: "hsl(var(--success-soft-fg))"
+    },
+    warning: {
+      DEFAULT: "hsl(var(--warning))",
+      hover: "hsl(var(--warning-hover))",
+      foreground: "hsl(var(--warning-fg))",
+      soft: "hsl(var(--warning-soft) / 0.12)",
+      softForeground: "hsl(var(--warning-soft-fg))"
+    },
+    danger: {
+      DEFAULT: "hsl(var(--danger))",
+      hover: "hsl(var(--danger-hover))",
+      foreground: "hsl(var(--danger-fg))",
+      soft: "hsl(var(--danger-soft) / 0.12)",
+      softForeground: "hsl(var(--danger-soft-fg))"
+    },
+    info: {
+      DEFAULT: "hsl(var(--info))",
+      hover: "hsl(var(--info-hover))",
+      foreground: "hsl(var(--info-fg))",
+      soft: "hsl(var(--info-soft) / 0.12)",
+      softForeground: "hsl(var(--info-soft-fg))"
+    },
+    surface: {
+      0: "hsl(var(--surface-0))",
+      1: "hsl(var(--surface-1))",
+      2: "hsl(var(--surface-2))",
+      3: "hsl(var(--surface-3))"
+    },
+    text: {
+      primary: "hsl(var(--text-primary))",
+      secondary: "hsl(var(--text-secondary))",
+      tertiary: "hsl(var(--text-tertiary))",
+      inverted: "hsl(var(--text-inverted))"
+    },
+    border: {
+      strong: "hsl(var(--border-strong))",
+      base: "hsl(var(--border-base))",
+      subtle: "hsl(var(--border-subtle))"
+    },
+    ring: "hsl(var(--ring))",
+    overlay: "hsl(var(--overlay) / var(--overlay-alpha))"
   },
-  radius: { sm: "0.375rem", md: "0.5rem", lg: "0.75rem", full: "9999px" },
-  fontFamily: { sans: "system-ui, -apple-system, sans-serif", mono: "ui-monospace, monospace" }
+  radius: { sm: "var(--radius-sm)", md: "var(--radius-md)", lg: "var(--radius-lg)", xl: "var(--radius-xl)", full: "9999px" },
+  fontFamily: { sans: "var(--font-sans)", mono: "var(--font-mono)" }
 };
 
-// src/index.ts
-var import_ui_utils43 = require("@ug666/ui-utils");
+// src/component-layers.ts
+var reactComponentLayers = [
+  {
+    id: "primitives",
+    label: "\u57FA\u7840\u7EC4\u4EF6",
+    description: "\u6700\u5C0F\u53EF\u590D\u7528\u89C6\u89C9\u5355\u5143\uFF0C\u8D1F\u8D23\u6309\u94AE\u3001\u5BB9\u5668\u3001\u6807\u7B7E\u3001\u5206\u9694\u548C\u52A0\u8F7D\u57FA\u7840\u72B6\u6001\u3002",
+    components: [
+      { name: "UGButton", route: "/react/components/button" },
+      { name: "UGInput", route: "/react/components/input" },
+      { name: "UGLabel", route: "/react/components/label" },
+      { name: "UGCard", route: "/react/components/card" },
+      { name: "UGBadge", route: "/react/components/badge" },
+      { name: "UGTag", route: "/react/components/tag" },
+      { name: "UGSeparator", route: "/react/components/separator" },
+      { name: "UGSpinner", route: "/react/components/spinner" }
+    ]
+  },
+  {
+    id: "forms",
+    label: "\u8868\u5355\u8F93\u5165",
+    description: "\u6536\u96C6\u3001\u6821\u9A8C\u548C\u7F16\u8F91\u7528\u6237\u8F93\u5165\uFF0C\u8981\u6C42\u6807\u7B7E\u3001\u5E2E\u52A9\u6587\u672C\u3001\u9519\u8BEF\u72B6\u6001\u7A33\u5B9A\u5BF9\u9F50\u3002",
+    components: [
+      { name: "UGTextarea", route: "/react/components/textarea" },
+      { name: "UGSelect", route: "/react/components/select" },
+      { name: "UGCheckbox", route: "/react/components/checkbox" },
+      { name: "UGRadio", route: "/react/components/radio" },
+      { name: "UGSwitch", route: "/react/components/switch" },
+      { name: "UGSlider", route: "/react/components/slider" },
+      { name: "UGNumberInput", route: "/react/components/number-input" },
+      { name: "UGOTPInput", route: "/react/components/otp-input" },
+      { name: "UGForm", route: "/react/components/form" }
+    ]
+  },
+  {
+    id: "navigation",
+    label: "\u5BFC\u822A\u6D41\u7A0B",
+    description: "\u9875\u9762\u5B9A\u4F4D\u3001\u533A\u57DF\u5207\u6362\u3001\u5206\u9875\u548C\u6D41\u7A0B\u8868\u8FBE\uFF0C\u8981\u6C42\u9009\u4E2D\u6001\u660E\u786E\u4E14\u79FB\u52A8\u7AEF\u4E0D\u6EA2\u51FA\u3002",
+    components: [
+      { name: "UGTabs", route: "/react/components/tabs" },
+      { name: "UGBreadcrumb", route: "/react/components/breadcrumb" },
+      { name: "UGPagination", route: "/react/components/pagination" },
+      { name: "UGNavigationMenu", route: "/react/components/navigation-menu" },
+      { name: "UGSidebar", route: "/react/components/sidebar" },
+      { name: "UGSteps", route: "/react/components/steps" }
+    ]
+  },
+  {
+    id: "overlays",
+    label: "\u6D6E\u5C42\u5F39\u5C42",
+    description: "\u4E34\u65F6\u627F\u8F7D\u64CD\u4F5C\u548C\u4E0A\u4E0B\u6587\u4FE1\u606F\uFF0C\u8981\u6C42\u5B9A\u4F4D\u3001\u5173\u95ED\u3001\u7126\u70B9\u548C\u906E\u7F69\u884C\u4E3A\u53EF\u9760\u3002",
+    components: [
+      { name: "UGModal", route: "/react/components/modal" },
+      { name: "UGDialog", route: "/react/components/dialog" },
+      { name: "UGDrawer", route: "/react/components/drawer" },
+      { name: "UGSheet", route: "/react/components/sheet" },
+      { name: "UGDropdownMenu", route: "/react/components/dropdown" },
+      { name: "UGContextMenu", route: "/react/components/context-menu" },
+      { name: "UGPopover", route: "/react/components/popover" },
+      { name: "UGTooltip", route: "/react/components/tooltip" }
+    ]
+  },
+  {
+    id: "feedback",
+    label: "\u53CD\u9988\u72B6\u6001",
+    description: "\u8868\u8FBE\u6210\u529F\u3001\u8B66\u544A\u3001\u9519\u8BEF\u3001\u7A7A\u72B6\u6001\u548C\u52A0\u8F7D\u8FC7\u7A0B\uFF0C\u8981\u6C42\u8BED\u4E49\u6587\u6848\u548C\u89C6\u89C9\u72B6\u6001\u4E00\u81F4\u3002",
+    components: [
+      { name: "UGAlert", route: "/react/components/alert" },
+      { name: "UGToaster", route: "/react/components/toast" },
+      { name: "UGProgress", route: "/react/components/progress" },
+      { name: "UGSkeleton", route: "/react/components/skeleton" },
+      { name: "UGEmptyState", route: "/react/components/empty-state" }
+    ]
+  },
+  {
+    id: "data",
+    label: "\u6570\u636E\u5C55\u793A",
+    description: "\u5C55\u793A\u5217\u8868\u3001\u5BF9\u8C61\u8BE6\u60C5\u3001\u5934\u50CF\u3001\u6307\u6807\u548C\u6298\u53E0\u4FE1\u606F\uFF0C\u8981\u6C42\u5BC6\u5EA6\u6E05\u6670\u4E14\u6587\u672C\u4E0D\u6324\u51FA\u3002",
+    components: [
+      { name: "UGTable", route: "/react/components/table" },
+      { name: "UGDescriptions", route: "/react/components/descriptions" },
+      { name: "UGStatistic", route: "/react/components/statistic" },
+      { name: "UGAvatar", route: "/react/components/avatar" },
+      { name: "UGAvatarGroup", route: "/react/components/avatar-group" },
+      { name: "UGAccordion", route: "/react/components/accordion" }
+    ]
+  },
+  {
+    id: "patterns",
+    label: "\u6846\u67B6\u6A21\u5F0F",
+    description: "\u540E\u53F0\u3001\u5DE5\u5177\u578B\u548C\u8DE8\u4E1A\u52A1\u901A\u7528\u6A21\u5F0F\uFF0C\u901A\u8FC7\u5B50\u5165\u53E3 @ug666/ui-react/patterns \u4F7F\u7528\u3002",
+    components: [
+      { name: "UGAdminShell", route: "/react/patterns#adminshell" },
+      { name: "UGPageHeader", route: "/react/patterns#pageheader" },
+      { name: "UGCopyField", route: "/react/patterns#copyfield" },
+      { name: "UGConfirmDialog", route: "/react/patterns#confirmdialog" }
+    ]
+  },
+  {
+    id: "blocks",
+    label: "\u5C55\u793A\u533A\u5757",
+    description: "\u5C55\u793A\u9875\u3001\u4EA7\u54C1\u9875\u548C\u4ECB\u7ECD\u9875\u533A\u5757\uFF0C\u901A\u8FC7\u5B50\u5165\u53E3 @ug666/ui-react/blocks \u4F7F\u7528\u3002",
+    components: [
+      { name: "UGLandingHero", route: "/react/blocks#landinghero" },
+      { name: "UGFeatureGrid", route: "/react/blocks#featuregrid" }
+    ]
+  },
+  {
+    id: "labs",
+    label: "\u5B9E\u9A8C\u7EC4\u4EF6",
+    description: "\u5C1A\u672A\u7A33\u5B9A\u627F\u8BFA\u7684\u5B9E\u9A8C\u7EC4\u4EF6\uFF0C\u901A\u8FC7\u5B50\u5165\u53E3 @ug666/ui-react/labs \u4F7F\u7528\u3002",
+    components: []
+  }
+];
 
 // src/hooks/use-debounce.ts
-var import_react44 = require("react");
+var import_react45 = require("react");
 function useDebounce(value, delay = 300) {
-  const [debounced, setDebounced] = (0, import_react44.useState)(value);
-  (0, import_react44.useEffect)(() => {
+  const [debounced, setDebounced] = (0, import_react45.useState)(value);
+  (0, import_react45.useEffect)(() => {
     const timer = setTimeout(() => setDebounced(value), delay);
     return () => clearTimeout(timer);
   }, [value, delay]);
@@ -3388,9 +3981,9 @@ function useDebounce(value, delay = 300) {
 }
 
 // src/hooks/use-local-storage.ts
-var import_react45 = require("react");
+var import_react46 = require("react");
 function useLocalStorage(key, initialValue) {
-  const [storedValue, setStoredValue] = (0, import_react45.useState)(() => {
+  const [storedValue, setStoredValue] = (0, import_react46.useState)(() => {
     if (typeof window === "undefined") return initialValue;
     try {
       const item = window.localStorage.getItem(key);
@@ -3399,7 +3992,7 @@ function useLocalStorage(key, initialValue) {
       return initialValue;
     }
   });
-  const setValue = (0, import_react45.useCallback)((value) => {
+  const setValue = (0, import_react46.useCallback)((value) => {
     setStoredValue((prev) => {
       const next = value instanceof Function ? value(prev) : value;
       if (typeof window !== "undefined") {
@@ -3408,7 +4001,7 @@ function useLocalStorage(key, initialValue) {
       return next;
     });
   }, [key]);
-  const removeValue = (0, import_react45.useCallback)(() => {
+  const removeValue = (0, import_react46.useCallback)(() => {
     setStoredValue(initialValue);
     if (typeof window !== "undefined") {
       window.localStorage.removeItem(key);
@@ -3418,13 +4011,13 @@ function useLocalStorage(key, initialValue) {
 }
 
 // src/hooks/use-media-query.ts
-var import_react46 = require("react");
+var import_react47 = require("react");
 function useMediaQuery(query) {
-  const [matches, setMatches] = (0, import_react46.useState)(() => {
+  const [matches, setMatches] = (0, import_react47.useState)(() => {
     if (typeof window === "undefined") return false;
     return window.matchMedia(query).matches;
   });
-  (0, import_react46.useEffect)(() => {
+  (0, import_react47.useEffect)(() => {
     if (typeof window === "undefined") return;
     const mediaQueryList = window.matchMedia(query);
     setMatches(mediaQueryList.matches);
@@ -3438,9 +4031,9 @@ function useMediaQuery(query) {
 }
 
 // src/hooks/use-click-outside.ts
-var import_react47 = require("react");
+var import_react48 = require("react");
 function useClickOutside(ref, handler) {
-  (0, import_react47.useEffect)(() => {
+  (0, import_react48.useEffect)(() => {
     const handleMouseDown = (event) => {
       if (ref.current && !ref.current.contains(event.target)) {
         handler();
@@ -3461,18 +4054,18 @@ function useClickOutside(ref, handler) {
 }
 
 // src/hooks/use-copy-to-clipboard.ts
-var import_react48 = require("react");
+var import_react49 = require("react");
 function useCopyToClipboard() {
-  const [copied, setCopied] = (0, import_react48.useState)(false);
-  const timerRef = (0, import_react48.useRef)(null);
-  (0, import_react48.useEffect)(() => {
+  const [copied, setCopied] = (0, import_react49.useState)(false);
+  const timerRef = (0, import_react49.useRef)(null);
+  (0, import_react49.useEffect)(() => {
     return () => {
       if (timerRef.current) {
         clearTimeout(timerRef.current);
       }
     };
   }, []);
-  const copy = (0, import_react48.useCallback)(async (text) => {
+  const copy = (0, import_react49.useCallback)(async (text) => {
     if (typeof navigator === "undefined" || !navigator.clipboard) {
       console.error("\u526A\u8D34\u677F API \u4E0D\u53EF\u7528");
       return;
@@ -3492,42 +4085,42 @@ function useCopyToClipboard() {
 }
 
 // src/hooks/use-toggle.ts
-var import_react49 = require("react");
+var import_react50 = require("react");
 function useToggle(initial = false) {
-  const [value, setValue] = (0, import_react49.useState)(initial);
-  const toggle = (0, import_react49.useCallback)(() => {
+  const [value, setValue] = (0, import_react50.useState)(initial);
+  const toggle = (0, import_react50.useCallback)(() => {
     setValue((prev) => !prev);
   }, []);
   return [value, toggle, setValue];
 }
 
 // src/hooks/use-pagination.ts
-var import_react50 = require("react");
+var import_react51 = require("react");
 function usePagination({
   total,
   pageSize = 10,
   initialPage = 1
 }) {
-  const totalPages = (0, import_react50.useMemo)(
+  const totalPages = (0, import_react51.useMemo)(
     () => Math.max(1, Math.ceil(total / pageSize)),
     [total, pageSize]
   );
-  const [page, setPageState] = (0, import_react50.useState)(
+  const [page, setPageState] = (0, import_react51.useState)(
     () => Math.min(Math.max(1, initialPage), Math.max(1, Math.ceil(total / pageSize)))
   );
-  (0, import_react50.useEffect)(() => {
+  (0, import_react51.useEffect)(() => {
     setPageState((prev) => Math.min(prev, totalPages));
   }, [totalPages]);
-  const setPage = (0, import_react50.useCallback)(
+  const setPage = (0, import_react51.useCallback)(
     (p) => {
       setPageState(Math.min(Math.max(1, p), totalPages));
     },
     [totalPages]
   );
-  const nextPage = (0, import_react50.useCallback)(() => {
+  const nextPage = (0, import_react51.useCallback)(() => {
     setPageState((prev) => Math.min(prev + 1, totalPages));
   }, [totalPages]);
-  const prevPage = (0, import_react50.useCallback)(() => {
+  const prevPage = (0, import_react51.useCallback)(() => {
     setPageState((prev) => Math.max(prev - 1, 1));
   }, []);
   const startIndex = (page - 1) * pageSize;
@@ -3546,17 +4139,17 @@ function usePagination({
 }
 
 // src/hooks/use-form.ts
-var import_react51 = require("react");
+var import_react52 = require("react");
 function useForm(initialValues) {
-  const [values, setValues] = (0, import_react51.useState)(initialValues);
-  const [errors, setErrors] = (0, import_react51.useState)({});
-  const isDirty = (0, import_react51.useMemo)(
+  const [values, setValues] = (0, import_react52.useState)(initialValues);
+  const [errors, setErrors] = (0, import_react52.useState)({});
+  const isDirty = (0, import_react52.useMemo)(
     () => Object.keys(initialValues).some(
       (key) => values[key] !== initialValues[key]
     ),
     [values, initialValues]
   );
-  const handleChange = (0, import_react51.useCallback)((name, value) => {
+  const handleChange = (0, import_react52.useCallback)((name, value) => {
     setValues((prev) => ({ ...prev, [name]: value }));
     setErrors((prev) => {
       if (!prev[name]) return prev;
@@ -3565,13 +4158,13 @@ function useForm(initialValues) {
       return next;
     });
   }, []);
-  const setError = (0, import_react51.useCallback)((name, message) => {
+  const setError = (0, import_react52.useCallback)((name, message) => {
     setErrors((prev) => ({ ...prev, [name]: message }));
   }, []);
-  const clearErrors = (0, import_react51.useCallback)(() => {
+  const clearErrors = (0, import_react52.useCallback)(() => {
     setErrors({});
   }, []);
-  const reset = (0, import_react51.useCallback)(() => {
+  const reset = (0, import_react52.useCallback)(() => {
     setValues(initialValues);
     setErrors({});
   }, [initialValues]);
@@ -3579,23 +4172,23 @@ function useForm(initialValues) {
 }
 
 // src/hooks/use-mounted.ts
-var import_react52 = require("react");
+var import_react53 = require("react");
 function useMounted() {
-  const [mounted, setMounted] = (0, import_react52.useState)(false);
-  (0, import_react52.useEffect)(() => {
+  const [mounted, setMounted] = (0, import_react53.useState)(false);
+  (0, import_react53.useEffect)(() => {
     setMounted(true);
   }, []);
   return mounted;
 }
 
 // src/hooks/use-interval.ts
-var import_react53 = require("react");
+var import_react54 = require("react");
 function useInterval(callback, delay) {
-  const savedCallback = (0, import_react53.useRef)(callback);
-  (0, import_react53.useEffect)(() => {
+  const savedCallback = (0, import_react54.useRef)(callback);
+  (0, import_react54.useEffect)(() => {
     savedCallback.current = callback;
   }, [callback]);
-  (0, import_react53.useEffect)(() => {
+  (0, import_react54.useEffect)(() => {
     if (delay === null) return;
     const id = setInterval(() => savedCallback.current(), delay);
     return () => clearInterval(id);
@@ -3603,13 +4196,13 @@ function useInterval(callback, delay) {
 }
 
 // src/hooks/use-timeout.ts
-var import_react54 = require("react");
+var import_react55 = require("react");
 function useTimeout(callback, delay) {
-  const savedCallback = (0, import_react54.useRef)(callback);
-  (0, import_react54.useEffect)(() => {
+  const savedCallback = (0, import_react55.useRef)(callback);
+  (0, import_react55.useEffect)(() => {
     savedCallback.current = callback;
   }, [callback]);
-  (0, import_react54.useEffect)(() => {
+  (0, import_react55.useEffect)(() => {
     if (delay === null) return;
     const id = setTimeout(() => savedCallback.current(), delay);
     return () => clearTimeout(id);
@@ -3617,7 +4210,7 @@ function useTimeout(callback, delay) {
 }
 
 // src/hooks/use-hotkeys.ts
-var import_react55 = require("react");
+var import_react56 = require("react");
 function parseHotkey(keys) {
   const parts = keys.toLowerCase().split("+").map((s) => s.trim());
   const ctrl = parts.includes("ctrl");
@@ -3631,11 +4224,11 @@ function parseHotkey(keys) {
 }
 function useHotkeys(keys, callback, options = {}) {
   const { preventDefault = false, target = null } = options;
-  const savedCallback = (0, import_react55.useRef)(callback);
-  (0, import_react55.useEffect)(() => {
+  const savedCallback = (0, import_react56.useRef)(callback);
+  (0, import_react56.useEffect)(() => {
     savedCallback.current = callback;
   }, [callback]);
-  (0, import_react55.useEffect)(() => {
+  (0, import_react56.useEffect)(() => {
     const parsed = parseHotkey(keys);
     const eventTarget = target ?? window;
     function handler(event) {
@@ -3654,13 +4247,13 @@ function useHotkeys(keys, callback, options = {}) {
 }
 
 // src/hooks/use-event-listener.ts
-var import_react56 = require("react");
+var import_react57 = require("react");
 function useEventListener(event, handler, target) {
-  const savedHandler = (0, import_react56.useRef)(handler);
-  (0, import_react56.useEffect)(() => {
+  const savedHandler = (0, import_react57.useRef)(handler);
+  (0, import_react57.useEffect)(() => {
     savedHandler.current = handler;
   }, [handler]);
-  (0, import_react56.useEffect)(() => {
+  (0, import_react57.useEffect)(() => {
     if (target === null) return;
     const eventTarget = target ?? window;
     function listener(event2) {
@@ -3774,14 +4367,121 @@ function useEventListener(event, handler, target) {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  UGAccordion,
+  UGAccordionContent,
+  UGAccordionItem,
+  UGAccordionTrigger,
+  UGAlert,
+  UGAlertDescription,
+  UGAlertTitle,
+  UGAvatar,
+  UGAvatarFallback,
+  UGAvatarGroup,
+  UGAvatarImage,
+  UGBadge,
+  UGBreadcrumb,
+  UGBreadcrumbItem,
+  UGBreadcrumbLink,
+  UGBreadcrumbSeparator,
+  UGButton,
+  UGCard,
+  UGCardContent,
+  UGCardDescription,
+  UGCardFooter,
+  UGCardHeader,
+  UGCardTitle,
+  UGCheckbox,
+  UGContextMenu,
+  UGContextMenuContent,
+  UGContextMenuItem,
+  UGContextMenuSeparator,
+  UGContextMenuTrigger,
+  UGDescriptions,
+  UGDescriptionsItem,
+  UGDialog,
+  UGDrawer,
+  UGDrawerClose,
+  UGDrawerContent,
+  UGDrawerDescription,
+  UGDrawerFooter,
+  UGDrawerHeader,
+  UGDrawerTitle,
+  UGDropdown,
+  UGDropdownContent,
+  UGDropdownItem,
+  UGDropdownMenu,
+  UGDropdownSeparator,
+  UGDropdownTrigger,
+  UGEmptyState,
+  UGForm,
+  UGFormControl,
+  UGFormDescription,
+  UGFormField,
+  UGFormItem,
+  UGFormLabel,
+  UGFormMessage,
+  UGInput,
+  UGLabel,
+  UGModal,
+  UGModalCloseButton,
+  UGModalContent,
+  UGModalFooter,
+  UGModalHeader,
+  UGModalTitle,
+  UGNavigationMenu,
+  UGNavigationMenuContent,
+  UGNavigationMenuItem,
+  UGNavigationMenuLink,
+  UGNavigationMenuTrigger,
+  UGNumberInput,
+  UGOTPInput,
+  UGPagination,
+  UGPopover,
+  UGPopoverContent,
+  UGPopoverTrigger,
+  UGProgress,
+  UGRadio,
+  UGRadioGroup,
+  UGSelect,
+  UGSeparator,
+  UGSheet,
+  UGSidebar,
+  UGSkeleton,
+  UGSlider,
+  UGSpinner,
+  UGStatistic,
+  UGSteps,
+  UGSwitch,
+  UGTable,
+  UGTableBody,
+  UGTableCell,
+  UGTableHead,
+  UGTableHeader,
+  UGTableRow,
+  UGTabs,
+  UGTabsContent,
+  UGTabsList,
+  UGTabsTrigger,
+  UGTag,
+  UGTextarea,
+  UGToaster,
+  UGTooltip,
+  UGTooltipContent,
+  UGTooltipTrigger,
   badgeVariants,
   buttonVariants,
   checkboxVariants,
   cn,
   numberInputVariants,
+  reactComponentLayers,
   tagVariants,
   theme,
   toast,
+  ugBadgeVariants,
+  ugButtonVariants,
+  ugCheckboxVariants,
+  ugNumberInputVariants,
+  ugTagVariants,
   useClickOutside,
   useCopyToClipboard,
   useDebounce,