@nationaldesignstudio/react 0.0.17 → 0.0.19

package/dist/lib/utils.d.ts

@@ -1,2 +1 @@
-import { ClassValue } from 'clsx';
-export declare function cn(...inputs: ClassValue[]): string;
+export { cnBase as cn } from 'tailwind-variants';

package/dist/tokens.css

@@ -294,7 +294,12 @@
   --color-yellow-v200: color(srgb 1 1 0.3294);
   --color-yellow-v300: color(srgb 0.9882 0.9216 0.3059);
   --color-yellow-v400: color(srgb 0.9765 0.8431 0.2863);
+  --font-cormorant: Cormorant, serif;
+  --font-gloock: Gloock, serif;
   --font-pp-neue-montreal: "PP Neue Montreal";
+  --font-sans: "PP Neue Montreal";
+  --font-serif-alt: Cormorant, serif;
+  --font-serif: Gloock, serif;
   --font-weight-medium: 500;
   --font-weight-regular: 400;
   --font-weight-semibold: 600;
@@ -601,6 +606,18 @@
   --spatial-grid-small-columns: 4;
   --spatial-grid-small-gutter: 12px;
   --spatial-grid-small-margin: 24px;
+  --spatial-layout-medium-large-span: 8;
+  --spatial-layout-medium-large-start: 3;
+  --spatial-layout-medium-medium-span: 10;
+  --spatial-layout-medium-medium-start: 2;
+  --spatial-layout-narrow-large-span: 8;
+  --spatial-layout-narrow-large-start: 3;
+  --spatial-layout-narrow-medium-span: 8;
+  --spatial-layout-narrow-medium-start: 3;
+  --spatial-layout-wide-large-span: 10;
+  --spatial-layout-wide-large-start: 2;
+  --spatial-layout-wide-medium-span: 12;
+  --spatial-layout-wide-medium-start: 1;
   --spatial-section-large-gap: 64px;
   --spatial-section-large-padding: 128px;
   --spatial-section-medium-gap: 56px;
@@ -957,7 +974,12 @@
   --color-yellow-v200: var(--color-yellow-v200);
   --color-yellow-v300: var(--color-yellow-v300);
   --color-yellow-v400: var(--color-yellow-v400);
+  --font-cormorant: var(--font-cormorant);
+  --font-gloock: var(--font-gloock);
   --font-pp-neue-montreal: var(--font-pp-neue-montreal);
+  --font-sans: var(--font-sans);
+  --font-serif-alt: var(--font-serif-alt);
+  --font-serif: var(--font-serif);
   --font-weight-medium: var(--font-weight-medium);
   --font-weight-regular: var(--font-weight-regular);
   --font-weight-semibold: var(--font-weight-semibold);
@@ -995,6 +1017,9 @@
   --leading-88: var(--leading-88);
   --leading-96: var(--leading-96);
   --leading-9: var(--leading-9);
+  --max-width-desktop: 1440px;
+  --max-width-mobile: 320px;
+  --max-width-tablet: 768px;
   --radius-0: var(--radius-0);
   --radius-10: var(--radius-10);
   --radius-12: var(--radius-12);
@@ -1264,6 +1289,18 @@
   --spatial-grid-small-columns: var(--spatial-grid-small-columns);
   --spatial-grid-small-gutter: var(--spatial-grid-small-gutter);
   --spatial-grid-small-margin: var(--spatial-grid-small-margin);
+  --spatial-layout-medium-large-span: var(--spatial-layout-medium-large-span);
+  --spatial-layout-medium-large-start: var(--spatial-layout-medium-large-start);
+  --spatial-layout-medium-medium-span: var(--spatial-layout-medium-medium-span);
+  --spatial-layout-medium-medium-start: var(--spatial-layout-medium-medium-start);
+  --spatial-layout-narrow-large-span: var(--spatial-layout-narrow-large-span);
+  --spatial-layout-narrow-large-start: var(--spatial-layout-narrow-large-start);
+  --spatial-layout-narrow-medium-span: var(--spatial-layout-narrow-medium-span);
+  --spatial-layout-narrow-medium-start: var(--spatial-layout-narrow-medium-start);
+  --spatial-layout-wide-large-span: var(--spatial-layout-wide-large-span);
+  --spatial-layout-wide-large-start: var(--spatial-layout-wide-large-start);
+  --spatial-layout-wide-medium-span: var(--spatial-layout-wide-medium-span);
+  --spatial-layout-wide-medium-start: var(--spatial-layout-wide-medium-start);
   --spatial-section-large-gap: var(--spatial-section-large-gap);
   --spatial-section-large-padding: var(--spatial-section-large-padding);
   --spatial-section-medium-gap: var(--spatial-section-medium-gap);
