@nationaldesignstudio/react 0.0.19 → 0.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nationaldesignstudio/react",
-	"version": "0.0.19",
+	"version": "0.1.0",
 	"type": "module",
 	"sideEffects": [
 		"*.css"

package/src/components/atoms/accordion/accordion.test.tsx

@@ -0,0 +1,233 @@
+import { describe, expect, test } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Accordion, AccordionItem } from "./accordion";
+
+describe("Accordion", () => {
+	describe("Rendering", () => {
+		test("renders accordion with items", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toBeInTheDocument();
+			await expect
+				.element(page.getByRole("button", { name: "Question 2" }))
+				.toBeInTheDocument();
+		});
+
+		test("renders with default expanded item", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			// The first item should be expanded (has data-open attribute)
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toHaveAttribute("data-open");
+		});
+
+		test("renders with multiple default expanded items", async () => {
+			render(
+				<Accordion allowMultiple defaultExpanded={["item-1", "item-2"]}>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toHaveAttribute("data-open");
+			await expect
+				.element(page.getByRole("button", { name: "Question 2" }))
+				.toHaveAttribute("data-open");
+		});
+	});
+
+	describe("Keyboard Navigation", () => {
+		test("items are focusable via Tab", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			await userEvent.keyboard("{Tab}");
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toHaveFocus();
+		});
+
+		test("Enter key expands/collapses item", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			trigger.element().focus();
+			await userEvent.keyboard("{Enter}");
+			await expect.element(trigger).toHaveAttribute("data-open");
+		});
+
+		test("Space key expands/collapses item", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			trigger.element().focus();
+			await userEvent.keyboard(" ");
+			await expect.element(trigger).toHaveAttribute("data-open");
+		});
+	});
+
+	describe("Click Interactions", () => {
+		test("clicking trigger expands item", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			await trigger.click();
+			await expect.element(trigger).toHaveAttribute("data-open");
+		});
+
+		test("clicking expanded trigger collapses item", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			await expect.element(trigger).toHaveAttribute("data-open");
+			await trigger.click();
+			await expect.element(trigger).not.toHaveAttribute("data-open");
+		});
+
+		test("single mode collapses other items when opening new one", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger1 = page.getByRole("button", { name: "Question 1" });
+			const trigger2 = page.getByRole("button", { name: "Question 2" });
+
+			await expect.element(trigger1).toHaveAttribute("data-open");
+			await trigger2.click();
+			await expect.element(trigger2).toHaveAttribute("data-open");
+			await expect.element(trigger1).not.toHaveAttribute("data-open");
+		});
+
+		test("multiple mode allows multiple items open", async () => {
+			render(
+				<Accordion allowMultiple defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger1 = page.getByRole("button", { name: "Question 1" });
+			const trigger2 = page.getByRole("button", { name: "Question 2" });
+
+			await expect.element(trigger1).toHaveAttribute("data-open");
+			await trigger2.click();
+			await expect.element(trigger1).toHaveAttribute("data-open");
+			await expect.element(trigger2).toHaveAttribute("data-open");
+		});
+	});
+
+	describe("Variants", () => {
+		test("applies light variant by default", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			// Light variant has gray-800 text
+			await expect.element(trigger).toHaveClass(/text-gray-800/);
+		});
+
+		test("applies dark variant classes", async () => {
+			render(
+				<Accordion variant="dark">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			// Dark variant has gray-100 text
+			await expect.element(trigger).toHaveClass(/text-gray-100/);
+		});
+	});
+
+	describe("Content", () => {
+		test("displays title text in trigger", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Custom Title">
+						Content here
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect.element(page.getByText("Custom Title")).toBeInTheDocument();
+		});
+
+		test("displays content when expanded", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer content here
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect
+				.element(page.getByText("Answer content here"))
+				.toBeInTheDocument();
+		});
+	});
+});

package/src/components/atoms/accordion/accordion.tsx

@@ -18,7 +18,7 @@ const accordionVariants = tv({
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		variant: "light",
 	},
 });
 
@@ -31,7 +31,7 @@ const accordionItemVariants = tv({
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		variant: "light",
 	},
 });
 
@@ -48,7 +48,7 @@ const accordionTriggerVariants = tv({
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		variant: "light",
 	},
 });
 
@@ -62,7 +62,7 @@ const accordionPanelVariants = tv({
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		variant: "light",
 	},
 });
 
