@veltrixsecops/app-sdk 3.1.0 → 3.5.0

package/dist/ui/index.cjs

@@ -30,6 +30,7 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
 // src/ui/index.tsx
 var ui_exports = {};
 __export(ui_exports, {
+  Alert: () => Alert,
   Badge: () => Badge,
   Button: () => Button,
   Card: () => Card,
@@ -39,13 +40,19 @@ __export(ui_exports, {
   Checkbox: () => Checkbox,
   DataTable: () => DataTable,
   EmptyState: () => EmptyState,
+  FilterBar: () => FilterBar,
   FormDialog: () => FormDialog,
   FormField: () => FormField,
   Input: () => Input,
+  Modal: () => Modal,
+  MultiSelect: () => MultiSelect,
+  Pagination: () => Pagination,
+  SearchBox: () => SearchBox,
   Select: () => Select,
   Skeleton: () => Skeleton,
   SkeletonCard: () => SkeletonCard,
   SkeletonText: () => SkeletonText,
+  SortSelect: () => SortSelect,
   Spinner: () => Spinner,
   StatsCard: () => StatsCard,
   Tabs: () => Tabs,
@@ -295,6 +302,110 @@ var Select = (props) => {
   ] });
 };
 Select.displayName = "Select";
+var SearchBox = (props) => {
+  const HostSearchBox = getHostUi("SearchBox");
+  if (HostSearchBox) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSearchBox, { ...props });
+  const { value, onChange, placeholder, disabled, className, "aria-label": ariaLabel } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "input",
+    {
+      type: "search",
+      value,
+      onChange: (event) => onChange(event.target.value),
+      placeholder,
+      disabled,
+      "aria-label": ariaLabel ?? placeholder ?? "Search",
+      className,
+      style: { ...fallbackNote, width: "100%", padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" }
+    }
+  );
+};
+SearchBox.displayName = "SearchBox";
+var Pagination = (props) => {
+  const HostPagination = getHostUi("Pagination");
+  if (HostPagination) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostPagination, { ...props });
+  const { page, pageSize, totalItems, onPageChange, disabled, className } = props;
+  const pageCount = Math.max(1, Math.ceil(totalItems / pageSize));
+  const canGoPrev = !disabled && page > 1;
+  const canGoNext = !disabled && page < pageCount;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("nav", { "aria-label": "Pagination", className, style: { ...fallbackNote, display: "flex", alignItems: "center", gap: 12 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => onPageChange(page - 1), disabled: !canGoPrev, style: { padding: "4px 10px" }, children: "Prev" }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("span", { children: [
+      "page ",
+      page,
+      " of ",
+      pageCount
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: () => onPageChange(page + 1), disabled: !canGoNext, style: { padding: "4px 10px" }, children: "Next" })
+  ] });
+};
+Pagination.displayName = "Pagination";
+var FilterBar = (props) => {
+  const HostFilterBar = getHostUi("FilterBar");
+  if (HostFilterBar) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostFilterBar, { ...props });
+  const { filters, search, className } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { ...fallbackNote, display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }, children: [
+    search && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "input",
+      {
+        type: "search",
+        "aria-label": search.placeholder ?? "Search",
+        placeholder: search.placeholder,
+        value: search.value,
+        onChange: (event) => search.onChange(event.target.value),
+        style: { padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" }
+      }
+    ),
+    filters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { display: "flex", flexDirection: "column", fontSize: 12 }, children: [
+      filter.label,
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "select",
+        {
+          "aria-label": filter.label,
+          value: filter.value ?? "",
+          onChange: (event) => filter.onChange(event.target.value === "" ? null : event.target.value),
+          style: { padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: "", children: filter.label }),
+            filter.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
+          ]
+        }
+      )
+    ] }, filter.key))
+  ] });
+};
+FilterBar.displayName = "FilterBar";
+var SortSelect = (props) => {
+  const HostSortSelect = getHostUi("SortSelect");
+  if (HostSortSelect) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostSortSelect, { ...props });
+  const { options, value, direction, onChange, disabled, className } = props;
+  const directionLabel = direction === "asc" ? "Sort ascending" : "Sort descending";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className, style: { ...fallbackNote, display: "flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "select",
+      {
+        "aria-label": "Sort by",
+        value,
+        disabled,
+        onChange: (event) => onChange(event.target.value, direction),
+        style: { padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "button",
+      {
+        type: "button",
+        disabled,
+        onClick: () => onChange(value, direction === "asc" ? "desc" : "asc"),
+        "aria-label": directionLabel,
+        style: { padding: "4px 10px" },
+        children: direction === "asc" ? "\u2191" : "\u2193"
+      }
+    )
+  ] });
+};
+SortSelect.displayName = "SortSelect";
 var FormField = (props) => {
   const HostFormField = getHostUi("FormField");
   if (HostFormField) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostFormField, { ...props });
@@ -598,6 +709,136 @@ var FormDialog = (props) => {
   );
 };
 FormDialog.displayName = "FormDialog";