@@ -1411,26 +1448,26 @@
 
 :root {
   /* Semantic Color Tokens */
-  --color-accent-brand-soft: color(srgb 0.9686 0.8078 0.749);
-  --color-accent-brand: color(srgb 0.9216 0.3098 0.1529);
-  --color-bg-muted: color(srgb 1 1 1);
-  --color-bg-page: color(srgb 0.9804 0.9804 0.9804);
-  --color-bg-section: color(srgb 0.9608 0.9608 0.9608);
-  --color-border-divider: color(srgb 0 0 0 / 0.1);
-  --color-border-focus: color(srgb 0.9216 0.3098 0.1529);
-  --color-border-strong: color(srgb 0 0 0 / 0.2);
-  --color-border-subtle: color(srgb 0 0 0 / 0.1);
-  --color-button-primary-bg-hover: color(srgb 0.4588 0.4588 0.4588);
-  --color-button-primary-bg: color(srgb 0.0784 0.0784 0.0784);
+  --color-accent-brand-soft: color(srgb 0.7686 0.6588 0.4392);
+  --color-accent-brand: color(srgb 0.651 0.5451 0.3686);
+  --color-bg-muted: color(srgb 0.9961 0.9922 0.9765);
+  --color-bg-page: color(srgb 0.9961 0.9922 0.9765);
+  --color-bg-section: color(srgb 0.9608 0.9569 0.9373);
+  --color-border-divider: color(srgb 0.149 0.1569 0.2941 / 0.1);
+  --color-border-focus: color(srgb 0.651 0.5451 0.3686);
+  --color-border-strong: color(srgb 0.149 0.1569 0.2941 / 0.2);
+  --color-border-subtle: color(srgb 0.149 0.1569 0.2941 / 0.1);
+  --color-button-primary-bg-hover: color(srgb 0.149 0.1569 0.2941);
+  --color-button-primary-bg: color(srgb 0.0667 0.0745 0.149);
   --color-button-secondary-bg-hover: color(srgb 1 1 1);
   --color-button-secondary-bg: color(srgb 1 1 1);
-  --color-card-background: color(srgb 1 1 1);
-  --color-text-inverted: color(srgb 0.9608 0.9608 0.9608);
+  --color-card-background: color(srgb 0.5412 0.4353 0.2588);
+  --color-text-inverted: color(srgb 0.9961 0.9922 0.9765);
   --color-text-link-hover: color(srgb 0.3804 0.3804 0.3804);
   --color-text-link: color(srgb 0.0784 0.0784 0.0784);
-  --color-text-muted: color(srgb 0.4588 0.4588 0.4588);
-  --color-text-primary: color(srgb 0.0784 0.0784 0.0784);
-  --color-text-secondary: color(srgb 0.2588 0.2588 0.2588);
+  --color-text-muted: color(srgb 0.651 0.5451 0.3686);
+  --color-text-primary: color(srgb 0.0667 0.0745 0.149);
+  --color-text-secondary: color(srgb 0.0667 0.0745 0.149);
   --radius-surface-button: var(--radius-6);
   --radius-surface-card: var(--radius-4);
   --surface-button-stroke: 1px;
@@ -1466,6 +1503,102 @@
 }
 
 
