@nationaldesignstudio/react 0.0.16 → 0.0.19

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nationaldesignstudio/react",
-	"version": "0.0.16",
+	"version": "0.0.19",
 	"type": "module",
 	"sideEffects": [
 		"*.css"
@@ -47,9 +47,7 @@
 	"dependencies": {
 		"@base-ui-components/react": "^1.0.0-rc.0",
 		"@radix-ui/react-slot": "^1.2.4",
-		"tailwind-variants": "^0.3.1",
-		"clsx": "^2.1.1",
-		"tailwind-merge": "^3.4.0"
+		"tailwind-variants": "^0.3.1"
 	},
 	"devDependencies": {
 		"@chromatic-com/storybook": "catalog:",

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

@@ -0,0 +1,377 @@
+import * as React from "react";
+import { tv } from "tailwind-variants";
+
+// =============================================================================
+// Background Atomic Component
+// =============================================================================
+
+const backgroundVariants = tv({
+	base: "absolute inset-0",
+});
+
+/**
+ * Base container for background composition.
+ * Use as a wrapper to compose multiple background layers (image, video, overlay, gradient).
+ *
+ * @example
+ * ```tsx
+ * <Background>
+ *   <Background.Image src="/hero.jpg" />
+ *   <Background.Overlay opacity={0.4} />
+ *   <Background.Gradient direction="to-t" from="black" to="transparent" />
+ * </Background>
+ * ```
+ */
+export interface BackgroundProps extends React.HTMLAttributes<HTMLDivElement> {}
+
+const Background = React.forwardRef<HTMLDivElement, BackgroundProps>(
+	({ className, children, ...props }, ref) => (
+		<div
+			ref={ref}
+			aria-hidden="true"
+			className={backgroundVariants({ class: className })}
+			{...props}
+		>
+			{children}
+		</div>
+	),
+);
+Background.displayName = "Background";
+
+// =============================================================================
+// Background.Image
+// =============================================================================
+
+const backgroundImageVariants = tv({
+	base: "absolute inset-0 size-full object-cover",
+});
+
+export interface BackgroundImageProps
+	extends Omit<React.ImgHTMLAttributes<HTMLImageElement>, "src"> {
+	/**
+	 * URL for the background image
+	 */
+	src: string;
+	/**
+	 * Object position (default: "center")
+	 */
+	position?: string;
+}
+
+/**
+ * Background image layer using an actual img element with object-cover.
+ * Supports native lazy loading, srcset, and better accessibility.
+ */
+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}
+	/>
+));
+BackgroundImage.displayName = "Background.Image";
+
+// =============================================================================
+// Background.Video
+// =============================================================================
+
+const backgroundVideoVariants = tv({
+	base: "absolute inset-0 size-full object-cover",
+});
+
+export interface BackgroundVideoProps
+	extends Omit<React.VideoHTMLAttributes<HTMLVideoElement>, "children"> {
+	/**
+	 * URL for the video source
+	 */
+	src: string;
+	/**
+	 * Video MIME type (default: auto-detected from src)
+	 */
+	type?: string;
+	/**
+	 * Poster image URL shown before video loads
+	 */
+	poster?: string;
+}
+
+/**
+ * Background video layer using HTML5 video element.
+ */
+const BackgroundVideo = React.forwardRef<
+	HTMLVideoElement,
+	BackgroundVideoProps
+>(
+	(
+		{
+			className,
+			src,
+			type,
+			poster,
+			autoPlay = true,
+			loop = true,
+			muted = true,
+			playsInline = true,
+			...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>
+	),
+);
+BackgroundVideo.displayName = "Background.Video";
+
+// =============================================================================
+// Background.Stream
+// =============================================================================
+
+const backgroundStreamVariants = tv({
+	base: "absolute inset-0 size-full border-0 scale-[1.5] object-cover",
+});
+
+export interface BackgroundStreamProps
+	extends React.IframeHTMLAttributes<HTMLIFrameElement> {
+	/**
+	 * Cloudflare Stream video ID
+	 */
+	videoId: string;
+	/**
+	 * Poster image URL (Cloudflare Stream thumbnail or custom)
+	 */
+	poster?: string;
+	/**
+	 * Whether the video should autoplay (default: true)
+	 */
+	autoplay?: boolean;
+	/**
+	 * Whether the video should loop (default: true)
+	 */
+	loop?: boolean;
+	/**
+	 * Whether the video should be muted (default: true)
+	 */
+	muted?: boolean;
+	/**
+	 * Whether to show playback controls (default: false)
+	 */
+	controls?: boolean;
+	/**
+	 * Custom Cloudflare customer subdomain (if using custom domains)
+	 */
+	customerSubdomain?: string;
+}
+
+/**
+ * Background video layer using Cloudflare Stream.
+ */
+const BackgroundStream = React.forwardRef<
+	HTMLIFrameElement,
+	BackgroundStreamProps
+>(
+	(
+		{
+			className,
+			videoId,
+			poster,
+			autoplay = true,
+			loop = true,
+			muted = true,
+			controls = false,
+			customerSubdomain,
+			title = "Background video",
+			...props
+		},
+		ref,
+	) => {
+		const baseUrl = customerSubdomain
+			? `https://${customerSubdomain}.cloudflarestream.com`
+			: "https://iframe.videodelivery.net";
+
+		const params = new URLSearchParams();
+		if (autoplay) params.set("autoplay", "true");
+		if (loop) params.set("loop", "true");
+		if (muted) params.set("muted", "true");
+		if (!controls) params.set("controls", "false");
+		if (poster) params.set("poster", poster);
+		params.set("preload", "auto");
+
+		const streamUrl = `${baseUrl}/${videoId}?${params.toString()}`;
+
+		return (
+			<iframe
+				ref={ref}
+				src={streamUrl}
+				title={title}
+				allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
+				allowFullScreen
+				className={backgroundStreamVariants({ class: className })}
+				{...props}
+			/>
+		);
+	},
+);
+BackgroundStream.displayName = "Background.Stream";
+
+// =============================================================================
+// Background.Overlay
+// =============================================================================
+
+const backgroundOverlayVariants = tv({
+	base: "absolute inset-0 bg-bg-overlay",
+});
+
+export interface BackgroundOverlayProps
+	extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * Overlay opacity (0-1)
+	 */
+	opacity?: number;
+}
+
+/**
+ * Solid color overlay layer. Uses semantic bg-overlay token by default.
+ * Override with className for different colors.
+ */
+const BackgroundOverlay = React.forwardRef<
+	HTMLDivElement,
+	BackgroundOverlayProps
+>(({ className, opacity = 0.4, style, ...props }, ref) => (
+	<div
+		ref={ref}
+		aria-hidden="true"
+		className={backgroundOverlayVariants({ class: className })}
+		style={{
+			opacity,
+			...style,
+		}}
+		{...props}
+	/>
+));
+BackgroundOverlay.displayName = "Background.Overlay";
+
+// =============================================================================
+// Background.Gradient
+// =============================================================================
+
+const backgroundGradientVariants = tv({
+	base: "absolute inset-0",
+});
+
+export interface BackgroundGradientProps
+	extends React.HTMLAttributes<HTMLDivElement> {
+	/**
+	 * Gradient direction (Tailwind convention: to-t, to-b, to-l, to-r, etc.)
+	 * Or CSS gradient direction (to top, to bottom, 45deg, etc.)
+	 */
+	direction?: string;
+	/**
+	 * Starting color (from)
+	 */
+	from?: string;
+	/**
+	 * Optional middle color (via)
+	 */
+	via?: string;
+	/**
+	 * Ending color (to)
+	 */
+	to?: string;
+	/**
+	 * Full custom gradient string (overrides from/via/to)
+	 */
+	gradient?: string;
+}
+
+/**
+ * Gradient overlay layer. Use for fading backgrounds or creating depth.
+ */
+const BackgroundGradient = React.forwardRef<
+	HTMLDivElement,
+	BackgroundGradientProps
+>(
+	(
+		{
+			className,
+			direction = "to-b",
+			from = "transparent",
+			via,
+			to = "black",
+			gradient,
+			style,
+			...props
+		},
+		ref,
+	) => {
+		// Convert Tailwind-style direction to CSS
+		const cssDirection = direction.startsWith("to-")
+			? direction.replace("to-", "to ")
+			: direction;
+
+		const gradientValue =
+			gradient ||
+			(via
+				? `linear-gradient(${cssDirection}, ${from}, ${via}, ${to})`
+				: `linear-gradient(${cssDirection}, ${from}, ${to})`);
+
+		return (
+			<div
+				ref={ref}
+				aria-hidden="true"
+				className={backgroundGradientVariants({ class: className })}
+				style={{
+					backgroundImage: gradientValue,
+					...style,
+				}}
+				{...props}
+			/>
+		);
+	},
+);
+BackgroundGradient.displayName = "Background.Gradient";
+
+// =============================================================================
+// Compound Export
+// =============================================================================
+
+const BackgroundCompound = Object.assign(Background, {
+	Image: BackgroundImage,
+	Video: BackgroundVideo,
+	Stream: BackgroundStream,
+	Overlay: BackgroundOverlay,
+	Gradient: BackgroundGradient,
+});
+
+export {
+	BackgroundCompound as Background,
+	BackgroundImage,
+	BackgroundVideo,
+	BackgroundStream,
+	BackgroundOverlay,
+	BackgroundGradient,
+	backgroundVariants,
+	backgroundImageVariants,
+	backgroundVideoVariants,
+	backgroundStreamVariants,
+	backgroundOverlayVariants,
+	backgroundGradientVariants,
+};

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

