@veltrixsecops/app-sdk 3.2.0 → 3.5.0

package/dist/ui/index.js

@@ -1,682 +1,38 @@
 import {
-  getHostRuntime
-} from "../chunk-EOOEHZGC.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";
-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;
-}
+  Alert,
+  Badge,
+  Button,
+  Card,
+  CardBody,
+  CardFooter,
+  CardHeader,
+  Checkbox,
+  DataTable,
+  EmptyState,
+  FilterBar,
+  FormDialog,
+  FormField,
+  Input,
+  Modal,
+  MultiSelect,
+  Pagination,
+  SearchBox,
+  Select,
+  Skeleton,
+  SkeletonCard,
+  SkeletonText,
+  SortSelect,
+  Spinner,
+  StatsCard,
+  Tabs,
+  Textarea,
+  Tooltip,
+  useConfirmDialog,
+  useToast
+} from "../chunk-3WK4EVQ3.js";
+import "../chunk-HIL6RIDG.js";
 export {
+  Alert,
   Badge,
   Button,
   Card,
@@ -690,6 +46,8 @@ export {
   FormDialog,
   FormField,
   Input,
+  Modal,
+  MultiSelect,
   Pagination,
   SearchBox,
   Select,