@nationaldesignstudio/react 0.2.0 → 0.5.0

package/src/components/atoms/popover/popover.tsx

@@ -0,0 +1,488 @@
+"use client";
+
+import { Popover as BasePopover } from "@base-ui-components/react/popover";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { cn } from "@/lib/utils";
+import {
+	FloatingArrowSvg,
+	floatingArrowVariants,
+} from "../../shared/floating-arrow";
+
+/**
+ * Popover popup variants
+ *
+ * Uses semantic overlay tokens for themeable styling:
+ * - color.overlay.background - Light background
+ * - color.overlay.border - Subtle border
+ * - color.overlay.text - Primary text
+ * - surface.overlay.radius - Rounded corners
+ * - spatial.component.overlay.padding/gap - Consistent spacing
+ */
+const popoverPopupVariants = tv({
+	base: [
+		// Layout - uses component overlay tokens
+		"p-spatial-component-overlay-padding",
+		// Background - uses overlay background token
+		"bg-overlay-background",
+		// Border - uses overlay border token
+		"border border-overlay-border",
+		// Text - uses overlay text token
+		"text-overlay-text",
+		// Border radius - uses surface overlay token
+		"rounded-surface-overlay",
+		// Shadow for elevation
+		"shadow-lg",
+		// Allow arrow to extend outside popup bounds
+		"overflow-visible",
+		// Animation
+		"origin-[var(--transform-origin)]",
+		"transition-[transform,scale,opacity] duration-150",
+		"data-[starting-style]:scale-95 data-[starting-style]:opacity-0",
+		"data-[ending-style]:scale-95 data-[ending-style]:opacity-0",
+		// Ensure it's above other content (higher than backdrop z-40)
+		"z-50",
+		// Max width for reasonable content display
+		"max-w-[320px]",
+	],
+	variants: {
+		variant: {
+			default: "",
+			// Future variants can be added here
+		},
+	},
+	defaultVariants: {
+		variant: "default",
+	},
+});
+
+/**
+ * Popover arrow variants - uses shared floating arrow variants
+ */
+const popoverArrowVariants = floatingArrowVariants;
+
+// ============================================================================
+// Popover Root
+// ============================================================================
+
+export interface PopoverRootProps extends BasePopover.Root.Props {
+	children: React.ReactNode;
+}
+
+/**
+ * Popover Root
+ *
+ * Groups all popover parts. Does not render an element.
+ */
+const PopoverRoot = ({ children, ...props }: PopoverRootProps) => {
+	return <BasePopover.Root {...props}>{children}</BasePopover.Root>;
+};
+
+// ============================================================================
+// Popover Trigger
+// ============================================================================
+
+export interface PopoverTriggerProps
+	extends React.ComponentProps<typeof BasePopover.Trigger> {
+	className?: string;
+}
+
+/**
+ * Popover Trigger
+ *
+ * The element that triggers the popover on click.
+ * Renders as the child element with popover behavior attached.
+ * When children is a single React element, uses `render` prop to avoid wrapper element.
+ */
+const PopoverTrigger = React.forwardRef<HTMLButtonElement, PopoverTriggerProps>(
+	({ className, children, ...props }, ref) => {
+		// If children is a single React element, use render prop to avoid wrapper
+		const isSingleElement = React.isValidElement(children);
+
+		if (isSingleElement) {
+			return (
+				<BasePopover.Trigger
+					ref={ref}
+					className={className}
+					render={children}
+					{...props}
+				/>
+			);
+		}
+
+		return (
+			<BasePopover.Trigger ref={ref} className={className} {...props}>
+				{children}
+			</BasePopover.Trigger>
+		);
+	},
+);
+PopoverTrigger.displayName = "PopoverTrigger";
+
+// ============================================================================
+// Popover Portal
+// ============================================================================
+
+export interface PopoverPortalProps extends BasePopover.Portal.Props {
+	children: React.ReactNode;
+}
+
+/**
+ * Popover Portal
+ *
+ * Renders the popover popup in a portal outside the DOM hierarchy.
+ */
+const PopoverPortal = ({ children, ...props }: PopoverPortalProps) => {
+	return <BasePopover.Portal {...props}>{children}</BasePopover.Portal>;
+};
+
+// ============================================================================
+// Popover Backdrop
+// ============================================================================
+
+export interface PopoverBackdropProps
+	extends Omit<React.ComponentProps<typeof BasePopover.Backdrop>, "className"> {
+	className?: string;
+}
+
+/**
+ * Popover Backdrop
+ *
+ * Optional backdrop element that can be used to close the popover on click.
+ */
+const PopoverBackdrop = React.forwardRef<HTMLDivElement, PopoverBackdropProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<BasePopover.Backdrop
+				ref={ref}
+				className={cn("fixed inset-0 z-40", className)}
+				{...props}
+			/>
+		);
+	},
+);
+PopoverBackdrop.displayName = "PopoverBackdrop";
+
+// ============================================================================
+// Popover Positioner
+// ============================================================================
+
+export interface PopoverPositionerProps
+	extends Omit<
+		React.ComponentProps<typeof BasePopover.Positioner>,
+		"className"
+	> {
+	className?: string;
+}
+
+/**
+ * Popover Positioner
+ *
+ * Positions the popover popup relative to the trigger.
+ */
+const PopoverPositioner = React.forwardRef<
+	HTMLDivElement,
+	PopoverPositionerProps
+>(({ className, side = "bottom", sideOffset = 8, ...props }, ref) => {
+	return (
+		<BasePopover.Positioner
+			ref={ref}
+			side={side}
+			sideOffset={sideOffset}
+			className={cn("z-50", className)}
+			{...props}
+		/>
+	);
+});
+PopoverPositioner.displayName = "PopoverPositioner";
+
+// ============================================================================
+// Popover Popup
+// ============================================================================
+
+export interface PopoverPopupProps
+	extends Omit<React.ComponentProps<typeof BasePopover.Popup>, "className">,
+		VariantProps<typeof popoverPopupVariants> {
+	className?: string;
+}
+
+/**
+ * Popover Popup
+ *
+ * The popover content container with styled appearance.
+ */
+const PopoverPopup = React.forwardRef<HTMLDivElement, PopoverPopupProps>(
+	({ className, variant, ...props }, ref) => {
+		return (
+			<BasePopover.Popup
+				ref={ref}
+				className={cn(popoverPopupVariants({ variant }), className)}
+				{...props}
+			/>
+		);
+	},
+);
+PopoverPopup.displayName = "PopoverPopup";
+
+// ============================================================================
+// Popover Arrow
+// ============================================================================
+
+export interface PopoverArrowProps
+	extends Omit<React.ComponentProps<typeof BasePopover.Arrow>, "className"> {
+	className?: string;
+}
+
+/**
+ * Popover Arrow
+ *
+ * Visual pointer element for the popover.
+ * Uses shared FloatingArrowSvg with overlay color tokens for fill and border.
+ */
+const PopoverArrow = React.forwardRef<HTMLDivElement, PopoverArrowProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<BasePopover.Arrow
+				ref={ref}
+				className={cn(popoverArrowVariants(), className)}
+				{...props}
+			>
+				<FloatingArrowSvg
+					fillClassName="fill-overlay-background"
+					borderClassName="fill-overlay-border"
+				/>
+			</BasePopover.Arrow>
+		);
+	},
+);
+PopoverArrow.displayName = "PopoverArrow";
+
+// ============================================================================
+// Popover Title
+// ============================================================================
+
+export interface PopoverTitleProps
+	extends Omit<React.ComponentProps<typeof BasePopover.Title>, "className"> {
+	className?: string;
+}
+
+/**
+ * Popover Title
+ *
+ * Title element for the popover content.
+ */
+const PopoverTitle = React.forwardRef<HTMLHeadingElement, PopoverTitleProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<BasePopover.Title
+				ref={ref}
+				className={cn("typography-body-md-md font-semibold", className)}
+				{...props}
+			/>
+		);
+	},
+);
+PopoverTitle.displayName = "PopoverTitle";
+
+// ============================================================================
+// Popover Description
+// ============================================================================
+
+export interface PopoverDescriptionProps
+	extends Omit<
+		React.ComponentProps<typeof BasePopover.Description>,
+		"className"
+	> {
+	className?: string;
+}
+
+/**
+ * Popover Description
+ *
+ * Description element for the popover content.
+ */
+const PopoverDescription = React.forwardRef<
+	HTMLParagraphElement,
+	PopoverDescriptionProps
+>(({ className, ...props }, ref) => {
+	return (
+		<BasePopover.Description
+			ref={ref}
+			className={cn(
+				"typography-body-sm-md text-overlay-text-muted mt-8",
+				className,
+			)}
+			{...props}
+		/>
+	);
+});
+PopoverDescription.displayName = "PopoverDescription";
+
+// ============================================================================
+// Popover Close
+// ============================================================================
+
+export interface PopoverCloseProps
+	extends Omit<React.ComponentProps<typeof BasePopover.Close>, "className"> {
+	className?: string;
+}
+
+/**
+ * Popover Close
+ *
+ * Close button for the popover.
+ */
+const PopoverClose = React.forwardRef<HTMLButtonElement, PopoverCloseProps>(
+	({ className, ...props }, ref) => {
+		return (
+			<BasePopover.Close
+				ref={ref}
+				className={cn(
+					"absolute right-8 top-8 rounded-surface-ui-small p-4",
+					"text-overlay-text-muted hover:text-overlay-text",
+					"hover:bg-bg-section focus:outline-none focus-visible:ring-2 focus-visible:ring-border-focus",
+					className,
+				)}
+				{...props}
+			/>
+		);
+	},
+);
+PopoverClose.displayName = "PopoverClose";
+
+// ============================================================================
+// Simple Popover Component
+// ============================================================================
+
+export interface PopoverProps {
+	/** The content to show in the popover */
+	children: React.ReactNode;
+	/** The element that triggers the popover */
+	trigger: React.ReactNode;
+	/** Title for the popover (optional) */
+	title?: React.ReactNode;
+	/** Side of the trigger to show the popover */
+	side?: "top" | "bottom" | "left" | "right";
+	/** Offset from the trigger */
+	sideOffset?: number;
+	/** Alignment along the side */
+	align?: "start" | "center" | "end";
+	/** Whether to show an arrow */
+	showArrow?: boolean;
+	/** Whether to show a close button */
+	showClose?: boolean;
+	/** Controlled open state */
+	open?: boolean;
+	/** Default open state */
+	defaultOpen?: boolean;
+	/** Callback when open state changes */
+	onOpenChange?: (open: boolean) => void;
+	/** Additional className for the popup */
+	className?: string;
+}
+
+/**
+ * Popover
+ *
+ * A simple, pre-composed popover component for common use cases.
+ * For more complex needs, use the compound components directly.
+ *
+ * @example
+ * ```tsx
+ * <Popover
+ *   trigger={<Button>Click me</Button>}
+ *   title="Popover Title"
+ * >
+ *   <p>This is the popover content.</p>
+ * </Popover>
+ * ```
+ */
+const Popover = ({
+	children,
+	trigger,
+	title,
+	side = "bottom",
+	sideOffset = 8,
+	align = "center",
+	showArrow = true,
+	showClose = false,
+	open,
+	defaultOpen,
+	onOpenChange,
+	className,
+}: PopoverProps) => {
+	return (
+		<PopoverRoot
+			open={open}
+			defaultOpen={defaultOpen}
+			onOpenChange={onOpenChange}
+		>
+			<PopoverTrigger>{trigger}</PopoverTrigger>
+			<PopoverPortal>
+				<PopoverPositioner side={side} sideOffset={sideOffset} align={align}>
+					<PopoverPopup className={className}>
+						{showArrow && <PopoverArrow />}
+						{showClose && (
+							<PopoverClose>
+								<svg
+									width="12"
+									height="12"
+									viewBox="0 0 12 12"
+									fill="none"
+									aria-hidden="true"
+								>
+									<path
+										d="M1.5 1.5L10.5 10.5M1.5 10.5L10.5 1.5"
+										stroke="currentColor"
+										strokeWidth="1.5"
+										strokeLinecap="round"
+									/>
+								</svg>
+								<span className="sr-only">Close</span>
+							</PopoverClose>
+						)}
+						{title && <PopoverTitle>{title}</PopoverTitle>}
+						{title ? (
+							<PopoverDescription>{children}</PopoverDescription>
+						) : (
+							children
+						)}
+					</PopoverPopup>
+				</PopoverPositioner>
+			</PopoverPortal>
+		</PopoverRoot>
+	);
+};
+
+// ============================================================================
+// Compound Component Export
+// ============================================================================
+
+export const PopoverParts = Object.assign(PopoverRoot, {
+	Root: PopoverRoot,
+	Trigger: PopoverTrigger,
+	Portal: PopoverPortal,
+	Backdrop: PopoverBackdrop,
+	Positioner: PopoverPositioner,
+	Popup: PopoverPopup,
+	Arrow: PopoverArrow,
+	Title: PopoverTitle,
+	Description: PopoverDescription,
+	Close: PopoverClose,
+});
+
+export {
+	Popover,
+	PopoverRoot,
+	PopoverTrigger,
+	PopoverPortal,
+	PopoverBackdrop,
+	PopoverPositioner,
+	PopoverPopup,
+	PopoverArrow,
+	PopoverTitle,
+	PopoverDescription,
+	PopoverClose,
+	popoverPopupVariants,
+	popoverArrowVariants,
+};

package/src/components/atoms/select/index.ts

@@ -0,0 +1,18 @@
+export {
+	Select,
+	SelectGroup,
+	SelectGroupLabel,
+	type SelectGroupLabelProps,
+	type SelectGroupProps,
+	SelectOption,
+	type SelectOptionProps,
+	SelectPopup,
+	type SelectPopupProps,
+	type SelectProps,
+	SelectRoot,
+	SelectTrigger,
+	type SelectTriggerProps,
+	selectOptionVariants,
+	selectPopupVariants,
+	selectTriggerVariants,
+} from "./select";