@spatika/react 1.4.0 → 1.5.0

package/dist/lib/create-theme.js

@@ -0,0 +1,138 @@
+import { isDarkTheme, isThemeId } from "./themes";
+export const PALETTE_CSS_VARS = {
+    background: "--background",
+    foreground: "--foreground",
+    card: "--card",
+    cardForeground: "--card-foreground",
+    popover: "--popover",
+    popoverForeground: "--popover-foreground",
+    primary: "--primary",
+    primaryForeground: "--primary-foreground",
+    secondary: "--secondary",
+    secondaryForeground: "--secondary-foreground",
+    muted: "--muted",
+    mutedForeground: "--muted-foreground",
+    accent: "--accent",
+    accentForeground: "--accent-foreground",
+    destructive: "--destructive",
+    destructiveForeground: "--destructive-foreground",
+    border: "--border",
+    input: "--input",
+    inputBackground: "--input-background",
+    switchBackground: "--switch-background",
+    ring: "--ring",
+    sidebar: "--sidebar",
+    sidebarForeground: "--sidebar-foreground",
+    sidebarPrimary: "--sidebar-primary",
+    sidebarPrimaryForeground: "--sidebar-primary-foreground",
+    sidebarAccent: "--sidebar-accent",
+    sidebarAccentForeground: "--sidebar-accent-foreground",
+    sidebarBorder: "--sidebar-border",
+    sidebarRing: "--sidebar-ring",
+    accentInfo: "--accent-info",
+    accentInfoBg: "--accent-info-bg",
+    accentHighlight: "--accent-highlight",
+    accentHighlightBg: "--accent-highlight-bg",
+    accentWarm: "--accent-warm",
+    accentWarmBg: "--accent-warm-bg",
+    accentDangerBg: "--accent-danger-bg",
+    chart1: "--chart-1",
+    chart2: "--chart-2",
+    chart3: "--chart-3",
+    chart4: "--chart-4",
+    chart5: "--chart-5",
+};
+export const GLASS_CSS_VARS = {
+    bg: "--glass-bg",
+    panelBg: "--glass-panel-bg",
+    mutedBg: "--glass-muted-bg",
+    headerBg: "--glass-header-bg",
+    border: "--glass-border",
+    blur: "--glass-blur",
+    headerBlur: "--glass-header-blur",
+    menuBlur: "--glass-menu-blur",
+    saturate: "--glass-saturate",
+    shadow: "--glass-shadow",
+    highlight: "--glass-highlight",
+    overlayBg: "--modal-overlay-bg",
+    overlayBlur: "--modal-overlay-blur",
+};
+export const SHAPE_CSS_VARS = {
+    radius: "--radius",
+    radiusCard: "--radius-card",
+    radiusControl: "--radius-control",
+    radiusPill: "--radius-pill",
+};
+const CUSTOM_THEME_STYLE_ID = "spk-custom-themes";
+function assignMappedVars(vars, source, map) {
+    if (!source)
+        return;
+    for (const [key, cssVar] of Object.entries(map)) {
+        const value = source[key];
+        if (typeof value === "string" && value.length > 0)
+            vars[cssVar] = value;
+    }
+}
+/** Build a custom theme that overlays CSS variables on a built-in Spatika theme. */
+export function createTheme(options) {
+    const id = options.id.trim();
+    if (!id) {
+        throw new Error("createTheme: `id` is required.");
+    }
+    if (isThemeId(id)) {
+        throw new Error(`createTheme: "${id}" is a built-in theme. Choose a different id.`);
+    }
+    const base = options.extends ?? "mukta";
+    const colorScheme = options.colorScheme ?? (isDarkTheme(base) ? "dark" : "light");
+    const vars = {};
+    assignMappedVars(vars, options.palette, PALETTE_CSS_VARS);
+    assignMappedVars(vars, options.glass, GLASS_CSS_VARS);
+    assignMappedVars(vars, options.shape, SHAPE_CSS_VARS);
+    if (options.typography?.fontFamily) {
+        vars["--font-sans"] = options.typography.fontFamily;
+    }
+    if (options.vars) {
+        for (const [key, value] of Object.entries(options.vars)) {
+            if (value)
+                vars[key] = value;
+        }
+    }
+    return {
+        id,
+        label: options.label?.trim() || id,
+        extends: base,
+        colorScheme,
+        vars,
+    };
+}
+/** Serialize a custom theme as an attribute selector rule. */
+export function themeToCss(theme) {
+    const entries = Object.entries(theme.vars);
+    if (!entries.length) {
+        return `[data-spk-theme="${theme.id}"] {\n}\n`;
+    }
+    const decls = entries.map(([key, value]) => `  ${key}: ${value};`).join("\n");
+    const font = theme.vars["--font-sans"]
+        ? `\n  font-family: var(--font-sans);`
+        : "";
+    return `[data-spk-theme="${theme.id}"] {\n${decls}${font}\n}\n`;
+}
+/** Inject (or replace) a single stylesheet for every registered custom theme. */
+export function injectCustomThemeStyles(themes) {
+    if (typeof document === "undefined")
+        return;
+    let el = document.getElementById(CUSTOM_THEME_STYLE_ID);
+    if (!themes.length) {
+        el?.remove();
+        return;
+    }
+    if (!el) {
+        el = document.createElement("style");
+        el.id = CUSTOM_THEME_STYLE_ID;
+        document.head.appendChild(el);
+    }
+    el.textContent = themes.map(themeToCss).join("\n");
+}
+export function findCustomTheme(theme, customThemes) {
+    return customThemes?.find((item) => item.id === theme);
+}