+var MODAL_MAX_WIDTH = { sm: 420, md: 520, lg: 680, xl: 896 };
+var Modal = (props) => {
+  const HostModal = getHostUi("Modal");
+  if (HostModal) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostModal, { ...props });
+  const {
+    isOpen,
+    onClose,
+    title,
+    subtitle,
+    children,
+    footer,
+    size = "md",
+    disableBackdropClose = false,
+    disableEscapeClose = false,
+    hideCloseButton = false,
+    closeLabel = "Close",
+    className
+  } = props;
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !disableEscapeClose) onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, disableEscapeClose, onClose]);
+  if (!isOpen) return null;
+  const hasHeader = title != null || subtitle != null || !hideCloseButton;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      style: { position: "fixed", inset: 0, background: "rgba(0,0,0,0.5)", display: "flex", alignItems: "center", justifyContent: "center", zIndex: 50 },
+      onClick: disableBackdropClose ? void 0 : onClose,
+      children: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          style: { background: "white", color: "black", borderRadius: 8, width: "100%", maxWidth: MODAL_MAX_WIDTH[size], maxHeight: "80vh", overflow: "auto", ...fallbackNote },
+          className,
+          onClick: (event) => event.stopPropagation(),
+          children: [
+            hasHeader && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { padding: 16, borderBottom: "1px solid #d1d5db", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }, children: [
+              /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0 }, children: [
+                title != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h3", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: title }),
+                subtitle != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#6b7280" }, children: subtitle })
+              ] }),
+              !hideCloseButton && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("button", { type: "button", onClick: onClose, "aria-label": closeLabel, style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, lineHeight: 1 }, children: "\xD7" })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 12 }, children }),
+            footer != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { padding: 16, borderTop: "1px solid #d1d5db", display: "flex", justifyContent: "flex-end", gap: 8 }, children: footer })
+          ]
+        }
+      )
+    }
+  );
+};
+Modal.displayName = "Modal";
+var ALERT_FALLBACK_COLORS = {
+  info: { bg: "#eff6ff", fg: "#1e40af", border: "#93c5fd" },
+  success: { bg: "#ecfdf5", fg: "#065f46", border: "#6ee7b7" },
+  warning: { bg: "#fffbeb", fg: "#92400e", border: "#fcd34d" },
+  danger: { bg: "#fef2f2", fg: "#991b1b", border: "#fca5a5" }
+};
+var Alert = (props) => {
+  const HostAlert = getHostUi("Alert");
+  if (HostAlert) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostAlert, { ...props });
+  const { variant = "info", title, children, icon, onDismiss, action, className } = props;
+  const c = ALERT_FALLBACK_COLORS[variant];
+  const role = variant === "danger" || variant === "warning" ? "alert" : "status";
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    "div",
+    {
+      role,
+      className,
+      style: {
+        display: "flex",
+        alignItems: "flex-start",
+        gap: 10,
+        border: `1px solid ${c.border}`,
+        background: c.bg,
+        color: c.fg,
+        borderRadius: 8,
+        padding: "12px 16px",
+        ...fallbackNote
+      },
+      children: [
+        icon !== false && icon != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { flexShrink: 0 }, children: icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { style: { minWidth: 0, flex: 1 }, children: [
+          title != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { style: { margin: 0, fontSize: 14, fontWeight: 600 }, children: title }),
+          children != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { fontSize: 14, marginTop: title != null ? 2 : 0 }, children })
+        ] }),
+        action != null && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { style: { flexShrink: 0 }, children: action }),
+        onDismiss && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onDismiss,
+            "aria-label": "Dismiss",
+            style: { flexShrink: 0, background: "none", border: "none", cursor: "pointer", color: "inherit", opacity: 0.7 },
+            children: "\xD7"
+          }
+        )
+      ]
+    }
+  );
+};
+Alert.displayName = "Alert";
+var MultiSelect = (props) => {
+  const HostMultiSelect = getHostUi("MultiSelect");
+  if (HostMultiSelect) return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(HostMultiSelect, { ...props });
+  const { options, value = [], onChange, label, disabled, fullWidth = true, name } = props;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("label", { style: { ...fallbackNote, display: "block", width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { style: { display: "block", marginBottom: 4, fontSize: 14, fontWeight: 500 }, children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+      "select",
+      {
+        multiple: true,
+        name,
+        disabled,
+        value,
+        "aria-label": props["aria-label"],
+        onChange: (e) => onChange?.(Array.from(e.target.selectedOptions, (o) => o.value)),
+        style: { width: "100%", minHeight: 96, padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+        children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+      }
+    )
+  ] });
+};
+MultiSelect.displayName = "MultiSelect";
 function fallbackToast(message, options) {
   console.warn(`[@veltrixsecops/app-sdk/ui] Toast (${options?.variant ?? "info"}): ${message}`);
   return "fallback-toast";
@@ -635,6 +876,7 @@ function useConfirmDialog() {
 }
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  Alert,
   Badge,
   Button,
   Card,
@@ -644,13 +886,19 @@ function useConfirmDialog() {
   Checkbox,
   DataTable,
   EmptyState,
+  FilterBar,
   FormDialog,
   FormField,
   Input,
+  Modal,
+  MultiSelect,
+  Pagination,
+  SearchBox,
   Select,
   Skeleton,
   SkeletonCard,
   SkeletonText,
+  SortSelect,
   Spinner,
   StatsCard,
   Tabs,