@nationaldesignstudio/react 0.2.0 → 0.3.0

package/package.json

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

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

@@ -1,5 +1,6 @@
 "use client";
 
+import { useRender } from "@base-ui-components/react/use-render";
 import * as React from "react";
 import { tv } from "tailwind-variants";
 
@@ -49,7 +50,8 @@ const backgroundImageVariants = tv({
 });
 
 export interface BackgroundImageProps
-	extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
+	extends useRender.ComponentProps<"img">,
+		Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src" | "render"> {
 	/**
 	 * URL for the background image
 	 */
@@ -58,23 +60,6 @@ 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);
 }
 
 /**
@@ -82,45 +67,32 @@ export interface BackgroundImageProps
  * 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, render, ...props },
-		ref,
-	) => {
-		const imgClassName = backgroundImageVariants({ class: className });
-		const imgStyle = { objectPosition: position, ...style };
-		const imgProps = {
+function BackgroundImage(props: BackgroundImageProps) {
+	const {
+		className,
+		src,
+		position = "center",
+		alt = "",
+		style,
+		render,
+		...otherProps
+	} = props;
+
+	const imgClassName = backgroundImageVariants({ class: className });
+	const imgStyle = { objectPosition: position, ...style };
+
+	return useRender({
+		render,
+		props: {
 			src,
 			alt,
 			className: imgClassName,
 			style: imgStyle,
-			...props,
-		};
-
-		// Handle render prop (element or function)
-		if (render) {
-			if (typeof render === "function") {
-				return render({
-					ref,
-					...imgProps,
-				} as React.ImgHTMLAttributes<HTMLImageElement>);
-			}
-			// Clone the render element with merged props
-			return React.cloneElement(render, {
-				ref,
-				...imgProps,
-				...(render.props as Record<string, unknown>),
-			});
-		}
-
-		// Default: render as img
-		// biome-ignore lint/a11y/useAltText: alt is provided via imgProps spread
-		return <img ref={ref} {...imgProps} />;
-	},
-);
+			...otherProps,
+		},
+		defaultTagName: "img",
+	});
+}
 BackgroundImage.displayName = "Background.Image";
 
 // =============================================================================
@@ -132,7 +104,11 @@ const backgroundVideoVariants = tv({
 });
 
 export interface BackgroundVideoProps
-	extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children"> {
+	extends useRender.ComponentProps<"video">,
+		Omit<
+			React.VideoHTMLAttributes<HTMLVideoElement>,
+			"children" | "render" | "src"
+		> {
 	/**
 	 * URL for the video source
 	 */
@@ -145,77 +121,63 @@ 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,
-	BackgroundVideoProps
->(
-	(
-		{
-			className,
-			src,
-			type,
-			poster,
-			autoPlay = true,
-			loop = true,
-			muted = true,
-			playsInline = true,
-			render,
-			...props
-		},
-		ref,
-	) => {
-		const videoClassName = backgroundVideoVariants({ class: className });
-		const videoProps = {
+function BackgroundVideo(props: BackgroundVideoProps) {
+	const {
+		className,
+		src,
+		type,
+		poster,
+		autoPlay = true,
+		loop = true,
+		muted = true,
+		playsInline = true,
+		render,
+		children,
+		...otherProps
+	} = props;
+
+	const videoClassName = backgroundVideoVariants({ class: className });
+
+	// useRender must be called unconditionally
+	const rendered = useRender({
+		render,
+		props: {
 			autoPlay,
 			loop,
 			muted,
 			playsInline,
 			poster,
 			className: videoClassName,
-			...props,
-		};
-
-		// Handle render prop (element or function)
-		if (render) {
-			if (typeof render === "function") {
-				return render({
-					ref,
-					...videoProps,
-				} as React.VideoHTMLAttributes<HTMLVideoElement>);
-			}
-			// Clone the render element with merged props
-			return React.cloneElement(render, {
-				...videoProps,
-				...(render.props as Record<string, unknown>),
-			});
-		}
-
-		// Default: render as video with source
+			...otherProps,
+		},
+		defaultTagName: "video",
+	});
+
+	// If no render prop, return video with source child
+	if (!render) {
 		return (
-			<video ref={ref} {...videoProps}>
+			<video
+				autoPlay={autoPlay}
+				loop={loop}
+				muted={muted}
+				playsInline={playsInline}
+				poster={poster}
+				className={videoClassName}
+				{...otherProps}
+			>
 				<source src={src} type={type} />
 			</video>
 		);
-	},
-);
+	}
+
+	return rendered;
+}
 BackgroundVideo.displayName = "Background.Video";
 
 // =============================================================================

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

