@nationaldesignstudio/react 0.0.17 → 0.1.0

package/src/components/sections/quote-block/quote-block.tsx

@@ -0,0 +1,216 @@
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { BackgroundOverlay } from "@/components/atoms/background";
+
+// =============================================================================
+// QuoteBlock Variants
+// =============================================================================
+
+const quoteBlockVariants = tv({
+	slots: {
+		root: "relative flex min-h-[500px] w-full flex-col overflow-hidden rounded-radius-8",
+		content: [
+			"relative z-10 flex max-w-[1440px] flex-1 flex-col items-start justify-end",
+			"p-40",
+			"md:p-80",
+			"lg:p-112",
+		],
+		quoteWrapper: "relative flex flex-col gap-40 md:gap-48",
+		quote: [
+			"relative text-text-inverted",
+			"typography-small-headline-small",
+			"md:typography-medium-headline-small",
+			"lg:typography-large-headline-small",
+			"font-serif md:font-serif lg:font-serif",
+		],
+		openQuote: [
+			"absolute text-text-inverted",
+			"typography-small-headline-small",
+			"md:typography-medium-headline-small",
+			"lg:typography-large-headline-small",
+			"font-serif md:font-serif lg:font-serif",
+			"-left-[0.5em] -top-[0.1em]",
+		],
+		attribution: "flex flex-col items-start gap-4",
+		signature: "h-auto w-[120px] md:w-[153px]",
+		byline: "flex flex-col text-text-inverted",
+		bylineName: "typography-body-medium text-text-inverted",
+		bylineTitle: "typography-body-medium text-text-inverted opacity-80",
+	},
+	variants: {
+		size: {
+			default: {
+				root: "",
+			},
+			compact: {
+				root: "min-h-[400px] lg:min-h-[600px]",
+			},
+		},
+	},
+	defaultVariants: {
+		size: "default",
+	},
+});
+
+// =============================================================================
+// QuoteBlock Component
+// =============================================================================
+
+export interface QuoteBlockProps
+	extends Omit<React.HTMLAttributes<HTMLElement>, "children">,
+		VariantProps<typeof quoteBlockVariants> {
+	/**
+	 * The quote text to display
+	 */
+	quote: string;
+	/**
+	 * Whether to show decorative quote marks
+	 * @default true
+	 */
+	showQuoteMarks?: boolean;
+	/**
+	 * Signature image URL (optional)
+	 */
+	signatureImage?: string;
+	/**
+	 * Alt text for signature image
+	 */
+	signatureAlt?: string;
+	/**
+	 * Attribution name (e.g., "Donald J. Trump")
+	 */
+	attributionName?: string;
+	/**
+	 * Attribution title (e.g., "45 & 47 President of the United States")
+	 */
+	attributionTitle?: string;
+	/**
+	 * Background element - use BackgroundImage or similar
+	 */
+	background?: React.ReactNode;
+	/**
+	 * Overlay opacity (0-1)
+	 */
+	overlayOpacity?: number;
+	/**
+	 * Overlay color
+	 */
+	overlayColor?: string;
+	/**
+	 * Custom class for the quote text
+	 */
+	quoteClassName?: string;
+	/**
+	 * Custom class for the byline name
+	 */
+	bylineNameClassName?: string;
+	/**
+	 * Custom class for the byline title
+	 */
+	bylineTitleClassName?: string;
+}
+
+const QuoteBlock = React.forwardRef<HTMLElement, QuoteBlockProps>(
+	(
+		{
+			className,
+			quote,
+			showQuoteMarks = true,
+			signatureImage,
+			signatureAlt = "Signature",
+			attributionName,
+			attributionTitle,
+			background,
+			overlayOpacity = 0,
+			overlayColor = "black",
+			quoteClassName,
+			bylineNameClassName,
+			bylineTitleClassName,
+			size,
+			...props
+		},
+		ref,
+	) => {
+		const styles = quoteBlockVariants({ size });
+
+		return (
+			<section
+				ref={ref}
+				className={styles.root({ class: className })}
+				{...props}
+			>
+				{/* Background */}
+				{background}
+
+				{/* Overlay */}
+				{overlayOpacity > 0 && (
+					<BackgroundOverlay
+						opacity={overlayOpacity}
+						className={overlayColor !== "black" ? undefined : "bg-black"}
+						style={
+							overlayColor !== "black"
+								? { backgroundColor: overlayColor }
+								: undefined
+						}
+					/>
+				)}
+
+				{/* Content */}
+				<div className={styles.content()}>
+					<div className={styles.quoteWrapper()}>
+						{/* Quote */}
+						<blockquote className={styles.quote({ class: quoteClassName })}>
+							{showQuoteMarks && (
+								<span className={styles.openQuote()} aria-hidden="true">
+									"
+								</span>
+							)}
+							<span className="relative">
+								{showQuoteMarks ? `${quote}"` : quote}
+							</span>
+						</blockquote>
+
+						{/* Attribution */}
+						{(signatureImage || attributionName || attributionTitle) && (
+							<div className={styles.attribution()}>
+								{signatureImage && (
+									<img
+										src={signatureImage}
+										alt={signatureAlt}
+										className={styles.signature()}
+									/>
+								)}
+								{(attributionName || attributionTitle) && (
+									<div className={styles.byline()}>
+										{attributionName && (
+											<span
+												className={styles.bylineName({
+													class: bylineNameClassName,
+												})}
+											>
+												{attributionName}
+											</span>
+										)}
+										{attributionTitle && (
+											<span
+												className={styles.bylineTitle({
+													class: bylineTitleClassName,
+												})}
+											>
+												{attributionTitle}
+											</span>
+										)}
+									</div>
+								)}
+							</div>
+						)}
+					</div>
+				</div>
+			</section>
+		);
+	},
+);
+
+QuoteBlock.displayName = "QuoteBlock";
+
+export { QuoteBlock, quoteBlockVariants };

