@spatika/react 1.0.0

package/src/primitives/AlertDialog.tsx

@@ -0,0 +1,270 @@
+import * as React from "react";
+
+import { composeRefs } from "../lib/compose-refs";
+import { Portal } from "../lib/portal";
+import { Slot } from "../lib/slot";
+import { useControllableState } from "../lib/use-controllable-state";
+import { useFocusTrap } from "../lib/use-focus-trap";
+import { cn } from "../lib/cn";
+import { OVERLAY_Z_INDEX, fixedLayerStyle } from "../lib/overlay-stack";
+import { buttonVariants } from "./Button";
+
+type AlertDialogContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+};
+
+const AlertDialogContext =
+  React.createContext<AlertDialogContextValue | null>(null);
+
+function useAlertDialogContext(component: string) {
+  const ctx = React.useContext(AlertDialogContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <AlertDialog>`);
+  }
+  return ctx;
+}
+
+type AlertDialogProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+};
+
+function AlertDialog({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: AlertDialogProps) {
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen ?? false,
+    onChange: onOpenChange,
+  });
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+
+  // Provider-only root — no DOM wrapper (matches Radix Root / Dialog / Select).
+  // A wrapper div becomes an extra CSS grid/flex item when AlertDialog is a Fragment sibling.
+  return (
+    <AlertDialogContext.Provider
+      value={{ open, setOpen: (next) => setOpen(next), contentRef }}
+    >
+      {children}
+    </AlertDialogContext.Provider>
+  );
+}
+
+const AlertDialogTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean }
+>(({ asChild = false, onClick, ...props }, ref) => {
+  const { setOpen } = useAlertDialogContext("AlertDialogTrigger");
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      type={asChild ? undefined : "button"}
+      data-slot="alert-dialog-trigger"
+      {...props}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(true);
+      }}
+    />
+  );
+});
+AlertDialogTrigger.displayName = "AlertDialogTrigger";
+
+function AlertDialogPortal({ children }: { children?: React.ReactNode }) {
+  return <Portal>{children}</Portal>;
+}
+
+const AlertDialogOverlay = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, style, ...props }, ref) => {
+  const { open } = useAlertDialogContext("AlertDialogOverlay");
+  if (!open) return null;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="alert-dialog-overlay"
+      data-state="open"
+      className={cn(
+        "fixed inset-0 z-[11000] bg-[var(--modal-overlay-bg)] backdrop-blur-[var(--modal-overlay-blur)] data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+        className,
+      )}
+      {...props}
+      style={fixedLayerStyle(OVERLAY_Z_INDEX.modal, style)}
+    />
+  );
+});
+AlertDialogOverlay.displayName = "AlertDialogOverlay";
+
+const AlertDialogContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    /** Extra classes for the dimmer (z-index, backdrop tweaks, etc.). */
+    overlayClassName?: string;
+  }
+>(({ className, overlayClassName, style, ...props }, ref) => {
+  const { open, setOpen, contentRef } = useAlertDialogContext("AlertDialogContent");
+  useFocusTrap(contentRef, open);
+
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") {
+        event.stopPropagation();
+        setOpen(false);
+      }
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, setOpen]);
+
+  if (!open) return null;
+
+  return (
+    <AlertDialogPortal>
+      <AlertDialogOverlay className={overlayClassName} />
+      <div
+        ref={composeRefs(ref, contentRef)}
+        role="alertdialog"
+        aria-modal="true"
+        data-slot="alert-dialog-content"
+        data-state="open"
+        tabIndex={-1}
+        className={cn(
+          "glass data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 fixed top-[50%] left-[50%] z-[11000] grid w-full max-w-[calc(100%-2rem)] translate-x-[-50%] translate-y-[-50%] gap-4 rounded-2xl p-6 shadow-2xl duration-200 sm:max-w-lg overflow-hidden",
+          className,
+        )}
+        {...props}
+        style={fixedLayerStyle(OVERLAY_Z_INDEX.modal, style)}
+      />
+    </AlertDialogPortal>
+  );
+});
+AlertDialogContent.displayName = "AlertDialogContent";
+
+const AlertDialogHeader = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-slot="alert-dialog-header"
+    className={cn("flex flex-col gap-2 text-center", className)}
+    {...props}
+  />
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+
+const AlertDialogFooter = ({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) => (
+  <div
+    data-slot="alert-dialog-footer"
+    className={cn(
+      "flex flex-col-reverse gap-2 sm:flex-row sm:justify-between border-t border-border/50 pt-4",
+      className,
+    )}
+    {...props}
+  />
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+
+const AlertDialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<"h2">
+>(({ className, ...props }, ref) => (
+  <h2
+    ref={ref}
+    data-slot="alert-dialog-title"
+    className={cn(
+      "text-xl font-bold leading-tight tracking-tight text-center",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogTitle.displayName = "AlertDialogTitle";
+
+const AlertDialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentPropsWithoutRef<"p">
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="alert-dialog-description"
+    className={cn(
+      "text-sm leading-relaxed text-foreground/70 text-center",
+      className,
+    )}
+    {...props}
+  />
+));
+AlertDialogDescription.displayName = "AlertDialogDescription";
+
+const AlertDialogAction = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button">
+>(({ className, onClick, ...props }, ref) => {
+  const { setOpen } = useAlertDialogContext("AlertDialogAction");
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(buttonVariants({ size: "lg" }), "px-8", className)}
+      {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(false);
+      }}
+    />
+  );
+});
+AlertDialogAction.displayName = "AlertDialogAction";
+
+const AlertDialogCancel = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button">
+>(({ className, onClick, ...props }, ref) => {
+  const { setOpen } = useAlertDialogContext("AlertDialogCancel");
+  return (
+    <button
+      ref={ref}
+      type="button"
+      className={cn(
+        buttonVariants({ variant: "outline", size: "lg" }),
+        "px-8 border-2",
+        className,
+      )}
+      {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(false);
+      }}
+    />
+  );
+});
+AlertDialogCancel.displayName = "AlertDialogCancel";
+
+export {
+  AlertDialog,
+  AlertDialogPortal,
+  AlertDialogOverlay,
+  AlertDialogTrigger,
+  AlertDialogContent,
+  AlertDialogHeader,
+  AlertDialogFooter,
+  AlertDialogTitle,
+  AlertDialogDescription,
+  AlertDialogAction,
+  AlertDialogCancel,
+};

package/src/primitives/Avatar.tsx

@@ -0,0 +1,140 @@
+
+import * as React from "react";
+
+import { getAvatarColor, getInitials } from "../lib/avatar-utils";
+import { cn } from "../lib/cn";
+
+type ImageStatus = "idle" | "loading" | "loaded" | "error";
+
+type AvatarContextValue = {
+  imageStatus: ImageStatus;
+  setImageStatus: (status: ImageStatus) => void;
+};
+
+const AvatarContext = React.createContext<AvatarContextValue | null>(null);
+
+const Avatar = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, children, ...props }, ref) => {
+  const [imageStatus, setImageStatus] = React.useState<ImageStatus>("idle");
+
+  const hasImage = React.Children.toArray(children).some(
+    (child) =>
+      React.isValidElement(child) &&
+      (child.type as { displayName?: string })?.displayName === "AvatarImage" &&
+      !!(child.props as { src?: string }).src,
+  );
+
+  return (
+    <AvatarContext.Provider value={{ imageStatus, setImageStatus }}>
+      <span
+        key={hasImage ? "has-image" : "no-image"}
+        ref={ref}
+        data-slot="avatar"
+        className={cn(
+          "relative flex size-10 shrink-0 overflow-hidden rounded-full",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </span>
+    </AvatarContext.Provider>
+  );
+});
+Avatar.displayName = "Avatar";
+
+const AvatarImage = React.forwardRef<
+  HTMLImageElement,
+  React.ComponentPropsWithoutRef<"img">
+>(({ src, className, onLoad, onError, ...props }, ref) => {
+  const ctx = React.useContext(AvatarContext);
+  const setImageStatus = ctx?.setImageStatus;
+
+  React.useEffect(() => {
+    if (!src) {
+      setImageStatus?.("error");
+      return;
+    }
+    setImageStatus?.("loading");
+  }, [src, setImageStatus]);
+
+  if (!src) return null;
+
+  return (
+    <img
+      ref={ref}
+      data-slot="avatar-image"
+      className={cn(
+        "aspect-square size-full",
+        ctx?.imageStatus !== "loaded" && "hidden",
+        className,
+      )}
+      src={src}
+      onLoad={(event) => {
+        setImageStatus?.("loaded");
+        onLoad?.(event);
+      }}
+      onError={(event) => {
+        setImageStatus?.("error");
+        onError?.(event);
+      }}
+      {...props}
+    />
+  );
+});
+AvatarImage.displayName = "AvatarImage";
+
+const AvatarFallback = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => {
+  const ctx = React.useContext(AvatarContext);
+  const show = !ctx || ctx.imageStatus !== "loaded";
+
+  if (!show) return null;
+
+  return (
+    <span
+      ref={ref}
+      data-slot="avatar-fallback"
+      className={cn(
+        "bg-muted flex size-full items-center justify-center rounded-full",
+        className,
+      )}
+      {...props}
+    />
+  );
+});
+AvatarFallback.displayName = "AvatarFallback";
+
+/**
+ * Plain initials circle — use when {@link AvatarFallback} would stay hidden
+ * without an image load cycle (e.g. no {@link AvatarImage} child).
+ */
+function InitialsAvatar({
+  name,
+  className,
+  textClassName,
+}: {
+  name?: string | null;
+  className?: string;
+  textClassName?: string;
+}) {
+  const n = name?.trim() || "User";
+  const initials = getInitials(n) || "?";
+  return (
+    <div
+      className={cn(
+        "relative flex shrink-0 select-none items-center justify-center overflow-hidden rounded-full text-white",
+        getAvatarColor(n),
+        className,
+      )}
+    >
+      <span className={cn("leading-none", textClassName)}>{initials}</span>
+    </div>
+  );
+}
+
+export { Avatar, AvatarImage, AvatarFallback, InitialsAvatar };

package/src/primitives/Badge.test.tsx

@@ -0,0 +1,15 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, it } from "vitest";
+import { Badge } from "./Badge";
+
+describe("Badge", () => {
+  it("renders text content", () => {
+    render(<Badge>New</Badge>);
+    expect(screen.getByText("New")).toBeInTheDocument();
+  });
+
+  it("supports semantic variants", () => {
+    render(<Badge variant="info">Info</Badge>);
+    expect(screen.getByText("Info").className).toContain("accent-info");
+  });
+});

package/src/primitives/Badge.tsx

@@ -0,0 +1,43 @@
+import * as React from "react";
+import { Slot } from "../lib/slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const badgeVariants = cva(
+  "inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] transition-[color,box-shadow] overflow-hidden",
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-transparent bg-secondary text-secondary-foreground",
+        destructive: "border-transparent bg-destructive text-white",
+        outline: "text-foreground",
+        info: "border-transparent bg-[var(--accent-info-bg)] text-[var(--accent-info)]",
+        warm: "border-transparent bg-[var(--accent-warm-bg)] text-[var(--accent-warm)]",
+        highlight: "border-transparent bg-[var(--accent-highlight-bg)] text-[var(--accent-highlight)]",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+const Badge = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentProps<"span"> &
+    VariantProps<typeof badgeVariants> & { asChild?: boolean }
+>(({ className, variant, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "span";
+  return (
+    <Comp
+      ref={ref}
+      data-slot="badge"
+      className={cn(badgeVariants({ variant }), className)}
+      {...props}
+    />
+  );
+});
+Badge.displayName = "Badge";
+
+export { Badge, badgeVariants };

package/src/primitives/Button.test.tsx

@@ -0,0 +1,37 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+import { Button } from "./Button";
+
+describe("Button", () => {
+  it("renders children", () => {
+    render(<Button>Save</Button>);
+    expect(screen.getByRole("button", { name: "Save" })).toBeInTheDocument();
+  });
+
+  it("applies variant and size data via classes", () => {
+    render(
+      <Button variant="glass" size="touch">
+        Glass
+      </Button>,
+    );
+    const btn = screen.getByRole("button", { name: "Glass" });
+    expect(btn.className).toContain("glass");
+    expect(btn.className).toMatch(/min-h-11|h-11/);
+  });
+
+  it("forwards clicks and disabled state", async () => {
+    const user = userEvent.setup();
+    const onClick = vi.fn();
+    const { rerender } = render(<Button onClick={onClick}>Go</Button>);
+    await user.click(screen.getByRole("button", { name: "Go" }));
+    expect(onClick).toHaveBeenCalledTimes(1);
+
+    rerender(
+      <Button onClick={onClick} disabled>
+        Go
+      </Button>,
+    );
+    expect(screen.getByRole("button", { name: "Go" })).toBeDisabled();
+  });
+});

package/src/primitives/Button.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { Slot } from "../lib/slot";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/cn";
+
+const buttonVariants = cva(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,transform] duration-150 disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive active:scale-[0.98]",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground hover:bg-primary/90",
+        destructive:
+          "bg-destructive text-white hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60",
+        outline:
+          "border bg-background text-foreground hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+        secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
+        link: "text-primary underline-offset-4 hover:underline",
+        glass:
+          "glass border-border/50 text-foreground hover:border-primary/30 hover:text-primary",
+      },
+      size: {
+        default: "h-9 px-4 py-2 has-[>svg]:px-3",
+        sm: "h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5",
+        lg: "h-10 rounded-md px-6 has-[>svg]:px-4",
+        /** Mobile-first ≥44px touch target */
+        touch: "min-h-11 h-11 rounded-md px-5 has-[>svg]:px-4",
+        icon: "size-9 rounded-md",
+        "icon-touch": "size-11 rounded-md",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentProps<"button"> &
+    VariantProps<typeof buttonVariants> & {
+      asChild?: boolean;
+    }
+>(({ className, variant, size, asChild = false, ...props }, ref) => {
+  const Comp = asChild ? Slot : "button";
+  return (
+    <Comp
+      ref={ref}
+      data-slot="button"
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+});
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

package/src/primitives/Checkbox.tsx

@@ -0,0 +1,75 @@
+import * as React from "react";
+import { CheckIcon } from "lucide-react";
+import { useControllableState } from "../lib/use-controllable-state";
+import { cn } from "../lib/cn";
+
+type CheckedState = boolean | "indeterminate";
+
+type CheckboxProps = Omit<
+  React.ComponentPropsWithoutRef<"button">,
+  "onChange" | "value"
+> & {
+  checked?: CheckedState;
+  defaultChecked?: CheckedState;
+  onCheckedChange?: (checked: CheckedState) => void;
+};
+
+const Checkbox = React.forwardRef<HTMLButtonElement, CheckboxProps>(
+  (
+    {
+      className,
+      checked: checkedProp,
+      defaultChecked,
+      onCheckedChange,
+      disabled,
+      onClick,
+      ...props
+    },
+    ref,
+  ) => {
+    const [checked, setChecked] = useControllableState<CheckedState>({
+      prop: checkedProp,
+      defaultProp: defaultChecked ?? false,
+      onChange: onCheckedChange,
+    });
+
+    const isChecked = checked === true;
+    const isIndeterminate = checked === "indeterminate";
+
+    return (
+      <button
+        type="button"
+        role="checkbox"
+        aria-checked={isIndeterminate ? "mixed" : isChecked}
+        data-state={
+          isChecked ? "checked" : isIndeterminate ? "indeterminate" : "unchecked"
+        }
+        data-slot="checkbox"
+        disabled={disabled}
+        ref={ref}
+        className={cn(
+          "peer border bg-input-background dark:bg-input/30 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground dark:data-[state=checked]:bg-primary data-[state=checked]:border-primary focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive size-4 shrink-0 rounded-[4px] border shadow-xs transition-shadow outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+        onClick={(event) => {
+          onClick?.(event);
+          if (event.defaultPrevented || disabled) return;
+          setChecked(isChecked || isIndeterminate ? false : true);
+        }}
+      >
+        {(isChecked || isIndeterminate) && (
+          <span
+            data-slot="checkbox-indicator"
+            className="flex items-center justify-center text-current"
+          >
+            <CheckIcon className="size-3.5" />
+          </span>
+        )}
+      </button>
+    );
+  },
+);
+Checkbox.displayName = "Checkbox";
+
+export { Checkbox };