+@utility typography-bop-body-large {
+  font-family: var(--font-cormorant);
+  font-size: 28px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+@utility typography-bop-body-medium {
+  font-family: var(--font-cormorant);
+  font-size: 18px;
+  font-weight: var(--font-weight-regular);
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-bop-body-small {
+  font-family: var(--font-cormorant);
+  font-size: 16px;
+  font-weight: var(--font-weight-regular);
+  line-height: 1.5;
+  letter-spacing: 0;
+}
+
+@utility typography-bop-display-hero {
+  font-family: var(--font-gloock);
+  font-size: 12.5vw;
+  font-weight: var(--font-weight-regular);
+  line-height: 1.1;
+  letter-spacing: -0.03em;
+}
+
+@utility typography-bop-display-large {
+  font-family: var(--font-gloock);
+  font-size: 8vw;
+  font-weight: var(--font-weight-regular);
+  line-height: 1.1;
+  letter-spacing: -0.025em;
+}
+
+@utility typography-bop-display-medium {
+  font-family: var(--font-gloock);
+  font-size: 5vw;
+  font-weight: var(--font-weight-regular);
+  line-height: 1.2;
+  letter-spacing: -0.02em;
+}
+
+@utility typography-bop-headline-large {
+  font-family: var(--font-cormorant);
+  font-size: 48px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+  letter-spacing: -1px;
+}
+
+@utility typography-bop-headline-medium {
+  font-family: var(--font-cormorant);
+  font-size: 32px;
+  font-weight: var(--font-weight-medium);
+  line-height: 0.95;
+  letter-spacing: -1px;
+}
+
+@utility typography-bop-headline-small {
+  font-family: var(--font-cormorant);
+  font-size: 24px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1.2;
+  letter-spacing: -0.5px;
+}
+
+@utility typography-bop-ui-button {
+  font-family: var(--font-pp-neue-montreal);
+  font-size: 16px;
+  font-weight: var(--font-weight-medium);
+  line-height: 1;
+  letter-spacing: 0.5px;
+}
+
+@utility typography-bop-ui-caption {
+  font-family: var(--font-pp-neue-montreal);
+  font-size: 14px;
+  font-weight: var(--font-weight-regular);
+  line-height: 1.4;
+  letter-spacing: 0;
+}
+
+@utility typography-bop-ui-nav {
+  font-family: var(--font-pp-neue-montreal);
+  font-size: 13px;
+  font-weight: var(--font-weight-medium);
+  line-height: 0.95;
+  letter-spacing: 0;
+}
+
 @utility typography-large-body-large {
   font-family: var(--font-pp-neue-montreal);
   font-size: var(--text-21);
@@ -24051,6 +24184,32 @@
 }
 
 
+/* Font Family Utilities */
+@utility font-cormorant {
+  font-family: var(--font-cormorant);
+}
+
+@utility font-gloock {
+  font-family: var(--font-gloock);
+}
+
+@utility font-pp-neue-montreal {
+  font-family: var(--font-pp-neue-montreal);
+}
+
+@utility font-sans {
+  font-family: var(--font-sans);
+}
+
+@utility font-serif {
+  font-family: var(--font-serif);
+}
+
+@utility font-serif-alt {
+  font-family: var(--font-serif-alt);
+}
+
+
 /* Surface Utilities */
 @utility rounded-surface-button {
   border-radius: var(--radius-surface-button);
@@ -24158,4 +24317,36 @@
 @utility stroke-y-surface-card {
   border-top-width: var(--surface-card-stroke);
   border-bottom-width: var(--surface-card-stroke);
+}
+
+
+/* Grid Content Layout Utilities */
+@utility grid-content-medium {
+  grid-column: 1 / -1;
+  @media (width >= 48rem) {
+    grid-column: 2 / span 10;
+  }
+  @media (width >= 90rem) {
+    grid-column: 3 / span 8;
+  }
+}
+
+@utility grid-content-narrow {
+  grid-column: 1 / -1;
+  @media (width >= 48rem) {
+    grid-column: 3 / span 8;
+  }
+  @media (width >= 90rem) {
+    grid-column: 3 / span 8;
+  }
+}
+
+@utility grid-content-wide {
+  grid-column: 1 / -1;
+  @media (width >= 48rem) {
+    grid-column: 1 / span 12;
+  }
+  @media (width >= 90rem) {
+    grid-column: 2 / span 10;
+  }
 }

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nationaldesignstudio/react",
-	"version": "0.0.17",
+	"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";