@ug666/ui-react 0.1.0 → 0.2.0

package/dist/index.js

@@ -1,3 +1,89 @@
+"use client";
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger,
+  Alert,
+  AlertDescription,
+  AlertTitle,
+  Avatar,
+  AvatarFallback,
+  AvatarGroup,
+  AvatarImage,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbSeparator,
+  Checkbox,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuTrigger,
+  Descriptions,
+  DescriptionsItem,
+  Dialog,
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DropdownContent,
+  DropdownItem,
+  DropdownMenu,
+  DropdownSeparator,
+  DropdownTrigger,
+  EmptyState,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  NavigationMenu,
+  NavigationMenuContent,
+  NavigationMenuItem,
+  NavigationMenuLink,
+  NavigationMenuTrigger,
+  NumberInput,
+  OTPInput,
+  Pagination,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  Progress,
+  Radio,
+  RadioGroup,
+  Select,
+  Sheet,
+  Skeleton,
+  Slider,
+  Statistic,
+  Steps,
+  Switch,
+  Table,
+  TableBody,
+  TableCell,
+  TableHead,
+  TableHeader,
+  TableRow,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  Toaster,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  checkboxVariants,
+  numberInputVariants,
+  toast
+} from "./chunk-73WQAE3E.js";
 import {
   useClickOutside,
   useCopyToClipboard,
@@ -13,3250 +99,213 @@ import {
   useTimeout,
   useToggle
 } from "./chunk-MGXIF756.js";
+import {
+  Modal,
+  ModalCloseButton,
+  ModalContent,
+  ModalFooter,
+  ModalHeader,
+  ModalTitle,
+  Sidebar
+} from "./chunk-2IVRUJKO.js";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Separator,
+  Spinner,
+  Tag,
+  badgeVariants,
+  tagVariants
+} from "./chunk-S45GP6IB.js";
+import {
+  Button,
+  buttonVariants,
+  cn
+} from "./chunk-RUDEZA5Q.js";
 
-// src/components/button.tsx
-import { forwardRef } from "react";
-import { Loader2 } from "lucide-react";
-import { cva } from "class-variance-authority";
-import { cn } from "@ug666/ui-utils";
-import { jsx, jsxs } from "react/jsx-runtime";
-var buttonVariants = 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",
-  {
-    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",
-        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",
-        icon: "h-9 w-9"
-      }
+// src/theme.ts
+var theme = {
+  colors: {
+    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))"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Button = forwardRef(
-  ({ className, variant, size, loading = false, disabled, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        ref,
-        className: cn(buttonVariants({ variant, size }), className),
-        disabled: disabled || loading,
-        ...props,
-        children: [
-          loading && /* @__PURE__ */ jsx(Loader2, { className: "animate-spin", size: 16 }),
-          children
-        ]
-      }
-    );
-  }
-);
-Button.displayName = "Button";
-
-// src/components/input.tsx
-import { forwardRef as forwardRef2, useId } from "react";
-import { cn as cn2 } from "@ug666/ui-utils";
-import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
-var Input = forwardRef2(
-  ({ className, label, error, helperText, id, ...props }, ref) => {
-    const generatedId = useId();
-    const inputId = id ?? generatedId;
-    return /* @__PURE__ */ jsxs2("div", { className: "flex flex-col gap-1", children: [
-      label && /* @__PURE__ */ jsx2(
-        "label",
-        {
-          htmlFor: inputId,
-          className: "text-sm font-medium text-text-primary",
-          children: label
-        }
-      ),
-      /* @__PURE__ */ jsx2(
-        "input",
-        {
-          ref,
-          id: inputId,
-          className: cn2(
-            "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",
-            error ? "border-danger focus-visible:ring-danger" : "border-border-strong focus-visible:ring-ring/30",
-            className
-          ),
-          ...props
-        }
-      ),
-      error && /* @__PURE__ */ jsx2("p", { className: "text-xs text-danger", children: error }),
-      !error && helperText && /* @__PURE__ */ jsx2("p", { className: "text-xs text-text-secondary", children: helperText })
-    ] });
-  }
-);
-Input.displayName = "Input";
-
-// src/components/label.tsx
-import { forwardRef as forwardRef3 } from "react";
-import { cn as cn3 } from "@ug666/ui-utils";
-import { jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
-var Label = forwardRef3(({ className, required, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsxs3(
-    "label",
-    {
-      ref,
-      className: cn3(
-        "leading-none text-sm font-medium text-text-primary peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
-        className
-      ),
-      ...props,
-      children: [
-        children,
-        required && /* @__PURE__ */ jsx3("span", { className: "ml-0.5 text-danger", "aria-hidden": "true", children: "*" })
-      ]
-    }
-  );
-});
-Label.displayName = "Label";
-
-// src/components/card.tsx
-import { forwardRef as forwardRef4 } from "react";
-import { cn as cn4 } from "@ug666/ui-utils";
-import { jsx as jsx4 } from "react/jsx-runtime";
-var Card = forwardRef4(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx4("div", { ref, className: cn4("rounded-lg border border-border-base bg-surface-1", className), ...props });
-});
-var CardHeader = forwardRef4(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx4("div", { ref, className: cn4("flex flex-col gap-1 px-5 py-4 border-b border-border-base", className), ...props });
-});
-var CardTitle = forwardRef4(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx4("h3", { ref, className: cn4("leading-none font-semibold tracking-tight text-text-primary", className), ...props });
-});
-var CardDescription = forwardRef4(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx4("p", { ref, className: cn4("text-sm text-text-secondary", className), ...props });
-});
-var CardContent = forwardRef4(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx4("div", { ref, className: cn4("px-5 py-4", className), ...props });
-});
-var CardFooter = forwardRef4(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx4("div", { ref, className: cn4("flex items-center px-5 py-4 border-t border-border-base", className), ...props });
-});
-Card.displayName = "Card";
-CardHeader.displayName = "CardHeader";
-CardTitle.displayName = "CardTitle";
-CardDescription.displayName = "CardDescription";
-CardContent.displayName = "CardContent";
-CardFooter.displayName = "CardFooter";
-
-// src/components/badge.tsx
-import { forwardRef as forwardRef5 } from "react";
-import { cva as cva2 } from "class-variance-authority";
-import { cn as cn5 } from "@ug666/ui-utils";
-import { jsx as jsx5 } from "react/jsx-runtime";
-var badgeVariants = cva2(
-  "inline-flex items-center rounded-md px-2.5 py-0.5 text-xs font-semibold 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"
-      }
+    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))"
     },
-    defaultVariants: {
-      variant: "default"
-    }
-  }
-);
-var Badge = forwardRef5(({ className, variant, ...props }, ref) => {
-  return /* @__PURE__ */ jsx5("span", { ref, className: cn5(badgeVariants({ variant }), className), ...props });
-});
-Badge.displayName = "Badge";
-
-// src/components/tag.tsx
-import { forwardRef as forwardRef6 } from "react";
-import { X } from "lucide-react";
-import { cva as cva3 } from "class-variance-authority";
-import { cn as cn6 } from "@ug666/ui-utils";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
-var tagVariants = cva3(
-  "inline-flex items-center gap-1 rounded font-medium 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"
-      },
-      size: {
-        sm: "px-1.5 py-0 text-xs",
-        default: "px-2 py-0.5 text-xs"
-      }
+    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))"
     },