@@ -0,0 +1,22 @@
+export type {
+	BackgroundGradientProps,
+	BackgroundImageProps,
+	BackgroundOverlayProps,
+	BackgroundProps,
+	BackgroundStreamProps,
+	BackgroundVideoProps,
+} from "./background";
+export {
+	Background,
+	BackgroundGradient,
+	BackgroundImage,
+	BackgroundOverlay,
+	BackgroundStream,
+	BackgroundVideo,
+	backgroundGradientVariants,
+	backgroundImageVariants,
+	backgroundOverlayVariants,
+	backgroundStreamVariants,
+	backgroundVariants,
+	backgroundVideoVariants,
+} from "./background";

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

@@ -27,63 +27,112 @@ Playground.argTypes = {
 		control: {
 			type: "radio",
 		},
-		options: [
-			"primary",
-			"primaryOutline",
-			"secondary",
-			"charcoal",
-			"charcoalOutline",
-			"charcoalOutlineQuiet",
-			"ivory",
-			"ivoryOutline",
-			"ivoryOutlineQuiet",
-			"gray",
-		],
+		options: ["solid", "outline", "ghost", "subtle"],
+	},
+	colorScheme: {
+		control: {
+			type: "radio",
+		},
+		options: ["dark", "light"],
 	},
 };
 Playground.args = {
 	size: "default",
 	disabled: false,
-	variant: "primary",
+	variant: "solid",
+	colorScheme: "dark",
 };
 
 // =============================================================================
