@spatika/react 1.0.0

package/src/composites/Card.tsx

@@ -0,0 +1,119 @@
+import type { ReactNode } from "react";
+import { cn } from "../lib/cn";
+
+export type CardProps = {
+  children: ReactNode;
+  className?: string;
+  /** Glass elevation level */
+  variant?: "default" | "panel" | "subtle" | "elevated";
+  padding?: "none" | "sm" | "md" | "lg";
+};
+
+const variantClass = {
+  default: "glass",
+  panel: "glass-panel",
+  subtle: "glass-subtle",
+  elevated: "app-card-elevated",
+} as const;
+
+const paddingClass = {
+  none: "p-0",
+  sm: "p-3",
+  md: "p-4 sm:p-5",
+  lg: "p-5 sm:p-6",
+} as const;
+
+/** Structured content card with optional header/footer slots via subcomponents. */
+export function Card({
+  children,
+  className,
+  variant = "panel",
+  padding = "md",
+}: CardProps) {
+  return (
+    <div
+      data-slot="card"
+      className={cn(
+        "relative overflow-hidden rounded-[var(--radius-card)]",
+        variantClass[variant],
+        paddingClass[padding],
+        className,
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function CardHeader({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div data-slot="card-header" className={cn("mb-3 flex items-start justify-between gap-3", className)}>
+      {children}
+    </div>
+  );
+}
+
+export function CardTitle({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <h3 data-slot="card-title" className={cn("text-base font-black tracking-tight", className)}>
+      {children}
+    </h3>
+  );
+}
+
+export function CardDescription({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <p data-slot="card-description" className={cn("mt-0.5 text-sm text-muted-foreground", className)}>
+      {children}
+    </p>
+  );
+}
+
+export function CardContent({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div data-slot="card-content" className={cn(className)}>
+      {children}
+    </div>
+  );
+}
+
+export function CardFooter({
+  className,
+  children,
+}: {
+  className?: string;
+  children: ReactNode;
+}) {
+  return (
+    <div
+      data-slot="card-footer"
+      className={cn("mt-4 flex flex-wrap items-center justify-end gap-2 border-t border-border/40 pt-3", className)}
+    >
+      {children}
+    </div>
+  );
+}

package/src/composites/Chip.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const chipVariants = cva(
+  "inline-flex items-center justify-center gap-1.5 touch-manipulation select-none outline-none focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+  {
+    variants: {
+      variant: {
+        filter:
+          "min-h-7 max-w-full rounded-full border px-2 py-0.5 text-left text-[10px] font-bold leading-snug shadow-sm transition-colors active:scale-[0.98] sm:min-h-8 sm:px-2.5 sm:py-1 sm:text-xs",
+        preference:
+          "rounded-xl border px-3 py-2 text-[10px] font-black uppercase tracking-widest shadow-sm transition-[color,background-color,border-color,box-shadow,transform] duration-150 active:scale-95",
+        layout:
+          "min-h-11 rounded-xl border px-3 text-sm font-bold shadow-sm transition-colors active:scale-[0.98]",
+      },
+      active: {
+        true: "",
+        false: "",
+      },
+    },
+    compoundVariants: [
+      {
+        variant: "filter",
+        active: true,
+        className: "border-primary/50 bg-primary/15 text-primary",
+      },
+      {
+        variant: "filter",
+        active: false,
+        className:
+          "border-border/60 bg-background/80 text-foreground hover:bg-muted/40",
+      },
+      {
+        variant: "preference",
+        active: true,
+        className:
+          "scale-[1.02] border-primary bg-primary text-primary-foreground shadow-primary/20",
+      },
+      {
+        variant: "preference",
+        active: false,
+        className:
+          "border-border/50 bg-background/40 text-muted-foreground hover:border-primary/30 hover:text-primary",
+      },
+      {
+        variant: "layout",
+        active: true,
+        className: "border-primary/50 bg-primary/15 text-primary",
+      },
+      {
+        variant: "layout",
+        active: false,
+        className:
+          "border-border/60 bg-background/80 text-foreground hover:bg-muted/40",
+      },
+    ],
+    defaultVariants: {
+      variant: "filter",
+      active: false,
+    },
+  },
+);
+
+export type ChipProps = React.ComponentProps<"button"> &
+  VariantProps<typeof chipVariants>;
+
+/**
+ * Unified chip control for filters, preferences, and layout toggles.
+ */
+const Chip = React.forwardRef<HTMLButtonElement, ChipProps>(
+  ({ className, variant, active, type = "button", ...props }, ref) => (
+    <button
+      ref={ref}
+      type={type}
+      data-slot="chip"
+      data-variant={variant ?? "filter"}
+      data-active={active ? "true" : "false"}
+      aria-pressed={Boolean(active)}
+      className={cn(chipVariants({ variant, active }), className)}
+      {...props}
+    />
+  ),
+);
+Chip.displayName = "Chip";
+
+export { Chip, chipVariants };

package/src/composites/ChipGroup.component.test.tsx

@@ -0,0 +1,31 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { ChipGroup } from "./ChipGroup";
+
+describe("ChipGroup", () => {
+  it("renders options and reports toggles", async () => {
+    const user = userEvent.setup();
+    const onToggle = vi.fn();
+    render(
+      <ChipGroup
+        title="Size"
+        options={[
+          { value: "S", label: "Small" },
+          { value: "L", label: "Large" },
+        ]}
+        selected={["S"]}
+        onToggle={onToggle}
+      />,
+    );
+
+    expect(screen.getByText("Size")).toBeInTheDocument();
+    expect(screen.getByRole("button", { name: "Small" })).toHaveAttribute(
+      "aria-pressed",
+      "true",
+    );
+
+    await user.click(screen.getByRole("button", { name: "Large" }));
+    expect(onToggle).toHaveBeenCalledWith("L");
+  });
+});

package/src/composites/ChipGroup.test.ts

@@ -0,0 +1,16 @@
+import { describe, expect, it } from "vitest";
+import { isOptionSelected, toggleOptionValue } from "./ChipGroup";
+
+describe("ChipGroup helpers", () => {
+  it("detects selection case-insensitively", () => {
+    expect(isOptionSelected(["small"], "SMALL")).toBe(true);
+    expect(isOptionSelected(["small"], "large")).toBe(false);
+    expect(isOptionSelected(undefined, "x")).toBe(false);
+  });
+
+  it("toggles values in a list", () => {
+    expect(toggleOptionValue(["a"], "b")).toEqual(["a", "b"]);
+    expect(toggleOptionValue(["a", "b"], "A")).toEqual(["b"]);
+    expect(toggleOptionValue(undefined, "x")).toEqual(["x"]);
+  });
+});

package/src/composites/ChipGroup.tsx

@@ -0,0 +1,86 @@
+import { cn } from "../lib/cn";
+import { typographyEyebrow } from "../lib/typography";
+import { Chip } from "./Chip";
+
+export type ChipOption = {
+  value: string;
+  label: string;
+};
+
+export type ChipGroupProps = {
+  title?: string;
+  options: ChipOption[];
+  selected: string[] | undefined;
+  onToggle: (value: string) => void;
+  /** filter = soft pills, preference = uppercase admin chips */
+  variant?: "filter" | "preference";
+  className?: string;
+  showCount?: boolean;
+};
+
+/** Case-insensitive membership check. */
+export function isOptionSelected(list: string[] | undefined, value: string): boolean {
+  return (list || []).some(
+    (entry) => String(entry).toUpperCase() === String(value).toUpperCase(),
+  );
+}
+
+/** Toggle a value in a list (case-insensitive). */
+export function toggleOptionValue<T extends string>(list: T[] | undefined, value: T): T[] {
+  const current = list || [];
+  const index = current.findIndex(
+    (entry) => String(entry).toUpperCase() === String(value).toUpperCase(),
+  );
+  if (index >= 0) {
+    return current.filter((_, i) => i !== index);
+  }
+  return [...current, value];
+}
+
+/**
+ * Titled multi-select chip row used in admin preferences and filter panels.
+ */
+export function ChipGroup({
+  title,
+  options,
+  selected,
+  onToggle,
+  variant = "preference",
+  className,
+  showCount = true,
+}: ChipGroupProps) {
+  const selectedCount = options.filter((opt) => isOptionSelected(selected, opt.value)).length;
+
+  return (
+    <div data-slot="chip-group" className={cn("space-y-3", className)}>
+      {title ? (
+        <div className="flex items-center justify-between gap-2 px-0.5">
+          <div className="flex items-center gap-2">
+            <div className="h-1.5 w-1.5 shrink-0 rounded-full bg-primary/70" />
+            <p className={typographyEyebrow}>{title}</p>
+          </div>
+          {showCount && selectedCount > 0 ? (
+            <span className="rounded-md border border-primary/20 bg-primary/10 px-1.5 py-0.5 text-[9px] font-black uppercase tracking-wider text-primary">
+              {selectedCount}
+            </span>
+          ) : null}
+        </div>
+      ) : null}
+      <div className="flex flex-wrap gap-2">
+        {options.map((opt) => {
+          const active = isOptionSelected(selected, opt.value);
+          return (
+            <Chip
+              key={opt.value}
+              variant={variant}
+              active={active}
+              onClick={() => onToggle(opt.value)}
+            >
+              {opt.label}
+            </Chip>
+          );
+        })}
+      </div>
+    </div>
+  );
+}

package/src/composites/CommandSearchField.tsx

@@ -0,0 +1,124 @@
+import type { ReactNode } from "react";
+import { Search, X } from "lucide-react";
+import { cn } from "../lib/cn";
+
+export type CommandSearchResult = {
+  id: string;
+  title: string;
+  subtitle?: string;
+  icon?: ReactNode;
+  typeLabel?: string;
+  onSelect?: () => void;
+};
+
+export type CommandSearchFieldProps = {
+  value: string;
+  onChange: (value: string) => void;
+  onSubmit?: () => void;
+  placeholder?: string;
+  shortcutHint?: string;
+  results?: CommandSearchResult[];
+  recent?: CommandSearchResult[];
+  loading?: boolean;
+  className?: string;
+  /** Called when clear is pressed */
+  onClear?: () => void;
+};
+
+/**
+ * Frosted command / global search field with optional result dropdown.
+ */
+export function CommandSearchField({
+  value,
+  onChange,
+  onSubmit,
+  placeholder = "Search…",
+  shortcutHint = "⌘K",
+  results,
+  recent,
+  loading,
+  className,
+  onClear,
+}: CommandSearchFieldProps) {
+  const focusedList = (results && results.length > 0 ? results : recent) ?? [];
+  const showDropdown = value.length > 0 ? Boolean(results) : Boolean(recent?.length);
+
+  return (
+    <div data-slot="command-search-field" className={cn("relative w-full", className)}>
+      <div
+        className={cn(
+          "group relative flex items-center rounded-2xl border border-border/20 bg-muted/10 backdrop-blur-xl transition-all",
+          "focus-within:border-primary/30 focus-within:bg-white/10 focus-within:shadow-[0_12px_40px_-12px_rgba(99,102,241,0.3)] focus-within:ring-4 focus-within:ring-primary/5",
+        )}
+      >
+        <span className="pointer-events-none absolute inset-y-0 left-3 z-10 flex items-center text-muted-foreground transition-colors group-focus-within:rounded-lg group-focus-within:bg-primary group-focus-within:p-1.5 group-focus-within:text-primary-foreground">
+          <Search className="h-4 w-4 shrink-0" aria-hidden />
+        </span>
+        <input
+          value={value}
+          onChange={(e) => onChange(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === "Enter") onSubmit?.();
+          }}
+          placeholder={placeholder}
+          className="w-full bg-transparent py-3 pl-12 pr-12 text-sm font-black outline-none placeholder:font-medium placeholder:text-muted-foreground/30"
+        />
+        {value ? (
+          <button
+            type="button"
+            aria-label="Clear"
+            className="absolute right-3 text-muted-foreground hover:text-foreground"
+            onClick={() => {
+              onChange("");
+              onClear?.();
+            }}
+          >
+            <X className="size-4" />
+          </button>
+        ) : shortcutHint ? (
+          <kbd className="pointer-events-none absolute right-3 hidden rounded border border-border/50 bg-muted/50 px-1.5 py-0.5 font-mono text-[10px] text-muted-foreground sm:inline">
+            {shortcutHint}
+          </kbd>
+        ) : null}
+      </div>
+
+      {showDropdown ? (
+        <div className="absolute inset-x-0 top-full z-50 mt-2 overflow-hidden rounded-[2rem] border border-border/60 bg-background shadow-[0_28px_64px_-20px_rgba(15,23,42,0.45)] dark:border-white/10 dark:bg-card dark:shadow-[0_28px_64px_-20px_rgba(0,0,0,0.65)]">
+          <div className="max-h-72 overflow-y-auto p-2">
+            {loading ? (
+              <p className="px-3 py-6 text-center text-sm text-muted-foreground">Searching…</p>
+            ) : focusedList.length === 0 ? (
+              <p className="px-3 py-6 text-center text-sm text-muted-foreground">No results</p>
+            ) : (
+              focusedList.map((item) => (
+                <button
+                  key={item.id}
+                  type="button"
+                  className="flex w-full items-center gap-3 rounded-2xl border border-transparent px-4 py-3 text-left transition-colors hover:border-primary/40 hover:bg-muted/30"
+                  onClick={item.onSelect}
+                >
+                  <span className="flex h-9 w-9 shrink-0 items-center justify-center rounded-2xl bg-primary/10 text-primary">
+                    {item.icon ?? <Search className="size-4" />}
+                  </span>
+                  <span className="min-w-0 flex-1">
+                    <span className="block truncate text-sm font-bold">{item.title}</span>
+                    {item.subtitle ? (
+                      <span className="block truncate text-xs text-muted-foreground">
+                        {item.subtitle}
+                      </span>
+                    ) : null}
+                  </span>
+                  {item.typeLabel ? (
+                    <span className="text-[10px] font-black uppercase tracking-widest text-muted-foreground/70">
+                      {item.typeLabel}
+                    </span>
+                  ) : null}
+                </button>
+              ))
+            )}
+          </div>
+        </div>
+      ) : null}
+    </div>
+  );
+}