@spatika/react 1.0.0

package/src/primitives/Popover.tsx

@@ -0,0 +1,209 @@
+
+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 { useDismissable } from "../lib/use-dismissable";
+import {
+  useFloatingPosition,
+  type FloatingAlign,
+  type FloatingSide,
+} from "../lib/use-floating-position";
+import { cn } from "../lib/cn";
+
+type PopoverContextValue = {
+  open: boolean;
+  setOpen: (open: boolean) => void;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+  anchorRef: React.RefObject<HTMLElement | null>;
+};
+
+const PopoverContext = React.createContext<PopoverContextValue | null>(null);
+
+function usePopoverContext(component: string) {
+  const ctx = React.useContext(PopoverContext);
+  if (!ctx) {
+    throw new Error(`${component} must be used within <Popover>`);
+  }
+  return ctx;
+}
+
+type PopoverProps = {
+  open?: boolean;
+  defaultOpen?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  children?: React.ReactNode;
+};
+
+const Popover = ({
+  open: openProp,
+  defaultOpen,
+  onOpenChange,
+  children,
+}: PopoverProps) => {
+  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);
+  const anchorRef = React.useRef<HTMLElement | null>(null);
+
+  // Provider-only root — no DOM wrapper (matches Radix Root behavior).
+  return (
+    <PopoverContext.Provider
+      value={{
+        open,
+        setOpen: (next) => setOpen(next),
+        triggerRef,
+        contentRef,
+        anchorRef,
+      }}
+    >
+      {children}
+    </PopoverContext.Provider>
+  );
+};
+Popover.displayName = "Popover";
+
+const PopoverTrigger = React.forwardRef<
+  HTMLButtonElement,
+  React.ComponentPropsWithoutRef<"button"> & { asChild?: boolean }
+>(({ asChild = false, onClick, ...props }, ref) => {
+  const { open, setOpen, triggerRef } = usePopoverContext("PopoverTrigger");
+  const Comp = asChild ? Slot : "button";
+
+  return (
+    <Comp
+      ref={composeRefs(ref, triggerRef) as React.Ref<HTMLButtonElement>}
+      type={asChild ? undefined : "button"}
+      data-slot="popover-trigger"
+      aria-expanded={open}
+      {...props}
+      onClick={(event: React.MouseEvent<HTMLButtonElement>) => {
+        onClick?.(event);
+        if (!event.defaultPrevented) setOpen(!open);
+      }}
+    />
+  );
+});
+PopoverTrigger.displayName = "PopoverTrigger";
+
+const PopoverAnchor = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & { asChild?: boolean }
+>(({ asChild = false, ...props }, ref) => {
+  const { anchorRef } = usePopoverContext("PopoverAnchor");
+  const Comp = asChild ? Slot : "div";
+
+  return (
+    <Comp
+      ref={composeRefs(ref, anchorRef) as React.Ref<HTMLDivElement>}
+      data-slot="popover-anchor"
+      {...props}
+    />
+  );
+});
+PopoverAnchor.displayName = "PopoverAnchor";
+
+const PopoverContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentPropsWithoutRef<"div"> & {
+    align?: FloatingAlign;
+    side?: FloatingSide;
+    sideOffset?: number;
+    /** Radix compat — ignored (focus stays with the trigger by default). */
+    onOpenAutoFocus?: (event: Event) => void;
+    /** Radix compat — ignored. */
+    onCloseAutoFocus?: (event: Event) => void;
+  }
+>(
+  (
+    {
+      className,
+      align = "center",
+      side = "bottom",
+      sideOffset = 4,
+      style,
+      onOpenAutoFocus: _onOpenAutoFocus,
+      onCloseAutoFocus: _onCloseAutoFocus,
+      ...props
+    },
+    ref,
+  ) => {
+    const { open, setOpen, triggerRef, contentRef, anchorRef } =
+      usePopoverContext("PopoverContent");
+
+    const positionAnchor =
+      anchorRef.current != null ? anchorRef : triggerRef;
+
+    const position = useFloatingPosition({
+      open,
+      triggerRef: positionAnchor,
+      contentRef,
+      side,
+      align,
+      sideOffset,
+    });
+
+    useDismissable({
+      enabled: open,
+      onDismiss: () => setOpen(false),
+      refs: [triggerRef, contentRef, anchorRef],
+    });
+
+    if (!open) return null;
+
+    // Measure trigger on first paint so consumers using
+    // `w-[var(--radix-popover-trigger-width)]` get a real width before
+    // floating position resolves (avoids a 0-width / visibility:hidden loop).
+    const anchorEl = positionAnchor.current;
+    const triggerWidth =
+      position?.triggerWidth ??
+      (anchorEl ? anchorEl.getBoundingClientRect().width : undefined);
+    const triggerHeight =
+      position?.triggerHeight ??
+      (anchorEl ? anchorEl.getBoundingClientRect().height : undefined);
+
+    return (
+      <Portal>
+        <div
+          ref={composeRefs(ref, contentRef)}
+          data-slot="popover-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-[90] w-72 rounded-xl border p-4 shadow-xl outline-hidden",
+            className,
+          )}
+          {...props}
+          style={
+            {
+              position: "fixed",
+              top: position?.top ?? 0,
+              left: position?.left ?? 0,
+              opacity: position ? 1 : 0,
+              pointerEvents: position ? "auto" : "none",
+              ["--radix-popover-trigger-width" as string]:
+                triggerWidth != null && triggerWidth > 0
+                  ? `${triggerWidth}px`
+                  : undefined,
+              ["--radix-popover-trigger-height" as string]:
+                triggerHeight != null && triggerHeight > 0
+                  ? `${triggerHeight}px`
+                  : undefined,
+              ...style,
+            } as React.CSSProperties
+          }
+        />
+      </Portal>
+    );
+  },
+);
+PopoverContent.displayName = "PopoverContent";
+
+export { Popover, PopoverTrigger, PopoverContent, PopoverAnchor };

