@nationaldesignstudio/react 0.2.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nationaldesignstudio/react",
-	"version": "0.2.0",
+	"version": "0.5.0",
 	"type": "module",
 	"sideEffects": [
 		"*.css"
@@ -51,6 +51,7 @@
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "catalog:",
+		"@figma/code-connect": "^1.3.12",
 		"@nds-design-system/tailwind-token-generator": "workspace:*",
 		"@nds-design-system/tokens": "workspace:*",
 		"@nds-design-system/tools": "workspace:*",

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

@@ -19,7 +19,7 @@ const meta: Meta<typeof Accordion> = {
 	},
 	decorators: [
 		(Story) => (
-			<div className="p-spacing-56 max-w-[746px]">
+			<div className="p-56 max-w-[746px]">
 				<Story />
 			</div>
 		),

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

@@ -38,7 +38,7 @@ const accordionItemVariants = tv({
 const accordionTriggerVariants = tv({
 	base: [
 		// Uses primitive spacing tokens
-		"flex w-full items-center justify-between py-spacing-24 text-left",
+		"flex w-full items-center justify-between py-24 text-left",
 		"typography-body-large transition-colors cursor-pointer",
 	],
 	variants: {
@@ -54,7 +54,7 @@ const accordionTriggerVariants = tv({
 
 const accordionPanelVariants = tv({
 	// Uses primitive spacing tokens
-	base: "typography-body-large pb-spacing-24",
+	base: "typography-body-large pb-24",
 	variants: {
 		colorScheme: {
 			dark: "text-gray-100",

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.figma.tsx

@@ -0,0 +1,37 @@
+import figma from "@figma/code-connect";
+import { Button } from "./button";
+
+figma.connect(
+	Button,
+	"https://www.figma.com/design/nvGqlGFXelQ5XdjEM5RCdK/Americas-Design-System?node-id=27103-21020",
+	{
+		props: {
+			variant: figma.enum("Variant", {
+				Primary: "primary",
+				Default: "default",
+				Secondary: "secondary",
+				Destructive: "destructive",
+				Outline: "outline",
+				Ghost: "ghost",
+				Link: "link",
+			}),
+			size: figma.enum("Size", {
+				sm: "sm",
+				default: "default",
+				lg: "lg",
+			}),
+			disabled: figma.enum("State", {
+				Disabled: true,
+			}),
+		},
+		example: (props) => (
+			<Button
+				variant={props.variant}
+				size={props.size}
+				disabled={props.disabled}
+			>
+				Button
+			</Button>
+		),
+	},
+);