@zentauri-ui/zentauri-components 1.7.0 → 1.7.2

package/src/ui/popover/popover-base.tsx

@@ -0,0 +1,261 @@
+"use client";
+
+import {
+  Children,
+  cloneElement,
+  createContext,
+  isValidElement,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+  type RefObject,
+  type KeyboardEventHandler,
+  type MouseEventHandler,
+  type ReactElement,
+  type Ref,
+  useMemo,
+} from "react";
+
+import { cn } from "../../lib/utils";
+
+import type {
+  PopoverAlign,
+  PopoverContentProps,
+  PopoverContextType,
+  PopoverProps,
+  PopoverSide,
+  PopoverTriggerProps,
+} from "./types";
+import { popoverContentVariants } from "./variants";
+
+export const PopoverContext = createContext<PopoverContextType | null>(null);
+
+export const usePopover = () => {
+  const context = useContext(PopoverContext);
+  if (!context) {
+    throw new Error("Popover components must be used within Popover");
+  }
+  return context;
+};
+
+function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {
+  return (node: T) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") {
+        ref(node);
+      } else if (ref) {
+        (ref as RefObject<T | null>).current = node;
+      }
+    }
+  };
+}
+
+export function sideAlignClass(side: PopoverSide, align: PopoverAlign) {
+  const sideClasses = {
+    top: "bottom-full mb-2",
+    bottom: "top-full mt-2",
+    left: "right-full mr-2",
+    right: "left-full ml-2",
+  } satisfies Record<PopoverSide, string>;
+
+  const verticalAlign = {
+    start: "left-0",
+    center: "left-1/2 -translate-x-1/2",
+    end: "right-0",
+  } satisfies Record<PopoverAlign, string>;
+
+  const horizontalAlign = {
+    start: "top-0",
+    center: "top-1/2 -translate-y-1/2",
+    end: "bottom-0",
+  } satisfies Record<PopoverAlign, string>;
+
+  return cn(
+    sideClasses[side],
+    side === "top" || side === "bottom"
+      ? verticalAlign[align]
+      : horizontalAlign[align],
+  );
+}
+
+export const Popover = ({
+  children,
+  defaultOpen = false,
+  open: controlledOpen,
+  onOpenChange,
+  closeOnEscape = true,
+  closeOnOutsideClick = true,
+}: PopoverProps) => {
+  const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+  const contentId = `${useId()}-popover`;
+  const triggerRef = useRef<HTMLElement | null>(null);
+  const contentRef = useRef<HTMLDivElement | null>(null);
+
+  const isControlled = controlledOpen !== undefined;
+  const open = isControlled ? controlledOpen : uncontrolledOpen;
+
+  const setOpen = useCallback(
+    (value: boolean) => {
+      if (!isControlled) {
+        setUncontrolledOpen(value);
+      }
+      onOpenChange?.(value);
+    },
+    [isControlled, onOpenChange],
+  );
+
+  const toggleOpen = useCallback(() => setOpen(!open), [open, setOpen]);
+
+  useEffect(() => {
+    if (!open) {
+      return undefined;
+    }
+
+    const onPointerDown = (event: PointerEvent) => {
+      if (!closeOnOutsideClick) {
+        return;
+      }
+      const target = event.target as Node;
+      if (
+        contentRef.current?.contains(target) ||
+        triggerRef.current?.contains(target)
+      ) {
+        return;
+      }
+      setOpen(false);
+    };
+
+    const onKeyDown = (event: KeyboardEvent) => {
+      if (event.key === "Escape" && closeOnEscape) {
+        setOpen(false);
+        triggerRef.current?.focus();
+      }
+    };
+
+    document.addEventListener("pointerdown", onPointerDown);
+    document.addEventListener("keydown", onKeyDown);
+
+    return () => {
+      document.removeEventListener("pointerdown", onPointerDown);
+      document.removeEventListener("keydown", onKeyDown);
+    };
+  }, [closeOnEscape, closeOnOutsideClick, open, setOpen]);
+
+  const contextValue = useMemo(
+    () => ({
+      open,
+      setOpen,
+      toggleOpen,
+      contentId,
+      triggerRef,
+      contentRef,
+    }),
+    [open, setOpen, toggleOpen, contentId],
+  );
+
+  return (
+    <PopoverContext.Provider
+      value={contextValue}
+    >
+      <div className="relative inline-block">{children}</div>
+    </PopoverContext.Provider>
+  );
+};
+
+export const PopoverTrigger = ({
+  children,
+  className,
+}: PopoverTriggerProps) => {
+  const { open, toggleOpen, contentId, triggerRef } = usePopover();
+  const childList = Children.toArray(children).filter(
+    (node) => node !== null && node !== undefined && typeof node !== "boolean",
+  );
+
+  const soleCandidate =
+    childList.length === 1 && isValidElement(childList[0])
+      ? (childList[0] as ReactElement<{
+          className?: string;
+          ref?: Ref<HTMLElement>;
+          onClick?: MouseEventHandler;
+          onKeyDown?: KeyboardEventHandler;
+          "aria-expanded"?: boolean;
+          "aria-haspopup"?: string;
+          "aria-controls"?: string;
+        }>)
+      : undefined;
+
+  if (soleCandidate) {
+    return cloneElement(soleCandidate, {
+      ref: mergeRefs(triggerRef, soleCandidate.props.ref),
+      onClick: (event) => {
+        soleCandidate.props.onClick?.(event);
+        if (!event.defaultPrevented) {
+          toggleOpen();
+        }
+      },
+      onKeyDown: (event) => {
+        soleCandidate.props.onKeyDown?.(event);
+        if (event.key === "Escape") {
+          event.preventDefault();
+        }
+      },
+      className: cn(className, soleCandidate.props.className),
+      "aria-expanded": open,
+      "aria-haspopup": "dialog",
+      "aria-controls": open ? contentId : undefined,
+    });
+  }
+
+  return (
+    <button
+      ref={triggerRef as Ref<HTMLButtonElement>}
+      type="button"
+      className={className}
+      aria-expanded={open}
+      aria-haspopup="dialog"
+      aria-controls={open ? contentId : undefined}
+      onClick={toggleOpen}
+    >
+      {children}
+    </button>
+  );
+};
+
+export const PopoverContent = ({
+  children,
+  className,
+  variant,
+  size,
+  width,
+  side = "bottom",
+  align = "center",
+  role = "dialog",
+  ...props
+}: PopoverContentProps) => {
+  const { open, contentId, contentRef } = usePopover();
+
+  if (!open) {
+    return null;
+  }
+
+  return (
+    <div
+      ref={contentRef}
+      id={contentId}
+      data-open={open}
+      role={role}
+      tabIndex={-1}
+      className={cn(
+        popoverContentVariants({ variant, size, width }),
+        sideAlignClass(side, align),
+        className,
+      )}
+      {...props}
+    >
+      {children}
+    </div>
+  );
+};