@@ -45,24 +45,51 @@ Playground.args = {
 
 // =============================================================================
 // Variants (Dark Color Scheme - for light backgrounds)
+// Figma naming: Charcoal = solid+dark, Charcoal Outline = outline+dark
 // =============================================================================
 
+/**
+ * Solid Dark (Figma: "Charcoal" / "Black")
+ * Primary filled button with ui-button-primary-bg background and inverted text.
+ * Use on light backgrounds for primary actions.
+ */
 export const Solid = () => <Button variant="solid">Solid</Button>;
 
+/**
+ * Outline Dark (Figma: "Charcoal Outline")
+ * Primary-colored border and text on transparent background.
+ * Use on light backgrounds for secondary actions.
+ */
 export const Outline = () => <Button variant="outline">Outline</Button>;
 
+/**
+ * Ghost Dark
+ * Primary-colored text with no border or background.
+ * Use for tertiary actions on light backgrounds.
+ */
 export const Ghost = () => <Button variant="ghost">Ghost</Button>;
 
+/**
+ * Subtle Dark
+ * Subtle border with primary-colored text.
+ * Use for less prominent actions on light backgrounds.
+ */
 export const Subtle = () => <Button variant="subtle">Subtle</Button>;
 
 // =============================================================================
 // Variants (Light Color Scheme - for dark backgrounds)
+// Figma naming: Ivory = solid+light, Ivory Outline = outline+light
 // =============================================================================
 
 const DarkBackground = ({ children }: { children: React.ReactNode }) => (
 	<div className="rounded-radius-12 bg-gray-1200 p-spacing-32">{children}</div>
 );
 
+/**
+ * Solid Light (Figma: "Ivory")
+ * White filled button with primary-colored text.
+ * Use on dark backgrounds for primary actions.
+ */
 export const SolidLight = () => (
 	<DarkBackground>
 		<Button variant="solid" colorScheme="light">
@@ -71,6 +98,11 @@ export const SolidLight = () => (
 	</DarkBackground>
 );
 
+/**
+ * Outline Light (Figma: "Ivory Outline")
+ * White border and text on transparent background.
+ * Use on dark backgrounds for secondary actions.
+ */
 export const OutlineLight = () => (
 	<DarkBackground>
 		<Button variant="outline" colorScheme="light">
@@ -79,6 +111,11 @@ export const OutlineLight = () => (
 	</DarkBackground>
 );
 
+/**
+ * Ghost Light
+ * White text with no border or background.
+ * Use for tertiary actions on dark backgrounds.
+ */
 export const GhostLight = () => (
 	<DarkBackground>
 		<Button variant="ghost" colorScheme="light">
@@ -87,6 +124,11 @@ export const GhostLight = () => (
 	</DarkBackground>
 );
 
+/**
+ * Subtle Light
+ * Alpha-white border with white text.
+ * Use for less prominent actions on dark backgrounds.
+ */
 export const SubtleLight = () => (
 	<DarkBackground>
 		<Button variant="subtle" colorScheme="light">

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

@@ -129,7 +129,7 @@ describe("Button", () => {
 			render(<Button>Default</Button>);
 			const button = page.getByRole("button", { name: "Default" });
 			// Button uses semantic token classes
-			await expect.element(button).toHaveClass(/bg-button-primary-bg/);
+			await expect.element(button).toHaveClass(/bg-ui-button-primary-bg/);
 		});
 	});
 });

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

@@ -9,22 +9,20 @@ import { tv, type VariantProps } from "tailwind-variants";
 import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
 
 /**
- * Button component based on Figma BaseKit / Interface / Buttons
+ * Button component based on Figma Button component
  *
- * Variants:
- * - solid: Filled button
- * - outline: Outlined button
- * - ghost: No background/border, just text
- * - subtle: Light background with subtle styling
- *
- * Color Schemes:
- * - dark: Dark colors for use on light backgrounds (default)
- * - light: Light colors for use on dark backgrounds
+ * Variants (matches Figma):
+ * - primary: Filled brand button (indigo background)
+ * - primary-outline: Outlined brand button (indigo border/text)
+ * - secondary: Filled neutral button (white background, for dark backgrounds)
+ * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)
+ * - ghost: Transparent button with subtle hover (for light backgrounds)
+ * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)
  *
  * Sizes:
- * - lg: Large buttons
- * - default: Medium buttons
- * - sm: Small buttons
+ * - lg: Large buttons (56px height)
+ * - md: Medium buttons (40px height) - default
+ * - sm: Small buttons (28px height)
  *
  * For icon-only buttons, use the IconButton component instead.
  *
@@ -32,90 +30,40 @@ import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
  * Pass a `theme` prop to override default colors via CSS custom properties.
  */
 const buttonVariants = tv({
-	base: "inline-flex items-center justify-center gap-spacing-8 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 rounded-surface-button stroke-surface-button border-solid",
+	base: "inline-flex items-center justify-center gap-6 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 border-solid",
 	variants: {
 		variant: {
-			solid: "",
-			outline: "bg-transparent border",
-			ghost: "bg-transparent border-transparent",
-			subtle: "border",
+			// Primary - filled brand button
+			primary:
+				"bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover hover:text-button-primary-text-hover border-transparent focus-visible:ring-button-primary-bg",
+			// Primary Outline - outlined brand button
+			"primary-outline":
+				"bg-button-primary-outline-bg text-button-primary-outline-text border border-button-primary-outline-border hover:bg-button-primary-outline-bg-hover hover:text-button-primary-outline-text-hover hover:border-button-primary-outline-border-hover focus-visible:ring-button-primary-outline-border",
+			// Secondary - filled neutral button (for dark backgrounds)
+			secondary:
+				"bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover hover:text-button-secondary-text-hover border-transparent focus-visible:ring-button-secondary-bg focus-visible:ring-offset-gray-1000",
+			// Secondary Outline - outlined neutral button (for dark backgrounds)
+			"secondary-outline":
+				"bg-button-secondary-outline-bg text-button-secondary-outline-text border border-button-secondary-outline-border hover:bg-button-secondary-outline-bg-hover hover:text-button-secondary-outline-text-hover hover:border-button-secondary-outline-border-hover focus-visible:ring-button-secondary-outline-border focus-visible:ring-offset-gray-1000",
+			// Ghost - transparent button (for light backgrounds)
+			ghost:
+				"bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover hover:text-button-ghost-text-hover border-transparent focus-visible:ring-gray-1000",
+			// Ghost Inverse - transparent button (for dark backgrounds)
+			"ghost-inverse":
+				"bg-button-ghost-inverse-bg text-button-ghost-inverse-text hover:bg-button-ghost-inverse-bg-hover hover:text-button-ghost-inverse-text-hover border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
 			// Themed - uses CSS custom properties for styling
 			themed:
 				"[background:var(--btn-bg)] [color:var(--btn-text)] [border-color:var(--btn-border-color,transparent)] hover:[background:var(--btn-bg-hover,var(--btn-bg))] active:[background:var(--btn-bg-active,var(--btn-bg-hover,var(--btn-bg)))]",
 		},
-		colorScheme: {
-			dark: "",
-			light: "",
-		},
 		size: {
-			lg: "px-spacing-24 py-spacing-12 typography-large-button-large h-spacing-48",
-			default:
-				"px-spacing-20 py-spacing-10 typography-medium-button-medium h-spacing-40",
-			sm: "px-spacing-16 py-spacing-8 typography-small-button-small h-spacing-32",
+			lg: "px-32 py-20 h-56 rounded-10 typography-large-button-large",
+			md: "px-20 py-12 h-40 rounded-6 typography-medium-button-medium",
+			sm: "px-12 py-8 h-28 rounded-4 typography-small-button-small",
 		},
 	},
-	compoundVariants: [
-		// Solid + Dark (for light backgrounds) - uses semantic button tokens
-		{
-			variant: "solid",
-			colorScheme: "dark",
-			class:
-				"bg-button-primary-bg text-text-inverted hover:bg-button-primary-bg-hover active:bg-button-primary-bg-hover border-transparent focus-visible:ring-button-primary-bg",
-		},
-		// Solid + Light (for dark backgrounds)
-		{
-			variant: "solid",
-			colorScheme: "light",
-			class:
-				"bg-button-secondary-bg text-text-primary hover:bg-button-secondary-bg-hover active:bg-gray-200 border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Outline + Dark (for light backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "dark",
-			class:
-				"border-border-subtle text-gray-1000 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Outline + Light (for dark backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "light",
-			class:
-				"border-gray-50 text-gray-50 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Ghost + Dark (for light backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "dark",
-			class:
-				"text-gray-700 hover:text-gray-900 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Ghost + Light (for dark backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "light",
-			class:
-				"text-gray-300 hover:text-gray-100 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Subtle + Dark (for light backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "dark",
-			class:
-				"border-border-subtle text-alpha-black-60 hover:border-border-strong hover:text-alpha-black-80 active:bg-alpha-black-5 focus-visible:ring-gray-1000",
-		},
-		// Subtle + Light (for dark backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "light",
-			class:
-				"border-alpha-white-20 text-alpha-white-60 hover:border-alpha-white-30 hover:text-alpha-white-80 active:bg-alpha-white-5 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-	],
 	defaultVariants: {
-		variant: "solid",
-		colorScheme: "dark",
-		size: "default",
+		variant: "primary",
+		size: "md",
 	},
 });
 
@@ -139,17 +87,7 @@ function hasThemeValues(theme: ButtonTheme | undefined): boolean {
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	(
-		{
-			className,
-			variant,
-			colorScheme,
-			size,
-			render,
-			nativeButton,
-			theme,
-			style,
-			...props
-		},
+		{ className, variant, size, render, nativeButton, theme, style, ...props },
 		ref,
 	) => {
 		// When render prop is provided, default nativeButton to false to suppress warnings
@@ -162,15 +100,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 		const combinedStyles = hasTheme ? { ...themeStyles, ...style } : style;
 
 		// Resolve actual values for data attributes
-		const resolvedVariant = effectiveVariant ?? "solid";
-		const resolvedColorScheme = colorScheme ?? "dark";
-		const resolvedSize = size ?? "default";
+		const resolvedVariant = effectiveVariant ?? "primary";
+		const resolvedSize = size ?? "md";
 
 		return (
 			<BaseButton
 				className={buttonVariants({
 					variant: effectiveVariant,
-					colorScheme,
 					size,
 					class: className,
 				})}
@@ -179,7 +115,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				nativeButton={isNativeButton}
 				style={combinedStyles}
 				data-variant={resolvedVariant}
-				data-color-scheme={resolvedColorScheme}
 				data-size={resolvedSize}
 				{...props}
 			/>

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

@@ -4,66 +4,112 @@ import { page } from "vitest/browser";
 import { Button } from "./button";
 
 describe("Button Visual Regression", () => {
-	test("charcoal variant renders correctly", async () => {
-		render(<Button variant="charcoal">Charcoal Button</Button>);
+	// Solid variants
+	test("solid dark variant renders correctly", async () => {
+		render(
+			<Button variant="solid" colorScheme="dark">
+				Solid Dark Button
+			</Button>,
+		);
 
 		await expect(
-			page.getByRole("button", { name: "Charcoal Button" }),
-		).toMatchScreenshot("button-charcoal");
+			page.getByRole("button", { name: "Solid Dark Button" }),
+		).toMatchScreenshot("button-solid-dark");
 	});
 
-	test("charcoalOutline variant renders correctly", async () => {
-		render(<Button variant="charcoalOutline">Charcoal Outline Button</Button>);
+	test("solid light variant renders correctly", async () => {
+		render(
+			<div style={{ background: "#1a1a1a", padding: "20px" }}>
+				<Button variant="solid" colorScheme="light">
+					Solid Light Button
+				</Button>
+			</div>,
+		);
 
 		await expect(
-			page.getByRole("button", { name: "Charcoal Outline Button" }),
-		).toMatchScreenshot("button-charcoal-outline");
+			page.getByRole("button", { name: "Solid Light Button" }),
+		).toMatchScreenshot("button-solid-light");
 	});
 
-	test("charcoalOutlineQuiet variant renders correctly", async () => {
+	// Outline variants
+	test("outline dark variant renders correctly", async () => {
 		render(
-			<Button variant="charcoalOutlineQuiet">Charcoal Outline Quiet</Button>,
+			<Button variant="outline" colorScheme="dark">
+				Outline Dark Button
+			</Button>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Charcoal Outline Quiet" }),
-		).toMatchScreenshot("button-charcoal-outline-quiet");
+			page.getByRole("button", { name: "Outline Dark Button" }),
+		).toMatchScreenshot("button-outline-dark");
 	});
 
-	test("ivory variant renders correctly", async () => {
+	test("outline light variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivory">Ivory Button</Button>
+				<Button variant="outline" colorScheme="light">
+					Outline Light Button
+				</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Ivory Button" }),
-		).toMatchScreenshot("button-ivory");
+			page.getByRole("button", { name: "Outline Light Button" }),
+		).toMatchScreenshot("button-outline-light");
+	});
+
+	// Ghost variants
+	test("ghost dark variant renders correctly", async () => {
+		render(
+			<Button variant="ghost" colorScheme="dark">
+				Ghost Dark Button
+			</Button>,
+		);
+
+		await expect(
+			page.getByRole("button", { name: "Ghost Dark Button" }),
+		).toMatchScreenshot("button-ghost-dark");
 	});
 
-	test("ivoryOutline variant renders correctly", async () => {
+	test("ghost light variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivoryOutline">Ivory Outline Button</Button>
+				<Button variant="ghost" colorScheme="light">
+					Ghost Light Button
+				</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Ivory Outline Button" }),
-		).toMatchScreenshot("button-ivory-outline");
+			page.getByRole("button", { name: "Ghost Light Button" }),
+		).toMatchScreenshot("button-ghost-light");
+	});
+
+	// Subtle variants
+	test("subtle dark variant renders correctly", async () => {
+		render(
+			<Button variant="subtle" colorScheme="dark">
+				Subtle Dark Button
+			</Button>,
+		);
+
+		await expect(
+			page.getByRole("button", { name: "Subtle Dark Button" }),
+		).toMatchScreenshot("button-subtle-dark");
 	});
 
-	test("ivoryOutlineQuiet variant renders correctly", async () => {
+	test("subtle light variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
+				<Button variant="subtle" colorScheme="light">
+					Subtle Light Button
+				</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Ivory Outline Quiet" }),
-		).toMatchScreenshot("button-ivory-outline-quiet");
+			page.getByRole("button", { name: "Subtle Light Button" }),
+		).toMatchScreenshot("button-subtle-light");
 	});
 
 	// Size variants