@veltrixsecops/app-sdk 3.2.0 → 3.5.1

package/dist/chunk-3WK4EVQ3.js

@@ -0,0 +1,842 @@
+import {
+  getHostRuntime
+} from "./chunk-HIL6RIDG.js";
+
+// src/ui/index.tsx
+import * as React from "react";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+function getHostUi(name) {
+  return getHostRuntime()?.ui?.[name];
+}
+var fallbackNote = { fontFamily: "inherit" };
+var Button = React.forwardRef((props, ref) => {
+  const HostButton = getHostUi("Button");
+  if (HostButton) return /* @__PURE__ */ jsx(HostButton, { ref, ...props });
+  const {
+    variant: _variant,
+    size: _size,
+    isLoading,
+    loadingText,
+    fullWidth,
+    leftIcon,
+    rightIcon,
+    children,
+    disabled,
+    type,
+    style,
+    ...rest
+  } = props;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type: type ?? "button",
+      disabled: disabled || isLoading,
+      "aria-busy": isLoading || void 0,
+      style: {
+        ...fallbackNote,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 6,
+        padding: "6px 14px",
+        borderRadius: 6,
+        border: "1px solid currentColor",
+        background: "transparent",
+        cursor: disabled || isLoading ? "not-allowed" : "pointer",
+        width: fullWidth ? "100%" : void 0,
+        opacity: disabled || isLoading ? 0.6 : 1,
+        justifyContent: "center",
+        ...style
+      },
+      ...rest,
+      children: [
+        leftIcon,
+        isLoading ? loadingText ?? children : children,
+        rightIcon
+      ]
+    }
+  );
+});
+Button.displayName = "Button";
+var BADGE_FALLBACK_COLORS = {
+  default: "#6b7280",
+  primary: "#4f46e5",
+  secondary: "#6b7280",
+  success: "#16a34a",
+  danger: "#dc2626",
+  warning: "#d97706",
+  info: "#0284c7"
+};
+var Badge = ({ variant = "default", size = "md", rounded, dot, children, style, ...rest }) => {
+  const HostBadge = getHostUi("Badge");
+  if (HostBadge) return /* @__PURE__ */ jsx(HostBadge, { variant, size, rounded, dot, style, ...rest, children });
+  const color = BADGE_FALLBACK_COLORS[variant];
+  const fontSize = size === "sm" ? 11 : size === "lg" ? 14 : 12;
+  return /* @__PURE__ */ jsxs(
+    "span",
+    {
+      style: {
+        ...fallbackNote,
+        display: "inline-flex",
+        alignItems: "center",
+        gap: 4,
+        padding: size === "sm" ? "1px 6px" : size === "lg" ? "3px 10px" : "2px 8px",
+        borderRadius: rounded ? 999 : 4,
+        border: `1px solid ${color}`,
+        color,
+        fontSize,
+        fontWeight: 500,
+        ...style
+      },
+      ...rest,
+      children: [
+        dot && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { width: 6, height: 6, borderRadius: "50%", background: color } }),
+        children
+      ]
+    }
+  );
+};
+Badge.displayName = "Badge";
+var Card = ({ children, style, ...rest }) => {
+  const HostCard = getHostUi("Card");
+  if (HostCard) return /* @__PURE__ */ jsx(HostCard, { style, ...rest, children });
+  return /* @__PURE__ */ jsx("div", { style: { ...fallbackNote, border: "1px solid #d1d5db", borderRadius: 8, overflow: "hidden", ...style }, ...rest, children });
+};
+Card.displayName = "Card";
+var CardHeader = ({ actions, children, style, ...rest }) => {
+  const HostCardHeader = getHostUi("CardHeader");
+  if (HostCardHeader) return /* @__PURE__ */ jsx(HostCardHeader, { actions, style, ...rest, children });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      style: {
+        ...fallbackNote,
+        padding: "12px 16px",
+        borderBottom: "1px solid #d1d5db",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "space-between",
+        gap: 12,
+        ...style
+      },
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("div", { style: { flex: 1, minWidth: 0 }, children }),
+        actions && /* @__PURE__ */ jsx("div", { children: actions })
+      ]
+    }
+  );
+};
+CardHeader.displayName = "CardHeader";
+var CardBody = ({ children, style, ...rest }) => {
+  const HostCardBody = getHostUi("CardBody");
+  if (HostCardBody) return /* @__PURE__ */ jsx(HostCardBody, { style, ...rest, children });
+  return /* @__PURE__ */ jsx("div", { style: { ...fallbackNote, padding: "12px 16px", ...style }, ...rest, children });
+};
+CardBody.displayName = "CardBody";
+var CardFooter = ({ children, style, ...rest }) => {
+  const HostCardFooter = getHostUi("CardFooter");
+  if (HostCardFooter) return /* @__PURE__ */ jsx(HostCardFooter, { style, ...rest, children });
+  return /* @__PURE__ */ jsx("div", { style: { ...fallbackNote, padding: "12px 16px", borderTop: "1px solid #d1d5db", ...style }, ...rest, children });
+};
+CardFooter.displayName = "CardFooter";
+var Input = React.forwardRef((props, ref) => {
+  const HostInput = getHostUi("Input");
+  if (HostInput) return /* @__PURE__ */ jsx(HostInput, { ref, ...props });
+  const { label, error, helperText, leftIcon, rightIcon, fullWidth = true, id, style, ...rest } = props;
+  const inputId = id ?? (label ? `vx-input-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxs("div", { style: { ...fallbackNote, width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 6 }, children: [
+      leftIcon,
+      /* @__PURE__ */ jsx(
+        "input",
+        {
+          ref,
+          id: inputId,
+          "aria-invalid": !!error || void 0,
+          style: { flex: 1, padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af", ...style },
+          ...rest
+        }
+      ),
+      rightIcon
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ jsx("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+});
+Input.displayName = "Input";
+var Textarea = React.forwardRef((props, ref) => {
+  const HostTextarea = getHostUi("Textarea");
+  if (HostTextarea) return /* @__PURE__ */ jsx(HostTextarea, { ref, ...props });
+  const { label, error, helperText, fullWidth = true, id, rows = 4, style, ...rest } = props;
+  const textareaId = id ?? (label ? `vx-textarea-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxs("div", { style: { ...fallbackNote, width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: textareaId, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref,
+        id: textareaId,
+        rows,
+        "aria-invalid": !!error || void 0,
+        style: { width: "100%", padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af", ...style },
+        ...rest
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ jsx("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+});
+Textarea.displayName = "Textarea";
+var Checkbox = React.forwardRef((props, ref) => {
+  const HostCheckbox = getHostUi("Checkbox");
+  if (HostCheckbox) return /* @__PURE__ */ jsx(HostCheckbox, { ref, ...props });
+  const { label, error, helperText, id, disabled, ...rest } = props;
+  const generatedId = React.useId();
+  const inputId = id ?? generatedId;
+  return /* @__PURE__ */ jsxs("div", { style: fallbackNote, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", alignItems: "center", gap: 8 }, children: [
+      /* @__PURE__ */ jsx("input", { ref, id: inputId, type: "checkbox", disabled, "aria-invalid": !!error || void 0, ...rest }),
+      label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, style: { fontSize: 13, cursor: disabled ? "not-allowed" : "pointer", opacity: disabled ? 0.6 : 1 }, children: label })
+    ] }),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ jsx("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+});
+Checkbox.displayName = "Checkbox";
+var Select = (props) => {
+  const HostSelect = getHostUi("Select");
+  if (HostSelect) return /* @__PURE__ */ jsx(HostSelect, { ...props });
+  const { options, value, onChange, placeholder = "Select\u2026", label, error, helperText, disabled, fullWidth = true, id, name, className } = props;
+  const selectId = id ?? (label ? `vx-select-${label.toLowerCase().replace(/\s+/g, "-")}` : void 0);
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...fallbackNote, width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: selectId, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: label }),
+    /* @__PURE__ */ jsxs(
+      "select",
+      {
+        id: selectId,
+        name,
+        "aria-label": props["aria-label"],
+        "aria-invalid": !!error || void 0,
+        disabled,
+        value: value ?? "",
+        onChange: (event) => onChange?.(event.target.value),
+        style: { width: "100%", padding: "6px 10px", borderRadius: 6, border: "1px solid #9ca3af" },
+        children: [
+          placeholder && /* @__PURE__ */ jsx("option", { value: "", disabled: true, children: placeholder }),
+          options.map((option) => /* @__PURE__ */ jsx("option", { value: option.value, disabled: option.disabled, children: option.label }, option.value))
+        ]
+      }
+    ),
+    error && /* @__PURE__ */ jsx("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    helperText && !error && /* @__PURE__ */ jsx("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: helperText })
+  ] });
+};
+Select.displayName = "Select";
+var SearchBox = (props) => {
+  const HostSearchBox = getHostUi("SearchBox");
+  if (HostSearchBox) return /* @__PURE__ */ jsx(HostSearchBox, { ...props });
+  const { value, onChange, placeholder, disabled, className, "aria-label": ariaLabel } = props;
+  return /* @__PURE__ */ 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__ */ 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__ */ jsxs("nav", { "aria-label": "Pagination", className, style: { ...fallbackNote, display: "flex", alignItems: "center", gap: 12 }, children: [
+    /* @__PURE__ */ jsx("button", { type: "button", onClick: () => onPageChange(page - 1), disabled: !canGoPrev, style: { padding: "4px 10px" }, children: "Prev" }),
+    /* @__PURE__ */ jsxs("span", { children: [
+      "page ",
+      page,
+      " of ",
+      pageCount
+    ] }),
+    /* @__PURE__ */ 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__ */ jsx(HostFilterBar, { ...props });
+  const { filters, search, className } = props;
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...fallbackNote, display: "flex", flexWrap: "wrap", gap: 8, alignItems: "center" }, children: [
+    search && /* @__PURE__ */ 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__ */ jsxs("label", { style: { display: "flex", flexDirection: "column", fontSize: 12 }, children: [
+      filter.label,
+      /* @__PURE__ */ 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__ */ jsx("option", { value: "", children: filter.label }),
+            filter.options.map((option) => /* @__PURE__ */ 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__ */ jsx(HostSortSelect, { ...props });
+  const { options, value, direction, onChange, disabled, className } = props;
+  const directionLabel = direction === "asc" ? "Sort ascending" : "Sort descending";
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...fallbackNote, display: "flex", alignItems: "center", gap: 6 }, children: [
+    /* @__PURE__ */ 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__ */ jsx("option", { value: option.value, children: option.label }, option.value))
+      }
+    ),
+    /* @__PURE__ */ 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__ */ jsx(HostFormField, { ...props });
+  const { label, htmlFor, error, hint, required, className, children } = props;
+  return /* @__PURE__ */ jsxs("div", { className, style: fallbackNote, children: [
+    label && /* @__PURE__ */ jsxs("label", { htmlFor, style: { display: "block", fontSize: 13, fontWeight: 500, marginBottom: 4 }, children: [
+      label,
+      required && /* @__PURE__ */ jsx("span", { "aria-hidden": "true", style: { color: "#dc2626", marginLeft: 2 }, children: "*" })
+    ] }),
+    children,
+    error && /* @__PURE__ */ jsx("p", { role: "alert", style: { marginTop: 4, fontSize: 12, color: "#dc2626" }, children: error }),
+    hint && !error && /* @__PURE__ */ jsx("p", { style: { marginTop: 4, fontSize: 12, color: "#6b7280" }, children: hint })
+  ] });
+};
+FormField.displayName = "FormField";
+var Tabs = (props) => {
+  const HostTabs = getHostUi("Tabs");
+  if (HostTabs) return /* @__PURE__ */ jsx(HostTabs, { ...props });
+  const { tabs, defaultActiveIndex = 0, activeIndex, onTabChange, children, className } = props;
+  const [internalIndex, setInternalIndex] = React.useState(defaultActiveIndex);
+  const isControlled = activeIndex !== void 0;
+  const currentIndex = isControlled ? activeIndex : internalIndex;
+  const activeTab = tabs[currentIndex];
+  const selectTab = (index) => {
+    if (tabs[index]?.disabled) return;
+    if (!isControlled) setInternalIndex(index);
+    onTabChange?.(index);
+  };
+  return /* @__PURE__ */ jsxs("div", { className, style: fallbackNote, children: [
+    /* @__PURE__ */ jsx("div", { role: "tablist", style: { display: "flex", gap: 4, borderBottom: "1px solid #d1d5db" }, children: tabs.map((tab, index) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        role: "tab",
+        "aria-selected": index === currentIndex,
+        disabled: tab.disabled,
+        onClick: () => selectTab(index),
+        style: {
+          padding: "6px 12px",
+          border: "none",
+          borderBottom: index === currentIndex ? "2px solid currentColor" : "2px solid transparent",
+          background: "transparent",
+          cursor: tab.disabled ? "not-allowed" : "pointer",
+          fontWeight: index === currentIndex ? 600 : 400,
+          opacity: tab.disabled ? 0.5 : 1
+        },
+        children: tab.label
+      },
+      tab.key ?? index
+    )) }),
+    /* @__PURE__ */ jsx("div", { role: "tabpanel", style: { padding: 12 }, children: children || activeTab?.content })
+  ] });
+};
+Tabs.displayName = "Tabs";
+var EmptyState = (props) => {
+  const HostEmptyState = getHostUi("EmptyState");
+  if (HostEmptyState) return /* @__PURE__ */ jsx(HostEmptyState, { ...props });
+  const { icon, title, description, action, className } = props;
+  return /* @__PURE__ */ jsxs("div", { className, style: { ...fallbackNote, textAlign: "center", padding: "32px 16px" }, children: [
+    icon && /* @__PURE__ */ jsx("div", { style: { marginBottom: 12 }, children: icon }),
+    /* @__PURE__ */ jsx("p", { style: { fontWeight: 600, marginBottom: description ? 4 : 0 }, children: title }),
+    description && /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "#6b7280", marginBottom: action ? 12 : 0 }, children: description }),
+    action
+  ] });
+};
+EmptyState.displayName = "EmptyState";
+var skeletonRadius = { text: 4, circular: "50%", rectangular: 8 };
+var Skeleton = (props) => {
+  const HostSkeleton = getHostUi("Skeleton");
+  if (HostSkeleton) return /* @__PURE__ */ jsx(HostSkeleton, { ...props });
+  const { variant = "text", width, height, style, ...rest } = props;
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      style: {
+        background: "#e5e7eb",
+        borderRadius: skeletonRadius[variant],
+        width: width ?? (variant === "text" ? "100%" : void 0),
+        height: height ?? (variant === "text" ? 14 : void 0),
+        ...style
+      },
+      ...rest
+    }
+  );
+};
+Skeleton.displayName = "Skeleton";
+var SkeletonText = (props) => {
+  const HostSkeletonText = getHostUi("SkeletonText");
+  if (HostSkeletonText) return /* @__PURE__ */ jsx(HostSkeletonText, { ...props });
+  const { lines = 3, width = "100%", lastLineWidth = "80%", className } = props;
+  return /* @__PURE__ */ jsx("div", { className, style: { display: "flex", flexDirection: "column", gap: 8 }, children: Array.from({ length: lines }).map((_, index) => /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: index === lines - 1 ? lastLineWidth : width }, index)) });
+};
+SkeletonText.displayName = "SkeletonText";
+var SkeletonCard = (props) => {
+  const HostSkeletonCard = getHostUi("SkeletonCard");
+  if (HostSkeletonCard) return /* @__PURE__ */ jsx(HostSkeletonCard, { ...props });
+  const { hasAvatar, hasActions, className } = props;
+  return /* @__PURE__ */ jsxs("div", { className, style: { border: "1px solid #e5e7eb", borderRadius: 8, padding: 16 }, children: [
+    /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 12 }, children: [
+      hasAvatar && /* @__PURE__ */ jsx(Skeleton, { variant: "circular", width: 40, height: 40 }),
+      /* @__PURE__ */ jsxs("div", { style: { flex: 1 }, children: [
+        /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: "60%" }),
+        /* @__PURE__ */ jsx("div", { style: { marginTop: 8 }, children: /* @__PURE__ */ jsx(SkeletonText, { lines: 2 }) })
+      ] })
+    ] }),
+    hasActions && /* @__PURE__ */ jsxs("div", { style: { display: "flex", gap: 8, marginTop: 12 }, children: [
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: 72, height: 30 }),
+      /* @__PURE__ */ jsx(Skeleton, { variant: "rectangular", width: 72, height: 30 })
+    ] })
+  ] });
+};
+SkeletonCard.displayName = "SkeletonCard";
+var Tooltip = (props) => {
+  const HostTooltip = getHostUi("Tooltip");
+  if (HostTooltip) return /* @__PURE__ */ jsx(HostTooltip, { ...props });
+  const { content, disabled, className, children } = props;
+  const titleText = typeof content === "string" ? content : void 0;
+  if (disabled || !titleText) return /* @__PURE__ */ jsx(Fragment, { children });
+  return /* @__PURE__ */ jsx("span", { className, title: titleText, style: { display: "inline-flex" }, children });
+};
+Tooltip.displayName = "Tooltip";
+var spinnerDiameter = { sm: 16, md: 24, lg: 32 };
+var Spinner = (props) => {
+  const HostSpinner = getHostUi("Spinner");
+  if (HostSpinner) return /* @__PURE__ */ jsx(HostSpinner, { ...props });
+  const { size = "md", className, label } = props;
+  const diameter = spinnerDiameter[size];
+  return /* @__PURE__ */ jsxs("div", { className, role: "status", "aria-live": "polite", style: { display: "flex", flexDirection: "column", alignItems: "center" }, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": "true",
+        style: {
+          width: diameter,
+          height: diameter,
+          borderRadius: "50%",
+          border: "2px solid currentColor",
+          borderTopColor: "transparent",
+          animation: "vx-sdk-spin 0.8s linear infinite"
+        }
+      }
+    ),
+    label && /* @__PURE__ */ jsx("p", { style: { marginTop: 8, fontSize: 12, color: "#6b7280" }, children: label }),
+    /* @__PURE__ */ jsx("span", { style: { position: "absolute", width: 1, height: 1, overflow: "hidden", clip: "rect(0 0 0 0)" }, children: label || "Loading" }),
+    /* @__PURE__ */ jsx("style", { children: "@keyframes vx-sdk-spin { to { transform: rotate(360deg) } }" })
+  ] });
+};
+Spinner.displayName = "Spinner";
+function FallbackDataTable(props) {
+  const { columns, data, rowKey, isLoading, emptyState, onRowClick, rowActions, className } = props;
+  const showEmpty = !isLoading && data.length === 0;
+  return /* @__PURE__ */ jsx("div", { className, style: fallbackNote, children: /* @__PURE__ */ jsxs("table", { style: { width: "100%", borderCollapse: "collapse" }, children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+      columns.map((column) => /* @__PURE__ */ jsx("th", { style: { textAlign: column.align ?? "left", padding: "8px 10px", borderBottom: "1px solid #d1d5db" }, children: column.header }, column.key)),
+      rowActions && /* @__PURE__ */ jsx("th", { style: { padding: "8px 10px", borderBottom: "1px solid #d1d5db" } })
+    ] }) }),
+    /* @__PURE__ */ jsxs("tbody", { children: [
+      isLoading && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: Math.max(columns.length + (rowActions ? 1 : 0), 1), style: { padding: "12px 10px" }, children: "Loading\u2026" }) }),
+      showEmpty && /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: Math.max(columns.length + (rowActions ? 1 : 0), 1), children: /* @__PURE__ */ jsx(EmptyState, { title: emptyState?.title ?? "No data", description: emptyState?.description, icon: emptyState?.icon, action: emptyState?.action }) }) }),
+      !isLoading && !showEmpty && data.map((row) => /* @__PURE__ */ jsxs(
+        "tr",
+        {
+          onClick: onRowClick ? () => onRowClick(row) : void 0,
+          style: { cursor: onRowClick ? "pointer" : void 0, borderBottom: "1px solid #e5e7eb" },
+          children: [
+            columns.map((column) => /* @__PURE__ */ jsx("td", { style: { textAlign: column.align ?? "left", padding: "8px 10px" }, children: column.render ? column.render(row) : String(row[column.key] ?? "") }, column.key)),
+            rowActions && /* @__PURE__ */ jsx("td", { style: { padding: "8px 10px" }, onClick: (event) => event.stopPropagation(), children: rowActions(row) })
+          ]
+        },
+        rowKey(row)
+      ))
+    ] })
+  ] }) });
+}
+function DataTable(props) {
+  const HostDataTable = getHostUi("DataTable");
+  if (HostDataTable) return /* @__PURE__ */ jsx(HostDataTable, { ...props });
+  return /* @__PURE__ */ jsx(FallbackDataTable, { ...props });
+}
+var DELTA_FALLBACK_COLOR = {
+  up: "#16a34a",
+  down: "#dc2626",
+  neutral: "#6b7280"
+};
+var StatsCard = (props) => {
+  const HostStatsCard = getHostUi("StatsCard");
+  if (HostStatsCard) return /* @__PURE__ */ jsx(HostStatsCard, { ...props });
+  const { label, value, icon, delta, isLoading, onClick, className } = props;
+  const isClickable = Boolean(onClick);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: isClickable ? "button" : void 0,
+      tabIndex: isClickable ? 0 : void 0,
+      onClick,
+      onKeyDown: isClickable ? (event) => {
+        if (event.key === "Enter" || event.key === " ") {
+          event.preventDefault();
+          onClick?.();
+        }
+      } : void 0,
+      className,
+      style: {
+        ...fallbackNote,
+        border: "1px solid #d1d5db",
+        borderRadius: 8,
+        padding: 16,
+        display: "flex",
+        alignItems: "flex-start",
+        justifyContent: "space-between",
+        gap: 12,
+        cursor: isClickable ? "pointer" : void 0
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
+          /* @__PURE__ */ jsx("p", { style: { fontSize: 13, color: "#6b7280", margin: 0 }, children: label }),
+          /* @__PURE__ */ jsx("p", { style: { fontSize: 28, fontWeight: 700, margin: "4px 0 0" }, children: isLoading ? "\u2026" : value }),
+          delta && !isLoading && /* @__PURE__ */ jsxs("p", { style: { fontSize: 13, color: DELTA_FALLBACK_COLOR[delta.direction], margin: "4px 0 0" }, children: [
+            delta.value,
+            " ",
+            delta.label
+          ] })
+        ] }),
+        icon && /* @__PURE__ */ jsx("div", { "aria-hidden": "true", children: icon })
+      ]
+    }
+  );
+};
+StatsCard.displayName = "StatsCard";
+var FORM_DIALOG_MAX_WIDTH = { sm: 420, md: 520, lg: 680 };
+var FormDialog = (props) => {
+  const HostFormDialog = getHostUi("FormDialog");
+  if (HostFormDialog) return /* @__PURE__ */ jsx(HostFormDialog, { ...props });
+  const {
+    isOpen,
+    onClose,
+    title,
+    description,
+    children,
+    onSubmit,
+    submitText = "Save",
+    cancelText = "Cancel",
+    isSubmitting = false,
+    error = null,
+    size = "md",
+    disableBackdropClose = false,
+    submitDisabled = false
+  } = props;
+  React.useEffect(() => {
+    if (!isOpen) return;
+    const handleKeyDown = (event) => {
+      if (event.key === "Escape" && !isSubmitting) onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [isOpen, isSubmitting, onClose]);
+  if (!isOpen) return null;
+  const requestClose = () => {
+    if (!isSubmitting) onClose();
+  };
+  return /* @__PURE__ */ 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 : requestClose,
+      children: /* @__PURE__ */ jsx(
+        "div",
+        {
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-label": title,
+          style: { background: "white", color: "black", borderRadius: 8, width: "100%", maxWidth: FORM_DIALOG_MAX_WIDTH[size], maxHeight: "80vh", overflow: "auto", ...fallbackNote },
+          onClick: (event) => event.stopPropagation(),
+          children: /* @__PURE__ */ jsxs(
+            "form",
+            {
+              onSubmit: (event) => {
+                event.preventDefault();
+                void onSubmit();
+              },
+              children: [
+                /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderBottom: "1px solid #d1d5db" }, children: [
+                  /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: title }),
+                  description && /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#6b7280" }, children: description })
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 12 }, children: [
+                  error && /* @__PURE__ */ jsx("p", { role: "alert", style: { margin: 0, fontSize: 13, color: "#dc2626" }, children: error }),
+                  children
+                ] }),
+                /* @__PURE__ */ jsxs("div", { style: { padding: 16, borderTop: "1px solid #d1d5db", display: "flex", justifyContent: "flex-end", gap: 8 }, children: [
+                  /* @__PURE__ */ jsx(Button, { type: "button", variant: "secondary", onClick: requestClose, disabled: isSubmitting, children: cancelText }),
+                  /* @__PURE__ */ jsx(Button, { type: "submit", variant: "primary", isLoading: isSubmitting, disabled: submitDisabled, children: submitText })
+                ] })
+              ]
+            }
+          )
+        }
+      )
+    }
+  );
+};
+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__ */ 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__ */ 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__ */ 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__ */ jsxs("div", { style: { padding: 16, borderBottom: "1px solid #d1d5db", display: "flex", alignItems: "flex-start", justifyContent: "space-between", gap: 16 }, children: [
+              /* @__PURE__ */ jsxs("div", { style: { minWidth: 0 }, children: [
+                title != null && /* @__PURE__ */ jsx("h3", { style: { margin: 0, fontSize: 16, fontWeight: 600 }, children: title }),
+                subtitle != null && /* @__PURE__ */ jsx("p", { style: { margin: "4px 0 0", fontSize: 13, color: "#6b7280" }, children: subtitle })
+              ] }),
+              !hideCloseButton && /* @__PURE__ */ jsx("button", { type: "button", onClick: onClose, "aria-label": closeLabel, style: { background: "none", border: "none", cursor: "pointer", fontSize: 18, lineHeight: 1 }, children: "\xD7" })
+            ] }),
+            /* @__PURE__ */ jsx("div", { style: { padding: 16, display: "flex", flexDirection: "column", gap: 12 }, children }),
+            footer != null && /* @__PURE__ */ 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__ */ 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__ */ 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__ */ jsx("span", { style: { flexShrink: 0 }, children: icon }),
+        /* @__PURE__ */ jsxs("div", { style: { minWidth: 0, flex: 1 }, children: [
+          title != null && /* @__PURE__ */ jsx("p", { style: { margin: 0, fontSize: 14, fontWeight: 600 }, children: title }),
+          children != null && /* @__PURE__ */ jsx("div", { style: { fontSize: 14, marginTop: title != null ? 2 : 0 }, children })
+        ] }),
+        action != null && /* @__PURE__ */ jsx("div", { style: { flexShrink: 0 }, children: action }),
+        onDismiss && /* @__PURE__ */ 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__ */ jsx(HostMultiSelect, { ...props });
+  const { options, value = [], onChange, label, disabled, fullWidth = true, name } = props;
+  return /* @__PURE__ */ jsxs("label", { style: { ...fallbackNote, display: "block", width: fullWidth ? "100%" : void 0 }, children: [
+    label && /* @__PURE__ */ jsx("span", { style: { display: "block", marginBottom: 4, fontSize: 14, fontWeight: 500 }, children: label }),
+    /* @__PURE__ */ 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__ */ 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";
+}
+var fallbackToastContext = {
+  toasts: [],
+  toast: fallbackToast,
+  success: (message) => fallbackToast(message, { variant: "success" }),
+  error: (message) => fallbackToast(message, { variant: "error" }),
+  warning: (message) => fallbackToast(message, { variant: "warning" }),
+  info: (message) => fallbackToast(message, { variant: "info" }),
+  promise: (promise) => promise,
+  dismiss: () => {
+  },
+  dismissAll: () => {
+  }
+};
+function useToast() {
+  const hostUseToast = getHostUi("useToast");
+  if (hostUseToast) return hostUseToast();
+  return fallbackToastContext;
+}
+var fallbackConfirmationContext = {
+  confirm: (options) => {
+    console.warn(
+      `[@veltrixsecops/app-sdk/ui] ConfirmationDialog is only available inside the Veltrix platform \u2014 "${options.title}" auto-resolved to "not confirmed" (fail closed).`
+    );
+    return Promise.resolve(false);
+  }
+};
+function useConfirmDialog() {
+  const hostUseConfirmDialog = getHostUi("useConfirmDialog");
+  if (hostUseConfirmDialog) return hostUseConfirmDialog();
+  return fallbackConfirmationContext;
+}
+
+export {
+  Button,
+  Badge,
+  Card,
+  CardHeader,
+  CardBody,
+  CardFooter,
+  Input,
+  Textarea,
+  Checkbox,
+  Select,
+  SearchBox,
+  Pagination,
+  FilterBar,
+  SortSelect,
+  FormField,
+  Tabs,
+  EmptyState,
+  Skeleton,
+  SkeletonText,
+  SkeletonCard,
+  Tooltip,
+  Spinner,
+  DataTable,
+  StatsCard,
+  FormDialog,
+  Modal,
+  Alert,
+  MultiSelect,
+  useToast,
+  useConfirmDialog
+};
+//# sourceMappingURL=chunk-3WK4EVQ3.js.map