@unicitylabs/sphere-ui 0.1.14 → 0.1.15

package/dist/analytics/index.d.ts

@@ -118,4 +118,25 @@ interface TopEntitiesTableProps {
  */
 declare function TopEntitiesTable({ entities, title, valueLabel, secondaryLabel, hideBars, emptyState, accentColor, className, }: TopEntitiesTableProps): react_jsx_runtime.JSX.Element;
 
-export { type DateRangeLabel, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, KPICard, type KPICardProps, TimeseriesChart, type TimeseriesChartProps, type TimeseriesSeries, TopEntitiesTable, type TopEntitiesTableProps, type TopEntity, PRESET_LABELS as dateRangePresetLabels };
+interface AnalyticsSkeletonProps {
+    /** Rendered above the grid — usually the existing page header (title + DateRangePicker). */
+    header?: React.ReactNode;
+    /** Hide KPI rows — useful if the consumer already renders its own. */
+    showKpiRows?: boolean;
+    /** Hide chart blocks. */
+    showCharts?: boolean;
+    /** Hide the split bottom row (top quests + platform breakdown). */
+    showBottomTables?: boolean;
+    className?: string;
+}
+/**
+ * Skeleton state for the shared Analytics page layout. Mirrors the
+ * structure AdminProjectAnalyticsPage / ProjectAnalyticsPage render
+ * after data arrives: two rows of four KPI cards, two chart blocks,
+ * and a split row of two table cards. Consumers pass the same
+ * `header` they render in the real state so the date-range picker
+ * stays interactive while data loads.
+ */
+declare function AnalyticsSkeleton({ header, showKpiRows, showCharts, showBottomTables, className, }: AnalyticsSkeletonProps): react_jsx_runtime.JSX.Element;
+
+export { AnalyticsSkeleton, type AnalyticsSkeletonProps, type DateRangeLabel, DateRangePicker, type DateRangePickerProps, type DateRangePreset, type DateRangeValue, KPICard, type KPICardProps, TimeseriesChart, type TimeseriesChartProps, type TimeseriesSeries, TopEntitiesTable, type TopEntitiesTableProps, type TopEntity, PRESET_LABELS as dateRangePresetLabels };

package/dist/analytics/index.js

@@ -414,7 +414,132 @@ function TopEntitiesTable({
     }) })
   ] });
 }
