@omniviewdev/ui 0.1.0

package/dist/navigation.js

@@ -0,0 +1,429 @@
+import { T as vr, a as ur } from "./TabPanel-DLHbgKpl.js";
+import { jsx as e, jsxs as x } from "react/jsx-runtime";
+import { useState as D, useCallback as w } from "react";
+import h from "@mui/material/Box";
+import N from "@mui/material/Collapse";
+import k from "@mui/material/Typography";
+import B from "@mui/material/Checkbox";
+import L from "@mui/material/CircularProgress";
+import { LuChevronDown as W, LuChevronRight as M, LuChevronLeft as j, LuX as E, LuPlus as O } from "react-icons/lu";
+import V from "@mui/material/Breadcrumbs";
+import P from "@mui/material/Link";
+import X from "@mui/material/Stepper";
+import _ from "@mui/material/Step";
+import q from "@mui/material/StepLabel";
+import F from "@mui/material/Pagination";
+import T from "@mui/material/IconButton";
+import { toMuiSize as I } from "./types.js";
+function A({
+  node: r,
+  depth: n,
+  selected: p,
+  onSelect: a,
+  expanded: i,
+  onToggle: t,
+  checkboxes: d,
+  lazyLoad: f,
+  onLoadChildren: u,
+  loadingNodes: y,
+  setLoadingNodes: b,
+  dynamicChildren: g,
+  setDynamicChildren: o
+}) {
+  const v = i.has(r.id), s = p === r.id, l = g.get(r.id) ?? r.children, S = l && l.length > 0 || f && !g.has(r.id), m = y.has(r.id), C = async () => {
+    if (f && !g.has(r.id) && u) {
+      b((c) => new Set(c).add(r.id));
+      try {
+        const c = await u(r.id);
+        o((z) => new Map(z).set(r.id, c));
+      } finally {
+        b((c) => {
+          const z = new Set(c);
+          return z.delete(r.id), z;
+        });
+      }
+    }
+    t(r.id);
+  };
+  return /* @__PURE__ */ x(h, { children: [
+    /* @__PURE__ */ x(
+      h,
+      {
+        onClick: () => {
+          r.disabled || a?.(r.id);
+        },
+        sx: {
+          display: "flex",
+          alignItems: "center",
+          gap: 0.5,
+          py: 0.25,
+          px: 1,
+          pl: n * 2 + 1,
+          cursor: r.disabled ? "default" : "pointer",
+          opacity: r.disabled ? 0.5 : 1,
+          borderRadius: "4px",
+          bgcolor: s ? "var(--ov-accent-subtle)" : "transparent",
+          color: s ? "var(--ov-accent-fg)" : "var(--ov-fg-default)",
+          "&:hover": {
+            bgcolor: s ? "var(--ov-accent-subtle)" : "var(--ov-state-hover)"
+          },
+          fontSize: "0.8125rem"
+        },
+        children: [
+          S ? /* @__PURE__ */ e(
+            h,
+            {
+              onClick: (c) => {
+                c.stopPropagation(), C();
+              },
+              sx: { display: "flex", alignItems: "center", cursor: "pointer", flexShrink: 0 },
+              children: m ? /* @__PURE__ */ e(L, { size: 12 }) : v ? /* @__PURE__ */ e(W, { size: 14 }) : /* @__PURE__ */ e(M, { size: 14 })
+            }
+          ) : /* @__PURE__ */ e(h, { sx: { width: 14, flexShrink: 0 } }),
+          d && /* @__PURE__ */ e(
+            B,
+            {
+              size: "small",
+              checked: s,
+              disabled: r.disabled,
+              onClick: (c) => c.stopPropagation(),
+              onChange: () => a?.(r.id),
+              sx: { p: 0 }
+            }
+          ),
+          r.icon && /* @__PURE__ */ e(h, { sx: { display: "flex", alignItems: "center", flexShrink: 0 }, children: r.icon }),
+          /* @__PURE__ */ e(k, { variant: "body2", sx: { flex: 1, fontSize: "inherit", color: "inherit" }, noWrap: !0, children: r.label }),
+          r.badge
+        ]
+      }
+    ),
+    S && l && /* @__PURE__ */ e(N, { in: v, unmountOnExit: !0, children: l.map((c) => /* @__PURE__ */ e(
+      A,
+      {
+        node: c,
+        depth: n + 1,
+        selected: p,
+        onSelect: a,
+        expanded: i,
+        onToggle: t,
+        checkboxes: d,
+        lazyLoad: f,
+        onLoadChildren: u,
+        loadingNodes: y,
+        setLoadingNodes: b,
+        dynamicChildren: g,
+        setDynamicChildren: o
+      },
+      c.id
+    )) })
+  ] });
+}
+function G({
+  nodes: r,
+  selected: n,
+  onSelect: p,
+  expanded: a,
+  onToggle: i,
+  checkboxes: t = !1,
+  lazyLoad: d = !1,
+  onLoadChildren: f,
+  sx: u
+}) {
+  const [y, b] = D(/* @__PURE__ */ new Set()), [g, o] = D(/* @__PURE__ */ new Set()), [v, s] = D(/* @__PURE__ */ new Map()), l = a ? new Set(a) : y, S = w(
+    (m) => {
+      i ? i(m) : b((C) => {
+        const c = new Set(C);
+        return c.has(m) ? c.delete(m) : c.add(m), c;
+      });
+    },
+    [i]
+  );
+  return /* @__PURE__ */ e(h, { sx: u, children: r.map((m) => /* @__PURE__ */ e(
+    A,
+    {
+      node: m,
+      depth: 0,
+      selected: n,
+      onSelect: p,
+      expanded: l,
+      onToggle: S,
+      checkboxes: t,
+      lazyLoad: d,
+      onLoadChildren: f,
+      loadingNodes: g,
+      setLoadingNodes: o,
+      dynamicChildren: v,
+      setDynamicChildren: s
+    },
+    m.id
+  )) });
+}
+G.displayName = "TreeView";
+function H({
+  items: r,
+  separator: n,
+  maxItems: p,
+  sx: a
+}) {
+  return /* @__PURE__ */ e(
+    V,
+    {
+      separator: n ?? "/",
+      maxItems: p,
+      sx: {
+        fontSize: "0.8125rem",
+        color: "var(--ov-fg-muted)",
+        ...typeof a == "object" && !Array.isArray(a) ? a : {}
+      },
+      children: r.map((i, t) => {
+        const d = t === r.length - 1, f = /* @__PURE__ */ x(h, { sx: { display: "inline-flex", alignItems: "center", gap: 0.5 }, children: [
+          i.icon,
+          /* @__PURE__ */ e("span", { children: i.label })
+        ] });
+        return d ? /* @__PURE__ */ e(k, { variant: "body2", sx: { fontSize: "inherit", color: "var(--ov-fg-base)", fontWeight: 500 }, children: f }, t) : i.onClick ? /* @__PURE__ */ e(
+          P,
+          {
+            component: "button",
+            variant: "body2",
+            onClick: i.onClick,
+            underline: "hover",
+            sx: { fontSize: "inherit", cursor: "pointer", color: "inherit" },
+            children: f
+          },
+          t
+        ) : i.href ? /* @__PURE__ */ e(P, { href: i.href, variant: "body2", underline: "hover", sx: { fontSize: "inherit", color: "inherit" }, children: f }, t) : /* @__PURE__ */ e(k, { variant: "body2", sx: { fontSize: "inherit", color: "inherit" }, children: f }, t);
+      })
+    }
+  );
+}
+H.displayName = "Breadcrumbs";
+function J({
+  steps: r,
+  activeStep: n,
+  orientation: p = "horizontal",
+  variant: a = "linear",
+  sx: i
+}) {
+  return /* @__PURE__ */ e(
+    X,
+    {
+      activeStep: n,
+      orientation: p,
+      nonLinear: a === "nonLinear",
+      sx: i,
+      children: r.map((t, d) => /* @__PURE__ */ e(_, { children: /* @__PURE__ */ e(
+        q,
+        {
+          icon: t.icon,
+          optional: t.optional ? /* @__PURE__ */ e(k, { variant: "caption", sx: { color: "var(--ov-fg-muted)" }, children: "Optional" }) : t.description ? /* @__PURE__ */ e(k, { variant: "caption", sx: { color: "var(--ov-fg-muted)" }, children: t.description }) : void 0,
+          children: t.label
+        }
+      ) }, d))
+    }
+  );
+}
+J.displayName = "Stepper";
+function K({
+  count: r,
+  page: n,
+  onChange: p,
+  variant: a = "full",
+  size: i = "md",
+  sx: t
+}) {
+  if (a === "compact") {
+    const d = I(i);
+    return /* @__PURE__ */ x(h, { sx: { display: "flex", alignItems: "center", gap: 1, ...typeof t == "object" && !Array.isArray(t) ? t : {} }, children: [
+      /* @__PURE__ */ e(
+        T,
+        {
+          size: d,
+          disabled: n <= 1,
+          onClick: () => p(n - 1),
+          children: /* @__PURE__ */ e(j, {})
+        }
+      ),
+      /* @__PURE__ */ x(h, { sx: { fontSize: "0.8125rem", color: "var(--ov-fg-default)" }, children: [
+        n,
+        " / ",
+        r
+      ] }),
+      /* @__PURE__ */ e(
+        T,
+        {
+          size: d,
+          disabled: n >= r,
+          onClick: () => p(n + 1),
+          children: /* @__PURE__ */ e(M, {})
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ e(
+    F,
+    {
+      count: r,
+      page: n,
+      onChange: (d, f) => p(f),
+      size: I(i),
+      sx: t
+    }
+  );
+}
+K.displayName = "Pagination";
+function Q({
+  tabs: r,
+  activeId: n,
+  onSelect: p,
+  onClose: a,
+  onReorder: i,
+  onAdd: t,
+  onContextMenu: d,
+  maxTabWidth: f = 180,
+  sx: u
+}) {
+  const y = w((o, v) => {
+    o.dataTransfer.setData("text/plain", String(v)), o.dataTransfer.effectAllowed = "move";
+  }, []), b = w((o, v) => {
+    o.preventDefault();
+    const s = parseInt(o.dataTransfer.getData("text/plain"), 10);
+    if (isNaN(s) || s === v || !i) return;
+    const l = [...r], [S] = l.splice(s, 1);
+    l.splice(v, 0, S), i(l);
+  }, [r, i]), g = w((o) => {
+    o.preventDefault(), o.dataTransfer.dropEffect = "move";
+  }, []);
+  return /* @__PURE__ */ x(
+    h,
+    {
+      sx: {
+        display: "flex",
+        alignItems: "end",
+        height: 36,
+        overflow: "auto",
+        bgcolor: "var(--ov-bg-surface)",
+        borderBottom: "1px solid var(--ov-border-default)",
+        scrollbarWidth: "none",
+        "&::-webkit-scrollbar": { display: "none" },
+        ...typeof u == "object" && !Array.isArray(u) ? u : {}
+      },
+      children: [
+        r.map((o, v) => {
+          const s = o.id === n;
+          return /* @__PURE__ */ x(
+            h,
+            {
+              draggable: !!i,
+              onDragStart: (l) => y(l, v),
+              onDragOver: g,
+              onDrop: (l) => b(l, v),
+              onContextMenu: (l) => {
+                d && (l.preventDefault(), d(o.id, l));
+              },
+              onClick: () => p(o.id),
+              sx: {
+                display: "flex",
+                alignItems: "center",
+                gap: 0.75,
+                maxWidth: f,
+                height: s ? 35 : 32,
+                px: 1.5,
+                cursor: "pointer",
+                flexShrink: 0,
+                borderBottom: s ? "2px solid var(--ov-accent)" : "2px solid transparent",
+                bgcolor: s ? "var(--ov-bg-base)" : "transparent",
+                color: s ? "var(--ov-fg-base)" : "var(--ov-fg-muted)",
+                "&:hover": {
+                  bgcolor: s ? "var(--ov-bg-base)" : "var(--ov-state-hover)",
+                  "& .tab-close": { opacity: 1 }
+                }
+              },
+              children: [
+                o.icon && /* @__PURE__ */ e(h, { sx: { display: "flex", flexShrink: 0, fontSize: 14 }, children: o.icon }),
+                /* @__PURE__ */ e(
+                  k,
+                  {
+                    noWrap: !0,
+                    sx: {
+                      fontSize: "var(--ov-text-xs)",
+                      fontWeight: s ? 500 : 400,
+                      flex: 1,
+                      minWidth: 0
+                    },
+                    children: o.label
+                  }
+                ),
+                o.closable !== !1 && a && /* @__PURE__ */ e(
+                  T,
+                  {
+                    className: "tab-close",
+                    size: "small",
+                    onClick: (l) => {
+                      l.stopPropagation(), a(o.id);
+                    },
+                    sx: {
+                      p: "1px",
+                      opacity: s ? 0.7 : 0,
+                      color: "inherit",
+                      "&:hover": { opacity: 1, bgcolor: "var(--ov-state-hover)" }
+                    },
+                    children: /* @__PURE__ */ e(E, { size: 12 })
+                  }
+                )
+              ]
+            },
+            o.id
+          );
+        }),
+        t && /* @__PURE__ */ e(
+          T,
+          {
+            size: "small",
+            onClick: t,
+            sx: {
+              mx: 0.5,
+              p: "4px",
+              color: "var(--ov-fg-muted)",
+              "&:hover": { bgcolor: "var(--ov-state-hover)" }
+            },
+            children: /* @__PURE__ */ e(O, { size: 14 })
+          }
+        )
+      ]
+    }
+  );
+}
+Q.displayName = "DraggableTabs";
+function U({
+  children: r,
+  value: n,
+  activeValue: p,
+  sx: a
+}) {
+  const i = n === p;
+  return /* @__PURE__ */ e(
+    h,
+    {
+      role: "tabpanel",
+      hidden: !i,
+      sx: {
+        display: i ? "block" : "none",
+        flex: 1,
+        overflow: "auto",
+        ...typeof a == "object" && !Array.isArray(a) ? a : {}
+      },
+      children: r
+    }
+  );
+}
+U.displayName = "PersistentTabPanel";
+export {
+  H as Breadcrumbs,
+  Q as DraggableTabs,
+  K as Pagination,
+  U as PersistentTabPanel,
+  J as Stepper,
+  vr as TabPanel,
+  ur as Tabs,
+  G as TreeView
+};

package/dist/overlays/Dialog.d.ts

@@ -0,0 +1,18 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface DialogProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    icon?: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl' | 'fullscreen';
+    variant?: 'default' | 'confirm' | 'danger';
+    actions?: React.ReactNode;
+    disableBackdropClose?: boolean;
+    children: React.ReactNode;
+    sx?: SxProps<Theme>;
+}
+declare function Dialog({ open, onClose, title, icon, size, variant, actions, disableBackdropClose, children, sx, }: DialogProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Dialog {
+    var displayName: string;
+}
+export default Dialog;

package/dist/overlays/Drawer.d.ts

@@ -0,0 +1,17 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface DrawerProps {
+    open: boolean;
+    onClose: () => void;
+    anchor?: 'left' | 'right' | 'bottom';
+    size?: number | string;
+    resizable?: boolean;
+    persistent?: boolean;
+    children: React.ReactNode;
+    title?: string;
+    sx?: SxProps<Theme>;
+}
+declare function Drawer({ open, onClose, anchor, size, resizable, persistent, children, title, sx, }: DrawerProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Drawer {
+    var displayName: string;
+}
+export default Drawer;

package/dist/overlays/ErrorOverlay.d.ts

@@ -0,0 +1,21 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface ErrorOverlayAction {
+    label: string;
+    onClick: () => void;
+}
+export interface ErrorOverlayProps {
+    open: boolean;
+    onClose: () => void;
+    title?: string;
+    message: string;
+    file?: string;
+    line?: number;
+    stack?: string;
+    actions?: ErrorOverlayAction[];
+    sx?: SxProps<Theme>;
+}
+declare function ErrorOverlay({ open, onClose, title, message, file, line, stack, actions, sx, }: ErrorOverlayProps): import("react/jsx-runtime").JSX.Element | null;
+declare namespace ErrorOverlay {
+    var displayName: string;
+}
+export default ErrorOverlay;

package/dist/overlays/Modal.d.ts

@@ -0,0 +1,14 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface ModalProps {
+    open: boolean;
+    onClose: () => void;
+    children: React.ReactNode;
+    size?: 'sm' | 'md' | 'lg' | 'xl';
+    backdrop?: boolean;
+    sx?: SxProps<Theme>;
+}
+declare function Modal({ open, onClose, children, size, backdrop, sx, }: ModalProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Modal {
+    var displayName: string;
+}
+export default Modal;

package/dist/overlays/NotificationCenter.d.ts

@@ -0,0 +1,31 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+import { SemanticColor } from '../types';
+export interface NotificationItem {
+    id: string;
+    title: string;
+    message?: string;
+    timestamp: Date;
+    read?: boolean;
+    color?: SemanticColor;
+    icon?: React.ReactNode;
+    action?: {
+        label: string;
+        onClick: () => void;
+    };
+}
+export interface NotificationCenterProps {
+    open: boolean;
+    onClose: () => void;
+    notifications: NotificationItem[];
+    onDismiss?: (id: string) => void;
+    onMarkRead?: (id: string) => void;
+    onClearAll?: () => void;
+    width?: number;
+    sx?: SxProps<Theme>;
+}
+declare function NotificationCenter({ open, onClose, notifications, onDismiss, onMarkRead, onClearAll, width, sx, }: NotificationCenterProps): import("react/jsx-runtime").JSX.Element;
+declare namespace NotificationCenter {
+    var displayName: string;
+}
+export default NotificationCenter;

package/dist/overlays/Popover.d.ts

@@ -0,0 +1,15 @@
+import { SxProps, Theme } from '@mui/material/styles';
+export interface PopoverProps {
+    open: boolean;
+    onClose: () => void;
+    anchorEl: HTMLElement | null;
+    children: React.ReactNode;
+    width?: number | string;
+    placement?: 'top' | 'bottom' | 'left' | 'right';
+    sx?: SxProps<Theme>;
+}
+declare function Popover({ open, onClose, anchorEl, children, width, placement, sx, }: PopoverProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Popover {
+    var displayName: string;
+}
+export default Popover;

package/dist/overlays/Spotlight.d.ts

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+import { SxProps, Theme } from '@mui/material/styles';
+export interface SpotlightResultItem {
+    id: string;
+    label: string;
+    description?: string;
+    icon?: React.ReactNode;
+    section?: string;
+    onSelect: () => void;
+}
+export interface SpotlightProps {
+    open: boolean;
+    onClose: () => void;
+    onSearch: (query: string) => SpotlightResultItem[] | Promise<SpotlightResultItem[]>;
+    placeholder?: string;
+    recentItems?: SpotlightResultItem[];
+    width?: number;
+    sx?: SxProps<Theme>;
+}
+declare function Spotlight({ open, onClose, onSearch, placeholder, recentItems, width, sx, }: SpotlightProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Spotlight {
+    var displayName: string;
+}
+export default Spotlight;

package/dist/overlays/ToastProvider.d.ts

@@ -0,0 +1,32 @@
+import { SemanticColor } from '../types';
+export interface ToastItem {
+    id: string;
+    message: string;
+    color?: SemanticColor;
+    duration?: number;
+    action?: React.ReactNode;
+    timestamp: number;
+}
+type ToastAction = {
+    type: 'ADD';
+    toast: ToastItem;
+} | {
+    type: 'DISMISS';
+    id: string;
+} | {
+    type: 'DISMISS_ALL';
+};
+export interface ToastContextValue {
+    dispatch: React.Dispatch<ToastAction>;
+}
+export declare const ToastContext: import('react').Context<ToastContextValue | null>;
+export interface ToastProviderProps {
+    children: React.ReactNode;
+    maxVisible?: number;
+    position?: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
+}
+declare function ToastProvider({ children, maxVisible, position, }: ToastProviderProps): import("react/jsx-runtime").JSX.Element;
+declare namespace ToastProvider {
+    var displayName: string;
+}
+export default ToastProvider;

package/dist/overlays/Tooltip.d.ts

@@ -0,0 +1,15 @@
+export interface TooltipProps {
+    /** Tooltip content — `content` is an alias for `title` */
+    title?: React.ReactNode;
+    /** Alias for title */
+    content?: React.ReactNode;
+    variant?: 'default' | 'rich' | 'code';
+    placement?: 'top' | 'bottom' | 'left' | 'right' | 'top-start' | 'top-end' | 'bottom-start' | 'bottom-end';
+    delay?: number;
+    children: React.ReactElement;
+}
+declare function Tooltip({ title, content, variant, placement, delay, children, }: TooltipProps): import("react/jsx-runtime").JSX.Element;
+declare namespace Tooltip {
+    var displayName: string;
+}
+export default Tooltip;

package/dist/overlays/index.d.ts

@@ -0,0 +1,20 @@
+export { default as Dialog } from './Dialog';
+export type { DialogProps } from './Dialog';
+export { default as Modal } from './Modal';
+export type { ModalProps } from './Modal';
+export { default as Drawer } from './Drawer';
+export type { DrawerProps } from './Drawer';
+export { default as Tooltip } from './Tooltip';
+export type { TooltipProps } from './Tooltip';
+export { default as Popover } from './Popover';
+export type { PopoverProps } from './Popover';
+export { default as ToastProvider } from './ToastProvider';
+export type { ToastProviderProps, ToastItem } from './ToastProvider';
+export { useToast } from './useToast';
+export type { UseToastReturn } from './useToast';
+export { default as NotificationCenter } from './NotificationCenter';
+export type { NotificationCenterProps, NotificationItem } from './NotificationCenter';
+export { default as ErrorOverlay } from './ErrorOverlay';
+export type { ErrorOverlayProps, ErrorOverlayAction } from './ErrorOverlay';
+export { default as Spotlight } from './Spotlight';
+export type { SpotlightProps, SpotlightResultItem } from './Spotlight';

package/dist/overlays/useToast.d.ts

@@ -0,0 +1,21 @@
+import { SemanticColor } from '../types';
+interface ToastOptions {
+    message: string;
+    color?: SemanticColor;
+    duration?: number;
+    action?: React.ReactNode;
+}
+interface ToastFn {
+    (options: ToastOptions): void;
+    success: (message: string) => void;
+    error: (message: string) => void;
+    warning: (message: string) => void;
+    info: (message: string) => void;
+}
+export interface UseToastReturn {
+    toast: ToastFn;
+    dismiss: (id: string) => void;
+    dismissAll: () => void;
+}
+export declare function useToast(): UseToastReturn;
+export {};