@mshuja288/aksuicore 0.2.0

package/dist/index.js

@@ -0,0 +1,1127 @@
+"use client";
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { useId, useRef, useState, useLayoutEffect, useEffect, useMemo, useSyncExternalStore } from 'react';
+import { createPortal } from 'react-dom';
+
+// src/theme/tokens.ts
+var aksuiTokens = {
+  brand: "#1E2735",
+  accent: "#E67E22",
+  ink: "#1E2735",
+  muted: "#667085",
+  line: "#e6e4df",
+  field: "#f6f5f3",
+  card: "#ffffff",
+  danger: "#b42318",
+  dangerBg: "#fff1f0",
+  ok: "#067647",
+  okBg: "#ecfdf3",
+  radius: "8px",
+  rowHeight: "34px",
+  tableHeaderHeight: "36px",
+  sideRailCollapsed: "52px",
+  sideRailExpanded: "280px",
+  previewPanelWidth: "300px"
+};
+
+// src/theme/index.ts
+var aksuiThemeVersion = "0.2.0";
+var variantClass = {
+  primary: "",
+  secondary: "secondary",
+  ghost: "ghost",
+  danger: "danger"
+};
+function Button({
+  variant = "primary",
+  className = "",
+  children,
+  ...props
+}) {
+  const classes = ["aks-button", variantClass[variant], className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("button", { type: "button", className: classes, ...props, children });
+}
+function Select({
+  value,
+  options,
+  onChange,
+  placeholder = "Select",
+  disabled = false,
+  required = false,
+  className = ""
+}) {
+  const listId = useId();
+  const rootRef = useRef(null);
+  const menuRef = useRef(null);
+  const [open, setOpen] = useState(false);
+  const [menuPos, setMenuPos] = useState(null);
+  const selected = options.find((option) => option.value === value) ?? null;
+  function updatePosition() {
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const spaceBelow = window.innerHeight - rect.bottom - 12;
+    const spaceAbove = rect.top - 12;
+    const openUp = spaceBelow < 220 && spaceAbove > spaceBelow;
+    const maxHeight = Math.max(160, Math.min(280, openUp ? spaceAbove : spaceBelow));
+    setMenuPos({
+      top: openUp ? rect.top - 8 : rect.bottom + 6,
+      left: rect.left,
+      width: rect.width,
+      maxHeight,
+      openUp
+    });
+  }
+  useLayoutEffect(() => {
+    if (!open) {
+      return;
+    }
+    updatePosition();
+    function onReposition() {
+      updatePosition();
+    }
+    window.addEventListener("resize", onReposition);
+    window.addEventListener("scroll", onReposition, true);
+    return () => {
+      window.removeEventListener("resize", onReposition);
+      window.removeEventListener("scroll", onReposition, true);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function onPointerDown(event) {
+      const target = event.target;
+      if (rootRef.current?.contains(target) || menuRef.current?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    }
+    function onKeyDown(event) {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  function choose(next) {
+    onChange(next);
+    setOpen(false);
+  }
+  return /* @__PURE__ */ jsxs("div", { className: `app-select ${className}`.trim(), ref: rootRef, children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        className: "app-select-mirror",
+        tabIndex: -1,
+        value,
+        required,
+        onChange: () => void 0,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: open ? "app-select-trigger open" : "app-select-trigger",
+        disabled,
+        "aria-haspopup": "listbox",
+        "aria-expanded": open,
+        "aria-controls": listId,
+        onClick: () => {
+          if (!disabled) {
+            setOpen((current) => !current);
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: selected ? "app-select-value" : "app-select-placeholder", children: selected ? /* @__PURE__ */ jsxs(Fragment, { children: [
+            selected.tone ? /* @__PURE__ */ jsx("span", { className: `app-select-dot ${selected.tone}`, "aria-hidden": "true" }) : null,
+            selected.label
+          ] }) : placeholder }),
+          /* @__PURE__ */ jsx("svg", { className: "app-select-chevron", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M5 7.5 10 12.5 15 7.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) })
+        ]
+      }
+    ),
+    open && menuPos ? createPortal(
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          ref: menuRef,
+          id: listId,
+          className: menuPos.openUp ? "app-select-menu open-up" : "app-select-menu",
+          role: "listbox",
+          style: {
+            top: menuPos.openUp ? void 0 : menuPos.top,
+            bottom: menuPos.openUp ? window.innerHeight - menuPos.top : void 0,
+            left: menuPos.left,
+            width: menuPos.width,
+            maxHeight: menuPos.maxHeight
+          },
+          children: options.length === 0 ? /* @__PURE__ */ jsx("div", { className: "app-select-empty", children: "No options" }) : options.map((option) => {
+            const active = option.value === value;
+            return /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                role: "option",
+                "aria-selected": active,
+                className: active ? "app-select-option active" : "app-select-option",
+                onClick: () => choose(option.value),
+                children: [
+                  option.tone ? /* @__PURE__ */ jsx("span", { className: `app-select-dot ${option.tone}`, "aria-hidden": "true" }) : null,
+                  /* @__PURE__ */ jsx("span", { children: option.label }),
+                  active ? /* @__PURE__ */ jsx("svg", { className: "app-select-check", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M4.5 10.5 8.2 14.2 15.5 6", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) }) : null
+                ]
+              },
+              option.value || "__empty"
+            );
+          })
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+var AppSelect = Select;
+var weekdayLabels = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+function pad(value) {
+  return String(value).padStart(2, "0");
+}
+function toIso(date) {
+  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}`;
+}
+function parseIso(value) {
+  if (!/^\d{4}-\d{2}-\d{2}$/.test(value)) {
+    return null;
+  }
+  const [year, month, day] = value.split("-").map(Number);
+  const date = new Date(year, month - 1, day);
+  if (date.getFullYear() !== year || date.getMonth() !== month - 1 || date.getDate() !== day) {
+    return null;
+  }
+  return date;
+}
+function formatDisplay(value) {
+  const date = parseIso(value);
+  if (!date) {
+    return "";
+  }
+  return `${pad(date.getDate())}/${pad(date.getMonth() + 1)}/${date.getFullYear()}`;
+}
+function startOfMonth(date) {
+  return new Date(date.getFullYear(), date.getMonth(), 1);
+}
+function buildCells(month) {
+  const first = startOfMonth(month);
+  const mondayBased = (first.getDay() + 6) % 7;
+  const start = new Date(first);
+  start.setDate(first.getDate() - mondayBased);
+  return Array.from({ length: 42 }, (_, index) => {
+    const day = new Date(start);
+    day.setDate(start.getDate() + index);
+    return day;
+  });
+}
+function DateField({
+  value,
+  onChange,
+  placeholder = "dd/mm/yyyy",
+  disabled = false,
+  readOnly = false
+}) {
+  const rootRef = useRef(null);
+  const menuRef = useRef(null);
+  const selected = parseIso(value);
+  const [open, setOpen] = useState(false);
+  const [menuPos, setMenuPos] = useState(null);
+  const [viewMonth, setViewMonth] = useState(() => startOfMonth(selected ?? /* @__PURE__ */ new Date()));
+  const cells = useMemo(() => buildCells(viewMonth), [viewMonth]);
+  const today = toIso(/* @__PURE__ */ new Date());
+  const locked = disabled || readOnly;
+  function updatePosition() {
+    const root = rootRef.current;
+    if (!root) {
+      return;
+    }
+    const rect = root.getBoundingClientRect();
+    const openUp = window.innerHeight - rect.bottom < 340 && rect.top > 340;
+    setMenuPos({
+      top: openUp ? rect.top - 8 : rect.bottom + 6,
+      left: rect.left,
+      width: Math.max(rect.width, 280),
+      openUp
+    });
+  }
+  useLayoutEffect(() => {
+    if (!open) {
+      return;
+    }
+    updatePosition();
+    function onReposition() {
+      updatePosition();
+    }
+    window.addEventListener("resize", onReposition);
+    window.addEventListener("scroll", onReposition, true);
+    return () => {
+      window.removeEventListener("resize", onReposition);
+      window.removeEventListener("scroll", onReposition, true);
+    };
+  }, [open]);
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    function onPointerDown(event) {
+      const target = event.target;
+      if (rootRef.current?.contains(target) || menuRef.current?.contains(target)) {
+        return;
+      }
+      setOpen(false);
+    }
+    function onKeyDown(event) {
+      if (event.key === "Escape") {
+        setOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("mousedown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [open]);
+  function openPicker() {
+    if (locked) {
+      return;
+    }
+    setViewMonth(startOfMonth(selected ?? /* @__PURE__ */ new Date()));
+    setOpen(true);
+  }
+  function choose(date) {
+    onChange?.(toIso(date));
+    setOpen(false);
+  }
+  const monthLabel = viewMonth.toLocaleString(void 0, { month: "long", year: "numeric" });
+  return /* @__PURE__ */ jsxs("div", { className: readOnly ? "date-field read-only" : "date-field", ref: rootRef, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        className: open ? "date-field-trigger open" : "date-field-trigger",
+        disabled,
+        onClick: () => {
+          if (locked) {
+            return;
+          }
+          if (open) {
+            setOpen(false);
+          } else {
+            openPicker();
+          }
+        },
+        children: [
+          /* @__PURE__ */ jsx("span", { className: value ? "date-field-value" : "date-field-placeholder", children: value ? formatDisplay(value) : placeholder }),
+          /* @__PURE__ */ jsxs("svg", { className: "date-field-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx("rect", { x: "3.5", y: "5", width: "17", height: "15.5", rx: "2", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }),
+            /* @__PURE__ */ jsx("path", { d: "M3.5 9.5h17M8 3.5v3M16 3.5v3", fill: "none", stroke: "currentColor", strokeWidth: "1.6", strokeLinecap: "round" })
+          ] })
+        ]
+      }
+    ),
+    open && menuPos ? createPortal(
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: menuRef,
+          className: "date-picker",
+          style: {
+            top: menuPos.openUp ? void 0 : menuPos.top,
+            bottom: menuPos.openUp ? window.innerHeight - menuPos.top : void 0,
+            left: menuPos.left,
+            width: menuPos.width
+          },
+          children: [
+            /* @__PURE__ */ jsxs("div", { className: "date-picker-head", children: [
+              /* @__PURE__ */ jsx("strong", { children: monthLabel }),
+              /* @__PURE__ */ jsxs("div", { className: "date-picker-nav", children: [
+                /* @__PURE__ */ jsx("button", { type: "button", className: "ghost", "aria-label": "Previous month", onClick: () => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() - 1, 1)), children: "\u2039" }),
+                /* @__PURE__ */ jsx("button", { type: "button", className: "ghost", "aria-label": "Next month", onClick: () => setViewMonth(new Date(viewMonth.getFullYear(), viewMonth.getMonth() + 1, 1)), children: "\u203A" })
+              ] })
+            ] }),
+            /* @__PURE__ */ jsx("div", { className: "date-picker-weekdays", children: weekdayLabels.map((label) => /* @__PURE__ */ jsx("span", { children: label }, label)) }),
+            /* @__PURE__ */ jsx("div", { className: "date-picker-grid", children: cells.map((day) => {
+              const iso = toIso(day);
+              const outside = day.getMonth() !== viewMonth.getMonth();
+              const isSelected = value === iso;
+              const isToday = today === iso;
+              const className = [
+                "date-picker-day",
+                outside ? "outside" : "",
+                isSelected ? "selected" : "",
+                isToday ? "today" : ""
+              ].filter(Boolean).join(" ");
+              return /* @__PURE__ */ jsx("button", { type: "button", className, onClick: () => choose(day), children: day.getDate() }, iso + String(outside));
+            }) }),
+            /* @__PURE__ */ jsxs("div", { className: "date-picker-footer", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ghost",
+                  onClick: () => {
+                    onChange?.("");
+                    setOpen(false);
+                  },
+                  children: "Clear"
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ghost",
+                  onClick: () => {
+                    const now = /* @__PURE__ */ new Date();
+                    setViewMonth(startOfMonth(now));
+                    choose(now);
+                  },
+                  children: "Today"
+                }
+              )
+            ] })
+          ]
+        }
+      ),
+      document.body
+    ) : null
+  ] });
+}
+function Dialog({
+  title,
+  open,
+  onClose,
+  children,
+  wide = true
+}) {
+  if (!open) {
+    return null;
+  }
+  return /* @__PURE__ */ jsx("div", { className: "dialog-backdrop", onClick: onClose, children: /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: wide ? "dialog form-dialog" : "dialog",
+      role: "dialog",
+      "aria-modal": "true",
+      "aria-label": title,
+      onClick: (event) => event.stopPropagation(),
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "dialog-head", children: [
+          /* @__PURE__ */ jsx("h2", { children: title }),
+          /* @__PURE__ */ jsx(Button, { variant: "ghost", onClick: onClose, children: "Close" })
+        ] }),
+        children
+      ]
+    }
+  ) });
+}
+var FormDialog = Dialog;
+function useIsClient() {
+  return useSyncExternalStore(
+    () => () => {
+    },
+    () => true,
+    () => false
+  );
+}
+function SuccessIcon() {
+  return /* @__PURE__ */ jsxs("svg", { className: "snackbar-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "9", fill: "none", stroke: "currentColor", strokeWidth: "1.8" }),
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M8.2 12.2 10.8 14.8 15.8 9.6",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinecap: "round",
+        strokeLinejoin: "round"
+      }
+    )
+  ] });
+}
+function AlertIcon() {
+  return /* @__PURE__ */ jsxs("svg", { className: "snackbar-icon", viewBox: "0 0 24 24", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(
+      "path",
+      {
+        d: "M12 3.8 3.8 19.2h16.4L12 3.8Z",
+        fill: "none",
+        stroke: "currentColor",
+        strokeWidth: "1.8",
+        strokeLinejoin: "round"
+      }
+    ),
+    /* @__PURE__ */ jsx("path", { d: "M12 10v4.2", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("circle", { cx: "12", cy: "16.8", r: "1", fill: "currentColor" })
+  ] });
+}
+function Snackbar({
+  message,
+  success,
+  onDismiss
+}) {
+  const isClient = useIsClient();
+  useEffect(() => {
+    if (!message || !onDismiss) {
+      return;
+    }
+    const timeout = window.setTimeout(onDismiss, success ? 3200 : 4800);
+    return () => window.clearTimeout(timeout);
+  }, [message, success, onDismiss]);
+  if (!isClient || !message) {
+    return null;
+  }
+  return createPortal(
+    /* @__PURE__ */ jsx("div", { className: "snackbar-host", "aria-live": "polite", children: /* @__PURE__ */ jsxs("div", { className: success ? "snackbar success" : "snackbar", role: "status", children: [
+      success ? /* @__PURE__ */ jsx(SuccessIcon, {}) : /* @__PURE__ */ jsx(AlertIcon, {}),
+      /* @__PURE__ */ jsx("p", { children: message }),
+      onDismiss ? /* @__PURE__ */ jsx("button", { type: "button", className: "snackbar-close", "aria-label": "Dismiss", onClick: onDismiss, children: "\xD7" }) : null
+    ] }) }),
+    document.body
+  );
+}
+var StatusMessage = Snackbar;
+function Topbar({
+  title,
+  logoSrc,
+  logoAlt = "Logo",
+  username = "",
+  onLogout,
+  children
+}) {
+  const [menuOpen, setMenuOpen] = useState(false);
+  const menuRef = useRef(null);
+  const initial = (username || "U").slice(0, 1).toUpperCase();
+  useEffect(() => {
+    if (!menuOpen) {
+      return;
+    }
+    function onPointerDown(event) {
+      if (menuRef.current && !menuRef.current.contains(event.target)) {
+        setMenuOpen(false);
+      }
+    }
+    document.addEventListener("mousedown", onPointerDown);
+    return () => document.removeEventListener("mousedown", onPointerDown);
+  }, [menuOpen]);
+  return /* @__PURE__ */ jsxs("header", { className: "topbar", children: [
+    /* @__PURE__ */ jsxs("div", { className: "topbar-brand", children: [
+      logoSrc ? /* @__PURE__ */ jsx(
+        "img",
+        {
+          className: "topbar-logo",
+          src: logoSrc,
+          alt: logoAlt,
+          onError: (event) => {
+            event.currentTarget.hidden = true;
+          }
+        }
+      ) : null,
+      /* @__PURE__ */ jsx("h1", { children: title })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "topbar-actions", ref: menuRef, children: [
+      children,
+      onLogout ? /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            className: "avatar-button",
+            "aria-haspopup": "menu",
+            "aria-expanded": menuOpen,
+            onClick: () => setMenuOpen((open) => !open),
+            title: username || "Account",
+            children: /* @__PURE__ */ jsx("span", { className: "avatar", children: initial })
+          }
+        ),
+        menuOpen ? /* @__PURE__ */ jsxs("div", { className: "avatar-menu", role: "menu", children: [
+          username ? /* @__PURE__ */ jsx("p", { className: "avatar-name", children: username }) : null,
+          /* @__PURE__ */ jsx(
+            Button,
+            {
+              variant: "ghost",
+              role: "menuitem",
+              onClick: () => {
+                setMenuOpen(false);
+                onLogout();
+              },
+              children: "Logout"
+            }
+          )
+        ] }) : null
+      ] }) : null
+    ] })
+  ] });
+}
+function SideNav({
+  items,
+  activeId,
+  onSelect,
+  label = "Sections"
+}) {
+  return /* @__PURE__ */ jsx("nav", { className: "side-nav", "aria-label": label, children: items.map((item) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      className: activeId === item.id ? "active" : "",
+      onClick: () => onSelect(item.id),
+      children: item.label
+    },
+    item.id
+  )) });
+}
+var defaultPageSizes = [
+  { value: "15", label: "15" },
+  { value: "20", label: "20" },
+  { value: "50", label: "50" },
+  { value: "100", label: "100" },
+  { value: "all", label: "All" }
+];
+function Pagination({
+  page,
+  pageCount,
+  pageSize,
+  onPageChange,
+  onPageSizeChange,
+  summary,
+  pageSizeOptions = defaultPageSizes,
+  disabled = false
+}) {
+  const showAll = pageSize === "all";
+  return /* @__PURE__ */ jsxs("div", { className: "table-pagination", children: [
+    /* @__PURE__ */ jsxs("label", { className: "page-size", children: [
+      "Rows",
+      /* @__PURE__ */ jsx(
+        Select,
+        {
+          className: "page-size-select",
+          value: pageSize,
+          options: pageSizeOptions,
+          onChange: onPageSizeChange,
+          disabled
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "page-summary", children: summary }),
+    /* @__PURE__ */ jsxs("div", { className: "page-buttons", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ghost",
+          disabled: disabled || showAll || page <= 1,
+          onClick: () => onPageChange(page - 1),
+          children: "Previous"
+        }
+      ),
+      /* @__PURE__ */ jsxs("span", { className: "page-indicator", children: [
+        "Page ",
+        showAll ? 1 : page,
+        " of ",
+        pageCount
+      ] }),
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "ghost",
+          disabled: disabled || showAll || page >= pageCount,
+          onClick: () => onPageChange(page + 1),
+          children: "Next"
+        }
+      )
+    ] })
+  ] });
+}
+function FormActions({
+  pending,
+  editing,
+  saveLabel,
+  updateLabel,
+  newLabel,
+  onNew,
+  saveDisabled = false,
+  replaceSaveWhenEditing = false
+}) {
+  if (editing && replaceSaveWhenEditing) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxs("div", { className: "actions", children: [
+    /* @__PURE__ */ jsx("button", { type: "submit", disabled: pending || saveDisabled, children: editing && updateLabel ? updateLabel : saveLabel }),
+    /* @__PURE__ */ jsx("button", { type: "button", className: "ghost", onClick: onNew, children: newLabel })
+  ] });
+}
+function AppShell({
+  title,
+  logoSrc,
+  logoAlt,
+  username,
+  onLogout,
+  navItems,
+  activeNavId,
+  onNavSelect,
+  navLabel = "Sections",
+  showBottomNav = true,
+  topbarActions,
+  children,
+  screenClassName = ""
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "aksui-root app-shell", children: [
+    /* @__PURE__ */ jsx(Topbar, { title, logoSrc, logoAlt, username, onLogout, children: topbarActions }),
+    /* @__PURE__ */ jsxs("div", { className: "app-body", children: [
+      /* @__PURE__ */ jsx(SideNav, { items: navItems, activeId: activeNavId, onSelect: onNavSelect, label: navLabel }),
+      /* @__PURE__ */ jsx("div", { className: ["screen", screenClassName].filter(Boolean).join(" "), children })
+    ] }),
+    showBottomNav ? /* @__PURE__ */ jsx("nav", { className: "bottom-nav", "aria-label": navLabel, children: navItems.map((item) => /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: activeNavId === item.id ? "active" : "",
+        onClick: () => onNavSelect(item.id),
+        children: item.short ?? item.label
+      },
+      item.id
+    )) }) : null
+  ] });
+}
+function useIsClient2() {
+  return useSyncExternalStore(
+    () => () => {
+    },
+    () => true,
+    () => false
+  );
+}
+function compareColumnValues(column, left, right) {
+  const leftRaw = column.display ? column.display(left) : column.value(left);
+  const rightRaw = column.display ? column.display(right) : column.value(right);
+  if (leftRaw === null || leftRaw === void 0 || leftRaw === "") {
+    return rightRaw === null || rightRaw === void 0 || rightRaw === "" ? 0 : 1;
+  }
+  if (rightRaw === null || rightRaw === void 0 || rightRaw === "") {
+    return -1;
+  }
+  if (typeof leftRaw === "number" && typeof rightRaw === "number") {
+    return leftRaw - rightRaw;
+  }
+  const leftText = String(leftRaw);
+  const rightText = String(rightRaw);
+  const leftNumber = Number(leftText);
+  const rightNumber = Number(rightText);
+  if (leftText.trim() !== "" && rightText.trim() !== "" && Number.isFinite(leftNumber) && Number.isFinite(rightNumber) && /^-?\d+(\.\d+)?$/.test(leftText.trim()) && /^-?\d+(\.\d+)?$/.test(rightText.trim())) {
+    return leftNumber - rightNumber;
+  }
+  return leftText.localeCompare(rightText, void 0, { sensitivity: "base", numeric: true });
+}
+function PlusIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M10 4v12M4 10h12", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) });
+}
+function FilterIcon() {
+  return /* @__PURE__ */ jsx("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M3 5h14M5.5 10h9M8 15h4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }) });
+}
+function ResetIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M4.5 8.2A6 6 0 1 1 4.8 13", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round" }),
+    /* @__PURE__ */ jsx("path", { d: "M4.5 4.2v4h4", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" })
+  ] });
+}
+function ChevronIcon({ open }) {
+  return /* @__PURE__ */ jsx("svg", { className: open ? "side-rail-chevron open" : "side-rail-chevron", viewBox: "0 0 20 20", "aria-hidden": "true", children: /* @__PURE__ */ jsx("path", { d: "M8 4.5 13.5 10 8 15.5", fill: "none", stroke: "currentColor", strokeWidth: "1.8", strokeLinecap: "round", strokeLinejoin: "round" }) });
+}
+function PreviewIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 20 20", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("path", { d: "M2.8 10S5.5 4.8 10 4.8 17.2 10 17.2 10 14.5 15.2 10 15.2 2.8 10 2.8 10Z", fill: "none", stroke: "currentColor", strokeWidth: "1.6" }),
+    /* @__PURE__ */ jsx("circle", { cx: "10", cy: "10", r: "2.4", fill: "none", stroke: "currentColor", strokeWidth: "1.6" })
+  ] });
+}
+function DetailList({ lines }) {
+  return /* @__PURE__ */ jsx("dl", { className: "record-detail-list", children: lines.map((line) => /* @__PURE__ */ jsxs("div", { className: "record-detail-row", children: [
+    /* @__PURE__ */ jsx("dt", { children: line.label }),
+    /* @__PURE__ */ jsx("dd", { children: line.value })
+  ] }, line.label)) });
+}
+function RecordWorkspace({
+  title,
+  columns,
+  items,
+  rowKey,
+  empty,
+  onAdd,
+  addLabel = "Add",
+  canAdd = true,
+  onView,
+  onUpdate,
+  onDelete,
+  canUpdate,
+  canDelete,
+  toolbar,
+  form
+}) {
+  const filterableColumns = columns.filter((column) => column.filterable !== false);
+  const [filters, setFilters] = useState({});
+  const [sort, setSort] = useState(null);
+  const [sideOpen, setSideOpen] = useState(false);
+  const [previewEnabled, setPreviewEnabled] = useState(false);
+  const [previewKey, setPreviewKey] = useState(null);
+  const [tooltip, setTooltip] = useState(null);
+  const [pageSize, setPageSize] = useState("15");
+  const [page, setPage] = useState(1);
+  const isClient = useIsClient2();
+  const filtered = useMemo(() => {
+    const activeFilters = columns.filter((column) => column.filterable !== false);
+    return items.filter(
+      (item) => activeFilters.every((column) => {
+        const query = (filters[column.key] ?? "").trim();
+        if (!query) {
+          return true;
+        }
+        const raw = column.value(item);
+        const text = raw === null || raw === void 0 ? "" : String(raw);
+        if (column.filterOptions) {
+          return text === query;
+        }
+        return text.toLowerCase().includes(query.toLowerCase());
+      })
+    );
+  }, [items, filters, columns]);
+  const sorted = useMemo(() => {
+    if (!sort) {
+      return filtered;
+    }
+    const column = columns.find((entry) => entry.key === sort.key);
+    if (!column || column.sortable === false) {
+      return filtered;
+    }
+    const direction = sort.direction === "asc" ? 1 : -1;
+    return [...filtered].sort((left, right) => compareColumnValues(column, left, right) * direction);
+  }, [filtered, sort, columns]);
+  const activeFilterCount = useMemo(
+    () => filterableColumns.reduce((count, column) => count + ((filters[column.key] ?? "").trim() ? 1 : 0), 0),
+    [filterableColumns, filters]
+  );
+  const showAll = pageSize === "all";
+  const numericPageSize = showAll ? Math.max(sorted.length, 1) : Number(pageSize);
+  const pageCount = showAll ? 1 : Math.max(1, Math.ceil(sorted.length / numericPageSize));
+  const currentPage = Math.min(page, pageCount);
+  const start = showAll ? 0 : (currentPage - 1) * numericPageSize;
+  const pageItems = showAll ? sorted : sorted.slice(start, start + numericPageSize);
+  const showAdd = canAdd && Boolean(onAdd);
+  const showFilters = filterableColumns.length > 0;
+  const previewItem = previewKey === null ? null : sorted.find((item) => rowKey(item) === previewKey) ?? null;
+  function cellText(column, item) {
+    const raw = column.display ? column.display(item) : column.value(item);
+    return raw === null || raw === void 0 || raw === "" ? "\u2014" : String(raw);
+  }
+  function detailLines(item) {
+    return columns.map((column) => ({
+      label: column.header,
+      value: cellText(column, item)
+    }));
+  }
+  const previewTitle = previewItem && columns[0] ? cellText(columns[0], previewItem) : null;
+  function changeFilter(key, value) {
+    setFilters((current) => ({ ...current, [key]: value }));
+    setPage(1);
+  }
+  function clearFilters() {
+    setFilters({});
+    setPage(1);
+  }
+  function toggleSort(column) {
+    if (column.sortable === false) {
+      return;
+    }
+    setSort((current) => {
+      if (!current || current.key !== column.key) {
+        return { key: column.key, direction: "asc" };
+      }
+      if (current.direction === "asc") {
+        return { key: column.key, direction: "desc" };
+      }
+      return null;
+    });
+    setPage(1);
+  }
+  function setPreviewEnabledValue(enabled) {
+    setPreviewEnabled(enabled);
+    setTooltip(null);
+    if (!enabled) {
+      setPreviewKey(null);
+    }
+  }
+  function focusRecord(item) {
+    if (previewEnabled) {
+      setPreviewKey(rowKey(item));
+    }
+  }
+  function showTooltip(item, event) {
+    const padding = 16;
+    const width = 280;
+    const x = Math.min(event.clientX + 14, window.innerWidth - width - padding);
+    const y = Math.min(event.clientY + 14, window.innerHeight - padding - 24);
+    setTooltip({ x, y, lines: detailLines(item) });
+  }
+  const summary = sorted.length === 0 ? "0 records" : showAll ? `1\u2013${sorted.length} of ${sorted.length}` : `${start + 1}\u2013${Math.min(start + numericPageSize, sorted.length)} of ${sorted.length}`;
+  return /* @__PURE__ */ jsxs("div", { className: "list-workspace", "aria-label": title, children: [
+    /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: ["list-body", sideOpen ? "side-open" : "", previewEnabled ? "preview-open" : ""].filter(Boolean).join(" "),
+        children: [
+          /* @__PURE__ */ jsx("div", { className: "list-main", children: /* @__PURE__ */ jsxs("section", { className: "table-card", children: [
+            toolbar ? /* @__PURE__ */ jsx("div", { className: "table-card-bar", children: /* @__PURE__ */ jsx("div", { className: "table-card-context", children: toolbar }) }) : null,
+            /* @__PURE__ */ jsx("div", { className: "table-wrap", children: /* @__PURE__ */ jsxs("table", { className: "data-table", children: [
+              /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+                columns.map((column) => {
+                  const sortable = column.sortable !== false;
+                  const active = sort?.key === column.key ? sort.direction : null;
+                  return /* @__PURE__ */ jsx(
+                    "th",
+                    {
+                      "aria-sort": active === "asc" ? "ascending" : active === "desc" ? "descending" : "none",
+                      children: sortable ? /* @__PURE__ */ jsxs(
+                        "button",
+                        {
+                          type: "button",
+                          className: active ? `sort-header active ${active}` : "sort-header",
+                          onClick: () => toggleSort(column),
+                          children: [
+                            /* @__PURE__ */ jsx("span", { children: column.header }),
+                            /* @__PURE__ */ jsx("span", { className: "sort-indicator", "aria-hidden": "true", children: active === "asc" ? "\u25B2" : active === "desc" ? "\u25BC" : "\u2195" })
+                          ]
+                        }
+                      ) : column.header
+                    },
+                    column.key
+                  );
+                }),
+                /* @__PURE__ */ jsx("th", { className: "actions-col", children: "Actions" })
+              ] }) }),
+              /* @__PURE__ */ jsx("tbody", { children: pageItems.length === 0 ? /* @__PURE__ */ jsx("tr", { children: /* @__PURE__ */ jsx("td", { colSpan: columns.length + 1, children: /* @__PURE__ */ jsx("p", { className: "hint table-empty", children: items.length === 0 ? empty : "No records match the current filters." }) }) }) : pageItems.map((item) => {
+                const key = rowKey(item);
+                const updateAllowed = canUpdate ? canUpdate(item) : Boolean(onUpdate);
+                const deleteAllowed = canDelete ? canDelete(item) : Boolean(onDelete);
+                const selected = previewEnabled && previewKey === key;
+                return /* @__PURE__ */ jsxs(
+                  "tr",
+                  {
+                    className: selected ? "data-row selected" : "data-row",
+                    onMouseEnter: (event) => {
+                      if (!previewEnabled) {
+                        showTooltip(item, event);
+                      }
+                      focusRecord(item);
+                    },
+                    onMouseMove: (event) => {
+                      if (!previewEnabled) {
+                        showTooltip(item, event);
+                      }
+                    },
+                    onMouseLeave: () => setTooltip(null),
+                    onClick: () => focusRecord(item),
+                    children: [
+                      columns.map((column) => /* @__PURE__ */ jsx("td", { children: cellText(column, item) }, column.key)),
+                      /* @__PURE__ */ jsx("td", { className: "actions-col", onClick: (event) => event.stopPropagation(), children: /* @__PURE__ */ jsxs("div", { className: "row-actions", children: [
+                        onView ? /* @__PURE__ */ jsx("button", { type: "button", className: "ghost row-action", onClick: () => onView(item), children: "View" }) : null,
+                        onUpdate ? /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "ghost row-action",
+                            disabled: !updateAllowed,
+                            title: updateAllowed ? "Update" : "Update is not available",
+                            onClick: () => onUpdate(item),
+                            children: "Update"
+                          }
+                        ) : null,
+                        onDelete ? /* @__PURE__ */ jsx(
+                          "button",
+                          {
+                            type: "button",
+                            className: "ghost row-action danger",
+                            disabled: !deleteAllowed,
+                            title: deleteAllowed ? "Delete" : "Delete is not available",
+                            onClick: () => onDelete(item),
+                            children: "Delete"
+                          }
+                        ) : null
+                      ] }) })
+                    ]
+                  },
+                  key
+                );
+              }) })
+            ] }) }),
+            /* @__PURE__ */ jsx(
+              Pagination,
+              {
+                page: currentPage,
+                pageCount,
+                pageSize,
+                onPageChange: setPage,
+                onPageSizeChange: (value) => {
+                  setPageSize(value);
+                  setPage(1);
+                },
+                summary
+              }
+            )
+          ] }) }),
+          previewEnabled ? /* @__PURE__ */ jsxs("aside", { className: "preview-panel", "aria-label": "Record preview", children: [
+            /* @__PURE__ */ jsx("div", { className: "preview-panel-head", children: /* @__PURE__ */ jsxs("div", { children: [
+              /* @__PURE__ */ jsx("p", { className: "preview-kicker", children: "Preview" }),
+              /* @__PURE__ */ jsx("h3", { children: previewTitle ?? "No record selected" })
+            ] }) }),
+            /* @__PURE__ */ jsx("div", { className: "preview-panel-body", children: previewItem ? /* @__PURE__ */ jsx(DetailList, { lines: detailLines(previewItem) }) : /* @__PURE__ */ jsx("p", { className: "preview-empty", children: "Hover or click a row to preview its details here." }) })
+          ] }) : null,
+          /* @__PURE__ */ jsxs("aside", { className: sideOpen ? "side-rail open" : "side-rail", "aria-label": "Actions and filters", children: [
+            /* @__PURE__ */ jsxs(
+              "button",
+              {
+                type: "button",
+                className: "ghost side-rail-toggle",
+                "aria-expanded": sideOpen,
+                title: sideOpen ? "Collapse" : "Expand",
+                onClick: () => setSideOpen((open) => !open),
+                children: [
+                  /* @__PURE__ */ jsx(ChevronIcon, { open: sideOpen }),
+                  sideOpen ? /* @__PURE__ */ jsx("span", { children: "Collapse" }) : null
+                ]
+              }
+            ),
+            sideOpen ? /* @__PURE__ */ jsxs("div", { className: "side-rail-body", children: [
+              /* @__PURE__ */ jsxs("div", { className: "preview-check", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: previewEnabled,
+                    onChange: (event) => setPreviewEnabledValue(event.target.checked),
+                    "aria-label": "Preview"
+                  }
+                ),
+                /* @__PURE__ */ jsx(PreviewIcon, {}),
+                /* @__PURE__ */ jsx("span", { "aria-hidden": "true", children: "Preview" })
+              ] }),
+              showAdd ? /* @__PURE__ */ jsxs("button", { type: "button", className: "side-rail-add", onClick: onAdd, children: [
+                /* @__PURE__ */ jsx(PlusIcon, {}),
+                /* @__PURE__ */ jsx("span", { children: addLabel })
+              ] }) : null,
+              showFilters ? /* @__PURE__ */ jsxs("div", { className: "side-rail-filters", children: [
+                /* @__PURE__ */ jsxs("div", { className: "filter-panel-head", children: [
+                  /* @__PURE__ */ jsx("h3", { children: "Filters" }),
+                  /* @__PURE__ */ jsxs(
+                    "button",
+                    {
+                      type: "button",
+                      className: "ghost filter-clear",
+                      title: "Reset filters",
+                      "aria-label": "Reset filters",
+                      disabled: activeFilterCount === 0,
+                      onClick: clearFilters,
+                      children: [
+                        /* @__PURE__ */ jsx(ResetIcon, {}),
+                        /* @__PURE__ */ jsx("span", { children: "Reset" })
+                      ]
+                    }
+                  )
+                ] }),
+                /* @__PURE__ */ jsx("div", { className: "filter-panel-stack", children: filterableColumns.map((column) => /* @__PURE__ */ jsxs("label", { children: [
+                  column.header,
+                  column.filterOptions ? /* @__PURE__ */ jsx(
+                    Select,
+                    {
+                      value: filters[column.key] ?? "",
+                      options: [{ value: "", label: column.filterPlaceholder ?? "All" }, ...column.filterOptions],
+                      onChange: (value) => changeFilter(column.key, value),
+                      placeholder: column.filterPlaceholder ?? "All"
+                    }
+                  ) : /* @__PURE__ */ jsx(
+                    "input",
+                    {
+                      value: filters[column.key] ?? "",
+                      onChange: (event) => changeFilter(column.key, event.target.value),
+                      placeholder: `Filter ${column.header.toLowerCase()}`
+                    }
+                  )
+                ] }, column.key)) })
+              ] }) : null
+            ] }) : /* @__PURE__ */ jsxs("div", { className: "side-rail-icons", children: [
+              /* @__PURE__ */ jsxs("label", { className: "side-rail-icon preview-check-icon", title: "Preview", children: [
+                /* @__PURE__ */ jsx(
+                  "input",
+                  {
+                    type: "checkbox",
+                    checked: previewEnabled,
+                    onChange: (event) => setPreviewEnabledValue(event.target.checked),
+                    "aria-label": "Preview"
+                  }
+                ),
+                /* @__PURE__ */ jsx(PreviewIcon, {})
+              ] }),
+              showAdd ? /* @__PURE__ */ jsx("button", { type: "button", className: "ghost side-rail-icon", title: addLabel, "aria-label": addLabel, onClick: onAdd, children: /* @__PURE__ */ jsx(PlusIcon, {}) }) : null,
+              showFilters ? /* @__PURE__ */ jsxs(
+                "button",
+                {
+                  type: "button",
+                  className: "ghost side-rail-icon",
+                  title: "Show filters",
+                  "aria-label": "Show filters",
+                  onClick: () => setSideOpen(true),
+                  children: [
+                    /* @__PURE__ */ jsx(FilterIcon, {}),
+                    activeFilterCount > 0 ? /* @__PURE__ */ jsx("span", { className: "filter-badge", children: activeFilterCount }) : null
+                  ]
+                }
+              ) : null,
+              showFilters ? /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "ghost side-rail-icon",
+                  title: "Reset filters",
+                  "aria-label": "Reset filters",
+                  disabled: activeFilterCount === 0,
+                  onClick: clearFilters,
+                  children: /* @__PURE__ */ jsx(ResetIcon, {})
+                }
+              ) : null
+            ] })
+          ] })
+        ]
+      }
+    ),
+    form,
+    isClient && tooltip && !previewEnabled ? createPortal(
+      /* @__PURE__ */ jsxs("div", { className: "record-tooltip", style: { left: tooltip.x, top: tooltip.y }, role: "tooltip", children: [
+        /* @__PURE__ */ jsx("p", { className: "record-tooltip-title", children: title }),
+        /* @__PURE__ */ jsx(DetailList, { lines: tooltip.lines })
+      ] }),
+      document.body
+    ) : null
+  ] });
+}
+var RecordTable = RecordWorkspace;
+
+export { AppSelect, AppShell, Button, DateField, Dialog, FormActions, FormDialog, Pagination, RecordTable, RecordWorkspace, Select, SideNav, Snackbar, StatusMessage, Topbar, aksuiThemeVersion, aksuiTokens };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map