package/src/ui/popover/popover.test.tsx

@@ -0,0 +1,84 @@
+import { render, screen, waitFor } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { describe, expect, it, vi } from "vitest";
+
+import { Popover, PopoverContent, PopoverTrigger } from "./popover";
+
+describe("Popover", () => {
+  it("should open and close popover content from the trigger", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover>
+        <PopoverTrigger>
+          <button type="button">Open panel</button>
+        </PopoverTrigger>
+        <PopoverContent>Interactive panel</PopoverContent>
+      </Popover>,
+    );
+
+    const trigger = screen.getByRole("button", { name: "Open panel" });
+    await user.click(trigger);
+    expect(screen.getByRole("dialog")).toHaveTextContent("Interactive panel");
+    expect(trigger).toHaveAttribute("aria-expanded", "true");
+
+    await user.click(trigger);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+
+  it("should close when clicking outside the popover", async () => {
+    const user = userEvent.setup();
+    render(
+      <>
+        <Popover defaultOpen>
+          <PopoverTrigger>
+            <button type="button">Open panel</button>
+          </PopoverTrigger>
+          <PopoverContent>Panel body</PopoverContent>
+        </Popover>
+        <button type="button">Outside</button>
+      </>,
+    );
+
+    expect(screen.getByRole("dialog")).toBeInTheDocument();
+    await user.click(screen.getByRole("button", { name: "Outside" }));
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+  });
+
+  it("should close on Escape and return focus to the trigger", async () => {
+    const user = userEvent.setup();
+    render(
+      <Popover defaultOpen>
+        <PopoverTrigger>
+          <button type="button">Focus trigger</button>
+        </PopoverTrigger>
+        <PopoverContent>Escape closes me</PopoverContent>
+      </Popover>,
+    );
+
+    await user.keyboard("{Escape}");
+    await waitFor(() => {
+      expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+    });
+    expect(screen.getByRole("button", { name: "Focus trigger" })).toHaveFocus();
+  });
+
+  it("should support controlled open state", async () => {
+    const user = userEvent.setup();
+    const onOpenChange = vi.fn();
+
+    render(
+      <Popover open={false} onOpenChange={onOpenChange}>
+        <PopoverTrigger>
+          <button type="button">Controlled</button>
+        </PopoverTrigger>
+        <PopoverContent>Controlled body</PopoverContent>
+      </Popover>,
+    );
+
+    await user.click(screen.getByRole("button", { name: "Controlled" }));
+    expect(onOpenChange).toHaveBeenCalledWith(true);
+    expect(screen.queryByRole("dialog")).not.toBeInTheDocument();
+  });
+});