@@ -73,7 +73,7 @@ const accordionPanelVariants = tv({
 const AccordionContext = React.createContext<{
 	variant: "dark" | "light";
 }>({
-	variant: "dark",
+	variant: "light",
 });
 
 // =============================================================================
@@ -100,8 +100,8 @@ export interface AccordionProps
  * Built on Base UI's Accordion primitive.
  *
  * Variants:
- * - dark: Dark theme styling (default)
- * - light: Light theme styling
+ * - light: Light theme styling (default)
+ * - dark: Dark theme styling
  *
  * @example
  * ```tsx
@@ -134,7 +134,7 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
 		}, [defaultExpanded]);
 
 		return (
-			<AccordionContext.Provider value={{ variant: variant ?? "dark" }}>
+			<AccordionContext.Provider value={{ variant }}>
 				<BaseAccordion.Root
 					ref={ref}
 					className={accordionVariants({ variant, class: className })}

package/src/components/atoms/background/background.test.tsx

@@ -0,0 +1,213 @@
+import { describe, expect, test } from "vitest";
+import { page } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import {
+	Background,
+	BackgroundGradient,
+	BackgroundImage,
+	BackgroundOverlay,
+	BackgroundVideo,
+} from "./background";
+
+describe("Background", () => {
+	describe("Background Container", () => {
+		test("renders as a div with absolute positioning", async () => {
+			render(<Background data-testid="bg-container">Content</Background>);
+			const container = page.getByTestId("bg-container");
+			await expect.element(container).toBeInTheDocument();
+			await expect.element(container).toHaveClass(/absolute/);
+			await expect.element(container).toHaveClass(/inset-0/);
+		});
+
+		test("has aria-hidden attribute", async () => {
+			render(<Background data-testid="bg-container" />);
+			await expect
+				.element(page.getByTestId("bg-container"))
+				.toHaveAttribute("aria-hidden", "true");
+		});
+
+		test("accepts custom className", async () => {
+			render(<Background data-testid="bg" className="custom-class" />);
+			await expect.element(page.getByTestId("bg")).toHaveClass(/custom-class/);
+		});
+	});
+
+	describe("BackgroundImage", () => {
+		test("renders an img element with src", async () => {
+			render(<BackgroundImage src="/test-image.jpg" data-testid="bg-img" />);
+			const img = page.getByTestId("bg-img");
+			await expect.element(img).toBeInTheDocument();
+			await expect.element(img).toHaveAttribute("src", "/test-image.jpg");
+		});
+
+		test("has object-cover class for proper fitting", async () => {
+			render(<BackgroundImage src="/test.jpg" data-testid="bg-img" />);
+			await expect
+				.element(page.getByTestId("bg-img"))
+				.toHaveClass(/object-cover/);
+		});
+
+		test("sets default alt to empty string for decorative images", async () => {
+			render(<BackgroundImage src="/test.jpg" data-testid="bg-img" />);
+			await expect
+				.element(page.getByTestId("bg-img"))
+				.toHaveAttribute("alt", "");
+		});
+
+		test("accepts custom alt text", async () => {
+			render(
+				<BackgroundImage
+					src="/test.jpg"
+					alt="Custom alt text"
+					data-testid="bg-img"
+				/>,
+			);
+			await expect
+				.element(page.getByTestId("bg-img"))
+				.toHaveAttribute("alt", "Custom alt text");
+		});
+
+		test("applies custom position via style", async () => {
+			render(
+				<BackgroundImage
+					src="/test.jpg"
+					position="top left"
+					data-testid="bg-img"
+				/>,
+			);
+			const img = page.getByTestId("bg-img");
+			// Check the style attribute contains the position
+			await expect.element(img).toHaveStyle({ objectPosition: "top left" });
+		});
+
+		test("supports render prop for custom element", async () => {
+			render(
+				<BackgroundImage
+					src="/test.jpg"
+					// biome-ignore lint/a11y/useAltText: Test case for custom element
+					render={<img className="custom-img-class" />}
+					data-testid="bg-img"
+				/>,
+			);
+			await expect
+				.element(page.getByTestId("bg-img"))
+				.toHaveClass(/custom-img-class/);
+		});
+	});
+
+	describe("BackgroundVideo", () => {
+		test("renders a video element", async () => {
+			render(<BackgroundVideo src="/test-video.mp4" data-testid="bg-video" />);
+			const video = page.getByTestId("bg-video");
+			await expect.element(video).toBeInTheDocument();
+		});
+
+		test("has autoplay, loop, and muted by default", async () => {
+			render(<BackgroundVideo src="/test.mp4" data-testid="bg-video" />);
+			const video = page.getByTestId("bg-video");
+			await expect.element(video).toHaveAttribute("autoplay");
+			await expect.element(video).toHaveAttribute("loop");
+			await expect.element(video).toHaveAttribute("muted");
+		});
+
+		test("has object-cover class", async () => {
+			render(<BackgroundVideo src="/test.mp4" data-testid="bg-video" />);
+			await expect
+				.element(page.getByTestId("bg-video"))
+				.toHaveClass(/object-cover/);
+		});
+
+		test("accepts poster prop", async () => {
+			render(
+				<BackgroundVideo
+					src="/test.mp4"
+					poster="/poster.jpg"
+					data-testid="bg-video"
+				/>,
+			);
+			await expect
+				.element(page.getByTestId("bg-video"))
+				.toHaveAttribute("poster", "/poster.jpg");
+		});
+	});
+
+	describe("BackgroundOverlay", () => {
+		test("renders with default opacity", async () => {
+			render(<BackgroundOverlay data-testid="bg-overlay" />);
+			const overlay = page.getByTestId("bg-overlay");
+			await expect.element(overlay).toBeInTheDocument();
+			await expect.element(overlay).toHaveStyle({ opacity: "0.4" });
+		});
+
+		test("accepts custom opacity", async () => {
+			render(<BackgroundOverlay opacity={0.7} data-testid="bg-overlay" />);
+			await expect
+				.element(page.getByTestId("bg-overlay"))
+				.toHaveStyle({ opacity: "0.7" });
+		});
+
+		test("has aria-hidden attribute", async () => {
+			render(<BackgroundOverlay data-testid="bg-overlay" />);
+			await expect
+				.element(page.getByTestId("bg-overlay"))
+				.toHaveAttribute("aria-hidden", "true");
+		});
+	});
+
+	describe("BackgroundGradient", () => {
+		test("renders with default gradient direction", async () => {
+			render(<BackgroundGradient data-testid="bg-gradient" />);
+			const gradient = page.getByTestId("bg-gradient");
+			await expect.element(gradient).toBeInTheDocument();
+		});
+
+		test("has aria-hidden attribute", async () => {
+			render(<BackgroundGradient data-testid="bg-gradient" />);
+			await expect
+				.element(page.getByTestId("bg-gradient"))
+				.toHaveAttribute("aria-hidden", "true");
+		});
+
+		test("accepts custom gradient via gradient prop", async () => {
+			render(
+				<BackgroundGradient
+					gradient="linear-gradient(45deg, red, blue)"
+					data-testid="bg-gradient"
+				/>,
+			);
+			await expect
+				.element(page.getByTestId("bg-gradient"))
+				.toHaveStyle({ backgroundImage: "linear-gradient(45deg, red, blue)" });
+		});
+	});
+
+	describe("Compound Component", () => {
+		test("Background.Image is accessible via dot notation", async () => {
+			render(
+				<Background data-testid="bg-container">
+					<Background.Image src="/test.jpg" data-testid="bg-img" />
+				</Background>,
+			);
+			await expect
+				.element(page.getByTestId("bg-container"))
+				.toBeInTheDocument();
+			await expect.element(page.getByTestId("bg-img")).toBeInTheDocument();
+		});
+
+		test("can compose multiple background layers", async () => {
+			render(
+				<Background data-testid="bg-container">
+					<Background.Image src="/test.jpg" data-testid="bg-img" />
+					<Background.Overlay data-testid="bg-overlay" />
+					<Background.Gradient data-testid="bg-gradient" />
+				</Background>,
+			);
+			await expect
+				.element(page.getByTestId("bg-container"))
+				.toBeInTheDocument();
+			await expect.element(page.getByTestId("bg-img")).toBeInTheDocument();
+			await expect.element(page.getByTestId("bg-overlay")).toBeInTheDocument();
+			await expect.element(page.getByTestId("bg-gradient")).toBeInTheDocument();
+		});
+	});
+});

package/src/components/atoms/background/background.tsx

@@ -1,3 +1,6 @@
+"use client";
+
+import { useRender } from "@base-ui-components/react/use-render";
 import * as React from "react";
 import { tv } from "tailwind-variants";
 
@@ -56,28 +59,59 @@ export interface BackgroundImageProps
 	 * Object position (default: "center")
 	 */
 	position?: string;
+	/**
+	 * Custom render prop for element composition.
+	 * Accepts a React element or render function.
+	 * @example
+	 * ```tsx
+	 * // Element pattern
+	 * <BackgroundImage render={<img className="custom" />} src="/bg.jpg" />
+	 *
+	 * // Callback pattern
+	 * <BackgroundImage render={(props) => <img {...props} />} src="/bg.jpg" />
+	 * ```
+	 */
+	render?:
+		| React.ReactElement
+		| ((
+				props: React.ImgHTMLAttributes<HTMLImageElement>,
+		  ) => React.ReactElement);
 }
 
 /**
  * Background image layer using an actual img element with object-cover.
  * Supports native lazy loading, srcset, and better accessibility.
+ * Supports render prop for element composition.
  */
 const BackgroundImage = React.forwardRef<
 	HTMLImageElement,
 	BackgroundImageProps
->(({ className, src, position = "center", alt = "", style, ...props }, ref) => (
-	<img
-		ref={ref}
-		src={src}
-		alt={alt}
-		className={backgroundImageVariants({ class: className })}
-		style={{
-			objectPosition: position,
-			...style,
-		}}
-		{...props}
-	/>
-));
+>(
+	(
+		{ className, src, position = "center", alt = "", style, render, ...props },
+		ref,
+	) => {
+		const mergedProps = {
+			src,
+			alt,
+			className: backgroundImageVariants({ class: className }),
+			style: {
+				objectPosition: position,
+				...style,
+			},
+			...props,
+		};
+
+		const element = useRender({
+			// biome-ignore lint/a11y/useAltText: alt is provided via mergedProps
+			render: render ?? <img />,
+			ref,
+			props: mergedProps,
+		});
+
+		return element;
+	},
+);
 BackgroundImage.displayName = "Background.Image";
 
 // =============================================================================
@@ -102,10 +136,23 @@ export interface BackgroundVideoProps
 	 * Poster image URL shown before video loads
 	 */
 	poster?: string;
+	/**
+	 * Custom render prop for element composition.
+	 * @example
+	 * ```tsx
+	 * <BackgroundVideo render={<video className="custom" />} src="/bg.mp4" />
+	 * ```
+	 */
+	render?:
+		| React.ReactElement
+		| ((
+				props: React.VideoHTMLAttributes<HTMLVideoElement>,
+		  ) => React.ReactElement);
 }
 
 /**
  * Background video layer using HTML5 video element.
+ * Supports render prop for element composition.
  */
 const BackgroundVideo = React.forwardRef<
 	HTMLVideoElement,
@@ -121,23 +168,34 @@ const BackgroundVideo = React.forwardRef<
 			loop = true,
 			muted = true,
 			playsInline = true,
+			render,
 			...props
 		},
 		ref,
-	) => (
-		<video
-			ref={ref}
-			autoPlay={autoPlay}
-			loop={loop}
-			muted={muted}
-			playsInline={playsInline}
-			poster={poster}
-			className={backgroundVideoVariants({ class: className })}
-			{...props}
-		>
-			<source src={src} type={type} />
-		</video>
-	),
+	) => {
+		const mergedProps = {
+			autoPlay,
+			loop,
+			muted,
+			playsInline,
+			poster,
+			className: backgroundVideoVariants({ class: className }),
+			...props,
+		};
+
+		const element = useRender({
+			render: render ?? (
+				// biome-ignore lint/a11y/useMediaCaption: Background videos are decorative and shouldn't have captions
+				<video>
+					<source src={src} type={type} />
+				</video>
+			),
+			ref,
+			props: mergedProps,
+		});
+
+		return element;
+	},
 );
 BackgroundVideo.displayName = "Background.Video";
 

package/src/components/atoms/button/button.tsx

@@ -1,3 +1,5 @@
+"use client";
+
 import {
 	Button as BaseButton,
 	type ButtonProps as BaseButtonProps,
@@ -159,6 +161,11 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 		const themeStyles = buttonThemeToStyleVars(theme);
 		const combinedStyles = hasTheme ? { ...themeStyles, ...style } : style;
 
+		// Resolve actual values for data attributes
+		const resolvedVariant = effectiveVariant ?? "solid";
+		const resolvedColorScheme = colorScheme ?? "dark";
+		const resolvedSize = size ?? "default";
+
 		return (
 			<BaseButton
 				className={buttonVariants({
@@ -171,6 +178,9 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				render={render}
 				nativeButton={isNativeButton}
 				style={combinedStyles}
+				data-variant={resolvedVariant}
+				data-color-scheme={resolvedColorScheme}
+				data-size={resolvedSize}
 				{...props}
 			/>
 		);