@spatika/react 1.0.0

package/dist/theme/SpatikaThemeProvider.js

@@ -0,0 +1,38 @@
+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";
+const SpatikaThemeContext = createContext(null);
+/**
+ * MUI-style 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 theme = themeProp ?? uncontrolled;
+    const setTheme = useCallback((next) => {
+        if (themeProp === undefined)
+            setUncontrolled(next);
+        onThemeChange?.(next);
+    }, [onThemeChange, themeProp]);
+    useLayoutEffect(() => {
+        if (syncDocument)
+            applyTheme(theme);
+        if (target)
+            applyTheme(theme, target);
+        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 }) }));
+}
+/** Access current theme and setter from `SpatikaThemeProvider`. */
+export function useSpatikaTheme() {
+    const ctx = useContext(SpatikaThemeContext);
+    if (!ctx) {
+        throw new Error("useSpatikaTheme must be used within <SpatikaThemeProvider>");
+    }
+    return ctx;
+}

package/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@spatika/react",
+  "version": "1.0.0",
+  "license": "MIT",
+  "description": "Spatika React primitives and composites",
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./package.json": "./package.json"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "tsc -p tsconfig.build.json",
+    "typecheck": "tsc -p tsconfig.json --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0 || ^19.0.0",
+    "react-dom": "^18.2.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "@spatika/tokens": "1.0.0",
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "cmdk": "^1.1.1",
+    "lucide-react": "^0.487.0",
+    "tailwind-merge": "^3.2.0",
+    "vaul": "^1.1.2"
+  },
+  "devDependencies": {
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/react": "^19.2.14",
+    "@types/react-dom": "^19.2.3",
+    "@vitest/coverage-v8": "^4.1.10",
+    "jsdom": "^30.0.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "typescript": "~5.8.3",
+    "vitest": "^4.1.10"
+  }
+}

package/src/composites/ActionBar.tsx

