@spatika/react 1.1.0 → 1.3.0

package/src/primitives/InputAdornment.tsx

@@ -0,0 +1,86 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { Input } from "./Input";
+
+export type InputAdornmentProps = React.ComponentPropsWithoutRef<"span"> & {
+  position?: "start" | "end";
+};
+
+function InputAdornment({
+  position = "start",
+  className,
+  ...props
+}: InputAdornmentProps) {
+  return (
+    <span
+      data-slot="input-adornment"
+      data-position={position}
+      className={cn(
+        "inline-flex shrink-0 items-center text-sm font-medium text-muted-foreground",
+        position === "start" ? "pl-1 pr-1.5" : "pl-1.5 pr-1",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+InputAdornment.displayName = "InputAdornment";
+
+export type OutlinedInputProps = React.ComponentPropsWithoutRef<"input"> & {
+  startAdornment?: React.ReactNode;
+  endAdornment?: React.ReactNode;
+  error?: boolean;
+  fullWidth?: boolean;
+};
+
+const OutlinedInput = React.forwardRef<HTMLInputElement, OutlinedInputProps>(
+  ({ startAdornment, endAdornment, error, fullWidth, className, ...props }, ref) => (
+    <div
+      data-slot="outlined-input"
+      className={cn(
+        "flex h-9 items-center rounded-md border border-input bg-input-background px-2",
+        "focus-within:border-ring focus-within:ring-ring/50 focus-within:ring-[3px]",
+        error && "border-destructive",
+        fullWidth && "w-full",
+        className,
+      )}
+    >
+      {startAdornment}
+      <Input
+        ref={ref}
+        aria-invalid={error || undefined}
+        className="h-full flex-1 border-0 bg-transparent px-1 shadow-none focus-visible:ring-0"
+        {...props}
+      />
+      {endAdornment}
+    </div>
+  ),
+);
+OutlinedInput.displayName = "OutlinedInput";
+
+const FilledInput = React.forwardRef<HTMLInputElement, OutlinedInputProps>(
+  ({ startAdornment, endAdornment, error, fullWidth, className, ...props }, ref) => (
+    <div
+      data-slot="filled-input"
+      className={cn(
+        "flex h-9 items-center rounded-md border-b border-transparent bg-muted/50 px-2",
+        "focus-within:border-primary focus-within:bg-muted/70",
+        error && "border-destructive",
+        fullWidth && "w-full",
+        className,
+      )}
+    >
+      {startAdornment}
+      <Input
+        ref={ref}
+        aria-invalid={error || undefined}
+        className="h-full flex-1 border-0 bg-transparent px-1 shadow-none focus-visible:ring-0"
+        {...props}
+      />
+      {endAdornment}
+    </div>
+  ),
+);
+FilledInput.displayName = "FilledInput";
+
+export { InputAdornment, OutlinedInput, FilledInput };

package/src/primitives/Link.tsx

@@ -0,0 +1,48 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "../lib/slot";
+import { cn } from "../lib/cn";
+
+const linkVariants = cva(
+  "inline font-medium underline-offset-4 outline-none transition-colors focus-visible:ring-ring/50 focus-visible:ring-[3px] rounded-sm",
+  {
+    variants: {
+      color: {
+        primary: "text-primary hover:text-primary/80",
+        inherit: "text-inherit hover:text-primary",
+        muted: "text-muted-foreground hover:text-foreground",
+      },
+      underline: {
+        always: "underline",
+        hover: "hover:underline",
+        none: "no-underline",
+      },
+    },
+    defaultVariants: {
+      color: "primary",
+      underline: "hover",
+    },
+  },
+);
+
+export type LinkProps = Omit<React.ComponentPropsWithoutRef<"a">, "color"> &
+  VariantProps<typeof linkVariants> & {
+    asChild?: boolean;
+  };
+
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ className, color, underline, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : "a";
+    return (
+      <Comp
+        ref={ref}
+        data-slot="link"
+        className={cn(linkVariants({ color, underline }), className)}
+        {...props}
+      />
+    );
+  },
+);
+Link.displayName = "Link";
+
+export { Link, linkVariants };

package/src/primitives/List.tsx

@@ -0,0 +1,121 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+export type ListProps = React.ComponentPropsWithoutRef<"ul"> & {
+  dense?: boolean;
+  disablePadding?: boolean;
+};
+
+const List = React.forwardRef<HTMLUListElement, ListProps>(
+  ({ className, dense, disablePadding, ...props }, ref) => (
+    <ul
+      ref={ref}
+      data-slot="list"
+      data-dense={dense ? "" : undefined}
+      className={cn(
+        "m-0 list-none",
+        disablePadding ? "p-0" : dense ? "py-1" : "py-2",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+List.displayName = "List";
+
+export type ListItemProps = React.ComponentPropsWithoutRef<"li"> & {
+  disablePadding?: boolean;
+  disableGutters?: boolean;
+};
+
+const ListItem = React.forwardRef<HTMLLIElement, ListItemProps>(
+  ({ className, disablePadding, disableGutters, ...props }, ref) => (
+    <li
+      ref={ref}
+      data-slot="list-item"
+      className={cn(
+        "flex items-center gap-3",
+        disablePadding ? "p-0" : disableGutters ? "py-2" : "px-4 py-2.5",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+ListItem.displayName = "ListItem";
+
+export type ListItemButtonProps = React.ComponentPropsWithoutRef<"button"> & {
+  selected?: boolean;
+};
+
+const ListItemButton = React.forwardRef<HTMLButtonElement, ListItemButtonProps>(
+  ({ className, selected, ...props }, ref) => (
+    <button
+      ref={ref}
+      type="button"
+      data-slot="list-item-button"
+      data-selected={selected ? "" : undefined}
+      className={cn(
+        "flex w-full items-center gap-3 px-4 py-2.5 text-left text-sm font-medium outline-none transition-colors",
+        "hover:bg-muted/40 focus-visible:ring-ring/50 focus-visible:ring-[3px]",
+        selected && "bg-primary/10 text-primary",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+ListItemButton.displayName = "ListItemButton";
+
+function ListItemIcon({ className, ...props }: React.ComponentPropsWithoutRef<"span">) {
+  return (
+    <span
+      data-slot="list-item-icon"
+      className={cn(
+        "inline-flex size-8 shrink-0 items-center justify-center text-muted-foreground [&_svg]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+ListItemIcon.displayName = "ListItemIcon";
+
+export type ListItemTextProps = React.ComponentPropsWithoutRef<"div"> & {
+  primary?: React.ReactNode;
+  secondary?: React.ReactNode;
+};
+
+function ListItemText({
+  className,
+  primary,
+  secondary,
+  children,
+  ...props
+}: ListItemTextProps) {
+  return (
+    <div data-slot="list-item-text" className={cn("min-w-0 flex-1", className)} {...props}>
+      <div className="truncate text-sm font-semibold">{primary ?? children}</div>
+      {secondary ? (
+        <div className="truncate text-xs font-medium text-muted-foreground">{secondary}</div>
+      ) : null}
+    </div>
+  );
+}
+ListItemText.displayName = "ListItemText";
+
+function ListSubheader({ className, ...props }: React.ComponentPropsWithoutRef<"li">) {
+  return (
+    <li
+      data-slot="list-subheader"
+      className={cn(
+        "px-4 py-2 text-[10px] font-black uppercase tracking-widest text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+ListSubheader.displayName = "ListSubheader";
+
+export { List, ListItem, ListItemButton, ListItemIcon, ListItemText, ListSubheader };

package/src/primitives/Masonry.tsx

@@ -0,0 +1,32 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+export type MasonryProps = React.ComponentPropsWithoutRef<"div"> & {
+  columns?: number;
+  spacing?: number;
+};
+
+/**
+ * CSS multi-column masonry. Children should be block-level items.
+ */
+function Masonry({ columns = 3, spacing = 16, className, style, children, ...props }: MasonryProps) {
+  return (
+    <div
+      data-slot="masonry"
+      className={cn(className)}
+      style={{
+        columnCount: columns,
+        columnGap: spacing,
+        ...style,
+      }}
+      {...props}
+    >
+      {React.Children.map(children, (child) => (
+        <div className="mb-4 break-inside-avoid">{child}</div>
+      ))}
+    </div>
+  );
+}
+Masonry.displayName = "Masonry";
+
+export { Masonry };

package/src/primitives/Menu.tsx

@@ -0,0 +1,112 @@
+import * as React from "react";
+import { composeRefs } from "../lib/compose-refs";
+import { Portal } from "../lib/portal";
+import { useControllableState } from "../lib/use-controllable-state";
+import { useDismissable } from "../lib/use-dismissable";
+import { useFloatingPosition } from "../lib/use-floating-position";
+import { cn } from "../lib/cn";
+import { OVERLAY_Z_INDEX } from "../lib/overlay-stack";
+
+export type MenuProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  /** Anchor element — typically the button that opened the menu. */
+  anchorEl?: HTMLElement | null;
+  children?: React.ReactNode;
+};
+
+function Menu({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  anchorEl,
+  children,
+}: MenuProps) {
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen ?? false,
+    onChange: onOpenChange,
+  });
+  const triggerRef = React.useRef<HTMLElement | null>(null);
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+
+  React.useEffect(() => {
+    triggerRef.current = anchorEl ?? null;
+  }, [anchorEl]);
+
+  const position = useFloatingPosition({
+    open,
+    triggerRef,
+    contentRef,
+    side: "bottom",
+    align: "start",
+    sideOffset: 4,
+  });
+
+  useDismissable({
+    enabled: open,
+    onDismiss: () => setOpen(false),
+    refs: [triggerRef, contentRef],
+  });
+
+  if (!open) return null;
+
+  return (
+    <Portal>
+      <div
+        ref={contentRef}
+        role="menu"
+        data-slot="menu"
+        className="glass-menu z-[10000] min-w-40 overflow-hidden rounded-xl border border-border/50 p-1 shadow-xl outline-none"
+        style={{
+          position: "fixed",
+          top: position?.top ?? 0,
+          left: position?.left ?? 0,
+          zIndex: OVERLAY_Z_INDEX.menu,
+          opacity: position ? 1 : 0,
+        }}
+      >
+        {children}
+      </div>
+    </Portal>
+  );
+}
+Menu.displayName = "Menu";
+
+function MenuList({ className, ...props }: React.ComponentPropsWithoutRef<"div">) {
+  return <div role="menu" data-slot="menu-list" className={cn("flex flex-col p-1", className)} {...props} />;
+}
+MenuList.displayName = "MenuList";
+
+export type MenuItemProps = React.ComponentPropsWithoutRef<"button"> & {
+  selected?: boolean;
+  dense?: boolean;
+};
+
+function MenuItem({ className, selected, dense, ...props }: MenuItemProps) {
+  return (
+    <button
+      type="button"
+      role="menuitem"
+      data-slot="menu-item"
+      data-selected={selected ? "" : undefined}
+      className={cn(
+        "flex w-full items-center gap-2 rounded-lg px-3 text-left text-sm font-medium outline-none",
+        dense ? "py-1.5" : "py-2",
+        selected ? "bg-primary/10 text-primary" : "hover:bg-muted/50",
+        "disabled:pointer-events-none disabled:opacity-40",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+MenuItem.displayName = "MenuItem";
+
+const MenuAnchor = React.forwardRef<HTMLButtonElement, React.ComponentPropsWithoutRef<"button">>(
+  (props, ref) => <button ref={ref} type="button" data-slot="menu-anchor" {...props} />,
+);
+MenuAnchor.displayName = "MenuAnchor";
+
+export { Menu, MenuList, MenuItem, MenuAnchor };

package/src/primitives/MobileStepper.tsx

@@ -0,0 +1,64 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { LinearProgress } from "./Progress";
+
+export type MobileStepperProps = React.ComponentPropsWithoutRef<"div"> & {
+  steps: number;
+  activeStep?: number;
+  position?: "static" | "bottom" | "top";
+  variant?: "dots" | "text" | "progress";
+  nextButton?: React.ReactNode;
+  backButton?: React.ReactNode;
+};
+
+function MobileStepper({
+  steps,
+  activeStep = 0,
+  position = "static",
+  variant = "dots",
+  nextButton,
+  backButton,
+  className,
+  ...props
+}: MobileStepperProps) {
+  return (
+    <div
+      data-slot="mobile-stepper"
+      data-position={position}
+      className={cn(
+        "flex w-full items-center gap-3 rounded-xl border border-border/40 bg-card/40 px-3 py-2",
+        position === "bottom" && "sticky bottom-0",
+        position === "top" && "sticky top-0",
+        className,
+      )}
+      {...props}
+    >
+      {backButton}
+      <div className="min-w-0 flex-1">
+        {variant === "text" ? (
+          <p className="text-center text-xs font-bold text-muted-foreground">
+            {activeStep + 1} / {steps}
+          </p>
+        ) : variant === "progress" ? (
+          <LinearProgress value={((activeStep + 1) / steps) * 100} />
+        ) : (
+          <div className="flex items-center justify-center gap-1.5">
+            {Array.from({ length: steps }, (_, i) => (
+              <span
+                key={i}
+                className={cn(
+                  "size-1.5 rounded-full",
+                  i === activeStep ? "bg-primary" : "bg-border",
+                )}
+              />
+            ))}
+          </div>
+        )}
+      </div>
+      {nextButton}
+    </div>
+  );
+}
+MobileStepper.displayName = "MobileStepper";
+
+export { MobileStepper };

package/src/primitives/Modal.tsx

@@ -0,0 +1,70 @@
+import * as React from "react";
+import { Portal } from "../lib/portal";
+import { useFocusTrap } from "../lib/use-focus-trap";
+import { cn } from "../lib/cn";
+import { OVERLAY_Z_INDEX, fixedLayerStyle } from "../lib/overlay-stack";
+import { Backdrop } from "./Backdrop";
+
+export type ModalProps = Omit<React.ComponentPropsWithoutRef<"div">, "children"> & {
+  open?: boolean;
+  onClose?: () => void;
+  children?: React.ReactNode;
+  keepMounted?: boolean;
+  disableEscapeKeyDown?: boolean;
+  hideBackdrop?: boolean;
+};
+
+/**
+ * Low-level modal. Prefer Dialog for titled confirmations.
+ */
+function Modal({
+  open = false,
+  onClose,
+  children,
+  keepMounted,
+  disableEscapeKeyDown,
+  hideBackdrop,
+  className,
+  style,
+  ...props
+}: ModalProps) {
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+  useFocusTrap(contentRef, open);
+
+  React.useEffect(() => {
+    if (!open || disableEscapeKeyDown || !onClose) return;
+    const onKey = (event: KeyboardEvent) => {
+      if (event.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", onKey);
+    return () => document.removeEventListener("keydown", onKey);
+  }, [open, disableEscapeKeyDown, onClose]);
+
+  if (!open && !keepMounted) return null;
+
+  return (
+    <Portal>
+      <div
+        data-slot="modal"
+        hidden={!open}
+        className={cn("fixed inset-0 flex items-center justify-center p-4", className)}
+        style={fixedLayerStyle(OVERLAY_Z_INDEX.modal, style)}
+        {...props}
+      >
+        {hideBackdrop ? null : (
+          <Backdrop open={open} contained className="absolute inset-0" onClick={onClose} />
+        )}
+        <div
+          ref={contentRef}
+          role="presentation"
+          className="relative z-10 outline-none"
+        >
+          {children}
+        </div>
+      </div>
+    </Portal>
+  );
+}
+Modal.displayName = "Modal";
+
+export { Modal };

package/src/primitives/NoSsr.tsx

@@ -0,0 +1,28 @@
+import * as React from "react";
+
+export type NoSsrProps = {
+  children: React.ReactNode;
+  fallback?: React.ReactNode;
+  defer?: boolean;
+};
+
+/**
+ * Renders children only after mount — useful for browser-only APIs.
+ */
+function NoSsr({ children, fallback = null, defer = false }: NoSsrProps) {
+  const [mounted, setMounted] = React.useState(false);
+
+  React.useEffect(() => {
+    if (!defer) {
+      setMounted(true);
+      return;
+    }
+    const id = window.requestAnimationFrame(() => setMounted(true));
+    return () => window.cancelAnimationFrame(id);
+  }, [defer]);
+
+  return <>{mounted ? children : fallback}</>;
+}
+NoSsr.displayName = "NoSsr";
+
+export { NoSsr };

package/src/primitives/Paper.tsx

@@ -0,0 +1,55 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const paperVariants = cva("text-card-foreground", {
+  variants: {
+    variant: {
+      elevation: "bg-card/70 shadow-sm",
+      outlined: "border border-border/50 bg-card/40",
+      glass: "glass",
+    },
+    square: {
+      true: "rounded-none",
+      false: "rounded-[var(--radius-card)]",
+    },
+  },
+  defaultVariants: {
+    variant: "elevation",
+    square: false,
+  },
+});
+
+export type PaperProps = React.ComponentPropsWithoutRef<"div"> &
+  VariantProps<typeof paperVariants> & {
+    /** 0–3. Ignored when variant is outlined. */
+    elevation?: 0 | 1 | 2 | 3;
+  };
+
+const elevationClass: Record<NonNullable<PaperProps["elevation"]>, string> = {
+  0: "shadow-none",
+  1: "shadow-sm",
+  2: "shadow-md",
+  3: "shadow-lg",
+};
+
+/**
+ * Surface primitive. Prefer Card / GlassCard for structured content.
+ */
+const Paper = React.forwardRef<HTMLDivElement, PaperProps>(
+  ({ className, variant, square, elevation = 1, ...props }, ref) => (
+    <div
+      ref={ref}
+      data-slot="paper"
+      className={cn(
+        paperVariants({ variant, square }),
+        variant !== "outlined" && elevationClass[elevation],
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Paper.displayName = "Paper";
+
+export { Paper, paperVariants };

package/src/primitives/Progress.tsx

@@ -4,28 +4,46 @@ import { cn } from "../lib/cn";
 type ProgressProps = React.ComponentPropsWithoutRef<"div"> & {
   value?: number | null;
   max?: number;
+  variant?: "determinate" | "indeterminate";
 };
 
-function Progress({ className, value, max = 100, ...props }: ProgressProps) {
+function Progress({
+  className,
+  value,
+  max = 100,
+  variant = "determinate",
+  ...props
+}: ProgressProps) {
   const pct = Math.min(100, Math.max(0, ((value || 0) / max) * 100));
+  const indeterminate = variant === "indeterminate";
 
   return (
     <div
       data-slot="progress"
       role="progressbar"
-      aria-valuemin={0}
-      aria-valuemax={max}
-      aria-valuenow={value ?? undefined}
+      aria-valuemin={indeterminate ? undefined : 0}
+      aria-valuemax={indeterminate ? undefined : max}
+      aria-valuenow={indeterminate ? undefined : (value ?? undefined)}
+      aria-label={indeterminate ? "Loading" : undefined}
       className={cn("bg-primary/20 relative h-2 w-full overflow-hidden rounded-full", className)}
       {...props}
     >
       <div
         data-slot="progress-indicator"
-        className="bg-primary h-full w-full flex-1 transition-all"
-        style={{ transform: `translateX(-${100 - pct}%)` }}
+        className={cn(
+          "bg-primary h-full",
+          indeterminate
+            ? "absolute inset-y-0 left-0 w-1/3 animate-progress-indeterminate"
+            : "w-full flex-1 transition-transform duration-300",
+        )}
+        style={indeterminate ? undefined : { transform: `translateX(-${100 - pct}%)` }}
       />
     </div>
   );
 }
 
-export { Progress };
+/** MUI-compatible alias. */
+const LinearProgress = Progress;
+
+export { Progress, LinearProgress };
+export type { ProgressProps };