package/dist/lib/scheduler.js

@@ -504,8 +504,8 @@ export function eventColorStyle(tone, variant) {
         return { backgroundColor: color };
     if (variant === "bar") {
         return {
-            backgroundColor: `color-mix(in srgb, ${color} 88%, transparent)`,
-            color: "var(--primary-foreground)",
+            backgroundColor: color,
+            color: "#ffffff",
         };
     }
     if (variant === "wash") {

package/dist/lib/themes.d.ts

@@ -1,16 +1,26 @@
-/** Supported theme identifiers applied as classes on a root element. */
+/** Supported built-in theme identifiers applied as classes on a root element. */
 export declare const THEME_IDS: readonly ["mukta", "neelam", "usha", "sandhya"];
-export type ThemeId = (typeof THEME_IDS)[number];
-export declare const DEFAULT_THEME: ThemeId;
+export type BuiltinThemeId = (typeof THEME_IDS)[number];
+/**
+ * Built-in ids plus custom ids from `createTheme`.
+ * Custom strings keep autocomplete for Mukta / Neelam / Usha / Sandhya.
+ */
+export type ThemeId = BuiltinThemeId | (string & {});
+export declare const DEFAULT_THEME: BuiltinThemeId;
 /** Default `localStorage` key used by the docs site and `SpatikaThemeProvider`. */
 export declare const SPATIKA_THEME_STORAGE_KEY = "spk-theme";
-export declare const THEME_LABELS: Record<ThemeId, string>;
-export declare function isThemeId(value: unknown): value is ThemeId;
+export declare const THEME_LABELS: Record<BuiltinThemeId, string>;
+export declare function isThemeId(value: unknown): value is BuiltinThemeId;
 export declare function isDarkTheme(theme: ThemeId): boolean;
+export type ApplyThemeCustom = {
+    id: string;
+    extends: BuiltinThemeId;
+    colorScheme: "light" | "dark";
+};
 /** Read a persisted theme. Returns `null` when missing or invalid. */
-export declare function readStoredTheme(storageKey?: string | false): ThemeId | null;
+export declare function readStoredTheme(storageKey?: string | false, allowed?: readonly string[]): ThemeId | null;
 /** Persist a theme. No-op when `storageKey` is unset. */
 export declare function writeStoredTheme(storageKey: string | false | undefined, theme: ThemeId): void;
 /** Apply a theme class to an element (defaults to `<html>`). */
-export declare function applyTheme(theme: ThemeId, target?: HTMLElement | null): void;
+export declare function applyTheme(theme: ThemeId, target?: HTMLElement | null, custom?: ApplyThemeCustom | null): void;
 //# sourceMappingURL=themes.d.ts.map

package/dist/lib/themes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/lib/themes.ts"],"names":[],"mappings":"AAAA,wEAAwE;AACxE,eAAO,MAAM,SAAS,iDAAkD,CAAC;AAEzE,MAAM,MAAM,OAAO,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAEjD,eAAO,MAAM,aAAa,EAAE,OAAiB,CAAC;AAE9C,mFAAmF;AACnF,eAAO,MAAM,yBAAyB,cAAc,CAAC;AAErD,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,OAAO,EAAE,MAAM,CAKhD,CAAC;AAIF,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,OAAO,CAE1D;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAEnD;AAED,sEAAsE;AACtE,wBAAgB,eAAe,CAAC,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,GAAG,OAAO,GAAG,IAAI,CAQ3E;AAED,yDAAyD;AACzD,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAO7F;AAED,gEAAgE;AAChE,wBAAgB,UAAU,CAAC,KAAK,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,QASrE"}
+{"version":3,"file":"themes.d.ts","sourceRoot":"","sources":["../../src/lib/themes.ts"],"names":[],"mappings":"AAAA,iFAAiF;AACjF,eAAO,MAAM,SAAS,iDAAkD,CAAC;AAEzE,MAAM,MAAM,cAAc,GAAG,CAAC,OAAO,SAAS,CAAC,CAAC,MAAM,CAAC,CAAC;AAExD;;;GAGG;AACH,MAAM,MAAM,OAAO,GAAG,cAAc,GAAG,CAAC,MAAM,GAAG,EAAE,CAAC,CAAC;AAErD,eAAO,MAAM,aAAa,EAAE,cAAwB,CAAC;AAErD,mFAAmF;AACnF,eAAO,MAAM,yBAAyB,cAAc,CAAC;AAErD,eAAO,MAAM,YAAY,EAAE,MAAM,CAAC,cAAc,EAAE,MAAM,CAKvD,CAAC;AAIF,wBAAgB,SAAS,CAAC,KAAK,EAAE,OAAO,GAAG,KAAK,IAAI,cAAc,CAEjE;AAED,wBAAgB,WAAW,CAAC,KAAK,EAAE,OAAO,GAAG,OAAO,CAEnD;AAED,MAAM,MAAM,gBAAgB,GAAG;IAC7B,EAAE,EAAE,MAAM,CAAC;IACX,OAAO,EAAE,cAAc,CAAC;IACxB,WAAW,EAAE,OAAO,GAAG,MAAM,CAAC;CAC/B,CAAC;AAEF,sEAAsE;AACtE,wBAAgB,eAAe,CAC7B,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,EAC3B,OAAO,CAAC,EAAE,SAAS,MAAM,EAAE,GAC1B,OAAO,GAAG,IAAI,CAWhB;AAED,yDAAyD;AACzD,wBAAgB,gBAAgB,CAAC,UAAU,EAAE,MAAM,GAAG,KAAK,GAAG,SAAS,EAAE,KAAK,EAAE,OAAO,GAAG,IAAI,CAO7F;AAOD,gEAAgE;AAChE,wBAAgB,UAAU,CACxB,KAAK,EAAE,OAAO,EACd,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,EAC3B,MAAM,CAAC,EAAE,gBAAgB,GAAG,IAAI,QAcjC"}

package/dist/lib/themes.js

@@ -1,4 +1,4 @@
-/** Supported theme identifiers applied as classes on a root element. */
+/** Supported built-in theme identifiers applied as classes on a root element. */
 export const THEME_IDS = ["mukta", "neelam", "usha", "sandhya"];
 export const DEFAULT_THEME = "mukta";
 /** Default `localStorage` key used by the docs site and `SpatikaThemeProvider`. */
@@ -17,12 +17,18 @@ export function isDarkTheme(theme) {
     return theme === "neelam" || theme === "sandhya";
 }
 /** Read a persisted theme. Returns `null` when missing or invalid. */
-export function readStoredTheme(storageKey) {
+export function readStoredTheme(storageKey, allowed) {
     if (!storageKey || typeof window === "undefined")
         return null;
     try {
         const value = window.localStorage.getItem(storageKey);
-        return isThemeId(value) ? value : null;
+        if (!value)
+            return null;
+        if (isThemeId(value))
+            return value;
+        if (allowed?.includes(value))
+            return value;
+        return null;
     }
     catch {
         return null;
@@ -39,15 +45,23 @@ export function writeStoredTheme(storageKey, theme) {
         // Private mode / quota — keep the in-memory theme.
     }
 }
+function resolveBase(theme, custom) {
+    if (custom)
+        return custom.extends;
+    return isThemeId(theme) ? theme : DEFAULT_THEME;
+}
 /** Apply a theme class to an element (defaults to `<html>`). */
-export function applyTheme(theme, target) {
+export function applyTheme(theme, target, custom) {
     if (typeof document === "undefined")
         return;
     const root = target ?? document.documentElement;
+    const base = resolveBase(theme, custom);
+    const id = custom?.id ?? theme;
     root.classList.remove(...THEME_CLASS_LIST);
-    if (theme !== DEFAULT_THEME) {
-        root.classList.add(theme);
+    if (base !== DEFAULT_THEME) {
+        root.classList.add(base);
     }
-    root.setAttribute("data-spk-theme", theme);
-    root.style.colorScheme = isDarkTheme(theme) ? "dark" : "light";
+    root.setAttribute("data-spk-theme", id);
+    const dark = custom ? custom.colorScheme === "dark" : isDarkTheme(base);
+    root.style.colorScheme = dark ? "dark" : "light";
 }

package/dist/lib/use-media-query.d.ts

@@ -1,5 +1,14 @@
+import { BREAKPOINT_KEYS, BREAKPOINTS, breakpointDown, breakpointUp, type Breakpoint } from "./breakpoints";
 /** Subscribe to a CSS media query. Defaults to `false` until mounted. */
 export declare function useMediaQuery(query: string): boolean;
 /** True when the viewport is below the `md` breakpoint (768px). */
 export declare function useIsMobile(): boolean;
+/** True from this breakpoint up (`xs` is always true). */
+export declare function useBreakpointUp(key: Breakpoint): boolean;
+/** True strictly below this breakpoint. */
+export declare function useBreakpointDown(key: Exclude<Breakpoint, "xs">): boolean;
+/** Largest matching breakpoint, starting at `xs`. */
+export declare function useBreakpoint(): Breakpoint;
+export { BREAKPOINTS, BREAKPOINT_KEYS, breakpointDown, breakpointUp };
+export type { Breakpoint };
 //# sourceMappingURL=use-media-query.d.ts.map

package/dist/lib/use-media-query.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../src/lib/use-media-query.ts"],"names":[],"mappings":"AAEA,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAapD;AAED,mEAAmE;AACnE,wBAAgB,WAAW,IAAI,OAAO,CAErC"}
+{"version":3,"file":"use-media-query.d.ts","sourceRoot":"","sources":["../../src/lib/use-media-query.ts"],"names":[],"mappings":"AACA,OAAO,EACL,eAAe,EACf,WAAW,EACX,cAAc,EACd,YAAY,EACZ,KAAK,UAAU,EAChB,MAAM,eAAe,CAAC;AAEvB,yEAAyE;AACzE,wBAAgB,aAAa,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,CAapD;AAED,mEAAmE;AACnE,wBAAgB,WAAW,IAAI,OAAO,CAErC;AAED,0DAA0D;AAC1D,wBAAgB,eAAe,CAAC,GAAG,EAAE,UAAU,GAAG,OAAO,CAGxD;AAED,2CAA2C;AAC3C,wBAAgB,iBAAiB,CAAC,GAAG,EAAE,OAAO,CAAC,UAAU,EAAE,IAAI,CAAC,GAAG,OAAO,CAEzE;AAED,qDAAqD;AACrD,wBAAgB,aAAa,IAAI,UAAU,CAU1C;AAED,OAAO,EAAE,WAAW,EAAE,eAAe,EAAE,cAAc,EAAE,YAAY,EAAE,CAAC;AACtE,YAAY,EAAE,UAAU,EAAE,CAAC"}

package/dist/lib/use-media-query.js

@@ -1,4 +1,5 @@
 import { useEffect, useState } from "react";
+import { BREAKPOINT_KEYS, BREAKPOINTS, breakpointDown, breakpointUp, } from "./breakpoints";
 /** Subscribe to a CSS media query. Defaults to `false` until mounted. */
 export function useMediaQuery(query) {
     const [matches, setMatches] = useState(false);
@@ -15,5 +16,31 @@ export function useMediaQuery(query) {
 }
 /** True when the viewport is below the `md` breakpoint (768px). */
 export function useIsMobile() {
-    return useMediaQuery("(max-width: 767px)");
+    return useMediaQuery(breakpointDown("md"));
 }
+/** True from this breakpoint up (`xs` is always true). */
+export function useBreakpointUp(key) {
+    const matches = useMediaQuery(breakpointUp(key));
+    return key === "xs" || matches;
+}
+/** True strictly below this breakpoint. */
+export function useBreakpointDown(key) {
+    return useMediaQuery(breakpointDown(key));
+}
+/** Largest matching breakpoint, starting at `xs`. */
+export function useBreakpoint() {
+    const sm = useMediaQuery(breakpointUp("sm"));
+    const md = useMediaQuery(breakpointUp("md"));
+    const lg = useMediaQuery(breakpointUp("lg"));
+    const xl = useMediaQuery(breakpointUp("xl"));
+    if (xl)
+        return "xl";
+    if (lg)
+        return "lg";
+    if (md)
+        return "md";
+    if (sm)
+        return "sm";
+    return "xs";
+}
+export { BREAKPOINTS, BREAKPOINT_KEYS, breakpointDown, breakpointUp };

package/dist/primitives/Alert.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const alertVariants: (props?: ({
-    variant?: "default" | "info" | "warm" | "highlight" | "danger" | null | undefined;
+    variant?: "default" | "highlight" | "info" | "warm" | "danger" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare function Alert({ className, variant, ...props }: React.ComponentProps<"div"> & VariantProps<typeof alertVariants>): React.JSX.Element;
 declare function AlertTitle({ className, ...props }: React.ComponentProps<"h5">): React.JSX.Element;

package/dist/primitives/Badge.d.ts

@@ -1,10 +1,10 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "info" | "warm" | "highlight" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "highlight" | "outline" | "info" | "warm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const Badge: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLSpanElement> & React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "destructive" | "outline" | "secondary" | "info" | "warm" | "highlight" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "highlight" | "outline" | "info" | "warm" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     asChild?: boolean;
 }, "ref"> & React.RefAttributes<HTMLSpanElement>>;

package/dist/primitives/Button.d.ts

@@ -1,11 +1,11 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "gradient" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "link" | "outline" | "ghost" | "glass" | "gradient" | null | undefined;
     size?: "default" | "icon" | "touch" | "sm" | "lg" | "xl" | "icon-touch" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 declare const Button: React.ForwardRefExoticComponent<Omit<React.ClassAttributes<HTMLButtonElement> & React.ButtonHTMLAttributes<HTMLButtonElement> & VariantProps<(props?: ({
-    variant?: "default" | "link" | "destructive" | "outline" | "secondary" | "ghost" | "glass" | "gradient" | null | undefined;
+    variant?: "default" | "secondary" | "destructive" | "link" | "outline" | "ghost" | "glass" | "gradient" | null | undefined;
     size?: "default" | "icon" | "touch" | "sm" | "lg" | "xl" | "icon-touch" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     asChild?: boolean;

package/dist/primitives/Container.d.ts

@@ -1,12 +1,12 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const containerVariants: (props?: ({
-    maxWidth?: "sm" | "lg" | "xl" | "md" | "full" | null | undefined;
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
     disableGutters?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ContainerProps = React.ComponentPropsWithoutRef<"div"> & VariantProps<typeof containerVariants>;
 declare const Container: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & VariantProps<(props?: ({
-    maxWidth?: "sm" | "lg" | "xl" | "md" | "full" | null | undefined;
+    maxWidth?: "sm" | "md" | "lg" | "xl" | "full" | null | undefined;
     disableGutters?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 export { Container, containerVariants };

package/dist/primitives/Fab.d.ts

@@ -2,8 +2,8 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const fabVariants: (props?: ({
     variant?: "circular" | "extended" | null | undefined;
-    color?: "default" | "glass" | "primary" | null | undefined;
-    size?: "sm" | "lg" | "md" | null | undefined;
+    color?: "default" | "primary" | "glass" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type FabProps = Omit<React.ComponentPropsWithoutRef<"button">, "color"> & VariantProps<typeof fabVariants> & {
     asChild?: boolean;
@@ -13,8 +13,8 @@ export type FabProps = Omit<React.ComponentPropsWithoutRef<"button">, "color"> &
  */
 declare const Fab: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "color"> & VariantProps<(props?: ({
     variant?: "circular" | "extended" | null | undefined;
-    color?: "default" | "glass" | "primary" | null | undefined;
-    size?: "sm" | "lg" | "md" | null | undefined;
+    color?: "default" | "primary" | "glass" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     asChild?: boolean;
 } & React.RefAttributes<HTMLButtonElement>>;

package/dist/primitives/Grid.d.ts

@@ -19,12 +19,13 @@ export type GridProps = React.ComponentPropsWithoutRef<"div"> & {
     sm?: number | "auto";
     md?: number | "auto";
     lg?: number | "auto";
+    xl?: number | "auto";
     size?: number | "grow";
 };
 /**
  * 12-column CSS grid. Use `container` on the parent and breakpoint spans on items.
  */
-declare function Grid({ container, item: _item, spacing, columns: _columns, xs, sm, md, lg, size, className, ...props }: GridProps): React.JSX.Element;
+declare function Grid({ container, item: _item, spacing, columns: _columns, xs, sm, md, lg, xl, size, className, ...props }: GridProps): React.JSX.Element;
 declare namespace Grid {
     var displayName: string;
 }

package/dist/primitives/Grid.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/primitives/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC7D,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,GAAG;gBAPK,KAAK,CAAC,WAAW;cACnB,OAAO;wCAWlB,CAAC;AA6BF,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,EAAE,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAOF;;GAEG;AACH,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EAAE,KAAK,EACX,OAAW,EACX,OAAO,EAAE,QAAa,EACtB,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,qBAmBX;kBA/BQ,IAAI;;;AAkCb,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC"}
+{"version":3,"file":"Grid.d.ts","sourceRoot":"","sources":["../../src/primitives/Grid.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,MAAM,MAAM,QAAQ,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC7D,SAAS,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC;IAC9B,OAAO,CAAC,EAAE,OAAO,CAAC;CACnB,CAAC;AAEF;;GAEG;AACH,QAAA,MAAM,GAAG;gBAPK,KAAK,CAAC,WAAW;cACnB,OAAO;wCAWlB,CAAC;AA6BF,MAAM,MAAM,SAAS,GAAG,KAAK,CAAC,wBAAwB,CAAC,KAAK,CAAC,GAAG;IAC9D,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,OAAO,CAAC,EAAE,EAAE,CAAC;IACb,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,EAAE,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IACrB,IAAI,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;CACxB,CAAC;AAcF;;GAEG;AACH,iBAAS,IAAI,CAAC,EACZ,SAAS,EACT,IAAI,EAAE,KAAK,EACX,OAAW,EACX,OAAO,EAAE,QAAa,EACtB,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,EAAE,EACF,IAAI,EACJ,SAAS,EACT,GAAG,KAAK,EACT,EAAE,SAAS,qBAoBX;kBAjCQ,IAAI;;;AAoCb,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,CAAC"}

package/dist/primitives/Grid.js

@@ -39,12 +39,20 @@ function spanFor(value) {
         return undefined;
     return spanClass[value] ?? "col-span-12";
 }
+function prefixedSpan(prefix, value) {
+    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.
  */
-function Grid({ container, item: _item, spacing = 2, columns: _columns = 12, xs, sm, md, lg, size, className, ...props }) {
+function Grid({ container, item: _item, spacing = 2, columns: _columns = 12, xs, sm, md, lg, xl, size, className, ...props }) {
     const span = spanFor(typeof size === "number" ? size : xs);
-    return (_jsx("div", { "data-slot": "grid", "data-container": container ? "" : undefined, "data-item": _item || !container ? "" : undefined, className: cn(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"), className), ...props }));
+    return (_jsx("div", { "data-slot": "grid", "data-container": container ? "" : undefined, "data-item": _item || !container ? "" : undefined, className: cn(container && "grid grid-cols-12", container && (gapClass[spacing] ?? "gap-2"), !container && (span ?? (size === "grow" ? "col-span-12" : "col-span-12")), prefixedSpan("sm", sm), prefixedSpan("md", md), prefixedSpan("lg", lg), prefixedSpan("xl", xl), className), ...props }));
 }
 Grid.displayName = "Grid";
 export { Box, Grid };

package/dist/primitives/IconButton.d.ts

@@ -2,7 +2,7 @@ import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const iconButtonVariants: (props?: ({
     variant?: "filled" | "outline" | "ghost" | "glass" | null | undefined;
-    size?: "touch" | "sm" | "lg" | "md" | null | undefined;
+    size?: "touch" | "sm" | "md" | "lg" | null | undefined;
     shape?: "circular" | "rounded" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type IconButtonProps = React.ComponentPropsWithoutRef<"button"> & VariantProps<typeof iconButtonVariants> & {
@@ -13,7 +13,7 @@ export type IconButtonProps = React.ComponentPropsWithoutRef<"button"> & Variant
  */
 declare const IconButton: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & VariantProps<(props?: ({
     variant?: "filled" | "outline" | "ghost" | "glass" | null | undefined;
-    size?: "touch" | "sm" | "lg" | "md" | null | undefined;
+    size?: "touch" | "sm" | "md" | "lg" | null | undefined;
     shape?: "circular" | "rounded" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & {
     asChild?: boolean;

package/dist/primitives/ToggleButton.d.ts

@@ -1,7 +1,7 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleButtonVariants: (props?: ({
-    size?: "sm" | "lg" | "md" | null | undefined;
+    size?: "sm" | "md" | "lg" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export type ToggleButtonGroupProps = Omit<React.ComponentPropsWithoutRef<"div">, "onChange" | "value" | "defaultValue"> & {
     exclusive?: boolean;

package/dist/theme/SpatikaThemeProvider.d.ts

@@ -1,4 +1,5 @@
 import { type ReactNode } from "react";
+import { type SpatikaTheme } from "../lib/create-theme";
 import { type ThemeId } from "../lib/themes";
 export type SpatikaThemeContextValue = {
     theme: ThemeId;
@@ -25,12 +26,10 @@ 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[];
 };
-/**
- * MUI-style theme provider for Spatika.
- * Wraps the app (or a subtree) and applies theme classes / data attributes.
- */
-export declare function SpatikaThemeProvider({ children, theme: themeProp, defaultTheme, storageKey, onThemeChange, syncDocument, target, className, }: SpatikaThemeProviderProps): import("react").JSX.Element;
+export declare function SpatikaThemeProvider({ children, theme: themeProp, defaultTheme, storageKey, onThemeChange, syncDocument, target, className, customThemes, }: SpatikaThemeProviderProps): import("react").JSX.Element;
 /** Access current theme and setter from `SpatikaThemeProvider`. */
 export declare function useSpatikaTheme(): SpatikaThemeContextValue;
 //# sourceMappingURL=SpatikaThemeProvider.d.ts.map

package/dist/theme/SpatikaThemeProvider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SpatikaThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/SpatikaThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AACf,OAAO,EAML,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,SAAS,OAAO,EAAE,CAAC;CAC5B,CAAC;AAIF,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wEAAwE;IACxE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAEF;;;GAGG;AACH,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,YAA4B,EAC5B,UAAkB,EAClB,aAAa,EACb,YAAmB,EACnB,MAAM,EACN,SAAS,GACV,EAAE,yBAAyB,+BAyC3B;AAED,mEAAmE;AACnE,wBAAgB,eAAe,IAAI,wBAAwB,CAM1D"}
+{"version":3,"file":"SpatikaThemeProvider.d.ts","sourceRoot":"","sources":["../../src/theme/SpatikaThemeProvider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAOL,KAAK,SAAS,EACf,MAAM,OAAO,CAAC;AAEf,OAAO,EAGL,KAAK,YAAY,EAClB,MAAM,qBAAqB,CAAC;AAC7B,OAAO,EASL,KAAK,OAAO,EACb,MAAM,eAAe,CAAC;AAEvB,MAAM,MAAM,wBAAwB,GAAG;IACrC,KAAK,EAAE,OAAO,CAAC;IACf,QAAQ,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACnC,MAAM,EAAE,SAAS,OAAO,EAAE,CAAC;CAC5B,CAAC;AAIF,MAAM,MAAM,yBAAyB,GAAG;IACtC,QAAQ,EAAE,SAAS,CAAC;IACpB,uBAAuB;IACvB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,iFAAiF;IACjF,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,GAAG,KAAK,CAAC;IAC5B,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,KAAK,IAAI,CAAC;IACzC;;;OAGG;IACH,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wEAAwE;IACxE,MAAM,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,yEAAyE;IACzE,YAAY,CAAC,EAAE,SAAS,YAAY,EAAE,CAAC;CACxC,CAAC;AAgBF,wBAAgB,oBAAoB,CAAC,EACnC,QAAQ,EACR,KAAK,EAAE,SAAS,EAChB,YAA4B,EAC5B,UAAkB,EAClB,aAAa,EACb,YAAmB,EACnB,MAAM,EACN,SAAS,EACT,YAAkC,GACnC,EAAE,yBAAyB,+BA+C3B;AAED,mEAAmE;AACnE,wBAAgB,eAAe,IAAI,wBAAwB,CAM1D"}

package/dist/theme/SpatikaThemeProvider.js

@@ -1,32 +1,47 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useLayoutEffect, useMemo, useState, } from "react";
-import { applyTheme, DEFAULT_THEME, readStoredTheme, THEME_IDS, writeStoredTheme, } from "../lib/themes";
+import { cn } from "../lib/cn";
+import { findCustomTheme, injectCustomThemeStyles, } from "../lib/create-theme";
+import { applyTheme, DEFAULT_THEME, isDarkTheme, isThemeId, readStoredTheme, THEME_IDS, writeStoredTheme, } from "../lib/themes";
 const SpatikaThemeContext = createContext(null);
+function baseThemeClass(theme, custom) {
+    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.
  */
-export function SpatikaThemeProvider({ children, theme: themeProp, defaultTheme = DEFAULT_THEME, storageKey = false, onThemeChange, syncDocument = true, target, className, }) {
-    const [uncontrolled, setUncontrolled] = useState(() => readStoredTheme(storageKey) ?? defaultTheme);
+const EMPTY_CUSTOM_THEMES = [];
+export function SpatikaThemeProvider({ children, theme: themeProp, defaultTheme = DEFAULT_THEME, storageKey = false, onThemeChange, syncDocument = true, target, className, customThemes = EMPTY_CUSTOM_THEMES, }) {
+    const customIds = useMemo(() => customThemes.map((item) => item.id), [customThemes]);
+    const [uncontrolled, setUncontrolled] = useState(() => readStoredTheme(storageKey, customIds) ?? defaultTheme);
     const theme = themeProp ?? uncontrolled;
+    const custom = findCustomTheme(theme, customThemes);
     const setTheme = useCallback((next) => {
         if (themeProp === undefined)
             setUncontrolled(next);
         onThemeChange?.(next);
     }, [onThemeChange, themeProp]);
     useLayoutEffect(() => {
+        injectCustomThemeStyles(customThemes);
         if (syncDocument)
-            applyTheme(theme);
+            applyTheme(theme, undefined, custom);
         if (target)
-            applyTheme(theme, target);
+            applyTheme(theme, target, custom);
         writeStoredTheme(storageKey, theme);
-    }, [theme, syncDocument, target, storageKey]);
-    const value = useMemo(() => ({
-        theme,
-        setTheme,
-        themes: THEME_IDS,
-    }), [theme, setTheme]);
-    return (_jsx(SpatikaThemeContext.Provider, { value: value, children: _jsx("div", { className: className, "data-spk-theme": theme, "data-slot": "spatika-theme-provider", children: children }) }));
+    }, [theme, syncDocument, target, storageKey, custom, customThemes]);
+    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,
+        };
+    }, [theme, setTheme, customThemes]);
+    const dark = custom ? custom.colorScheme === "dark" : isDarkTheme(theme);
+    const themeClass = baseThemeClass(theme, custom);
+    return (_jsx(SpatikaThemeContext.Provider, { value: value, children: _jsx("div", { className: cn(className, themeClass), "data-spk-theme": theme, "data-slot": "spatika-theme-provider", style: { colorScheme: dark ? "dark" : "light" }, children: children }) }));
 }
 /** Access current theme and setter from `SpatikaThemeProvider`. */
 export function useSpatikaTheme() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spatika/react",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "license": "MIT",
   "description": "Spatika UI — glass React primitives and composites for production apps",
   "homepage": "https://spatika.sweyam.com",
@@ -59,7 +59,9 @@
     "react-dom": "^18.2.0 || ^19.0.0"
   },
   "dependencies": {
-    "@spatika/tokens": "1.4.0",
+    "@spatika/charts": "1.5.0",
+    "@spatika/editor": "1.5.0",
+    "@spatika/tokens": "1.5.0",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "^1.1.1",