package/src/ui/popover/popover.tsx

@@ -0,0 +1,8 @@
+// popover.tsx — default static entry (no framer-motion)
+export {
+  Popover,
+  PopoverTrigger,
+  PopoverContent,
+  PopoverContext,
+  usePopover,
+} from "./popover-base";

package/src/ui/popover/types.ts

@@ -0,0 +1,38 @@
+import { VariantProps } from "class-variance-authority";
+import type { ComponentPropsWithRef, ReactNode } from "react";
+import { popoverContentVariants } from "./variants";
+
+export type PopoverSide = "top" | "left" | "bottom" | "right";
+export type PopoverAlign = "start" | "center" | "end";
+
+export type PopoverContextType = {
+  open: boolean;
+  setOpen: (value: boolean) => void;
+  toggleOpen: () => void;
+  contentId: string;
+  triggerRef: React.RefObject<HTMLElement | null>;
+  contentRef: React.RefObject<HTMLDivElement | null>;
+};
+
+export type PopoverProps = {
+  children: ReactNode;
+  defaultOpen?: boolean;
+  open?: boolean;
+  onOpenChange?: (open: boolean) => void;
+  closeOnEscape?: boolean;
+  closeOnOutsideClick?: boolean;
+};
+
+export type PopoverTriggerProps = {
+  children: ReactNode;
+  className?: string;
+};
+
+export type PopoverContentProps = ComponentPropsWithRef<"div"> & {
+  children: ReactNode;
+  variant?: VariantProps<typeof popoverContentVariants>["variant"]
+  size?: VariantProps<typeof popoverContentVariants>["size"];
+  width?: VariantProps<typeof popoverContentVariants>["width"];
+  side?: PopoverSide;
+  align?: PopoverAlign;
+};

package/src/ui/popover/variants.ts

@@ -0,0 +1,21 @@
+import { cva } from "class-variance-authority";
+
+import {
+  zuiPopoverContentBase,
+  zuiPopoverContentSizes,
+  zuiPopoverContentVariants,
+  zuiPopoverContentWidths,
+} from "../../design-system/popover";
+
+export const popoverContentVariants = cva(zuiPopoverContentBase, {
+  variants: {
+    variant: zuiPopoverContentVariants,
+    size: zuiPopoverContentSizes,
+    width: zuiPopoverContentWidths,
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "md",
+    width: "xs",
+  },
+});

