@kiteapps/lite-ui 0.0.0-stage → 0.1.0

package/dist/index.mjs

@@ -0,0 +1,760 @@
+// src/widgets/Primitives.jsx
+import React, { useId, useState } from "react";
+import { CircleHelp, Info, X } from "lucide-react";
+import { jsx, jsxs } from "react/jsx-runtime";
+function Button({ children, variant = "neutral", icon: Icon, className = "", ...props }) {
+  return /* @__PURE__ */ jsxs("button", { className: `ad-button ad-button--${variant} ${className}`, ...props, children: [
+    Icon && /* @__PURE__ */ jsx(Icon, { size: 13, strokeWidth: 1.8 }),
+    children
+  ] });
+}
+function IconButton({ icon: Icon, label, ...props }) {
+  return /* @__PURE__ */ jsx("button", { type: "button", className: "ad-icon-button", "aria-label": label, title: label, ...props, children: /* @__PURE__ */ jsx(Icon, { size: 15, strokeWidth: 1.8 }) });
+}
+function TextField({ label, hint, id, className = "", ...props }) {
+  const generated = useId();
+  const inputId = id || generated;
+  return /* @__PURE__ */ jsxs("div", { className: `ad-field ${className}`, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: inputId, children: label }),
+    /* @__PURE__ */ jsx("input", { id: inputId, className: "ad-input", ...props }),
+    hint && /* @__PURE__ */ jsx("span", { className: "ad-hint", children: hint })
+  ] });
+}
+function SelectField({ label, options = [], value, onChange, className = "", ...props }) {
+  const id = useId();
+  return /* @__PURE__ */ jsxs("div", { className: `ad-field ${className}`, children: [
+    label && /* @__PURE__ */ jsx("label", { htmlFor: id, children: label }),
+    /* @__PURE__ */ jsx("select", { id, className: "ad-select", value, onChange, ...props, children: options.map((option) => {
+      const item = typeof option === "string" ? { value: option, label: option } : option;
+      return /* @__PURE__ */ jsx("option", { value: item.value, children: item.label }, item.value);
+    }) })
+  ] });
+}
+function CheckRow({ children, defaultChecked = false, checked, onChange, disabled = false, help, className = "" }) {
+  const [local, setLocal] = useState(defaultChecked);
+  const isChecked = checked === void 0 ? local : checked;
+  return /* @__PURE__ */ jsxs("label", { className: `ad-check-row ${disabled ? "is-disabled" : ""} ${className}`, children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", checked: isChecked, disabled, onChange: (e) => {
+      setLocal(e.target.checked);
+      onChange?.(e.target.checked);
+    } }),
+    /* @__PURE__ */ jsx("span", { className: "ad-check-box", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("span", { children }),
+    help && /* @__PURE__ */ jsx(HelpTip, { text: help })
+  ] });
+}
+function RadioRow({ name, value, checked, onChange, children, disabled }) {
+  return /* @__PURE__ */ jsxs("label", { className: `ad-radio-row ${disabled ? "is-disabled" : ""}`, children: [
+    /* @__PURE__ */ jsx("input", { type: "radio", name, value, checked, disabled, onChange: () => onChange?.(value) }),
+    /* @__PURE__ */ jsx("span", { className: "ad-radio-mark", "aria-hidden": "true" }),
+    children
+  ] });
+}
+function HelpTip({ text }) {
+  return /* @__PURE__ */ jsx("span", { className: "ad-help", title: text, "aria-label": text, children: /* @__PURE__ */ jsx(CircleHelp, { size: 12 }) });
+}
+function TextLink({ children, onClick, ...props }) {
+  return /* @__PURE__ */ jsx("button", { type: "button", className: "ad-text-link", onClick, ...props, children });
+}
+function Tabs({ tabs = [], active, onChange, ariaLabel = "Tabs" }) {
+  return /* @__PURE__ */ jsx("div", { className: "ad-tabs", role: "tablist", "aria-label": ariaLabel, children: tabs.map((raw) => {
+    const tab = typeof raw === "string" ? { id: raw, label: raw } : raw;
+    return /* @__PURE__ */ jsx("button", { type: "button", className: `ad-tab ${tab.id === active ? "is-active" : ""}`, role: "tab", "aria-selected": tab.id === active, onClick: () => onChange?.(tab.id, tab), children: tab.label }, tab.id);
+  }) });
+}
+function PageHeader({ title, action, help }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ad-page-header", children: [
+    /* @__PURE__ */ jsxs("h1", { children: [
+      title,
+      " ",
+      help && /* @__PURE__ */ jsx(HelpTip, { text: help })
+    ] }),
+    action && /* @__PURE__ */ jsx("div", { className: "ad-header-action", children: action })
+  ] });
+}
+function Panel({ children, className = "" }) {
+  return /* @__PURE__ */ jsx("section", { className: `ad-panel ${className}`, children });
+}
+function SectionTitle({ children }) {
+  return /* @__PURE__ */ jsx("h2", { className: "ad-section-title", children });
+}
+function FormRow({ label, children, required = false, hint }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ad-form-row", children: [
+    /* @__PURE__ */ jsxs("div", { className: "ad-form-label", children: [
+      required && /* @__PURE__ */ jsx("b", { children: "* " }),
+      label
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ad-form-control", children: [
+      children,
+      hint && /* @__PURE__ */ jsx("div", { className: "ad-hint", children: hint })
+    ] })
+  ] });
+}
+function ActionBar({ onSave, onCancel, saveLabel = "Save", cancelLabel = "Cancel", status }) {
+  return /* @__PURE__ */ jsxs("div", { className: "ad-action-bar", children: [
+    /* @__PURE__ */ jsx(Button, { variant: "primary", onClick: onSave, children: saveLabel }),
+    onCancel && /* @__PURE__ */ jsx(Button, { onClick: onCancel, children: cancelLabel }),
+    status && /* @__PURE__ */ jsx("span", { className: "ad-status", role: "status", children: status })
+  ] });
+}
+function Notice({ children, tone = "info" }) {
+  return /* @__PURE__ */ jsxs("div", { className: `ad-notice ad-notice--${tone}`, children: [
+    /* @__PURE__ */ jsx(Info, { size: 15 }),
+    /* @__PURE__ */ jsx("div", { children })
+  ] });
+}
+function DataTable({ columns = [], rows = [], empty = "No Data Available", onRowClick, getRowId = (row, index) => row.id ?? index }) {
+  return /* @__PURE__ */ jsx("div", { className: "ad-table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "ad-table", children: [
+    /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: columns.map((raw, index) => {
+      const column = typeof raw === "string" ? { key: index, label: raw } : raw;
+      return /* @__PURE__ */ jsx("th", { children: column.label }, column.key ?? index);
+    }) }) }),
+    /* @__PURE__ */ jsx("tbody", { children: rows.length ? rows.map((row, index) => /* @__PURE__ */ jsx("tr", { onClick: () => onRowClick?.(row, index), children: columns.map((raw, columnIndex) => {
+      const column = typeof raw === "string" ? { key: columnIndex, label: raw } : raw;
+      return /* @__PURE__ */ jsx("td", { children: column.render ? column.render(row, index) : Array.isArray(row) ? row[columnIndex] : row[column.key] }, column.key ?? columnIndex);
+    }) }, getRowId(row, index))) : /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { className: "ad-empty", colSpan: columns.length, children: empty }) }) })
+  ] }) });
+}
+function Modal({ title, children, open, onClose, footer, closeLabel = "Close" }) {
+  if (!open) return null;
+  return /* @__PURE__ */ jsx("div", { className: "ad-modal-backdrop", onMouseDown: onClose, children: /* @__PURE__ */ jsxs("div", { className: "ad-modal", role: "dialog", "aria-modal": "true", "aria-label": title, onMouseDown: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs("div", { className: "ad-modal-head", children: [
+      /* @__PURE__ */ jsx("strong", { children: title }),
+      /* @__PURE__ */ jsx(IconButton, { icon: X, label: closeLabel, onClick: onClose })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "ad-modal-body", children }),
+    footer && /* @__PURE__ */ jsx("div", { className: "ad-modal-footer", children: footer })
+  ] }) });
+}
+
+// src/widgets/Shell.jsx
+import React2, { useEffect, useState as useState2 } from "react";
+import { Bell, ChevronDown, ChevronRight, Download, Grid3X3, Search, Settings, UserRound } from "lucide-react";
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var MAIN_SECTIONS = ["Dashboard", "Reports", "Configuration", "Admin", "Support"];
+var FOOTER_LINKS = ["Admin Guide", "Need Features", "Report an Issue", "User Forums", "Toll free : +1-844-245-1104", "Direct Phone : +1-408-916-9890"];
+function TopNavigation({ sections = MAIN_SECTIONS, active = "Admin", onChange, ariaLabel = "Main navigation" }) {
+  return /* @__PURE__ */ jsx2("nav", { className: "ad-main-nav", "aria-label": ariaLabel, children: sections.map((raw) => {
+    const section = typeof raw === "string" ? { id: raw, label: raw } : raw;
+    return /* @__PURE__ */ jsx2("button", { type: "button", className: section.id === active ? "is-active" : "", "aria-current": section.id === active ? "page" : void 0, onClick: () => onChange?.(section.id, section), children: section.label }, section.id);
+  }) });
+}
+function ShellHeader({ brand = "ADSelfService Plus", brandIcon, showBrandOrbit = true, sections = MAIN_SECTIONS, navigationLabel = "Main navigation", activeSection = "Admin", onSectionChange, directories = ["Active Directory", "Microsoft Entra ID"], directory, defaultDirectory, onDirectoryChange, showDownload = true, downloadLabel = "Download Now", onDownload, utilityItems = ["License", "Talk Back"], showNotifications = true, notifications = 2, notificationLabel, onNotificationsClick, showUserMenu = true, userMenuLabel = "User menu", onUserClick, showSearch = true, searchPlaceholder = "Search Employee", searchLabel = "Search Employee", searchValue, onSearchChange, showSettings = true, settingsLabel = "Domain Settings", onSettingsClick, rightContent }) {
+  const [localDirectory, setLocalDirectory] = useState2(defaultDirectory ?? directories[0]);
+  const [localSearch, setLocalSearch] = useState2("");
+  const currentDirectory = directory ?? localDirectory;
+  const directoryItem = directories.find((item) => (typeof item === "string" ? item : item.value) === currentDirectory);
+  const currentDirectoryLabel = typeof directoryItem === "string" ? directoryItem : directoryItem?.label || currentDirectory;
+  const currentSearch = searchValue ?? localSearch;
+  const switchDirectory = () => {
+    const index = directories.findIndex((item) => (typeof item === "string" ? item : item.value) === currentDirectory);
+    const next = directories[(index + 1) % directories.length];
+    const value = typeof next === "string" ? next : next?.value;
+    if (directory === void 0) setLocalDirectory(value);
+    onDirectoryChange?.(value, next);
+  };
+  return /* @__PURE__ */ jsxs2("header", { className: "ad-header", children: [
+    /* @__PURE__ */ jsxs2("div", { className: "ad-header-top", children: [
+      /* @__PURE__ */ jsxs2("div", { className: "ad-brand", children: [
+        brandIcon === void 0 ? /* @__PURE__ */ jsx2(Grid3X3, { size: 19, strokeWidth: 2.4 }) : brandIcon,
+        /* @__PURE__ */ jsx2("span", { children: brand }),
+        showBrandOrbit && /* @__PURE__ */ jsx2("span", { className: "ad-brand-orbit" })
+      ] }),
+      directories.length > 0 && /* @__PURE__ */ jsxs2("button", { type: "button", className: "ad-directory", onClick: switchDirectory, children: [
+        currentDirectoryLabel,
+        /* @__PURE__ */ jsx2(ChevronDown, { size: 12 })
+      ] }),
+      showDownload && /* @__PURE__ */ jsx2(Button, { variant: "download", icon: Download, onClick: onDownload, children: downloadLabel }),
+      /* @__PURE__ */ jsxs2("div", { className: "ad-header-right", children: [
+        utilityItems.map((raw, index) => {
+          const item = typeof raw === "string" ? { label: raw } : raw;
+          return /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => item.onClick?.(item), children: item.label }, item.id ?? item.label ?? index);
+        }),
+        showNotifications && /* @__PURE__ */ jsxs2("button", { type: "button", className: "ad-bell", "aria-label": notificationLabel || `${notifications} notifications`, onClick: onNotificationsClick, children: [
+          /* @__PURE__ */ jsx2(Bell, { size: 14 }),
+          notifications > 0 && /* @__PURE__ */ jsx2("i", { children: notifications })
+        ] }),
+        showUserMenu && /* @__PURE__ */ jsxs2("button", { type: "button", "aria-label": userMenuLabel, onClick: onUserClick, children: [
+          /* @__PURE__ */ jsx2(UserRound, { size: 16 }),
+          /* @__PURE__ */ jsx2(ChevronDown, { size: 11 })
+        ] }),
+        rightContent
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs2("div", { className: "ad-header-bottom", children: [
+      /* @__PURE__ */ jsx2(TopNavigation, { sections, ariaLabel: navigationLabel, active: activeSection, onChange: onSectionChange }),
+      showSearch && /* @__PURE__ */ jsxs2("div", { className: "ad-header-search", children: [
+        /* @__PURE__ */ jsx2(Search, { size: 12 }),
+        /* @__PURE__ */ jsx2("input", { "aria-label": searchLabel, placeholder: searchPlaceholder, value: currentSearch, onChange: (event) => {
+          if (searchValue === void 0) setLocalSearch(event.target.value);
+          onSearchChange?.(event.target.value);
+        } })
+      ] }),
+      showSettings && /* @__PURE__ */ jsxs2("button", { type: "button", className: "ad-domain-settings", onClick: onSettingsClick, children: [
+        /* @__PURE__ */ jsx2(Settings, { size: 12 }),
+        " ",
+        settingsLabel
+      ] })
+    ] })
+  ] });
+}
+function CollapsibleSidebar({ groups = [], selected, defaultSelected, onSelect, initialOpen, open, onOpenChange, ariaLabel = "Section pages" }) {
+  const [localSelected, setLocalSelected] = useState2(defaultSelected ?? groups[0]?.items[0]?.id);
+  const currentSelected = selected ?? localSelected;
+  const selectedGroup = groups.find((group) => group.items.some((item) => item.id === currentSelected))?.label;
+  const [openGroup, setOpenGroup] = useState2(initialOpen || selectedGroup || groups[0]?.label || "");
+  useEffect(() => {
+    if (selectedGroup) setOpenGroup(selectedGroup);
+  }, [selectedGroup]);
+  const expanded = open ?? openGroup;
+  return /* @__PURE__ */ jsx2("nav", { "aria-label": ariaLabel, children: groups.map((group) => /* @__PURE__ */ jsxs2("div", { className: "ad-nav-group", children: [
+    /* @__PURE__ */ jsxs2("button", { type: "button", className: "ad-nav-heading", onClick: () => {
+      const next = expanded === group.label ? "" : group.label;
+      if (open === void 0) setOpenGroup(next);
+      onOpenChange?.(next, group);
+    }, "aria-expanded": expanded === group.label, children: [
+      group.label,
+      expanded === group.label ? /* @__PURE__ */ jsx2(ChevronDown, { size: 12 }) : /* @__PURE__ */ jsx2(ChevronRight, { size: 12 })
+    ] }),
+    expanded === group.label && /* @__PURE__ */ jsx2("div", { className: "ad-nav-items", children: group.items.map((item) => /* @__PURE__ */ jsx2("button", { type: "button", className: `ad-nav-item ${currentSelected === item.id ? "is-active" : ""}`, "aria-current": currentSelected === item.id ? "page" : void 0, onClick: () => {
+      if (selected === void 0) setLocalSelected(item.id);
+      onSelect?.(item.id, item);
+    }, children: item.label }, item.id)) })
+  ] }, group.id ?? group.label)) });
+}
+function ShellFooter({ items = FOOTER_LINKS, onItemSelect, children }) {
+  return /* @__PURE__ */ jsxs2("footer", { className: "ad-footer", children: [
+    items.map((raw, index) => {
+      const item = typeof raw === "string" ? { id: raw, label: raw } : raw;
+      return item.href ? /* @__PURE__ */ jsx2("a", { href: item.href, children: item.label }, item.id ?? index) : /* @__PURE__ */ jsx2("button", { type: "button", onClick: () => onItemSelect?.(item.id, item), children: item.label }, item.id ?? index);
+    }),
+    children
+  ] });
+}
+function AppShell({ activeSection = "Admin", onSectionChange, sidebar, sidebarLabel, hideSidebar = false, mainClassName = "", headerProps = {}, footerProps = {}, header, footer, children }) {
+  return /* @__PURE__ */ jsxs2("div", { className: "ad-shell", children: [
+    header || /* @__PURE__ */ jsx2(ShellHeader, { ...headerProps, activeSection, onSectionChange }),
+    /* @__PURE__ */ jsxs2("div", { className: "ad-workspace", children: [
+      !hideSidebar && /* @__PURE__ */ jsx2("aside", { className: "ad-sidebar", "aria-label": sidebarLabel || `${activeSection} navigation`, children: sidebar }),
+      /* @__PURE__ */ jsx2("main", { className: `ad-main ${mainClassName}`, children })
+    ] }),
+    footer || /* @__PURE__ */ jsx2(ShellFooter, { ...footerProps })
+  ] });
+}
+function AdminShell({ groups = [], screen, onScreenChange, children, activeSection = "Admin", onSectionChange, sidebar, hideSidebar = false, mainClassName = "", ...shellProps }) {
+  return /* @__PURE__ */ jsx2(AppShell, { activeSection, onSectionChange, sidebar: sidebar || /* @__PURE__ */ jsx2(CollapsibleSidebar, { groups, selected: screen, onSelect: onScreenChange }), hideSidebar, mainClassName, ...shellProps, children });
+}
+
+// src/widgets/DashboardWidgets.jsx
+import React3, { useState as useState3 } from "react";
+import { Clock3, UserRoundPlus, Files, AppWindow, Maximize2, MoreHorizontal, RefreshCw, Settings as Settings2, X as X2 } from "lucide-react";
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var DASHBOARD_METRICS = [
+  { title: "Password Expiration", value: "0 / 62", caption: "Soon-to-expire / Expired Passwords", icon: Clock3, tone: "rose", report: "4" },
+  { title: "Enrollment Status", value: "37 / 38", caption: "Enrolled / Non Enrolled Users", icon: UserRoundPlus, tone: "blue", report: "15" },
+  { title: "License Usage", value: "59 / 4941", caption: "Used / Remaining Licenses", icon: Files, tone: "orange", report: "17" },
+  { title: "Endpoint MFA", value: "1 / 4999", caption: "Used / Remaining Licenses", icon: AppWindow, tone: "green", report: "301" }
+];
+var DASHBOARD_SHORTCUTS = [
+  { title: "Highlights", links: ["Password Reset / Unlock Account", "Self Update/Change Password", "Password Expiry Notification", "Password Sync/Single Sign On", "Conditional Access"] },
+  { title: "Multi-factor Authentication", links: ["Security Question & Answer", "Email Verification", "SMS Verification", "Google Authenticator", "Microsoft Authenticator", "Microsoft Entra ID MFA", "Duo Security", "RSA SecurID", "RADIUS Authentication", "Push Notification Authentication", "Biometric Authentication", "QR Code Based Authentication", "TOTP Authentication", "SAML Authentication", "AD Security Questions", "Yubikey Authenticator", "Zoho OneAuth TOTP", "Smart Card Authentication", "Custom TOTP Authenticator", "FIDO2 Passkeys"] },
+  { title: "Other Features", links: ["Mobile App Deployment", "Employee Search/Org Chart", "Mail Group Subscription", "Self-Service Approval Workflow", "Update Cached Credential"] },
+  { title: "Password Self-Service Modes", links: ["Via Web Portal", "Mobile Access", "GINA/Mac/Linux (Ctrl+Alt+Del)", "Automatic Reset & Unlock"] }
+];
+var DIRECTORY_REPORT_DATA = [
+  { id: "2", label: "Locked Out Users", value: 0 },
+  { id: "3", label: "Soon-To-Expire Users", value: 0 },
+  { id: "4", label: "Password Expired Users", value: 62 }
+];
+var MFA_REPORT_DATA = [
+  { id: "15", label: "Enrolled Users", value: 37, color: "#8864b4" },
+  { id: "16", label: "Non-Enrolled Users", value: 38, color: "#397dd5" }
+];
+var SELF_SERVICE_REPORT_DATA = [
+  { id: "6", label: "Reset Password", value: 35 },
+  { id: "7", label: "Unlock Account", value: 0 },
+  { id: "8", label: "Self Update", value: 0 },
+  { id: "9", label: "Change Password", value: 0 },
+  { id: "1210", label: "MFA Failures", value: 0 }
+];
+function MetricWidget({ title, value, caption, icon: Icon = Clock3, tone = "blue", iconSize = 43, onClick, className = "", ...props }) {
+  return /* @__PURE__ */ jsxs3("button", { type: "button", className: `dash-metric ${className}`, onClick, ...props, children: [
+    /* @__PURE__ */ jsx3("span", { className: "dash-metric-title", children: title }),
+    /* @__PURE__ */ jsx3("strong", { children: value }),
+    /* @__PURE__ */ jsx3("small", { children: caption }),
+    Icon && /* @__PURE__ */ jsx3(Icon, { className: `dash-metric-icon is-${tone}`, size: iconSize, strokeWidth: 1.05 })
+  ] });
+}
+function WidgetFrame({ title, children, onExpand, onRefresh, onMore, tools, showTools = true, labels = {}, className = "" }) {
+  const [refreshing, setRefreshing] = useState3(false);
+  return /* @__PURE__ */ jsxs3("section", { className: `dash-widget ${className}`, "aria-label": title, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "dash-widget-heading", children: [
+      /* @__PURE__ */ jsx3("strong", { children: title }),
+      showTools && /* @__PURE__ */ jsx3("div", { className: "dash-widget-tools", children: tools || /* @__PURE__ */ jsxs3(Fragment, { children: [
+        /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": `${labels.maximize || "Maximize"} ${title}`, onClick: onExpand, children: /* @__PURE__ */ jsx3(Maximize2, { size: 14 }) }),
+        /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": `${labels.refresh || "Refresh"} ${title}`, onClick: () => {
+          onRefresh?.();
+          setRefreshing(true);
+          window.setTimeout(() => setRefreshing(false), 500);
+        }, children: /* @__PURE__ */ jsx3(RefreshCw, { size: 14, className: refreshing ? "is-spinning" : "" }) }),
+        /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": `${labels.more || "More options for"} ${title}`, onClick: onMore, children: /* @__PURE__ */ jsx3(MoreHorizontal, { size: 16 }) })
+      ] }) })
+    ] }),
+    children
+  ] });
+}
+function ActiveDirectoryChart({ data = DIRECTORY_REPORT_DATA, max = 80, ticks, axisLabel = "No. Of Users", unit = "users", color = "#46c0f2", onSelect }) {
+  const ceiling = Math.max(1, Number(max));
+  const marks = ticks || [ceiling, ceiling * 0.75, ceiling * 0.5, ceiling * 0.25, 0];
+  return /* @__PURE__ */ jsxs3("div", { className: "dash-column-chart", children: [
+    /* @__PURE__ */ jsx3("span", { className: "dash-axis-title", children: axisLabel }),
+    /* @__PURE__ */ jsx3("div", { className: "dash-y-labels", children: marks.map((n, i) => /* @__PURE__ */ jsx3("span", { children: n }, i)) }),
+    /* @__PURE__ */ jsxs3("div", { className: "dash-plot", children: [
+      marks.map((_, i) => /* @__PURE__ */ jsx3("div", { className: "dash-gridline" }, i)),
+      /* @__PURE__ */ jsx3("div", { className: "dash-columns", style: { gridTemplateColumns: `repeat(${Math.max(data.length, 1)},1fr)` }, children: data.map((item, i) => /* @__PURE__ */ jsxs3("button", { type: "button", "aria-label": `${item.label}: ${item.value} ${unit}`, onClick: () => onSelect?.(item.id, item), children: [
+        /* @__PURE__ */ jsx3("span", { className: "dash-column", style: { height: `${Math.min(100, Math.max(0, Number(item.value) / ceiling * 100))}%`, background: item.color || color } }),
+        /* @__PURE__ */ jsx3("span", { className: "dash-column-label", title: item.label, children: item.label })
+      ] }, item.id ?? i)) })
+    ] })
+  ] });
+}
+function MfaChart({ data = MFA_REPORT_DATA, onSelect, ariaLabel }) {
+  const total = data.reduce((sum, item) => sum + Number(item.value || 0), 0);
+  let current = 0;
+  const palette = ["#8864b4", "#397dd5", "#46c0f2", "#226958"];
+  const gradient = data.map((item, i) => {
+    const start = current;
+    current += total ? Number(item.value || 0) / total * 100 : 0;
+    return `${item.color || palette[i % palette.length]} ${start}% ${current}%`;
+  }).join(",");
+  return /* @__PURE__ */ jsxs3("div", { className: "dash-mfa-chart", children: [
+    /* @__PURE__ */ jsx3("button", { type: "button", className: "dash-pie", style: { background: total ? `conic-gradient(${gradient})` : "#e9edef" }, "aria-label": ariaLabel || data.map((item) => `${item.value} ${item.label}`).join(", "), onClick: () => data[0] && onSelect?.(data[0].id, data[0]) }),
+    /* @__PURE__ */ jsx3("div", { className: "dash-legend", children: data.map((item, i) => /* @__PURE__ */ jsxs3("button", { type: "button", onClick: () => onSelect?.(item.id, item), children: [
+      /* @__PURE__ */ jsx3("i", { style: { background: item.color || palette[i % palette.length] } }),
+      item.label
+    ] }, item.id ?? i)) })
+  ] });
+}
+function SelfServiceChart({ data = SELF_SERVICE_REPORT_DATA, max = 35, ticks, axisLabel = "No. Of Users", unit = "users", color = "#226958", onSelect }) {
+  const ceiling = Math.max(1, Number(max));
+  const marks = ticks || Array.from({ length: 8 }, (_, i) => ceiling * i / 7);
+  const gridStep = 100 / Math.max(1, marks.length - 1);
+  return /* @__PURE__ */ jsxs3("div", { className: "dash-horizontal-chart", children: [
+    /* @__PURE__ */ jsx3("span", { className: "dash-horizontal-axis-title", children: axisLabel }),
+    /* @__PURE__ */ jsx3("div", { className: "dash-horizontal-bars", style: { gridTemplateRows: `repeat(${Math.max(data.length, 1)},1fr)`, backgroundImage: `repeating-linear-gradient(90deg,transparent 0,transparent calc(${gridStep}% - 1px),#e5e9ea calc(${gridStep}% - 1px),#e5e9ea ${gridStep}%)` }, children: data.map((item, i) => /* @__PURE__ */ jsxs3("button", { type: "button", onClick: () => onSelect?.(item.id, item), "aria-label": `${item.label}: ${item.value} ${unit}`, children: [
+      /* @__PURE__ */ jsx3("span", { children: item.label }),
+      /* @__PURE__ */ jsx3("i", { style: { width: `${Math.min(100, Math.max(0, Number(item.value) / ceiling * 100))}%`, background: item.color || color } })
+    ] }, item.id ?? i)) }),
+    /* @__PURE__ */ jsx3("div", { className: "dash-horizontal-ticks", children: marks.map((n, i) => /* @__PURE__ */ jsx3("span", { children: Number.isInteger(n) ? n : Number(n.toFixed(1)) }, i)) })
+  ] });
+}
+function ShortcutRail({ groups = DASHBOARD_SHORTCUTS, onSelect, ariaLabel = "Dashboard shortcuts" }) {
+  return /* @__PURE__ */ jsx3("aside", { className: "dash-shortcuts", "aria-label": ariaLabel, children: groups.map((group, index) => /* @__PURE__ */ jsxs3("section", { children: [
+    /* @__PURE__ */ jsx3("h3", { children: group.title }),
+    /* @__PURE__ */ jsx3("ul", { children: group.links.map((link, i) => {
+      const item = typeof link === "string" ? { id: link, label: link } : link;
+      return /* @__PURE__ */ jsx3("li", { children: item.href ? /* @__PURE__ */ jsx3("a", { href: item.href, onClick: (event) => {
+        if (onSelect) {
+          event.preventDefault();
+          onSelect(item.id, item);
+        }
+      }, children: item.label }) : /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => onSelect?.(item.id, item), children: item.label }) }, item.id ?? i);
+    }) })
+  ] }, group.id ?? group.title ?? index)) });
+}
+function DashboardToolbar({ domains = ["ADSELFSERVICE"], domain, defaultDomain, onDomainChange, domainLabel = "Select Domain to View :", showShortcuts = true, onToggleShortcuts, onExpand, settingsLabel = "Dashboard settings", expandLabel = "Expand dashboard", menuItems, onMenuAction }) {
+  const [menu, setMenu] = useState3(false);
+  const actions = menuItems || [{ id: "embed", label: "Embed Dashboard" }, { id: "updater", label: "Dashboard Updater" }, { id: "shortcuts", label: `${showShortcuts ? "Hide" : "Show"} Shortcut Menu` }];
+  return /* @__PURE__ */ jsxs3("div", { className: "dash-toolbar", children: [
+    /* @__PURE__ */ jsx3("label", { htmlFor: "dash-domain", children: domainLabel }),
+    /* @__PURE__ */ jsx3("select", { id: "dash-domain", value: domain, defaultValue: domain === void 0 ? defaultDomain ?? (typeof domains[0] === "string" ? domains[0] : domains[0]?.value) : void 0, onChange: (event) => {
+      const item = domains.map((raw) => typeof raw === "string" ? { value: raw, label: raw } : raw).find((option) => option.value === event.target.value);
+      onDomainChange?.(event.target.value, item);
+    }, children: domains.map((option) => {
+      const item = typeof option === "string" ? { value: option, label: option } : option;
+      return /* @__PURE__ */ jsx3("option", { value: item.value, children: item.label }, item.value);
+    }) }),
+    /* @__PURE__ */ jsxs3("div", { className: "dash-toolbar-actions", children: [
+      /* @__PURE__ */ jsxs3("div", { className: "dash-menu-anchor", children: [
+        /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": settingsLabel, "aria-expanded": menu, onClick: () => setMenu(!menu), children: /* @__PURE__ */ jsx3(Settings2, { size: 18 }) }),
+        menu && /* @__PURE__ */ jsx3("div", { className: "dash-menu", children: actions.map((item) => /* @__PURE__ */ jsx3("button", { type: "button", onClick: () => {
+          if (item.id === "shortcuts") onToggleShortcuts?.();
+          item.onClick?.(item);
+          onMenuAction?.(item.id, item);
+          setMenu(false);
+        }, children: item.label }, item.id)) })
+      ] }),
+      /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": expandLabel, onClick: onExpand, children: /* @__PURE__ */ jsx3(Maximize2, { size: 17 }) })
+    ] })
+  ] });
+}
+function DashboardLayout({ metrics, charts, shortcuts, showShortcuts = true }) {
+  return /* @__PURE__ */ jsxs3("div", { className: `dash-layout ${showShortcuts ? "" : "without-shortcuts"}`, children: [
+    /* @__PURE__ */ jsxs3("div", { className: "dash-content", children: [
+      /* @__PURE__ */ jsx3("div", { className: "dash-metrics", children: metrics }),
+      /* @__PURE__ */ jsx3("div", { className: "dash-chart-grid", children: charts })
+    ] }),
+    showShortcuts && shortcuts
+  ] });
+}
+function ExpandedWidget({ title, onClose, children, closeLabel = "Close expanded widget" }) {
+  if (!title) return null;
+  return /* @__PURE__ */ jsx3("div", { className: "dash-overlay", role: "presentation", onMouseDown: onClose, children: /* @__PURE__ */ jsxs3("div", { className: "dash-expanded", role: "dialog", "aria-modal": "true", "aria-label": title, onMouseDown: (e) => e.stopPropagation(), children: [
+    /* @__PURE__ */ jsxs3("div", { className: "dash-expanded-heading", children: [
+      /* @__PURE__ */ jsx3("strong", { children: title }),
+      /* @__PURE__ */ jsx3("button", { type: "button", "aria-label": closeLabel, onClick: onClose, children: /* @__PURE__ */ jsx3(X2, { size: 18 }) })
+    ] }),
+    children
+  ] }) });
+}
+
+// src/widgets/ReportWidgets.jsx
+import React4, { useEffect as useEffect2, useMemo, useState as useState4 } from "react";
+import { AlarmClock, ChevronDown as ChevronDown2, ChevronRight as ChevronRight2, CircleHelp as CircleHelp2, Info as Info2, Search as Search2 } from "lucide-react";
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var REPORT_GROUPS = [
+  { label: "Active Directory Reports", items: [["2", "Locked Out Users Report"], ["3", "Soon-To-Expire Password Users Report"], ["4", "Password Expired Users Report"]] },
+  { label: "Password Self-Service Reports", items: [["6", "Reset Password Audit Report"], ["7", "Unlock Account Audit Report"], ["1202", "GINA/Mac/Linux Agent Reset Password Audit Report"], ["1203", "GINA/Mac/Linux Agent Unlock Account Audit Report"], ["8", "Self-Update Audit Report"], ["9", "Change Password Audit Report"], ["1204", "Password/Account Expiry Notifications Delivery Report"]] },
+  { label: "MFA Reports", items: [["15", "MFA Enrolled Users Report"], ["16", "MFA Non-Enrolled Users Report"], ["1206", "MFA Enrollment Audit Report"], ["1207", "MFA Usage Audit Report"], ["1208", "MFA Usage for Machines/VPN/OWA"], ["1209", "MFA Usage from Mobile Devices"], ["1210", "MFA Failures Audit Report"], ["1211", "MFA Trusted Browser Report"], ["1212", "MFA Trusted Machines Report"], ["18", "Security Questions Report"], ["1213", "Backup Code Usage Report"], ["301", "Offline MFA Enrolled Machines Report"], ["601", "FIDO2 Passkeys Report"], ["13", "Blocked Users Report"]] },
+  { label: "GINA/Mac/Linux Agent Reports", items: [["1215", "Agent Installed Machines Report"], ["1216", "Agent Installation Failures Report"]] },
+  { label: "Other Reports", items: [["12", "User Attempts Audit Report"], ["17", "Licensed Users Report"], ["10", "Notification Delivery Report"], ["19", "Push Registered Devices Report"], ["901", "Application Access Audit Report"], ["902", "JIT Provisioning Audit Report"]] }
+];
+var normalizeReport = (item) => Array.isArray(item) ? { id: item[0], label: item[1] } : item;
+function ReportNavigation({ groups = REPORT_GROUPS, selected, defaultSelected, onSelect, searchPlaceholder = "Search Report", searchLabel = "Search Report", emptyLabel = "No matching reports", ariaLabel = "Report categories", onSearchChange }) {
+  const [query, setQuery] = useState4("");
+  const [localSelected, setLocalSelected] = useState4(defaultSelected ?? (groups[0]?.items[0] && normalizeReport(groups[0].items[0]).id));
+  const currentSelected = selected ?? localSelected;
+  const selectedGroup = groups.find((group) => group.items.some((item) => normalizeReport(item).id === currentSelected))?.label || groups[0]?.label;
+  const [open, setOpen] = useState4(selectedGroup);
+  useEffect2(() => setOpen(selectedGroup), [selectedGroup]);
+  const visibleGroups = useMemo(() => groups.map((group) => ({ ...group, items: group.items.map(normalizeReport).filter((item) => item.label.toLowerCase().includes(query.toLowerCase())) })).filter((group) => !query || group.items.length), [groups, query]);
+  return /* @__PURE__ */ jsxs4("div", { className: "report-navigation", children: [
+    /* @__PURE__ */ jsxs4("label", { className: "report-search", children: [
+      /* @__PURE__ */ jsx4(Search2, { size: 15 }),
+      /* @__PURE__ */ jsx4("input", { "aria-label": searchLabel, placeholder: searchPlaceholder, value: query, onChange: (e) => {
+        setQuery(e.target.value);
+        onSearchChange?.(e.target.value);
+      } })
+    ] }),
+    /* @__PURE__ */ jsx4("nav", { "aria-label": ariaLabel, children: visibleGroups.map((group) => /* @__PURE__ */ jsxs4("div", { children: [
+      /* @__PURE__ */ jsxs4("button", { type: "button", className: "report-nav-group", "aria-expanded": query ? true : open === group.label, onClick: () => setOpen(open === group.label ? "" : group.label), children: [
+        group.label,
+        query || open === group.label ? /* @__PURE__ */ jsx4(ChevronDown2, { size: 12 }) : /* @__PURE__ */ jsx4(ChevronRight2, { size: 12 })
+      ] }),
+      (query || open === group.label) && group.items.map((item) => /* @__PURE__ */ jsx4("button", { type: "button", className: `report-nav-item ${currentSelected === item.id ? "is-active" : ""}`, onClick: () => {
+        if (selected === void 0) setLocalSelected(item.id);
+        onSelect?.(item.id, item);
+      }, children: item.label }, item.id))
+    ] }, group.id ?? group.label)) }),
+    query && !visibleGroups.length && /* @__PURE__ */ jsx4("div", { className: "report-search-empty", children: emptyLabel })
+  ] });
+}
+function ReportCategoryBar({ groups = REPORT_GROUPS, selected, defaultSelected, onSelect, ariaLabel = "Report group menu" }) {
+  const [open, setOpen] = useState4("");
+  const [localSelected, setLocalSelected] = useState4(defaultSelected ?? (groups[0]?.items[0] && normalizeReport(groups[0].items[0]).id));
+  const currentSelected = selected ?? localSelected;
+  return /* @__PURE__ */ jsx4("nav", { className: "report-category-bar", "aria-label": ariaLabel, children: groups.map((group) => /* @__PURE__ */ jsxs4("div", { className: "report-category", children: [
+    /* @__PURE__ */ jsxs4("button", { type: "button", "aria-expanded": open === group.label, onClick: () => setOpen(open === group.label ? "" : group.label), children: [
+      group.label,
+      /* @__PURE__ */ jsx4(ChevronDown2, { size: 10 })
+    ] }),
+    open === group.label && /* @__PURE__ */ jsx4("div", { className: "report-category-menu", children: group.items.map((raw, i) => {
+      const item = normalizeReport(raw);
+      return /* @__PURE__ */ jsx4("button", { type: "button", className: currentSelected === item.id ? "is-active" : "", onClick: () => {
+        if (selected === void 0) setLocalSelected(item.id);
+        onSelect?.(item.id, item);
+        setOpen("");
+      }, children: item.label }, item.id ?? i);
+    }) })
+  ] }, group.id ?? group.label)) });
+}
+function ReportFilters({ domains = ["ADSELFSERVICE"], domain, defaultDomain, onDomainChange, ouOptions = ["All OU", "Users"], ou, defaultOu, onOuChange, labels = {}, onGenerate, onStop, generating = false }) {
+  const [ouOpen, setOuOpen] = useState4(false);
+  const [localOu, setLocalOu] = useState4(defaultOu ?? (typeof ouOptions[0] === "string" ? ouOptions[0] : ouOptions[0]?.value));
+  const selectedOu = ou ?? localOu;
+  return /* @__PURE__ */ jsxs4("div", { className: "report-filters", children: [
+    /* @__PURE__ */ jsxs4("div", { className: "report-filter-row", children: [
+      /* @__PURE__ */ jsx4("label", { htmlFor: "report-domain", children: labels.domain || "Select Domain" }),
+      /* @__PURE__ */ jsx4("select", { id: "report-domain", value: domain, defaultValue: domain === void 0 ? defaultDomain ?? (typeof domains[0] === "string" ? domains[0] : domains[0]?.value) : void 0, onChange: (event) => {
+        const value = event.target.value;
+        const item = domains.map((raw) => typeof raw === "string" ? { value: raw, label: raw } : raw).find((option) => option.value === value);
+        onDomainChange?.(value, item);
+      }, children: domains.map((raw) => {
+        const item = typeof raw === "string" ? { value: raw, label: raw } : raw;
+        return /* @__PURE__ */ jsx4("option", { value: item.value, children: item.label }, item.value);
+      }) }),
+      /* @__PURE__ */ jsxs4("button", { type: "button", className: "report-ou-current", onClick: () => setOuOpen(!ouOpen), children: [
+        selectedOu,
+        /* @__PURE__ */ jsx4(ChevronDown2, { size: 11 })
+      ] }),
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "report-ou-link", onClick: () => setOuOpen(!ouOpen), children: labels.selectOu || "Select OU" })
+    ] }),
+    ouOpen && /* @__PURE__ */ jsxs4("div", { className: "report-ou-picker", children: [
+      /* @__PURE__ */ jsx4("strong", { children: labels.selectOu || "Select OU" }),
+      ouOptions.map((raw) => {
+        const item = typeof raw === "string" ? { value: raw, label: raw } : raw;
+        return /* @__PURE__ */ jsxs4("label", { children: [
+          /* @__PURE__ */ jsx4("input", { type: "radio", name: "report-ou", checked: selectedOu === item.value, onChange: () => {
+            setLocalOu(item.value);
+            onOuChange?.(item.value, item);
+            setOuOpen(false);
+          } }),
+          " ",
+          item.label
+        ] }, item.value);
+      })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { className: "report-filter-actions", children: [
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "report-generate", onClick: onGenerate, disabled: generating, children: labels.generate || "Generate" }),
+      /* @__PURE__ */ jsx4("button", { type: "button", className: "report-stop", onClick: onStop, disabled: !generating, children: labels.stop || "Stop" })
+    ] })
+  ] });
+}
+function ReportResults({ status = "empty", emptyMessage = "No Data Available", loadingMessage = "Generating report\u2026", children }) {
+  return /* @__PURE__ */ jsx4("div", { className: "report-results", role: "status", children: children !== void 0 ? children : status === "loading" ? /* @__PURE__ */ jsx4("span", { children: loadingMessage }) : /* @__PURE__ */ jsxs4("span", { children: [
+    /* @__PURE__ */ jsx4(Info2, { size: 13 }),
+    " ",
+    emptyMessage
+  ] }) });
+}
+function ReportPageHeading({ title, onSchedule, scheduleLabel = "Schedule Reports", helpText, action }) {
+  return /* @__PURE__ */ jsxs4("header", { className: "report-page-heading", children: [
+    /* @__PURE__ */ jsxs4("h1", { children: [
+      title,
+      " ",
+      helpText !== null && /* @__PURE__ */ jsx4(CircleHelp2, { size: 12, strokeWidth: 1.3, "aria-label": helpText || `Help for ${title}` })
+    ] }),
+    action || /* @__PURE__ */ jsxs4("button", { type: "button", onClick: onSchedule, children: [
+      /* @__PURE__ */ jsx4(AlarmClock, { size: 13 }),
+      " ",
+      scheduleLabel
+    ] })
+  ] });
+}
+
+// src/widgets/ConfigurationWidgets.jsx
+import React5, { useState as useState5 } from "react";
+import { ChevronDown as ChevronDown3, ChevronLeft, ChevronRight as ChevronRight3, ChevronsLeft, ChevronsRight, Copy, KeyRound, LockKeyhole, Pencil, Plus, Search as Search3, Settings as Settings3, Trash2, UserRoundPen } from "lucide-react";
+import { Fragment as Fragment2, jsx as jsx5, jsxs as jsxs5 } from "react/jsx-runtime";
+var CONFIG_GROUPS = [
+  { label: "Self-Service", items: [{ id: "policy", label: "Policy Configuration" }, { id: "mfa", label: "Multi-factor Authentication" }, { id: "expiry", label: "Password Expiration Notification" }, { id: "enforcer", label: "Password Policy Enforcer" }, { id: "sync", label: "Password Sync/Single Sign On" }, { id: "conditional", label: "Conditional Access" }, { id: "directory", label: "Directory Self Service" }] },
+  { label: "Administrative Tools", items: [{ id: "enrollment", label: "Quick Enrollment" }, { id: "agent", label: "GINA/Mac/Linux (Ctrl+Alt+Del)" }, { id: "mobile", label: "Mobile App Deployment" }, { id: "approval", label: "Approval Workflow" }, { id: "technician", label: "Technician" }] },
+  { label: "Security Center", items: [{ id: "hardening", label: "Security Hardening" }, { id: "strengtheners", label: "Password Strengtheners" }, { id: "questions", label: "Security Q&A Strengtheners" }, { id: "anti-hacking", label: "Anti-Hacking System" }] }
+];
+var POLICY_FEATURES = [
+  { label: "Reset Password", icon: KeyRound },
+  { label: "Unlock Account", icon: LockKeyhole },
+  { label: "Change Password", icon: Settings3 },
+  { label: "Self Update", icon: UserRoundPen }
+];
+var DEMO_POLICIES = [
+  { name: "Selfservice Users", permissions: "Reset Password, Unlock Account, Self Update, Change Password", modifiedBy: "admin (ADSelfService Plus Authentication)", modified: "2025/04/05 01:43 PM" },
+  { name: "Endpoint MFA Users", permissions: "Reset Password, Unlock Account, Change Password", modifiedBy: "operator (ADSelfService Plus Authentication)", modified: "2025/07/08 07:28 AM" },
+  { name: "OWA MFA Users", permissions: "Reset Password, Unlock Account", modifiedBy: "admin (ADSelfService Plus Authentication)", modified: "2025/04/05 11:38 AM" },
+  { name: "VPN MFA Users", permissions: "Unlock Account, Self Update, Change Password", modifiedBy: "operator (ADSelfService Plus Authentication)", modified: "2025/07/08 07:28 AM" },
+  { name: "Remote Users", permissions: "Reset Password, Self Update, Change Password", modifiedBy: "admin (ADSelfService Plus Authentication)", modified: "2025/04/05 11:39 AM" },
+  { name: "System Admins", permissions: "Reset Password", modifiedBy: "operator (ADSelfService Plus Authentication)", modified: "2025/07/08 07:28 AM" },
+  { name: "Technical Support", permissions: "Self Update, Change Password", modifiedBy: "admin (ADSelfService Plus Authentication)", modified: "2025/04/05 11:40 AM" }
+];
+var POLICY_COLUMNS = [
+  { key: "actions", label: "Actions" },
+  { key: "advanced", label: "Advanced" },
+  { key: "name", label: "Policy Name" },
+  { key: "permissions", label: "Permissions" },
+  { key: "domain", label: "Domain Name" },
+  { key: "modifiedBy", label: "Last Modified By" },
+  { key: "modified", label: "Last Modified Time" }
+];
+function ConfigurationSidebar({ groups = CONFIG_GROUPS, selected, defaultSelected, onSelect, initialOpen }) {
+  return /* @__PURE__ */ jsx5(CollapsibleSidebar, { groups, selected, defaultSelected, onSelect, initialOpen });
+}
+function ConfigurationHeader({ title, mode = "Password Self-Service Modes", onModeChange, helpText, action }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "config-heading", children: [
+    /* @__PURE__ */ jsxs5("h1", { children: [
+      title,
+      " ",
+      helpText !== null && /* @__PURE__ */ jsx5("span", { title: helpText || `Help for ${title}`, children: "\u24D8" })
+    ] }),
+    action || /* @__PURE__ */ jsxs5("button", { type: "button", onClick: () => onModeChange?.(mode), children: [
+      mode,
+      /* @__PURE__ */ jsx5(ChevronDown3, { size: 11 })
+    ] })
+  ] });
+}
+function PolicyFeatureStrip({ title = "Self-Service Features", features = POLICY_FEATURES, instruction, onFeatureSelect }) {
+  return /* @__PURE__ */ jsxs5("section", { className: "config-feature-strip", "aria-label": title, children: [
+    /* @__PURE__ */ jsx5("h2", { children: title }),
+    /* @__PURE__ */ jsx5("div", { className: "config-features", children: features.map(({ id, label, icon: Icon = Settings3 }, index) => /* @__PURE__ */ jsx5("div", { children: onFeatureSelect ? /* @__PURE__ */ jsxs5("button", { type: "button", onClick: () => onFeatureSelect(id ?? label, { id, label, icon: Icon }), children: [
+      /* @__PURE__ */ jsx5(Icon, { size: 20, strokeWidth: 2 }),
+      /* @__PURE__ */ jsx5("span", { children: label })
+    ] }) : /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      /* @__PURE__ */ jsx5(Icon, { size: 20, strokeWidth: 2 }),
+      /* @__PURE__ */ jsx5("span", { children: label })
+    ] }) }, id ?? label ?? index)) }),
+    /* @__PURE__ */ jsx5("p", { children: instruction === void 0 ? /* @__PURE__ */ jsxs5(Fragment2, { children: [
+      'Click "Add New Policy" Button to add a new policy. To edit an existing policy, click on ',
+      /* @__PURE__ */ jsx5(Pencil, { size: 12 }),
+      " icon in the Actions column."
+    ] }) : instruction })
+  ] });
+}
+function PolicyToolbar({ title = "Available Policies", addLabel = "Add New Policy", searchLabel = "Search policies", count = 0, page, defaultPage = 1, pageSize = 25, onPageChange, onAdd, query, defaultQuery = "", onQueryChange, labels = {} }) {
+  const [localPage, setLocalPage] = useState5(defaultPage);
+  const [localQuery, setLocalQuery] = useState5(defaultQuery);
+  const currentPage = page ?? localPage;
+  const currentQuery = query ?? localQuery;
+  const pages = Math.max(1, Math.ceil(count / pageSize));
+  const first = count ? (currentPage - 1) * pageSize + 1 : 0;
+  const last = Math.min(currentPage * pageSize, count);
+  const changePage = (next) => {
+    if (page === void 0) setLocalPage(next);
+    onPageChange?.(next);
+  };
+  return /* @__PURE__ */ jsxs5(Fragment2, { children: [
+    /* @__PURE__ */ jsxs5("div", { className: "config-table-title", children: [
+      /* @__PURE__ */ jsx5("h2", { children: title }),
+      /* @__PURE__ */ jsxs5("button", { type: "button", onClick: onAdd, children: [
+        /* @__PURE__ */ jsx5(Plus, { size: 13 }),
+        " ",
+        addLabel
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs5("div", { className: "config-table-tools", children: [
+      /* @__PURE__ */ jsxs5("label", { children: [
+        /* @__PURE__ */ jsx5(Search3, { size: 15 }),
+        /* @__PURE__ */ jsx5("input", { "aria-label": searchLabel, value: currentQuery, onChange: (event) => {
+          if (query === void 0) setLocalQuery(event.target.value);
+          onQueryChange?.(event.target.value);
+        } })
+      ] }),
+      /* @__PURE__ */ jsxs5("div", { className: "config-page-controls", children: [
+        /* @__PURE__ */ jsx5("button", { type: "button", disabled: currentPage <= 1, "aria-label": labels.first || "First page", onClick: () => changePage(1), children: /* @__PURE__ */ jsx5(ChevronsLeft, { size: 12 }) }),
+        /* @__PURE__ */ jsx5("button", { type: "button", disabled: currentPage <= 1, "aria-label": labels.previous || "Previous page", onClick: () => changePage(currentPage - 1), children: /* @__PURE__ */ jsx5(ChevronLeft, { size: 12 }) }),
+        /* @__PURE__ */ jsx5("span", { children: labels.range ? labels.range(first, last, count) : `${first}-${last} of ${count}` }),
+        /* @__PURE__ */ jsx5("button", { type: "button", disabled: currentPage >= pages, "aria-label": labels.next || "Next page", onClick: () => changePage(currentPage + 1), children: /* @__PURE__ */ jsx5(ChevronRight3, { size: 12 }) }),
+        /* @__PURE__ */ jsx5("button", { type: "button", disabled: currentPage >= pages, "aria-label": labels.last || "Last page", onClick: () => changePage(pages), children: /* @__PURE__ */ jsx5(ChevronsRight, { size: 12 }) })
+      ] })
+    ] })
+  ] });
+}
+function PolicyTable({ policies = DEMO_POLICIES, columns = POLICY_COLUMNS, defaultDomain = "ADSELFSERVICE", emptyMessage = "No Data Available", actionLabels = {}, onEdit, onDelete, onCopy, renderCell, getRowId = (policy) => policy.id ?? policy.name }) {
+  const cell = (policy, key) => {
+    if (renderCell) {
+      const custom = renderCell(policy, key);
+      if (custom !== void 0) return custom;
+    }
+    if (key === "actions") return /* @__PURE__ */ jsxs5("div", { className: "config-actions", children: [
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": `${actionLabels.edit || "Edit"} ${policy.name}`, onClick: () => onEdit?.(policy), children: /* @__PURE__ */ jsx5(Pencil, { size: 12 }) }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": `${actionLabels.delete || "Delete"} ${policy.name}`, onClick: () => onDelete?.(policy), children: /* @__PURE__ */ jsx5(Trash2, { size: 12 }) }),
+      /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": `${actionLabels.copy || "Copy"} ${policy.name}`, onClick: () => onCopy?.(policy), children: /* @__PURE__ */ jsx5(Copy, { size: 12 }) })
+    ] });
+    if (key === "advanced") return /* @__PURE__ */ jsx5("button", { type: "button", "aria-label": `${actionLabels.advanced || "Advanced settings for"} ${policy.name}`, onClick: () => onEdit?.(policy), children: /* @__PURE__ */ jsx5(Settings3, { size: 17 }) });
+    return key === "domain" ? policy.domain ?? defaultDomain : policy[key];
+  };
+  return /* @__PURE__ */ jsx5("div", { className: "config-policy-table-wrap", children: /* @__PURE__ */ jsxs5("table", { className: `config-policy-table ${columns.length === 7 ? "is-reference" : ""}`, children: [
+    /* @__PURE__ */ jsx5("thead", { children: /* @__PURE__ */ jsx5("tr", { children: columns.map((column) => /* @__PURE__ */ jsx5("th", { children: column.label }, column.key)) }) }),
+    /* @__PURE__ */ jsx5("tbody", { children: policies.length ? policies.map((policy) => /* @__PURE__ */ jsx5("tr", { children: columns.map((column) => /* @__PURE__ */ jsx5("td", { title: column.key === "modifiedBy" ? policy.modifiedBy : void 0, children: cell(policy, column.key) }, column.key)) }, getRowId(policy))) : /* @__PURE__ */ jsx5("tr", { children: /* @__PURE__ */ jsx5("td", { colSpan: columns.length, className: "config-empty", children: emptyMessage }) }) })
+  ] }) });
+}
+
+// src/widgets/SettingsWidgets.jsx
+import React6, { useState as useState6 } from "react";
+import { Fragment as Fragment3, jsx as jsx6, jsxs as jsxs6 } from "react/jsx-runtime";
+function Frame({ title, tabs, activeTab, defaultTab, onTabChange, children, action, help, className = "" }) {
+  const [localTab, setLocalTab] = useState6(defaultTab ?? (typeof tabs?.[0] === "string" ? tabs[0] : tabs?.[0]?.id));
+  const active = activeTab ?? localTab;
+  return /* @__PURE__ */ jsxs6(Fragment3, { children: [
+    /* @__PURE__ */ jsx6(PageHeader, { title, action, help }),
+    /* @__PURE__ */ jsxs6(Panel, { className, children: [
+      tabs && /* @__PURE__ */ jsx6(Tabs, { tabs, active, onChange: (tab) => {
+        if (activeTab === void 0) setLocalTab(tab);
+        onTabChange?.(tab);
+      } }),
+      " ",
+      typeof children === "function" ? children(active) : children
+    ] })
+  ] });
+}
+function SaveBar({ saveLabel = "Save", cancel = true, cancelLabel = "Cancel", successMessage = "Settings saved in this demo.", onSave, onCancel, status: controlledStatus }) {
+  const [status, setStatus] = useState6("");
+  return /* @__PURE__ */ jsx6(ActionBar, { saveLabel, cancelLabel, onSave: () => {
+    onSave?.();
+    if (controlledStatus === void 0) {
+      setStatus(successMessage);
+      window.setTimeout(() => setStatus(""), 4e3);
+    }
+  }, onCancel: cancel ? () => {
+    onCancel?.();
+    if (controlledStatus === void 0) setStatus("");
+  } : void 0, status: controlledStatus ?? status });
+}
+function InlineSelect({ options = [], initial, value, onChange, width, ...props }) {
+  const [localValue, setLocalValue] = useState6(initial ?? (typeof options[0] === "string" ? options[0] : options[0]?.value));
+  return /* @__PURE__ */ jsx6("select", { className: "ad-select", style: { width }, value: value ?? localValue, onChange: (event) => {
+    if (value === void 0) setLocalValue(event.target.value);
+    onChange?.(event.target.value);
+  }, ...props, children: options.map((raw) => {
+    const item = typeof raw === "string" ? { value: raw, label: raw } : raw;
+    return /* @__PURE__ */ jsx6("option", { value: item.value, children: item.label }, item.value);
+  }) });
+}
+export {
+  ActionBar,
+  ActiveDirectoryChart,
+  AdminShell,
+  AppShell,
+  Button,
+  CONFIG_GROUPS,
+  CheckRow,
+  CollapsibleSidebar,
+  ConfigurationHeader,
+  ConfigurationSidebar,
+  DASHBOARD_METRICS,
+  DASHBOARD_SHORTCUTS,
+  DEMO_POLICIES,
+  DIRECTORY_REPORT_DATA,
+  DashboardLayout,
+  DashboardToolbar,
+  DataTable,
+  ExpandedWidget,
+  FOOTER_LINKS,
+  FormRow,
+  Frame,
+  HelpTip,
+  IconButton,
+  InlineSelect,
+  MAIN_SECTIONS,
+  MFA_REPORT_DATA,
+  MetricWidget,
+  MfaChart,
+  Modal,
+  Notice,
+  POLICY_COLUMNS,
+  POLICY_FEATURES,
+  PageHeader,
+  Panel,
+  PolicyFeatureStrip,
+  PolicyTable,
+  PolicyToolbar,
+  REPORT_GROUPS,
+  RadioRow,
+  ReportCategoryBar,
+  ReportFilters,
+  ReportNavigation,
+  ReportPageHeading,
+  ReportResults,
+  SELF_SERVICE_REPORT_DATA,
+  SaveBar,
+  SectionTitle,
+  SelectField,
+  SelfServiceChart,
+  ShellFooter,
+  ShellHeader,
+  ShortcutRail,
+  Tabs,
+  TextField,
+  TextLink,
+  TopNavigation,
+  WidgetFrame,
+  normalizeReport
+};