@spatika/react 1.0.0

package/src/primitives/DropdownMenu.tsx

@@ -0,0 +1,552 @@
+import * as React from "react";
+import { CheckIcon, ChevronRightIcon, CircleIcon } 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 { useDismissable } from "../lib/use-dismissable";
+import {
+  useFloatingPosition,
+  type FloatingSide,
+} from "../lib/use-floating-position";
+import { cn } from "../lib/cn";
+import { OVERLAY_Z_INDEX, createSelectEvent } from "../lib/overlay-stack";
+
+type DropdownMenuContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+};
+
+const DropdownMenuContext =
+  React.createContext<DropdownMenuContextValue | null>(null);
+
+function useDropdownMenuContext(component: string) {
+  const ctx = React.useContext(DropdownMenuContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <DropdownMenu>`);
+  }
+  return ctx;
+}
+
+type DropdownMenuRadioContextValue = {
+  value?: string;
+  setValue: (value: string) => void;
+};
+
+const DropdownMenuRadioContext =
+  React.createContext<DropdownMenuRadioContextValue | null>(null);
+
+type DropdownMenuSubContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+};
+
+const DropdownMenuSubContext =
+  React.createContext<DropdownMenuSubContextValue | null>(null);
+
+type DropdownMenuProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+};
+
+function DropdownMenu({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: DropdownMenuProps) {
+  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);
+
+  return (
+    <DropdownMenuContext.Provider
+      value={{ open, setOpen: (next) => setOpen(next), triggerRef, contentRef }}
+    >
+      {children}
+    </DropdownMenuContext.Provider>
+  );
+}
+
+function DropdownMenuPortal({ children }: { children?: React.ReactNode }) {
+  return <Portal>{children}</Portal>;
+}
+
+const DropdownMenuTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean }
+>(({ asChild = false, onClick, ...props }, ref) => {
+  const { open, setOpen, triggerRef } = useDropdownMenuContext("DropdownMenuTrigger");
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={composeRefs(ref, triggerRef) as React.Ref<HTMLButtonElement>}
+      type={asChild ? undefined : "button"}
+      data-slot="dropdown-menu-trigger"
+      aria-expanded={open}
+      {...props}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(!open);
+      }}
+    />
+  );
+});
+DropdownMenuTrigger.displayName = "DropdownMenuTrigger";
+
+const DropdownMenuContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    side?: FloatingSide;
+    sideOffset?: number;
+    align?: "start" | "center" | "end";
+  }
+>(
+  (
+    {
+      className,
+      side = "bottom",
+      sideOffset = 4,
+      align = "start",
+      style,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, setOpen, triggerRef, contentRef } =
+      useDropdownMenuContext("DropdownMenuContent");
+
+    const position = useFloatingPosition({
+      open,
+      triggerRef,
+      contentRef,
+      side,
+      align,
+      sideOffset,
+    });
+
+    useDismissable({
+      enabled: open,
+      onDismiss: () => setOpen(false),
+      refs: [triggerRef, contentRef],
+    });
+
+    if (!open) return null;
+
+    return (
+      <Portal>
+        <div
+          ref={composeRefs(ref, contentRef)}
+          role="menu"
+          data-slot="dropdown-menu-content"
+          data-state="open"
+          data-side={position?.side ?? side}
+          className={cn(
+            "glass-menu text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] max-h-[min(24rem,var(--dropdown-available-height,24rem))] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-xl border-border/60 p-1.5 shadow-xl",
+            className,
+          )}
+          {...props}
+          style={{
+            position: "fixed",
+            zIndex: OVERLAY_Z_INDEX.menu,
+            top: position?.top ?? 0,
+            left: position?.left ?? 0,
+            opacity: position ? 1 : 0,
+            pointerEvents: position ? "auto" : "none",
+            ...style,
+          }}
+        />
+      </Portal>
+    );
+  },
+);
+DropdownMenuContent.displayName = "DropdownMenuContent";
+
+const DropdownMenuGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ ...props }, ref) => (
+  <div ref={ref} role="group" data-slot="dropdown-menu-group" {...props} />
+));
+DropdownMenuGroup.displayName = "DropdownMenuGroup";
+
+type MenuSelectHandler = (event: Event) => void;
+
+function handleMenuItemActivate(options: {
+  event: React.MouseEvent;
+  disabled?: boolean;
+  onClick?: (event: React.MouseEvent<HTMLDivElement>) => void;
+  onSelect?: MenuSelectHandler;
+  close: () => void;
+}) {
+  const { event, disabled, onClick, onSelect, close } = options;
+  onClick?.(event as React.MouseEvent<HTMLDivElement>);
+  if (event.defaultPrevented || disabled) return;
+
+  if (onSelect) {
+    const selectEvent = createSelectEvent();
+    onSelect(selectEvent);
+    if (selectEvent.defaultPrevented) return;
+  }
+
+  close();
+}
+
+const DropdownMenuItem = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    inset?: boolean;
+    variant?: "default" | "destructive";
+    disabled?: boolean;
+    asChild?: boolean;
+    /**
+     * Radix-compatible selection handler. Call `event.preventDefault()` to keep
+     * the menu open (e.g. editor formatting actions that must retain focus).
+     */
+    onSelect?: MenuSelectHandler;
+  }
+>(
+  (
+    {
+      className,
+      inset,
+      variant = "default",
+      disabled,
+      asChild = false,
+      onClick,
+      onSelect,
+      ...props
+    },
+    ref,
+  ) => {
+    const { setOpen } = useDropdownMenuContext("DropdownMenuItem");
+    const Comp = asChild ? Slot : "div";
+
+    return (
+      <Comp
+        ref={ref}
+        role="menuitem"
+        data-slot="dropdown-menu-item"
+        data-inset={inset}
+        data-variant={variant}
+        data-disabled={disabled ? "" : undefined}
+        className={cn(
+          "focus:bg-accent/80 focus:text-accent-foreground data-[variant=destructive]:text-destructive data-[variant=destructive]:focus:bg-destructive/10 dark:data-[variant=destructive]:focus:bg-destructive/20 data-[variant=destructive]:focus:text-destructive data-[variant=destructive]:*:[svg]:!text-destructive [&_svg:not([class*='text-'])]:text-muted-foreground relative flex cursor-default items-center gap-2 rounded-lg px-2.5 py-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 data-[inset]:pl-8 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+          className,
+        )}
+        {...props}
+        onClick={(event: React.MouseEvent<HTMLDivElement>) => {
+          handleMenuItemActivate({
+            event,
+            disabled,
+            onClick,
+            onSelect,
+            close: () => setOpen(false),
+          });
+        }}
+      />
+    );
+  },
+);
+DropdownMenuItem.displayName = "DropdownMenuItem";
+
+const DropdownMenuCheckboxItem = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    checked?: boolean;
+    onCheckedChange?: (checked: boolean) => void;
+    disabled?: boolean;
+    onSelect?: MenuSelectHandler;
+  }
+>(({ className, children, checked, onCheckedChange, disabled, onClick, onSelect, ...props }, ref) => {
+  const { setOpen } = useDropdownMenuContext("DropdownMenuCheckboxItem");
+
+  return (
+    <div
+      ref={ref}
+      role="menuitemcheckbox"
+      aria-checked={checked}
+      data-slot="dropdown-menu-checkbox-item"
+      data-state={checked ? "checked" : "unchecked"}
+      data-disabled={disabled ? "" : undefined}
+      className={cn(
+        "focus:bg-accent/80 focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-2.5 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || disabled) return;
+
+        if (onSelect) {
+          const selectEvent = createSelectEvent();
+          onSelect(selectEvent);
+          if (selectEvent.defaultPrevented) return;
+        }
+
+        onCheckedChange?.(!checked);
+        setOpen(false);
+      }}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        {checked && <CheckIcon className="size-4" />}
+      </span>
+      {children}
+    </div>
+  );
+});
+DropdownMenuCheckboxItem.displayName = "DropdownMenuCheckboxItem";
+
+const DropdownMenuRadioGroup = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    value?: string;
+    onValueChange?: (value: string) => void;
+  }
+>(({ value, onValueChange, ...props }, ref) => (
+  <DropdownMenuRadioContext.Provider
+    value={{
+      value,
+      setValue: (next) => onValueChange?.(next),
+    }}
+  >
+    <div
+      ref={ref}
+      role="group"
+      data-slot="dropdown-menu-radio-group"
+      {...props}
+    />
+  </DropdownMenuRadioContext.Provider>
+));
+DropdownMenuRadioGroup.displayName = "DropdownMenuRadioGroup";
+
+const DropdownMenuRadioItem = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    value: string;
+    disabled?: boolean;
+    onSelect?: MenuSelectHandler;
+  }
+>(({ className, children, value, disabled, onClick, onSelect, ...props }, ref) => {
+  const { setOpen } = useDropdownMenuContext("DropdownMenuRadioItem");
+  const radio = React.useContext(DropdownMenuRadioContext);
+  const isChecked = radio?.value === value;
+
+  return (
+    <div
+      ref={ref}
+      role="menuitemradio"
+      aria-checked={isChecked}
+      data-slot="dropdown-menu-radio-item"
+      data-state={isChecked ? "checked" : "unchecked"}
+      data-disabled={disabled ? "" : undefined}
+      className={cn(
+        "focus:bg-accent/80 focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-lg py-2 pr-2.5 pl-8 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      {...props}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || disabled) return;
+
+        if (onSelect) {
+          const selectEvent = createSelectEvent();
+          onSelect(selectEvent);
+          if (selectEvent.defaultPrevented) return;
+        }
+
+        radio?.setValue(value);
+        setOpen(false);
+      }}
+    >
+      <span className="pointer-events-none absolute left-2 flex size-3.5 items-center justify-center">
+        {isChecked && <CircleIcon className="size-2 fill-current" />}
+      </span>
+      {children}
+    </div>
+  );
+});
+DropdownMenuRadioItem.displayName = "DropdownMenuRadioItem";
+
+const DropdownMenuLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & { inset?: boolean }
+>(({ className, inset, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="dropdown-menu-label"
+    data-inset={inset}
+    className={cn(
+      "px-2.5 py-1.5 text-sm font-medium data-[inset]:pl-8",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuLabel.displayName = "DropdownMenuLabel";
+
+const DropdownMenuSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="dropdown-menu-separator"
+    className={cn("bg-border/70 -mx-0.5 my-1.5 h-px", className)}
+    {...props}
+  />
+));
+DropdownMenuSeparator.displayName = "DropdownMenuSeparator";
+
+const DropdownMenuShortcut = React.forwardRef<
+  HTMLSpanElement,
+  React.ComponentPropsWithoutRef<"span">
+>(({ className, ...props }, ref) => (
+  <span
+    ref={ref}
+    data-slot="dropdown-menu-shortcut"
+    className={cn(
+      "text-muted-foreground ml-auto text-xs tracking-widest",
+      className,
+    )}
+    {...props}
+  />
+));
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+function DropdownMenuSub({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+}) {
+  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);
+
+  return (
+    <DropdownMenuSubContext.Provider
+      value={{ open, setOpen: (next) => setOpen(next), triggerRef, contentRef }}
+    >
+      <div data-slot="dropdown-menu-sub" className="relative">
+        {children}
+      </div>
+    </DropdownMenuSubContext.Provider>
+  );
+}
+
+const DropdownMenuSubTrigger = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & { inset?: boolean }
+>(({ className, inset, children, onMouseEnter, ...props }, ref) => {
+  const sub = React.useContext(DropdownMenuSubContext);
+  if (!sub) {
+    throw new Error("DropdownMenuSubTrigger must be used within DropdownMenuSub");
+  }
+
+  return (
+    <div
+      ref={composeRefs(ref, sub.triggerRef) as React.Ref<HTMLDivElement>}
+      data-slot="dropdown-menu-sub-trigger"
+      data-inset={inset}
+      data-state={sub.open ? "open" : "closed"}
+      className={cn(
+        "focus:bg-accent/80 focus:text-accent-foreground data-[state=open]:bg-accent/80 data-[state=open]:text-accent-foreground flex cursor-default items-center rounded-lg px-2.5 py-2 text-sm outline-hidden select-none data-[inset]:pl-8",
+        className,
+      )}
+      {...props}
+      onMouseEnter={(event) => {
+        onMouseEnter?.(event);
+        sub.setOpen(true);
+      }}
+    >
+      {children}
+      <ChevronRightIcon className="ml-auto size-4" />
+    </div>
+  );
+});
+DropdownMenuSubTrigger.displayName = "DropdownMenuSubTrigger";
+
+const DropdownMenuSubContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, style, ...props }, ref) => {
+  const sub = React.useContext(DropdownMenuSubContext);
+  if (!sub) {
+    throw new Error("DropdownMenuSubContent must be used within DropdownMenuSub");
+  }
+
+  const position = useFloatingPosition({
+    open: sub.open,
+    triggerRef: sub.triggerRef,
+    contentRef: sub.contentRef,
+    side: "right",
+    align: "start",
+    sideOffset: 2,
+  });
+
+  if (!sub.open) return null;
+
+  return (
+    <div
+      ref={composeRefs(ref, sub.contentRef)}
+      data-slot="dropdown-menu-sub-content"
+      data-state="open"
+      data-side={position?.side ?? "right"}
+      className={cn(
+        "glass-menu text-popover-foreground 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 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-[10000] min-w-[8rem] overflow-hidden rounded-xl border p-1 shadow-xl",
+        className,
+      )}
+      {...props}
+      style={{
+        position: "fixed",
+        zIndex: OVERLAY_Z_INDEX.menu,
+        top: position?.top ?? 0,
+        left: position?.left ?? 0,
+        opacity: position ? 1 : 0,
+        pointerEvents: position ? "auto" : "none",
+        ...style,
+      }}
+    />
+  );
+});
+DropdownMenuSubContent.displayName = "DropdownMenuSubContent";
+
+export {
+  DropdownMenu,
+  DropdownMenuPortal,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuLabel,
+  DropdownMenuItem,
+  DropdownMenuCheckboxItem,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubTrigger,
+  DropdownMenuSubContent,
+};

package/src/primitives/Input.test.tsx

@@ -0,0 +1,22 @@
+import { render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it } from "vitest";
+import { Input } from "./Input";
+
+describe("Input", () => {
+  it("renders an accessible textbox", () => {
+    render(<Input aria-label="Email" placeholder="you@acme.com" />);
+    expect(screen.getByLabelText("Email")).toHaveAttribute(
+      "placeholder",
+      "you@acme.com",
+    );
+  });
+
+  it("accepts typed values", async () => {
+    const user = userEvent.setup();
+    render(<Input aria-label="Name" />);
+    const input = screen.getByLabelText("Name");
+    await user.type(input, "Ada");
+    expect(input).toHaveValue("Ada");
+  });
+});

package/src/primitives/Input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => (
+    <input
+      type={type}
+      ref={ref}
+      data-slot="input"
+      className={cn(
+        "file:text-foreground placeholder:text-muted-foreground selection:bg-primary selection:text-primary-foreground dark:bg-input/30 border-input flex h-9 w-full min-w-0 rounded-md border px-3 py-1 text-base bg-input-background transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+        "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",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Input.displayName = "Input";
+
+export { Input };

package/src/primitives/Kbd.tsx

@@ -0,0 +1,17 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+function Kbd({ className, ...props }: React.ComponentProps<"kbd">) {
+  return (
+    <kbd
+      data-slot="kbd"
+      className={cn(
+        "pointer-events-none inline-flex h-5 select-none items-center gap-1 rounded border border-border/60 bg-muted px-1.5 font-mono text-[10px] font-medium text-muted-foreground",
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Kbd };

package/src/primitives/Label.tsx

@@ -0,0 +1,20 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+const Label = React.forwardRef<
+  HTMLLabelElement,
+  React.ComponentPropsWithoutRef<"label">
+>(({ className, ...props }, ref) => (
+  <label
+    ref={ref}
+    data-slot="label"
+    className={cn(
+      "flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50",
+      className,
+    )}
+    {...props}
+  />
+));
+Label.displayName = "Label";
+
+export { Label };

package/src/primitives/NativeSelect.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+import { nativeSelectClass } from "../lib/chips";
+
+/**
+ * Styled native `<select>` — prefer compound `Select` for custom menus.
+ */
+const NativeSelect = React.forwardRef<HTMLSelectElement, React.ComponentProps<"select">>(
+  ({ className, children, ...props }, ref) => (
+    <select
+      ref={ref}
+      data-slot="native-select"
+      className={cn(nativeSelectClass, "mt-0", className)}
+      {...props}
+    >
+      {children}
+    </select>
+  ),
+);
+NativeSelect.displayName = "NativeSelect";
+
+export { NativeSelect };