package/src/primitives/Progress.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+import { cn } from "../lib/cn";
+
+type ProgressProps = React.ComponentPropsWithoutRef<"div"> & {
+  value?: number | null;
+  max?: number;
+};
+
+function Progress({ className, value, max = 100, ...props }: ProgressProps) {
+  const pct = Math.min(100, Math.max(0, ((value || 0) / max) * 100));
+
+  return (
+    <div
+      data-slot="progress"
+      role="progressbar"
+      aria-valuemin={0}
+      aria-valuemax={max}
+      aria-valuenow={value ?? 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}%)` }}
+      />
+    </div>
+  );
+}
+
+export { Progress };

package/src/primitives/RadioGroup.tsx

@@ -0,0 +1,116 @@
+import * as React from "react";
+import { CircleIcon } from "lucide-react";
+import { useControllableState } from "../lib/use-controllable-state";
+import { cn } from "../lib/cn";
+
+type RadioGroupContextValue = {
+  value?: string;
+  setValue: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+};
+
+const RadioGroupContext = React.createContext<RadioGroupContextValue | null>(
+  null,
+);
+
+type RadioGroupProps = Omit<
+  React.ComponentPropsWithoutRef<"div">,
+  "onChange" | "defaultValue"
+> & {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  name?: string;
+  disabled?: boolean;
+};
+
+const RadioGroup = React.forwardRef<HTMLDivElement, RadioGroupProps>(
+  (
+    {
+      className,
+      value: valueProp,
+      defaultValue,
+      onValueChange,
+      name,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const [value, setValue] = useControllableState<string>({
+      prop: valueProp,
+      defaultProp: defaultValue,
+      onChange: onValueChange,
+    });
+
+    return (
+      <RadioGroupContext.Provider
+        value={{
+          value,
+          setValue: (next) => setValue(next),
+          name,
+          disabled,
+        }}
+      >
+        <div
+          ref={ref}
+          role="radiogroup"
+          data-slot="radio-group"
+          className={cn("grid gap-3", className)}
+          {...props}
+        />
+      </RadioGroupContext.Provider>
+    );
+  },
+);
+RadioGroup.displayName = "RadioGroup";
+
+type RadioGroupItemProps = Omit<
+  React.ComponentPropsWithoutRef<"button">,
+  "onChange" | "value"
+> & {
+  value: string;
+};
+
+const RadioGroupItem = React.forwardRef<HTMLButtonElement, RadioGroupItemProps>(
+  ({ className, value, disabled, onClick, ...props }, ref) => {
+    const ctx = React.useContext(RadioGroupContext);
+    const isChecked = ctx?.value === value;
+    const isDisabled = disabled || ctx?.disabled;
+
+    return (
+      <button
+        type="button"
+        role="radio"
+        aria-checked={isChecked}
+        data-state={isChecked ? "checked" : "unchecked"}
+        data-slot="radio-group-item"
+        disabled={isDisabled}
+        ref={ref}
+        className={cn(
+          "border-input text-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 dark:bg-input/30 aspect-square size-4 shrink-0 rounded-full border shadow-xs outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50",
+          className,
+        )}
+        {...props}
+        onClick={(event) => {
+          onClick?.(event);
+          if (event.defaultPrevented || isDisabled) return;
+          ctx?.setValue(value);
+        }}
+      >
+        {isChecked && (
+          <span
+            data-slot="radio-group-indicator"
+            className="relative flex items-center justify-center"
+          >
+            <CircleIcon className="fill-primary absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2" />
+          </span>
+        )}
+      </button>
+    );
+  },
+);
+RadioGroupItem.displayName = "RadioGroupItem";
+
+export { RadioGroup, RadioGroupItem };