package/src/index.ts

@@ -6,6 +6,28 @@ export type {
 	AccordionProps,
 } from "./components/atoms/accordion";
 export { Accordion, AccordionItem } from "./components/atoms/accordion";
+export type {
+	BackgroundGradientProps,
+	BackgroundImageProps,
+	BackgroundOverlayProps,
+	BackgroundProps,
+	BackgroundStreamProps,
+	BackgroundVideoProps,
+} from "./components/atoms/background";
+export {
+	Background,
+	BackgroundGradient,
+	BackgroundImage,
+	BackgroundOverlay,
+	BackgroundStream,
+	BackgroundVideo,
+	backgroundGradientVariants,
+	backgroundImageVariants,
+	backgroundOverlayVariants,
+	backgroundStreamVariants,
+	backgroundVariants,
+	backgroundVideoVariants,
+} from "./components/atoms/background";
 export type { ButtonProps, IconButtonProps } from "./components/atoms/button";
 export {
 	Button,
@@ -84,12 +106,25 @@ export type {
 	HeroBackgroundImageProps,
 	HeroBackgroundStreamProps,
 	HeroBackgroundVideoProps,
+	HeroContentProps,
+	HeroGradientProps,
+	HeroHeaderProps,
+	HeroOverlayProps,
 	HeroProps,
 } from "./components/sections/hero";
 export {
 	DEFAULT_TITLE_TYPOGRAPHY,
 	Hero,
 	HeroBackground,
+	HeroBackgroundImage,
+	HeroBackgroundStream,
+	HeroBackgroundVideo,
+	HeroContent,
+	HeroGradient,
+	HeroHeader,
+	HeroOverlay,
+	heroContentVariants,
+	heroHeaderVariants,
 	heroVariants,
 } from "./components/sections/hero";
 export type {
@@ -97,6 +132,11 @@ export type {
 	ProseSectionProps,
 } from "./components/sections/prose";
 export { Prose, ProseSection } from "./components/sections/prose";
+export type { QuoteBlockProps } from "./components/sections/quote-block";
+export {
+	QuoteBlock,
+	quoteBlockVariants,
+} from "./components/sections/quote-block";
 export type { RiverProps } from "./components/sections/river";
 export { River, riverVariants } from "./components/sections/river";
 export type { ToutProps } from "./components/sections/tout";

package/src/lib/utils.ts

@@ -1,6 +1 @@
-import { type ClassValue, clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
-
-export function cn(...inputs: ClassValue[]) {
-	return twMerge(clsx(inputs));
-}
+export { cnBase as cn } from "tailwind-variants";

package/src/stories/ThemeProvider.stories.tsx

@@ -38,9 +38,15 @@ function ThemeDemo({ title }: { title?: string }) {
 
 				{/* Button variants */}
 				<div className="flex flex-wrap gap-3 mb-6">
-					<Button variant="primary">Primary</Button>
-					<Button variant="secondary">Secondary</Button>
-					<Button variant="primaryOutline">Outline</Button>
+					<Button variant="solid" colorScheme="dark">
+						Solid Dark
+					</Button>
+					<Button variant="solid" colorScheme="light">
+						Solid Light
+					</Button>
+					<Button variant="outline" colorScheme="dark">
+						Outline
+					</Button>
 				</div>
 
 				{/* Card component */}
@@ -54,10 +60,10 @@ function ThemeDemo({ title }: { title?: string }) {
 							</CardDescription>
 						</CardBody>
 						<CardActions>
-							<Button variant="primary" size="sm">
+							<Button variant="solid" colorScheme="dark" size="sm">
 								Action
 							</Button>
-							<Button variant="secondary" size="sm">
+							<Button variant="outline" colorScheme="dark" size="sm">
 								Cancel
 							</Button>
 						</CardActions>