basalt-ui 1.41.0 → 2.0.1

package/dist/provider/connectivity-indicator.js

@@ -1,205 +0,0 @@
-import { jsx, jsxs } from "react/jsx-runtime";
-import { ActionIcon, Badge, Divider, Group, Popover, Stack, Text } from "@mantine/core";
-import { useDisclosure } from "@mantine/hooks";
-import { useRef } from "react";
-import { alpha, VX } from "../tokens/index.js";
-import { useConnectivity } from "./use-connectivity.js";
-const HOVER_OPEN_DELAY = 150;
-const HOVER_CLOSE_DELAY = 200;
-function GlobeIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: 14,
-      height: 14,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ jsx("circle", { cx: "12", cy: "12", r: "10" }),
-        /* @__PURE__ */ jsx("path", { d: "M2 12h20" }),
-        /* @__PURE__ */ jsx("path", { d: "M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z" })
-      ]
-    }
-  );
-}
-function LightningIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: 14,
-      height: 14,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": true,
-      children: /* @__PURE__ */ jsx("path", { d: "M13 2L3 14h9l-1 8 10-12h-9l1-8z" })
-    }
-  );
-}
-function AntennaIcon() {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: 14,
-      height: 14,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M5 17l3-5 3 5" }),
-        /* @__PURE__ */ jsx("path", { d: "M11 13l3-5 3 5" }),
-        /* @__PURE__ */ jsx("path", { d: "M17 9l3-5 3 5" }),
-        /* @__PURE__ */ jsx("path", { d: "M3 21h18" })
-      ]
-    }
-  );
-}
-function HeartIcon() {
-  return /* @__PURE__ */ jsx(
-    "svg",
-    {
-      width: 14,
-      height: 14,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": true,
-      children: /* @__PURE__ */ jsx("path", { d: "M20.84 4.61a5.5 5.5 0 0 0-7.78 0L12 5.67l-1.06-1.06a5.5 5.5 0 0 0-7.78 7.78l1.06 1.06L12 21.23l7.78-7.78 1.06-1.06a5.5 5.5 0 0 0 0-7.78z" })
-    }
-  );
-}
-function WifiIcon({ size = 18 }) {
-  return /* @__PURE__ */ jsxs(
-    "svg",
-    {
-      width: size,
-      height: size,
-      viewBox: "0 0 24 24",
-      fill: "none",
-      stroke: "currentColor",
-      strokeWidth: 2,
-      strokeLinecap: "round",
-      strokeLinejoin: "round",
-      "aria-hidden": true,
-      children: [
-        /* @__PURE__ */ jsx("path", { d: "M12 18h.01" }),
-        /* @__PURE__ */ jsx("path", { d: "M9.172 15.172a4 4 0 0 1 5.656 0" }),
-        /* @__PURE__ */ jsx("path", { d: "M6.343 12.343a8 8 0 0 1 11.314 0" }),
-        /* @__PURE__ */ jsx("path", { d: "M3.515 9.515c4.686 -4.687 12.284 -4.687 16.97 0" })
-      ]
-    }
-  );
-}
-function SignalRow({
-  label,
-  value,
-  icon
-}) {
-  const color = value === true ? VX.status.good : value === false ? VX.status.bad : "dimmed";
-  const text = value === true ? "Connected" : value === false ? "Disconnected" : "Not configured";
-  return /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-    /* @__PURE__ */ jsxs(Group, { gap: "xs", children: [
-      icon,
-      /* @__PURE__ */ jsx(Text, { size: "sm", children: label })
-    ] }),
-    /* @__PURE__ */ jsx(Text, { size: "sm", c: color, children: text })
-  ] });
-}
-const STATUS_CONFIG = {
-  online: { token: VX.status.good, label: "Connected" },
-  degraded: { token: VX.status.warn, label: "Degraded" },
-  offline: { token: VX.status.bad, label: "Offline" }
-};
-const ICON_COLOR = {
-  online: VX.faint,
-  degraded: VX.status.warn,
-  offline: VX.status.bad
-};
-function ConnectivityIndicator({ className, style } = {}) {
-  const [opened, { open, toggle, close }] = useDisclosure(false);
-  const { status, details } = useConnectivity();
-  const statusCfg = STATUS_CONFIG[status];
-  const timer = useRef(void 0);
-  const scheduleOpen = () => {
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => open(), HOVER_OPEN_DELAY);
-  };
-  const scheduleClose = () => {
-    clearTimeout(timer.current);
-    timer.current = setTimeout(() => close(), HOVER_CLOSE_DELAY);
-  };
-  return /* @__PURE__ */ jsxs(Popover, { opened, onClose: close, position: "bottom-end", withArrow: true, withinPortal: true, children: [
-    /* @__PURE__ */ jsx(Popover.Target, { children: /* @__PURE__ */ jsx(
-      ActionIcon,
-      {
-        variant: "transparent",
-        color: ICON_COLOR[status],
-        size: "ctl",
-        onClick: toggle,
-        onMouseEnter: scheduleOpen,
-        onMouseLeave: scheduleClose,
-        "aria-label": statusCfg.label,
-        "aria-expanded": opened,
-        "aria-haspopup": "dialog",
-        ...className !== void 0 && { className },
-        ...style !== void 0 && { style },
-        children: /* @__PURE__ */ jsx(WifiIcon, {})
-      }
-    ) }),
-    /* @__PURE__ */ jsx(
-      Popover.Dropdown,
-      {
-        p: "md",
-        "aria-label": "Connectivity details",
-        w: 260,
-        onMouseEnter: scheduleOpen,
-        onMouseLeave: scheduleClose,
-        children: /* @__PURE__ */ jsxs(Stack, { gap: "xs", children: [
-          /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
-            /* @__PURE__ */ jsx(Text, { size: "sm", fw: 600, children: "Status" }),
-            /* @__PURE__ */ jsx(
-              Badge,
-              {
-                size: "sm",
-                styles: {
-                  root: {
-                    backgroundColor: alpha(statusCfg.token, 0.13),
-                    color: statusCfg.token,
-                    fontFamily: "var(--basalt-font-mono)",
-                    fontWeight: 600,
-                    fontSize: VX.text.xs,
-                    borderRadius: "var(--vx-radius-ctrl)"
-                  }
-                },
-                children: statusCfg.label
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx(Divider, {}),
-          /* @__PURE__ */ jsx(SignalRow, { label: "Browser", value: details.browserOnline, icon: /* @__PURE__ */ jsx(GlobeIcon, {}) }),
-          /* @__PURE__ */ jsx(SignalRow, { label: "React Query", value: details.queryOnline, icon: /* @__PURE__ */ jsx(LightningIcon, {}) }),
-          /* @__PURE__ */ jsx(SignalRow, { label: "SSE", value: details.sseOpen, icon: /* @__PURE__ */ jsx(AntennaIcon, {}) }),
-          /* @__PURE__ */ jsx(SignalRow, { label: "Health Check", value: details.healthPassing, icon: /* @__PURE__ */ jsx(HeartIcon, {}) })
-        ] })
-      }
-    )
-  ] });
-}
-export {
-  ConnectivityIndicator
-};

package/dist/provider/connectivity-provider.d.ts

@@ -1,7 +0,0 @@
-import type { ReactNode } from 'react';
-import type { ConnectivitySnapshot, ConnectivityProviderProps } from './connectivity-types.js';
-export declare const ConnectivityContext: import("react").Context<ConnectivitySnapshot | null>;
-export declare function ConnectivityProvider({ children, sseUrl, healthUrl, healthIntervalMs, override, }: ConnectivityProviderProps & {
-    children: ReactNode;
-}): import("react").JSX.Element;
-//# sourceMappingURL=connectivity-provider.d.ts.map

package/dist/provider/connectivity-provider.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"connectivity-provider.d.ts","sourceRoot":"","sources":["../../src/provider/connectivity-provider.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAA;AAEtC,OAAO,KAAK,EAAE,oBAAoB,EAAE,yBAAyB,EAAE,MAAM,sBAAsB,CAAA;AAmB3F,eAAO,MAAM,mBAAmB,sDAAmD,CAAA;AAyBnF,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,MAAM,EACN,SAAS,EACT,gBAAyB,EACzB,QAAQ,GACT,EAAE,yBAAyB,GAAG;IAAE,QAAQ,EAAE,SAAS,CAAA;CAAE,+BAgIrD"}

package/dist/provider/connectivity-provider.js

@@ -1,128 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { createContext, useCallback, useEffect, useMemo, useRef, useState } from "react";
-import { onlineManager } from "@tanstack/react-query";
-const SSR_SNAPSHOT = {
-  status: "online",
-  details: {
-    browserOnline: true,
-    // Optimistic `true`, matching `browserOnline` — `onlineManager` is a module singleton so it is
-    // always readable, this is the same pre-hydration default as every other signal, never the
-    // "not mounted" case (see `ConnectivitySnapshot['details']['queryOnline']`'s JSDoc).
-    queryOnline: true,
-    sseOpen: null,
-    healthPassing: null
-  }
-};
-const ConnectivityContext = createContext(null);
-function computeStatus(details) {
-  if (!details.browserOnline) return "offline";
-  if (details.queryOnline === false) return "degraded";
-  if (details.sseOpen === false) return "degraded";
-  if (details.healthPassing === false) return "degraded";
-  return "online";
-}
-function getBrowserOnline() {
-  return typeof navigator !== "undefined" ? navigator.onLine : true;
-}
-function getQueryOnline() {
-  return onlineManager.isOnline();
-}
-function ConnectivityProvider({
-  children,
-  sseUrl,
-  healthUrl,
-  healthIntervalMs = 3e4,
-  override
-}) {
-  const [isClient, setIsClient] = useState(false);
-  useEffect(() => {
-    setIsClient(true);
-  }, []);
-  const [browserOnline, setBrowserOnline] = useState(getBrowserOnline);
-  useEffect(() => {
-    if (typeof window === "undefined") return;
-    const handleOnline = () => setBrowserOnline(true);
-    const handleOffline = () => setBrowserOnline(false);
-    window.addEventListener("online", handleOnline);
-    window.addEventListener("offline", handleOffline);
-    return () => {
-      window.removeEventListener("online", handleOnline);
-      window.removeEventListener("offline", handleOffline);
-    };
-  }, []);
-  const [queryOnline, setQueryOnline] = useState(getQueryOnline);
-  useEffect(() => {
-    const unsubscribe = onlineManager.subscribe(() => {
-      setQueryOnline(onlineManager.isOnline());
-    });
-    return unsubscribe;
-  }, []);
-  const [sseOpen, setSseOpen] = useState(null);
-  const sseRef = useRef(null);
-  useEffect(() => {
-    if (!sseUrl || typeof window === "undefined") {
-      setSseOpen(null);
-      return;
-    }
-    setSseOpen(false);
-    const es = new EventSource(sseUrl);
-    sseRef.current = es;
-    const handleOpen = () => setSseOpen(true);
-    const handleError = () => {
-      setSseOpen(es.readyState === EventSource.OPEN);
-    };
-    es.addEventListener("open", handleOpen);
-    es.addEventListener("error", handleError);
-    return () => {
-      es.removeEventListener("open", handleOpen);
-      es.removeEventListener("error", handleError);
-      es.close();
-      sseRef.current = null;
-    };
-  }, [sseUrl]);
-  const [healthPassing, setHealthPassing] = useState(null);
-  const healthRef = useRef(null);
-  const pingHealth = useCallback(async () => {
-    if (!healthUrl) return;
-    try {
-      const res = await fetch(healthUrl);
-      setHealthPassing(res.ok);
-    } catch {
-      setHealthPassing(false);
-    }
-  }, [healthUrl]);
-  useEffect(() => {
-    if (!healthUrl || typeof window === "undefined") {
-      setHealthPassing(null);
-      return;
-    }
-    pingHealth();
-    healthRef.current = setInterval(pingHealth, healthIntervalMs);
-    return () => {
-      if (healthRef.current !== null) {
-        clearInterval(healthRef.current);
-        healthRef.current = null;
-      }
-    };
-  }, [healthUrl, healthIntervalMs, pingHealth]);
-  const snapshot = useMemo(() => {
-    const details = {
-      browserOnline: override?.browserOnline ?? browserOnline,
-      queryOnline: override?.queryOnline !== void 0 ? override.queryOnline : queryOnline,
-      sseOpen: override?.sseOpen !== void 0 ? override.sseOpen : sseOpen,
-      healthPassing: override?.healthPassing !== void 0 ? override.healthPassing : healthPassing
-    };
-    return {
-      status: computeStatus(details),
-      details
-    };
-  }, [browserOnline, queryOnline, sseOpen, healthPassing, override]);
-  if (!isClient) {
-    return /* @__PURE__ */ jsx(ConnectivityContext.Provider, { value: SSR_SNAPSHOT, children });
-  }
-  return /* @__PURE__ */ jsx(ConnectivityContext.Provider, { value: snapshot, children });
-}
-export {
-  ConnectivityContext,
-  ConnectivityProvider
-};

package/dist/provider/connectivity-types.d.ts

@@ -1,36 +0,0 @@
-/**
- * Connectivity types — aggregated online/offline/degraded status with per-signal detail.
- *
- * The ConnectivityProvider aggregates browser navigator.onLine, React Query's onlineManager,
- * an optional SSE EventSource, and an optional health-check endpoint into a single status.
- * Signals that are null (not configured/available) are treated as passing.
- */
-export type ConnectivityStatus = 'online' | 'offline' | 'degraded';
-export type ConnectivitySnapshot = {
-    status: ConnectivityStatus;
-    /** Per-signal breakdown for debugging / detailed indicators */
-    details: {
-        browserOnline: boolean;
-        queryOnline: boolean;
-        sseOpen: boolean | null;
-        healthPassing: boolean | null;
-    };
-};
-export type ConnectivityOverride = {
-    browserOnline?: boolean;
-    queryOnline?: boolean;
-    sseOpen?: boolean | null;
-    healthPassing?: boolean | null;
-};
-export type ConnectivityProviderProps = {
-    children: React.ReactNode;
-    /** Optional SSE endpoint. When set, an EventSource is opened and its readyState is monitored. */
-    sseUrl?: string;
-    /** Optional health-check endpoint. When set, periodic GET requests monitor backend reachability. */
-    healthUrl?: string;
-    /** Interval in ms for health pings. Default: 30_000 (30s). */
-    healthIntervalMs?: number;
-    /** Override individual signal values for testing / simulation. Non-overridden keys use real signals. */
-    override?: ConnectivityOverride;
-};
-//# sourceMappingURL=connectivity-types.d.ts.map

package/dist/provider/connectivity-types.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"connectivity-types.d.ts","sourceRoot":"","sources":["../../src/provider/connectivity-types.ts"],"names":[],"mappings":"AAAA;;;;;;GAMG;AAEH,MAAM,MAAM,kBAAkB,GAAG,QAAQ,GAAG,SAAS,GAAG,UAAU,CAAA;AAElE,MAAM,MAAM,oBAAoB,GAAG;IACjC,MAAM,EAAE,kBAAkB,CAAA;IAC1B,+DAA+D;IAC/D,OAAO,EAAE;QACP,aAAa,EAAE,OAAO,CAAA;QAItB,WAAW,EAAE,OAAO,CAAA;QACpB,OAAO,EAAE,OAAO,GAAG,IAAI,CAAA;QACvB,aAAa,EAAE,OAAO,GAAG,IAAI,CAAA;KAC9B,CAAA;CACF,CAAA;AAED,MAAM,MAAM,oBAAoB,GAAG;IACjC,aAAa,CAAC,EAAE,OAAO,CAAA;IACvB,WAAW,CAAC,EAAE,OAAO,CAAA;IACrB,OAAO,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;IACxB,aAAa,CAAC,EAAE,OAAO,GAAG,IAAI,CAAA;CAC/B,CAAA;AAED,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;IACzB,iGAAiG;IACjG,MAAM,CAAC,EAAE,MAAM,CAAA;IACf,oGAAoG;IACpG,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,wGAAwG;IACxG,QAAQ,CAAC,EAAE,oBAAoB,CAAA;CAChC,CAAA"}