package/src/ui/radio-group/animated/animations.ts

@@ -0,0 +1,12 @@
+export const radioGroupAnimationPresets = {
+  pop: {
+    initial: { scale: 0.35, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { type: "spring", stiffness: 520, damping: 28 },
+  },
+  fade: {
+    initial: { scale: 0.85, opacity: 0 },
+    animate: { scale: 1, opacity: 1 },
+    transition: { duration: 0.16, ease: "easeOut" },
+  },
+} as const;

package/src/ui/radio-group/animated/index.ts

@@ -0,0 +1,10 @@
+"use client";
+
+export { RadioGroupAnimated, RadioGroupItemAnimated } from "./radio-group-animated";
+export type {
+  RadioGroupAnimatedProps,
+  RadioGroupAnimation,
+  RadioGroupAnimationPresets,
+  RadioGroupItemAnimatedProps,
+} from "./types";
+export { radioGroupAnimationPresets } from "./animations";

package/src/ui/radio-group/animated/radio-group-animated.tsx

@@ -0,0 +1,173 @@
+"use client";
+
+import { motion } from "framer-motion";
+import { useCallback, useId, useState } from "react";
+
+import { cn } from "../../../lib/utils";
+
+import { radioGroupAnimationPresets } from "./animations";
+import type {
+  RadioGroupAnimatedProps,
+  RadioGroupItemAnimatedProps,
+} from "./types";
+import {
+  RadioGroupContext,
+  useRadioGroupContext,
+} from "../radio-group-context";
+import {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "../variants";
+
+export function RadioGroupAnimated(props: RadioGroupAnimatedProps) {
+  const {
+    className,
+    value,
+    defaultValue,
+    name,
+    disabled,
+    required,
+    onValueChange,
+    orientation,
+    appearance,
+    size,
+    children,
+    ref,
+    animation: _animation,
+    ...rest
+  } = props;
+  const generatedName = useId();
+  const isControlled = value !== undefined;
+  const [uncontrolled, setUncontrolled] = useState(defaultValue);
+  const resolvedValue = isControlled ? value : uncontrolled;
+
+  const setValue = useCallback(
+    (next: string) => {
+      if (!isControlled) {
+        setUncontrolled(next);
+      }
+      onValueChange?.(next);
+    },
+    [isControlled, onValueChange],
+  );
+
+  return (
+    <RadioGroupContext.Provider
+      value={{
+        value: resolvedValue,
+        name: name ?? generatedName,
+        disabled,
+        required,
+        appearance: appearance ?? undefined,
+        size: size ?? undefined,
+        onValueChange: setValue,
+      }}
+    >
+      <div
+        ref={ref}
+        role="radiogroup"
+        data-slot="radio-group"
+        data-orientation={orientation ?? "vertical"}
+        className={cn(radioGroupRootVariants({ orientation }), className)}
+        {...rest}
+      >
+        {children}
+      </div>
+    </RadioGroupContext.Provider>
+  );
+}
+
+RadioGroupAnimated.displayName = "RadioGroup";
+
+export function RadioGroupItemAnimated(props: RadioGroupItemAnimatedProps) {
+  const {
+    className,
+    rootClassName,
+    controlClassName,
+    indicatorClassName,
+    value,
+    appearance: appearanceProp,
+    size: sizeProp,
+    disabled: disabledProp,
+    required: requiredProp,
+    children,
+    label,
+    id,
+    ref,
+    "aria-label": ariaLabel,
+    animation = "pop",
+    ...rest
+  } = props;
+  const generatedId = useId();
+  const context = useRadioGroupContext();
+  const controlId = id ?? generatedId;
+  const checked = context?.value === value;
+  const disabled = disabledProp ?? context?.disabled;
+  const required = requiredProp ?? context?.required;
+  const appearance = appearanceProp ?? context?.appearance;
+  const size = sizeProp ?? context?.size;
+  const labelContent = label ?? children;
+  const hasVisibleLabel =
+    labelContent !== undefined && labelContent !== null && labelContent !== false;
+  const motionPreset = radioGroupAnimationPresets[animation];
+
+  return (
+    <label
+      className={cn(radioGroupItemVariants({ size }), rootClassName, className)}
+      data-disabled={disabled ? "true" : undefined}
+      data-state={checked ? "checked" : "unchecked"}
+      htmlFor={controlId}
+    >
+      <input
+        ref={ref}
+        id={controlId}
+        type="radio"
+        data-slot="radio-group-item"
+        className="peer sr-only"
+        name={context?.name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        required={required}
+        aria-label={ariaLabel ?? (hasVisibleLabel ? undefined : value)}
+        onChange={(event) => {
+          if (event.currentTarget.checked) {
+            context?.onValueChange(value);
+          }
+        }}
+        {...rest}
+      />
+      <span
+        aria-hidden="true"
+        className={cn(
+          radioGroupControlVariants({ appearance, size }),
+          controlClassName,
+        )}
+        data-slot="radio-group-control"
+      >
+        {checked && (
+          <motion.span
+            className={cn(
+              radioGroupIndicatorVariants({ size }),
+              "opacity-100",
+              indicatorClassName,
+            )}
+            data-slot="radio-group-indicator"
+            initial={motionPreset.initial}
+            animate={motionPreset.animate}
+            transition={motionPreset.transition}
+          />
+        )}
+      </span>
+      {hasVisibleLabel && (
+        <span className="min-w-0 leading-6" data-slot="radio-group-label">
+          {labelContent}
+        </span>
+      )}
+    </label>
+  );
+}
+
+RadioGroupItemAnimated.displayName = "RadioGroupItem";

package/src/ui/radio-group/animated/types.ts

@@ -0,0 +1,13 @@
+import type { RadioGroupItemProps, RadioGroupProps } from "../types";
+import type { radioGroupAnimationPresets } from "./animations";
+
+export type RadioGroupAnimation = keyof typeof radioGroupAnimationPresets;
+export type RadioGroupAnimationPresets = typeof radioGroupAnimationPresets;
+
+export type RadioGroupAnimatedProps = RadioGroupProps & {
+  animation?: RadioGroupAnimation;
+};
+
+export type RadioGroupItemAnimatedProps = RadioGroupItemProps & {
+  animation?: RadioGroupAnimation;
+};

package/src/ui/radio-group/index.ts

@@ -0,0 +1,19 @@
+"use client";
+
+export { RadioGroup, RadioGroupItem } from "./radio-group";
+export type {
+  RadioGroupAppearance,
+  RadioGroupControlVariantProps,
+  RadioGroupIndicatorVariantProps,
+  RadioGroupItemProps,
+  RadioGroupItemVariantProps,
+  RadioGroupProps,
+  RadioGroupRootVariantProps,
+  RadioGroupSize,
+} from "./types";
+export {
+  radioGroupControlVariants,
+  radioGroupIndicatorVariants,
+  radioGroupItemVariants,
+  radioGroupRootVariants,
+} from "./variants";

package/src/ui/radio-group/radio-group-context.ts

@@ -0,0 +1,23 @@
+"use client";
+
+import { createContext, useContext } from "react";
+
+import type { RadioGroupAppearance, RadioGroupSize } from "./types";
+
+export type RadioGroupContextValue = {
+  value: string | undefined;
+  name: string;
+  disabled?: boolean;
+  required?: boolean;
+  appearance?: RadioGroupAppearance;
+  size?: RadioGroupSize;
+  onValueChange: (value: string) => void;
+};
+
+export const RadioGroupContext = createContext<RadioGroupContextValue | null>(
+  null,
+);
+
+export function useRadioGroupContext() {
+  return useContext(RadioGroupContext);
+}