@nationaldesignstudio/react 0.0.17 → 0.1.0

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.1.0",
 	"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/accordion/accordion.test.tsx

@@ -0,0 +1,233 @@
+import { describe, expect, test } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Accordion, AccordionItem } from "./accordion";
+
+describe("Accordion", () => {
+	describe("Rendering", () => {
+		test("renders accordion with items", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toBeInTheDocument();
+			await expect
+				.element(page.getByRole("button", { name: "Question 2" }))
+				.toBeInTheDocument();
+		});
+
+		test("renders with default expanded item", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			// The first item should be expanded (has data-open attribute)
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toHaveAttribute("data-open");
+		});
+
+		test("renders with multiple default expanded items", async () => {
+			render(
+				<Accordion allowMultiple defaultExpanded={["item-1", "item-2"]}>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toHaveAttribute("data-open");
+			await expect
+				.element(page.getByRole("button", { name: "Question 2" }))
+				.toHaveAttribute("data-open");
+		});
+	});
+
+	describe("Keyboard Navigation", () => {
+		test("items are focusable via Tab", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			await userEvent.keyboard("{Tab}");
+			await expect
+				.element(page.getByRole("button", { name: "Question 1" }))
+				.toHaveFocus();
+		});
+
+		test("Enter key expands/collapses item", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			trigger.element().focus();
+			await userEvent.keyboard("{Enter}");
+			await expect.element(trigger).toHaveAttribute("data-open");
+		});
+
+		test("Space key expands/collapses item", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			trigger.element().focus();
+			await userEvent.keyboard(" ");
+			await expect.element(trigger).toHaveAttribute("data-open");
+		});
+	});
+
+	describe("Click Interactions", () => {
+		test("clicking trigger expands item", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			await trigger.click();
+			await expect.element(trigger).toHaveAttribute("data-open");
+		});
+
+		test("clicking expanded trigger collapses item", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			await expect.element(trigger).toHaveAttribute("data-open");
+			await trigger.click();
+			await expect.element(trigger).not.toHaveAttribute("data-open");
+		});
+
+		test("single mode collapses other items when opening new one", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger1 = page.getByRole("button", { name: "Question 1" });
+			const trigger2 = page.getByRole("button", { name: "Question 2" });
+
+			await expect.element(trigger1).toHaveAttribute("data-open");
+			await trigger2.click();
+			await expect.element(trigger2).toHaveAttribute("data-open");
+			await expect.element(trigger1).not.toHaveAttribute("data-open");
+		});
+
+		test("multiple mode allows multiple items open", async () => {
+			render(
+				<Accordion allowMultiple defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+					<AccordionItem id="item-2" title="Question 2">
+						Answer 2
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger1 = page.getByRole("button", { name: "Question 1" });
+			const trigger2 = page.getByRole("button", { name: "Question 2" });
+
+			await expect.element(trigger1).toHaveAttribute("data-open");
+			await trigger2.click();
+			await expect.element(trigger1).toHaveAttribute("data-open");
+			await expect.element(trigger2).toHaveAttribute("data-open");
+		});
+	});
+
+	describe("Variants", () => {
+		test("applies light variant by default", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			// Light variant has gray-800 text
+			await expect.element(trigger).toHaveClass(/text-gray-800/);
+		});
+
+		test("applies dark variant classes", async () => {
+			render(
+				<Accordion variant="dark">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer 1
+					</AccordionItem>
+				</Accordion>,
+			);
+			const trigger = page.getByRole("button", { name: "Question 1" });
+			// Dark variant has gray-100 text
+			await expect.element(trigger).toHaveClass(/text-gray-100/);
+		});
+	});
+
+	describe("Content", () => {
+		test("displays title text in trigger", async () => {
+			render(
+				<Accordion>
+					<AccordionItem id="item-1" title="Custom Title">
+						Content here
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect.element(page.getByText("Custom Title")).toBeInTheDocument();
+		});
+
+		test("displays content when expanded", async () => {
+			render(
+				<Accordion defaultExpanded="item-1">
+					<AccordionItem id="item-1" title="Question 1">
+						Answer content here
+					</AccordionItem>
+				</Accordion>,
+			);
+			await expect
+				.element(page.getByText("Answer content here"))
+				.toBeInTheDocument();
+		});
+	});
+});

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

@@ -18,7 +18,7 @@ const accordionVariants = tv({
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		variant: "light",
 	},
 });
 
@@ -31,7 +31,7 @@ const accordionItemVariants = tv({
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		variant: "light",
 	},
 });
 
@@ -48,7 +48,7 @@ const accordionTriggerVariants = tv({
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		variant: "light",
 	},
 });
 
@@ -62,7 +62,7 @@ const accordionPanelVariants = tv({
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		variant: "light",
 	},
 });
 
@@ -73,7 +73,7 @@ const accordionPanelVariants = tv({
 const AccordionContext = React.createContext<{
 	variant: "dark" | "light";
 }>({
-	variant: "dark",
+	variant: "light",
 });
 
 // =============================================================================
@@ -100,8 +100,8 @@ export interface AccordionProps
  * Built on Base UI's Accordion primitive.
  *
  * Variants:
- * - dark: Dark theme styling (default)
- * - light: Light theme styling
+ * - light: Light theme styling (default)
+ * - dark: Dark theme styling
  *
  * @example
  * ```tsx
@@ -134,7 +134,7 @@ const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
 		}, [defaultExpanded]);
 
 		return (
-			<AccordionContext.Provider value={{ variant: variant ?? "dark" }}>
+			<AccordionContext.Provider value={{ variant }}>
 				<BaseAccordion.Root
 					ref={ref}
 					className={accordionVariants({ variant, class: className })}