-    defaultVariants: {
-      variant: "default",
-      size: "default"
-    }
-  }
-);
-var Tag = forwardRef6(
-  ({ variant, size, closable = false, disabled = false, color, onClose, className, children, style, ...props }, ref) => {
-    const customStyle = color ? { backgroundColor: color, color: "#fff", borderColor: color, ...style } : style ?? {};
-    function handleClose(event) {
-      event.stopPropagation();
-      if (!disabled) {
-        onClose?.(event);
-      }
-    }
-    return /* @__PURE__ */ jsxs4(
-      "span",
-      {
-        ref,
-        className: cn6(tagVariants({ variant, size }), disabled && "cursor-not-allowed opacity-50", className),
-        style: customStyle,
-        ...props,
-        children: [
-          children,
-          closable && /* @__PURE__ */ jsx6(
-            "button",
-            {
-              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",
-              "aria-label": "\u5173\u95ED\u6807\u7B7E",
-              children: /* @__PURE__ */ jsx6(X, { size: 10, strokeWidth: 2.5 })
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Tag.displayName = "Tag";
-
-// src/components/modal.tsx
-import { forwardRef as forwardRef7 } from "react";
-import { createPortal } from "react-dom";
-import { X as X2 } from "lucide-react";
-import { cn as cn7 } from "@ug666/ui-utils";
-
-// src/hooks/use-escape-key.ts
-import { useCallback, useEffect } from "react";
-function useEscapeKey(open, onEscape) {
-  const handleEscape = useCallback(
-    (e) => {
-      if (e.key === "Escape") onEscape();
+    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))"
     },
-    [onEscape]
-  );
-  useEffect(() => {
-    if (!open) return;
-    document.addEventListener("keydown", handleEscape);
-    document.body.style.overflow = "hidden";
-    return () => {
-      document.removeEventListener("keydown", handleEscape);
-      document.body.style.overflow = "";
-    };
-  }, [open, handleEscape]);
-}
-
-// src/components/modal.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
-var Modal = forwardRef7(({ open, onClose, children, className }, ref) => {
-  useEscapeKey(open, onClose);
-  if (!open) return null;
-  return createPortal(
-    /* @__PURE__ */ jsxs5(
-      "div",
-      {
-        ref,
-        className: cn7(
-          "fixed inset-0 z-50 flex items-center justify-center",
-          className
-        ),
-        role: "dialog",
-        "aria-modal": "true",
-        children: [
-          /* @__PURE__ */ jsx7(
-            "div",
-            {
-              className: "absolute inset-0 bg-overlay",
-              onClick: onClose,
-              "aria-hidden": "true"
-            }
-          ),
-          /* @__PURE__ */ jsx7("div", { className: "relative z-10", children })
-        ]
-      }
-    ),
-    document.body
-  );
-});
-var ModalContent = forwardRef7(({ className, maxWidth = "max-w-lg", children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx7("div", { ref, className: cn7("w-full rounded-lg bg-surface-1 shadow-lg", maxWidth, className), ...props, children });
-});
-var ModalHeader = forwardRef7(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx7("div", { ref, className: cn7("flex items-center justify-between border-b border-border-base px-6 py-4", className), ...props });
-});
-var ModalTitle = forwardRef7(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx7("h2", { ref, className: cn7("text-lg font-semibold text-text-primary", className), ...props });
-});
-var ModalFooter = forwardRef7(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx7("div", { ref, className: cn7("flex items-center justify-end gap-2 border-t border-border-base px-6 py-4", className), ...props });
-});
-var ModalCloseButton = forwardRef7(({ onClick, className, type = "button", ...props }, ref) => {
-  return /* @__PURE__ */ jsx7(
-    "button",
-    {
-      ref,
-      type,
-      onClick,
-      className: cn7(
-        "rounded-md p-1 text-text-tertiary transition-colors hover:bg-surface-3 hover:text-text-secondary",
-        className
-      ),
-      "aria-label": "\u5173\u95ED",
-      ...props,
-      children: /* @__PURE__ */ jsx7(X2, { size: 18 })
-    }
-  );
-});
-Modal.displayName = "Modal";
-ModalContent.displayName = "ModalContent";
-ModalHeader.displayName = "ModalHeader";
-ModalTitle.displayName = "ModalTitle";
-ModalFooter.displayName = "ModalFooter";
-ModalCloseButton.displayName = "ModalCloseButton";
-
-// src/components/dialog.tsx
-import { forwardRef as forwardRef8, useCallback as useCallback2, useEffect as useEffect2 } from "react";
-import { createPortal as createPortal2 } from "react-dom";
-import { cn as cn8 } from "@ug666/ui-utils";
-import { jsx as jsx8, jsxs as jsxs6 } from "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 = forwardRef8(
-  ({
-    open,
-    onOpenChange,
-    title,
-    description,
-    variant = "default",
-    cancelText = "\u53D6\u6D88",
-    confirmText = "\u786E\u8BA4",
-    onConfirm,
-    onCancel,
-    className
-  }, ref) => {
-    const handleClose = useCallback2(() => {
-      onOpenChange(false);
-    }, [onOpenChange]);
-    const handleCancel = useCallback2(() => {
-      onCancel?.();
-      handleClose();
-    }, [onCancel, handleClose]);
-    const handleConfirm = useCallback2(() => {
-      onConfirm?.();
-      handleClose();
-    }, [onConfirm, handleClose]);
-    const handleEscape = useCallback2(
-      (e) => {
-        if (e.key === "Escape") handleCancel();
-      },
-      [handleCancel]
-    );
-    useEffect2(() => {
-      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;
-    return createPortal2(
-      /* @__PURE__ */ jsxs6(
-        "div",
-        {
-          ref,
-          className: cn8(
-            "fixed inset-0 z-50 flex items-center justify-center p-4",
-            className
-          ),
-          role: "alertdialog",
-          "aria-modal": "true",
-          "aria-labelledby": "dialog-title",
-          "aria-describedby": description ? "dialog-description" : void 0,
-          children: [
-            /* @__PURE__ */ jsx8(
-              "div",
-              {
-                className: "absolute inset-0 bg-overlay",
-                onClick: handleCancel,
-                "aria-hidden": "true"
-              }
-            ),
-            /* @__PURE__ */ jsxs6("div", { className: "relative z-10 w-full max-w-sm rounded-lg bg-surface-1 shadow-lg", children: [
-              /* @__PURE__ */ jsxs6("div", { className: "px-6 pt-6 pb-4", children: [
-                /* @__PURE__ */ jsx8(
-                  "h2",
-                  {
-                    id: "dialog-title",
-                    className: "text-base font-bold text-text-primary",
-                    children: title
-                  }
-                ),
-                description && /* @__PURE__ */ jsx8(
-                  "p",
-                  {
-                    id: "dialog-description",
-                    className: "mt-2 text-sm text-text-secondary",
-                    children: description
-                  }
-                )
-              ] }),
-              /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-end gap-2 border-t border-border-subtle px-6 py-4", children: [
-                /* @__PURE__ */ jsx8(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: handleCancel,
-                    className: cn8(
-                      "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"
-                    ),
-                    children: cancelText
-                  }
-                ),
-                /* @__PURE__ */ jsx8(
-                  "button",
-                  {
-                    type: "button",
-                    onClick: handleConfirm,
-                    className: cn8(
-                      "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]
-                    ),
-                    children: confirmText
-                  }
-                )
-              ] })
-            ] })
-          ]
-        }
-      ),
-      document.body
-    );
-  }
-);
-Dialog.displayName = "Dialog";
-
-// src/components/drawer.tsx
-import { createContext, forwardRef as forwardRef9, useContext } from "react";
-import { createPortal as createPortal3 } from "react-dom";
-import { X as X3 } from "lucide-react";
-import { cn as cn9 } from "@ug666/ui-utils";
-import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
-var DrawerContext = createContext(null);
-function useDrawerContext() {
-  const ctx = useContext(DrawerContext);
-  if (!ctx) throw new Error("Drawer \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Drawer> \u5185\u4F7F\u7528");
-  return ctx;
-}
-var SIDE_CLASSES = {
-  right: "inset-y-0 right-0 h-full w-80 max-w-full translate-x-0",
-  left: "inset-y-0 left-0 h-full w-80 max-w-full translate-x-0",
-  top: "inset-x-0 top-0 w-full h-auto max-h-[80vh] translate-y-0",
-  bottom: "inset-x-0 bottom-0 w-full h-auto max-h-[80vh] translate-y-0"
-};
-var Drawer = ({ open, onOpenChange, side = "right", children }) => {
-  useEscapeKey(open, () => onOpenChange(false));
-  return /* @__PURE__ */ jsx9(DrawerContext.Provider, { value: { open, onOpenChange, side }, children });
-};
-Drawer.displayName = "Drawer";
-var DrawerContent = forwardRef9(({ className, children, ...props }, ref) => {
-  const { open, onOpenChange, side } = useDrawerContext();
-  if (!open) return null;
-  return createPortal3(
-    /* @__PURE__ */ jsxs7("div", { className: "fixed inset-0 z-50", role: "dialog", "aria-modal": "true", children: [
-      /* @__PURE__ */ jsx9(
-        "div",
-        {
-          className: "absolute inset-0 bg-overlay transition-opacity",
-          onClick: () => onOpenChange(false),
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsx9(
-        "div",
-        {
-          ref,
-          className: cn9(
-            "absolute flex flex-col bg-surface-1 shadow-xl transition-transform duration-300 ease-in-out",
-            SIDE_CLASSES[side],
-            className
-          ),
-          onClick: (e) => e.stopPropagation(),
-          ...props,
-          children
-        }
-      )
-    ] }),
-    document.body
-  );
-});
-DrawerContent.displayName = "DrawerContent";
-var DrawerHeader = forwardRef9(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx9(
-    "div",
-    {
-      ref,
-      className: cn9("flex flex-col gap-1.5 border-b border-border-base px-6 py-4", className),
-      ...props
-    }
-  );
-});
-DrawerHeader.displayName = "DrawerHeader";
-var DrawerTitle = forwardRef9(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx9("h2", { ref, className: cn9("text-lg font-semibold text-text-primary", className), ...props });
-});
-DrawerTitle.displayName = "DrawerTitle";
-var DrawerDescription = forwardRef9(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx9("p", { ref, className: cn9("text-sm text-text-secondary", className), ...props });
-});
-DrawerDescription.displayName = "DrawerDescription";
-var DrawerFooter = forwardRef9(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx9(
-    "div",
-    {
-      ref,
-      className: cn9("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 = forwardRef9(({ className, children, type = "button", ...props }, ref) => {
-  const { onOpenChange } = useDrawerContext();
-  return /* @__PURE__ */ jsx9(
-    "button",
-    {
-      ref,
-      type,
-      onClick: () => onOpenChange(false),
-      className: cn9(
-        "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
-      ),
-      ...props,
-      children: children ?? /* @__PURE__ */ jsx9(X3, { size: 18 })
-    }
-  );
-});
-DrawerClose.displayName = "DrawerClose";
-
-// src/components/table.tsx
-import { forwardRef as forwardRef10 } from "react";
-import { cn as cn10 } from "@ug666/ui-utils";
-import { jsx as jsx10 } from "react/jsx-runtime";
-var Table = forwardRef10(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx10("div", { className: "w-full overflow-auto", children: /* @__PURE__ */ jsx10(
-    "table",
-    {
-      ref,
-      className: cn10("w-full caption-bottom text-sm", className),
-      ...props
-    }
-  ) });
-});
-var TableHeader = forwardRef10(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx10("thead", { ref, className: cn10("[&_tr]:border-b border-border-base", className), ...props });
-});
-var TableBody = forwardRef10(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx10("tbody", { ref, className: cn10("[&_tr:last-child]:border-0", className), ...props });
-});
-var TableRow = forwardRef10(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx10("tr", { ref, className: cn10("border-b border-border-base transition-colors hover:bg-surface-2", className), ...props });
-});
-var TableHead = forwardRef10(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx10("th", { ref, className: cn10("h-10 px-4 text-left align-middle font-medium text-text-secondary [&:has([role=checkbox])]:pr-0", className), ...props });
-});
-var TableCell = forwardRef10(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx10("td", { ref, className: cn10("px-4 py-3 align-middle text-text-primary [&:has([role=checkbox])]:pr-0", className), ...props });
-});
-Table.displayName = "Table";
-TableHeader.displayName = "TableHeader";
-TableBody.displayName = "TableBody";
-TableRow.displayName = "TableRow";
-TableHead.displayName = "TableHead";
-TableCell.displayName = "TableCell";
-
-// src/components/toast.tsx
-import { forwardRef as forwardRef11, useCallback as useCallback3, useEffect as useEffect3, useRef, useState } from "react";
-import { createPortal as createPortal4 } from "react-dom";
-import { X as X4 } from "lucide-react";
-import { cn as cn11 } from "@ug666/ui-utils";
-import { jsx as jsx11, jsxs as jsxs8 } from "react/jsx-runtime";
-var listeners = /* @__PURE__ */ new Set();
-var toastItems = [];
-var toastTimers = /* @__PURE__ */ new Map();
-function notify() {
-  listeners.forEach((fn) => fn([...toastItems]));
-}
-function addToast(message, type) {
-  const id = Math.random().toString(36).slice(2);
-  toastItems = [...toastItems, { id, message, type }];
-  notify();
-  const timer = setTimeout(() => removeToast(id), 3e3);
-  toastTimers.set(id, timer);
-}
-function removeToast(id) {
-  const timer = toastTimers.get(id);
-  if (timer) {
-    clearTimeout(timer);
-    toastTimers.delete(id);
-  }
-  toastItems = toastItems.filter((t) => t.id !== id);
-  notify();
-}
-var toast = {
-  success: (message) => addToast(message, "success"),
-  error: (message) => addToast(message, "error"),
-  info: (message) => addToast(message, "info")
-};
-var typeStyles = {
-  success: "bg-success-soft border-success/30 text-success-soft-fg",
-  error: "bg-danger-soft border-danger/30 text-danger-soft-fg",
-  info: "bg-info-soft border-info/30 text-info-soft-fg"
-};
-var typeLabel = {
-  success: "\u6210\u529F",
-  error: "\u9519\u8BEF",
-  info: "\u63D0\u793A"
-};
-var Toaster = forwardRef11(({ className, ...props }, ref) => {
-  const [items, setItems] = useState([]);
-  const mountedRef = useRef(true);
-  const handleUpdate = useCallback3((next) => {
-    if (mountedRef.current) {
-      setItems(next);
-    }
-  }, []);
-  useEffect3(() => {
-    listeners.add(handleUpdate);
-    return () => {
-      mountedRef.current = false;
-      listeners.delete(handleUpdate);
-    };
-  }, [handleUpdate]);
-  if (items.length === 0) return null;
-  return createPortal4(
-    /* @__PURE__ */ jsx11(
-      "div",
-      {
-        ref,
-        className: cn11("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__ */ jsxs8(
-          "div",
-          {
-            className: cn11(
-              "flex items-start justify-between gap-2 rounded-md border px-4 py-3 text-sm shadow-md",
-              typeStyles[item.type]
-            ),
-            role: "alert",
-            children: [
-              /* @__PURE__ */ jsxs8("div", { children: [
-                /* @__PURE__ */ jsxs8("span", { className: "font-semibold", children: [
-                  typeLabel[item.type],
-                  "\uFF1A"
-                ] }),
-                item.message
-              ] }),
-              /* @__PURE__ */ jsx11(
-                "button",
-                {
-                  type: "button",
-                  onClick: () => removeToast(item.id),
-                  className: "mt-0.5 shrink-0 opacity-60 hover:opacity-100 transition-opacity",
-                  "aria-label": "\u5173\u95ED\u901A\u77E5",
-                  children: /* @__PURE__ */ jsx11(X4, { size: 14 })
-                }
-              )
-            ]
-          },
-          item.id
-        ))
-      }
-    ),
-    document.body
-  );
-});
-Toaster.displayName = "Toaster";
-
-// src/components/sidebar.tsx
-import { forwardRef as forwardRef12 } from "react";
-import { cn as cn12 } from "@ug666/ui-utils";
-import { jsx as jsx12, jsxs as jsxs9 } from "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"
+    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))"
   },
-  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"
-  }
+  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)" }
 };
