@spatika/react 1.0.0

package/src/primitives/Select.tsx

@@ -0,0 +1,409 @@
+
+import * as React from "react";
+import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-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";
+
+type SelectContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  value?: string;
+  setValue: (value: string) => void;
+  triggerRef: React.RefObject<HTMLButtonElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+  itemTextByValue: React.MutableRefObject<Map<string, string>>;
+  registerItemText: (value: string, text: string) => void;
+  labelsVersion: number;
+  disabled?: boolean;
+};
+
+const SelectContext = React.createContext<SelectContextValue | null>(null);
+
+function useSelectContext(component: string) {
+  const ctx = React.useContext(SelectContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Select>`);
+  }
+  return ctx;
+}
+
+type SelectProps = {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  disabled?: boolean;
+  children?: React.ReactNode;
+};
+
+function Select({
+  value: valueProp,
+  defaultValue,
+  onValueChange,
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  disabled,
+  children,
+}: SelectProps) {
+  const [value, setValue] = useControllableState({
+    prop: valueProp,
+    defaultProp: defaultValue,
+    onChange: onValueChange,
+  });
+  const [open = false, setOpen] = useControllableState({
+    prop: openProp,
+    defaultProp: defaultOpen ?? false,
+    onChange: onOpenChange,
+  });
+  const triggerRef = React.useRef<HTMLButtonElement | null>(null);
+  const contentRef = React.useRef<HTMLDivElement | null>(null);
+  const itemTextByValue = React.useRef(new Map<string, string>());
+  const [labelsVersion, setLabelsVersion] = React.useState(0);
+
+  const registerItemText = React.useCallback((itemValue: string, text: string) => {
+    const prev = itemTextByValue.current.get(itemValue);
+    if (prev === text) return;
+    itemTextByValue.current.set(itemValue, text);
+    setLabelsVersion((v) => v + 1);
+  }, []);
+
+  // Provider-only root — no DOM wrapper (matches Radix Root behavior).
+  return (
+    <SelectContext.Provider
+      value={{
+        open,
+        setOpen: (next) => setOpen(next),
+        value,
+        setValue: (next) => setValue(next),
+        triggerRef,
+        contentRef,
+        itemTextByValue,
+        registerItemText,
+        labelsVersion,
+        disabled,
+      }}
+    >
+      {children}
+    </SelectContext.Provider>
+  );
+}
+
+function SelectGroup({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return <div data-slot="select-group" className={className} {...props} />;
+}
+
+function SelectValue({
+  placeholder,
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"span"> & { placeholder?: string }) {
+  const { value, itemTextByValue, labelsVersion } = useSelectContext("SelectValue");
+  void labelsVersion;
+  const label = value ? itemTextByValue.current.get(value) : undefined;
+  const showPlaceholder = !value;
+
+  return (
+    <span
+      data-slot="select-value"
+      data-placeholder={showPlaceholder ? "" : undefined}
+      className={className}
+      {...props}
+    >
+      {showPlaceholder ? placeholder : label ?? value}
+    </span>
+  );
+}
+
+const SelectTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & {
+    size?: "sm" | "default";
+  }
+>(({ className, size = "default", children, onClick, disabled: disabledProp, ...props }, ref) => {
+  const { open, setOpen, triggerRef, disabled } = useSelectContext("SelectTrigger");
+
+  return (
+    <button
+      ref={composeRefs(ref, triggerRef)}
+      type="button"
+      data-slot="select-trigger"
+      data-size={size}
+      data-state={open ? "open" : "closed"}
+      aria-expanded={open}
+      disabled={disabled || disabledProp}
+      className={cn(
+        "border-input data-[placeholder]:text-muted-foreground [&_svg:not([class*='text-'])]:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:bg-input/30 dark:hover:bg-input/50 flex w-full min-w-0 items-center justify-between gap-2 overflow-hidden rounded-md border bg-input-background px-3 py-2 text-sm whitespace-nowrap transition-[color,box-shadow] outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:min-w-0 *:data-[slot=select-value]:flex-1 *:data-[slot=select-value]:overflow-hidden *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+        className,
+      )}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(!open);
+      }}
+      {...props}
+    >
+      {children}
+      <ChevronDownIcon className="size-4 opacity-50" />
+    </button>
+  );
+});
+SelectTrigger.displayName = "SelectTrigger";
+
+const SelectContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    position?: "popper" | "item-aligned";
+  }
+>(({ className, children, position = "popper", style, ...props }, ref) => {
+  const { open, setOpen, triggerRef, contentRef, registerItemText } =
+    useSelectContext("SelectContent");
+
+  const floating = useFloatingPosition({
+    open,
+    triggerRef,
+    contentRef,
+    side: "bottom",
+    align: "start",
+    sideOffset: 4,
+  });
+
+  useDismissable({
+    enabled: open,
+    onDismiss: () => setOpen(false),
+    refs: [triggerRef, contentRef],
+  });
+
+  React.useEffect(() => {
+    if (!open) return;
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    return () => document.removeEventListener("keydown", handleKeyDown);
+  }, [open, setOpen]);
+
+  // While closed, register option labels without mounting visible item text in the DOM.
+  React.useEffect(() => {
+    if (open) return;
+
+    const walk = (nodes: React.ReactNode) => {
+      React.Children.forEach(nodes, (child) => {
+        if (!React.isValidElement(child)) return;
+        const childType = child.type as { displayName?: string };
+        const childProps = child.props as {
+          value?: string;
+          textValue?: string;
+          children?: React.ReactNode;
+        };
+
+        if (childType?.displayName === "SelectItem" && childProps.value != null) {
+          const text =
+            childProps.textValue ??
+            (typeof childProps.children === "string"
+              ? childProps.children
+              : React.Children.toArray(childProps.children)
+                  .filter((c) => typeof c === "string" || typeof c === "number")
+                  .join(""));
+          registerItemText(childProps.value, text || childProps.value);
+        }
+
+        if (childProps.children) walk(childProps.children);
+      });
+    };
+
+    walk(children);
+  }, [children, open, registerItemText]);
+
+  if (!open) return null;
+
+  const triggerTop = triggerRef.current?.getBoundingClientRect().top ?? 0;
+  const availableHeight = floating
+    ? Math.max(
+        140,
+        floating.side === "top"
+          ? triggerTop - 16
+          : window.innerHeight - floating.top - 16,
+      )
+    : 384;
+
+  return (
+    <Portal>
+      <div
+        ref={composeRefs(ref, contentRef)}
+        data-slot="select-content"
+        data-state="open"
+        data-side={floating?.side ?? "bottom"}
+        role="listbox"
+        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 relative z-[200] max-h-[min(20rem,var(--select-available-height,20rem))] min-w-[8rem] overflow-x-hidden overflow-y-auto rounded-xl border-border/60 shadow-xl",
+          position === "popper" &&
+            "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+          className,
+        )}
+        {...props}
+        style={{
+          position: "fixed",
+          top: floating?.top ?? 0,
+          left: floating?.left ?? 0,
+          // Grow with labels; never narrower than the trigger.
+          width: "max-content",
+          minWidth: floating?.triggerWidth,
+          maxWidth: "min(20rem, calc(100vw - 1rem))",
+          ["--select-available-height" as string]: `${availableHeight}px`,
+          opacity: floating ? 1 : 0,
+          pointerEvents: floating ? "auto" : "none",
+          ...style,
+        }}
+      >
+        <div
+          className={cn(
+            "p-1",
+            position === "popper" && "w-full min-w-full",
+          )}
+        >
+          {children}
+        </div>
+      </div>
+    </Portal>
+  );
+});
+SelectContent.displayName = "SelectContent";
+
+const SelectLabel = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="select-label"
+    className={cn(
+      "text-muted-foreground px-2.5 py-1.5 text-xs font-bold uppercase tracking-[0.16em]",
+      className,
+    )}
+    {...props}
+  />
+));
+SelectLabel.displayName = "SelectLabel";
+
+const SelectItem = React.forwardRef<
+  HTMLDivElement,
+  Omit<React.ComponentPropsWithoutRef<"div">, "onSelect"> & {
+    value: string;
+    disabled?: boolean;
+    textValue?: string;
+  }
+>(({ className, children, value, disabled, textValue, onClick, ...props }, ref) => {
+  const { value: selected, setValue, setOpen, registerItemText } =
+    useSelectContext("SelectItem");
+  const isSelected = selected === value;
+
+  const text =
+    textValue ??
+    (typeof children === "string"
+      ? children
+      : React.Children.toArray(children)
+          .filter((c) => typeof c === "string" || typeof c === "number")
+          .join(""));
+
+  React.useEffect(() => {
+    registerItemText(value, text || value);
+  }, [registerItemText, text, value]);
+
+  return (
+    <div
+      ref={ref}
+      role="option"
+      aria-selected={isSelected}
+      data-slot="select-item"
+      data-disabled={disabled ? "" : undefined}
+      data-state={isSelected ? "checked" : "unchecked"}
+      className={cn(
+        "focus:bg-accent/80 focus:text-accent-foreground [&_svg:not([class*='text-'])]:text-muted-foreground relative flex w-full cursor-default items-center gap-2 rounded-lg py-1.5 pr-8 pl-2.5 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 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2",
+        isSelected && "bg-accent/80 text-accent-foreground",
+        className,
+      )}
+      onClick={(event) => {
+        onClick?.(event);
+        if (event.defaultPrevented || disabled) return;
+        setValue(value);
+        setOpen(false);
+      }}
+      {...props}
+    >
+      <span className="absolute right-2 flex size-3.5 items-center justify-center">
+        {isSelected && <CheckIcon className="size-4" />}
+      </span>
+      <span>{children}</span>
+    </div>
+  );
+});
+SelectItem.displayName = "SelectItem";
+
+const SelectSeparator = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="select-separator"
+    className={cn(
+      "bg-border/70 pointer-events-none -mx-0.5 my-1.5 h-px",
+      className,
+    )}
+    {...props}
+  />
+));
+SelectSeparator.displayName = "SelectSeparator";
+
+function SelectScrollUpButton({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="select-scroll-up-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronUpIcon className="size-4" />
+    </div>
+  );
+}
+
+function SelectScrollDownButton({
+  className,
+  ...props
+}: React.ComponentPropsWithoutRef<"div">) {
+  return (
+    <div
+      data-slot="select-scroll-down-button"
+      className={cn("flex cursor-default items-center justify-center py-1", className)}
+      {...props}
+    >
+      <ChevronDownIcon className="size-4" />
+    </div>
+  );
+}
+
+export {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectScrollDownButton,
+  SelectScrollUpButton,
+  SelectSeparator,
+  SelectTrigger,
+  SelectValue,
+};

package/src/primitives/Separator.tsx

@@ -0,0 +1,30 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+type SeparatorProps = React.ComponentPropsWithoutRef<"div"> & {
+  orientation?: "horizontal" | "vertical";
+  decorative?: boolean;
+};
+
+const Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(
+  (
+    { className, orientation = "horizontal", decorative = true, ...props },
+    ref,
+  ) => (
+    <div
+      ref={ref}
+      data-slot="separator-root"
+      data-orientation={orientation}
+      role={decorative ? "none" : "separator"}
+      aria-orientation={decorative ? undefined : orientation}
+      className={cn(
+        "bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px",
+        className,
+      )}
+      {...props}
+    />
+  ),
+);
+Separator.displayName = "Separator";
+
+export { Separator };

package/src/primitives/Sheet.tsx

@@ -0,0 +1,265 @@
+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 SheetContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+};
+
+const SheetContext = React.createContext<SheetContextValue | null>(null);
+
+function useSheetContext(component: string) {
+  const ctx = React.useContext(SheetContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Sheet>`);
+  }
+  return ctx;
+}
+
+type SheetProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+};
+
+const Sheet = ({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: SheetProps) => {
+  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 Sheet is a Fragment sibling.
+  return (
+    <SheetContext.Provider
+      value={{ open, setOpen: (next) => setOpen(next), contentRef }}
+    >
+      {children}
+    </SheetContext.Provider>
+  );
+};
+Sheet.displayName = "Sheet";
+
+const SheetTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean }
+>(({ asChild = false, onClick, ...props }, ref) => {
+  const { setOpen } = useSheetContext("SheetTrigger");
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      type={asChild ? undefined : "button"}
+      data-slot="sheet-trigger"
+      {...props}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(true);
+      }}
+    />
+  );
+});
+SheetTrigger.displayName = "SheetTrigger";
+
+const SheetClose = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean }
+>(({ asChild = false, onClick, ...props }, ref) => {
+  const { setOpen } = useSheetContext("SheetClose");
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={ref}
+      type={asChild ? undefined : "button"}
+      data-slot="sheet-close"
+      {...props}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(false);
+      }}
+    />
+  );
+});
+SheetClose.displayName = "SheetClose";
+
+const SheetPortal = ({ children }: { children?: React.ReactNode }) => (
+  <Portal>{children}</Portal>
+);
+SheetPortal.displayName = "SheetPortal";
+
+const SheetOverlay = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, onClick, style, ...props }, ref) => {
+  const { open, setOpen } = useSheetContext("SheetOverlay");
+  if (!open) return null;
+
+  return (
+    <div
+      ref={ref}
+      data-slot="sheet-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)}
+      onClick={(event) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(false);
+      }}
+    />
+  );
+});
+SheetOverlay.displayName = "SheetOverlay";
+
+const SheetContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    side?: "top" | "right" | "bottom" | "left";
+    /** Extra classes for the dimmer (e.g. lighter backdrop). */
+    overlayClassName?: string;
+  }
+>(({ className, children, side = "right", overlayClassName, style, ...props }, ref) => {
+  const { open, setOpen, contentRef } = useSheetContext("SheetContent");
+  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 (
+    <SheetPortal>
+      <SheetOverlay className={overlayClassName} />
+      <div
+        ref={composeRefs(ref, contentRef)}
+        role="dialog"
+        aria-modal="true"
+        data-slot="sheet-content"
+        data-state="open"
+        tabIndex={-1}
+        className={cn(
+          "glass data-[state=open]:animate-in data-[state=closed]:animate-out fixed z-[11000] flex flex-col gap-4 shadow-2xl transition ease-in-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+          side === "right" &&
+            "data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right inset-y-0 right-0 h-full w-3/4 border-l sm:max-w-sm",
+          side === "left" &&
+            "data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left inset-y-0 left-0 h-full w-3/4 border-r sm:max-w-sm",
+          side === "top" &&
+            "data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top inset-x-0 top-0 h-auto border-b",
+          side === "bottom" &&
+            "data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom inset-x-0 bottom-0 h-auto border-t",
+          className,
+        )}
+        {...props}
+        style={fixedLayerStyle(OVERLAY_Z_INDEX.modal, style)}
+      >
+        {children}
+        <button
+          type="button"
+          className="absolute top-4 right-4 flex size-8 items-center justify-center rounded-full bg-muted/60 text-foreground/70 transition-colors hover:bg-muted hover:text-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none"
+          onClick={() => setOpen(false)}
+        >
+          <XIcon className="size-4" />
+          <span className="sr-only">Close</span>
+        </button>
+      </div>
+    </SheetPortal>
+  );
+});
+SheetContent.displayName = "SheetContent";
+
+const SheetHeader = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="sheet-header"
+    className={cn("flex flex-col gap-1.5 p-4", className)}
+    {...props}
+  />
+));
+SheetHeader.displayName = "SheetHeader";
+
+const SheetFooter = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div">
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    data-slot="sheet-footer"
+    className={cn("mt-auto flex flex-col gap-2 p-4", className)}
+    {...props}
+  />
+));
+SheetFooter.displayName = "SheetFooter";
+
+const SheetTitle = React.forwardRef<
+  HTMLHeadingElement,
+  React.ComponentPropsWithoutRef<"h2">
+>(({ className, ...props }, ref) => (
+  <h2
+    ref={ref}
+    data-slot="sheet-title"
+    className={cn(
+      "text-foreground text-lg font-bold leading-tight pr-8",
+      className,
+    )}
+    {...props}
+  />
+));
+SheetTitle.displayName = "SheetTitle";
+
+const SheetDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.ComponentPropsWithoutRef<"p">
+>(({ className, ...props }, ref) => (
+  <p
+    ref={ref}
+    data-slot="sheet-description"
+    className={cn("text-muted-foreground text-sm", className)}
+    {...props}
+  />
+));
+SheetDescription.displayName = "SheetDescription";
+
+export {
+  Sheet,
+  SheetTrigger,
+  SheetClose,
+  SheetContent,
+  SheetHeader,
+  SheetFooter,
+  SheetTitle,
+  SheetDescription,
+};