+
+// src/components/Skeleton.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function Skeleton({
+  width = "100%",
+  height = "1rem",
+  radius = "var(--radius-md)",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx5(
+    "div",
+    {
+      className: `animate-skeleton-pulse ${className}`.trim(),
+      "aria-busy": "true",
+      style: {
+        width,
+        height,
+        borderRadius: radius,
+        background: "var(--bg-hover)",
+        border: "1px solid var(--border)"
+      }
+    }
+  );
+}
+
+// src/components/SkeletonText.tsx
+import { jsx as jsx6 } from "react/jsx-runtime";
+function SkeletonText({
+  lines = 1,
+  lineHeight = "0.875rem",
+  gap = "0.5rem",
+  className = ""
+}) {
+  return /* @__PURE__ */ jsx6(
+    "div",
+    {
+      className,
+      role: "status",
+      "aria-busy": "true",
+      style: { display: "flex", flexDirection: "column", gap },
+      children: Array.from({ length: lines }).map((_, i) => {
+        const isLast = i === lines - 1 && lines > 1;
+        return /* @__PURE__ */ jsx6(
+          Skeleton,
+          {
+            width: isLast ? "70%" : "100%",
+            height: lineHeight,
+            radius: "var(--radius-sm)"
+          },
+          i
+        );
+      })
+    }
+  );
+}
+
+// src/components/SkeletonCircle.tsx
+import { jsx as jsx7 } from "react/jsx-runtime";
+var NAMED_SIZES = {
+  sm: "1.5rem",
+  md: "2.5rem",
+  lg: "4rem"
+};
+function resolveSize(size) {
+  if (size === "sm" || size === "md" || size === "lg") return NAMED_SIZES[size];
+  return size;
+}
+function SkeletonCircle({ size = "md", className = "" }) {
+  const dim = resolveSize(size);
+  return /* @__PURE__ */ jsx7(Skeleton, { width: dim, height: dim, radius: "50%", className });
+}
+
+// src/analytics/AnalyticsSkeleton.tsx
+import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
+function AnalyticsSkeleton({
+  header,
+  showKpiRows = true,
+  showCharts = true,
+  showBottomTables = true,
+  className = ""
+}) {
+  return /* @__PURE__ */ jsxs5("div", { className: `space-y-6 ${className}`, "aria-busy": "true", "aria-label": "Loading analytics", children: [
+    header,
+    showKpiRows && /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx8(KpiCardSkeleton, {}, i)) }),
+      /* @__PURE__ */ jsx8("div", { className: "grid grid-cols-2 lg:grid-cols-4 gap-4", children: Array.from({ length: 4 }).map((_, i) => /* @__PURE__ */ jsx8(KpiCardSkeleton, {}, i)) })
+    ] }),
+    showCharts && /* @__PURE__ */ jsxs5(Fragment, { children: [
+      /* @__PURE__ */ jsx8(ChartBlockSkeleton, {}),
+      /* @__PURE__ */ jsx8(ChartBlockSkeleton, {})
+    ] }),
+    showBottomTables && /* @__PURE__ */ jsxs5("div", { className: "grid lg:grid-cols-2 gap-4", children: [
+      /* @__PURE__ */ jsx8(TableBlockSkeleton, { rows: 5 }),
+      /* @__PURE__ */ jsx8(TableBlockSkeleton, { rows: 5 })
+    ] })
+  ] });
+}
+function KpiCardSkeleton() {
+  return /* @__PURE__ */ jsxs5("div", { className: "rounded-xl border border-(--border,rgba(255,255,255,0.08)) bg-(--surface,rgba(255,255,255,0.02)) p-5", children: [
+    /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 mb-3", children: [
+      /* @__PURE__ */ jsx8(SkeletonCircle, { size: "sm" }),
+      /* @__PURE__ */ jsx8(Skeleton, { width: "60%", height: "10px" })
+    ] }),
+    /* @__PURE__ */ jsx8(Skeleton, { width: "40%", height: "28px" })
+  ] });
+}
+function ChartBlockSkeleton() {
+  return /* @__PURE__ */ jsxs5("div", { className: "rounded-xl border border-(--border,rgba(255,255,255,0.08)) bg-(--surface,rgba(255,255,255,0.02)) p-5", children: [
+    /* @__PURE__ */ jsx8(Skeleton, { width: "30%", height: "14px", className: "mb-4" }),
+    /* @__PURE__ */ jsx8(Skeleton, { width: "100%", height: "240px", radius: "8px" })
+  ] });
+}
+function TableBlockSkeleton({ rows }) {
+  return /* @__PURE__ */ jsxs5("div", { className: "rounded-xl border border-(--border,rgba(255,255,255,0.08)) bg-(--surface,rgba(255,255,255,0.02)) p-5", children: [
+    /* @__PURE__ */ jsx8(Skeleton, { width: "40%", height: "14px", className: "mb-4" }),
+    /* @__PURE__ */ jsx8("div", { className: "space-y-3", children: Array.from({ length: rows }).map((_, i) => /* @__PURE__ */ jsxs5("div", { children: [
+      /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between mb-1.5", children: [
+        /* @__PURE__ */ jsx8("div", { style: { width: "55%" }, children: /* @__PURE__ */ jsx8(SkeletonText, { lines: 1 }) }),
+        /* @__PURE__ */ jsx8(Skeleton, { width: "40px", height: "12px" })
+      ] }),
+      /* @__PURE__ */ jsx8(Skeleton, { width: "100%", height: "6px", radius: "3px" })
+    ] }, i)) })
+  ] });
+}
 export {
+  AnalyticsSkeleton,
   DateRangePicker,
   KPICard,
   TimeseriesChart,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@unicitylabs/sphere-ui",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "type": "module",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",