@jerco/ui 0.2.0

package/dist/index.js

@@ -0,0 +1,1693 @@
+// src/provider.tsx
+import { createContext, useContext, useEffect, useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+var DesignSystemContext = createContext({
+  theme: "base-light",
+  density: "comfortable"
+});
+function DesignSystemProvider({
+  children,
+  theme = "base-light",
+  density = "comfortable",
+  target
+}) {
+  useEffect(() => {
+    const element = target ?? document.documentElement;
+    const previousTheme = element.dataset.theme;
+    const previousDensity = element.dataset.density;
+    element.setAttribute("data-theme", theme);
+    element.setAttribute("data-density", density);
+    return () => {
+      if (previousTheme === void 0) element.removeAttribute("data-theme");
+      else element.setAttribute("data-theme", previousTheme);
+      if (previousDensity === void 0) element.removeAttribute("data-density");
+      else element.setAttribute("data-density", previousDensity);
+    };
+  }, [density, target, theme]);
+  const value = useMemo(() => ({ theme, density }), [density, theme]);
+  return /* @__PURE__ */ jsx(DesignSystemContext.Provider, { value, children });
+}
+function useDesignSystem() {
+  return useContext(DesignSystemContext);
+}
+
+// src/adapters/data-table-state.ts
+function parameterName(prefix, name) {
+  return prefix ? `${prefix}.${name}` : name;
+}
+function positiveInteger(value, fallback) {
+  const parsed = Number.parseInt(value ?? "", 10);
+  return Number.isFinite(parsed) && parsed > 0 ? parsed : fallback;
+}
+function parseDataTableUrlState(search, fallback, options = {}) {
+  const params = new URLSearchParams(search.startsWith("?") ? search.slice(1) : search);
+  const query = params.get(parameterName(options.prefix, "q")) ?? fallback.query;
+  const pageSize = positiveInteger(
+    params.get(parameterName(options.prefix, "pageSize")),
+    fallback.pagination.pageSize
+  );
+  const page = positiveInteger(
+    params.get(parameterName(options.prefix, "page")),
+    fallback.pagination.pageIndex + 1
+  );
+  const sortingValue = params.get(parameterName(options.prefix, "sort"));
+  const sorting = sortingValue ? sortingValue.split(",").map((entry) => entry.trim()).filter(Boolean).map((entry) => {
+    const separator = entry.lastIndexOf(":");
+    const id = separator >= 0 ? entry.slice(0, separator) : entry;
+    const direction = separator >= 0 ? entry.slice(separator + 1) : "asc";
+    return { id, desc: direction === "desc" };
+  }).filter((entry) => entry.id) : fallback.sorting;
+  const filterPrefix = parameterName(options.prefix, "filter.");
+  const filters = { ...fallback.filters };
+  for (const [key, value] of params) {
+    if (key.startsWith(filterPrefix)) filters[key.slice(filterPrefix.length)] = value;
+  }
+  return {
+    query,
+    sorting,
+    filters,
+    pagination: { pageIndex: page - 1, pageSize }
+  };
+}
+function serializeDataTableUrlState(state, currentSearch = "", options = {}) {
+  const params = new URLSearchParams(
+    currentSearch.startsWith("?") ? currentSearch.slice(1) : currentSearch
+  );
+  const names = {
+    query: parameterName(options.prefix, "q"),
+    page: parameterName(options.prefix, "page"),
+    pageSize: parameterName(options.prefix, "pageSize"),
+    sorting: parameterName(options.prefix, "sort"),
+    filter: parameterName(options.prefix, "filter.")
+  };
+  for (const key of [...params.keys()]) {
+    if (key === names.query || key === names.page || key === names.pageSize || key === names.sorting || key.startsWith(names.filter)) {
+      params.delete(key);
+    }
+  }
+  if (state.query) params.set(names.query, state.query);
+  params.set(names.page, String(state.pagination.pageIndex + 1));
+  params.set(names.pageSize, String(state.pagination.pageSize));
+  if (state.sorting.length) {
+    params.set(
+      names.sorting,
+      state.sorting.map((entry) => `${entry.id}:${entry.desc ? "desc" : "asc"}`).join(",")
+    );
+  }
+  for (const [id, value] of Object.entries(state.filters).sort(
+    ([left], [right]) => left.localeCompare(right)
+  )) {
+    if (value && value !== "all") params.set(`${names.filter}${id}`, value);
+  }
+  const serialized = params.toString();
+  return serialized ? `?${serialized}` : "";
+}
+function createDataTableUrlStateAdapter(port, options = {}) {
+  return {
+    read: (fallback) => parseDataTableUrlState(port.getSearch(), fallback, options),
+    write: (state, mode = "push") => port.writeSearch(serializeDataTableUrlState(state, port.getSearch(), options), mode),
+    subscribe: (listener, fallback) => port.subscribe(() => listener(parseDataTableUrlState(port.getSearch(), fallback, options)))
+  };
+}
+function createBrowserDataTableUrlStateAdapter(options = {}) {
+  if (typeof window === "undefined") {
+    throw new Error(
+      "The browser URL adapter requires a window. Use createDataTableUrlStateAdapter for SSR or tests."
+    );
+  }
+  return createDataTableUrlStateAdapter(
+    {
+      getSearch: () => window.location.search,
+      writeSearch: (search, mode) => {
+        const url = `${window.location.pathname}${search}${window.location.hash}`;
+        window.history[mode === "replace" ? "replaceState" : "pushState"]({}, "", url);
+      },
+      subscribe: (listener) => {
+        window.addEventListener("popstate", listener);
+        return () => window.removeEventListener("popstate", listener);
+      }
+    },
+    options
+  );
+}
+function createDataTableRequestManager(loader) {
+  let sequence = 0;
+  let active;
+  return {
+    async run(state) {
+      active?.controller.abort();
+      const requestId = ++sequence;
+      const controller = new AbortController();
+      active = { requestId, controller };
+      try {
+        const value = await loader(state, { requestId, signal: controller.signal });
+        if (controller.signal.aborted) return { status: "aborted", requestId };
+        if (active?.requestId !== requestId) return { status: "stale", requestId };
+        active = void 0;
+        return { status: "applied", requestId, value };
+      } catch (error) {
+        if (controller.signal.aborted || error instanceof DOMException && error.name === "AbortError") {
+          return { status: "aborted", requestId };
+        }
+        if (active?.requestId !== requestId) return { status: "stale", requestId };
+        active = void 0;
+        throw error;
+      }
+    },
+    cancel() {
+      active?.controller.abort();
+      active = void 0;
+    },
+    getActiveRequestId: () => active?.requestId
+  };
+}
+
+// src/adapters/navigation-state.ts
+function createBrowserBooleanStateAdapter(key, options = {}) {
+  const storage = options.storage ?? (typeof window !== "undefined" ? window.localStorage : void 0);
+  const eventSource = options.eventSource ?? (typeof window !== "undefined" ? {
+    addEventListener: (type, listener) => window.addEventListener(type, listener),
+    removeEventListener: (type, listener) => window.removeEventListener(type, listener)
+  } : void 0);
+  if (!storage) throw new Error("A storage implementation is required outside the browser.");
+  return {
+    read: () => {
+      const value = storage.getItem(key);
+      return value === null ? void 0 : value === "true";
+    },
+    write: (value) => storage.setItem(key, String(value)),
+    ...eventSource ? {
+      subscribe: (listener) => {
+        const onStorage = (event) => {
+          if (event.key !== key) return;
+          listener(event.newValue === null ? void 0 : event.newValue === "true");
+        };
+        eventSource.addEventListener("storage", onStorage);
+        return () => eventSource.removeEventListener("storage", onStorage);
+      }
+    } : {}
+  };
+}
+function normalizePath(path) {
+  const withoutQuery = path.split(/[?#]/, 1)[0] ?? "/";
+  if (withoutQuery === "/") return "/";
+  return withoutQuery.replace(/\/+$/, "");
+}
+function matchNavigationPath(currentPath, targetPath, end = false) {
+  if (!targetPath.startsWith("/")) return false;
+  const current = normalizePath(currentPath);
+  const target = normalizePath(targetPath);
+  if (target === "/" || end) return current === target;
+  return current === target || current.startsWith(`${target}/`);
+}
+
+// src/components/badge.tsx
+import { cn } from "@jerco/utils";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var badgeVariants = cva("j-badge", {
+  variants: {
+    variant: {
+      neutral: "j-badge--neutral",
+      success: "j-badge--success",
+      warning: "j-badge--warning",
+      danger: "j-badge--danger",
+      info: "j-badge--info"
+    }
+  },
+  defaultVariants: { variant: "neutral" }
+});
+function Badge({ className, variant, ...props }) {
+  return /* @__PURE__ */ jsx2("span", { className: cn(badgeVariants({ variant }), className), ...props });
+}
+
+// src/components/alert-dialog.tsx
+import { cn as cn2 } from "@jerco/utils";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { forwardRef } from "react";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogTrigger = AlertDialogPrimitive.Trigger;
+var AlertDialogCancel = AlertDialogPrimitive.Cancel;
+var AlertDialogAction = AlertDialogPrimitive.Action;
+var AlertDialogContent = forwardRef(function AlertDialogContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsxs(AlertDialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx3(AlertDialogPrimitive.Overlay, { className: "j-dialog-overlay" }),
+    /* @__PURE__ */ jsx3(
+      AlertDialogPrimitive.Content,
+      {
+        ref,
+        className: cn2("j-dialog-content", className),
+        ...props
+      }
+    )
+  ] });
+});
+var AlertDialogTitle = forwardRef(function AlertDialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(AlertDialogPrimitive.Title, { ref, className: cn2("j-dialog-title", className), ...props });
+});
+var AlertDialogDescription = forwardRef(function AlertDialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx3(
+    AlertDialogPrimitive.Description,
+    {
+      ref,
+      className: cn2("j-dialog-description", className),
+      ...props
+    }
+  );
+});
+function AlertDialogHeader({ children }) {
+  return /* @__PURE__ */ jsx3("div", { className: "j-dialog-header", children });
+}
+function AlertDialogFooter({ children }) {
+  return /* @__PURE__ */ jsx3("div", { className: "j-dialog-footer", children });
+}
+
+// src/components/brand-logo.tsx
+import { cn as cn3 } from "@jerco/utils";
+import { jsx as jsx4 } from "react/jsx-runtime";
+function BrandLogo({ asset, name = "Product", className }) {
+  if (asset) return /* @__PURE__ */ jsx4("span", { className: cn3("j-brand-logo", className), children: asset });
+  return /* @__PURE__ */ jsx4(
+    "span",
+    {
+      className: cn3("j-brand-logo j-brand-logo--placeholder", className),
+      "aria-label": `${name} placeholder logo`,
+      children: name.slice(0, 1).toUpperCase()
+    }
+  );
+}
+
+// src/components/button.tsx
+import { LoaderCircle } from "@jerco/icons";
+import { cn as cn4 } from "@jerco/utils";
+import { Slot } from "@radix-ui/react-slot";
+import { cva as cva2 } from "class-variance-authority";
+import { forwardRef as forwardRef2 } from "react";
+import { jsx as jsx5, jsxs as jsxs2 } from "react/jsx-runtime";
+var buttonVariants = cva2("j-button", {
+  variants: {
+    variant: {
+      primary: "j-button--primary",
+      secondary: "j-button--secondary",
+      outline: "j-button--outline",
+      ghost: "j-button--ghost",
+      destructive: "j-button--destructive"
+    },
+    size: {
+      sm: "j-button--sm",
+      md: "j-button--md",
+      lg: "j-button--lg",
+      icon: "j-button--icon"
+    }
+  },
+  defaultVariants: { variant: "primary", size: "md" }
+});
+var Button = forwardRef2(function Button2({ className, variant, size, asChild = false, loading = false, disabled, children, ...props }, ref) {
+  const Component = asChild ? Slot : "button";
+  return /* @__PURE__ */ jsxs2(
+    Component,
+    {
+      ref,
+      className: cn4(buttonVariants({ variant, size }), className),
+      disabled: asChild ? void 0 : disabled || loading,
+      "aria-disabled": disabled || loading || void 0,
+      "aria-busy": loading || void 0,
+      ...props,
+      children: [
+        loading ? /* @__PURE__ */ jsx5(LoaderCircle, { className: "j-spinner j-icon", "aria-hidden": "true" }) : null,
+        children
+      ]
+    }
+  );
+});
+var IconButton = forwardRef2(function IconButton2({ label, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx5(Button, { ref, size: "icon", "aria-label": label, ...props, children });
+});
+
+// src/components/card.tsx
+import { cn as cn5 } from "@jerco/utils";
+import { jsx as jsx6 } from "react/jsx-runtime";
+function Card({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { className: cn5("j-card", className), ...props });
+}
+function CardHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { className: cn5("j-card-header", className), ...props });
+}
+function CardTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("h3", { className: cn5("j-card-title", className), ...props });
+}
+function CardDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("p", { className: cn5("j-card-description", className), ...props });
+}
+function CardContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { className: cn5("j-card-content", className), ...props });
+}
+function CardFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx6("div", { className: cn5("j-card-footer", className), ...props });
+}
+
+// src/components/checkbox.tsx
+import { Check } from "@jerco/icons";
+import { cn as cn6 } from "@jerco/utils";
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { forwardRef as forwardRef3 } from "react";
+import { jsx as jsx7, jsxs as jsxs3 } from "react/jsx-runtime";
+var Checkbox = forwardRef3(function Checkbox2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx7(CheckboxPrimitive.Root, { ref, className: cn6("j-checkbox", className), ...props, children: /* @__PURE__ */ jsx7(CheckboxPrimitive.Indicator, { className: "j-checkbox-indicator", children: /* @__PURE__ */ jsx7(Check, { "aria-hidden": "true" }) }) });
+});
+function CheckboxField({ label, description, id, ...props }) {
+  return /* @__PURE__ */ jsxs3("div", { className: "j-choice-field", children: [
+    /* @__PURE__ */ jsx7(Checkbox, { id, ...props }),
+    /* @__PURE__ */ jsxs3("div", { children: [
+      /* @__PURE__ */ jsx7("label", { className: "j-choice-label", htmlFor: id, children: label }),
+      description ? /* @__PURE__ */ jsx7("div", { className: "j-choice-description", children: description }) : null
+    ] })
+  ] });
+}
+
+// src/components/data-table.tsx
+import { ChevronDown as ChevronDown2, ChevronLeft, ChevronRight as ChevronRight2, ChevronUp, Columns3, Search } from "@jerco/icons";
+import { cn as cn11 } from "@jerco/utils";
+import {
+  flexRender,
+  getCoreRowModel,
+  getPaginationRowModel,
+  getSortedRowModel,
+  useReactTable
+} from "@tanstack/react-table";
+import { useVirtualizer } from "@tanstack/react-virtual";
+import { useMemo as useMemo2, useRef, useState } from "react";
+
+// src/components/dropdown-menu.tsx
+import { Check as Check2, ChevronRight } from "@jerco/icons";
+import { cn as cn7 } from "@jerco/utils";
+import * as DropdownPrimitive from "@radix-ui/react-dropdown-menu";
+import { forwardRef as forwardRef4 } from "react";
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var DropdownMenu = DropdownPrimitive.Root;
+var DropdownMenuTrigger = DropdownPrimitive.Trigger;
+var DropdownMenuGroup = DropdownPrimitive.Group;
+var DropdownMenuPortal = DropdownPrimitive.Portal;
+var DropdownMenuSub = DropdownPrimitive.Sub;
+var DropdownMenuRadioGroup = DropdownPrimitive.RadioGroup;
+var DropdownMenuContent = forwardRef4(function DropdownMenuContent2({ className, sideOffset = 6, ...props }, ref) {
+  return /* @__PURE__ */ jsx8(DropdownPrimitive.Portal, { children: /* @__PURE__ */ jsx8(
+    DropdownPrimitive.Content,
+    {
+      ref,
+      sideOffset,
+      className: cn7("j-dropdown-content", className),
+      ...props
+    }
+  ) });
+});
+var DropdownMenuItem = forwardRef4(function DropdownMenuItem2({ className, inset, ...props }, ref) {
+  return /* @__PURE__ */ jsx8(
+    DropdownPrimitive.Item,
+    {
+      ref,
+      className: cn7("j-dropdown-item", inset && "j-dropdown-item--inset", className),
+      ...props
+    }
+  );
+});
+var DropdownMenuCheckboxItem = forwardRef4(function DropdownMenuCheckboxItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs4(
+    DropdownPrimitive.CheckboxItem,
+    {
+      ref,
+      className: cn7("j-dropdown-item j-dropdown-check-item", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx8("span", { className: "j-dropdown-indicator", children: /* @__PURE__ */ jsx8(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(Check2, { "aria-hidden": "true" }) }) }),
+        children
+      ]
+    }
+  );
+});
+var DropdownMenuRadioItem = forwardRef4(function DropdownMenuRadioItem2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs4(
+    DropdownPrimitive.RadioItem,
+    {
+      ref,
+      className: cn7("j-dropdown-item j-dropdown-check-item", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx8("span", { className: "j-dropdown-indicator", children: /* @__PURE__ */ jsx8(DropdownPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8("span", { className: "j-dropdown-dot" }) }) }),
+        children
+      ]
+    }
+  );
+});
+var DropdownMenuLabel = forwardRef4(function DropdownMenuLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx8(DropdownPrimitive.Label, { ref, className: cn7("j-dropdown-label", className), ...props });
+});
+var DropdownMenuSeparator = forwardRef4(function DropdownMenuSeparator2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx8(
+    DropdownPrimitive.Separator,
+    {
+      ref,
+      className: cn7("j-dropdown-separator", className),
+      ...props
+    }
+  );
+});
+var DropdownMenuSubTrigger = forwardRef4(function DropdownMenuSubTrigger2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs4(DropdownPrimitive.SubTrigger, { ref, className: cn7("j-dropdown-item", className), ...props, children: [
+    children,
+    /* @__PURE__ */ jsx8(ChevronRight, { className: "j-dropdown-chevron", "aria-hidden": "true" })
+  ] });
+});
+var DropdownMenuSubContent = forwardRef4(function DropdownMenuSubContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx8(
+    DropdownPrimitive.SubContent,
+    {
+      ref,
+      className: cn7("j-dropdown-content", className),
+      ...props
+    }
+  );
+});
+
+// src/components/input.tsx
+import { cn as cn8 } from "@jerco/utils";
+import {
+  forwardRef as forwardRef5
+} from "react";
+import { jsx as jsx9 } from "react/jsx-runtime";
+var Input = forwardRef5(function Input2({ className, invalid, ...props }, ref) {
+  return /* @__PURE__ */ jsx9(
+    "input",
+    {
+      ref,
+      className: cn8("j-input", className),
+      "aria-invalid": invalid || void 0,
+      ...props
+    }
+  );
+});
+var Textarea = forwardRef5(function Textarea2({ className, invalid, ...props }, ref) {
+  return /* @__PURE__ */ jsx9(
+    "textarea",
+    {
+      ref,
+      className: cn8("j-input j-textarea", className),
+      "aria-invalid": invalid || void 0,
+      ...props
+    }
+  );
+});
+var Label2 = forwardRef5(
+  function Label3({ className, ...props }, ref) {
+    return /* @__PURE__ */ jsx9("label", { ref, className: cn8("j-label", className), ...props });
+  }
+);
+function Separator2({ className }) {
+  return /* @__PURE__ */ jsx9("div", { className: cn8("j-separator", className), role: "separator" });
+}
+
+// src/components/select.tsx
+import { Check as Check3, ChevronDown } from "@jerco/icons";
+import { cn as cn9 } from "@jerco/utils";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { forwardRef as forwardRef6 } from "react";
+import { jsx as jsx10, jsxs as jsxs5 } from "react/jsx-runtime";
+function Select({
+  options,
+  label,
+  placeholder = "Select an option",
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs5(SelectPrimitive.Root, { ...props, children: [
+    /* @__PURE__ */ jsxs5(SelectPrimitive.Trigger, { className: "j-select", "aria-label": label, children: [
+      /* @__PURE__ */ jsx10(SelectPrimitive.Value, { placeholder }),
+      /* @__PURE__ */ jsx10(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx10(ChevronDown, { className: "j-icon", "aria-hidden": "true" }) })
+    ] }),
+    /* @__PURE__ */ jsx10(SelectPrimitive.Portal, { children: /* @__PURE__ */ jsx10(SelectPrimitive.Content, { className: "j-select-content", position: "popper", sideOffset: 6, children: /* @__PURE__ */ jsx10(SelectPrimitive.Viewport, { children: options.map((option) => /* @__PURE__ */ jsxs5(
+      SelectPrimitive.Item,
+      {
+        className: "j-select-item",
+        value: option.value,
+        ...option.disabled === void 0 ? {} : { disabled: option.disabled },
+        children: [
+          /* @__PURE__ */ jsx10(SelectPrimitive.ItemText, { children: option.label }),
+          /* @__PURE__ */ jsx10(SelectPrimitive.ItemIndicator, { className: "j-select-check", children: /* @__PURE__ */ jsx10(Check3, { className: "j-icon", "aria-hidden": "true" }) })
+        ]
+      },
+      option.value
+    )) }) }) })
+  ] });
+}
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var SelectLabel = forwardRef6(function SelectLabel2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx10(SelectPrimitive.Label, { ref, className: cn9("j-select-label", className), ...props });
+});
+function NativeSelect({
+  label,
+  children,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx10("select", { className: cn9("j-select j-native-select", className), "aria-label": label, ...props, children });
+}
+
+// src/components/skeleton.tsx
+import { cn as cn10 } from "@jerco/utils";
+import { jsx as jsx11 } from "react/jsx-runtime";
+function Skeleton({ className, ...props }) {
+  return /* @__PURE__ */ jsx11("div", { className: cn10("j-skeleton", className), "aria-hidden": "true", ...props });
+}
+
+// src/components/data-table.tsx
+import { Fragment, jsx as jsx12, jsxs as jsxs6 } from "react/jsx-runtime";
+function resolveUpdate(updater, current) {
+  return typeof updater === "function" ? updater(current) : updater;
+}
+function DataTable({
+  data,
+  columns,
+  getRowId,
+  getSearchText,
+  searchPlaceholder = "Search",
+  filters = [],
+  pageSize = 10,
+  paginate = true,
+  server,
+  virtualization,
+  loading = false,
+  emptyState = "No results found.",
+  bulkActions,
+  className
+}) {
+  const [localQuery, setLocalQuery] = useState("");
+  const [localFilterValues, setLocalFilterValues] = useState({});
+  const [localSorting, setLocalSorting] = useState([]);
+  const [localPagination, setLocalPagination] = useState({
+    pageIndex: 0,
+    pageSize
+  });
+  const [columnVisibility, setColumnVisibility] = useState({});
+  const [rowSelection, setRowSelection] = useState({});
+  const scrollRef = useRef(null);
+  const query = server?.state.query ?? localQuery;
+  const filterValues = server?.state.filters ?? localFilterValues;
+  const sorting = server?.state.sorting ?? localSorting;
+  const pagination = server?.state.pagination ?? localPagination;
+  const updateServerState = (next) => {
+    if (!server) return;
+    server.onStateChange({ ...server.state, ...next });
+  };
+  const updatePagination = (updater) => {
+    const next = resolveUpdate(updater, pagination);
+    if (server) updateServerState({ pagination: next });
+    else setLocalPagination(next);
+  };
+  const updateSorting = (updater) => {
+    const next = resolveUpdate(updater, sorting);
+    const nextPagination = { ...pagination, pageIndex: 0 };
+    if (server) updateServerState({ sorting: next, pagination: nextPagination });
+    else {
+      setLocalSorting(next);
+      setLocalPagination(nextPagination);
+    }
+  };
+  const updateQuery = (next) => {
+    const nextPagination = { ...pagination, pageIndex: 0 };
+    if (server) updateServerState({ query: next, pagination: nextPagination });
+    else {
+      setLocalQuery(next);
+      setLocalPagination(nextPagination);
+    }
+  };
+  const updateFilter = (id, value) => {
+    const nextFilters = { ...filterValues, [id]: value };
+    const nextPagination = { ...pagination, pageIndex: 0 };
+    if (server) updateServerState({ filters: nextFilters, pagination: nextPagination });
+    else {
+      setLocalFilterValues(nextFilters);
+      setLocalPagination(nextPagination);
+    }
+  };
+  const filteredData = useMemo2(() => {
+    if (server) return data;
+    const normalized = query.trim().toLocaleLowerCase();
+    return data.filter((row) => {
+      const matchesQuery = !normalized || (getSearchText?.(row) ?? Object.values(row).join(" ")).toLocaleLowerCase().includes(normalized);
+      const matchesFilters = filters.every((filter) => {
+        const value = filterValues[filter.id];
+        return !value || value === "all" || filter.getValue(row) === value;
+      });
+      return matchesQuery && matchesFilters;
+    });
+  }, [data, filterValues, filters, getSearchText, query, server]);
+  const selectionColumn = useMemo2(
+    () => ({
+      id: "select",
+      size: 44,
+      enableSorting: false,
+      enableHiding: false,
+      header: ({ table: table2 }) => /* @__PURE__ */ jsx12(
+        Checkbox,
+        {
+          "aria-label": "Select all visible rows",
+          checked: table2.getIsAllPageRowsSelected() || (table2.getIsSomePageRowsSelected() ? "indeterminate" : false),
+          onCheckedChange: (checked) => table2.toggleAllPageRowsSelected(Boolean(checked))
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ jsx12(
+        Checkbox,
+        {
+          "aria-label": `Select row ${row.index + 1}`,
+          checked: row.getIsSelected(),
+          onCheckedChange: (checked) => row.toggleSelected(Boolean(checked))
+        }
+      )
+    }),
+    []
+  );
+  const table = useReactTable({
+    data: filteredData,
+    columns: [selectionColumn, ...columns],
+    ...getRowId ? { getRowId } : {},
+    state: { sorting, columnVisibility, rowSelection, pagination },
+    onSortingChange: updateSorting,
+    onColumnVisibilityChange: setColumnVisibility,
+    onRowSelectionChange: setRowSelection,
+    onPaginationChange: updatePagination,
+    getCoreRowModel: getCoreRowModel(),
+    ...server ? {
+      manualPagination: true,
+      manualSorting: true,
+      manualFiltering: true,
+      pageCount: server.pageCount,
+      rowCount: server.rowCount
+    } : {
+      getSortedRowModel: getSortedRowModel(),
+      ...paginate ? { getPaginationRowModel: getPaginationRowModel() } : {}
+    },
+    columnResizeMode: "onChange",
+    enableRowSelection: true
+  });
+  const selectedRows = table.getSelectedRowModel().rows;
+  const visibleColumnCount = table.getVisibleLeafColumns().length;
+  const rows = table.getRowModel().rows;
+  const rowVirtualizer = useVirtualizer({
+    count: virtualization ? rows.length : 0,
+    getScrollElement: () => scrollRef.current,
+    estimateSize: () => virtualization?.estimateRowHeight ?? 48,
+    overscan: virtualization?.overscan ?? 6
+  });
+  const virtualRows = virtualization ? rowVirtualizer.getVirtualItems() : [];
+  const paddingTop = virtualRows.length ? virtualRows[0].start : 0;
+  const paddingBottom = virtualRows.length ? rowVirtualizer.getTotalSize() - virtualRows[virtualRows.length - 1].end : 0;
+  const renderRow = (row) => /* @__PURE__ */ jsx12("tr", { "data-selected": row.getIsSelected() || void 0, children: row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx12("td", { children: flexRender(cell.column.columnDef.cell, cell.getContext()) }, cell.id)) }, row.id);
+  return /* @__PURE__ */ jsxs6("section", { className: cn11("j-data-table", className), "aria-busy": loading || void 0, children: [
+    /* @__PURE__ */ jsxs6("div", { className: "j-data-table-toolbar", children: [
+      /* @__PURE__ */ jsxs6("div", { className: "j-data-table-search", children: [
+        /* @__PURE__ */ jsx12(Search, { "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx12(
+          Input,
+          {
+            "aria-label": searchPlaceholder,
+            placeholder: searchPlaceholder,
+            value: query,
+            onChange: (event) => updateQuery(event.target.value)
+          }
+        )
+      ] }),
+      filters.map((filter) => /* @__PURE__ */ jsxs6(
+        NativeSelect,
+        {
+          label: filter.label,
+          value: filterValues[filter.id] ?? "all",
+          onChange: (event) => updateFilter(filter.id, event.target.value),
+          children: [
+            /* @__PURE__ */ jsxs6("option", { value: "all", children: [
+              "All ",
+              filter.label.toLocaleLowerCase()
+            ] }),
+            filter.options.map((option) => /* @__PURE__ */ jsx12("option", { value: option.value, children: option.label }, option.value))
+          ]
+        },
+        filter.id
+      )),
+      /* @__PURE__ */ jsxs6(DropdownMenu, { children: [
+        /* @__PURE__ */ jsx12(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsxs6(Button, { variant: "outline", children: [
+          /* @__PURE__ */ jsx12(Columns3, { "aria-hidden": "true" }),
+          " Columns"
+        ] }) }),
+        /* @__PURE__ */ jsxs6(DropdownMenuContent, { align: "end", children: [
+          /* @__PURE__ */ jsx12(DropdownMenuLabel, { children: "Visible columns" }),
+          /* @__PURE__ */ jsx12(DropdownMenuSeparator, {}),
+          table.getAllLeafColumns().filter((column) => column.getCanHide()).map((column) => /* @__PURE__ */ jsx12(
+            DropdownMenuCheckboxItem,
+            {
+              checked: column.getIsVisible(),
+              onCheckedChange: (value) => column.toggleVisibility(Boolean(value)),
+              children: column.id
+            },
+            column.id
+          ))
+        ] })
+      ] })
+    ] }),
+    selectedRows.length > 0 ? /* @__PURE__ */ jsxs6("div", { className: "j-data-table-selection", role: "status", children: [
+      /* @__PURE__ */ jsxs6("span", { children: [
+        selectedRows.length,
+        " selected"
+      ] }),
+      bulkActions?.(selectedRows)
+    ] }) : null,
+    /* @__PURE__ */ jsx12(
+      "div",
+      {
+        ref: scrollRef,
+        className: cn11("j-data-table-scroll", virtualization && "j-data-table-scroll--virtual"),
+        style: virtualization ? { maxHeight: virtualization.height ?? 480 } : void 0,
+        children: /* @__PURE__ */ jsxs6("table", { "aria-rowcount": server?.rowCount, children: [
+          /* @__PURE__ */ jsx12("thead", { children: table.getHeaderGroups().map((headerGroup) => /* @__PURE__ */ jsx12("tr", { children: headerGroup.headers.map((header) => {
+            const sorted = header.column.getIsSorted();
+            return /* @__PURE__ */ jsxs6(
+              "th",
+              {
+                style: { width: header.getSize() },
+                scope: "col",
+                "aria-sort": sorted === "asc" ? "ascending" : sorted === "desc" ? "descending" : void 0,
+                children: [
+                  header.isPlaceholder ? null : header.column.getCanSort() ? /* @__PURE__ */ jsxs6(
+                    "button",
+                    {
+                      className: "j-data-table-sort",
+                      onClick: header.column.getToggleSortingHandler(),
+                      children: [
+                        flexRender(header.column.columnDef.header, header.getContext()),
+                        sorted === "asc" ? /* @__PURE__ */ jsx12(ChevronUp, { "aria-hidden": "true" }) : sorted === "desc" ? /* @__PURE__ */ jsx12(ChevronDown2, { "aria-hidden": "true" }) : null
+                      ]
+                    }
+                  ) : flexRender(header.column.columnDef.header, header.getContext()),
+                  header.column.getCanResize() ? /* @__PURE__ */ jsx12(
+                    "div",
+                    {
+                      className: "j-data-table-resizer",
+                      onMouseDown: header.getResizeHandler(),
+                      onTouchStart: header.getResizeHandler()
+                    }
+                  ) : null
+                ]
+              },
+              header.id
+            );
+          }) }, headerGroup.id)) }),
+          /* @__PURE__ */ jsx12("tbody", { children: loading ? Array.from({ length: Math.min(pageSize, 5) }, (_, index) => /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12("td", { colSpan: visibleColumnCount, children: /* @__PURE__ */ jsx12(Skeleton, { className: "j-data-table-skeleton" }) }) }, index)) : rows.length ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+            virtualization && paddingTop > 0 ? /* @__PURE__ */ jsx12("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx12("td", { colSpan: visibleColumnCount, style: { height: paddingTop, padding: 0 } }) }) : null,
+            virtualization ? virtualRows.map((virtualRow) => rows[virtualRow.index]).map(renderRow) : rows.map(renderRow),
+            virtualization && paddingBottom > 0 ? /* @__PURE__ */ jsx12("tr", { "aria-hidden": "true", children: /* @__PURE__ */ jsx12(
+              "td",
+              {
+                colSpan: visibleColumnCount,
+                style: { height: paddingBottom, padding: 0 }
+              }
+            ) }) : null
+          ] }) : /* @__PURE__ */ jsx12("tr", { children: /* @__PURE__ */ jsx12("td", { className: "j-data-table-empty", colSpan: visibleColumnCount, children: emptyState }) }) })
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsxs6("div", { className: "j-data-table-footer", children: [
+      /* @__PURE__ */ jsx12("span", { children: server ? `${data.length} of ${server.rowCount} rows` : `${filteredData.length} rows` }),
+      paginate || server ? /* @__PURE__ */ jsxs6(Fragment, { children: [
+        /* @__PURE__ */ jsxs6("span", { children: [
+          "Page ",
+          pagination.pageIndex + 1,
+          " of ",
+          Math.max(table.getPageCount(), 1)
+        ] }),
+        /* @__PURE__ */ jsxs6("div", { className: "j-data-table-pagination", children: [
+          /* @__PURE__ */ jsx12(
+            IconButton,
+            {
+              label: "Previous page",
+              variant: "outline",
+              disabled: !table.getCanPreviousPage(),
+              onClick: () => table.previousPage(),
+              children: /* @__PURE__ */ jsx12(ChevronLeft, { "aria-hidden": "true" })
+            }
+          ),
+          /* @__PURE__ */ jsx12(
+            IconButton,
+            {
+              label: "Next page",
+              variant: "outline",
+              disabled: !table.getCanNextPage(),
+              onClick: () => table.nextPage(),
+              children: /* @__PURE__ */ jsx12(ChevronRight2, { "aria-hidden": "true" })
+            }
+          )
+        ] })
+      ] }) : null
+    ] })
+  ] });
+}
+
+// src/components/device-card.tsx
+import { Router } from "@jerco/icons";
+import { cn as cn13 } from "@jerco/utils";
+
+// src/components/status-indicator.tsx
+import { AlertCircle, CheckCircle2, Circle, TriangleAlert, XCircle } from "@jerco/icons";
+import { cn as cn12 } from "@jerco/utils";
+import { jsx as jsx13, jsxs as jsxs7 } from "react/jsx-runtime";
+var statusMeta = {
+  online: { defaultLabel: "Online", icon: CheckCircle2 },
+  healthy: { defaultLabel: "Healthy", icon: CheckCircle2 },
+  degraded: { defaultLabel: "Degraded", icon: TriangleAlert },
+  warning: { defaultLabel: "Warning", icon: TriangleAlert },
+  offline: { defaultLabel: "Offline", icon: XCircle },
+  error: { defaultLabel: "Error", icon: AlertCircle },
+  unknown: { defaultLabel: "Unknown", icon: Circle }
+};
+function StatusIndicator({
+  status,
+  label,
+  showIcon = true,
+  className
+}) {
+  const meta = statusMeta[status];
+  const Icon2 = meta.icon;
+  const visibleLabel = label ?? meta.defaultLabel;
+  return /* @__PURE__ */ jsxs7(
+    "span",
+    {
+      className: cn12("j-status", `j-status--${status}`, className),
+      role: "status",
+      "aria-label": visibleLabel,
+      children: [
+        showIcon ? /* @__PURE__ */ jsx13(Icon2, { className: "j-status-icon", "aria-hidden": "true" }) : /* @__PURE__ */ jsx13("span", { className: "j-status-dot", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx13("span", { children: visibleLabel })
+      ]
+    }
+  );
+}
+
+// src/components/device-card.tsx
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+function DeviceCard({
+  name,
+  type,
+  status,
+  address,
+  latency,
+  description,
+  icon: Icon2 = Router,
+  actions,
+  loading = false,
+  className
+}) {
+  return /* @__PURE__ */ jsx14(Card, { className: cn13("j-device-card", className), "aria-busy": loading || void 0, children: loading ? /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsx14(Skeleton, { className: "j-device-card-icon" }),
+    /* @__PURE__ */ jsx14(Skeleton, { className: "j-device-card-line" }),
+    /* @__PURE__ */ jsx14(Skeleton, { className: "j-device-card-line j-device-card-line--short" }),
+    /* @__PURE__ */ jsxs8("span", { className: "j-sr-only", children: [
+      "Loading ",
+      name
+    ] })
+  ] }) : /* @__PURE__ */ jsxs8(Fragment2, { children: [
+    /* @__PURE__ */ jsxs8("div", { className: "j-device-card-header", children: [
+      /* @__PURE__ */ jsx14("div", { className: "j-device-card-icon", children: /* @__PURE__ */ jsx14(Icon2, { "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsxs8("div", { children: [
+        /* @__PURE__ */ jsx14("h3", { children: name }),
+        /* @__PURE__ */ jsx14("p", { children: type })
+      ] }),
+      actions ? /* @__PURE__ */ jsx14("div", { className: "j-device-card-actions", children: actions }) : null
+    ] }),
+    /* @__PURE__ */ jsxs8("div", { className: "j-device-card-status", children: [
+      /* @__PURE__ */ jsx14(StatusIndicator, { status }),
+      latency ? /* @__PURE__ */ jsx14("span", { children: latency }) : null
+    ] }),
+    address ? /* @__PURE__ */ jsx14("code", { className: "j-device-card-address", children: address }) : null,
+    description ? /* @__PURE__ */ jsx14("p", { className: "j-device-card-description", children: description }) : null
+  ] }) });
+}
+
+// src/components/dialog.tsx
+import { X } from "@jerco/icons";
+import { cn as cn14 } from "@jerco/utils";
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+var Dialog = DialogPrimitive.Root;
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogClose = DialogPrimitive.Close;
+var DialogContent = forwardRef7(function DialogContent2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs9(DialogPrimitive.Portal, { children: [
+    /* @__PURE__ */ jsx15(DialogPrimitive.Overlay, { className: "j-dialog-overlay" }),
+    /* @__PURE__ */ jsxs9(DialogPrimitive.Content, { ref, className: cn14("j-dialog-content", className), ...props, children: [
+      children,
+      /* @__PURE__ */ jsx15(DialogPrimitive.Close, { asChild: true, children: /* @__PURE__ */ jsx15(IconButton, { className: "j-dialog-close", variant: "ghost", label: "Close dialog", children: /* @__PURE__ */ jsx15(X, { className: "j-icon", "aria-hidden": "true" }) }) })
+    ] })
+  ] });
+});
+var DialogTitle = forwardRef7(function DialogTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(DialogPrimitive.Title, { ref, className: cn14("j-dialog-title", className), ...props });
+});
+var DialogDescription = forwardRef7(function DialogDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx15(
+    DialogPrimitive.Description,
+    {
+      ref,
+      className: cn14("j-dialog-description", className),
+      ...props
+    }
+  );
+});
+function DialogHeader({ children }) {
+  return /* @__PURE__ */ jsx15("div", { className: "j-dialog-header", children });
+}
+function DialogFooter({ children }) {
+  return /* @__PURE__ */ jsx15("div", { className: "j-dialog-footer", children });
+}
+
+// src/components/layout.tsx
+import { ChevronDown as ChevronDown3, Menu, PanelLeftClose, PanelLeftOpen, X as X2 } from "@jerco/icons";
+import { cn as cn15 } from "@jerco/utils";
+import {
+  createContext as createContext2,
+  Fragment as Fragment3,
+  useCallback,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useId,
+  useMemo as useMemo3,
+  useState as useState2
+} from "react";
+import { Fragment as Fragment4, jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+var AppShellContext = createContext2(null);
+function AppShell({
+  className,
+  defaultMobileOpen = false,
+  defaultSidebarCollapsed = false,
+  sidebarCollapsed: controlledSidebarCollapsed,
+  onSidebarCollapsedChange,
+  sidebarPersistence,
+  ...props
+}) {
+  const navigationId = useId();
+  const [mobileOpen, setMobileOpen] = useState2(defaultMobileOpen);
+  const [internalSidebarCollapsed, setInternalSidebarCollapsed] = useState2(
+    () => sidebarPersistence?.read() ?? defaultSidebarCollapsed
+  );
+  const sidebarCollapsed = controlledSidebarCollapsed ?? internalSidebarCollapsed;
+  const setSidebarCollapsed = useCallback(
+    (collapsed) => {
+      if (controlledSidebarCollapsed === void 0) setInternalSidebarCollapsed(collapsed);
+      sidebarPersistence?.write(collapsed);
+      onSidebarCollapsedChange?.(collapsed);
+    },
+    [controlledSidebarCollapsed, onSidebarCollapsedChange, sidebarPersistence]
+  );
+  useEffect2(() => {
+    if (!mobileOpen) return;
+    const close = (event) => {
+      if (event.key === "Escape") setMobileOpen(false);
+    };
+    window.addEventListener("keydown", close);
+    return () => window.removeEventListener("keydown", close);
+  }, [mobileOpen]);
+  useEffect2(() => {
+    if (!sidebarPersistence?.subscribe) return;
+    return sidebarPersistence.subscribe((collapsed) => {
+      if (collapsed !== void 0 && controlledSidebarCollapsed === void 0) {
+        setInternalSidebarCollapsed(collapsed);
+      }
+    });
+  }, [controlledSidebarCollapsed, sidebarPersistence]);
+  const value = useMemo3(
+    () => ({ navigationId, mobileOpen, setMobileOpen, sidebarCollapsed, setSidebarCollapsed }),
+    [mobileOpen, navigationId, setSidebarCollapsed, sidebarCollapsed]
+  );
+  return /* @__PURE__ */ jsx16(AppShellContext.Provider, { value, children: /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: cn15(
+        "j-app-shell",
+        mobileOpen && "j-app-shell--nav-open",
+        sidebarCollapsed && "j-app-shell--collapsed",
+        className
+      ),
+      ...props
+    }
+  ) });
+}
+function Sidebar({ className, children, ...props }) {
+  const shell = useContext2(AppShellContext);
+  return /* @__PURE__ */ jsxs10(Fragment4, { children: [
+    /* @__PURE__ */ jsx16(
+      "button",
+      {
+        className: "j-sidebar-overlay",
+        "aria-label": "Close navigation",
+        tabIndex: shell?.mobileOpen ? 0 : -1,
+        onClick: () => shell?.setMobileOpen(false)
+      }
+    ),
+    /* @__PURE__ */ jsxs10(
+      "aside",
+      {
+        id: shell?.navigationId,
+        className: cn15("j-sidebar", className),
+        "aria-label": props["aria-label"] ?? "Primary navigation",
+        ...props,
+        children: [
+          /* @__PURE__ */ jsxs10("div", { className: "j-sidebar-mobile-header", children: [
+            /* @__PURE__ */ jsx16("span", { children: "Navigation" }),
+            /* @__PURE__ */ jsx16(
+              IconButton,
+              {
+                label: "Close navigation",
+                variant: "ghost",
+                onClick: () => shell?.setMobileOpen(false),
+                children: /* @__PURE__ */ jsx16(X2, { "aria-hidden": "true" })
+              }
+            )
+          ] }),
+          children
+        ]
+      }
+    )
+  ] });
+}
+function AppShellMenuButton({
+  className,
+  label = "Open navigation",
+  ...props
+}) {
+  const shell = useContext2(AppShellContext);
+  if (!shell) throw new Error("AppShellMenuButton must be used inside AppShell");
+  return /* @__PURE__ */ jsx16(
+    IconButton,
+    {
+      className: cn15("j-app-shell-menu", className),
+      label,
+      variant: "ghost",
+      "aria-controls": shell.navigationId,
+      "aria-expanded": shell.mobileOpen,
+      onClick: () => shell.setMobileOpen(!shell.mobileOpen),
+      ...props,
+      children: /* @__PURE__ */ jsx16(Menu, { "aria-hidden": "true" })
+    }
+  );
+}
+function AppShellCollapseButton({
+  className,
+  ...props
+}) {
+  const shell = useContext2(AppShellContext);
+  if (!shell) throw new Error("AppShellCollapseButton must be used inside AppShell");
+  const label = shell.sidebarCollapsed ? "Expand navigation" : "Collapse navigation";
+  const Icon2 = shell.sidebarCollapsed ? PanelLeftOpen : PanelLeftClose;
+  return /* @__PURE__ */ jsx16(
+    IconButton,
+    {
+      className: cn15("j-app-shell-collapse", className),
+      label,
+      variant: "ghost",
+      "aria-pressed": shell.sidebarCollapsed,
+      onClick: () => shell.setSidebarCollapsed(!shell.sidebarCollapsed),
+      ...props,
+      children: /* @__PURE__ */ jsx16(Icon2, { "aria-hidden": "true" })
+    }
+  );
+}
+function Header({ className, ...props }) {
+  return /* @__PURE__ */ jsx16("header", { className: cn15("j-header", className), ...props });
+}
+function MainContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx16("main", { className: cn15("j-main-content", className), ...props });
+}
+function itemIsActive(item, currentPath, isPathActive) {
+  if (item.active !== void 0) return item.active;
+  if (!currentPath || !item.href) return false;
+  return isPathActive ? isPathActive(currentPath, item.href, item) : matchNavigationPath(currentPath, item.href, item.matchEnd);
+}
+function branchIsActive(item, currentPath, isPathActive) {
+  return itemIsActive(item, currentPath, isPathActive) || Boolean(item.items?.some((child) => branchIsActive(child, currentPath, isPathActive)));
+}
+function collectExpanded(items, currentPath, isPathActive, result = /* @__PURE__ */ new Set(), includeDefaults = true) {
+  for (const item of items) {
+    const id = item.id ?? `${item.href ?? "group"}-${item.label}`;
+    if (includeDefaults && item.defaultExpanded || item.items?.some((child) => branchIsActive(child, currentPath, isPathActive))) {
+      result.add(id);
+    }
+    if (item.items) collectExpanded(item.items, currentPath, isPathActive, result, includeDefaults);
+  }
+  return result;
+}
+function NavigationBranch({
+  items,
+  level,
+  expanded,
+  toggle,
+  shell,
+  currentPath,
+  isPathActive,
+  onNavigate,
+  renderLink
+}) {
+  return /* @__PURE__ */ jsx16(
+    "div",
+    {
+      className: cn15("j-app-navigation-list", level > 0 && "j-app-navigation-sublist"),
+      role: level > 0 ? "group" : void 0,
+      children: items.map((navigationItem) => {
+        const {
+          id: providedId,
+          label,
+          icon: Icon2,
+          badge,
+          active,
+          items: nestedItems,
+          defaultExpanded,
+          matchEnd,
+          className,
+          onClick,
+          ...item
+        } = navigationItem;
+        const id = providedId ?? `${item.href ?? "group"}-${label}`;
+        if (nestedItems?.length) {
+          const open = expanded.has(id);
+          const nestedActive = branchIsActive(navigationItem, currentPath, isPathActive);
+          return /* @__PURE__ */ jsxs10(
+            "div",
+            {
+              className: "j-app-navigation-group",
+              "data-active": nestedActive || void 0,
+              children: [
+                /* @__PURE__ */ jsxs10(
+                  "button",
+                  {
+                    type: "button",
+                    className: cn15("j-app-navigation-link j-app-navigation-group-trigger", className),
+                    "aria-expanded": open,
+                    "aria-controls": `${id}-children`,
+                    "data-default-expanded": defaultExpanded || void 0,
+                    title: shell?.sidebarCollapsed ? label : void 0,
+                    onClick: () => toggle(id),
+                    children: [
+                      Icon2 ? /* @__PURE__ */ jsx16(Icon2, { "aria-hidden": "true" }) : null,
+                      /* @__PURE__ */ jsx16("span", { children: label }),
+                      badge ? /* @__PURE__ */ jsx16("span", { className: "j-app-navigation-badge", children: badge }) : null,
+                      /* @__PURE__ */ jsx16(ChevronDown3, { className: "j-app-navigation-chevron", "aria-hidden": "true" })
+                    ]
+                  }
+                ),
+                open ? /* @__PURE__ */ jsx16("div", { id: `${id}-children`, children: /* @__PURE__ */ jsx16(
+                  NavigationBranch,
+                  {
+                    items: nestedItems,
+                    level: level + 1,
+                    expanded,
+                    toggle,
+                    shell,
+                    currentPath,
+                    isPathActive,
+                    onNavigate,
+                    renderLink
+                  }
+                ) }) : null
+              ]
+            },
+            id
+          );
+        }
+        const resolvedActive = active ?? (currentPath && item.href ? isPathActive ? isPathActive(currentPath, item.href, navigationItem) : matchNavigationPath(currentPath, item.href, matchEnd) : false);
+        const linkClassName = cn15("j-app-navigation-link", className);
+        const children = /* @__PURE__ */ jsxs10(Fragment4, { children: [
+          Icon2 ? /* @__PURE__ */ jsx16(Icon2, { "aria-hidden": "true" }) : null,
+          /* @__PURE__ */ jsx16("span", { children: label }),
+          badge ? /* @__PURE__ */ jsx16("span", { className: "j-app-navigation-badge", children: badge }) : null
+        ] });
+        const handleClick = (event) => {
+          onClick?.(event);
+          onNavigate?.(navigationItem, event);
+          if (!event.defaultPrevented) shell?.setMobileOpen(false);
+        };
+        return renderLink ? /* @__PURE__ */ jsx16(Fragment3, { children: renderLink({
+          item: navigationItem,
+          active: resolvedActive,
+          className: linkClassName,
+          children,
+          onClick: handleClick
+        }) }, id) : /* @__PURE__ */ jsx16(
+          "a",
+          {
+            className: linkClassName,
+            "aria-current": resolvedActive ? "page" : void 0,
+            title: shell?.sidebarCollapsed ? label : void 0,
+            onClick: handleClick,
+            ...item,
+            children
+          },
+          id
+        );
+      })
+    }
+  );
+}
+function AppNavigation({
+  items,
+  label = "Primary navigation",
+  footer,
+  currentPath,
+  isPathActive,
+  onNavigate,
+  renderLink,
+  className,
+  ...props
+}) {
+  const shell = useContext2(AppShellContext);
+  const [expanded, setExpanded] = useState2(() => collectExpanded(items, currentPath, isPathActive));
+  const visibleExpanded = useMemo3(
+    () => /* @__PURE__ */ new Set([
+      ...expanded,
+      ...collectExpanded(items, currentPath, isPathActive, /* @__PURE__ */ new Set(), false)
+    ]),
+    [currentPath, expanded, isPathActive, items]
+  );
+  const toggle = (id) => setExpanded((current) => {
+    const next = new Set(current);
+    if (next.has(id)) next.delete(id);
+    else next.add(id);
+    return next;
+  });
+  return /* @__PURE__ */ jsxs10("nav", { className: cn15("j-app-navigation", className), "aria-label": label, ...props, children: [
+    /* @__PURE__ */ jsx16(
+      NavigationBranch,
+      {
+        items,
+        level: 0,
+        expanded: visibleExpanded,
+        toggle,
+        shell,
+        currentPath,
+        isPathActive,
+        onNavigate,
+        renderLink
+      }
+    ),
+    footer ? /* @__PURE__ */ jsx16("div", { className: "j-app-navigation-footer", children: footer }) : null
+  ] });
+}
+function PageHeader({
+  title,
+  description,
+  eyebrow,
+  actions,
+  className,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: cn15("j-page-header", className), ...props, children: [
+    /* @__PURE__ */ jsxs10("div", { children: [
+      eyebrow ? /* @__PURE__ */ jsx16("div", { className: "j-page-eyebrow", children: eyebrow }) : null,
+      /* @__PURE__ */ jsx16("h1", { className: "j-page-title", children: title }),
+      description ? /* @__PURE__ */ jsx16("p", { className: "j-page-description", children: description }) : null
+    ] }),
+    actions ? /* @__PURE__ */ jsx16("div", { className: "j-page-actions", children: actions }) : null
+  ] });
+}
+
+// src/components/metric-card.tsx
+import { cn as cn16 } from "@jerco/utils";
+import { Fragment as Fragment5, jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+function MetricCard({
+  label,
+  value,
+  description,
+  trend,
+  status,
+  icon: Icon2,
+  loading = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs11(Card, { className: cn16("j-metric-card", className), "aria-busy": loading || void 0, children: [
+    /* @__PURE__ */ jsxs11("div", { className: "j-metric-card-header", children: [
+      /* @__PURE__ */ jsx17("span", { className: "j-metric-label", children: label }),
+      Icon2 ? /* @__PURE__ */ jsx17(Icon2, { className: "j-metric-icon", "aria-hidden": "true" }) : null
+    ] }),
+    loading ? /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx17(Skeleton, { className: "j-metric-skeleton-value" }),
+      /* @__PURE__ */ jsx17(Skeleton, { className: "j-metric-skeleton-text" }),
+      /* @__PURE__ */ jsxs11("span", { className: "j-sr-only", children: [
+        "Loading ",
+        label
+      ] })
+    ] }) : /* @__PURE__ */ jsxs11(Fragment5, { children: [
+      /* @__PURE__ */ jsx17("div", { className: "j-metric-value", children: value }),
+      /* @__PURE__ */ jsxs11("div", { className: "j-metric-meta", children: [
+        trend ? /* @__PURE__ */ jsx17("span", { className: "j-metric-trend", children: trend }) : null,
+        status ? /* @__PURE__ */ jsx17(StatusIndicator, { status }) : null
+      ] }),
+      description ? /* @__PURE__ */ jsx17("p", { className: "j-metric-description", children: description }) : null
+    ] })
+  ] });
+}
+
+// src/components/operational-state.tsx
+import { AlertCircle as AlertCircle2, Info, RefreshCw } from "@jerco/icons";
+import { cn as cn17 } from "@jerco/utils";
+import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+function EmptyState({
+  icon: Icon2 = Info,
+  title,
+  description,
+  action,
+  compact = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: cn17("j-operational-state", compact && "j-operational-state--compact", className),
+      children: [
+        /* @__PURE__ */ jsx18(Icon2, { className: "j-operational-state-icon", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx18("h3", { children: title }),
+        /* @__PURE__ */ jsx18("p", { children: description }),
+        action ? /* @__PURE__ */ jsx18("div", { className: "j-operational-state-action", children: action }) : null
+      ]
+    }
+  );
+}
+function ErrorState({
+  icon: Icon2 = AlertCircle2,
+  title,
+  description,
+  action,
+  onRetry,
+  retryLabel = "Try again",
+  compact = false,
+  className
+}) {
+  const resolvedAction = action ?? (onRetry ? /* @__PURE__ */ jsxs12(Button, { variant: "outline", onClick: onRetry, children: [
+    /* @__PURE__ */ jsx18(RefreshCw, { "aria-hidden": "true" }),
+    " ",
+    retryLabel
+  ] }) : null);
+  return /* @__PURE__ */ jsxs12(
+    "div",
+    {
+      className: cn17(
+        "j-operational-state j-operational-state--error",
+        compact && "j-operational-state--compact",
+        className
+      ),
+      role: "alert",
+      children: [
+        /* @__PURE__ */ jsx18(Icon2, { className: "j-operational-state-icon", "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx18("h3", { children: title }),
+        /* @__PURE__ */ jsx18("p", { children: description }),
+        resolvedAction ? /* @__PURE__ */ jsx18("div", { className: "j-operational-state-action", children: resolvedAction }) : null
+      ]
+    }
+  );
+}
+
+// src/components/radio-group.tsx
+import { cn as cn18 } from "@jerco/utils";
+import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
+import { forwardRef as forwardRef8 } from "react";
+import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+var RadioGroup2 = forwardRef8(function RadioGroup3({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx19(RadioGroupPrimitive.Root, { ref, className: cn18("j-radio-group", className), ...props });
+});
+var RadioGroupItem = forwardRef8(function RadioGroupItem2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx19(RadioGroupPrimitive.Item, { ref, className: cn18("j-radio", className), ...props, children: /* @__PURE__ */ jsx19(RadioGroupPrimitive.Indicator, { className: "j-radio-indicator" }) });
+});
+function RadioField({
+  id,
+  label,
+  description,
+  value
+}) {
+  return /* @__PURE__ */ jsxs13("div", { className: "j-choice-field", children: [
+    /* @__PURE__ */ jsx19(RadioGroupItem, { id, value }),
+    /* @__PURE__ */ jsxs13("div", { children: [
+      /* @__PURE__ */ jsx19("label", { className: "j-choice-label", htmlFor: id, children: label }),
+      description ? /* @__PURE__ */ jsx19("div", { className: "j-choice-description", children: description }) : null
+    ] })
+  ] });
+}
+
+// src/components/service-health.tsx
+import { Activity } from "@jerco/icons";
+import { cn as cn19 } from "@jerco/utils";
+import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+function ServiceHealth({
+  name,
+  status,
+  endpoint,
+  latency,
+  description,
+  meta,
+  className
+}) {
+  return /* @__PURE__ */ jsxs14("article", { className: cn19("j-service-health", className), children: [
+    /* @__PURE__ */ jsx20("div", { className: "j-service-health-icon", children: /* @__PURE__ */ jsx20(Activity, { "aria-hidden": "true" }) }),
+    /* @__PURE__ */ jsxs14("div", { className: "j-service-health-main", children: [
+      /* @__PURE__ */ jsxs14("div", { className: "j-service-health-title", children: [
+        /* @__PURE__ */ jsx20("h3", { children: name }),
+        /* @__PURE__ */ jsx20(StatusIndicator, { status })
+      ] }),
+      endpoint ? /* @__PURE__ */ jsx20("code", { children: endpoint }) : null,
+      description ? /* @__PURE__ */ jsx20("p", { children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsxs14("div", { className: "j-service-health-meta", children: [
+      latency ? /* @__PURE__ */ jsx20("strong", { children: latency }) : null,
+      meta
+    ] })
+  ] });
+}
+
+// src/components/spinner.tsx
+import { LoaderCircle as LoaderCircle2 } from "@jerco/icons";
+import { cn as cn20 } from "@jerco/utils";
+import { jsx as jsx21, jsxs as jsxs15 } from "react/jsx-runtime";
+function Spinner({ label = "Loading", className }) {
+  return /* @__PURE__ */ jsxs15("span", { className: cn20("j-spinner-wrap", className), role: "status", children: [
+    /* @__PURE__ */ jsx21(LoaderCircle2, { className: "j-spinner", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx21("span", { className: "j-sr-only", children: label })
+  ] });
+}
+
+// src/components/switch.tsx
+import { cn as cn21 } from "@jerco/utils";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { forwardRef as forwardRef9 } from "react";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
+var Switch = forwardRef9(function Switch2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx22(SwitchPrimitive.Root, { ref, className: cn21("j-switch", className), ...props, children: /* @__PURE__ */ jsx22(SwitchPrimitive.Thumb, { className: "j-switch-thumb" }) });
+});
+function SwitchField({
+  id,
+  label,
+  description,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs16("div", { className: "j-switch-field", children: [
+    /* @__PURE__ */ jsxs16("div", { children: [
+      /* @__PURE__ */ jsx22("label", { className: "j-choice-label", htmlFor: id, children: label }),
+      description ? /* @__PURE__ */ jsx22("div", { className: "j-choice-description", children: description }) : null
+    ] }),
+    /* @__PURE__ */ jsx22(Switch, { id, ...props })
+  ] });
+}
+
+// src/components/tabs.tsx
+import { cn as cn22 } from "@jerco/utils";
+import * as TabsPrimitive from "@radix-ui/react-tabs";
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx23 } from "react/jsx-runtime";
+var Tabs = TabsPrimitive.Root;
+var TabsList = forwardRef10(function TabsList2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx23(TabsPrimitive.List, { ref, className: cn22("j-tabs-list", className), ...props });
+});
+var TabsTrigger = forwardRef10(function TabsTrigger2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx23(TabsPrimitive.Trigger, { ref, className: cn22("j-tabs-trigger", className), ...props });
+});
+var TabsContent = forwardRef10(function TabsContent2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx23(TabsPrimitive.Content, { ref, className: cn22("j-tabs-content", className), ...props });
+});
+
+// src/components/toast.tsx
+import { X as X3 } from "@jerco/icons";
+import { cn as cn23 } from "@jerco/utils";
+import * as ToastPrimitive from "@radix-ui/react-toast";
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx24 } from "react/jsx-runtime";
+var ToastProvider = ToastPrimitive.Provider;
+var Toast = forwardRef11(function Toast2({ className, tone = "neutral", ...props }, ref) {
+  return /* @__PURE__ */ jsx24(
+    ToastPrimitive.Root,
+    {
+      ref,
+      className: cn23("j-toast", `j-toast--${tone}`, className),
+      ...props
+    }
+  );
+});
+var ToastTitle = forwardRef11(function ToastTitle2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx24(ToastPrimitive.Title, { ref, className: cn23("j-toast-title", className), ...props });
+});
+var ToastDescription = forwardRef11(function ToastDescription2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx24(
+    ToastPrimitive.Description,
+    {
+      ref,
+      className: cn23("j-toast-description", className),
+      ...props
+    }
+  );
+});
+var ToastAction = ToastPrimitive.Action;
+var ToastClose = forwardRef11(function ToastClose2({ className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsx24(
+    ToastPrimitive.Close,
+    {
+      ref,
+      className: cn23("j-toast-close", className),
+      "aria-label": "Dismiss notification",
+      ...props,
+      children: children ?? /* @__PURE__ */ jsx24(X3, { "aria-hidden": "true" })
+    }
+  );
+});
+var ToastViewport = forwardRef11(function ToastViewport2({ className, ...props }, ref) {
+  return /* @__PURE__ */ jsx24(ToastPrimitive.Viewport, { ref, className: cn23("j-toast-viewport", className), ...props });
+});
+
+// src/components/tooltip.tsx
+import { cn as cn24 } from "@jerco/utils";
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import { forwardRef as forwardRef12 } from "react";
+import { jsx as jsx25, jsxs as jsxs17 } from "react/jsx-runtime";
+var TooltipProvider = TooltipPrimitive.Provider;
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = TooltipPrimitive.Trigger;
+var TooltipContent = forwardRef12(function TooltipContent2({ className, sideOffset = 6, ...props }, ref) {
+  return /* @__PURE__ */ jsx25(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx25(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      className: cn24("j-tooltip", className),
+      sideOffset,
+      ...props
+    }
+  ) });
+});
+function SimpleTooltip({ content, children }) {
+  return /* @__PURE__ */ jsx25(TooltipProvider, { children: /* @__PURE__ */ jsxs17(Tooltip, { children: [
+    /* @__PURE__ */ jsx25(TooltipTrigger, { asChild: true, children }),
+    /* @__PURE__ */ jsx25(TooltipContent, { children: content })
+  ] }) });
+}
+export {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+  AppNavigation,
+  AppShell,
+  AppShellCollapseButton,
+  AppShellMenuButton,
+  Badge,
+  BrandLogo,
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Checkbox,
+  CheckboxField,
+  DataTable,
+  DesignSystemProvider,
+  DeviceCard,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuPortal,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  EmptyState,
+  ErrorState,
+  Header,
+  IconButton,
+  Input,
+  Label2 as Label,
+  MainContent,
+  MetricCard,
+  NativeSelect,
+  PageHeader,
+  RadioField,
+  RadioGroup2 as RadioGroup,
+  RadioGroupItem,
+  Select,
+  SelectGroup,
+  SelectLabel,
+  SelectValue,
+  Separator2 as Separator,
+  ServiceHealth,
+  Sidebar,
+  SimpleTooltip,
+  Skeleton,
+  Spinner,
+  StatusIndicator,
+  Switch,
+  SwitchField,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  Textarea,
+  Toast,
+  ToastAction,
+  ToastClose,
+  ToastDescription,
+  ToastProvider,
+  ToastTitle,
+  ToastViewport,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  buttonVariants,
+  createBrowserBooleanStateAdapter,
+  createBrowserDataTableUrlStateAdapter,
+  createDataTableRequestManager,
+  createDataTableUrlStateAdapter,
+  matchNavigationPath,
+  parseDataTableUrlState,
+  serializeDataTableUrlState,
+  useDesignSystem
+};