@ambersecurityinc/ui 0.1.0

package/dist/chunk-2NDCSOJ6.js

@@ -0,0 +1,2359 @@
+'use strict';
+
+var jsxRuntime = require('react/jsx-runtime');
+var react = require('react');
+var reactDom = require('react-dom');
+
+// src/components/layout/AppShell.tsx
+var rootStyle = {
+  display: "flex",
+  minHeight: "100vh",
+  background: "var(--bg)",
+  color: "var(--text)",
+  fontFamily: "var(--font-body, 'Manrope', sans-serif)"
+};
+var mainWrapperStyle = {
+  display: "flex",
+  flexDirection: "column",
+  flex: 1,
+  minWidth: 0
+  // prevent flex child overflow
+};
+var contentStyle = {
+  flex: 1,
+  padding: "24px",
+  overflowY: "auto"
+};
+function AppShell({
+  sidebar,
+  header,
+  children,
+  className,
+  style
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: { ...rootStyle, ...style },
+      children: [
+        sidebar,
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: mainWrapperStyle, children: [
+          header,
+          /* @__PURE__ */ jsxRuntime.jsx("main", { style: contentStyle, children })
+        ] })
+      ]
+    }
+  );
+}
+var SIDEBAR_WIDTH = 260;
+var SIDEBAR_COLLAPSED_WIDTH = 64;
+var MOBILE_BREAKPOINT = 768;
+function Sidebar({
+  collapsed = false,
+  onToggle,
+  header,
+  children,
+  className,
+  style,
+  mobileOpen = false,
+  onMobileClose
+}) {
+  react.useEffect(() => {
+    if (!mobileOpen) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onMobileClose?.();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [mobileOpen, onMobileClose]);
+  react.useEffect(() => {
+    if (!mobileOpen) return;
+    const prev = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.body.style.overflow = prev;
+    };
+  }, [mobileOpen]);
+  const handleToggleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Enter" || e.key === " ") {
+        e.preventDefault();
+        onToggle?.();
+      }
+    },
+    [onToggle]
+  );
+  const width = collapsed ? SIDEBAR_COLLAPSED_WIDTH : SIDEBAR_WIDTH;
+  const navStyle = {
+    width,
+    minWidth: width,
+    height: "100vh",
+    display: "flex",
+    flexDirection: "column",
+    background: "var(--sidebar)",
+    color: "var(--text-sidebar)",
+    borderRight: "1px solid var(--border-sidebar)",
+    transition: "width 200ms ease, min-width 200ms ease",
+    overflowX: "hidden",
+    overflowY: "auto",
+    position: "sticky",
+    top: 0
+  };
+  const mobileNavStyle = {
+    ...navStyle,
+    position: "fixed",
+    top: 0,
+    left: 0,
+    zIndex: 1100,
+    width: SIDEBAR_WIDTH,
+    minWidth: SIDEBAR_WIDTH,
+    transform: mobileOpen ? "translateX(0)" : `translateX(-100%)`,
+    transition: "transform 200ms ease"
+  };
+  const backdropStyle = {
+    position: "fixed",
+    inset: 0,
+    zIndex: 1099,
+    background: "rgba(0,0,0,0.5)",
+    opacity: mobileOpen ? 1 : 0,
+    pointerEvents: mobileOpen ? "auto" : "none",
+    transition: "opacity 200ms ease"
+  };
+  const headerSlotStyle = {
+    padding: collapsed ? "16px 8px" : "16px",
+    borderBottom: "1px solid var(--border-sidebar)",
+    display: "flex",
+    alignItems: "center",
+    justifyContent: collapsed ? "center" : "space-between",
+    gap: 8,
+    minHeight: 56
+  };
+  const toggleBtnStyle = {
+    background: "transparent",
+    border: "none",
+    color: "var(--text-sidebar-muted)",
+    cursor: "pointer",
+    padding: 4,
+    borderRadius: 4,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    flexShrink: 0
+  };
+  const bodyStyle = {
+    flex: 1,
+    padding: collapsed ? "8px 4px" : "8px 12px",
+    overflowY: "auto",
+    overflowX: "hidden"
+  };
+  const toggleIcon = collapsed ? "\u25B6" : "\u25C0";
+  const sidebarContent = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerSlotStyle, children: [
+      !collapsed && header,
+      onToggle && /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          onClick: onToggle,
+          onKeyDown: handleToggleKeyDown,
+          "aria-label": collapsed ? "Expand sidebar" : "Collapse sidebar",
+          style: toggleBtnStyle,
+          children: /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { fontSize: 12 }, children: toggleIcon })
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxRuntime.jsx("div", { style: bodyStyle, role: "group", "aria-label": "Sidebar navigation", children })
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        "aria-label": "Main navigation",
+        className,
+        style: { ...navStyle, ...style },
+        "data-sidebar-desktop": "",
+        children: sidebarContent
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "aria-hidden": !mobileOpen,
+        style: backdropStyle,
+        onClick: onMobileClose
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        "aria-label": "Main navigation",
+        "aria-modal": mobileOpen ? true : void 0,
+        role: mobileOpen ? "dialog" : void 0,
+        style: { ...mobileNavStyle, ...style },
+        "data-sidebar-mobile": "",
+        children: sidebarContent
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx("style", { children: `
+        [data-sidebar-mobile] { display: none; }
+        @media (max-width: ${MOBILE_BREAKPOINT - 1}px) {
+          [data-sidebar-desktop] { display: none !important; }
+          [data-sidebar-mobile] { display: flex !important; }
+        }
+      ` })
+  ] });
+}
+var sectionStyle = {
+  marginBottom: 8
+};
+var sectionTitleStyle = {
+  fontSize: 11,
+  fontWeight: 600,
+  textTransform: "uppercase",
+  letterSpacing: "0.05em",
+  color: "var(--text-sidebar-muted)",
+  padding: "12px 8px 4px",
+  userSelect: "none"
+};
+function SidebarSection({
+  title,
+  children,
+  className,
+  style: customStyle
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: { ...sectionStyle, ...customStyle },
+      role: "group",
+      "aria-label": title,
+      children: [
+        title && /* @__PURE__ */ jsxRuntime.jsx("div", { style: sectionTitleStyle, children: title }),
+        children
+      ]
+    }
+  );
+}
+var barStyle = {
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "space-between",
+  gap: 16,
+  minHeight: 56,
+  padding: "0 24px",
+  background: "var(--surface)",
+  borderBottom: "1px solid var(--border)",
+  flexShrink: 0
+};
+var breadcrumbNavStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 6,
+  flex: 1,
+  minWidth: 0,
+  overflow: "hidden"
+};
+var crumbStyle = {
+  fontSize: 14,
+  color: "var(--text-muted)",
+  whiteSpace: "nowrap",
+  textDecoration: "none",
+  transition: "color 150ms ease"
+};
+var crumbCurrentStyle = {
+  ...crumbStyle,
+  color: "var(--text)",
+  fontWeight: 600
+};
+var separatorStyle = {
+  fontSize: 12,
+  color: "var(--text-muted)",
+  userSelect: "none",
+  flexShrink: 0
+};
+var rightSlotStyle = {
+  display: "flex",
+  alignItems: "center",
+  gap: 12,
+  flexShrink: 0
+};
+function Header({
+  breadcrumbs = [],
+  actions,
+  avatar,
+  className,
+  style
+}) {
+  const lastIdx = breadcrumbs.length - 1;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "header",
+    {
+      className,
+      style: { ...barStyle, ...style },
+      children: [
+        breadcrumbs.length > 0 && /* @__PURE__ */ jsxRuntime.jsx("nav", { "aria-label": "Breadcrumb", style: breadcrumbNavStyle, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "ol",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 6,
+              listStyle: "none",
+              margin: 0,
+              padding: 0
+            },
+            children: breadcrumbs.map((crumb, i) => {
+              const isCurrent = i === lastIdx;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "li",
+                {
+                  style: { display: "flex", alignItems: "center", gap: 6 },
+                  children: [
+                    i > 0 && /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: separatorStyle, children: "/" }),
+                    crumb.href && !isCurrent ? /* @__PURE__ */ jsxRuntime.jsx(
+                      "a",
+                      {
+                        href: crumb.href,
+                        style: crumbStyle,
+                        children: crumb.label
+                      }
+                    ) : /* @__PURE__ */ jsxRuntime.jsx(
+                      "span",
+                      {
+                        style: isCurrent ? crumbCurrentStyle : crumbStyle,
+                        "aria-current": isCurrent ? "page" : void 0,
+                        children: crumb.label
+                      }
+                    )
+                  ]
+                },
+                `${crumb.label}-${i}`
+              );
+            })
+          }
+        ) }),
+        /* @__PURE__ */ jsxRuntime.jsxs("div", { style: rightSlotStyle, children: [
+          actions,
+          avatar
+        ] })
+      ]
+    }
+  );
+}
+var variantStyles = {
+  success: { background: "var(--success-soft)", color: "var(--success)" },
+  warning: { background: "var(--warning-soft)", color: "var(--warning)" },
+  error: { background: "var(--error-soft)", color: "var(--error)" },
+  info: { background: "var(--info-soft)", color: "var(--info)" },
+  accent: { background: "var(--accent-soft)", color: "var(--accent)" },
+  neutral: { background: "var(--surface-alt)", color: "var(--text-secondary)" }
+};
+var sizeStyles = {
+  sm: { fontSize: 11, padding: "1px 6px", borderRadius: "var(--radius-sm, 6px)" },
+  md: { fontSize: 12, padding: "2px 8px", borderRadius: "var(--radius-sm, 6px)" }
+};
+function Badge({
+  variant,
+  size = "md",
+  children,
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "span",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        fontFamily: "var(--font-body)",
+        fontWeight: 600,
+        lineHeight: 1.5,
+        whiteSpace: "nowrap",
+        ...variantStyles[variant],
+        ...sizeStyles[size],
+        ...style
+      },
+      ...rest,
+      children
+    }
+  );
+}
+var shimmerKeyframes = `
+@keyframes amber-skeleton-shimmer {
+  0%   { background-position: -400px 0; }
+  100% { background-position: 400px 0; }
+}
+`;
+var styleInjected = false;
+function injectKeyframes() {
+  if (styleInjected || typeof document === "undefined") return;
+  const sheet = document.createElement("style");
+  sheet.textContent = shimmerKeyframes;
+  document.head.appendChild(sheet);
+  styleInjected = true;
+}
+function baseStyle(extra) {
+  return {
+    background: `linear-gradient(90deg, var(--surface-alt, #eee) 25%, var(--surface-hover, #ddd) 50%, var(--surface-alt, #eee) 75%)`,
+    backgroundSize: "800px 100%",
+    animation: "amber-skeleton-shimmer 1.6s ease-in-out infinite",
+    borderRadius: "var(--radius-sm, 6px)",
+    ...extra
+  };
+}
+function Skeleton({
+  variant,
+  width,
+  height,
+  lines = 3,
+  className,
+  style,
+  ...rest
+}) {
+  injectKeyframes();
+  if (variant === "text") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        role: "status",
+        "aria-label": "Loading",
+        className,
+        style: { display: "flex", flexDirection: "column", gap: 8, ...style },
+        ...rest,
+        children: [
+          Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              style: baseStyle({
+                width: i === lines - 1 ? "60%" : width ?? "100%",
+                height: typeof height === "number" ? height : height ?? 14,
+                borderRadius: "var(--radius-sm, 6px)"
+              })
+            },
+            i
+          )),
+          /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)" }, children: "Loading..." })
+        ]
+      }
+    );
+  }
+  const isCircle = variant === "circle";
+  const resolvedWidth = width ?? (isCircle ? 40 : "100%");
+  const resolvedHeight = height ?? (isCircle ? 40 : 20);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className,
+      style: baseStyle({
+        width: resolvedWidth,
+        height: resolvedHeight,
+        borderRadius: isCircle ? "50%" : "var(--radius-sm, 6px)",
+        ...style
+      }),
+      ...rest,
+      children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0,0,0,0)" }, children: "Loading..." })
+    }
+  );
+}
+function EmptyState({
+  icon,
+  title,
+  description,
+  action,
+  className,
+  style,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      role: "status",
+      className,
+      style: {
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        justifyContent: "center",
+        padding: 48,
+        textAlign: "center",
+        fontFamily: "var(--font-body)",
+        ...style
+      },
+      ...rest,
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              marginBottom: 16,
+              color: "var(--text-muted)",
+              fontSize: 40,
+              lineHeight: 1
+            },
+            children: icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "h3",
+          {
+            style: {
+              margin: 0,
+              fontSize: 16,
+              fontWeight: 600,
+              color: "var(--text)",
+              fontFamily: "var(--font-display)"
+            },
+            children: title
+          }
+        ),
+        description && /* @__PURE__ */ jsxRuntime.jsx(
+          "p",
+          {
+            style: {
+              margin: "8px 0 0",
+              fontSize: 14,
+              color: "var(--text-secondary)",
+              maxWidth: 360,
+              lineHeight: 1.5
+            },
+            children: description
+          }
+        ),
+        action && /* @__PURE__ */ jsxRuntime.jsx("div", { style: { marginTop: 20 }, children: action })
+      ]
+    }
+  );
+}
+function SortIcon({ direction, active }) {
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "svg",
+    {
+      width: 14,
+      height: 14,
+      viewBox: "0 0 14 14",
+      fill: "none",
+      "aria-hidden": "true",
+      style: {
+        marginLeft: 4,
+        flexShrink: 0,
+        opacity: active ? 1 : 0.35,
+        transition: "opacity 0.15s"
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M7 3L10 6.5H4L7 3Z",
+            fill: active && direction === "asc" ? "currentColor" : "var(--text-muted)"
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "path",
+          {
+            d: "M7 11L4 7.5H10L7 11Z",
+            fill: active && direction === "desc" ? "currentColor" : "var(--text-muted)"
+          }
+        )
+      ]
+    }
+  );
+}
+var tableWrapperStyle = {
+  width: "100%",
+  overflowX: "auto",
+  border: "1px solid var(--border)",
+  borderRadius: "var(--radius-md, 10px)",
+  background: "var(--surface)",
+  fontFamily: "var(--font-body)"
+};
+var tableStyle = {
+  width: "100%",
+  borderCollapse: "collapse",
+  fontSize: 14
+};
+var thStyle = {
+  textAlign: "left",
+  padding: "10px 14px",
+  fontWeight: 600,
+  fontSize: 12,
+  color: "var(--text-secondary)",
+  textTransform: "uppercase",
+  letterSpacing: "0.04em",
+  borderBottom: "1px solid var(--border)",
+  background: "var(--surface-alt)",
+  whiteSpace: "nowrap",
+  userSelect: "none"
+};
+var tdStyle = {
+  padding: "10px 14px",
+  color: "var(--text)",
+  borderBottom: "1px solid var(--border)",
+  verticalAlign: "middle"
+};
+var checkboxCellStyle = {
+  width: 36,
+  textAlign: "center"
+};
+function DataTable({
+  columns,
+  data,
+  loading = false,
+  emptyState,
+  selectable = false,
+  selectedRows,
+  onSelectionChange,
+  sortKey,
+  sortDirection,
+  onSort,
+  cursor = null,
+  onPageChange,
+  pageSize = 10,
+  className,
+  style,
+  ...rest
+}) {
+  const selected = selectedRows ?? /* @__PURE__ */ new Set();
+  const allSelected = react.useMemo(
+    () => data.length > 0 && data.every((_, i) => selected.has(i)),
+    [data, selected]
+  );
+  const someSelected = react.useMemo(
+    () => !allSelected && data.some((_, i) => selected.has(i)),
+    [data, selected, allSelected]
+  );
+  const toggleAll = react.useCallback(() => {
+    if (!onSelectionChange) return;
+    if (allSelected) {
+      onSelectionChange(/* @__PURE__ */ new Set());
+    } else {
+      onSelectionChange(new Set(data.map((_, i) => i)));
+    }
+  }, [allSelected, data, onSelectionChange]);
+  const toggleRow = react.useCallback(
+    (index) => {
+      if (!onSelectionChange) return;
+      const next = new Set(selected);
+      if (next.has(index)) {
+        next.delete(index);
+      } else {
+        next.add(index);
+      }
+      onSelectionChange(next);
+    },
+    [selected, onSelectionChange]
+  );
+  const handleSort = react.useCallback(
+    (key) => {
+      if (!onSort) return;
+      const nextDir = sortKey === key && sortDirection === "asc" ? "desc" : "asc";
+      onSort(key, nextDir);
+    },
+    [onSort, sortKey, sortDirection]
+  );
+  const getCellValue = (row, key) => {
+    const val = row[key];
+    if (val == null) return "";
+    return String(val);
+  };
+  if (loading) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...tableWrapperStyle, ...style }, ...rest, children: /* @__PURE__ */ jsxRuntime.jsxs("table", { style: tableStyle, role: "table", "aria-busy": "true", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { style: { ...thStyle, ...checkboxCellStyle } }),
+        columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("th", { style: thStyle, children: col.header }, col.key))
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: Array.from({ length: pageSize }, (_, rowIdx) => /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...tdStyle, ...checkboxCellStyle }, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: 16, height: 16 }) }),
+        columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: tdStyle, children: /* @__PURE__ */ jsxRuntime.jsx(Skeleton, { variant: "rect", width: "80%", height: 14 }) }, col.key))
+      ] }, rowIdx)) })
+    ] }) });
+  }
+  if (data.length === 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("div", { className, style: { ...tableWrapperStyle, ...style }, ...rest, children: emptyState ?? /* @__PURE__ */ jsxRuntime.jsx(
+      EmptyState,
+      {
+        title: "No data",
+        description: "There are no items to display."
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs("div", { className, style: { ...tableWrapperStyle, ...style }, ...rest, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs("table", { style: tableStyle, role: "table", children: [
+      /* @__PURE__ */ jsxRuntime.jsx("thead", { children: /* @__PURE__ */ jsxRuntime.jsxs("tr", { children: [
+        selectable && /* @__PURE__ */ jsxRuntime.jsx("th", { style: { ...thStyle, ...checkboxCellStyle }, children: /* @__PURE__ */ jsxRuntime.jsx(
+          "input",
+          {
+            type: "checkbox",
+            checked: allSelected,
+            ref: (el) => {
+              if (el) el.indeterminate = someSelected;
+            },
+            onChange: toggleAll,
+            "aria-label": "Select all rows",
+            style: { cursor: "pointer" }
+          }
+        ) }),
+        columns.map((col) => {
+          const isSortable = col.sortable && onSort;
+          const isActive = sortKey === col.key;
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            "th",
+            {
+              style: {
+                ...thStyle,
+                cursor: isSortable ? "pointer" : "default"
+              },
+              onClick: isSortable ? () => handleSort(col.key) : void 0,
+              "aria-sort": isActive ? sortDirection === "asc" ? "ascending" : "descending" : void 0,
+              children: /* @__PURE__ */ jsxRuntime.jsxs("span", { style: { display: "inline-flex", alignItems: "center" }, children: [
+                col.header,
+                isSortable && /* @__PURE__ */ jsxRuntime.jsx(
+                  SortIcon,
+                  {
+                    direction: isActive ? sortDirection : void 0,
+                    active: isActive
+                  }
+                )
+              ] })
+            },
+            col.key
+          );
+        })
+      ] }) }),
+      /* @__PURE__ */ jsxRuntime.jsx("tbody", { children: data.map((row, rowIndex) => {
+        const isSelected = selected.has(rowIndex);
+        return /* @__PURE__ */ jsxRuntime.jsxs(
+          "tr",
+          {
+            style: {
+              background: isSelected ? "var(--accent-soft)" : void 0,
+              transition: "background 0.12s"
+            },
+            children: [
+              selectable && /* @__PURE__ */ jsxRuntime.jsx("td", { style: { ...tdStyle, ...checkboxCellStyle }, children: /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  type: "checkbox",
+                  checked: isSelected,
+                  onChange: () => toggleRow(rowIndex),
+                  "aria-label": `Select row ${rowIndex + 1}`,
+                  style: { cursor: "pointer" }
+                }
+              ) }),
+              columns.map((col) => /* @__PURE__ */ jsxRuntime.jsx("td", { style: tdStyle, children: col.render ? col.render(row, rowIndex) : getCellValue(row, col.key) }, col.key))
+            ]
+          },
+          rowIndex
+        );
+      }) })
+    ] }),
+    onPageChange && /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "flex-end",
+          gap: 8,
+          padding: "10px 14px",
+          borderTop: "1px solid var(--border)"
+        },
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PaginationButton,
+            {
+              label: "Previous",
+              onClick: () => onPageChange("prev", cursor)
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx(
+            PaginationButton,
+            {
+              label: "Next",
+              onClick: () => onPageChange("next", cursor)
+            }
+          )
+        ]
+      }
+    )
+  ] });
+}
+function PaginationButton({ label, onClick }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      onClick,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        padding: "6px 14px",
+        fontSize: 13,
+        fontWeight: 500,
+        fontFamily: "var(--font-body)",
+        color: "var(--text)",
+        background: "var(--surface-alt)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--radius-sm, 6px)",
+        cursor: "pointer",
+        transition: "background 0.15s"
+      },
+      onMouseEnter: (e) => {
+        e.currentTarget.style.background = "var(--surface-hover)";
+      },
+      onMouseLeave: (e) => {
+        e.currentTarget.style.background = "var(--surface-alt)";
+      },
+      children: label
+    }
+  );
+}
+function DeltaArrow({ direction }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "svg",
+    {
+      width: 12,
+      height: 12,
+      viewBox: "0 0 12 12",
+      fill: "none",
+      "aria-hidden": "true",
+      style: {
+        transform: direction === "down" ? "rotate(180deg)" : void 0,
+        flexShrink: 0
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M6 2.5L10 8.5H2L6 2.5Z", fill: "currentColor" })
+    }
+  );
+}
+function StatCard({
+  label,
+  value,
+  delta,
+  deltaLabel,
+  icon,
+  className,
+  style,
+  ...rest
+}) {
+  const [hovered, setHovered] = react.useState(false);
+  const deltaDirection = delta != null && delta >= 0 ? "up" : "down";
+  const deltaColor = delta != null ? delta >= 0 ? "var(--success)" : "var(--error)" : void 0;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      onMouseEnter: () => setHovered(true),
+      onMouseLeave: () => setHovered(false),
+      style: {
+        position: "relative",
+        background: "var(--surface)",
+        border: "1px solid var(--border)",
+        borderRadius: "var(--radius-md, 10px)",
+        padding: 20,
+        fontFamily: "var(--font-body)",
+        boxShadow: hovered ? "var(--shadow-md)" : "var(--shadow)",
+        transition: "box-shadow 0.2s ease, transform 0.2s ease",
+        transform: hovered ? "translateY(-1px)" : "none",
+        cursor: "default",
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "flex-start",
+              justifyContent: "space-between"
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    fontSize: 13,
+                    fontWeight: 500,
+                    color: "var(--text-secondary)",
+                    lineHeight: 1.4
+                  },
+                  children: label
+                }
+              ),
+              icon && /* @__PURE__ */ jsxRuntime.jsx(
+                "span",
+                {
+                  style: {
+                    color: "var(--text-muted)",
+                    fontSize: 20,
+                    lineHeight: 1,
+                    flexShrink: 0,
+                    marginLeft: 8
+                  },
+                  children: icon
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "div",
+          {
+            style: {
+              marginTop: 8,
+              fontSize: 28,
+              fontWeight: 700,
+              color: "var(--text)",
+              fontFamily: "var(--font-display)",
+              lineHeight: 1.2
+            },
+            children: value
+          }
+        ),
+        delta != null && /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              display: "flex",
+              alignItems: "center",
+              gap: 4,
+              marginTop: 8,
+              fontSize: 13,
+              fontWeight: 500,
+              color: deltaColor
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(DeltaArrow, { direction: deltaDirection }),
+              /* @__PURE__ */ jsxRuntime.jsxs("span", { children: [
+                delta > 0 ? "+" : "",
+                delta,
+                "%"
+              ] }),
+              deltaLabel && /* @__PURE__ */ jsxRuntime.jsx("span", { style: { color: "var(--text-muted)", marginLeft: 2 }, children: deltaLabel })
+            ]
+          }
+        )
+      ]
+    }
+  );
+}
+var VARIANT_COLORS = {
+  success: {
+    bg: "var(--successSoft)",
+    border: "var(--success)",
+    icon: "\u2713"
+  },
+  error: {
+    bg: "var(--errorSoft)",
+    border: "var(--error)",
+    icon: "\u2717"
+  },
+  warning: {
+    bg: "var(--warningSoft)",
+    border: "var(--warning)",
+    icon: "\u26A0"
+  },
+  info: {
+    bg: "var(--infoSoft)",
+    border: "var(--info)",
+    icon: "\u2139"
+  }
+};
+function Toast({
+  variant = "info",
+  message,
+  onDismiss,
+  className,
+  style
+}) {
+  const colors = VARIANT_COLORS[variant];
+  const toastRef = react.useRef(null);
+  react.useEffect(() => {
+    const el = toastRef.current;
+    if (!el) return;
+    requestAnimationFrame(() => {
+      el.style.transform = "translateX(0)";
+      el.style.opacity = "1";
+    });
+  }, []);
+  const baseStyle2 = {
+    display: "flex",
+    alignItems: "flex-start",
+    gap: 10,
+    padding: "12px 16px",
+    borderRadius: 10,
+    border: `1px solid ${colors.border}`,
+    backgroundColor: colors.bg,
+    color: "var(--text)",
+    fontFamily: "var(--font-body, inherit)",
+    fontSize: 14,
+    lineHeight: 1.5,
+    boxShadow: "var(--shadowMd)",
+    pointerEvents: "auto",
+    transform: "translateX(120%)",
+    opacity: 0,
+    transition: "transform 0.3s ease, opacity 0.3s ease",
+    maxWidth: 400,
+    minWidth: 280,
+    ...style
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: toastRef,
+      role: "alert",
+      "aria-live": "assertive",
+      className,
+      style: baseStyle2,
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            style: {
+              flexShrink: 0,
+              fontSize: 16,
+              lineHeight: "20px",
+              color: colors.border
+            },
+            children: colors.icon
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("span", { style: { flex: 1, wordBreak: "break-word" }, children: message }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": "Dismiss notification",
+            style: {
+              flexShrink: 0,
+              background: "none",
+              border: "none",
+              cursor: "pointer",
+              padding: 0,
+              color: "var(--textMuted)",
+              fontSize: 18,
+              lineHeight: "20px"
+            },
+            children: "\\u00D7"
+          }
+        )
+      ]
+    }
+  );
+}
+var ToastContext = react.createContext(null);
+var nextId = 0;
+function ToastProvider({ children }) {
+  const [toasts, setToasts] = react.useState([]);
+  const timersRef = react.useRef(/* @__PURE__ */ new Map());
+  const dismiss = react.useCallback((id) => {
+    const timer = timersRef.current.get(id);
+    if (timer) {
+      clearTimeout(timer);
+      timersRef.current.delete(id);
+    }
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+  const toast = react.useCallback(
+    (message, options) => {
+      const id = nextId++;
+      const variant = options?.variant ?? "info";
+      const duration = options?.duration ?? 5e3;
+      setToasts((prev) => [...prev, { id, message, variant, duration }]);
+      if (duration > 0) {
+        const timer = setTimeout(() => {
+          dismiss(id);
+        }, duration);
+        timersRef.current.set(id, timer);
+      }
+    },
+    [dismiss]
+  );
+  react.useEffect(() => {
+    const timers = timersRef.current;
+    return () => {
+      timers.forEach((timer) => clearTimeout(timer));
+      timers.clear();
+    };
+  }, []);
+  const containerStyle = {
+    position: "fixed",
+    bottom: 20,
+    right: 20,
+    display: "flex",
+    flexDirection: "column",
+    gap: 8,
+    zIndex: 9999,
+    pointerEvents: "none"
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(ToastContext.Provider, { value: { toast }, children: [
+    children,
+    typeof document !== "undefined" && toasts.length > 0 && reactDom.createPortal(
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          "aria-label": "Notifications",
+          style: containerStyle,
+          children: toasts.map((t) => /* @__PURE__ */ jsxRuntime.jsx(
+            Toast,
+            {
+              variant: t.variant,
+              message: t.message,
+              onDismiss: () => dismiss(t.id)
+            },
+            t.id
+          ))
+        }
+      ),
+      document.body
+    )
+  ] });
+}
+function useToast() {
+  const ctx = react.useContext(ToastContext);
+  if (!ctx) {
+    throw new Error("useToast must be used within a <ToastProvider>");
+  }
+  return ctx;
+}
+var FOCUSABLE_SELECTOR = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+function Modal({
+  open,
+  onClose,
+  title,
+  children,
+  footer,
+  className,
+  style
+}) {
+  const panelRef = react.useRef(null);
+  const previousFocusRef = react.useRef(null);
+  react.useEffect(() => {
+    if (open) {
+      previousFocusRef.current = document.activeElement;
+      const raf = requestAnimationFrame(() => {
+        const panel = panelRef.current;
+        if (!panel) return;
+        const first = panel.querySelector(FOCUSABLE_SELECTOR);
+        if (first) {
+          first.focus();
+        } else {
+          panel.focus();
+        }
+      });
+      return () => cancelAnimationFrame(raf);
+    } else {
+      previousFocusRef.current?.focus();
+    }
+  }, [open]);
+  const handleKeyDown = react.useCallback(
+    (e) => {
+      if (e.key === "Escape") {
+        e.stopPropagation();
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  const handleBackdropClick = react.useCallback(
+    (e) => {
+      if (e.target === e.currentTarget) {
+        onClose();
+      }
+    },
+    [onClose]
+  );
+  if (!open || typeof document === "undefined") return null;
+  const backdropStyle = {
+    position: "fixed",
+    inset: 0,
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "center",
+    backgroundColor: "rgba(0, 0, 0, 0.5)",
+    zIndex: 9998,
+    padding: 20
+  };
+  const panelStyle = {
+    position: "relative",
+    backgroundColor: "var(--surface)",
+    color: "var(--text)",
+    borderRadius: 14,
+    border: "1px solid var(--border)",
+    boxShadow: "var(--shadowLg)",
+    fontFamily: "var(--font-body, inherit)",
+    maxWidth: 560,
+    width: "100%",
+    maxHeight: "calc(100vh - 40px)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    outline: "none",
+    ...style
+  };
+  const headerStyle = {
+    display: "flex",
+    alignItems: "center",
+    justifyContent: "space-between",
+    padding: "16px 20px",
+    borderBottom: "1px solid var(--border)",
+    flexShrink: 0
+  };
+  const titleStyle = {
+    margin: 0,
+    fontSize: 18,
+    fontWeight: 600,
+    fontFamily: "var(--font-display, inherit)",
+    color: "var(--text)",
+    lineHeight: 1.3
+  };
+  const closeButtonStyle = {
+    background: "none",
+    border: "none",
+    cursor: "pointer",
+    padding: 4,
+    color: "var(--textMuted)",
+    fontSize: 20,
+    lineHeight: 1,
+    borderRadius: 6
+  };
+  const bodyStyle = {
+    padding: 20,
+    flex: 1,
+    overflowY: "auto",
+    fontSize: 14,
+    lineHeight: 1.6,
+    color: "var(--textSecondary)"
+  };
+  const footerStyle = {
+    padding: "12px 20px",
+    borderTop: "1px solid var(--border)",
+    display: "flex",
+    justifyContent: "flex-end",
+    gap: 8,
+    flexShrink: 0
+  };
+  return reactDom.createPortal(
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        role: "presentation",
+        style: backdropStyle,
+        onClick: handleBackdropClick,
+        onKeyDown: handleKeyDown,
+        children: /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            ref: panelRef,
+            role: "dialog",
+            "aria-modal": "true",
+            "aria-label": title ?? "Dialog",
+            tabIndex: -1,
+            className,
+            style: panelStyle,
+            children: [
+              title != null && /* @__PURE__ */ jsxRuntime.jsxs("div", { style: headerStyle, children: [
+                /* @__PURE__ */ jsxRuntime.jsx("h2", { style: titleStyle, children: title }),
+                /* @__PURE__ */ jsxRuntime.jsx(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: onClose,
+                    "aria-label": "Close dialog",
+                    style: closeButtonStyle,
+                    children: "\xD7"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ jsxRuntime.jsx("div", { style: bodyStyle, children }),
+              footer != null && /* @__PURE__ */ jsxRuntime.jsx("div", { style: footerStyle, children: footer })
+            ]
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+function ConfirmDialog({
+  open,
+  onClose,
+  onConfirm,
+  title,
+  description,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  destructive = false,
+  loading = false,
+  className,
+  style
+}) {
+  const buttonBase = {
+    padding: "8px 16px",
+    borderRadius: 8,
+    fontSize: 14,
+    fontWeight: 500,
+    fontFamily: "var(--font-body, inherit)",
+    cursor: loading ? "not-allowed" : "pointer",
+    border: "1px solid var(--border)",
+    lineHeight: 1.4,
+    transition: "background-color 0.15s ease"
+  };
+  const cancelStyle = {
+    ...buttonBase,
+    backgroundColor: "var(--surface)",
+    color: "var(--text)"
+  };
+  const confirmStyle = {
+    ...buttonBase,
+    backgroundColor: destructive ? "var(--error)" : "var(--accent)",
+    color: destructive ? "#fff" : "var(--accentText)",
+    border: "1px solid transparent",
+    opacity: loading ? 0.7 : 1
+  };
+  const footer = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onClose,
+        disabled: loading,
+        style: cancelStyle,
+        children: cancelLabel
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onConfirm,
+        disabled: loading,
+        "aria-busy": loading || void 0,
+        style: confirmStyle,
+        children: loading ? "Loading\u2026" : confirmLabel
+      }
+    )
+  ] });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Modal,
+    {
+      open,
+      onClose,
+      title,
+      footer,
+      className,
+      style,
+      children: description != null && /* @__PURE__ */ jsxRuntime.jsx("p", { style: { margin: 0, color: "var(--textSecondary)", lineHeight: 1.6 }, children: description })
+    }
+  );
+}
+var Input = react.forwardRef(
+  ({
+    type = "text",
+    label,
+    helperText,
+    error,
+    iconLeft,
+    iconRight,
+    className,
+    style,
+    disabled,
+    id: idProp,
+    ...rest
+  }, ref) => {
+    const autoId = react.useId();
+    const id = idProp ?? autoId;
+    const helperId = `${id}-helper`;
+    const errorId = `${id}-error`;
+    const hasError = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px",
+          ...style
+        },
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: id,
+              style: {
+                fontSize: "14px",
+                fontWeight: 500,
+                color: "var(--text)"
+              },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+            iconLeft && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  left: "10px",
+                  display: "flex",
+                  alignItems: "center",
+                  color: "var(--text-muted, var(--text))",
+                  pointerEvents: "none"
+                },
+                children: iconLeft
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "input",
+              {
+                ref,
+                id,
+                type,
+                disabled,
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": [hasError && errorId, helperText && helperId].filter(Boolean).join(" ") || void 0,
+                style: {
+                  width: "100%",
+                  padding: "8px 12px",
+                  paddingLeft: iconLeft ? "36px" : "12px",
+                  paddingRight: iconRight ? "36px" : "12px",
+                  fontSize: "14px",
+                  lineHeight: "20px",
+                  color: "var(--text)",
+                  backgroundColor: "var(--surface)",
+                  border: `1px solid ${hasError ? "var(--error)" : "var(--border)"}`,
+                  borderRadius: "6px",
+                  outline: "none",
+                  transition: "border-color 0.15s, box-shadow 0.15s",
+                  opacity: disabled ? 0.5 : 1,
+                  cursor: disabled ? "not-allowed" : void 0,
+                  boxSizing: "border-box"
+                },
+                onFocus: (e) => {
+                  e.currentTarget.style.borderColor = hasError ? "var(--error)" : "var(--accent)";
+                  e.currentTarget.style.boxShadow = `0 0 0 2px ${hasError ? "var(--error)" : "var(--accent)"}33`;
+                  rest.onFocus?.(e);
+                },
+                onBlur: (e) => {
+                  e.currentTarget.style.borderColor = hasError ? "var(--error)" : "var(--border)";
+                  e.currentTarget.style.boxShadow = "none";
+                  rest.onBlur?.(e);
+                },
+                ...rest
+              }
+            ),
+            iconRight && /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  right: "10px",
+                  display: "flex",
+                  alignItems: "center",
+                  color: "var(--text-muted, var(--text))",
+                  pointerEvents: "none"
+                },
+                children: iconRight
+              }
+            )
+          ] }),
+          errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              id: errorId,
+              role: "alert",
+              style: { fontSize: "12px", color: "var(--error)" },
+              children: errorMessage
+            }
+          ),
+          helperText && !errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              id: helperId,
+              style: {
+                fontSize: "12px",
+                color: "var(--text-muted, var(--text))"
+              },
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+var Select = react.forwardRef(
+  ({
+    label,
+    error,
+    helperText,
+    options,
+    placeholder,
+    className,
+    style,
+    disabled,
+    id: idProp,
+    ...rest
+  }, ref) => {
+    const autoId = react.useId();
+    const id = idProp ?? autoId;
+    const helperId = `${id}-helper`;
+    const errorId = `${id}-error`;
+    const hasError = Boolean(error);
+    const errorMessage = typeof error === "string" ? error : void 0;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "div",
+      {
+        className,
+        style: {
+          display: "flex",
+          flexDirection: "column",
+          gap: "6px",
+          ...style
+        },
+        children: [
+          label && /* @__PURE__ */ jsxRuntime.jsx(
+            "label",
+            {
+              htmlFor: id,
+              style: {
+                fontSize: "14px",
+                fontWeight: 500,
+                color: "var(--text)"
+              },
+              children: label
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsxs("div", { style: { position: "relative", display: "flex", alignItems: "center" }, children: [
+            /* @__PURE__ */ jsxRuntime.jsxs(
+              "select",
+              {
+                ref,
+                id,
+                disabled,
+                "aria-invalid": hasError || void 0,
+                "aria-describedby": [hasError && errorId, helperText && helperId].filter(Boolean).join(" ") || void 0,
+                style: {
+                  width: "100%",
+                  padding: "8px 32px 8px 12px",
+                  fontSize: "14px",
+                  lineHeight: "20px",
+                  color: "var(--text)",
+                  backgroundColor: "var(--surface)",
+                  border: `1px solid ${hasError ? "var(--error)" : "var(--border)"}`,
+                  borderRadius: "6px",
+                  outline: "none",
+                  appearance: "none",
+                  cursor: disabled ? "not-allowed" : "pointer",
+                  opacity: disabled ? 0.5 : 1,
+                  transition: "border-color 0.15s, box-shadow 0.15s",
+                  boxSizing: "border-box"
+                },
+                onFocus: (e) => {
+                  e.currentTarget.style.borderColor = hasError ? "var(--error)" : "var(--accent)";
+                  e.currentTarget.style.boxShadow = `0 0 0 2px ${hasError ? "var(--error)" : "var(--accent)"}33`;
+                  rest.onFocus?.(e);
+                },
+                onBlur: (e) => {
+                  e.currentTarget.style.borderColor = hasError ? "var(--error)" : "var(--border)";
+                  e.currentTarget.style.boxShadow = "none";
+                  rest.onBlur?.(e);
+                },
+                ...rest,
+                children: [
+                  placeholder && /* @__PURE__ */ jsxRuntime.jsx("option", { value: "", disabled: true, children: placeholder }),
+                  options.map((opt) => /* @__PURE__ */ jsxRuntime.jsx("option", { value: opt.value, children: opt.label }, opt.value))
+                ]
+              }
+            ),
+            /* @__PURE__ */ jsxRuntime.jsx(
+              "svg",
+              {
+                "aria-hidden": "true",
+                width: "16",
+                height: "16",
+                viewBox: "0 0 16 16",
+                fill: "none",
+                style: {
+                  position: "absolute",
+                  right: "10px",
+                  pointerEvents: "none",
+                  color: "var(--text-muted, var(--text))"
+                },
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  "path",
+                  {
+                    d: "M4 6l4 4 4-4",
+                    stroke: "currentColor",
+                    strokeWidth: "1.5",
+                    strokeLinecap: "round",
+                    strokeLinejoin: "round"
+                  }
+                )
+              }
+            )
+          ] }),
+          errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              id: errorId,
+              role: "alert",
+              style: { fontSize: "12px", color: "var(--error)" },
+              children: errorMessage
+            }
+          ),
+          helperText && !errorMessage && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              id: helperId,
+              style: {
+                fontSize: "12px",
+                color: "var(--text-muted, var(--text))"
+              },
+              children: helperText
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Select.displayName = "Select";
+var variantStyles2 = {
+  primary: {
+    backgroundColor: "var(--accent)",
+    color: "var(--accent-text, #fff)",
+    border: "1px solid transparent"
+  },
+  secondary: {
+    backgroundColor: "var(--surface)",
+    color: "var(--text)",
+    border: "1px solid var(--border)"
+  },
+  ghost: {
+    backgroundColor: "transparent",
+    color: "var(--text)",
+    border: "1px solid transparent"
+  },
+  danger: {
+    backgroundColor: "var(--error)",
+    color: "var(--error-text, #fff)",
+    border: "1px solid transparent"
+  }
+};
+var Spinner = () => /* @__PURE__ */ jsxRuntime.jsxs(
+  "svg",
+  {
+    "aria-hidden": "true",
+    width: "16",
+    height: "16",
+    viewBox: "0 0 16 16",
+    fill: "none",
+    style: {
+      animation: "amber-spin 0.6s linear infinite",
+      flexShrink: 0
+    },
+    children: [
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "circle",
+        {
+          cx: "8",
+          cy: "8",
+          r: "6",
+          stroke: "currentColor",
+          strokeOpacity: "0.25",
+          strokeWidth: "2"
+        }
+      ),
+      /* @__PURE__ */ jsxRuntime.jsx(
+        "path",
+        {
+          d: "M14 8a6 6 0 0 0-6-6",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round"
+        }
+      )
+    ]
+  }
+);
+if (typeof document !== "undefined") {
+  const styleId = "amber-spin-keyframes";
+  if (!document.getElementById(styleId)) {
+    const sheet = document.createElement("style");
+    sheet.id = styleId;
+    sheet.textContent = `@keyframes amber-spin { to { transform: rotate(360deg); } }`;
+    document.head.appendChild(sheet);
+  }
+}
+var Button = react.forwardRef(
+  ({
+    variant = "primary",
+    icon,
+    loading = false,
+    disabled,
+    children,
+    className,
+    style,
+    type = "button",
+    ...rest
+  }, ref) => {
+    const isDisabled = disabled || loading;
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        ref,
+        type,
+        disabled: isDisabled,
+        className,
+        "aria-busy": loading || void 0,
+        style: {
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+          gap: "8px",
+          padding: "8px 16px",
+          fontSize: "14px",
+          fontWeight: 500,
+          lineHeight: "20px",
+          borderRadius: "6px",
+          cursor: isDisabled ? "not-allowed" : "pointer",
+          opacity: isDisabled ? 0.5 : 1,
+          transition: "background-color 0.15s, opacity 0.15s",
+          outline: "none",
+          textDecoration: "none",
+          whiteSpace: "nowrap",
+          boxSizing: "border-box",
+          ...variantStyles2[variant],
+          ...style
+        },
+        onFocus: (e) => {
+          e.currentTarget.style.boxShadow = "0 0 0 2px var(--accent)33";
+          rest.onFocus?.(e);
+        },
+        onBlur: (e) => {
+          e.currentTarget.style.boxShadow = "none";
+          rest.onBlur?.(e);
+        },
+        ...rest,
+        children: [
+          loading ? /* @__PURE__ */ jsxRuntime.jsx(Spinner, {}) : icon ? /* @__PURE__ */ jsxRuntime.jsx("span", { "aria-hidden": "true", style: { display: "flex", alignItems: "center", flexShrink: 0 }, children: icon }) : null,
+          children
+        ]
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+var TRACK_W = 40;
+var TRACK_H = 22;
+var THUMB_SIZE = 16;
+var THUMB_OFFSET = 3;
+var Toggle = ({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  className,
+  style
+}) => {
+  const autoId = react.useId();
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        opacity: disabled ? 0.5 : 1,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            id: autoId,
+            type: "button",
+            role: "switch",
+            "aria-checked": checked,
+            "aria-label": label ?? void 0,
+            disabled,
+            onClick: () => onChange(!checked),
+            style: {
+              position: "relative",
+              width: TRACK_W,
+              height: TRACK_H,
+              borderRadius: TRACK_H / 2,
+              backgroundColor: checked ? "var(--accent)" : "var(--border)",
+              border: "none",
+              padding: 0,
+              cursor: disabled ? "not-allowed" : "pointer",
+              transition: "background-color 0.2s",
+              outline: "none",
+              flexShrink: 0
+            },
+            onFocus: (e) => {
+              e.currentTarget.style.boxShadow = "0 0 0 2px var(--accent)33";
+            },
+            onBlur: (e) => {
+              e.currentTarget.style.boxShadow = "none";
+            },
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              "span",
+              {
+                "aria-hidden": "true",
+                style: {
+                  position: "absolute",
+                  top: THUMB_OFFSET,
+                  left: checked ? TRACK_W - THUMB_SIZE - THUMB_OFFSET : THUMB_OFFSET,
+                  width: THUMB_SIZE,
+                  height: THUMB_SIZE,
+                  borderRadius: "50%",
+                  backgroundColor: "#fff",
+                  transition: "left 0.2s",
+                  boxShadow: "0 1px 3px rgba(0,0,0,0.2)"
+                }
+              }
+            )
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: autoId,
+            style: {
+              fontSize: "14px",
+              color: "var(--text)",
+              cursor: disabled ? "not-allowed" : "pointer",
+              userSelect: "none"
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+Toggle.displayName = "Toggle";
+var SIZE = 18;
+var Checkbox = ({
+  checked,
+  onChange,
+  label,
+  disabled = false,
+  indeterminate = false,
+  className,
+  style
+}) => {
+  const autoId = react.useId();
+  const inputRef = react.useRef(null);
+  react.useEffect(() => {
+    if (inputRef.current) {
+      inputRef.current.indeterminate = indeterminate;
+    }
+  }, [indeterminate]);
+  const isActive = checked || indeterminate;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      className,
+      style: {
+        display: "inline-flex",
+        alignItems: "center",
+        gap: "8px",
+        opacity: disabled ? 0.5 : 1,
+        cursor: disabled ? "not-allowed" : "pointer",
+        ...style
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "span",
+          {
+            style: {
+              position: "relative",
+              display: "inline-flex",
+              alignItems: "center",
+              justifyContent: "center",
+              width: SIZE,
+              height: SIZE,
+              flexShrink: 0
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  id: autoId,
+                  type: "checkbox",
+                  checked,
+                  disabled,
+                  onChange: (e) => onChange(e.target.checked),
+                  style: {
+                    position: "absolute",
+                    width: SIZE,
+                    height: SIZE,
+                    margin: 0,
+                    opacity: 0,
+                    cursor: disabled ? "not-allowed" : "pointer"
+                  }
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsxs(
+                "span",
+                {
+                  "aria-hidden": "true",
+                  style: {
+                    width: SIZE,
+                    height: SIZE,
+                    borderRadius: "4px",
+                    border: `1.5px solid ${isActive ? "var(--accent)" : "var(--border)"}`,
+                    backgroundColor: isActive ? "var(--accent)" : "var(--surface)",
+                    display: "flex",
+                    alignItems: "center",
+                    justifyContent: "center",
+                    transition: "background-color 0.15s, border-color 0.15s",
+                    pointerEvents: "none"
+                  },
+                  children: [
+                    checked && !indeterminate && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M2.5 6l2.5 2.5 4.5-5",
+                        stroke: "var(--accent-text, #fff)",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round"
+                      }
+                    ) }),
+                    indeterminate && /* @__PURE__ */ jsxRuntime.jsx("svg", { width: "12", height: "12", viewBox: "0 0 12 12", fill: "none", children: /* @__PURE__ */ jsxRuntime.jsx(
+                      "path",
+                      {
+                        d: "M3 6h6",
+                        stroke: "var(--accent-text, #fff)",
+                        strokeWidth: "1.5",
+                        strokeLinecap: "round"
+                      }
+                    ) })
+                  ]
+                }
+              )
+            ]
+          }
+        ),
+        label && /* @__PURE__ */ jsxRuntime.jsx(
+          "label",
+          {
+            htmlFor: autoId,
+            style: {
+              fontSize: "14px",
+              color: "var(--text)",
+              cursor: disabled ? "not-allowed" : "pointer",
+              userSelect: "none"
+            },
+            children: label
+          }
+        )
+      ]
+    }
+  );
+};
+Checkbox.displayName = "Checkbox";
+var barStyle2 = {
+  display: "flex",
+  gap: 4,
+  borderBottom: "1px solid var(--border)",
+  background: "var(--surface)",
+  position: "relative",
+  overflowX: "auto"
+};
+var baseTabStyle = {
+  position: "relative",
+  padding: "10px 16px",
+  fontSize: 14,
+  fontWeight: 500,
+  fontFamily: "inherit",
+  lineHeight: "20px",
+  color: "var(--text-secondary)",
+  background: "none",
+  border: "none",
+  borderBottom: "2px solid transparent",
+  cursor: "pointer",
+  whiteSpace: "nowrap",
+  transition: "color 150ms, border-color 150ms",
+  outline: "none"
+};
+var activeTabStyle = {
+  color: "var(--accent)",
+  borderBottomColor: "var(--accent)"
+};
+var disabledTabStyle = {
+  color: "var(--text-muted)",
+  cursor: "not-allowed",
+  opacity: 0.6
+};
+var focusVisibleOutline = {
+  outline: "2px solid var(--accent)",
+  outlineOffset: -2,
+  borderRadius: 4
+};
+function Tabs({ tabs, activeKey, onChange, className, style }) {
+  const tabRefs = react.useRef([]);
+  const enabledIndices = tabs.reduce((acc, tab, i) => {
+    if (!tab.disabled) acc.push(i);
+    return acc;
+  }, []);
+  function focusTab(index) {
+    tabRefs.current[index]?.focus();
+  }
+  function handleKeyDown(e) {
+    const target = e.target;
+    const currentIndex = tabRefs.current.indexOf(target);
+    if (currentIndex === -1) return;
+    const pos = enabledIndices.indexOf(currentIndex);
+    let nextIndex;
+    switch (e.key) {
+      case "ArrowRight": {
+        const next = pos < enabledIndices.length - 1 ? pos + 1 : 0;
+        nextIndex = enabledIndices[next];
+        break;
+      }
+      case "ArrowLeft": {
+        const prev = pos > 0 ? pos - 1 : enabledIndices.length - 1;
+        nextIndex = enabledIndices[prev];
+        break;
+      }
+      case "Home":
+        nextIndex = enabledIndices[0];
+        break;
+      case "End":
+        nextIndex = enabledIndices[enabledIndices.length - 1];
+        break;
+      default:
+        return;
+    }
+    if (nextIndex !== void 0) {
+      e.preventDefault();
+      focusTab(nextIndex);
+    }
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      className,
+      style: { ...barStyle2, ...style },
+      onKeyDown: handleKeyDown,
+      children: tabs.map((tab, i) => {
+        const isActive = tab.key === activeKey;
+        const isDisabled = !!tab.disabled;
+        return /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            ref: (el) => {
+              tabRefs.current[i] = el;
+            },
+            role: "tab",
+            id: `tab-${tab.key}`,
+            "aria-selected": isActive,
+            "aria-disabled": isDisabled || void 0,
+            "aria-controls": `tabpanel-${tab.key}`,
+            tabIndex: isActive ? 0 : -1,
+            disabled: isDisabled,
+            onClick: () => {
+              if (!isDisabled) onChange(tab.key);
+            },
+            onFocus: (e) => {
+              Object.assign(e.currentTarget.style, focusVisibleOutline);
+            },
+            onBlur: (e) => {
+              e.currentTarget.style.outline = "none";
+              e.currentTarget.style.outlineOffset = "";
+              e.currentTarget.style.borderRadius = "";
+            },
+            style: {
+              ...baseTabStyle,
+              ...isActive ? activeTabStyle : void 0,
+              ...isDisabled ? disabledTabStyle : void 0
+            },
+            children: tab.label
+          },
+          tab.key
+        );
+      })
+    }
+  );
+}
+var wrapperStyle = {
+  position: "relative",
+  display: "inline-block"
+};
+var triggerBtnStyle = {
+  background: "none",
+  border: "none",
+  padding: 0,
+  cursor: "pointer",
+  font: "inherit",
+  color: "inherit",
+  display: "inline-flex",
+  alignItems: "center"
+};
+var menuBase = {
+  position: "absolute",
+  top: "calc(100% + 4px)",
+  zIndex: 1e3,
+  minWidth: 180,
+  padding: "4px 0",
+  background: "var(--surface)",
+  border: "1px solid var(--border)",
+  borderRadius: 10,
+  boxShadow: "var(--shadow-md)",
+  listStyle: "none",
+  margin: 0,
+  outline: "none"
+};
+var itemBase = {
+  display: "flex",
+  alignItems: "center",
+  gap: 8,
+  width: "100%",
+  padding: "8px 12px",
+  fontSize: 14,
+  lineHeight: "20px",
+  fontFamily: "inherit",
+  color: "var(--text)",
+  background: "none",
+  border: "none",
+  cursor: "pointer",
+  textAlign: "left",
+  whiteSpace: "nowrap",
+  outline: "none"
+};
+var itemDisabled = {
+  color: "var(--text-muted)",
+  cursor: "not-allowed",
+  opacity: 0.5
+};
+var itemDanger = {
+  color: "var(--error)"
+};
+var itemHighlighted = {
+  background: "var(--surface-hover)"
+};
+var itemIconStyle = {
+  display: "inline-flex",
+  flexShrink: 0,
+  width: 16,
+  height: 16,
+  alignItems: "center",
+  justifyContent: "center"
+};
+function Dropdown({
+  trigger,
+  items,
+  onSelect,
+  align = "left",
+  className,
+  style
+}) {
+  const [open, setOpen] = react.useState(false);
+  const [highlightIndex, setHighlightIndex] = react.useState(-1);
+  const wrapperRef = react.useRef(null);
+  const menuRef = react.useRef(null);
+  const itemRefs = react.useRef([]);
+  const enabledIndices = items.reduce((acc, item, i) => {
+    if (!item.disabled) acc.push(i);
+    return acc;
+  }, []);
+  const openMenu = react.useCallback(() => {
+    setOpen(true);
+    setHighlightIndex(enabledIndices[0] ?? -1);
+  }, [enabledIndices]);
+  const closeMenu = react.useCallback(() => {
+    setOpen(false);
+    setHighlightIndex(-1);
+  }, []);
+  react.useEffect(() => {
+    if (!open) return;
+    function handleClick(e) {
+      if (wrapperRef.current && !wrapperRef.current.contains(e.target)) {
+        closeMenu();
+      }
+    }
+    document.addEventListener("mousedown", handleClick);
+    return () => document.removeEventListener("mousedown", handleClick);
+  }, [open, closeMenu]);
+  react.useEffect(() => {
+    if (open) {
+      menuRef.current?.focus();
+    }
+  }, [open]);
+  react.useEffect(() => {
+    if (highlightIndex >= 0) {
+      itemRefs.current[highlightIndex]?.scrollIntoView({ block: "nearest" });
+    }
+  }, [highlightIndex]);
+  function handleMenuKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown": {
+        e.preventDefault();
+        const pos = enabledIndices.indexOf(highlightIndex);
+        const next = pos < enabledIndices.length - 1 ? pos + 1 : 0;
+        setHighlightIndex(enabledIndices[next]);
+        break;
+      }
+      case "ArrowUp": {
+        e.preventDefault();
+        const pos = enabledIndices.indexOf(highlightIndex);
+        const prev = pos > 0 ? pos - 1 : enabledIndices.length - 1;
+        setHighlightIndex(enabledIndices[prev]);
+        break;
+      }
+      case "Home":
+        e.preventDefault();
+        setHighlightIndex(enabledIndices[0]);
+        break;
+      case "End":
+        e.preventDefault();
+        setHighlightIndex(enabledIndices[enabledIndices.length - 1]);
+        break;
+      case "Enter":
+      case " ": {
+        e.preventDefault();
+        const item = items[highlightIndex];
+        if (item && !item.disabled) {
+          onSelect(item.key);
+          closeMenu();
+        }
+        break;
+      }
+      case "Escape":
+        e.preventDefault();
+        closeMenu();
+        break;
+      case "Tab":
+        closeMenu();
+        break;
+      default: {
+        if (e.key.length === 1) {
+          const char = e.key.toLowerCase();
+          const match = enabledIndices.find(
+            (i) => items[i].label.toLowerCase().startsWith(char)
+          );
+          if (match !== void 0) setHighlightIndex(match);
+        }
+      }
+    }
+  }
+  function handleTriggerKeyDown(e) {
+    if (e.key === "ArrowDown" || e.key === "Enter" || e.key === " ") {
+      e.preventDefault();
+      if (!open) openMenu();
+    }
+  }
+  const menuAlignStyle = align === "right" ? { right: 0 } : { left: 0 };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      ref: wrapperRef,
+      className,
+      style: { ...wrapperStyle, ...style },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsx(
+          "button",
+          {
+            type: "button",
+            "aria-haspopup": "true",
+            "aria-expanded": open,
+            onClick: () => open ? closeMenu() : openMenu(),
+            onKeyDown: handleTriggerKeyDown,
+            style: triggerBtnStyle,
+            children: trigger
+          }
+        ),
+        open && /* @__PURE__ */ jsxRuntime.jsx(
+          "ul",
+          {
+            ref: menuRef,
+            role: "menu",
+            tabIndex: -1,
+            onKeyDown: handleMenuKeyDown,
+            style: { ...menuBase, ...menuAlignStyle },
+            children: items.map((item, i) => {
+              const isHighlighted = i === highlightIndex;
+              const isDisabled = !!item.disabled;
+              return /* @__PURE__ */ jsxRuntime.jsxs(
+                "li",
+                {
+                  ref: (el) => {
+                    itemRefs.current[i] = el;
+                  },
+                  role: "menuitem",
+                  "aria-disabled": isDisabled || void 0,
+                  onMouseEnter: () => {
+                    if (!isDisabled) setHighlightIndex(i);
+                  },
+                  onMouseLeave: () => setHighlightIndex(-1),
+                  onClick: () => {
+                    if (!isDisabled) {
+                      onSelect(item.key);
+                      closeMenu();
+                    }
+                  },
+                  style: {
+                    ...itemBase,
+                    ...item.danger ? itemDanger : void 0,
+                    ...isDisabled ? itemDisabled : void 0,
+                    ...isHighlighted && !isDisabled ? itemHighlighted : void 0
+                  },
+                  children: [
+                    item.icon && /* @__PURE__ */ jsxRuntime.jsx("span", { style: itemIconStyle, children: item.icon }),
+                    item.label
+                  ]
+                },
+                item.key
+              );
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+
+exports.AppShell = AppShell;
+exports.Badge = Badge;
+exports.Button = Button;
+exports.Checkbox = Checkbox;
+exports.ConfirmDialog = ConfirmDialog;
+exports.DataTable = DataTable;
+exports.Dropdown = Dropdown;
+exports.EmptyState = EmptyState;
+exports.Header = Header;
+exports.Input = Input;
+exports.Modal = Modal;
+exports.Select = Select;
+exports.Sidebar = Sidebar;
+exports.SidebarSection = SidebarSection;
+exports.Skeleton = Skeleton;
+exports.StatCard = StatCard;
+exports.Tabs = Tabs;
+exports.Toast = Toast;
+exports.ToastProvider = ToastProvider;
+exports.Toggle = Toggle;
+exports.useToast = useToast;
+//# sourceMappingURL=chunk-2NDCSOJ6.js.map
+//# sourceMappingURL=chunk-2NDCSOJ6.js.map