@spatika/react 1.4.0 → 1.6.0

package/src/primitives/Grid.tsx

@@ -53,6 +53,7 @@ export type GridProps = React.ComponentPropsWithoutRef<"div"> & {
   sm?: number | "auto";
   md?: number | "auto";
   lg?: number | "auto";
+  xl?: number | "auto";
   size?: number | "grow";
 };
 
@@ -61,6 +62,13 @@ function spanFor(value?: number | "auto" | "grow") {
   return spanClass[value] ?? "col-span-12";
 }
 
+function prefixedSpan(prefix: string, value?: number | "auto") {
+  if (typeof value !== "number") return undefined;
+  const base = spanClass[value];
+  if (!base) return undefined;
+  return base.replace("col-span", `${prefix}:col-span`);
+}
+
 /**
  * 12-column CSS grid. Use `container` on the parent and breakpoint spans on items.
  */
@@ -73,6 +81,7 @@ function Grid({
   sm,
   md,
   lg,
+  xl,
   size,
   className,
   ...props
@@ -87,9 +96,10 @@ function Grid({
         container && "grid grid-cols-12",
         container && (gapClass[spacing] ?? "gap-2"),
         !container && (span ?? (size === "grow" ? "col-span-12" : "col-span-12")),
-        sm && typeof sm === "number" && spanClass[sm]?.replace("col-span", "sm:col-span"),
-        md && typeof md === "number" && spanClass[md]?.replace("col-span", "md:col-span"),
-        lg && typeof lg === "number" && spanClass[lg]?.replace("col-span", "lg:col-span"),
+        prefixedSpan("sm", sm),
+        prefixedSpan("md", md),
+        prefixedSpan("lg", lg),
+        prefixedSpan("xl", xl),
         className,
       )}
       {...props}

package/src/primitives/mui-more.test.tsx

@@ -62,6 +62,23 @@ describe("layout and form extras", () => {
     expect(onTransfer).toHaveBeenCalled();
   });
 
+  it("applies Grid breakpoint span classes including xl", () => {
+    const { container } = render(
+      <Grid container>
+        <Grid xs={12} sm={6} md={4} lg={3} xl={2}>
+          Cell
+        </Grid>
+      </Grid>,
+    );
+    const item = container.querySelector("[data-slot='grid'][data-item]");
+    expect(item?.className).toContain("col-span-12");
+    expect(item?.className).toContain("sm:col-span-6");
+    expect(item?.className).toContain("md:col-span-4");
+    expect(item?.className).toContain("lg:col-span-3");
+    expect(item?.className).toContain("xl:col-span-2");
+    expect(screen.getByText("Cell")).toBeInTheDocument();
+  });
+
   it("switches BottomNavigation actions", async () => {
     const user = userEvent.setup();
     render(

package/src/theme/SpatikaThemeProvider.test.tsx

@@ -1,6 +1,7 @@
 import { cleanup, render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { afterEach, describe, expect, it, vi } from "vitest";
+import { createTheme } from "../lib/create-theme";
 import { SPATIKA_THEME_STORAGE_KEY } from "../lib/themes";
 import { SpatikaThemeProvider, useSpatikaTheme } from "./SpatikaThemeProvider";
 
@@ -21,6 +22,7 @@ function resetDocumentTheme() {
   document.documentElement.className = "";
   document.documentElement.removeAttribute("data-spk-theme");
   document.documentElement.style.colorScheme = "";
+  document.getElementById("spk-custom-themes")?.remove();
   localStorage.removeItem(SPATIKA_THEME_STORAGE_KEY);
   localStorage.removeItem("spk-theme-test");
 }
@@ -79,4 +81,40 @@ describe("SpatikaThemeProvider", () => {
     expect(() => render(<ThemeProbe />)).toThrow(/SpatikaThemeProvider/);
     spy.mockRestore();
   });
+
+  it("registers a custom theme and applies its base class on the wrapper", async () => {
+    const user = userEvent.setup();
+    const brand = createTheme({
+      id: "brand",
+      extends: "neelam",
+      palette: { primary: "#22c55e" },
+    });
+
+    function CustomProbe() {
+      const { theme, setTheme, themes } = useSpatikaTheme();
+      return (
+        <div>
+          <span data-testid="theme">{theme}</span>
+          <span data-testid="count">{themes.length}</span>
+          <button type="button" onClick={() => setTheme("brand")}>
+            Brand
+          </button>
+        </div>
+      );
+    }
+
+    const { container } = render(
+      <SpatikaThemeProvider defaultTheme="mukta" syncDocument={false} customThemes={[brand]}>
+        <CustomProbe />
+      </SpatikaThemeProvider>,
+    );
+
+    expect(screen.getByTestId("count")).toHaveTextContent("5");
+    await user.click(screen.getByRole("button", { name: "Brand" }));
+    expect(screen.getByTestId("theme")).toHaveTextContent("brand");
+    const root = container.querySelector("[data-slot='spatika-theme-provider']");
+    expect(root).toHaveAttribute("data-spk-theme", "brand");
+    expect(root).toHaveClass("neelam");
+    expect(document.getElementById("spk-custom-themes")?.textContent).toContain("--primary: #22c55e;");
+  });
 });

package/src/theme/SpatikaThemeProvider.tsx

@@ -7,12 +7,21 @@ import {
   useState,
   type ReactNode,
 } from "react";
+import { cn } from "../lib/cn";
+import {
+  findCustomTheme,
+  injectCustomThemeStyles,
+  type SpatikaTheme,
+} from "../lib/create-theme";
 import {
   applyTheme,
   DEFAULT_THEME,
+  isDarkTheme,
+  isThemeId,
   readStoredTheme,
   THEME_IDS,
   writeStoredTheme,
+  type BuiltinThemeId,
   type ThemeId,
 } from "../lib/themes";
 
@@ -44,12 +53,24 @@ export type SpatikaThemeProviderProps = {
   /** Optional element to theme instead of (or in addition to) document */
   target?: HTMLElement | null;
   className?: string;
+  /** Custom themes from `createTheme`. Switch them with `setTheme(id)`. */
+  customThemes?: readonly SpatikaTheme[];
 };
 
+function baseThemeClass(
+  theme: ThemeId,
+  custom: SpatikaTheme | undefined,
+): BuiltinThemeId | undefined {
+  const base = custom?.extends ?? (isThemeId(theme) ? theme : DEFAULT_THEME);
+  return base === DEFAULT_THEME ? undefined : base;
+}
+
 /**
- * MUI-style theme provider for Spatika.
+ * Theme provider for Spatika.
  * Wraps the app (or a subtree) and applies theme classes / data attributes.
  */
+const EMPTY_CUSTOM_THEMES: readonly SpatikaTheme[] = [];
+
 export function SpatikaThemeProvider({
   children,
   theme: themeProp,
@@ -59,11 +80,14 @@ export function SpatikaThemeProvider({
   syncDocument = true,
   target,
   className,
+  customThemes = EMPTY_CUSTOM_THEMES,
 }: SpatikaThemeProviderProps) {
+  const customIds = useMemo(() => customThemes.map((item) => item.id), [customThemes]);
   const [uncontrolled, setUncontrolled] = useState<ThemeId>(
-    () => readStoredTheme(storageKey) ?? defaultTheme,
+    () => readStoredTheme(storageKey, customIds) ?? defaultTheme,
   );
   const theme = themeProp ?? uncontrolled;
+  const custom = findCustomTheme(theme, customThemes);
 
   const setTheme = useCallback(
     (next: ThemeId) => {
@@ -74,27 +98,31 @@ export function SpatikaThemeProvider({
   );
 
   useLayoutEffect(() => {
-    if (syncDocument) applyTheme(theme);
-    if (target) applyTheme(theme, target);
+    injectCustomThemeStyles(customThemes);
+    if (syncDocument) applyTheme(theme, undefined, custom);
+    if (target) applyTheme(theme, target, custom);
     writeStoredTheme(storageKey, theme);
-  }, [theme, syncDocument, target, storageKey]);
+  }, [theme, syncDocument, target, storageKey, custom, customThemes]);
 
-  const value = useMemo(
-    () =>
-      ({
-        theme,
-        setTheme,
-        themes: THEME_IDS,
-      }) satisfies SpatikaThemeContextValue,
-    [theme, setTheme],
-  );
+  const value = useMemo(() => {
+    const extras = customThemes.map((item) => item.id).filter((id) => !isThemeId(id));
+    return {
+      theme,
+      setTheme,
+      themes: extras.length ? [...THEME_IDS, ...extras] : THEME_IDS,
+    } satisfies SpatikaThemeContextValue;
+  }, [theme, setTheme, customThemes]);
+
+  const dark = custom ? custom.colorScheme === "dark" : isDarkTheme(theme);
+  const themeClass = baseThemeClass(theme, custom);
 
   return (
     <SpatikaThemeContext.Provider value={value}>
       <div
-        className={className}
+        className={cn(className, themeClass)}
         data-spk-theme={theme}
         data-slot="spatika-theme-provider"
+        style={{ colorScheme: dark ? "dark" : "light" }}
       >
         {children}
       </div>

package/src/composites/ChartDataGrid.test.tsx

@@ -1,57 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it } from "vitest";
-import { ChartDataGrid, renderChartCell } from "./ChartDataGrid";
-
-describe("ChartDataGrid", () => {
-  it("renders a linked table and highlights a selected row", async () => {
-    const user = userEvent.setup();
-    const { container } = render(
-      <ChartDataGrid
-        height={140}
-        categoryField="name"
-        valueField="views"
-        rows={[
-          { id: "web", name: "Web", views: 10, trend: [1, 2, 3] },
-          { id: "ios", name: "iOS", views: 6, trend: [2, 2, 1] },
-        ]}
-        columns={[
-          { field: "name", headerName: "Channel" },
-          { field: "views", headerName: "Views", type: "number" },
-          { field: "trend", headerName: "Trend", type: "sparkline" },
-        ]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="chart-data-grid"]')).toBeTruthy();
-    expect(screen.getByText("Channel")).toBeInTheDocument();
-    const row = container.querySelector(
-      '[data-slot="chart-data-grid"] tbody [data-slot="table-row"]:nth-child(2)',
-    );
-    await user.click(row!);
-    expect(row).toHaveAttribute("data-state", "selected");
-  });
-
-  it("hides the chart when requested", () => {
-    const { container } = render(
-      <ChartDataGrid
-        hideChart
-        categoryField="name"
-        valueField="views"
-        rows={[{ id: "web", name: "Web", views: 10 }]}
-        columns={[{ field: "name", headerName: "Channel" }]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="chart-container"]')).toBeNull();
-  });
-});
-
-describe("renderChartCell", () => {
-  it("returns a dash for non-numeric values", () => {
-    expect(renderChartCell("n/a")).toBe("—");
-  });
-
-  it("renders a sparkline for numeric arrays", () => {
-    const { container } = render(<>{renderChartCell([1, 4, 2], { variant: "sparkline" })}</>);
-    expect(container.querySelector('[data-slot="sparkline"]')).toBeTruthy();
-  });
-});

package/src/composites/ChartDataGrid.tsx

@@ -1,196 +0,0 @@
-import { useState, type ReactNode } from "react";
-import { chartColor, formatChartNumber } from "../lib/charts";
-import { cn } from "../lib/cn";
-import {
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "../primitives/Table";
-import { ChartContainer } from "./chart-composition";
-import { SparkLineChart } from "./cartesian-charts";
-import { PieChart } from "./radial-charts";
-
-export type ChartGridColumnType = "text" | "number" | "sparkline" | "bar";
-
-export type ChartGridColumn = {
-  field: string;
-  headerName: string;
-  type?: ChartGridColumnType;
-  width?: number;
-};
-
-export type ChartDataGridRow = { id: string } & Record<string, unknown>;
-
-export type ChartDataGridProps = {
-  rows: ChartDataGridRow[];
-  columns: ChartGridColumn[];
-  chartType?: "bar" | "line" | "pie";
-  categoryField: string;
-  valueField: string;
-  height?: number;
-  className?: string;
-  selectedIds?: string[];
-  defaultSelectedIds?: string[];
-  onSelectionChange?: (ids: string[]) => void;
-  hideChart?: boolean;
-  hideLegend?: boolean;
-};
-
-export function renderChartCell(
-  value: unknown,
-  options?: {
-    variant?: "sparkline" | "bar";
-    color?: string;
-    height?: number;
-    max?: number;
-  },
-): ReactNode {
-  const color = options?.color ?? "var(--chart-1)";
-  if (Array.isArray(value) && value.every((item) => typeof item === "number")) {
-    return (
-      <SparkLineChart
-        data={value as number[]}
-        plotType={options?.variant === "bar" ? "bar" : "line"}
-        color={color}
-        height={options?.height ?? 32}
-        showHighlight={false}
-        area={options?.variant !== "bar"}
-      />
-    );
-  }
-  const n = typeof value === "number" ? value : Number(value);
-  if (!Number.isFinite(n)) return "—";
-  const max = options?.max && options.max > 0 ? options.max : Math.max(n, 1);
-  const pct = Math.max(0, Math.min(100, (n / max) * 100));
-  return (
-    <div className="spk-chart-cell-bar" title={formatChartNumber(n)}>
-      <span style={{ width: `${pct}%`, background: color }} />
-    </div>
-  );
-}
-
-export function ChartDataGrid({
-  rows,
-  columns,
-  chartType = "bar",
-  categoryField,
-  valueField,
-  height = 200,
-  className,
-  selectedIds,
-  defaultSelectedIds,
-  onSelectionChange,
-  hideChart,
-  hideLegend = true,
-}: ChartDataGridProps) {
-  const [internal, setInternal] = useState<string[]>(defaultSelectedIds ?? []);
-  const selected = selectedIds ?? internal;
-  const setSelected = (ids: string[]) => {
-    if (selectedIds == null) setInternal(ids);
-    onSelectionChange?.(ids);
-  };
-  const selectedIndex = selected.length ? rows.findIndex((row) => row.id === selected[0]) : -1;
-  const categories = rows.map((row) => String(row[categoryField] ?? row.id));
-  const values = rows.map((row) => Number(row[valueField] ?? 0));
-  const maxByField = new Map<string, number>();
-  for (const col of columns) {
-    if (col.type === "bar" || col.type === "number") {
-      const nums = rows.map((row) => Number(row[col.field] ?? 0)).filter((n) => Number.isFinite(n));
-      maxByField.set(col.field, nums.length ? Math.max(...nums) : 1);
-    }
-  }
-
-  const toggleRow = (id: string) => {
-    setSelected(selected[0] === id ? [] : [id]);
-  };
-
-  return (
-    <div data-slot="chart-data-grid" className={cn("spk-chart-data-grid", className)}>
-      {hideChart ? null : chartType === "pie" ? (
-        <PieChart
-          height={height}
-          hideLegend={hideLegend}
-          series={[
-            {
-              innerRadius: 36,
-              paddingAngle: 2,
-              data: rows.map((row, i) => ({
-                id: row.id,
-                value: values[i] ?? 0,
-                label: categories[i],
-                color:
-                  selected.length && !selected.includes(row.id)
-                    ? `color-mix(in srgb, ${chartColor(i)} 28%, transparent)`
-                    : undefined,
-              })),
-            },
-          ]}
-        />
-      ) : (
-        <ChartContainer
-          height={height}
-          hideLegend={hideLegend}
-          highlightScope="item"
-          selected={
-            selectedIndex >= 0 ? { seriesId: "value", dataIndex: selectedIndex } : null
-          }
-          xAxis={[{ data: categories }]}
-          series={[{ type: chartType, id: "value", label: valueField, data: values }]}
-          aria-label="Linked chart"
-        />
-      )}
-      <Table containerClassName="spk-chart-grid-table">
-        <TableHeader>
-          <TableRow>
-            {columns.map((col) => (
-              <TableHead key={col.field} style={col.width ? { width: col.width } : undefined}>
-                {col.headerName}
-              </TableHead>
-            ))}
-          </TableRow>
-        </TableHeader>
-        <TableBody>
-          {rows.map((row, rowIndex) => (
-            <TableRow
-              key={row.id}
-              data-state={selected.includes(row.id) ? "selected" : undefined}
-              onClick={() => toggleRow(row.id)}
-              style={{ cursor: "pointer" }}
-            >
-              {columns.map((col, colIndex) => {
-                const value = row[col.field];
-                const color = chartColor(rowIndex);
-                let content: ReactNode;
-                if (col.type === "sparkline") {
-                  content = renderChartCell(value, { variant: "sparkline", color, height: 32 });
-                } else if (col.type === "bar") {
-                  content = renderChartCell(value, {
-                    variant: "bar",
-                    color,
-                    max: maxByField.get(col.field),
-                  });
-                } else if (col.type === "number" && typeof value === "number") {
-                  content = formatChartNumber(value);
-                } else {
-                  content = value == null ? "—" : String(value);
-                }
-                return (
-                  <TableCell key={col.field} data-field={col.field}>
-                    {colIndex === 0 ? (
-                      <span className="spk-chart-grid-name">{content}</span>
-                    ) : (
-                      content
-                    )}
-                  </TableCell>
-                );
-              })}
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </div>
-  );
-}

package/src/composites/MapChart.test.tsx

@@ -1,39 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, it } from "vitest";
-import { MapChart } from "./MapChart";
-
-describe("MapChart", () => {
-  it("draws choropleth paths from GeoJSON", () => {
-    const { container } = render(
-      <MapChart
-        width={240}
-        height={160}
-        geoData={{
-          type: "FeatureCollection",
-          features: [
-            {
-              type: "Feature",
-              id: "a",
-              properties: { name: "A" },
-              geometry: {
-                type: "Polygon",
-                coordinates: [
-                  [
-                    [0, 0],
-                    [4, 0],
-                    [4, 3],
-                    [0, 3],
-                    [0, 0],
-                  ],
-                ],
-              },
-            },
-          ],
-        }}
-        series={[{ data: [{ id: "a", value: 12, label: "A" }] }]}
-      />,
-    );
-    expect(container.querySelector('[data-slot="map-chart"]')).toBeTruthy();
-    expect(container.querySelector('[data-slot="map-chart"] path')).toBeTruthy();
-  });
-});

package/src/composites/MapChart.tsx

@@ -1,130 +0,0 @@
-import { chartColor, formatChartNumber, type ChartMargin } from "../lib/charts";
-import {
-  featureId,
-  fitFeatures,
-  geoPath,
-  type GeoJsonFeatureCollection,
-  type GeoProjectionKind,
-} from "../lib/geo";
-import { ChartFrame, useChartHover } from "./chart-ui";
-
-export type MapShapeDatum = {
-  id: string | number;
-  value: number;
-  label?: string;
-  color?: string;
-};
-
-export type MapChartProps = {
-  geoData: GeoJsonFeatureCollection;
-  series?: Array<{ data: MapShapeDatum[] }>;
-  idProperty?: string;
-  projection?: GeoProjectionKind;
-  height?: number;
-  width?: number;
-  colors?: string[];
-  hideLegend?: boolean;
-  margin?: ChartMargin;
-  className?: string;
-};
-
-export function MapChart({
-  geoData,
-  series,
-  idProperty = "id",
-  projection = "mercator",
-  height = 280,
-  width,
-  colors,
-  hideLegend,
-  margin,
-  className,
-}: MapChartProps) {
-  const features = geoData.features ?? [];
-  const data = series?.[0]?.data ?? [];
-  const byId = new Map(data.map((item) => [String(item.id), item]));
-  const values = data.map((item) => item.value);
-  const min = values.length ? Math.min(...values) : 0;
-  const max = values.length ? Math.max(...values) : 1;
-  const { hover, setHover, clear } = useChartHover();
-  const legend = hideLegend
-    ? undefined
-    : data.slice(0, 8).map((item, i) => ({
-        id: String(item.id),
-        label: item.label ?? String(item.id),
-        color: item.color ?? choroplethFill(item.value, min, max, i, colors),
-      }));
-
-  return (
-    <ChartFrame
-      slot="map-chart"
-      className={className}
-      width={width}
-      height={height}
-      margin={margin ?? { top: 8, right: 8, bottom: 8, left: 8 }}
-      legend={legend}
-      hover={hover}
-      aria-label="Map chart"
-    >
-      {({ width: w, height: h, m }) => {
-        const pad = Math.min(m.left, m.right, m.top, m.bottom);
-        const project = fitFeatures(features, w, h, pad, projection);
-        return (
-          <svg width={w} height={h} viewBox={`0 0 ${w} ${h}`}>
-            {features.map((feature, i) => {
-              if (!feature.geometry) return null;
-              const id = featureId(feature, idProperty) || String(i);
-              const datum = byId.get(id);
-              const label =
-                datum?.label ??
-                (feature.properties?.name != null ? String(feature.properties.name) : id);
-              const fill = datum
-                ? (datum.color ?? choroplethFill(datum.value, min, max, i, colors))
-                : "color-mix(in srgb, var(--muted) 55%, transparent)";
-              const d = geoPath(feature.geometry, project);
-              if (!d) return null;
-              return (
-                <path
-                  key={id}
-                  d={d}
-                  fill={fill}
-                  className="spk-chart-map-region spk-chart-mark"
-                  onMouseEnter={(event) =>
-                    setHover({
-                      x: event.nativeEvent.offsetX,
-                      y: event.nativeEvent.offsetY,
-                      title: label,
-                      items: datum
-                        ? [
-                            {
-                              color: fill,
-                              label: label,
-                              value: formatChartNumber(datum.value),
-                            },
-                          ]
-                        : [{ color: fill, label: label, value: "—" }],
-                    })
-                  }
-                  onMouseLeave={clear}
-                />
-              );
-            })}
-          </svg>
-        );
-      }}
-    </ChartFrame>
-  );
-}
-
-function choroplethFill(
-  value: number,
-  min: number,
-  max: number,
-  index: number,
-  colors?: string[],
-): string {
-  const t = max === min ? 0.6 : (value - min) / (max - min);
-  const base = chartColor(index, colors);
-  const mix = Math.round(28 + t * 72);
-  return `color-mix(in srgb, ${base} ${mix}%, var(--muted))`;
-}

package/src/composites/ScatterWebGL.test.tsx

@@ -1,25 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, it, vi } from "vitest";
-import { ScatterWebGLLayer } from "./ScatterWebGL";
-
-describe("ScatterWebGLLayer", () => {
-  it("renders a canvas layer and reports when WebGL is unavailable", () => {
-    const onUnavailable = vi.fn();
-    const { container } = render(
-      <ScatterWebGLLayer
-        width={120}
-        height={80}
-        series={[{ data: [{ x: 1, y: 2 }] }]}
-        meta={[{ id: "a", label: "A", color: "#2563eb" }]}
-        hidden={new Set()}
-        xAt={(value) => value}
-        yAt={(value) => value}
-        sizeAt={(z) => z}
-        bubble={false}
-        onUnavailable={onUnavailable}
-      />,
-    );
-    expect(container.querySelector('[data-slot="scatter-webgl"]')).toBeTruthy();
-    expect(onUnavailable).toHaveBeenCalled();
-  });
-});