@@ -0,0 +1,25 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export function ActionBar({
+  children,
+  className,
+  sticky = false,
+}: {
+  children: ReactNode;
+  className?: string;
+  sticky?: boolean;
+}) {
+  return (
+    <div
+      data-slot="action-bar"
+      className={cn(
+        "glass-header flex flex-wrap items-center justify-end gap-2 border-t border-border/40 px-4 py-3",
+        sticky && "sticky bottom-0 z-20",
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}

package/src/composites/AmountInput.tsx

@@ -0,0 +1,40 @@
+import type { ComponentProps } from "react";
+import { cn } from "../lib/cn";
+import { Input } from "../primitives/Input";
+
+export type AmountInputProps = Omit<ComponentProps<"input">, "type" | "value" | "onChange"> & {
+  value: string;
+  onChange: (value: string) => void;
+  currency?: string;
+  containerClassName?: string;
+};
+
+/** Currency-prefixed amount field for finance forms. */
+export function AmountInput({
+  value,
+  onChange,
+  currency = "INR",
+  className,
+  containerClassName,
+  ...props
+}: AmountInputProps) {
+  return (
+    <div
+      data-slot="amount-input"
+      className={cn("relative w-full", containerClassName)}
+    >
+      <span className="pointer-events-none absolute inset-y-0 left-0 z-10 flex items-center pl-3 text-xs font-black uppercase tracking-wider text-muted-foreground">
+        {currency}
+      </span>
+      <Input
+        type="text"
+        inputMode="decimal"
+        autoComplete="off"
+        value={value}
+        onChange={(e) => onChange(e.target.value.replace(/[^0-9.,-]/g, ""))}
+        className={cn("h-11 py-0 pl-14 font-bold tabular-nums leading-none", className)}
+        {...props}
+      />
+    </div>
+  );
+}

package/src/composites/AppHeader.tsx

@@ -0,0 +1,88 @@
+import type { ReactNode } from "react";
+import { Menu } from "lucide-react";
+import { cn } from "../lib/cn";
+import { Button } from "../primitives/Button";
+import { appChromeActionClusterClass } from "./FloatingPageChrome";
+
+export type AppHeaderProps = {
+  brand?: ReactNode;
+  title?: string;
+  /** Center / search slot */
+  children?: ReactNode;
+  /** Right-side actions */
+  actions?: ReactNode;
+  onMenuClick?: () => void;
+  showMenuButton?: boolean;
+  className?: string;
+  sticky?: boolean;
+  /**
+   * `sticky` — in-flow glass bar.
+   * `chrome` — fixed safe-area app chrome (journalD RootLayout).
+   */
+  variant?: "sticky" | "chrome";
+};
+
+/**
+ * Top application chrome — glass header with brand, optional hamburger, actions.
+ */
+export function AppHeader({
+  brand,
+  title,
+  children,
+  actions,
+  onMenuClick,
+  showMenuButton = false,
+  className,
+  sticky = true,
+  variant = "sticky",
+}: AppHeaderProps) {
+  const isChrome = variant === "chrome";
+
+  return (
+    <header
+      data-slot="app-header"
+      className={cn(
+        "glass-header z-40 border-b border-border/50",
+        isChrome ? "app-chrome-header" : sticky && "sticky top-0",
+        className,
+      )}
+    >
+      <div className={cn("flex items-center gap-3 px-3 sm:px-4", isChrome ? "h-full" : "h-full min-h-14")}>
+        {showMenuButton ? (
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            aria-label="Open menu"
+            onClick={onMenuClick}
+            className="lg:hidden"
+          >
+            <Menu className="size-5" />
+          </Button>
+        ) : null}
+        <div className="flex min-w-0 items-center gap-2" data-app-wordmark>
+          {brand}
+          {title ? (
+            <span className="truncate text-sm font-black tracking-tight sm:text-base">{title}</span>
+          ) : null}
+        </div>
+        <div className="mx-auto hidden min-w-0 flex-1 justify-center md:flex" data-global-search-shell>
+          {children}
+        </div>
+        <div
+          className="ml-auto flex shrink-0 items-center gap-1.5 sm:gap-2"
+          data-app-chrome-actions
+        >
+          {actions}
+        </div>
+      </div>
+      {children ? (
+        <div className="border-t border-border/30 px-3 py-2 md:hidden" data-global-search-shell>
+          {children}
+        </div>
+      ) : null}
+    </header>
+  );
+}
+
+export { appChromeActionClusterClass };

package/src/composites/AppSidebar.tsx

@@ -0,0 +1,120 @@
+import type { LucideIcon } from "lucide-react";
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type SidebarNavItem = {
+  id: string;
+  label: string;
+  icon?: LucideIcon;
+  href?: string;
+  active?: boolean;
+  onClick?: () => void;
+  badge?: ReactNode;
+};
+
+export type SidebarNavSection = {
+  id: string;
+  title?: string;
+  items: SidebarNavItem[];
+};
+
+export type AppSidebarProps = {
+  brand?: ReactNode;
+  sections: SidebarNavSection[];
+  footer?: ReactNode;
+  className?: string;
+  /** Collapsed rail mode */
+  collapsed?: boolean;
+  widthClassName?: string;
+};
+
+/**
+ * Desktop navigation sidebar — glass panel with sectioned nav links.
+ */
+export function AppSidebar({
+  brand,
+  sections,
+  footer,
+  className,
+  collapsed = false,
+  widthClassName = "w-[280px]",
+}: AppSidebarProps) {
+  return (
+    <aside
+      data-slot="app-sidebar"
+      data-collapsed={collapsed ? "true" : "false"}
+      className={cn(
+        "glass-panel flex h-full flex-col border-r border-border/40",
+        collapsed ? "w-[72px]" : widthClassName,
+        className,
+      )}
+    >
+      {brand ? (
+        <div className={cn("shrink-0 border-b border-border/40 px-4 py-4", collapsed && "px-2")}>
+          {brand}
+        </div>
+      ) : null}
+      <nav className="flex-1 space-y-5 overflow-y-auto px-2 py-4">
+        {sections.map((section) => (
+          <div key={section.id}>
+            {section.title && !collapsed ? (
+              <p className="mb-2 px-2 text-[10px] font-black uppercase tracking-widest text-muted-foreground/70">
+                {section.title}
+              </p>
+            ) : null}
+            <ul className="space-y-1">
+              {section.items.map((item) => {
+                const Icon = item.icon;
+                const content = (
+                  <>
+                    {Icon ? <Icon className="size-4 shrink-0" /> : null}
+                    {!collapsed ? <span className="truncate">{item.label}</span> : null}
+                    {!collapsed && item.badge ? (
+                      <span className="ml-auto">{item.badge}</span>
+                    ) : null}
+                  </>
+                );
+                const classNameItem = cn(
+                  "flex w-full items-center gap-2.5 rounded-xl px-3 py-2.5 text-sm font-bold transition-colors",
+                  collapsed && "justify-center px-2",
+                  item.active
+                    ? "bg-primary/15 text-primary"
+                    : "text-muted-foreground hover:bg-muted/50 hover:text-foreground",
+                );
+                return (
+                  <li key={item.id}>
+                    {item.href ? (
+                      <a
+                        href={item.href}
+                        aria-current={item.active ? "page" : undefined}
+                        className={classNameItem}
+                        onClick={item.onClick}
+                        title={collapsed ? item.label : undefined}
+                      >
+                        {content}
+                      </a>
+                    ) : (
+                      <button
+                        type="button"
+                        className={classNameItem}
+                        onClick={item.onClick}
+                        title={collapsed ? item.label : undefined}
+                      >
+                        {content}
+                      </button>
+                    )}
+                  </li>
+                );
+              })}
+            </ul>
+          </div>
+        ))}
+      </nav>
+      {footer ? (
+        <div className={cn("shrink-0 border-t border-border/40 p-3", collapsed && "px-2")}>
+          {footer}
+        </div>
+      ) : null}
+    </aside>
+  );
+}

package/src/composites/BottomSheet.tsx

@@ -0,0 +1,179 @@
+import * as React from "react";
+import { Drawer as DrawerPrimitive } from "vaul";
+import { cn } from "../lib/cn";
+
+/**
+ * Vaul drawer root.
+ * Disable background scaling + input repositioning by default — both break
+ * touch hit-testing on iOS Safari / PWAs after the page has been scrolled.
+ */
+const Drawer = ({
+  shouldScaleBackground = false,
+  repositionInputs = false,
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Root>) => (
+  <DrawerPrimitive.Root
+    data-slot="drawer"
+    shouldScaleBackground={shouldScaleBackground}
+    repositionInputs={repositionInputs}
+    {...props}
+  />
+);
+Drawer.displayName = "Drawer";
+
+const DrawerTrigger = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Trigger>
+>(({ ...props }, ref) => (
+  <DrawerPrimitive.Trigger ref={ref} data-slot="drawer-trigger" {...props} />
+));
+DrawerTrigger.displayName = "DrawerTrigger";
+
+const DrawerPortal = ({
+  ...props
+}: React.ComponentProps<typeof DrawerPrimitive.Portal>) => (
+  <DrawerPrimitive.Portal data-slot="drawer-portal" {...props} />
+);
+DrawerPortal.displayName = "DrawerPortal";
+
+const DrawerClose = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Close>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Close>
+>(({ ...props }, ref) => (
+  <DrawerPrimitive.Close ref={ref} data-slot="drawer-close" {...props} />
+));
+DrawerClose.displayName = "DrawerClose";
+
+const DrawerOverlay = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Overlay>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Overlay>
+>(({ className, style, ...props }, ref) => (
+  <DrawerPrimitive.Overlay
+    ref={ref}
+    data-slot="drawer-overlay"
+    {...props}
+    className={cn(
+      "data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 fixed inset-0 z-[9998] bg-black/50",
+      className,
+    )}
+    style={style}
+  />
+));
+DrawerOverlay.displayName = "DrawerOverlay";
+
+const DrawerContent = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Content>
+>(({ className, children, style, ...props }, ref) => (
+  <DrawerPortal data-slot="drawer-portal">
+    <DrawerOverlay />
+    <DrawerPrimitive.Content
+      ref={ref}
+      data-slot="drawer-content"
+      {...props}
+      className={cn(
+        "group/drawer-content bg-background fixed z-[9999] flex h-auto flex-col outline-none",
+        "data-[vaul-drawer-direction=top]:inset-x-0 data-[vaul-drawer-direction=top]:top-0 data-[vaul-drawer-direction=top]:mb-24 data-[vaul-drawer-direction=top]:max-h-[80vh] data-[vaul-drawer-direction=top]:rounded-b-lg data-[vaul-drawer-direction=top]:border-b",
+        "data-[vaul-drawer-direction=bottom]:inset-x-0 data-[vaul-drawer-direction=bottom]:bottom-0 data-[vaul-drawer-direction=bottom]:mt-24 data-[vaul-drawer-direction=bottom]:max-h-[80vh] data-[vaul-drawer-direction=bottom]:rounded-t-lg data-[vaul-drawer-direction=bottom]:border-t",
+        "data-[vaul-drawer-direction=right]:inset-y-0 data-[vaul-drawer-direction=right]:right-0 data-[vaul-drawer-direction=right]:w-3/4 data-[vaul-drawer-direction=right]:border-l data-[vaul-drawer-direction=right]:sm:max-w-sm",
+        "data-[vaul-drawer-direction=left]:inset-y-0 data-[vaul-drawer-direction=left]:left-0 data-[vaul-drawer-direction=left]:w-3/4 data-[vaul-drawer-direction=left]:border-r data-[vaul-drawer-direction=left]:sm:max-w-sm",
+        className,
+      )}
+      style={{ touchAction: "manipulation", ...style }}
+    >
+      <div className="bg-muted mx-auto mt-4 hidden h-2 w-[100px] shrink-0 rounded-full group-data-[vaul-drawer-direction=bottom]/drawer-content:block" />
+      {children}
+    </DrawerPrimitive.Content>
+  </DrawerPortal>
+));
+DrawerContent.displayName = "DrawerContent";
+
+const DrawerHeader = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="drawer-header"
+      className={cn("flex flex-col gap-1.5 p-4", className)}
+      {...props}
+    />
+  ),
+);
+DrawerHeader.displayName = "DrawerHeader";
+
+const DrawerFooter = React.forwardRef<HTMLDivElement, React.ComponentPropsWithoutRef<"div">>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="drawer-footer"
+      className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+      {...props}
+    />
+  ),
+);
+DrawerFooter.displayName = "DrawerFooter";
+
+const DrawerTitle = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Title>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Title>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Title
+    ref={ref}
+    data-slot="drawer-title"
+    className={cn("text-foreground font-semibold", className)}
+    {...props}
+  />
+));
+DrawerTitle.displayName = "DrawerTitle";
+
+const DrawerDescription = React.forwardRef<
+  React.ElementRef<typeof DrawerPrimitive.Description>,
+  React.ComponentPropsWithoutRef<typeof DrawerPrimitive.Description>
+>(({ className, ...props }, ref) => (
+  <DrawerPrimitive.Description
+    ref={ref}
+    data-slot="drawer-description"
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+DrawerDescription.displayName = "DrawerDescription";
+
+export type BottomSheetProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  children: React.ReactNode;
+  className?: string;
+};
+
+/**
+ * Glass bottom sheet (Vaul) — mobile filters, overflow menus, sheet panels.
+ * Customize surface via className; defaults match app chrome glass-panel look.
+ */
+export function BottomSheet({ open, onOpenChange, children, className }: BottomSheetProps) {
+  return (
+    <Drawer open={open} onOpenChange={onOpenChange}>
+      <DrawerContent
+        data-slot="bottom-sheet"
+        className={cn(
+          "glass-panel border-border/60 bg-background/90 backdrop-blur-xl",
+          className,
+        )}
+      >
+        {children}
+      </DrawerContent>
+    </Drawer>
+  );
+}
+
+export {
+  Drawer,
+  DrawerTrigger,
+  DrawerClose,
+  DrawerPortal,
+  DrawerOverlay,
+  DrawerContent,
+  DrawerHeader,
+  DrawerFooter,
+  DrawerTitle,
+  DrawerDescription,
+};

package/src/composites/Breadcrumb.tsx

@@ -0,0 +1,42 @@
+import type { ReactNode } from "react";
+import { ChevronRight } from "lucide-react";
+import { cn } from "../lib/cn";
+
+export type BreadcrumbItem = {
+  label: string;
+  href?: string;
+  onClick?: () => void;
+};
+
+export function Breadcrumb({
+  items,
+  className,
+}: {
+  items: BreadcrumbItem[];
+  className?: string;
+}) {
+  return (
+    <nav data-slot="breadcrumb" aria-label="Breadcrumb" className={cn("flex flex-wrap items-center gap-1 text-sm", className)}>
+      {items.map((item, index) => {
+        const last = index === items.length - 1;
+        const content = last ? (
+          <span className="font-bold text-foreground">{item.label}</span>
+        ) : item.onClick ? (
+          <button type="button" className="font-medium text-muted-foreground hover:text-primary" onClick={item.onClick}>
+            {item.label}
+          </button>
+        ) : (
+          <a href={item.href} className="font-medium text-muted-foreground hover:text-primary">
+            {item.label}
+          </a>
+        );
+        return (
+          <span key={`${item.label}-${index}`} className="inline-flex items-center gap-1">
+            {index > 0 ? <ChevronRight className="size-3.5 text-muted-foreground/50" /> : null}
+            {content}
+          </span>
+        );
+      })}
+    </nav>
+  );
+}

package/src/composites/Callout.tsx

@@ -0,0 +1,22 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+import { Alert, AlertDescription, AlertTitle } from "../primitives/Alert";
+
+export function Callout({
+  title,
+  children,
+  variant = "info",
+  className,
+}: {
+  title?: string;
+  children: ReactNode;
+  variant?: "default" | "info" | "warm" | "highlight" | "danger";
+  className?: string;
+}) {
+  return (
+    <Alert data-slot="callout" variant={variant} className={className}>
+      {title ? <AlertTitle>{title}</AlertTitle> : null}
+      <AlertDescription>{children}</AlertDescription>
+    </Alert>
+  );
+}