@spatika/react 1.3.1 → 1.5.0

package/src/primitives/Grid.test.tsx

@@ -0,0 +1,55 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Box, Grid } from "./Grid";
+
+describe("Grid", () => {
+  it("applies container layout and breakpoint spans including xl", () => {
+    const { container } = render(
+      <Grid container spacing={3}>
+        <Grid xs={12} sm={6} md={4} lg={3} xl={2}>
+          Cell
+        </Grid>
+      </Grid>,
+    );
+
+    const wrap = container.querySelector("[data-slot='grid'][data-container]");
+    expect(wrap).toBeTruthy();
+    expect(screen.getByText("Cell")).toBeInTheDocument();
+
+    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");
+  });
+
+  it("skips auto spans and falls back to a full row", () => {
+    const { container } = render(
+      <Grid container>
+        <Grid xs="auto" sm="auto" xl="auto">
+          Auto
+        </Grid>
+        <Grid size="grow">Grow</Grid>
+      </Grid>,
+    );
+
+    const items = container.querySelectorAll("[data-slot='grid'][data-item]");
+    expect(items[0]?.className).not.toMatch(/\b(sm|md|lg|xl):col-span-/);
+    expect(items[0]?.className).toContain("col-span-12");
+    expect(items[1]?.className).toContain("col-span-12");
+    expect(screen.getByText("Auto")).toBeInTheDocument();
+    expect(screen.getByText("Grow")).toBeInTheDocument();
+  });
+});
+
+describe("Box", () => {
+  it("renders as a generic wrapper and can change the element", () => {
+    render(
+      <Box>
+        <Box component="section">Panel</Box>
+      </Box>,
+    );
+    expect(screen.getByText("Panel").tagName).toBe("SECTION");
+  });
+});

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/NativeSelect.test.tsx

@@ -0,0 +1,28 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { NativeSelect } from "./NativeSelect";
+
+describe("NativeSelect", () => {
+  it("renders a full-width form select by default", () => {
+    render(
+      <NativeSelect aria-label="Rows">
+        <option value="10">10</option>
+      </NativeSelect>,
+    );
+    const select = screen.getByLabelText("Rows");
+    expect(select).toHaveAttribute("data-size", "default");
+    expect(select).not.toHaveAttribute("size");
+  });
+
+  it("renders a compact toolbar select without the native size attribute", () => {
+    render(
+      <NativeSelect size="sm" aria-label="Month">
+        <option value="7">AUG</option>
+      </NativeSelect>,
+    );
+    const select = screen.getByLabelText("Month");
+    expect(select).toHaveAttribute("data-size", "sm");
+    expect(select.className).toMatch(/h-8|min-h-8/);
+    expect(select).not.toHaveAttribute("size");
+  });
+});

package/src/primitives/NativeSelect.tsx

@@ -1,16 +1,26 @@
 import * as React from "react";
 import { cn } from "../lib/cn";
-import { nativeSelectClass } from "../lib/chips";
+import { nativeSelectSizeClass, type NativeSelectSize } from "../lib/chips";
+
+export type NativeSelectProps = Omit<React.ComponentProps<"select">, "size"> & {
+  /**
+   * Visual size. `default` stays full-width for forms.
+   * `sm` is a compact pill for toolbars. `touch` is a 44px target.
+   * Omits the native HTML `size` (visible option rows) to avoid the clash.
+   */
+  size?: NativeSelectSize;
+};
 
 /**
  * Styled native `<select>` — prefer compound `Select` for custom menus.
  */
-const NativeSelect = React.forwardRef<HTMLSelectElement, React.ComponentProps<"select">>(
-  ({ className, children, ...props }, ref) => (
+const NativeSelect = React.forwardRef<HTMLSelectElement, NativeSelectProps>(
+  ({ className, size = "default", children, ...props }, ref) => (
     <select
       ref={ref}
       data-slot="native-select"
-      className={cn(nativeSelectClass, "mt-0", className)}
+      data-size={size}
+      className={cn(nativeSelectSizeClass(size), className)}
       {...props}
     >
       {children}

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();
-  });
-});