-var Sidebar = forwardRef12(
-  ({ items, variant = "primary", collapsed = false, footer, className }, ref) => {
-    const styles = variantStyles[variant];
-    return /* @__PURE__ */ jsxs9(
-      "aside",
-      {
-        ref,
-        className: cn12(
-          "flex flex-col transition-all duration-300",
-          styles.container,
-          collapsed ? "w-16" : "w-60",
-          className
-        ),
-        children: [
-          /* @__PURE__ */ jsx12("nav", { className: "flex-1 overflow-y-auto py-4", children: /* @__PURE__ */ jsx12("ul", { className: "flex flex-col gap-1 px-2", children: items.map((item) => /* @__PURE__ */ jsx12("li", { children: /* @__PURE__ */ jsxs9(
-            "a",
-            {
-              href: item.href,
-              className: cn12(
-                "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
-              ),
-              title: collapsed ? item.label : void 0,
-              children: [
-                /* @__PURE__ */ jsx12(item.icon, { size: 17, className: "shrink-0" }),
-                !collapsed && /* @__PURE__ */ jsx12("span", { className: "truncate", children: item.label })
-              ]
-            }
-          ) }, item.href)) }) }),
-          footer && /* @__PURE__ */ jsx12(
-            "div",
-            {
-              className: cn12(
-                "border-t px-2 py-4",
-                styles.divider,
-                collapsed && "flex justify-center"
-              ),
-              children: footer
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-Sidebar.displayName = "Sidebar";
-
-// src/components/pagination.tsx
-import { forwardRef as forwardRef13 } from "react";
-import { ChevronLeft, ChevronRight } from "lucide-react";
-import { cn as cn13 } from "@ug666/ui-utils";
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
-var MAX_VISIBLE_PAGES = 5;
-function getPageNumbers(page, totalPages) {
-  if (totalPages <= MAX_VISIBLE_PAGES) {
-    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("...");
-  }
-  for (let i = start; i <= end; i++) pages.push(i);
-  if (end < totalPages) {
-    if (end < totalPages - 1) pages.push("...");
-    pages.push(totalPages);
-  }
-  return pages;
-}
-var Pagination = forwardRef13(({ 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__ */ jsxs10("div", { ref, className: cn13("flex items-center gap-1", className), children: [
-    /* @__PURE__ */ jsx13(
-      "button",
-      {
-        type: "button",
-        className: cn13(btnBase, "border border-border-strong bg-surface-1 text-text-primary hover:bg-surface-3"),
-        disabled: page <= 1,
-        onClick: () => onPageChange(page - 1),
-        "aria-label": "\u4E0A\u4E00\u9875",
-        children: /* @__PURE__ */ jsx13(ChevronLeft, { size: 16 })
-      }
-    ),
-    pageNumbers.map(
-      (p, idx) => p === "..." ? /* @__PURE__ */ jsx13("span", { className: "px-1 text-text-tertiary select-none", children: "\u2026" }, `ellipsis-${idx}`) : /* @__PURE__ */ jsx13(
-        "button",
-        {
-          type: "button",
-          className: cn13(
-            btnBase,
-            p === page ? "bg-primary text-primary-fg" : "border border-border-strong bg-surface-1 text-text-primary hover:bg-surface-3"
-          ),
-          onClick: () => onPageChange(p),
-          "aria-current": p === page ? "page" : void 0,
-          children: p
-        },
-        p
-      )
-    ),
-    /* @__PURE__ */ jsx13(
-      "button",
-      {
-        type: "button",
-        className: cn13(btnBase, "border border-border-strong bg-surface-1 text-text-primary hover:bg-surface-3"),
-        disabled: page >= totalPages,
-        onClick: () => onPageChange(page + 1),
-        "aria-label": "\u4E0B\u4E00\u9875",
-        children: /* @__PURE__ */ jsx13(ChevronRight, { size: 16 })
-      }
-    )
-  ] });
-});
-Pagination.displayName = "Pagination";
-
-// src/components/select.tsx
-import { forwardRef as forwardRef14, useId as useId2 } from "react";
-import { cn as cn14 } from "@ug666/ui-utils";
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
-var Select = forwardRef14(
-  ({ className, label, error, helperText, options, placeholder, id, ...props }, ref) => {
-    const generatedId = useId2();
-    const selectId = id ?? generatedId;
-    return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-1", children: [
-      label && /* @__PURE__ */ jsx14("label", { htmlFor: selectId, className: "text-sm font-medium text-text-primary", children: label }),
-      /* @__PURE__ */ jsxs11(
-        "select",
-        {
-          ref,
-          id: selectId,
-          className: cn14(
-            "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
-          ),
-          ...props,
-          children: [
-            placeholder && /* @__PURE__ */ jsx14("option", { value: "", disabled: true, children: placeholder }),
-            options.map((opt) => /* @__PURE__ */ jsx14("option", { value: opt.value, children: opt.label }, opt.value))
-          ]
-        }
-      ),
-      error && /* @__PURE__ */ jsx14("p", { className: "text-xs text-danger", children: error }),
-      !error && helperText && /* @__PURE__ */ jsx14("p", { className: "text-xs text-text-secondary", children: helperText })
-    ] });
-  }
-);
-Select.displayName = "Select";
 
-// src/components/spinner.tsx
-import { forwardRef as forwardRef15 } from "react";
-import { Loader2 as Loader22 } from "lucide-react";
-import { cva as cva4 } from "class-variance-authority";
-import { cn as cn15 } from "@ug666/ui-utils";
-import { jsx as jsx15 } from "react/jsx-runtime";
-var spinnerVariants = cva4("animate-spin text-text-tertiary", {
-  variants: {
-    size: {
-      sm: "h-4 w-4",
-      md: "h-6 w-6",
-      lg: "h-10 w-10"
-    }
+// 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" }
+    ]
   },
-  defaultVariants: {
-    size: "md"
-  }
-});
-var Spinner = forwardRef15(({ className, size, label = "\u52A0\u8F7D\u4E2D", ...props }, ref) => {
-  return /* @__PURE__ */ jsx15(
-    Loader22,
-    {
-      ref,
-      className: cn15(spinnerVariants({ size }), className),
-      "aria-label": label,
-      role: "status",
-      ...props
-    }
-  );
-});
-Spinner.displayName = "Spinner";
-
-// src/components/checkbox.tsx
-import { forwardRef as forwardRef16, useEffect as useEffect4, useRef as useRef2 } from "react";
-import { Check, Minus } from "lucide-react";
-import { cva as cva5 } from "class-variance-authority";
-import { cn as cn16 } from "@ug666/ui-utils";
-import { jsx as jsx16, jsxs as jsxs12 } from "react/jsx-runtime";
-var checkboxVariants = cva5(
-  "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",
   {
-    variants: {
-      size: {
-        sm: "h-3.5 w-3.5",
-        default: "h-4 w-4",
-        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"
-      }
-    },
-    defaultVariants: {
-      size: "default",
-      state: "unchecked"
-    }
-  }
-);
-var Checkbox = forwardRef16(
-  ({
-    className,
-    size,
-    checked,
-    indeterminate = false,
-    disabled,
-    label,
-    labelClassName,
-    onCheckedChange,
-    id,
-    ...props
-  }, ref) => {
-    const innerRef = useRef2(null);
-    useEffect4(() => {
-      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 control = /* @__PURE__ */ jsxs12("span", { className: "relative inline-flex", children: [
-      /* @__PURE__ */ jsx16(
-        "input",
-        {
-          ref: (node) => {
-            innerRef.current = node;
-            if (typeof ref === "function") ref(node);
-            else if (ref) ref.current = node;
-          },
-          id,
-          type: "checkbox",
-          className: "peer sr-only",
-          checked: checked ?? false,
-          disabled,
-          onChange: (e) => onCheckedChange?.(e.target.checked),
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsx16(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: cn16(checkboxVariants({ size, state }), className),
-          children: indeterminate ? /* @__PURE__ */ jsx16(Minus, { size: iconSize }) : checked ? /* @__PURE__ */ jsx16(Check, { size: iconSize }) : null
-        }
-      )
-    ] });
-    if (label === void 0 || label === null) return control;
-    return /* @__PURE__ */ jsxs12(
-      "label",
-      {
-        htmlFor: id,
-        className: cn16(
-          "inline-flex cursor-pointer items-center gap-2 text-sm text-text-primary select-none",
-          disabled && "cursor-not-allowed opacity-60",
-          labelClassName
-        ),
-        children: [
-          control,
-          /* @__PURE__ */ jsx16("span", { children: label })
-        ]
-      }
-    );
-  }
-);
-Checkbox.displayName = "Checkbox";
-
-// src/components/radio.tsx
-import { createContext as createContext2, forwardRef as forwardRef17, useContext as useContext2, useId as useId3, useState as useState2 } from "react";
-import { cva as cva6 } from "class-variance-authority";
-import { cn as cn17 } from "@ug666/ui-utils";
-import { jsx as jsx17, jsxs as jsxs13 } from "react/jsx-runtime";
-var RadioGroupContext = createContext2(null);
-function useRadioGroupContext() {
-  return useContext2(RadioGroupContext);
-}
-var radioVariants = cva6(
-  "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",
+    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" }
+    ]
+  },
   {
-    variants: {
-      size: {
-        sm: "h-3.5 w-3.5",
-        default: "h-4 w-4",
-        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"
-      }
-    },
-    defaultVariants: {
-      size: "default",
-      checked: false
-    }
-  }
-);
-var Radio = forwardRef17(
-  ({
-    className,
-    size,
-    value,
-    checked: checkedProp,
-    disabled: disabledProp,
-    label,
-    name: nameProp,
-    onChange,
-    id,
-    ...props
-  }, ref) => {
-    const group = useRadioGroupContext();
-    const generatedId = useId3();
-    const inputId = id ?? generatedId;
-    const isChecked = group ? group.value === value : checkedProp ?? false;
-    const isDisabled = group ? group.disabled || (disabledProp ?? false) : disabledProp ?? false;
-    const inputName = group ? group.name : nameProp;
-    function handleChange() {
-      if (group) {
-        group.onValueChange(value);
-      } else {
-        onChange?.(value);
-      }
-    }
-    const dotSize = size === "sm" ? "h-1.5 w-1.5" : size === "lg" ? "h-2.5 w-2.5" : "h-2 w-2";
-    const control = /* @__PURE__ */ jsxs13("span", { className: "relative inline-flex", children: [
-      /* @__PURE__ */ jsx17(
-        "input",
-        {
-          ref,
-          id: inputId,
-          type: "radio",
-          className: "peer sr-only",
-          value,
-          checked: isChecked,
-          disabled: isDisabled,
-          name: inputName,
-          onChange: handleChange,
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsx17(
-        "span",
-        {
-          "aria-hidden": "true",
-          className: cn17(radioVariants({ size, checked: isChecked }), className),
-          children: isChecked && /* @__PURE__ */ jsx17("span", { className: cn17("rounded-full bg-white", dotSize) })
-        }
-      )
-    ] });
-    if (label === void 0 || label === null) return control;
-    return /* @__PURE__ */ jsxs13(
-      "label",
-      {
-        htmlFor: inputId,
-        className: cn17(
-          "inline-flex cursor-pointer items-center gap-2 text-sm text-text-primary select-none",
-          isDisabled && "cursor-not-allowed opacity-60"
-        ),
-        children: [
-          control,
-          /* @__PURE__ */ jsx17("span", { children: label })
-        ]
-      }
-    );
-  }
-);
-Radio.displayName = "Radio";
-var RadioGroup = forwardRef17(
-  ({
-    className,
-    value: valueProp,
-    defaultValue,
-    onValueChange,
-    disabled = false,
-    name,
-    orientation = "vertical",
-    children,
-    ...props
-  }, ref) => {
-    const [uncontrolledValue, setUncontrolledValue] = useState2(defaultValue);
-    const isControlled = valueProp !== void 0;
-    const currentValue = isControlled ? valueProp : uncontrolledValue;
-    function handleValueChange(newValue) {
-      if (!isControlled) {
-        setUncontrolledValue(newValue);
-      }
-      onValueChange?.(newValue);
-    }
-    return /* @__PURE__ */ jsx17(
-      RadioGroupContext.Provider,
-      {
-        value: {
-          value: currentValue,
-          onValueChange: handleValueChange,
-          name,
-          disabled
-        },
-        children: /* @__PURE__ */ jsx17(
-          "div",
-          {
-            ref,
-            role: "radiogroup",
-            className: cn17(
-              "flex",
-              orientation === "vertical" ? "flex-col gap-2" : "flex-row flex-wrap gap-4",
-              className
-            ),
-            ...props,
-            children
-          }
-        )
-      }
-    );
-  }
-);
-RadioGroup.displayName = "RadioGroup";
-
-// src/components/slider.tsx
-import { forwardRef as forwardRef18, useState as useState3 } from "react";
-import { cn as cn18 } from "@ug666/ui-utils";
-import { jsx as jsx18, jsxs as jsxs14 } from "react/jsx-runtime";
-var Slider = forwardRef18(
-  ({
-    className,
-    value: valueProp,
-    defaultValue = 0,
-    min = 0,
-    max = 100,
-    step = 1,
-    disabled = false,
-    showValue = false,
-    onValueChange,
-    ...props
-  }, ref) => {
-    const isControlled = valueProp !== void 0;
-    const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
-    const currentValue = isControlled ? valueProp : uncontrolledValue;
-    const fillPercent = max === min ? 0 : (currentValue - min) / (max - min) * 100;
-    function handleChange(e) {
-      const newValue = Number(e.target.value);
-      if (!isControlled) {
-        setUncontrolledValue(newValue);
-      }
-      onValueChange?.(newValue);
-    }
-    return /* @__PURE__ */ jsxs14("div", { className: cn18("flex flex-col gap-1", className), children: [
-      showValue && /* @__PURE__ */ jsx18("span", { className: "self-start text-xs font-medium text-text-primary", children: currentValue }),
-      /* @__PURE__ */ jsxs14("div", { className: "relative flex h-5 w-full items-center", children: [
-        /* @__PURE__ */ jsx18("div", { className: "pointer-events-none absolute h-1.5 w-full overflow-hidden rounded-full bg-surface-3", children: /* @__PURE__ */ jsx18(
-          "div",
-          {
-            className: "h-full rounded-full bg-primary transition-all",
-            style: { width: `${fillPercent}%` }
-          }
-        ) }),
-        /* @__PURE__ */ jsx18(
-          "input",
-          {
-            ref,
-            type: "range",
-            min,
-            max,
-            step,
-            value: currentValue,
-            disabled,
-            onChange: handleChange,
-            className: cn18(
-              "relative h-5 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",
-              // 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",
-              // disabled
-              "disabled:cursor-not-allowed disabled:opacity-50"
-            ),
-            ...props
-          }
-        )
-      ] })
-    ] });
-  }
-);
-Slider.displayName = "Slider";
-
-// src/components/number-input.tsx
-import { forwardRef as forwardRef19, useState as useState4 } from "react";
-import { Minus as Minus2, Plus } from "lucide-react";
-import { cva as cva7 } from "class-variance-authority";
-import { cn as cn19 } from "@ug666/ui-utils";
-import { jsx as jsx19, jsxs as jsxs15 } from "react/jsx-runtime";
-var numberInputVariants = cva7(
-  "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",
+    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" }
+    ]
+  },
   {
-    variants: {
-      size: {
-        sm: "h-8 text-xs",
-        default: "h-9 text-sm",
-        lg: "h-11 text-base"
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var NumberInput = forwardRef19(
-  ({
-    className,
-    size,
-    value: valueProp,
-    defaultValue = 0,
-    min,
-    max,
-    step = 1,
-    precision = 0,
-    disabled = false,
-    placeholder,
-    onValueChange,
-    ...props
-  }, ref) => {
-    const isControlled = valueProp !== void 0;
-    const [uncontrolledValue, setUncontrolledValue] = useState4(defaultValue);
-    const currentValue = isControlled ? valueProp : uncontrolledValue;
-    function clamp(val) {
-      let result = val;
-      if (min !== void 0) result = Math.max(min, result);
-      if (max !== void 0) result = Math.min(max, result);
-      return result;
-    }
-    function format(val) {
-      return val.toFixed(precision);
-    }
-    function commit(newVal) {
-      const clamped = clamp(Number(newVal.toFixed(precision)));
-      if (!isControlled) {
-        setUncontrolledValue(clamped);
-      }
-      onValueChange?.(clamped);
-    }
-    function handleDecrement() {
-      commit(currentValue - step);
-    }
-    function handleIncrement() {
-      commit(currentValue + step);
-    }
-    function handleInputChange(e) {
-      const parsed = parseFloat(e.target.value);
-      if (!Number.isNaN(parsed)) {
-        commit(parsed);
-      }
-    }
-    function handleBlur(e) {
-      const parsed = parseFloat(e.target.value);
-      if (!Number.isNaN(parsed)) {
-        commit(parsed);
-      } else {
-        if (!isControlled) {
-          setUncontrolledValue(uncontrolledValue);
-        }
-      }
-    }
-    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 iconSize = size === "sm" ? 12 : size === "lg" ? 16 : 14;
-    return /* @__PURE__ */ jsxs15("div", { className: cn19(numberInputVariants({ size }), className), children: [
-      /* @__PURE__ */ jsx19(
-        "button",
-        {
-          type: "button",
-          "aria-label": "\u51CF\u5C11\u6570\u503C",
-          disabled: disabled || atMin,
-          onClick: handleDecrement,
-          className: cn19(btnBase, btnSizeCls, "rounded-l-md border-r border-border-base"),
-          tabIndex: -1,
-          children: /* @__PURE__ */ jsx19(Minus2, { size: iconSize })
-        }
-      ),
-      /* @__PURE__ */ jsx19(
-        "input",
-        {
-          ref,
-          type: "number",
-          className: cn19(
-            "min-w-0 flex-1 bg-transparent text-center text-text-primary outline-none",
-            "placeholder:text-text-tertiary",
-            // 隐藏原生 spinner
-            "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"
-          ),
-          value: format(currentValue),
-          disabled,
-          placeholder,
-          min,
-          max,
-          step,
-          onChange: handleInputChange,
-          onBlur: handleBlur,
-          ...props
-        }
-      ),
-      /* @__PURE__ */ jsx19(
-        "button",
-        {
-          type: "button",
-          "aria-label": "\u589E\u52A0\u6570\u503C",
-          disabled: disabled || atMax,
-          onClick: handleIncrement,
-          className: cn19(btnBase, btnSizeCls, "rounded-r-md border-l border-border-base"),
-          tabIndex: -1,
-          children: /* @__PURE__ */ jsx19(Plus, { size: iconSize })
-        }
-      )
-    ] });
-  }
-);
-NumberInput.displayName = "NumberInput";
-
-// src/components/otp-input.tsx
-import { forwardRef as forwardRef20, useRef as useRef3, useCallback as useCallback4 } from "react";
-import { cn as cn20 } from "@ug666/ui-utils";
-import { jsx as jsx20 } from "react/jsx-runtime";
-var OTPInput = forwardRef20(
-  ({
-    value,
-    onValueChange,
-    length = 6,
-    disabled = false,
-    onComplete,
-    className
-  }, ref) => {
-    const inputRefs = useRef3([]);
-    const focusAt = useCallback4((index) => {
-      const el = inputRefs.current[index];
-      if (el) {
-        el.focus();
-        el.setSelectionRange(el.value.length, el.value.length);
-      }
-    }, []);
-    const updateValueAt = useCallback4(
-      (index, char) => {
-        const chars = value.padEnd(length, "").split("").slice(0, length);
-        chars[index] = char;
-        const next = chars.join("");
-        onValueChange(next);
-        if (char && next.replace(/\s/g, "").length === length && !next.includes(" ")) {
-          onComplete?.(next);
-        }
-      },
-      [value, length, onValueChange, onComplete]
-    );
-    const handleChange = useCallback4(
-      (index, e) => {
-        const raw = e.target.value;
-        const digit = raw.replace(/\D/g, "").slice(-1);
-        updateValueAt(index, digit);
-        if (digit && index < length - 1) {
-          focusAt(index + 1);
-        }
-      },
-      [length, updateValueAt, focusAt]
-    );
-    const handleKeyDown = useCallback4(
-      (index, e) => {
-        if (e.key === "ArrowLeft") {
-          e.preventDefault();
-          if (index > 0) focusAt(index - 1);
-        } else if (e.key === "ArrowRight") {
-          e.preventDefault();
-          if (index < length - 1) focusAt(index + 1);
-        } else if (e.key === "Backspace") {
-          e.preventDefault();
-          const current = value[index] ?? "";
-          if (current) {
-            updateValueAt(index, "");
-          } else if (index > 0) {
-            updateValueAt(index - 1, "");
-            focusAt(index - 1);
-          }
-        }
-      },
-      [value, length, focusAt, updateValueAt]
-    );
-    const handlePaste = useCallback4(
-      (e) => {
-        e.preventDefault();
-        const pasted = e.clipboardData.getData("text").replace(/\D/g, "").slice(0, length);
-        if (!pasted) return;
-        const chars = pasted.padEnd(length, "").split("").slice(0, length);
-        const next = chars.join("");
-        onValueChange(next);
-        const nextFocus = Math.min(pasted.length, length - 1);
-        focusAt(nextFocus);
-        if (pasted.length === length) {
-          onComplete?.(next);
-        }
-      },
-      [length, onValueChange, onComplete, focusAt]
-    );
-    return /* @__PURE__ */ jsx20(
-      "div",
-      {
-        ref,
-        className: cn20("flex items-center gap-2", className),
-        role: "group",
-        "aria-label": "\u9A8C\u8BC1\u7801\u8F93\u5165",
-        children: Array.from({ length }, (_, i) => {
-          const char = value[i] ?? "";
-          const isFocused = false;
-          return /* @__PURE__ */ jsx20(
-            "input",
-            {
-              ref: (el) => {
-                inputRefs.current[i] = el;
-              },
-              type: "text",
-              inputMode: "numeric",
-              pattern: "[0-9]",
-              maxLength: 1,
-              value: char,
-              disabled,
-              "aria-label": `\u9A8C\u8BC1\u7801\u7B2C ${i + 1} \u4F4D`,
-              className: cn20(
-                "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",
-                char ? "border-border-strong" : "border-border-base"
-              ),
-              onChange: (e) => handleChange(i, e),
-              onKeyDown: (e) => handleKeyDown(i, e),
-              onPaste: handlePaste,
-              onClick: (e) => e.target.select()
-            },
-            i
-          );
-        })
-      }
-    );
-  }
-);
-OTPInput.displayName = "OTPInput";
-
-// src/components/form.tsx
-import {
-  createContext as createContext3,
-  forwardRef as forwardRef21,
-  useContext as useContext3,
-  useId as useId4,
-  cloneElement
-} from "react";
-import { cn as cn21 } from "@ug666/ui-utils";
-import { jsx as jsx21 } from "react/jsx-runtime";
-var FormFieldContext = createContext3(null);
-function useFormFieldContext() {
-  const ctx = useContext3(FormFieldContext);
-  if (!ctx) {
-    throw new Error("FormField \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <FormField> \u5185\u4F7F\u7528");
-  }
-  return ctx;
-}
-var Form = forwardRef21(
-  ({ className, onSubmit, children, ...props }, ref) => {
-    function handleSubmit(event) {
-      event.preventDefault();
-      onSubmit?.(event);
-    }
-    return /* @__PURE__ */ jsx21(
-      "form",
-      {
-        ref,
-        className: cn21(className),
-        onSubmit: handleSubmit,
-        ...props,
-        children
-      }
-    );
-  }
-);
-Form.displayName = "Form";
-var FormField = forwardRef21(
-  ({ name, error, className, children, ...props }, ref) => {
-    const generatedId = useId4();
-    return /* @__PURE__ */ jsx21(FormFieldContext.Provider, { value: { name, error, id: generatedId }, children: /* @__PURE__ */ jsx21("div", { ref, className: cn21(className), ...props, children }) });
-  }
-);
-FormField.displayName = "FormField";
-var FormItem = forwardRef21(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx21(
-      "div",
-      {
-        ref,
-        className: cn21("flex flex-col gap-1.5", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-FormItem.displayName = "FormItem";
-var FormLabel = forwardRef21(
-  ({ className, required, children, htmlFor, ...props }, ref) => {
-    const ctx = useFormFieldContext();
-    return /* @__PURE__ */ jsx21(
-      Label,
-      {
-        ref,
-        htmlFor: htmlFor ?? ctx.id,
-        required,
-        className: cn21(className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-FormLabel.displayName = "FormLabel";
-function FormControl({ children }) {
-  const ctx = useFormFieldContext();
-  const descriptionId = `${ctx.id}-description`;
-  const messageId = `${ctx.id}-message`;
-  return cloneElement(children, {
-    id: ctx.id,
-    "aria-describedby": ctx.error ? `${descriptionId} ${messageId}` : descriptionId,
-    "aria-invalid": ctx.error ? true : void 0
-  });
-}
-FormControl.displayName = "FormControl";
-var FormDescription = forwardRef21(
-  ({ className, children, ...props }, ref) => {
-    const ctx = useFormFieldContext();
-    return /* @__PURE__ */ jsx21(
-      "p",
-      {
-        ref,
-        id: `${ctx.id}-description`,
-        className: cn21("text-xs text-text-secondary", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-FormDescription.displayName = "FormDescription";
-var FormMessage = forwardRef21(
-  ({ className, children, ...props }, ref) => {
-    const ctx = useFormFieldContext();
-    const message = ctx.error ?? (typeof children === "string" ? children : void 0);
-    if (!message) return null;
-    return /* @__PURE__ */ jsx21(
-      "p",
-      {
-        ref,
-        id: `${ctx.id}-message`,
-        className: cn21("text-xs text-danger-soft-fg", className),
-        role: "alert",
-        ...props,
-        children: message
-      }
-    );
-  }
-);
-FormMessage.displayName = "FormMessage";
-
-// src/components/tabs.tsx
-import { createContext as createContext4, forwardRef as forwardRef22, useContext as useContext4 } from "react";
-import { cn as cn22 } from "@ug666/ui-utils";
-import { jsx as jsx22 } from "react/jsx-runtime";
-var TabsContext = createContext4(null);
-function useTabsContext() {
-  const ctx = useContext4(TabsContext);
-  if (!ctx) throw new Error("Tabs \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Tabs> \u5185\u4F7F\u7528");
-  return ctx;
-}
-var Tabs = forwardRef22(({ value, onValueChange, children, className }, ref) => {
-  return /* @__PURE__ */ jsx22(TabsContext.Provider, { value: { value, onValueChange }, children: /* @__PURE__ */ jsx22("div", { ref, className: cn22("w-full", className), children }) });
-});
-var TabsList = forwardRef22(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx22(
-    "div",
-    {
-      ref,
-      role: "tablist",
-      className: cn22("inline-flex w-full items-center gap-0 border-b border-border-base", className),
-      ...props,
-      children
-    }
-  );
-});
-var TabsTrigger = forwardRef22(({ value, className, children, ...props }, ref) => {
-  const { value: activeValue, onValueChange } = useTabsContext();
-  const isActive = activeValue === value;
-  return /* @__PURE__ */ jsx22(
-    "button",
-    {
-      ref,
-      type: "button",
-      role: "tab",
-      "aria-selected": isActive,
-      tabIndex: isActive ? 0 : -1,
-      onClick: () => onValueChange(value),
-      className: cn22(
-        "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",
-        className
-      ),
-      ...props,
-      children
-    }
-  );
-});
-var TabsContent = forwardRef22(({ value, className, children, ...props }, ref) => {
-  const { value: activeValue } = useTabsContext();
-  if (activeValue !== value) return null;
-  return /* @__PURE__ */ jsx22(
-    "div",
-    {
-      ref,
-      role: "tabpanel",
-      tabIndex: 0,
-      className: cn22("mt-4 focus-visible:outline-none", className),
-      ...props,
-      children
-    }
-  );
-});
-Tabs.displayName = "Tabs";
-TabsList.displayName = "TabsList";
-TabsTrigger.displayName = "TabsTrigger";
-TabsContent.displayName = "TabsContent";
-
-// src/components/accordion.tsx
-import { createContext as createContext5, forwardRef as forwardRef23, useContext as useContext5, useState as useState5 } from "react";
-import { ChevronDown } from "lucide-react";
-import { cn as cn23 } from "@ug666/ui-utils";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
-var AccordionContext = createContext5(null);
-var AccordionItemContext = createContext5(null);
-function useAccordionContext() {
-  const ctx = useContext5(AccordionContext);
-  if (!ctx) throw new Error("Accordion \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Accordion> \u5185\u4F7F\u7528");
-  return ctx;
-}
-function useAccordionItemContext() {
-  const ctx = useContext5(AccordionItemContext);
-  if (!ctx) throw new Error("AccordionTrigger/AccordionContent \u5FC5\u987B\u5728 <AccordionItem> \u5185\u4F7F\u7528");
-  return ctx;
-}
-var Accordion = forwardRef23(
-  (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] = useState5(singleProps?.defaultValue ?? "");
-    const [internalMulti, setInternalMulti] = useState5(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;
-    const collapsible = isSingle ? singleProps?.collapsible ?? false : false;
-    function handleValueChange(itemValue) {
-      if (isSingle) {
-        const current = value;
-        const next = current === itemValue && collapsible ? "" : itemValue;
-        if (!isControlledSingle) setInternalSingle(next);
-        singleProps?.onValueChange?.(next);
-      } else {
-        const current = value;
-        const next = current.includes(itemValue) ? current.filter((v) => v !== itemValue) : [...current, itemValue];
-        if (!isControlledMulti) setInternalMulti(next);
-        multiProps?.onValueChange?.(next);
-      }
-    }
-    const { defaultValue: _dv, onValueChange: _ov, collapsible: _col, ...domRest } = rest;
-    void _dv;
-    void _ov;
-    void _col;
-    return /* @__PURE__ */ jsx23(AccordionContext.Provider, { value: { type, value, onValueChange: handleValueChange, collapsible }, children: /* @__PURE__ */ jsx23("div", { ref, className: cn23("w-full divide-y divide-border-base rounded-md border border-border-base", className), ...domRest, children }) });
-  }
-);
-Accordion.displayName = "Accordion";
-var AccordionItem = forwardRef23(({ value, className, children, ...props }, ref) => {
-  const { value: activeValue, type } = useAccordionContext();
-  const isOpen = type === "single" ? activeValue === value : activeValue.includes(value);
-  return /* @__PURE__ */ jsx23(AccordionItemContext.Provider, { value: { value, isOpen }, children: /* @__PURE__ */ jsx23("div", { ref, className: cn23("", className), ...props, children }) });
-});
-AccordionItem.displayName = "AccordionItem";
-var AccordionTrigger = forwardRef23(({ className, children, ...props }, ref) => {
-  const { onValueChange } = useAccordionContext();
-  const { value, isOpen } = useAccordionItemContext();
-  return /* @__PURE__ */ jsxs16(
-    "button",
-    {
-      ref,
-      type: "button",
-      "aria-expanded": isOpen,
-      onClick: () => onValueChange(value),
-      className: cn23(
-        "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
-      ),
-      ...props,
-      children: [
-        children,
-        /* @__PURE__ */ jsx23(
-          ChevronDown,
-          {
-            size: 16,
-            className: cn23("shrink-0 text-text-secondary transition-transform duration-200", isOpen && "rotate-180")
-          }
-        )
-      ]
-    }
-  );
-});
-AccordionTrigger.displayName = "AccordionTrigger";
-var AccordionContent = forwardRef23(({ className, children, ...props }, ref) => {
-  const { isOpen } = useAccordionItemContext();
-  if (!isOpen) return null;
-  return /* @__PURE__ */ jsx23(
-    "div",
-    {
-      ref,
-      className: cn23("px-4 pb-4 pt-1 text-sm text-text-secondary", className),
-      ...props,
-      children
-    }
-  );
-});
-AccordionContent.displayName = "AccordionContent";
-
-// src/components/steps.tsx
-import { forwardRef as forwardRef24 } from "react";
-import { Check as Check2 } from "lucide-react";
-import { cn as cn24 } from "@ug666/ui-utils";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
-var Steps = forwardRef24(
-  ({ current, items, direction = "horizontal", status = "process", className, ...props }, ref) => {
-    const isHorizontal = direction === "horizontal";
-    return /* @__PURE__ */ jsx24(
-      "div",
-      {
-        ref,
-        className: cn24(
-          isHorizontal ? "flex items-start" : "flex flex-col",
-          className
-        ),
-        ...props,
-        children: items.map((item, index) => {
-          const isFinished = index < current || index === current && status === "finish";
-          const isCurrent = index === current && status !== "finish";
-          const isError = index === current && status === "error";
-          const isLast = index === items.length - 1;
-          return /* @__PURE__ */ jsxs17(
-            "div",
-            {
-              className: cn24(
-                isHorizontal ? "flex flex-1 items-start" : "flex items-start"
-              ),
-              children: [
-                /* @__PURE__ */ jsxs17("div", { className: cn24("flex", isHorizontal ? "flex-col items-center" : "items-start"), children: [
-                  /* @__PURE__ */ jsx24(
-                    "div",
-                    {
-                      className: cn24(
-                        "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",
-                        !isFinished && !isCurrent && !isError && "border-border-strong bg-surface-1 text-text-tertiary"
-                      ),
-                      children: isFinished ? /* @__PURE__ */ jsx24(Check2, { size: 16, strokeWidth: 2.5 }) : item.icon ?? /* @__PURE__ */ jsx24("span", { children: index + 1 })
-                    }
-                  ),
-                  !isLast && !isHorizontal && /* @__PURE__ */ jsx24(
-                    "div",
-                    {
-                      className: cn24(
-                        "ml-[15px] mt-1 w-0.5 flex-1 self-stretch",
-                        isFinished ? "bg-primary" : "bg-border-base"
-                      ),
-                      style: { minHeight: "24px" }
-                    }
-                  )
-                ] }),
-                /* @__PURE__ */ jsxs17(
-                  "div",
-                  {
-                    className: cn24(
-                      isHorizontal ? "mt-2 text-center" : "ml-3 pb-6",
-                      isLast && !isHorizontal && "pb-0"
-                    ),
-                    children: [
-                      /* @__PURE__ */ jsx24(
-                        "p",
-                        {
-                          className: cn24(
-                            "text-sm font-medium",
-                            isFinished && "text-text-primary",
-                            isCurrent && !isError && "text-text-primary",
-                            isError && "text-red-500",
-                            !isFinished && !isCurrent && !isError && "text-text-tertiary"
-                          ),
-                          children: item.title
-                        }
-                      ),
-                      item.description && /* @__PURE__ */ jsx24(
-                        "p",
-                        {
-                          className: cn24(
-                            "mt-0.5 text-xs",
-                            isError ? "text-red-400" : "text-text-secondary"
-                          ),
-                          children: item.description
-                        }
-                      )
-                    ]
-                  }
-                ),
-                !isLast && isHorizontal && /* @__PURE__ */ jsx24(
-                  "div",
-                  {
-                    className: cn24(
-                      "mx-2 mt-4 h-0.5 flex-1",
-                      isFinished ? "bg-primary" : "bg-border-base"
-                    )
-                  }
-                )
-              ]
-            },
-            index
-          );
-        })
-      }
-    );
-  }
-);
-Steps.displayName = "Steps";
-
-// src/components/dropdown.tsx
-import { createContext as createContext6, forwardRef as forwardRef25, useCallback as useCallback5, useContext as useContext6, useEffect as useEffect5, useRef as useRef4, useState as useState6 } from "react";
-import { createPortal as createPortal5 } from "react-dom";
-import { cn as cn25 } from "@ug666/ui-utils";
-import { jsx as jsx25 } from "react/jsx-runtime";
-var DropdownContext = createContext6(null);
-function assignRef(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-  if (ref) {
-    ref.current = value;
-  }
-}
-function useDropdownContext() {
-  const ctx = useContext6(DropdownContext);
-  if (!ctx) throw new Error("Dropdown \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <DropdownMenu> \u5185\u4F7F\u7528");
-  return ctx;
-}
-var DropdownMenu = forwardRef25(({ children, className }, ref) => {
-  const [open, setOpen] = useState6(false);
-  const triggerRef = useRef4(null);
-  return /* @__PURE__ */ jsx25(DropdownContext.Provider, { value: { open, setOpen, triggerRef }, children: /* @__PURE__ */ jsx25("div", { ref, className: cn25("relative inline-block", className), children }) });
-});
-var DropdownTrigger = forwardRef25(({ children, className }, ref) => {
-  const { setOpen, open, triggerRef } = useDropdownContext();
-  const handleRef = useCallback5(
-    (node) => {
-      triggerRef.current = node;
-      assignRef(ref, node);
-    },
-    [ref, triggerRef]
-  );
-  return /* @__PURE__ */ jsx25(
-    "div",
-    {
-      ref: handleRef,
-      className: cn25("inline-flex", className),
-      onClick: () => setOpen(!open),
-      children
-    }
-  );
-});
-var DropdownContent = forwardRef25(({ children, className, align = "start" }, ref) => {
-  const { open, setOpen, triggerRef } = useDropdownContext();
-  const contentRef = useRef4(null);
-  const [position, setPosition] = useState6({ top: 0, left: 0 });
-  const handleRef = useCallback5(
-    (node) => {
-      contentRef.current = node;
-      assignRef(ref, node);
-    },
-    [ref]
-  );
-  const updatePosition = useCallback5(() => {
-    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]);
-  useEffect5(() => {
-    if (!open) return;
-    updatePosition();
-  }, [open, updatePosition]);
-  useEffect5(() => {
-    if (!open) return;
-    function handleClickOutside(e) {
-      if (contentRef.current && !contentRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
-        setOpen(false);
-      }
-    }
-    document.addEventListener("mousedown", handleClickOutside);
-    return () => document.removeEventListener("mousedown", handleClickOutside);
-  }, [open, setOpen, triggerRef]);
-  if (!open) return null;
-  return createPortal5(
-    /* @__PURE__ */ jsx25(
-      "div",
-      {
-        ref: handleRef,
-        style: { top: position.top, left: position.left },
-        className: cn25(
-          "absolute z-50 min-w-40 rounded-md border border-border-base bg-surface-1 py-1 shadow-lg",
-          className
-        ),
-        children
-      }
-    ),
-    document.body
-  );
-});
-var DropdownItem = forwardRef25(({ children, className, destructive = false, onClick, ...props }, ref) => {
-  const { setOpen } = useDropdownContext();
-  function handleClick(e) {
-    setOpen(false);
-    onClick?.(e);
-  }
-  return /* @__PURE__ */ jsx25(
-    "button",
-    {
-      ref,
-      type: "button",
-      className: cn25(
-        "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
-      ),
-      onClick: handleClick,
-      ...props,
-      children
-    }
-  );
-});
-var DropdownSeparator = forwardRef25(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx25("div", { ref, className: cn25("my-1 h-px bg-border-base", className), ...props });
-});
-DropdownMenu.displayName = "DropdownMenu";
-DropdownTrigger.displayName = "DropdownTrigger";
-DropdownContent.displayName = "DropdownContent";
-DropdownItem.displayName = "DropdownItem";
-DropdownSeparator.displayName = "DropdownSeparator";
-
-// src/components/popover.tsx
-import { createContext as createContext7, forwardRef as forwardRef26, useCallback as useCallback6, useContext as useContext7, useEffect as useEffect6, useRef as useRef5, useState as useState7 } from "react";
-import { createPortal as createPortal6 } from "react-dom";
-import { cn as cn26 } from "@ug666/ui-utils";
-import { jsx as jsx26 } from "react/jsx-runtime";
-var PopoverContext = createContext7(null);
-function usePopoverContext() {
-  const ctx = useContext7(PopoverContext);
-  if (!ctx) throw new Error("Popover \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Popover> \u5185\u4F7F\u7528");
-  return ctx;
-}
-function assignRef2(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-  if (ref) {
-    ref.current = value;
-  }
-}
-var Popover = ({ open: controlledOpen, defaultOpen = false, onOpenChange, children }) => {
-  const [internalOpen, setInternalOpen] = useState7(defaultOpen);
-  const triggerRef = useRef5(null);
-  const isControlled = controlledOpen !== void 0;
-  const open = isControlled ? controlledOpen : internalOpen;
-  const setOpen = useCallback6(
-    (value) => {
-      if (!isControlled) setInternalOpen(value);
-      onOpenChange?.(value);
-    },
-    [isControlled, onOpenChange]
-  );
-  return /* @__PURE__ */ jsx26(PopoverContext.Provider, { value: { open, setOpen, triggerRef }, children });
-};
-Popover.displayName = "Popover";
-var PopoverTrigger = forwardRef26(({ children, className }, ref) => {
-  const { setOpen, open, triggerRef } = usePopoverContext();
-  const handleRef = useCallback6(
-    (node) => {
-      triggerRef.current = node;
-      assignRef2(ref, node);
-    },
-    [ref, triggerRef]
-  );
-  return /* @__PURE__ */ jsx26(
-    "div",
-    {
-      ref: handleRef,
-      className: cn26("inline-flex", className),
-      onClick: () => setOpen(!open),
-      children
-    }
-  );
-});
-PopoverTrigger.displayName = "PopoverTrigger";
-function calcPosition(triggerRect, contentEl, side, align, sideOffset) {
-  const cw = contentEl.offsetWidth;
-  const ch = contentEl.offsetHeight;
-  let top = 0;
-  let left = 0;
-  if (side === "bottom") {
-    top = triggerRect.bottom + window.scrollY + sideOffset;
-  } else if (side === "top") {
-    top = triggerRect.top + window.scrollY - ch - sideOffset;
-  } else if (side === "left") {
-    top = triggerRect.top + window.scrollY + triggerRect.height / 2 - ch / 2;
-    left = triggerRect.left + window.scrollX - cw - sideOffset;
-    return { top, left };
-  } else {
-    top = triggerRect.top + window.scrollY + triggerRect.height / 2 - ch / 2;
-    left = triggerRect.right + window.scrollX + sideOffset;
-    return { top, left };
-  }
-  if (align === "start") {
-    left = triggerRect.left + window.scrollX;
-  } else if (align === "end") {
-    left = triggerRect.right + window.scrollX - cw;
-  } else {
-    left = triggerRect.left + window.scrollX + triggerRect.width / 2 - cw / 2;
-  }
-  return { top, left };
-}
-var PopoverContent = forwardRef26(
-  ({ children, className, side = "bottom", align = "center", sideOffset = 4, ...props }, ref) => {
-    const { open, setOpen, triggerRef } = usePopoverContext();
-    const contentRef = useRef5(null);
-    const [pos, setPos] = useState7({ top: 0, left: 0 });
-    const handleRef = useCallback6(
-      (node) => {
-        contentRef.current = node;
-        assignRef2(ref, node);
-      },
-      [ref]
-    );
-    const updatePos = useCallback6(() => {
-      if (!triggerRef.current || !contentRef.current) return;
-      const rect = triggerRef.current.getBoundingClientRect();
-      setPos(calcPosition(rect, contentRef.current, side, align, sideOffset));
-    }, [side, align, sideOffset, triggerRef]);
-    useEffect6(() => {
-      if (open) updatePos();
-    }, [open, updatePos]);
-    useEffect6(() => {
-      if (!open) return;
-      function handleMouseDown(e) {
-        if (contentRef.current && !contentRef.current.contains(e.target) && triggerRef.current && !triggerRef.current.contains(e.target)) {
-          setOpen(false);
-        }
-      }
-      document.addEventListener("mousedown", handleMouseDown);
-      return () => document.removeEventListener("mousedown", handleMouseDown);
-    }, [open, setOpen, triggerRef]);
-    if (!open) return null;
-    return createPortal6(
-      /* @__PURE__ */ jsx26(
-        "div",
-        {
-          ref: handleRef,
-          style: { top: pos.top, left: pos.left },
-          className: cn26(
-            "absolute z-50 min-w-40 rounded-md border border-border-base bg-surface-1 p-3 shadow-lg",
-            className
-          ),
-          ...props,
-          children
-        }
-      ),
-      document.body
-    );
-  }
-);
-PopoverContent.displayName = "PopoverContent";
-
-// src/components/context-menu.tsx
-import { createContext as createContext8, forwardRef as forwardRef27, useCallback as useCallback7, useContext as useContext8, useEffect as useEffect7, useRef as useRef6, useState as useState8 } from "react";
-import { createPortal as createPortal7 } from "react-dom";
-import { cn as cn27 } from "@ug666/ui-utils";
-import { jsx as jsx27 } from "react/jsx-runtime";
-var ContextMenuContext = createContext8(null);
-function useContextMenuContext() {
-  const ctx = useContext8(ContextMenuContext);
-  if (!ctx) throw new Error("ContextMenu \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <ContextMenu> \u5185\u4F7F\u7528");
-  return ctx;
-}
-function assignRef3(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-  if (ref) {
-    ref.current = value;
-  }
-}
-var ContextMenu = forwardRef27(
-  ({ children, className }, ref) => {
-    const [open, setOpen] = useState8(false);
-    const [position, setPosition] = useState8({ x: 0, y: 0 });
-    const openAt = useCallback7((pos) => {
-      setPosition(pos);
-      setOpen(true);
-    }, []);
-    return /* @__PURE__ */ jsx27(ContextMenuContext.Provider, { value: { open, position, setOpen, openAt }, children: /* @__PURE__ */ jsx27("div", { ref, className: cn27("relative", className), children }) });
-  }
-);
-var ContextMenuTrigger = forwardRef27(
-  ({ children, className, ...props }, ref) => {
-    const { openAt } = useContextMenuContext();
-    function handleContextMenu(e) {
-      e.preventDefault();
-      openAt({ x: e.clientX, y: e.clientY });
-    }
-    return /* @__PURE__ */ jsx27(
-      "div",
-      {
-        ref,
-        className: cn27(className),
-        onContextMenu: handleContextMenu,
-        ...props,
-        children
-      }
-    );
-  }
-);
-var ContextMenuContent = forwardRef27(
-  ({ children, className, ...props }, ref) => {
-    const { open, position, setOpen } = useContextMenuContext();
-    const contentRef = useRef6(null);
-    const handleRef = useCallback7(
-      (node) => {
-        contentRef.current = node;
-        assignRef3(ref, node);
-      },
-      [ref]
-    );
-    useEffect7(() => {
-      if (!open) return;
-      function handleMouseDown(e) {
-        if (contentRef.current && !contentRef.current.contains(e.target)) {
-          setOpen(false);
-        }
-      }
-      function handleKeyDown(e) {
-        if (e.key === "Escape") {
-          setOpen(false);
-        }
-      }
-      document.addEventListener("mousedown", handleMouseDown);
-      document.addEventListener("keydown", handleKeyDown);
-      return () => {
-        document.removeEventListener("mousedown", handleMouseDown);
-        document.removeEventListener("keydown", handleKeyDown);
-      };
-    }, [open, setOpen]);
-    if (!open) return null;
-    return createPortal7(
-      /* @__PURE__ */ jsx27(
-        "div",
-        {
-          ref: handleRef,
-          style: { top: position.y, left: position.x },
-          className: cn27(
-            "fixed z-50 min-w-40 rounded-md border border-border-base bg-surface-1 py-1 shadow-lg",
-            className
-          ),
-          ...props,
-          children
-        }
-      ),
-      document.body
-    );
-  }
-);
-var ContextMenuItem = forwardRef27(
-  ({ children, className, destructive = false, onClick, ...props }, ref) => {
-    const { setOpen } = useContextMenuContext();
-    function handleClick(e) {
-      setOpen(false);
-      onClick?.(e);
-    }
-    return /* @__PURE__ */ jsx27(
-      "button",
-      {
-        ref,
-        type: "button",
-        className: cn27(
-          "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
-        ),
-        onClick: handleClick,
-        ...props,
-        children
-      }
-    );
-  }
-);
-var ContextMenuSeparator = forwardRef27(
-  ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx27("div", { ref, className: cn27("my-1 h-px bg-border-base", className), ...props });
-  }
-);
-ContextMenu.displayName = "ContextMenu";
-ContextMenuTrigger.displayName = "ContextMenuTrigger";
-ContextMenuContent.displayName = "ContextMenuContent";
-ContextMenuItem.displayName = "ContextMenuItem";
-ContextMenuSeparator.displayName = "ContextMenuSeparator";
-
-// src/components/navigation-menu.tsx
-import { createContext as createContext9, forwardRef as forwardRef28, useCallback as useCallback8, useContext as useContext9, useRef as useRef7, useState as useState9 } from "react";
-import { ChevronDown as ChevronDown2 } from "lucide-react";
-import { cn as cn28 } from "@ug666/ui-utils";
-import { jsx as jsx28, jsxs as jsxs18 } from "react/jsx-runtime";
-var NavigationMenuContext = createContext9(null);
-function useNavigationMenuContext() {
-  const ctx = useContext9(NavigationMenuContext);
-  if (!ctx) throw new Error("NavigationMenu \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <NavigationMenu> \u5185\u4F7F\u7528");
-  return ctx;
-}
-var NavigationMenuItemContext = createContext9(null);
-function useNavigationMenuItemContext() {
-  const ctx = useContext9(NavigationMenuItemContext);
-  if (!ctx) throw new Error("NavigationMenuTrigger/Content \u5FC5\u987B\u5728 <NavigationMenuItem> \u5185\u4F7F\u7528");
-  return ctx;
-}
-var _idCounter = 0;
-var NavigationMenu = forwardRef28(
-  ({ className, children, ...props }, ref) => {
-    const [activeItem, setActiveItem] = useState9(null);
-    return /* @__PURE__ */ jsx28(NavigationMenuContext.Provider, { value: { activeItem, setActiveItem }, children: /* @__PURE__ */ jsx28(
-      "nav",
-      {
-        ref,
-        className: cn28("relative flex items-center gap-1", className),
-        ...props,
-        children
-      }
-    ) });
-  }
-);
-var NavigationMenuItem = forwardRef28(
-  ({ className, children, ...props }, ref) => {
-    const itemIdRef = useRef7(`nav-item-${++_idCounter}`);
-    const { activeItem, setActiveItem } = useNavigationMenuContext();
-    const isOpen = activeItem === itemIdRef.current;
-    const handleMouseEnter = useCallback8(() => {
-      setActiveItem(itemIdRef.current);
-    }, [setActiveItem]);
-    const handleMouseLeave = useCallback8(() => {
-      setActiveItem(null);
-    }, [setActiveItem]);
-    return /* @__PURE__ */ jsx28(NavigationMenuItemContext.Provider, { value: { itemId: itemIdRef.current }, children: /* @__PURE__ */ jsx28(
-      "div",
-      {
-        ref,
-        className: cn28("relative", className),
-        onMouseEnter: handleMouseEnter,
-        onMouseLeave: handleMouseLeave,
-        "data-state": isOpen ? "open" : "closed",
-        ...props,
-        children
-      }
-    ) });
-  }
-);
-var NavigationMenuLink = forwardRef28(
-  ({ className, active = false, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx28(
-      "a",
-      {
-        ref,
-        className: cn28(
-          "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
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-var NavigationMenuTrigger = forwardRef28(
-  ({ className, children, ...props }, ref) => {
-    const { activeItem } = useNavigationMenuContext();
-    const { itemId } = useNavigationMenuItemContext();
-    const isOpen = activeItem === itemId;
-    return /* @__PURE__ */ jsxs18(
-      "button",
-      {
-        ref,
-        type: "button",
-        "aria-expanded": isOpen,
-        className: cn28(
-          "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
-        ),
-        ...props,
-        children: [
-          children,
-          /* @__PURE__ */ jsx28(
-            ChevronDown2,
-            {
-              size: 14,
-              className: cn28("transition-transform duration-200", isOpen && "rotate-180")
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-var NavigationMenuContent = forwardRef28(
-  ({ className, children, ...props }, ref) => {
-    const { activeItem } = useNavigationMenuContext();
-    const { itemId } = useNavigationMenuItemContext();
-    const isOpen = activeItem === itemId;
-    if (!isOpen) return null;
-    return /* @__PURE__ */ jsx28(
-      "div",
-      {
-        ref,
-        className: cn28(
-          "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
-        ),
-        ...props,
-        children
-      }
-    );
-  }
-);
-NavigationMenu.displayName = "NavigationMenu";
-NavigationMenuItem.displayName = "NavigationMenuItem";
-NavigationMenuLink.displayName = "NavigationMenuLink";
-NavigationMenuTrigger.displayName = "NavigationMenuTrigger";
-NavigationMenuContent.displayName = "NavigationMenuContent";
-
-// src/components/avatar.tsx
-import {
-  createContext as createContext10,
-  forwardRef as forwardRef29,
-  useContext as useContext10,
-  useEffect as useEffect8,
-  useState as useState10
-} from "react";
-import { User } from "lucide-react";
-import { cva as cva8 } from "class-variance-authority";
-import { cn as cn29 } from "@ug666/ui-utils";
-import { jsx as jsx29 } from "react/jsx-runtime";
-var AvatarContext = createContext10(null);
-function useAvatarContext(componentName) {
-  const ctx = useContext10(AvatarContext);
-  if (!ctx) {
-    throw new Error(`<${componentName}> \u5FC5\u987B\u5728 <Avatar> \u5185\u4F7F\u7528`);
-  }
-  return ctx;
-}
-var avatarVariants = cva8(
-  "relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-surface-3",
+    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" }
+    ]
+  },
   {
-    variants: {
-      size: {
-        sm: "h-8 w-8 text-xs",
-        md: "h-10 w-10 text-sm",
-        lg: "h-14 w-14 text-base",
-        xl: "h-20 w-20 text-xl"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var Avatar = forwardRef29(
-  ({ size, className, children, ...props }, ref) => {
-    const [imageLoadingStatus, setImageLoadingStatus] = useState10("idle");
-    return /* @__PURE__ */ jsx29(AvatarContext.Provider, { value: { imageLoadingStatus, setImageLoadingStatus }, children: /* @__PURE__ */ jsx29("span", { ref, className: cn29(avatarVariants({ size }), className), ...props, children }) });
-  }
-);
-var AvatarImage = forwardRef29(
-  ({ src, alt = "", className, onLoad, onError, ...props }, ref) => {
-    const { imageLoadingStatus, setImageLoadingStatus } = useAvatarContext("AvatarImage");
-    useEffect8(() => {
-      if (!src) {
-        setImageLoadingStatus("error");
-        return;
-      }
-      setImageLoadingStatus("loading");
-    }, [src, setImageLoadingStatus]);
-    if (imageLoadingStatus !== "loaded" && imageLoadingStatus !== "loading") {
-      return null;
-    }
-    return /* @__PURE__ */ jsx29(
-      "img",
-      {
-        ref,
-        src,
-        alt,
-        onLoad: (event) => {
-          setImageLoadingStatus("loaded");
-          onLoad?.(event);
-        },
-        onError: (event) => {
-          setImageLoadingStatus("error");
-          onError?.(event);
-        },
-        className: cn29(
-          "h-full w-full object-cover",
-          imageLoadingStatus === "loading" && "invisible",
-          className
-        ),
-        ...props
-      }
-    );
-  }
-);
-var AvatarFallback = forwardRef29(
-  ({ className, children, ...props }, ref) => {
-    const { imageLoadingStatus } = useAvatarContext("AvatarFallback");
-    if (imageLoadingStatus === "loaded") return null;
-    return /* @__PURE__ */ jsx29(
-      "span",
-      {
-        ref,
-        className: cn29(
-          "absolute inset-0 flex items-center justify-center font-medium text-text-secondary",
-          className
-        ),
-        ...props,
-        children: children ?? /* @__PURE__ */ jsx29(User, { size: 16 })
-      }
-    );
-  }
-);
-Avatar.displayName = "Avatar";
-AvatarImage.displayName = "AvatarImage";
-AvatarFallback.displayName = "AvatarFallback";
-
-// src/components/avatar-group.tsx
-import { forwardRef as forwardRef30, Children, isValidElement } from "react";
-import { cn as cn30 } from "@ug666/ui-utils";
-import { jsx as jsx30, jsxs as jsxs19 } from "react/jsx-runtime";
-var SIZE_CLASSES = {
-  sm: "h-8 w-8 text-xs",
-  default: "h-10 w-10 text-sm",
-  lg: "h-14 w-14 text-base"
-};
-var RING_SIZE_CLASSES = {
-  sm: "ring-2",
-  default: "ring-2",
-  lg: "ring-[3px]"
-};
-var OVERLAP_CLASSES = {
-  sm: "-ml-2",
-  default: "-ml-3",
-  lg: "-ml-4"
-};
-var AvatarGroup = forwardRef30(
-  ({ max = 5, size = "default", className, children, ...props }, ref) => {
-    const allItems = Children.toArray(children).filter(isValidElement);
-    const visibleItems = allItems.slice(0, max);
-    const overflowCount = allItems.length - max;
-    return /* @__PURE__ */ jsxs19(
-      "div",
-      {
-        ref,
-        className: cn30("flex items-center", className),
-        ...props,
-        children: [
-          visibleItems.map((child, idx) => /* @__PURE__ */ jsx30(
-            "span",
-            {
-              className: cn30(
-                "relative inline-flex shrink-0 overflow-hidden rounded-full ring-surface-1",
-                SIZE_CLASSES[size],
-                RING_SIZE_CLASSES[size],
-                idx > 0 && OVERLAP_CLASSES[size]
-              ),
-              children: child
-            },
-            idx
-          )),
-          overflowCount > 0 && /* @__PURE__ */ jsxs19(
-            "span",
-            {
-              className: cn30(
-                "relative inline-flex shrink-0 items-center justify-center rounded-full bg-surface-3 font-medium text-text-secondary ring-surface-1",
-                SIZE_CLASSES[size],
-                RING_SIZE_CLASSES[size],
-                OVERLAP_CLASSES[size]
-              ),
-              "aria-label": `\u8FD8\u6709 ${overflowCount} \u4EBA`,
-              children: [
-                "+",
-                overflowCount
-              ]
-            }
-          )
-        ]
-      }
-    );
-  }
-);
-AvatarGroup.displayName = "AvatarGroup";
-
-// src/components/tooltip.tsx
-import { createContext as createContext11, forwardRef as forwardRef31, useCallback as useCallback9, useContext as useContext11, useEffect as useEffect9, useRef as useRef8, useState as useState11 } from "react";
-import { createPortal as createPortal8 } from "react-dom";
-import { cn as cn31 } from "@ug666/ui-utils";
-import { jsx as jsx31 } from "react/jsx-runtime";
-var TooltipContext = createContext11(null);
-function assignRef4(ref, value) {
-  if (typeof ref === "function") {
-    ref(value);
-    return;
-  }
-  if (ref) {
-    ref.current = value;
-  }
-}
-function useTooltipContext() {
-  const ctx = useContext11(TooltipContext);
-  if (!ctx) throw new Error("Tooltip \u5B50\u7EC4\u4EF6\u5FC5\u987B\u5728 <Tooltip> \u5185\u4F7F\u7528");
-  return ctx;
-}
-var Tooltip = forwardRef31(({ children, className }, ref) => {
-  const [open, setOpen] = useState11(false);
-  const triggerRef = useRef8(null);
-  const delayRef = useRef8(null);
-  useEffect9(() => {
-    return () => {
-      if (delayRef.current) {
-        clearTimeout(delayRef.current);
-      }
-    };
-  }, []);
-  return /* @__PURE__ */ jsx31(TooltipContext.Provider, { value: { open, setOpen, triggerRef, delayRef }, children: /* @__PURE__ */ jsx31("span", { ref, className: cn31("relative inline-flex", className), children }) });
-});
-var TooltipTrigger = forwardRef31(({ children, className }, ref) => {
-  const { setOpen, triggerRef, delayRef } = useTooltipContext();
-  const handleRef = useCallback9(
-    (node) => {
-      triggerRef.current = node;
-      assignRef4(ref, node);
-    },
-    [ref, triggerRef]
-  );
-  function handleMouseEnter() {
-    delayRef.current = setTimeout(() => setOpen(true), 200);
-  }
-  function handleMouseLeave() {
-    if (delayRef.current) clearTimeout(delayRef.current);
-    setOpen(false);
-  }
-  return /* @__PURE__ */ jsx31(
-    "span",
-    {
-      ref: handleRef,
-      className: cn31("inline-flex", className),
-      onMouseEnter: handleMouseEnter,
-      onMouseLeave: handleMouseLeave,
-      children
-    }
-  );
-});
-var arrowPositionClasses = {
-  top: "after:absolute after:top-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-t-text-primary",
-  bottom: "after:absolute after:bottom-full after:left-1/2 after:-translate-x-1/2 after:border-4 after:border-transparent after:border-b-text-primary",
-  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 = forwardRef31(({ children, side = "top", className }, ref) => {
-  const { open, triggerRef } = useTooltipContext();
-  const contentRef = useRef8(null);
-  const [pos, setPos] = useState11({ top: 0, left: 0 });
-  const handleRef = useCallback9(
-    (node) => {
-      contentRef.current = node;
-      assignRef4(ref, node);
-    },
-    [ref]
-  );
-  const updatePos = useCallback9(() => {
-    if (!triggerRef.current || !contentRef.current) return;
-    const rect = triggerRef.current.getBoundingClientRect();
-    const cw = contentRef.current.offsetWidth;
-    const ch = contentRef.current.offsetHeight;
-    const gap = 8;
-    let top = 0;
-    let left = 0;
-    if (side === "top") {
-      top = rect.top + window.scrollY - ch - gap;
-      left = rect.left + window.scrollX + rect.width / 2 - cw / 2;
-    } else if (side === "bottom") {
-      top = rect.bottom + window.scrollY + gap;
-      left = rect.left + window.scrollX + rect.width / 2 - cw / 2;
-    } else if (side === "left") {
-      top = rect.top + window.scrollY + rect.height / 2 - ch / 2;
-      left = rect.left + window.scrollX - cw - gap;
-    } else {
-      top = rect.top + window.scrollY + rect.height / 2 - ch / 2;
-      left = rect.right + window.scrollX + gap;
-    }
-    setPos({ top, left });
-  }, [side, triggerRef]);
-  useEffect9(() => {
-    if (open) updatePos();
-  }, [open, updatePos]);
-  if (!open) return null;
-  return createPortal8(
-    /* @__PURE__ */ jsx31(
-      "div",
-      {
-        ref: handleRef,
-        style: { top: pos.top, left: pos.left },
-        className: cn31(
-          "absolute z-50 rounded-md bg-text-primary px-2.5 py-1.5 text-xs text-surface-1 shadow-md",
-          arrowPositionClasses[side],
-          className
-        ),
-        children
-      }
-    ),
-    document.body
-  );
-});
-Tooltip.displayName = "Tooltip";
-TooltipTrigger.displayName = "TooltipTrigger";
-TooltipContent.displayName = "TooltipContent";
-
-// src/components/alert.tsx
-import { forwardRef as forwardRef32 } from "react";
-import { Info, CheckCircle, AlertTriangle, AlertCircle } from "lucide-react";
-import { cva as cva9 } from "class-variance-authority";
-import { cn as cn32 } from "@ug666/ui-utils";
-import { jsx as jsx32, jsxs as jsxs20 } from "react/jsx-runtime";
-var alertVariants = cva9(
-  "relative flex gap-3 rounded-md border-l-4 p-4",
+    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" }
+    ]
+  },
   {
-    variants: {
-      variant: {
-        default: "border-l-primary bg-info-soft text-info-soft-fg",
-        info: "border-l-info bg-info-soft text-info-soft-fg",
-        success: "border-l-success bg-success-soft text-success-soft-fg",
-        warning: "border-l-warning bg-warning-soft text-warning-soft-fg",
-        destructive: "border-l-danger bg-danger-soft text-danger-soft-fg"
-      }
-    },
-    defaultVariants: { variant: "default" }
-  }
-);
-var iconMap = {
-  default: AlertCircle,
-  info: Info,
-  success: CheckCircle,
-  warning: AlertTriangle,
-  destructive: AlertCircle
-};
-var iconColorMap = {
-  default: "text-info",
-  info: "text-info",
-  success: "text-success",
-  warning: "text-warning",
-  destructive: "text-danger"
-};
-var Alert = forwardRef32(
-  ({ variant = "default", className, children, ...props }, ref) => {
-    const Icon = iconMap[variant ?? "default"];
-    const iconColor = iconColorMap[variant ?? "default"];
-    return /* @__PURE__ */ jsxs20(
-      "div",
-      {
-        ref,
-        role: "alert",
-        className: cn32(alertVariants({ variant }), className),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx32(Icon, { size: 18, className: cn32("mt-0.5 shrink-0", iconColor) }),
-          /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-0.5", children })
-        ]
-      }
-    );
-  }
-);
-var AlertTitle = forwardRef32(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx32("p", { ref, className: cn32("text-sm font-semibold leading-5", className), ...props });
-});
-var AlertDescription = forwardRef32(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx32("p", { ref, className: cn32("text-sm leading-5 opacity-90", className), ...props });
-});
-Alert.displayName = "Alert";
-AlertTitle.displayName = "AlertTitle";
-AlertDescription.displayName = "AlertDescription";
-
-// src/components/breadcrumb.tsx
-import { forwardRef as forwardRef33 } from "react";
-import { ChevronRight as ChevronRight2 } from "lucide-react";
-import { cn as cn33 } from "@ug666/ui-utils";
-import { jsx as jsx33 } from "react/jsx-runtime";
-var Breadcrumb = forwardRef33(({ className, children, ...props }, ref) => {
-  return /* @__PURE__ */ jsx33("nav", { ref, "aria-label": "\u9762\u5305\u5C51\u5BFC\u822A", className: cn33(className), ...props, children: /* @__PURE__ */ jsx33("ol", { className: "flex flex-wrap items-center gap-0 text-sm text-text-secondary", children }) });
-});
-var BreadcrumbItem = forwardRef33(({ className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx33("li", { ref, className: cn33("flex items-center gap-1", className), ...props });
-});
-var BreadcrumbLink = forwardRef33(
-  ({ current = false, className, children, href, ...props }, ref) => {
-    if (current) {
-      return /* @__PURE__ */ jsx33("span", { "aria-current": "page", className: cn33("font-medium text-text-primary", className), children });
-    }
-    return /* @__PURE__ */ jsx33(
-      "a",
-      {
-        ref,
-        href,
-        className: cn33("transition-colors hover:text-text-primary", className),
-        ...props,
-        children
-      }
-    );
-  }
-);
-var BreadcrumbSeparator = forwardRef33(
-  ({ className, children, ...props }, ref) => {
-    return /* @__PURE__ */ jsx33(
-      "li",
-      {
-        ref,
-        role: "presentation",
-        "aria-hidden": "true",
-        className: cn33("text-text-tertiary", className),
-        ...props,
-        children: children ?? /* @__PURE__ */ jsx33(ChevronRight2, { size: 14 })
-      }
-    );
-  }
-);
-Breadcrumb.displayName = "Breadcrumb";
-BreadcrumbItem.displayName = "BreadcrumbItem";
-BreadcrumbLink.displayName = "BreadcrumbLink";
-BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
-
-// src/components/switch.tsx
-import { forwardRef as forwardRef34, useId as useId5 } from "react";
-import { cn as cn34 } from "@ug666/ui-utils";
-import { jsx as jsx34, jsxs as jsxs21 } from "react/jsx-runtime";
-var Switch = forwardRef34(
-  ({
-    checked,
-    onCheckedChange,
-    disabled = false,
-    label,
-    labelPlacement = "right",
-    className,
-    id,
-    ...props
-  }, ref) => {
-    const generatedId = useId5();
-    const switchId = id ?? generatedId;
-    const track = /* @__PURE__ */ jsx34(
-      "button",
-      {
-        ref,
-        id: switchId,
-        type: "button",
-        role: "switch",
-        "aria-checked": checked,
-        disabled,
-        onClick: () => !disabled && onCheckedChange(!checked),
-        className: cn34(
-          "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",
-          "disabled:cursor-not-allowed disabled:opacity-50",
-          checked ? "bg-primary" : "bg-surface-3",
-          className
-        ),
-        ...props,
-        children: /* @__PURE__ */ jsx34(
-          "span",
-          {
-            className: cn34(
-              "pointer-events-none block h-5 w-5 rounded-full bg-white shadow-sm ring-0 transition-transform duration-200",
-              checked ? "translate-x-5" : "translate-x-0"
-            )
-          }
-        )
-      }
-    );
-    if (!label) return track;
-    return /* @__PURE__ */ jsxs21(
-      "label",
-      {
-        htmlFor: switchId,
-        className: cn34(
-          "inline-flex items-center gap-2 cursor-pointer",
-          disabled && "cursor-not-allowed opacity-50"
-        ),
-        children: [
-          labelPlacement === "left" && /* @__PURE__ */ jsx34("span", { className: "text-sm font-medium text-text-primary", children: label }),
-          track,
-          labelPlacement === "right" && /* @__PURE__ */ jsx34("span", { className: "text-sm font-medium text-text-primary", children: label })
-        ]
-      }
-    );
-  }
-);
-Switch.displayName = "Switch";
-
-// src/components/textarea.tsx
-import { forwardRef as forwardRef35, useId as useId6 } from "react";
-import { cn as cn35 } from "@ug666/ui-utils";
-import { jsx as jsx35, jsxs as jsxs22 } from "react/jsx-runtime";
-var Textarea = forwardRef35(
-  ({ className, label, error, helperText, id, rows = 3, ...props }, ref) => {
-    const generatedId = useId6();
-    const textareaId = id ?? generatedId;
-    return /* @__PURE__ */ jsxs22("div", { className: "flex flex-col gap-1", children: [
-      label && /* @__PURE__ */ jsx35("label", { htmlFor: textareaId, className: "text-sm font-medium text-text-primary", children: label }),
-      /* @__PURE__ */ jsx35(
-        "textarea",
-        {
-          ref,
-          id: textareaId,
-          rows,
-          className: cn35(
-            "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",
-            "resize-y",
-            error ? "border-danger focus-visible:ring-danger" : "border-border-strong focus-visible:ring-ring/30",
-            className
-          ),
-          ...props
-        }
-      ),
-      error && /* @__PURE__ */ jsx35("p", { className: "text-xs text-danger", children: error }),
-      !error && helperText && /* @__PURE__ */ jsx35("p", { className: "text-xs text-text-secondary", children: helperText })
-    ] });
-  }
-);
-Textarea.displayName = "Textarea";
-
-// src/components/skeleton.tsx
-import { forwardRef as forwardRef36 } from "react";
-import { cva as cva10 } from "class-variance-authority";
-import { cn as cn36 } from "@ug666/ui-utils";
-import { jsx as jsx36 } from "react/jsx-runtime";
-var skeletonVariants = cva10(
-  "animate-pulse bg-surface-3",
+    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" }
+    ]
+  },
   {
-    variants: {
-      variant: {
-        text: "h-4 w-full rounded",
-        circle: "rounded-full",
-        rect: "rounded-md"
-      }
-    },
-    defaultVariants: { variant: "rect" }
-  }
-);
-var Skeleton = forwardRef36(({ variant, className, ...props }, ref) => {
-  return /* @__PURE__ */ jsx36("div", { ref, className: cn36(skeletonVariants({ variant }), className), "aria-hidden": "true", ...props });
-});
-Skeleton.displayName = "Skeleton";
-
-// src/components/progress.tsx
-import { forwardRef as forwardRef37 } from "react";
-import { cn as cn37 } from "@ug666/ui-utils";
-import { jsx as jsx37, jsxs as jsxs23 } from "react/jsx-runtime";
-var Progress = forwardRef37(({
-  value,
-  max = 100,
-  showLabel = false,
-  color = "bg-indigo-500",
-  className,
-  ...props
-}, ref) => {
-  const clamped = Math.min(Math.max(value, 0), max);
-  const percent = Math.round(clamped / max * 100);
-  return /* @__PURE__ */ jsxs23("div", { ref, className: cn37("flex items-center gap-3", className), ...props, children: [
-    /* @__PURE__ */ jsx37(
-      "div",
-      {
-        role: "progressbar",
-        "aria-valuenow": clamped,
-        "aria-valuemin": 0,
-        "aria-valuemax": max,
-        className: "h-2 w-full overflow-hidden rounded-full bg-surface-2",
-        children: /* @__PURE__ */ jsx37(
-          "div",
-          {
-            className: cn37("h-full rounded-full transition-all duration-500 ease-out", color),
-            style: { width: `${percent}%` }
-          }
-        )
-      }
-    ),
-    showLabel && /* @__PURE__ */ jsxs23("span", { className: "shrink-0 text-xs font-medium text-text-secondary tabular-nums w-9 text-right", children: [
-      percent,
-      "%"
-    ] })
-  ] });
-});
-Progress.displayName = "Progress";
-
-// src/components/sheet.tsx
-import { forwardRef as forwardRef38 } from "react";
-import { createPortal as createPortal9 } from "react-dom";
-import { X as X5 } from "lucide-react";
-import { cn as cn38 } from "@ug666/ui-utils";
-import { jsx as jsx38, jsxs as jsxs24 } from "react/jsx-runtime";
-var Sheet = forwardRef38(({ open, onClose, side = "right", title, children, className }, ref) => {
-  useEscapeKey(open, onClose);
-  if (!open) return null;
-  return createPortal9(
-    /* @__PURE__ */ jsxs24("div", { className: "fixed inset-0 z-50 flex", role: "dialog", "aria-modal": "true", children: [
-      /* @__PURE__ */ jsx38(
-        "div",
-        {
-          className: "absolute inset-0 bg-overlay transition-opacity",
-          onClick: onClose,
-          "aria-hidden": "true"
-        }
-      ),
-      /* @__PURE__ */ jsxs24(
-        "div",
-        {
-          ref,
-          className: cn38(
-            "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",
-            className
-          ),
-          children: [
-            title && /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between border-b border-border-base px-5 py-4", children: [
-              /* @__PURE__ */ jsx38("h2", { className: "text-base font-semibold text-text-primary", children: title }),
-              /* @__PURE__ */ jsx38(
-                "button",
-                {
-                  type: "button",
-                  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__ */ jsx38(X5, { size: 18 })
-                }
-              )
-            ] }),
-            /* @__PURE__ */ jsx38("div", { className: "flex-1 overflow-y-auto px-5 py-4", children })
-          ]
-        }
-      )
-    ] }),
-    document.body
-  );
-});
-Sheet.displayName = "Sheet";
-
-// src/components/empty-state.tsx
-import { forwardRef as forwardRef39 } from "react";
-import { cn as cn39 } from "@ug666/ui-utils";
-import { jsx as jsx39, jsxs as jsxs25 } from "react/jsx-runtime";
-var EmptyState = forwardRef39(
-  ({ icon: Icon, title, description, action, className, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs25(
-      "div",
-      {
-        ref,
-        className: cn39(
-          "flex flex-col items-center justify-center gap-3 py-16 text-center",
-          className
-        ),
-        ...props,
-        children: [
-          Icon && /* @__PURE__ */ jsx39("div", { className: "flex h-14 w-14 items-center justify-center rounded-full bg-surface-2", children: /* @__PURE__ */ jsx39(Icon, { size: 28, className: "text-text-tertiary" }) }),
-          /* @__PURE__ */ jsxs25("div", { className: "flex flex-col gap-1", children: [
-            /* @__PURE__ */ jsx39("p", { className: "text-base font-semibold text-text-primary", children: title }),
-            description && /* @__PURE__ */ jsx39("p", { className: "max-w-xs text-sm text-text-secondary", children: description })
-          ] }),
-          action && /* @__PURE__ */ jsx39("div", { className: "mt-1", children: action })
-        ]
-      }
-    );
-  }
-);
-EmptyState.displayName = "EmptyState";
-
-// src/components/separator.tsx
-import { forwardRef as forwardRef40 } from "react";
-import { cn as cn40 } from "@ug666/ui-utils";
-import { jsx as jsx40 } from "react/jsx-runtime";
-var ORIENTATION_CLASSES = {
-  horizontal: "h-px w-full bg-border-base",
-  vertical: "w-px h-full bg-border-base"
-};
-var Separator = forwardRef40(
-  ({ orientation = "horizontal", className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx40(
-      "div",
-      {
-        ref,
-        role: "separator",
-        "aria-orientation": orientation,
-        className: cn40(ORIENTATION_CLASSES[orientation], className),
-        ...props
-      }
-    );
-  }
-);
-Separator.displayName = "Separator";
-
-// src/components/descriptions.tsx
-import { forwardRef as forwardRef41, Children as Children2, isValidElement as isValidElement2 } from "react";
-import { cn as cn41 } from "@ug666/ui-utils";
-import { Fragment, jsx as jsx41, jsxs as jsxs26 } from "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"
-};
-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"
-};
-var DescriptionsItem = forwardRef41(
-  ({ label, children, className, span: _span, ...props }, ref) => {
-    return /* @__PURE__ */ jsxs26("div", { ref, className, ...props, children: [
-      /* @__PURE__ */ jsx41("span", { className: "text-text-secondary", children: label }),
-      /* @__PURE__ */ jsx41("span", { className: "text-text-primary", children })
-    ] });
-  }
-);
-DescriptionsItem.displayName = "DescriptionsItem";
-var Descriptions = forwardRef41(
-  ({ column = 2, bordered = false, size = "default", title, className, children, ...props }, ref) => {
-    const items = Children2.toArray(children).filter(
-      (child) => isValidElement2(child) && child.type.displayName === "DescriptionsItem"
-    );
-    if (bordered) {
-      const rows = [];
-      let currentRow = [];
-      let currentColCount = 0;
-      for (const item of items) {
-        const span = item.props.span ?? 1;
-        if (currentColCount + span > column) {
-          rows.push(currentRow);
-          currentRow = [];
-          currentColCount = 0;
-        }
-        currentRow.push({ label: item.props.label, value: item.props.children, span });
-        currentColCount += span;
-      }
-      if (currentRow.length > 0) rows.push(currentRow);
-      return /* @__PURE__ */ jsxs26("div", { ref, className: cn41("w-full", className), ...props, children: [
-        title && /* @__PURE__ */ jsx41("div", { className: "mb-3 text-base font-semibold text-text-primary", children: title }),
-        /* @__PURE__ */ jsx41("table", { className: "w-full border-collapse border border-border-base", children: /* @__PURE__ */ jsx41("tbody", { children: rows.map((row, rowIdx) => /* @__PURE__ */ jsx41("tr", { children: row.map((cell, cellIdx) => /* @__PURE__ */ jsxs26(Fragment, { children: [
-          /* @__PURE__ */ jsx41(
-            "td",
-            {
-              className: cn41(
-                "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__ */ jsx41(
-            "td",
-            {
-              className: cn41(
-                "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)) }) })
-      ] });
-    }
-    const GRID_COLS = {
-      1: "grid-cols-1",
-      2: "grid-cols-2",
-      3: "grid-cols-3",
-      4: "grid-cols-4"
-    };
-    return /* @__PURE__ */ jsxs26("div", { ref, className: cn41("w-full", className), ...props, children: [
-      title && /* @__PURE__ */ jsx41("div", { className: "mb-3 text-base font-semibold text-text-primary", children: title }),
-      /* @__PURE__ */ jsx41("div", { className: cn41("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__ */ jsxs26("div", { className: cn41("flex flex-col gap-0.5", colSpanClass, item.props.className), children: [
-          /* @__PURE__ */ jsx41("span", { className: cn41("font-medium text-text-secondary", size === "sm" ? "text-xs" : size === "lg" ? "text-sm" : "text-xs"), children: item.props.label }),
-          /* @__PURE__ */ jsx41("span", { className: cn41("text-text-primary", size === "sm" ? "text-sm" : size === "lg" ? "text-base" : "text-sm"), children: item.props.children })
-        ] }, idx);
-      }) })
-    ] });
-  }
-);
-Descriptions.displayName = "Descriptions";
-
-// src/components/statistic.tsx
-import { forwardRef as forwardRef42 } from "react";
-import { TrendingUp, TrendingDown, Minus as Minus3 } from "lucide-react";
-import { cn as cn42 } from "@ug666/ui-utils";
-import { jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
-var SIZE_TITLE_CLASSES = {
-  sm: "text-xs",
-  default: "text-sm",
-  lg: "text-base"
-};
-var SIZE_VALUE_CLASSES2 = {
-  sm: "text-2xl",
-  default: "text-3xl",
-  lg: "text-4xl"
-};
-var SIZE_SUFFIX_CLASSES = {
-  sm: "text-xs",
-  default: "text-sm",
-  lg: "text-base"
-};
-var TREND_ICON_COLOR = {
-  up: "text-success",
-  down: "text-danger",
-  flat: "text-text-secondary"
-};
-var TREND_TEXT_COLOR = {
-  up: "text-success",
-  down: "text-danger",
-  flat: "text-text-secondary"
-};
-function formatValue(value, precision) {
-  if (typeof value === "string") return value;
-  return new Intl.NumberFormat("zh-CN", {
-    minimumFractionDigits: precision ?? 0,
-    maximumFractionDigits: precision ?? 0
-  }).format(value);
-}
-var Statistic = forwardRef42(
-  ({ title, value, precision, prefix, suffix, trend, change, size = "default", className, ...props }, ref) => {
-    const TrendIcon = trend === "up" ? TrendingUp : trend === "down" ? TrendingDown : trend === "flat" ? Minus3 : null;
-    const iconSize = size === "sm" ? 14 : size === "lg" ? 18 : 16;
-    return /* @__PURE__ */ jsxs27("div", { ref, className: cn42("flex flex-col gap-1", className), ...props, children: [
-      title && /* @__PURE__ */ jsx42("span", { className: cn42("font-medium text-text-secondary", SIZE_TITLE_CLASSES[size]), children: title }),
-      /* @__PURE__ */ jsxs27("div", { className: "flex items-baseline gap-1", children: [
-        prefix && /* @__PURE__ */ jsx42("span", { className: cn42("text-text-primary", SIZE_SUFFIX_CLASSES[size]), children: prefix }),
-        /* @__PURE__ */ jsx42("span", { className: cn42("font-bold tabular-nums text-text-primary", SIZE_VALUE_CLASSES2[size]), children: formatValue(value, precision) }),
-        suffix && /* @__PURE__ */ jsx42("span", { className: cn42("text-text-secondary", SIZE_SUFFIX_CLASSES[size]), children: suffix })
-      ] }),
-      (trend || change) && /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1", children: [
-        TrendIcon && trend && /* @__PURE__ */ jsx42(TrendIcon, { size: iconSize, className: TREND_ICON_COLOR[trend] }),
-        change && trend && /* @__PURE__ */ jsx42("span", { className: cn42("text-xs font-medium", TREND_TEXT_COLOR[trend]), children: change })
-      ] })
-    ] });
-  }
-);
-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"
+    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" }
+    ]
   },
-  radius: { sm: "0.375rem", md: "0.5rem", lg: "0.75rem", full: "9999px" },
-  fontFamily: { sans: "system-ui, -apple-system, sans-serif", mono: "ui-monospace, monospace" }
-};
-
-// src/index.ts
-import { cn as cn43 } from "@ug666/ui-utils";
+  {
+    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: []
+  }
+];
 export {
   Accordion,
   AccordionContent,
@@ -3358,14 +407,121 @@ export {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  Accordion as UGAccordion,
+  AccordionContent as UGAccordionContent,
+  AccordionItem as UGAccordionItem,
+  AccordionTrigger as UGAccordionTrigger,
+  Alert as UGAlert,
+  AlertDescription as UGAlertDescription,
+  AlertTitle as UGAlertTitle,
+  Avatar as UGAvatar,
+  AvatarFallback as UGAvatarFallback,
+  AvatarGroup as UGAvatarGroup,
+  AvatarImage as UGAvatarImage,
+  Badge as UGBadge,
+  Breadcrumb as UGBreadcrumb,
+  BreadcrumbItem as UGBreadcrumbItem,
+  BreadcrumbLink as UGBreadcrumbLink,
+  BreadcrumbSeparator as UGBreadcrumbSeparator,
+  Button as UGButton,
+  Card as UGCard,
+  CardContent as UGCardContent,
+  CardDescription as UGCardDescription,
+  CardFooter as UGCardFooter,
+  CardHeader as UGCardHeader,
+  CardTitle as UGCardTitle,
+  Checkbox as UGCheckbox,
+  ContextMenu as UGContextMenu,
+  ContextMenuContent as UGContextMenuContent,
+  ContextMenuItem as UGContextMenuItem,
+  ContextMenuSeparator as UGContextMenuSeparator,
+  ContextMenuTrigger as UGContextMenuTrigger,
+  Descriptions as UGDescriptions,
+  DescriptionsItem as UGDescriptionsItem,
+  Dialog as UGDialog,
+  Drawer as UGDrawer,
+  DrawerClose as UGDrawerClose,
+  DrawerContent as UGDrawerContent,
+  DrawerDescription as UGDrawerDescription,
+  DrawerFooter as UGDrawerFooter,
+  DrawerHeader as UGDrawerHeader,
+  DrawerTitle as UGDrawerTitle,
+  DropdownMenu as UGDropdown,
+  DropdownContent as UGDropdownContent,
+  DropdownItem as UGDropdownItem,
+  DropdownMenu as UGDropdownMenu,
+  DropdownSeparator as UGDropdownSeparator,
+  DropdownTrigger as UGDropdownTrigger,
+  EmptyState as UGEmptyState,
+  Form as UGForm,
+  FormControl as UGFormControl,
+  FormDescription as UGFormDescription,
+  FormField as UGFormField,
+  FormItem as UGFormItem,
+  FormLabel as UGFormLabel,
+  FormMessage as UGFormMessage,
+  Input as UGInput,
+  Label as UGLabel,
+  Modal as UGModal,
+  ModalCloseButton as UGModalCloseButton,
+  ModalContent as UGModalContent,
+  ModalFooter as UGModalFooter,
+  ModalHeader as UGModalHeader,
+  ModalTitle as UGModalTitle,
+  NavigationMenu as UGNavigationMenu,
+  NavigationMenuContent as UGNavigationMenuContent,
+  NavigationMenuItem as UGNavigationMenuItem,
+  NavigationMenuLink as UGNavigationMenuLink,
+  NavigationMenuTrigger as UGNavigationMenuTrigger,
+  NumberInput as UGNumberInput,
+  OTPInput as UGOTPInput,
+  Pagination as UGPagination,
+  Popover as UGPopover,
+  PopoverContent as UGPopoverContent,
+  PopoverTrigger as UGPopoverTrigger,
+  Progress as UGProgress,
+  Radio as UGRadio,
+  RadioGroup as UGRadioGroup,
+  Select as UGSelect,
+  Separator as UGSeparator,
+  Sheet as UGSheet,
+  Sidebar as UGSidebar,
+  Skeleton as UGSkeleton,
+  Slider as UGSlider,
+  Spinner as UGSpinner,
+  Statistic as UGStatistic,
+  Steps as UGSteps,
+  Switch as UGSwitch,
+  Table as UGTable,
+  TableBody as UGTableBody,
+  TableCell as UGTableCell,
+  TableHead as UGTableHead,
+  TableHeader as UGTableHeader,
+  TableRow as UGTableRow,
+  Tabs as UGTabs,
+  TabsContent as UGTabsContent,
+  TabsList as UGTabsList,
+  TabsTrigger as UGTabsTrigger,
+  Tag as UGTag,
+  Textarea as UGTextarea,
+  Toaster as UGToaster,
+  Tooltip as UGTooltip,
+  TooltipContent as UGTooltipContent,
+  TooltipTrigger as UGTooltipTrigger,
   badgeVariants,
   buttonVariants,
   checkboxVariants,
-  cn43 as cn,
+  cn,
   numberInputVariants,
+  reactComponentLayers,
   tagVariants,
   theme,
   toast,
+  badgeVariants as ugBadgeVariants,
+  buttonVariants as ugButtonVariants,
+  checkboxVariants as ugCheckboxVariants,
+  numberInputVariants as ugNumberInputVariants,
+  tagVariants as ugTagVariants,
   useClickOutside,
   useCopyToClipboard,
   useDebounce,