package/dist/provider/use-connectivity.d.ts

@@ -1,3 +0,0 @@
-import type { ConnectivitySnapshot } from './connectivity-types.js';
-export declare function useConnectivity(): ConnectivitySnapshot;
-//# sourceMappingURL=use-connectivity.d.ts.map

package/dist/provider/use-connectivity.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"use-connectivity.d.ts","sourceRoot":"","sources":["../../src/provider/use-connectivity.ts"],"names":[],"mappings":"AAaA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,sBAAsB,CAAA;AAEhE,wBAAgB,eAAe,IAAI,oBAAoB,CAUtD"}

package/dist/provider/use-connectivity.js

@@ -1,14 +0,0 @@
-import { useContext } from "react";
-import { ConnectivityContext } from "./connectivity-provider.js";
-function useConnectivity() {
-  const snapshot = useContext(ConnectivityContext);
-  if (snapshot === null) {
-    throw new Error(
-      "useConnectivity() must be used within a <ConnectivityProvider>. Wrap your app in <BasaltProvider> (which auto-mounts ConnectivityProvider) or mount <ConnectivityProvider> manually."
-    );
-  }
-  return snapshot;
-}
-export {
-  useConnectivity
-};

package/dist/query-devtools.d.ts

@@ -1,21 +0,0 @@
-import type { ComponentProps } from 'react';
-import type { ReactQueryDevtools } from '@tanstack/react-query-devtools';
-/**
- * Lazy, production-excluded wrapper for ReactQueryDevtools. Safe to import unconditionally —
- * the devtools chunk is only resolved when rendered outside of production and the dynamic
- * import fires. In production this returns null immediately.
- *
- * @example
- * import { BasaltQueryDevtools } from 'basalt-ui'
- *
- * function Root() {
- *   return (
- *     <QueryClientProvider client={client}>
- *       {children}
- *       <BasaltQueryDevtools initialIsOpen={false} />
- *     </QueryClientProvider>
- *   )
- * }
- */
-export declare function BasaltQueryDevtools(props: ComponentProps<typeof ReactQueryDevtools>): import("react").JSX.Element | null;
-//# sourceMappingURL=query-devtools.d.ts.map

package/dist/query-devtools.d.ts.map

@@ -1 +0,0 @@
-{"version":3,"file":"query-devtools.d.ts","sourceRoot":"","sources":["../src/query-devtools.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAC3C,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,gCAAgC,CAAA;AAOxE;;;;;;;;;;;;;;;;GAgBG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,cAAc,CAAC,OAAO,kBAAkB,CAAC,sCAOnF"}

package/dist/query-devtools.js

@@ -1,13 +0,0 @@
-import { jsx } from "react/jsx-runtime";
-import { lazy, Suspense } from "react";
-const LazyDevtools = lazy(
-  () => import("@tanstack/react-query-devtools").then((m) => ({ default: m.ReactQueryDevtools }))
-);
-Object.assign(LazyDevtools, { displayName: "LazyDevtools" });
-function BasaltQueryDevtools(props) {
-  if (process.env["NODE_ENV"] === "production") return null;
-  return /* @__PURE__ */ jsx(Suspense, { fallback: null, children: /* @__PURE__ */ jsx(LazyDevtools, { ...props }) });
-}
-export {
-  BasaltQueryDevtools
-};