@omniviewdev/ui 0.1.0

package/dist/table.js

@@ -0,0 +1,580 @@
+import { jsxs as s, jsx as e, Fragment as ie } from "react/jsx-runtime";
+import ae, { useState as w, useMemo as J, useCallback as ce } from "react";
+import de from "@mui/material/Card";
+import se from "@mui/material/CardContent";
+import ge from "@mui/material/ClickAwayListener";
+import me from "@mui/material/Divider";
+import pe from "@mui/material/IconButton";
+import he from "@mui/material/Popper";
+import O from "@mui/material/Stack";
+import fe from "@mui/material/Switch";
+import x from "@mui/material/Typography";
+import { styled as ue } from "@mui/material/styles";
+import { LuSettings2 as xe, LuColumns2 as ve } from "react-icons/lu";
+import { useReactTable as K, getExpandedRowModel as Se, getFilteredRowModel as Q, getSortedRowModel as U, getCoreRowModel as X, flexRender as I } from "@tanstack/react-table";
+import Y from "@mui/material/Table";
+import Z from "@mui/material/TableHead";
+import ee from "@mui/material/TableBody";
+import f from "@mui/material/TableRow";
+import u from "@mui/material/TableCell";
+import _ from "@mui/material/Checkbox";
+import d from "@mui/material/Box";
+import oe from "@mui/material/TableSortLabel";
+import { S as H } from "./Skeleton-BUYyXUiC.js";
+import { S as be } from "./SearchInput-D3AsCI5H.js";
+import ye from "@mui/material/InputBase";
+import Ce from "@mui/icons-material/Search";
+const we = ue("div")(({ theme: r }) => ({
+  width: "max-content",
+  borderRadius: "8px",
+  border: `1px solid ${r.palette.divider}`,
+  backgroundColor: r.palette.background.paper,
+  boxShadow: r.palette.mode === "dark" ? "0px 4px 8px rgb(0 0 0 / 0.7)" : "0px 4px 8px rgb(0 0 0 / 0.1)",
+  fontFamily: "var(--ov-font-ui)",
+  fontSize: "0.875rem",
+  zIndex: 1
+})), Ie = ({ anchorEl: r, columns: p, onClose: c, onClick: a }) => {
+  const g = !!r;
+  return /* @__PURE__ */ s(ae.Fragment, { children: [
+    /* @__PURE__ */ e(
+      pe,
+      {
+        size: "small",
+        onClick: a,
+        sx: { border: "1px solid", borderColor: "divider" },
+        children: /* @__PURE__ */ e(xe, { size: 20 })
+      }
+    ),
+    /* @__PURE__ */ e(
+      he,
+      {
+        style: { zIndex: 1e3 },
+        id: "table-filter-menu",
+        open: g,
+        anchorEl: r,
+        placement: "bottom-end",
+        children: /* @__PURE__ */ e(
+          ge,
+          {
+            onClickAway: () => {
+              c();
+            },
+            children: /* @__PURE__ */ e(we, { children: /* @__PURE__ */ s(
+              de,
+              {
+                variant: "outlined",
+                sx: {
+                  maxHeight: "max-content",
+                  maxWidth: "100%",
+                  minWidth: "300px",
+                  p: 1.25,
+                  gap: 1.25
+                },
+                children: [
+                  /* @__PURE__ */ s(O, { direction: "row", spacing: 0.5, alignItems: "center", px: 1, pt: 0.5, children: [
+                    /* @__PURE__ */ e(ve, { size: 14 }),
+                    /* @__PURE__ */ e(x, { variant: "subtitle2", children: "Columns" })
+                  ] }),
+                  /* @__PURE__ */ e(me, {}),
+                  /* @__PURE__ */ e(
+                    se,
+                    {
+                      sx: {
+                        display: "flex",
+                        flexDirection: "column",
+                        gap: 1.5
+                      },
+                      children: p.filter((i) => i.getCanHide()).map((i) => /* @__PURE__ */ s(
+                        O,
+                        {
+                          direction: "row",
+                          spacing: 1,
+                          alignItems: "center",
+                          component: "label",
+                          sx: { cursor: "pointer" },
+                          children: [
+                            /* @__PURE__ */ e(
+                              fe,
+                              {
+                                size: "small",
+                                checked: i.getIsVisible(),
+                                onChange: i.getToggleVisibilityHandler()
+                              }
+                            ),
+                            /* @__PURE__ */ e(x, { variant: "caption", children: i.columnDef.header?.toString() })
+                          ]
+                        },
+                        i.columnDef.id
+                      ))
+                    }
+                  )
+                ]
+              }
+            ) })
+          }
+        )
+      }
+    )
+  ] });
+};
+Ie.displayName = "ColumnFilter";
+const q = {
+  compact: { rowHeight: 28, cellPy: 0.25, cellPx: 0.75 },
+  comfortable: { rowHeight: 40, cellPy: 1, cellPx: 1.5 },
+  spacious: { rowHeight: 56, cellPy: 2, cellPx: 2 }
+};
+function ze({
+  columns: r,
+  data: p,
+  density: c = "comfortable",
+  loading: a = !1,
+  error: g,
+  emptyState: i,
+  onRowClick: h,
+  selection: m = "none",
+  stickyHeader: S = !1,
+  rowActions: z,
+  expandable: b = !1,
+  renderDetail: M,
+  sx: y
+}) {
+  const [v, D] = w([]), [$, W] = w({}), [B, R] = w({}), k = q[c] || q.comfortable, C = J(() => {
+    const n = [];
+    return m === "multi" && n.push({
+      id: "__select",
+      header: ({ table: t }) => /* @__PURE__ */ e(
+        _,
+        {
+          size: "small",
+          checked: t.getIsAllRowsSelected(),
+          indeterminate: t.getIsSomeRowsSelected(),
+          onChange: t.getToggleAllRowsSelectedHandler(),
+          sx: { p: 0 }
+        }
+      ),
+      cell: ({ row: t }) => /* @__PURE__ */ e(
+        _,
+        {
+          size: "small",
+          checked: t.getIsSelected(),
+          onChange: t.getToggleSelectedHandler(),
+          sx: { p: 0 }
+        }
+      ),
+      size: 40
+    }), n.push(...r), z && n.push({
+      id: "__actions",
+      header: "",
+      cell: ({ row: t }) => z(t.original),
+      size: 60
+    }), n;
+  }, [r, m, z]), T = K({
+    data: p,
+    columns: C,
+    state: { sorting: v, rowSelection: $, expanded: B },
+    onSortingChange: D,
+    onRowSelectionChange: W,
+    onExpandedChange: R,
+    getCoreRowModel: X(),
+    getSortedRowModel: U(),
+    getFilteredRowModel: Q(),
+    getExpandedRowModel: b ? Se() : void 0,
+    enableRowSelection: m !== "none",
+    enableMultiRowSelection: m === "multi"
+  });
+  return g ? /* @__PURE__ */ e(d, { sx: { p: 3 }, children: g }) : /* @__PURE__ */ e(d, { sx: { overflow: "auto", ...typeof y == "object" && !Array.isArray(y) ? y : {} }, children: /* @__PURE__ */ s(
+    Y,
+    {
+      size: "small",
+      stickyHeader: S,
+      sx: { "& td, & th": { py: k.cellPy, px: k.cellPx } },
+      children: [
+        /* @__PURE__ */ e(Z, { children: T.getHeaderGroups().map((n) => /* @__PURE__ */ e(f, { children: n.headers.map((t) => /* @__PURE__ */ e(
+          u,
+          {
+            sx: {
+              fontWeight: 600,
+              fontSize: "0.75rem",
+              color: "var(--ov-fg-muted)",
+              bgcolor: S ? "var(--ov-bg-surface)" : void 0,
+              whiteSpace: "nowrap",
+              width: t.getSize()
+            },
+            children: t.isPlaceholder ? null : t.column.getCanSort() ? /* @__PURE__ */ e(
+              oe,
+              {
+                active: !!t.column.getIsSorted(),
+                direction: t.column.getIsSorted() === "desc" ? "desc" : "asc",
+                onClick: t.column.getToggleSortingHandler(),
+                children: I(t.column.columnDef.header, t.getContext())
+              }
+            ) : I(t.column.columnDef.header, t.getContext())
+          },
+          t.id
+        )) }, n.id)) }),
+        /* @__PURE__ */ e(ee, { children: a ? Array.from({ length: 5 }).map((n, t) => /* @__PURE__ */ e(f, { children: C.map((j, F) => /* @__PURE__ */ e(u, { children: /* @__PURE__ */ e(H, { variant: "text", width: "80%" }) }, F)) }, `skeleton-${t}`)) : T.getRowModel().rows.length === 0 ? i ? /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(u, { colSpan: C.length, sx: { textAlign: "center", py: 4 }, children: i }) }) : null : T.getRowModel().rows.map((n) => /* @__PURE__ */ s(ie, { children: [
+          /* @__PURE__ */ e(
+            f,
+            {
+              hover: !0,
+              selected: n.getIsSelected(),
+              onClick: () => {
+                m === "single" && n.toggleSelected(!n.getIsSelected()), b && n.toggleExpanded(), h?.(n.original);
+              },
+              sx: {
+                cursor: h || b || m === "single" ? "pointer" : void 0,
+                height: k.rowHeight
+              },
+              children: n.getVisibleCells().map((t) => /* @__PURE__ */ e(
+                u,
+                {
+                  sx: { fontSize: "0.8125rem", color: "var(--ov-fg-default)" },
+                  children: I(t.column.columnDef.cell, t.getContext())
+                },
+                t.id
+              ))
+            },
+            n.id
+          ),
+          b && n.getIsExpanded() && M && /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(u, { colSpan: C.length, sx: { bgcolor: "var(--ov-bg-surface-inset)" }, children: M(n.original) }) }, `${n.id}-detail`)
+        ] })) })
+      ]
+    }
+  ) });
+}
+ze.displayName = "DataTable";
+function Re({
+  title: r,
+  searchValue: p,
+  onSearch: c,
+  filters: a,
+  actions: g,
+  selectedCount: i,
+  sx: h
+}) {
+  return /* @__PURE__ */ s(
+    d,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "center",
+        gap: 1.5,
+        px: 1.5,
+        py: 1,
+        borderBottom: "1px solid var(--ov-border-default)",
+        ...typeof h == "object" && !Array.isArray(h) ? h : {}
+      },
+      children: [
+        r && /* @__PURE__ */ e(x, { variant: "subtitle2", sx: { fontWeight: 600, color: "var(--ov-fg-base)", mr: 1 }, children: r }),
+        i != null && i > 0 && /* @__PURE__ */ s(x, { variant: "body2", sx: { color: "var(--ov-accent-fg)", fontWeight: 500 }, children: [
+          i,
+          " selected"
+        ] }),
+        c && /* @__PURE__ */ e(
+          be,
+          {
+            value: p ?? "",
+            onChange: c,
+            placeholder: "Search..."
+          }
+        ),
+        a && /* @__PURE__ */ e(d, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: a }),
+        /* @__PURE__ */ e(d, { sx: { flex: 1 } }),
+        g && /* @__PURE__ */ e(d, { sx: { display: "flex", gap: 0.5, alignItems: "center" }, children: g })
+      ]
+    }
+  );
+}
+Re.displayName = "TableToolbar";
+const ke = {
+  compact: 0.25,
+  comfortable: 1,
+  spacious: 2
+};
+function Te({
+  columns: r,
+  rows: p = 5,
+  density: c = "comfortable"
+}) {
+  const a = ke[c] ?? 1;
+  return /* @__PURE__ */ s(Y, { size: "small", children: [
+    /* @__PURE__ */ e(Z, { children: /* @__PURE__ */ e(f, { children: Array.from({ length: r }).map((g, i) => /* @__PURE__ */ e(u, { sx: { py: a, fontWeight: 600 }, children: /* @__PURE__ */ e(H, { variant: "text", width: "60%" }) }, i)) }) }),
+    /* @__PURE__ */ e(ee, { children: Array.from({ length: p }).map((g, i) => /* @__PURE__ */ e(f, { children: Array.from({ length: r }).map((h, m) => /* @__PURE__ */ e(u, { sx: { py: a }, children: /* @__PURE__ */ e(H, { variant: "text", width: `${50 + Math.random() * 40}%` }) }, m)) }, i)) })
+  ] });
+}
+Te.displayName = "TableSkeleton";
+function Me({
+  icon: r,
+  title: p,
+  description: c,
+  action: a,
+  colSpan: g
+}) {
+  return /* @__PURE__ */ e(f, { children: /* @__PURE__ */ e(u, { colSpan: g, sx: { textAlign: "center", py: 6, border: 0 }, children: /* @__PURE__ */ s(d, { sx: { display: "flex", flexDirection: "column", alignItems: "center", gap: 1.5 }, children: [
+    r && /* @__PURE__ */ e(d, { sx: { color: "var(--ov-fg-faint)", fontSize: 40 }, children: r }),
+    /* @__PURE__ */ e(x, { variant: "subtitle1", sx: { fontWeight: 600, color: "var(--ov-fg-base)" }, children: p }),
+    c && /* @__PURE__ */ e(x, { variant: "body2", sx: { color: "var(--ov-fg-muted)", maxWidth: 360 }, children: c }),
+    a && /* @__PURE__ */ e(d, { sx: { mt: 1 }, children: a })
+  ] }) }) });
+}
+Me.displayName = "TableEmptyState";
+function Ae({
+  columns: r,
+  data: p,
+  rowHeight: c = 30,
+  selection: a = !1,
+  selectedRows: g,
+  onSelectionChange: i,
+  onRowClick: h,
+  rowActions: m,
+  searchable: S = !1,
+  searchPlaceholder: z = "Search...",
+  searchValue: b,
+  onSearchChange: M,
+  toolbar: y,
+  countLabel: v,
+  loading: D = !1,
+  skeletonRows: $ = 8,
+  emptyState: W,
+  stickyHeader: B = !0,
+  sx: R
+}) {
+  const [k, C] = w([]), [T, n] = w({}), [t, j] = w(""), F = g ?? T, te = i ?? n, L = b ?? t, G = M ?? j, E = J(() => {
+    const l = [];
+    return a && l.push({
+      id: "__select",
+      header: ({ table: o }) => /* @__PURE__ */ e(
+        _,
+        {
+          size: "small",
+          checked: o.getIsAllRowsSelected(),
+          indeterminate: o.getIsSomeRowsSelected(),
+          onChange: o.getToggleAllRowsSelectedHandler(),
+          sx: { p: 0, color: "var(--ov-fg-faint)", "&.Mui-checked, &.MuiCheckbox-indeterminate": { color: "var(--ov-accent-fg)" } }
+        }
+      ),
+      cell: ({ row: o }) => /* @__PURE__ */ e(
+        _,
+        {
+          size: "small",
+          checked: o.getIsSelected(),
+          onChange: o.getToggleSelectedHandler(),
+          onClick: (P) => P.stopPropagation(),
+          sx: { p: 0, color: "var(--ov-fg-faint)", "&.Mui-checked": { color: "var(--ov-accent-fg)" } }
+        }
+      ),
+      size: 32,
+      enableSorting: !1
+    }), l.push(...r), m && l.push({
+      id: "__actions",
+      header: "",
+      cell: ({ row: o }) => /* @__PURE__ */ e(d, { onClick: (P) => P.stopPropagation(), children: m(o.original) }),
+      size: 36,
+      enableSorting: !1
+    }), l;
+  }, [r, a, m]), A = K({
+    data: p,
+    columns: E,
+    state: { sorting: k, rowSelection: F, globalFilter: L },
+    onSortingChange: C,
+    onRowSelectionChange: te,
+    onGlobalFilterChange: G,
+    getCoreRowModel: X(),
+    getSortedRowModel: U(),
+    getFilteredRowModel: Q(),
+    enableRowSelection: a,
+    enableMultiRowSelection: a
+  }), le = ce((l) => {
+    h?.(l);
+  }, [h]), re = c + 2, N = "8px", V = "0px";
+  return /* @__PURE__ */ s(
+    d,
+    {
+      sx: {
+        display: "flex",
+        flexDirection: "column",
+        flex: 1,
+        minHeight: 0,
+        bgcolor: "var(--ov-bg-base)",
+        ...typeof R == "object" && !Array.isArray(R) ? R : {}
+      },
+      children: [
+        (S || y || v) && /* @__PURE__ */ s(
+          d,
+          {
+            sx: {
+              display: "flex",
+              alignItems: "center",
+              gap: 1,
+              px: 1,
+              py: 0.5,
+              borderBottom: "1px solid var(--ov-border-default)",
+              bgcolor: "var(--ov-bg-surface)",
+              flexShrink: 0
+            },
+            children: [
+              S && /* @__PURE__ */ s(
+                d,
+                {
+                  sx: {
+                    display: "flex",
+                    alignItems: "center",
+                    flex: 1,
+                    maxWidth: 360,
+                    height: 28,
+                    border: "1px solid var(--ov-border-default)",
+                    borderRadius: "4px",
+                    bgcolor: "var(--ov-bg-base)",
+                    px: 0.75,
+                    "&:focus-within": { borderColor: "var(--ov-accent)" }
+                  },
+                  children: [
+                    /* @__PURE__ */ e(Ce, { sx: { fontSize: 14, color: "var(--ov-fg-faint)", mr: 0.5 } }),
+                    /* @__PURE__ */ e(
+                      ye,
+                      {
+                        value: L,
+                        onChange: (l) => G(l.target.value),
+                        placeholder: v ? `Search ${v}...` : z,
+                        sx: {
+                          flex: 1,
+                          fontSize: "0.75rem",
+                          color: "var(--ov-fg-default)",
+                          "& input": { py: 0, px: 0 },
+                          "& input::placeholder": { color: "var(--ov-fg-faint)", opacity: 1 }
+                        }
+                      }
+                    )
+                  ]
+                }
+              ),
+              !S && v && /* @__PURE__ */ e(x, { sx: { fontSize: "0.75rem", color: "var(--ov-fg-muted)", fontWeight: 500 }, children: v }),
+              /* @__PURE__ */ e(d, { sx: { flex: 1 } }),
+              y
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(d, { sx: { flex: 1, overflow: "auto", minHeight: 0 }, children: /* @__PURE__ */ s(
+          "table",
+          {
+            style: {
+              width: "100%",
+              borderCollapse: "collapse",
+              fontFamily: "var(--ov-font-ui)",
+              fontSize: "0.75rem",
+              tableLayout: "fixed"
+            },
+            children: [
+              /* @__PURE__ */ e("colgroup", { children: A.getAllColumns().map((l) => /* @__PURE__ */ e("col", { style: { width: l.getSize() !== 150 ? l.getSize() : void 0 } }, l.id)) }),
+              /* @__PURE__ */ e("thead", { children: A.getHeaderGroups().map((l) => /* @__PURE__ */ e(
+                "tr",
+                {
+                  style: {
+                    height: re,
+                    ...B ? { position: "sticky", top: 0, zIndex: 2 } : {}
+                  },
+                  children: l.headers.map((o) => /* @__PURE__ */ e(
+                    "th",
+                    {
+                      style: {
+                        padding: `${V} ${N}`,
+                        textAlign: "left",
+                        fontWeight: 600,
+                        fontSize: "0.6875rem",
+                        color: "var(--ov-fg-muted)",
+                        backgroundColor: "var(--ov-bg-surface)",
+                        borderBottom: "1px solid var(--ov-border-default)",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        userSelect: "none",
+                        letterSpacing: "0.01em"
+                      },
+                      children: o.isPlaceholder ? null : o.column.getCanSort() ? /* @__PURE__ */ e(
+                        oe,
+                        {
+                          active: !!o.column.getIsSorted(),
+                          direction: o.column.getIsSorted() === "desc" ? "desc" : "asc",
+                          onClick: o.column.getToggleSortingHandler(),
+                          sx: {
+                            fontSize: "inherit",
+                            fontWeight: "inherit",
+                            color: "inherit !important",
+                            "& .MuiTableSortLabel-icon": { fontSize: 12, opacity: 0.5 }
+                          },
+                          children: I(o.column.columnDef.header, o.getContext())
+                        }
+                      ) : I(o.column.columnDef.header, o.getContext())
+                    },
+                    o.id
+                  ))
+                },
+                l.id
+              )) }),
+              /* @__PURE__ */ e("tbody", { children: D ? Array.from({ length: $ }).map((l, o) => /* @__PURE__ */ e("tr", { style: { height: c }, children: E.map((P, ne) => /* @__PURE__ */ e(
+                "td",
+                {
+                  style: {
+                    padding: `${V} ${N}`,
+                    borderBottom: "1px solid var(--ov-border-muted)"
+                  },
+                  children: /* @__PURE__ */ e(H, { variant: "text", width: "70%", sx: { fontSize: "0.75rem" } })
+                },
+                ne
+              )) }, `skel-${o}`)) : A.getRowModel().rows.length === 0 ? /* @__PURE__ */ e("tr", { children: /* @__PURE__ */ e(
+                "td",
+                {
+                  colSpan: E.length,
+                  style: { textAlign: "center", padding: "32px 8px", color: "var(--ov-fg-faint)" },
+                  children: W ?? /* @__PURE__ */ e(x, { sx: { fontSize: "0.75rem", color: "var(--ov-fg-faint)" }, children: "No items to display" })
+                }
+              ) }) : A.getRowModel().rows.map((l) => /* @__PURE__ */ e(
+                "tr",
+                {
+                  onClick: () => le(l.original),
+                  style: {
+                    height: c,
+                    cursor: h ? "pointer" : void 0,
+                    backgroundColor: l.getIsSelected() ? "var(--ov-accent-subtle)" : void 0
+                  },
+                  onMouseEnter: (o) => {
+                    l.getIsSelected() || (o.currentTarget.style.backgroundColor = "var(--ov-state-hover)");
+                  },
+                  onMouseLeave: (o) => {
+                    o.currentTarget.style.backgroundColor = l.getIsSelected() ? "var(--ov-accent-subtle)" : "";
+                  },
+                  children: l.getVisibleCells().map((o) => /* @__PURE__ */ e(
+                    "td",
+                    {
+                      style: {
+                        padding: `${V} ${N}`,
+                        fontSize: "0.75rem",
+                        color: "var(--ov-fg-default)",
+                        borderBottom: "1px solid var(--ov-border-muted)",
+                        whiteSpace: "nowrap",
+                        overflow: "hidden",
+                        textOverflow: "ellipsis",
+                        lineHeight: `${c}px`
+                      },
+                      children: I(o.column.columnDef.cell, o.getContext())
+                    },
+                    o.id
+                  ))
+                },
+                l.id
+              )) })
+            ]
+          }
+        ) })
+      ]
+    }
+  );
+}
+Ae.displayName = "IDETable";
+export {
+  Ie as ColumnFilter,
+  ze as DataTable,
+  Ae as IDETable,
+  Me as TableEmptyState,
+  Te as TableSkeleton,
+  Re as TableToolbar
+};

package/dist/theme/AppTheme.d.ts

@@ -0,0 +1,14 @@
+import { ThemeOptions } from '@mui/material/styles';
+import { ReactNode } from 'react';
+export type ColorMode = 'light' | 'dark' | 'system';
+interface AppThemeProps {
+    children: ReactNode;
+    /** Additional component overrides to merge into the theme */
+    themeComponents?: ThemeOptions['components'];
+    /** Skip all custom theming (renders children with a bare MUI theme) */
+    disableCustomTheme?: boolean;
+    /** Default color mode. Defaults to 'dark'. */
+    defaultMode?: ColorMode;
+}
+export default function AppTheme({ children, disableCustomTheme, themeComponents, defaultMode, }: AppThemeProps): import("react/jsx-runtime").JSX.Element;
+export {};

package/dist/theme/customizations/dataDisplay.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material/styles';
+export declare const dataDisplayCustomizations: Components<Theme>;

package/dist/theme/customizations/feedback.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material/styles';
+export declare const feedbackCustomizations: Components<Theme>;

package/dist/theme/customizations/inputs.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material/styles';
+export declare const inputsCustomizations: Components<Theme>;

package/dist/theme/customizations/navigation.d.ts

@@ -0,0 +1,2 @@
+import { Components, Theme } from '@mui/material/styles';
+export declare const navigationCustomizations: Components<Theme>;

package/dist/theme/index.d.ts

@@ -0,0 +1,36 @@
+/**
+ * Theme exports for @omniviewdev/ui
+ *
+ * Two systems coexist:
+ *  1. MUI Theme (AppTheme, primitives, customizations) — controls MUI component appearance
+ *  2. CSS Custom Properties (tokens.css, applyTheme/resetTheme) — controls custom component styling
+ */
+export { default as AppTheme } from './AppTheme';
+export type { ColorMode } from './AppTheme';
+export { brand, gray, green, orange, red, purple, getDesignTokens, typography, shape, customShadows, } from './primitives';
+export { inputsCustomizations } from './customizations/inputs';
+export { navigationCustomizations } from './customizations/navigation';
+export { feedbackCustomizations } from './customizations/feedback';
+export { dataDisplayCustomizations } from './customizations/dataDisplay';
+export interface OmniviewTheme {
+    name: string;
+    type: "dark" | "light";
+    colors: Record<string, string>;
+    typography?: {
+        fontFamily?: string;
+        monoFontFamily?: string;
+        fontSize?: number;
+    };
+}
+/**
+ * Apply a theme by setting CSS custom properties on :root.
+ *
+ * Color keys use dot notation (e.g., "bg.surface") which maps to
+ * the CSS property `--ov-bg-surface`.
+ */
+export declare function applyTheme(theme: OmniviewTheme): void;
+/**
+ * Reset to built-in theme (remove all user overrides).
+ * Removes inline style overrides so the tokens.css cascade takes effect.
+ */
+export declare function resetTheme(type?: "dark" | "light"): void;