@ug666/ui-react 0.1.0 → 0.2.0

package/dist/patterns/index.cjs

@@ -0,0 +1,758 @@
+"use strict";
+"use client";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/patterns/index.ts
+var patterns_exports = {};
+__export(patterns_exports, {
+  AdminShell: () => AdminShell,
+  ConfirmDialog: () => ConfirmDialog,
+  CopyField: () => CopyField,
+  PageHeader: () => PageHeader,
+  UGAdminShell: () => AdminShell,
+  UGConfirmDialog: () => ConfirmDialog,
+  UGCopyField: () => CopyField,
+  UGPageHeader: () => PageHeader
+});
+module.exports = __toCommonJS(patterns_exports);
+
+// src/patterns/admin-shell.tsx
+var import_react3 = require("react");
+var import_lucide_react3 = require("lucide-react");
+
+// src/components/button.tsx
+var import_react = require("react");
+var import_lucide_react = require("lucide-react");
+var import_class_variance_authority = require("class-variance-authority");
+
+// src/internal/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/components/button.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg text-sm font-medium transition-[background,border-color,color,box-shadow,transform] duration-150 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-fg shadow-sm hover:bg-primary-hover hover:shadow-md focus-visible:ring-ring",
+        destructive: "bg-danger text-danger-fg shadow-sm hover:bg-danger-hover hover:shadow-md focus-visible:ring-danger",
+        outline: "border border-border-strong bg-surface-1 text-text-primary shadow-sm hover:border-primary/55 hover:bg-surface-2 focus-visible:ring-ring/30",
+        secondary: "border border-border-base bg-surface-2 text-text-primary shadow-sm hover:bg-surface-3 focus-visible:ring-ring/30",
+        ghost: "text-text-primary hover:bg-surface-2 focus-visible:ring-ring/30",
+        link: "text-text-primary underline-offset-4 hover:underline focus-visible:ring-ring/30"
+      },
+      size: {
+        default: "h-9 px-4 py-2",
+        sm: "h-8 px-3 text-xs",
+        lg: "h-11 px-5 text-base",
+        icon: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var Button = (0, import_react.forwardRef)(
+  ({ className, variant, size, loading = false, disabled, children, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      "button",
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size }), className),
+        disabled: disabled || loading,
+        ...props,
+        children: [
+          loading && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.Loader2, { className: "animate-spin", size: 16 }),
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/components/sidebar.tsx
+var import_react2 = require("react");
+var import_lucide_react2 = require("lucide-react");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var variantStyles = {
+  primary: {
+    container: "border-r border-border-base bg-surface-1 text-text-primary shadow-sm",
+    active: "bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20 before:absolute before:left-0 before:top-1/2 before:h-6 before:w-[3px] before:-translate-y-1/2 before:rounded-r-full before:bg-primary",
+    inactive: "text-text-secondary hover:bg-surface-2 hover:text-text-primary",
+    divider: "border-border-base",
+    icon: "bg-transparent text-text-tertiary group-hover:bg-surface-3 group-hover:text-primary",
+    activeIcon: "bg-primary/15 text-primary"
+  },
+  dark: {
+    container: "border-r border-border-base bg-surface-1 text-text-primary shadow-sm",
+    active: "bg-primary/10 text-primary shadow-sm ring-1 ring-primary/20 before:absolute before:left-0 before:top-1/2 before:h-6 before:w-[3px] before:-translate-y-1/2 before:rounded-r-full before:bg-primary",
+    inactive: "text-text-secondary hover:bg-surface-2 hover:text-text-primary",
+    divider: "border-border-base",
+    icon: "bg-transparent text-text-tertiary group-hover:bg-surface-3 group-hover:text-primary",
+    activeIcon: "bg-primary/15 text-primary"
+  }
+};
+function getItemKey(item, index, parentKey) {
+  return item.id ?? item.href ?? `${parentKey}-${index}-${item.label}`;
+}
+function itemHasActiveChild(item) {
+  return Boolean(item.children?.some((child) => child.active || itemHasActiveChild(child)));
+}
+function normalizeSearch(value) {
+  return value.toLowerCase().replace(/\s+/g, "");
+}
+function filterSidebarItems(items, query) {
+  if (!query) return items;
+  return items.reduce((result, item) => {
+    const children = item.children ? filterSidebarItems(item.children, query) : [];
+    const matched = normalizeSearch(item.label).includes(query);
+    if (matched || children.length > 0) {
+      result.push({ ...item, children });
+    }
+    return result;
+  }, []);
+}
+var Sidebar = (0, import_react2.forwardRef)(
+  ({
+    items,
+    variant = "primary",
+    collapsed,
+    defaultCollapsed = false,
+    onCollapsedChange,
+    collapsible = false,
+    searchable = false,
+    searchPlaceholder = "\u641C\u7D22\u83DC\u5355...",
+    responsive = false,
+    mobileOpen = false,
+    onMobileOpenChange,
+    header,
+    footer,
+    className
+  }, ref) => {
+    const styles = variantStyles[variant];
+    const [internalCollapsed, setInternalCollapsed] = (0, import_react2.useState)(defaultCollapsed);
+    const [expandedKeys, setExpandedKeys] = (0, import_react2.useState)(() => /* @__PURE__ */ new Set());
+    const [query, setQuery] = (0, import_react2.useState)("");
+    const effectiveCollapsed = collapsed ?? internalCollapsed;
+    const normalizedQuery = normalizeSearch(query);
+    const visibleItems = (0, import_react2.useMemo)(() => filterSidebarItems(items, normalizedQuery), [items, normalizedQuery]);
+    function setCollapsedState(nextCollapsed) {
+      setInternalCollapsed(nextCollapsed);
+      onCollapsedChange?.(nextCollapsed);
+    }
+    function toggleExpanded(key) {
+      setExpandedKeys((current) => {
+        const next = new Set(current);
+        if (next.has(key)) {
+          next.delete(key);
+        } else {
+          next.add(key);
+        }
+        return next;
+      });
+    }
+    function closeMobile() {
+      onMobileOpenChange?.(false);
+    }
+    function renderItems(list, depth = 0, parentKey = "root") {
+      return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("ul", { className: cn("flex flex-col gap-1", depth === 0 ? "px-2.5" : "ml-6 mt-1 border-l border-border-base pl-2"), children: list.map((item, index) => {
+        const key = getItemKey(item, index, parentKey);
+        const hasChildren = Boolean(item.children?.length);
+        const active = Boolean(item.active || itemHasActiveChild(item));
+        const expanded = !effectiveCollapsed && hasChildren && (normalizedQuery.length > 0 || active || expandedKeys.has(key));
+        const itemContent = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "span",
+            {
+              className: cn(
+                "flex h-8 w-8 shrink-0 items-center justify-center rounded-lg transition-colors",
+                active ? styles.activeIcon : styles.icon
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(item.icon, { size: 16 })
+            }
+          ),
+          !effectiveCollapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("span", { className: "min-w-0 flex-1 truncate text-left", children: item.label }),
+          !effectiveCollapsed && hasChildren && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            import_lucide_react2.ChevronDown,
+            {
+              size: 15,
+              className: cn("shrink-0 text-text-tertiary transition-transform", expanded && "rotate-180"),
+              "aria-hidden": "true"
+            }
+          )
+        ] });
+        const itemClassName = cn(
+          "group relative flex min-w-0 items-center gap-2.5 rounded-lg px-2.5 py-2 text-sm font-medium outline-none transition-all duration-150 focus-visible:ring-2 focus-visible:ring-primary/35",
+          effectiveCollapsed && "justify-center px-2",
+          active ? styles.active : styles.inactive
+        );
+        return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("li", { children: [
+          hasChildren ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "button",
+            {
+              type: "button",
+              className: cn("w-full", itemClassName),
+              "aria-expanded": expanded,
+              title: effectiveCollapsed ? item.label : void 0,
+              onClick: () => toggleExpanded(key),
+              children: itemContent
+            }
+          ) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "a",
+            {
+              href: item.href ?? "#",
+              "aria-current": item.active ? "page" : void 0,
+              className: itemClassName,
+              title: effectiveCollapsed ? item.label : void 0,
+              onClick: closeMobile,
+              children: itemContent
+            }
+          ),
+          expanded && item.children ? renderItems(item.children, depth + 1, key) : null
+        ] }, key);
+      }) });
+    }
+    const sidebar = /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+      "aside",
+      {
+        ref,
+        className: cn(
+          "flex flex-col overflow-hidden transition-all duration-300",
+          styles.container,
+          effectiveCollapsed ? "w-[72px]" : "w-64",
+          responsive && [
+            "fixed inset-y-0 left-0 z-50 md:relative md:inset-auto md:z-auto",
+            mobileOpen ? "translate-x-0" : "-translate-x-full md:translate-x-0"
+          ],
+          className
+        ),
+        children: [
+          (header || collapsible || responsive && mobileOpen) && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(
+            "div",
+            {
+              className: cn(
+                "flex border-b px-3 py-3",
+                styles.divider,
+                effectiveCollapsed ? "justify-center" : "items-center gap-2"
+              ),
+              children: [
+                !effectiveCollapsed && header ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("div", { className: "min-w-0 flex-1", children: header }) : null,
+                collapsible && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border-base bg-surface-2 text-text-secondary transition-colors hover:border-primary/40 hover:text-text-primary",
+                    "aria-label": effectiveCollapsed ? "\u5C55\u5F00\u4FA7\u8FB9\u680F" : "\u6298\u53E0\u4FA7\u8FB9\u680F",
+                    onClick: () => setCollapsedState(!effectiveCollapsed),
+                    children: effectiveCollapsed ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.PanelLeftOpen, { size: 17 }) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.PanelLeftClose, { size: 17 })
+                  }
+                ),
+                responsive && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    className: "flex h-9 w-9 shrink-0 items-center justify-center rounded-lg border border-border-base bg-surface-2 text-text-secondary transition-colors hover:border-primary/40 hover:text-text-primary md:hidden",
+                    "aria-label": "\u5173\u95ED\u4FA7\u8FB9\u680F",
+                    onClick: closeMobile,
+                    children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { size: 17 })
+                  }
+                )
+              ]
+            }
+          ),
+          searchable && !effectiveCollapsed && /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: cn("border-b px-3 py-3", styles.divider), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("label", { className: "sr-only", htmlFor: "ug-sidebar-search", children: "\u641C\u7D22\u83DC\u5355" }),
+            /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)("div", { className: "relative", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.Search, { className: "pointer-events-none absolute left-3 top-1/2 h-4 w-4 -translate-y-1/2 text-text-tertiary", "aria-hidden": "true" }),
+              /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "input",
+                {
+                  id: "ug-sidebar-search",
+                  value: query,
+                  onChange: (event) => setQuery(event.target.value),
+                  placeholder: searchPlaceholder,
+                  autoComplete: "off",
+                  className: "h-10 w-full rounded-lg border border-border-base bg-surface-0 px-3 pl-9 pr-9 text-sm text-text-primary outline-none transition-colors placeholder:text-text-tertiary focus:border-primary focus:ring-2 focus:ring-primary/20",
+                  type: "text",
+                  role: "searchbox"
+                }
+              ),
+              query ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+                "button",
+                {
+                  type: "button",
+                  className: "absolute right-1 top-1/2 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-md text-text-tertiary transition-colors hover:bg-surface-2 hover:text-text-primary",
+                  "aria-label": "\u6E05\u7A7A\u641C\u7D22",
+                  onClick: () => setQuery(""),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_lucide_react2.X, { size: 14 })
+                }
+              ) : null
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("nav", { className: "flex-1 overflow-y-auto py-3.5", children: visibleItems.length > 0 ? renderItems(visibleItems) : /* @__PURE__ */ (0, import_jsx_runtime2.jsx)("p", { className: "mx-3 rounded-lg border border-dashed border-border-base bg-surface-0 px-3 py-3 text-sm text-text-tertiary", children: "\u6CA1\u6709\u5339\u914D\u7684\u83DC\u5355" }) }),
+          footer && /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+            "div",
+            {
+              className: cn(
+                "border-t px-2.5 py-3",
+                styles.divider,
+                effectiveCollapsed && "flex justify-center"
+              ),
+              children: footer
+            }
+          )
+        ]
+      }
+    );
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsxs)(import_jsx_runtime2.Fragment, { children: [
+      responsive && mobileOpen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "button",
+        {
+          type: "button",
+          className: "fixed inset-0 z-40 bg-overlay md:hidden",
+          "aria-label": "\u5173\u95ED\u4FA7\u8FB9\u680F\u906E\u7F69",
+          onClick: closeMobile
+        }
+      ) : null,
+      sidebar
+    ] });
+  }
+);
+Sidebar.displayName = "Sidebar";
+
+// src/patterns/admin-shell.tsx
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var AdminShell = (0, import_react3.forwardRef)(
+  ({
+    navItems,
+    sidebarHeader,
+    sidebarFooter,
+    sidebarVariant = "dark",
+    sidebarSearchable = false,
+    sidebarCollapsible = true,
+    sidebarCollapsed,
+    defaultSidebarCollapsed = false,
+    onSidebarCollapsedChange,
+    mobileSidebarOpen,
+    onMobileSidebarOpenChange,
+    topbarStart,
+    topbarEnd,
+    topbar,
+    mainClassName,
+    contentClassName,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    const [internalMobileOpen, setInternalMobileOpen] = (0, import_react3.useState)(false);
+    const effectiveMobileOpen = mobileSidebarOpen ?? internalMobileOpen;
+    function setMobileOpen(open) {
+      if (mobileSidebarOpen === void 0) {
+        setInternalMobileOpen(open);
+      }
+      onMobileSidebarOpenChange?.(open);
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("min-h-screen bg-surface-0 text-text-primary", className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-h-screen min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+            Sidebar,
+            {
+              items: navItems,
+              variant: sidebarVariant,
+              header: sidebarHeader,
+              footer: sidebarFooter,
+              searchable: sidebarSearchable,
+              collapsible: sidebarCollapsible,
+              collapsed: sidebarCollapsed,
+              defaultCollapsed: defaultSidebarCollapsed,
+              onCollapsedChange: onSidebarCollapsedChange,
+              responsive: true,
+              mobileOpen: effectiveMobileOpen,
+              onMobileOpenChange: setMobileOpen,
+              className: "shrink-0"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)("header", { className: "sticky top-0 z-30 flex min-h-14 items-center gap-3 border-b border-border-base bg-surface-0/95 px-4 backdrop-blur sm:px-6 lg:px-8", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+                Button,
+                {
+                  type: "button",
+                  variant: "ghost",
+                  size: "icon",
+                  className: "md:hidden",
+                  "aria-label": "\u6253\u5F00\u4FA7\u8FB9\u680F",
+                  onClick: () => setMobileOpen(true),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_lucide_react3.Menu, { size: 18 })
+                }
+              ),
+              topbar ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "min-w-0 flex-1", children: topbar }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_jsx_runtime3.Fragment, { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "min-w-0 flex-1", children: topbarStart }),
+                topbarEnd ? /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: topbarEnd }) : null
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("main", { className: cn("min-w-0 flex-1 overflow-x-hidden", mainClassName), children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("div", { className: cn("mx-auto w-full max-w-7xl px-4 py-6 sm:px-6 lg:px-8", contentClassName), children }) })
+          ] })
+        ] })
+      }
+    );
+  }
+);
+AdminShell.displayName = "AdminShell";
+
+// src/patterns/confirm-dialog.tsx
+var import_react7 = require("react");
+var import_lucide_react5 = require("lucide-react");
+
+// src/components/modal.tsx
+var import_react6 = require("react");
+var import_react_dom = require("react-dom");
+var import_lucide_react4 = require("lucide-react");
+
+// src/hooks/use-escape-key.ts
+var import_react4 = require("react");
+function useEscapeKey(open, onEscape) {
+  const handleEscape = (0, import_react4.useCallback)(
+    (e) => {
+      if (e.key === "Escape") onEscape();
+    },
+    [onEscape]
+  );
+  (0, import_react4.useEffect)(() => {
+    if (!open || typeof document === "undefined") return;
+    document.addEventListener("keydown", handleEscape);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "";
+    };
+  }, [open, handleEscape]);
+}
+
+// src/internal/use-portal-container.ts
+var import_react5 = require("react");
+function usePortalContainer() {
+  const [container, setContainer] = (0, import_react5.useState)(null);
+  (0, import_react5.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    setContainer(document.body);
+  }, []);
+  return container;
+}
+
+// src/components/modal.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var Modal = (0, import_react6.forwardRef)(({ open, onClose, children, className }, ref) => {
+  useEscapeKey(open, onClose);
+  const portalContainer = usePortalContainer();
+  if (!open || !portalContainer) return null;
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "fixed inset-0 z-[80] flex items-center justify-center p-4",
+          className
+        ),
+        role: "dialog",
+        "aria-modal": "true",
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+            "div",
+            {
+              className: "absolute inset-0 bg-overlay",
+              onClick: onClose,
+              "aria-hidden": "true"
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { className: "relative z-10", children })
+        ]
+      }
+    ),
+    portalContainer
+  );
+});
+var ModalContent = (0, import_react6.forwardRef)(({ className, maxWidth = "max-w-lg", children, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("flex max-h-[85vh] w-full flex-col rounded-lg border border-border-base bg-surface-1 shadow-xl", maxWidth, className), ...props, children });
+});
+var ModalHeader = (0, import_react6.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("flex shrink-0 items-center justify-between border-b border-border-base px-6 py-4", className), ...props });
+});
+var ModalTitle = (0, import_react6.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("h2", { ref, className: cn("text-lg font-semibold text-text-primary", className), ...props });
+});
+var ModalFooter = (0, import_react6.forwardRef)(({ className, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("div", { ref, className: cn("flex shrink-0 items-center justify-end gap-2 border-t border-border-base px-6 py-4", className), ...props });
+});
+var ModalCloseButton = (0, import_react6.forwardRef)(({ onClick, className, type = "button", ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      ref,
+      type,
+      onClick,
+      className: cn(
+        "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__ */ (0, import_jsx_runtime4.jsx)(import_lucide_react4.X, { size: 18 })
+    }
+  );
+});
+Modal.displayName = "Modal";
+ModalContent.displayName = "ModalContent";
+ModalHeader.displayName = "ModalHeader";
+ModalTitle.displayName = "ModalTitle";
+ModalFooter.displayName = "ModalFooter";
+ModalCloseButton.displayName = "ModalCloseButton";
+
+// src/patterns/confirm-dialog.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var ConfirmDialog = (0, import_react7.forwardRef)(
+  ({
+    open,
+    onOpenChange,
+    title,
+    description,
+    children,
+    variant = "destructive",
+    icon,
+    cancelText = "\u53D6\u6D88",
+    confirmText = "\u786E\u8BA4",
+    loading = false,
+    disabled = false,
+    closeOnConfirm = true,
+    onCancel,
+    onConfirm,
+    className,
+    ...props
+  }, ref) => {
+    const Icon = icon ?? (variant === "destructive" ? import_lucide_react5.AlertTriangle : import_lucide_react5.HelpCircle);
+    function handleCancel() {
+      onCancel?.();
+      onOpenChange(false);
+    }
+    function handleConfirm() {
+      const result = onConfirm?.();
+      if (closeOnConfirm) onOpenChange(false);
+      return result;
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Modal, { open, onClose: handleCancel, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(
+      ModalContent,
+      {
+        ref,
+        className: cn("max-w-md", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ModalHeader, { className: "items-start gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              "div",
+              {
+                className: cn(
+                  "flex h-10 w-10 shrink-0 items-center justify-center rounded-md",
+                  variant === "destructive" ? "bg-danger-soft text-danger-soft-fg" : "bg-primary-soft text-primary-soft-fg"
+                ),
+                children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Icon, { size: 20, "aria-hidden": "true" })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)("div", { className: "min-w-0 flex-1 space-y-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(ModalTitle, { className: "break-words text-base", children: title }),
+              description ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("p", { className: "text-sm leading-6 text-text-secondary", children: description }) : null
+            ] })
+          ] }),
+          children ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("div", { className: "px-6 py-4 text-sm text-text-secondary", children }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(ModalFooter, { className: "flex-col-reverse gap-2 sm:flex-row", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Button, { type: "button", variant: "outline", disabled: loading, onClick: handleCancel, children: cancelText }),
+            /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+              Button,
+              {
+                type: "button",
+                variant: variant === "destructive" ? "destructive" : "default",
+                loading,
+                disabled,
+                onClick: handleConfirm,
+                children: confirmText
+              }
+            )
+          ] })
+        ]
+      }
+    ) });
+  }
+);
+ConfirmDialog.displayName = "ConfirmDialog";
+
+// src/patterns/copy-field.tsx
+var import_react8 = require("react");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var CopyField = (0, import_react8.forwardRef)(
+  ({
+    value,
+    label,
+    displayValue,
+    monospace = true,
+    disabled = false,
+    copyLabel = "\u590D\u5236",
+    copiedLabel = "\u5DF2\u590D\u5236",
+    onCopied,
+    onCopyError,
+    className,
+    ...props
+  }, ref) => {
+    const [copied, setCopied] = (0, import_react8.useState)(false);
+    const timeoutRef = (0, import_react8.useRef)(null);
+    (0, import_react8.useEffect)(() => {
+      return () => {
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+      };
+    }, []);
+    async function handleCopy() {
+      if (disabled) return;
+      try {
+        if (!navigator.clipboard?.writeText) {
+          throw new Error("Clipboard API is not available");
+        }
+        await navigator.clipboard.writeText(value);
+        setCopied(true);
+        onCopied?.(value);
+        if (timeoutRef.current) clearTimeout(timeoutRef.current);
+        timeoutRef.current = setTimeout(() => setCopied(false), 1400);
+      } catch (error) {
+        onCopyError?.(error);
+      }
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ref, className: cn("space-y-2", className), ...props, children: [
+      label ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "text-xs font-medium text-text-secondary", children: label }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+        "div",
+        {
+          className: cn(
+            "flex min-w-0 items-stretch overflow-hidden rounded-md border border-border-base bg-surface-1",
+            disabled && "opacity-60"
+          ),
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+              "div",
+              {
+                className: cn(
+                  "min-w-0 flex-1 truncate px-3 py-2 text-sm text-text-primary",
+                  monospace && "font-mono"
+                ),
+                title: typeof displayValue === "string" ? displayValue : value,
+                children: displayValue ?? value
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("div", { className: "flex shrink-0 items-center border-l border-border-base bg-surface-2 px-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)(
+              Button,
+              {
+                type: "button",
+                variant: "ghost",
+                size: "sm",
+                disabled,
+                onClick: handleCopy,
+                "aria-live": "polite",
+                children: [
+                  copied ? /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Check, { size: 15 }) : /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(import_lucide_react6.Copy, { size: 15 }),
+                  copied ? copiedLabel : copyLabel
+                ]
+              }
+            ) })
+          ]
+        }
+      )
+    ] });
+  }
+);
+CopyField.displayName = "CopyField";
+
+// src/patterns/page-header.tsx
+var import_react9 = require("react");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var PageHeader = (0, import_react9.forwardRef)(
+  ({
+    eyebrow,
+    title,
+    description,
+    badge,
+    breadcrumb,
+    actions,
+    meta,
+    children,
+    className,
+    ...props
+  }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+      "header",
+      {
+        ref,
+        className: cn(
+          "flex min-w-0 flex-col gap-5 border-b border-border-base pb-6",
+          className
+        ),
+        ...props,
+        children: [
+          breadcrumb ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-w-0", children: breadcrumb }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-col gap-4 lg:flex-row lg:items-start lg:justify-between", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "min-w-0 space-y-3", children: [
+              eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "text-xs font-semibold uppercase text-primary", children: eyebrow }) : null,
+              /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)("div", { className: "flex min-w-0 flex-wrap items-center gap-2.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("h1", { className: "min-w-0 break-words text-2xl font-bold leading-tight text-text-primary sm:text-3xl", children: title }),
+                badge ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "shrink-0", children: badge }) : null
+              ] }),
+              description ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("p", { className: "max-w-3xl text-sm leading-6 text-text-secondary", children: description }) : null,
+              meta ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex min-w-0 flex-wrap items-center gap-x-4 gap-y-2 text-xs text-text-tertiary", children: meta }) : null
+            ] }),
+            actions ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "flex shrink-0 flex-wrap items-center gap-2 lg:justify-end", children: actions }) : null
+          ] }),
+          children ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("div", { className: "min-w-0", children }) : null
+        ]
+      }
+    );
+  }
+);
+PageHeader.displayName = "PageHeader";
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AdminShell,
+  ConfirmDialog,
+  CopyField,
+  PageHeader,
+  UGAdminShell,
+  UGConfirmDialog,
+  UGCopyField,
+  UGPageHeader
+});
+//# sourceMappingURL=index.cjs.map