@spatika/react 1.0.0

package/src/primitives/Command.tsx

@@ -0,0 +1,175 @@
+import * as React from "react";
+import { Command as CommandPrimitive } from "cmdk";
+import { SearchIcon } from "lucide-react";
+
+import { cn } from "../lib/cn";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "./Dialog";
+
+function Command({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive>) {
+  return (
+    <CommandPrimitive
+      data-slot="command"
+      className={cn(
+        "bg-transparent text-popover-foreground flex h-full w-full flex-col overflow-hidden rounded-md",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandDialog({
+  title = "Command Palette",
+  description = "Search for a command to run...",
+  children,
+  ...props
+}: React.ComponentProps<typeof Dialog> & {
+  title?: string;
+  description?: string;
+}) {
+  return (
+    <Dialog {...props}>
+      <DialogHeader className="sr-only">
+        <DialogTitle>{title}</DialogTitle>
+        <DialogDescription>{description}</DialogDescription>
+      </DialogHeader>
+      <DialogContent className="overflow-hidden p-0">
+        <Command className="[&_[cmdk-group-heading]]:text-muted-foreground **:data-[slot=command-input-wrapper]:h-12 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group]]:px-2 [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+          {children}
+        </Command>
+      </DialogContent>
+    </Dialog>
+  );
+}
+
+function CommandInput({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Input>) {
+  return (
+    <div
+      data-slot="command-input-wrapper"
+      className="flex h-9 items-center gap-2 border-b px-3"
+    >
+      <SearchIcon className="size-4 shrink-0 opacity-50" />
+      <CommandPrimitive.Input
+        data-slot="command-input"
+        className={cn(
+          "placeholder:text-muted-foreground flex h-10 w-full rounded-md bg-transparent py-3 text-sm outline-hidden disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+      />
+    </div>
+  );
+}
+
+function CommandList({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.List>) {
+  return (
+    <CommandPrimitive.List
+      data-slot="command-list"
+      className={cn(
+        "max-h-[300px] scroll-py-1 overflow-x-hidden overflow-y-auto",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandEmpty({
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Empty>) {
+  return (
+    <CommandPrimitive.Empty
+      data-slot="command-empty"
+      className="py-6 text-center text-sm"
+      {...props}
+    />
+  );
+}
+
+function CommandGroup({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Group>) {
+  return (
+    <CommandPrimitive.Group
+      data-slot="command-group"
+      className={cn(
+        "text-foreground [&_[cmdk-group-heading]]:text-muted-foreground overflow-hidden p-1 [&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:py-1.5 [&_[cmdk-group-heading]]:text-xs [&_[cmdk-group-heading]]:font-medium",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandSeparator({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Separator>) {
+  return (
+    <CommandPrimitive.Separator
+      data-slot="command-separator"
+      className={cn("bg-border -mx-1 h-px", className)}
+      {...props}
+    />
+  );
+}
+
+function CommandItem({
+  className,
+  ...props
+}: React.ComponentProps<typeof CommandPrimitive.Item>) {
+  return (
+    <CommandPrimitive.Item
+      data-slot="command-item"
+      className={cn(
+        "data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function CommandShortcut({
+  className,
+  ...props
+}: React.ComponentProps<"span">) {
+  return (
+    <span
+      data-slot="command-shortcut"
+      className={cn(
+        "text-muted-foreground ml-auto text-xs tracking-widest",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Command,
+  CommandDialog,
+  CommandInput,
+  CommandList,
+  CommandEmpty,
+  CommandGroup,
+  CommandItem,
+  CommandShortcut,
+  CommandSeparator,
+};

package/src/primitives/Dialog.tsx

@@ -0,0 +1,241 @@
+import * as React from "react";
+import { XIcon } from "lucide-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";
+
+type DialogContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+};
+
+const DialogContext = React.createContext<DialogContextValue | null>(null);
+
+function useDialogContext(component: string) {
+  const ctx = React.useContext(DialogContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Dialog>`);
+  }
+  return ctx;
+}
+
+type DialogProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+};
+
+const Dialog = ({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: DialogProps) => {
+  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 / Select / DropdownMenu).
+  // A wrapper div becomes an extra CSS grid/flex item when Dialog is a Fragment sibling.
+  return (
+    <DialogContext.Provider
+      value={{ open, setOpen: (next) => setOpen(next), contentRef }}
+    >
+      {children}
+    </DialogContext.Provider>
+  );
+};
+Dialog.displayName = "Dialog";
+
+const DialogTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean }
+>(({ asChild = false, onClick, ...props }, ref) => {
+  const { setOpen } = useDialogContext("DialogTrigger");
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      type={asChild ? undefined : "button"}
+      data-slot="dialog-trigger"
+      {...props}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(true);
+      }}
+    />
+  );
+});
+DialogTrigger.displayName = "DialogTrigger";
+
+const DialogPortal = ({ children }: { children?: React.ReactNode }) => (
+  <Portal>{children}</Portal>
+);
+DialogPortal.displayName = "DialogPortal";
+
+const DialogClose = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean }
+>(({ asChild = false, onClick, ...props }, ref) => {
+  const { setOpen } = useDialogContext("DialogClose");
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      type={asChild ? undefined : "button"}
+      data-slot="dialog-close"
+      {...props}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(false);
+      }}
+    />
+  );
+});
+DialogClose.displayName = "DialogClose";
+
+const DialogOverlay = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, onClick, style, ...props }, ref) => {
+  const { open, setOpen } = useDialogContext("DialogOverlay");
+
+  if (!open) return null;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="dialog-overlay"
+      className={cn(
+        "fixed inset-0 z-[11000] bg-[var(--modal-overlay-bg)] backdrop-blur-[var(--modal-overlay-blur)]",
+        className,
+      )}
+      {...props}
+      style={fixedLayerStyle(OVERLAY_Z_INDEX.modal, style)}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(false);
+      }}
+    />
+  );
+});
+DialogOverlay.displayName = "DialogOverlay";
+
+const DialogContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    /** Extra classes for the dimmer (z-index, backdrop tweaks, etc.). */
+    overlayClassName?: string;
+  }
+>(({ className, children, onKeyDown, overlayClassName, style, ...props }, ref) => {
+  const { open, setOpen, contentRef } = useDialogContext("DialogContent");
+  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 (
+    <DialogPortal>
+      <DialogOverlay className={overlayClassName} />
+      <div
+        ref={composeRefs(ref, contentRef)}
+        role="dialog"
+        aria-modal="true"
+        data-slot="dialog-content"
+        tabIndex={-1}
+        className={cn(
+          "glass-panel fixed top-1/2 left-1/2 z-[11000] grid w-[calc(100%-2rem)] max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 rounded-2xl border border-border/50 p-6 shadow-lg",
+          className,
+        )}
+        {...props}
+        // Inline fixed + z-index beat consumer `.glass { position: relative }` rules.
+        style={fixedLayerStyle(OVERLAY_Z_INDEX.modal, style)}
+        onKeyDown={onKeyDown}
+        onClick={(event) => event.stopPropagation()}
+      >
+        {children}
+        <button
+          type="button"
+          data-slot="dialog-close"
+          className="absolute top-4 right-4 rounded-md opacity-70 hover:opacity-100"
+          onClick={() => setOpen(false)}
+        >
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </button>
+      </div>
+    </DialogPortal>
+  );
+});
+DialogContent.displayName = "DialogContent";
+
+function DialogHeader({ className, ...props }: React.ComponentProps<"div">) {
+  return <div className={cn("flex flex-col gap-1.5 text-left", className)} {...props} />;
+}
+
+function DialogFooter({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div className={cn("flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className)} {...props} />
+  );
+}
+
+const DialogTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<"h2">
+>(({ className, ...props }, ref) => (
+  <h2
+    ref={ref}
+    data-slot="dialog-title"
+    className={cn("text-lg font-black tracking-tight", className)}
+    {...props}
+  />
+));
+DialogTitle.displayName = "DialogTitle";
+
+const DialogDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentPropsWithoutRef<"p">
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="dialog-description"
+    className={cn("text-sm text-muted-foreground", className)}
+    {...props}
+  />
+));
+DialogDescription.displayName = "DialogDescription";
+
+export {
+  Dialog,
+  DialogTrigger,
+  DialogPortal,
+  DialogClose,
+  DialogOverlay,
+  DialogContent,
+  DialogHeader,
+  DialogFooter,
+  DialogTitle,
+  DialogDescription,
+};