-// Semantic Variants (recommended)
+// Variants (Dark Color Scheme - for light backgrounds)
 // =============================================================================
 
-export const Primary = () => <Button variant="primary">Primary</Button>;
+export const Solid = () => <Button variant="solid">Solid</Button>;
 
-export const PrimaryOutline = () => (
-	<Button variant="primaryOutline">Primary Outline</Button>
-);
+export const Outline = () => <Button variant="outline">Outline</Button>;
+
+export const Ghost = () => <Button variant="ghost">Ghost</Button>;
 
-export const Secondary = () => <Button variant="secondary">Secondary</Button>;
+export const Subtle = () => <Button variant="subtle">Subtle</Button>;
 
 // =============================================================================
-// Legacy Variants
+// Variants (Light Color Scheme - for dark backgrounds)
 // =============================================================================
 
-export const Charcoal = () => <Button variant="charcoal">Charcoal</Button>;
-
-export const CharcoalOutline = () => (
-	<Button variant="charcoalOutline">Charcoal Outline</Button>
+const DarkBackground = ({ children }: { children: React.ReactNode }) => (
+	<div className="rounded-radius-12 bg-gray-1200 p-spacing-32">{children}</div>
 );
 
-export const CharcoalOutlineQuiet = () => (
-	<Button variant="charcoalOutlineQuiet">Charcoal Outline Quiet</Button>
+export const SolidLight = () => (
+	<DarkBackground>
+		<Button variant="solid" colorScheme="light">
+			Solid Light
+		</Button>
+	</DarkBackground>
 );
 
-export const Ivory = () => <Button variant="ivory">Ivory</Button>;
+export const OutlineLight = () => (
+	<DarkBackground>
+		<Button variant="outline" colorScheme="light">
+			Outline Light
+		</Button>
+	</DarkBackground>
+);
 
-export const IvoryOutline = () => (
-	<Button variant="ivoryOutline">Ivory Outline</Button>
+export const GhostLight = () => (
+	<DarkBackground>
+		<Button variant="ghost" colorScheme="light">
+			Ghost Light
+		</Button>
+	</DarkBackground>
 );
 
-export const IvoryOutlineQuiet = () => (
-	<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
+export const SubtleLight = () => (
+	<DarkBackground>
+		<Button variant="subtle" colorScheme="light">
+			Subtle Light
+		</Button>
+	</DarkBackground>
 );
 
-export const Gray = () => <Button variant="gray">Gray</Button>;
+// =============================================================================
+// All Variants Comparison
+// =============================================================================
+
+export const AllVariants = () => (
+	<div className="flex flex-col gap-spacing-32">
+		<div>
+			<h3 className="mb-spacing-16 text-14 font-medium text-text-secondary">
+				Dark Color Scheme (for light backgrounds)
+			</h3>
+			<div className="flex gap-spacing-16">
+				<Button variant="solid">Solid</Button>
+				<Button variant="outline">Outline</Button>
+				<Button variant="ghost">Ghost</Button>
+				<Button variant="subtle">Subtle</Button>
+			</div>
+		</div>
+		<DarkBackground>
+			<h3 className="mb-spacing-16 text-14 font-medium text-gray-400">
+				Light Color Scheme (for dark backgrounds)
+			</h3>
+			<div className="flex gap-spacing-16">
+				<Button variant="solid" colorScheme="light">
+					Solid
+				</Button>
+				<Button variant="outline" colorScheme="light">
+					Outline
+				</Button>
+				<Button variant="ghost" colorScheme="light">
+					Ghost
+				</Button>
+				<Button variant="subtle" colorScheme="light">
+					Subtle
+				</Button>
+			</div>
+		</DarkBackground>
+	</div>
+);
 
 // =============================================================================
 // Sizes