@nationaldesignstudio/react 0.2.0 → 0.3.0

package/src/components/sections/prose/prose.tsx

@@ -52,15 +52,14 @@ export interface ProseSectionProps extends React.HTMLAttributes<HTMLElement> {
  * A section within Prose content, containing a heading and body text.
  *
  * Responsive typography:
- * - h2: Uses typography-headline-medium (42px mobile → 56px tablet → 72px desktop)
- * - h3: Uses typography-headline-small (32px mobile → 42px tablet → 56px desktop)
- * - Body: Uses typography-body-medium (16px mobile/tablet → 18px desktop)
+ * - h2: Uses typography-h3
+ * - h3: Uses typography-h4
+ * - Body: Uses typography-body-medium
  */
 const ProseSection = React.forwardRef<HTMLElement, ProseSectionProps>(
 	({ className, heading, as = "h2", children, ...props }, ref) => {
 		const Heading = as;
-		const headingClass =
-			as === "h2" ? "typography-headline-medium" : "typography-headline-small";
+		const headingClass = as === "h2" ? "typography-h3" : "typography-h4";
 
 		return (
 			<section

package/src/components/sections/river/river.stories.tsx

@@ -51,7 +51,7 @@ Playground.args = {
 	headline: "Feature Headline",
 	body: "Use rivers to present content with supporting media. They work great for feature highlights, product showcases, and storytelling sections.",
 	primaryAction: <Button>Primary Action</Button>,
-	secondaryAction: <Button variant="charcoalOutline">Secondary</Button>,
+	secondaryAction: <Button variant="outline">Secondary</Button>,
 	media: <PlaceholderImage />,
 };
 
@@ -69,7 +69,7 @@ export const VariantA: Story = {
 			headline="Text Left, Media Right"
 			body="Variant A places the text content on the left (9 columns) and media on the right (15 columns) on desktop viewports. On mobile and tablet, they stack vertically."
 			primaryAction={<Button>Primary Action</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -85,7 +85,7 @@ export const VariantB: Story = {
 			headline="Media Left, Text Right"
 			body="Variant B places the media on the left (15 columns) and text content on the right (9 columns) on desktop viewports. On mobile and tablet, they stack vertically with text first."
 			primaryAction={<Button>Primary Action</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -102,7 +102,7 @@ export const VariantADesktop: Story = {
 			headline="Desktop View"
 			body="On desktop (lg, 1440px), the content spans 9 columns and the media spans 15 columns in a horizontal layout."
 			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -118,7 +118,7 @@ export const VariantATablet: Story = {
 			headline="Tablet View"
 			body="On tablet (md, 768px), the content and media stack vertically with the text above the media."
 			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -135,7 +135,7 @@ export const VariantAMobile: Story = {
 			body="On mobile (sm, 320px), content is stacked with smaller button sizing."
 			primaryAction={<Button size="sm">Primary</Button>}
 			secondaryAction={
-				<Button size="sm" variant="charcoalOutline">
+				<Button size="sm" variant="outline">
 					Secondary
 				</Button>
 			}
@@ -154,7 +154,7 @@ export const VariantBDesktop: Story = {
 			headline="Desktop View - Reversed"
 			body="Variant B reverses the layout, placing media on the left and content on the right."
 			primaryAction={<Button>Primary</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+			secondaryAction={<Button variant="outline">Secondary</Button>}
 			media={<PlaceholderImage />}
 		/>
 	),
@@ -224,7 +224,7 @@ export const WithImage: Story = {
 			headline="Real World Example"
 			body="Rivers work great with actual images, videos, or any media content. The media column is designed to accommodate various aspect ratios."
 			primaryAction={<Button>Get Started</Button>}
-			secondaryAction={<Button variant="charcoalOutline">Learn More</Button>}
+			secondaryAction={<Button variant="outline">Learn More</Button>}
 			media={
 				<img
 					src="https://images.unsplash.com/photo-1551434678-e076c223a692?w=800&h=600&fit=crop"

package/src/components/sections/river/river.test.tsx

@@ -246,7 +246,7 @@ describe("River", () => {
 			);
 
 			const headline = page.getByRole("heading", { level: 2 });
-			await expect.element(headline).toHaveClass(/typography-headline-small/);
+			await expect.element(headline).toHaveClass(/typography-h4/);
 			await expect.element(headline).toHaveClass(/text-gray-900/);
 		});
 

package/src/components/sections/river/river.tsx

@@ -77,7 +77,7 @@ export interface RiverProps
  *     headline="Feature Headline"
  *     body="Description of the feature..."
  *     primaryAction={<Button>Primary</Button>}
- *     secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+ *     secondaryAction={<Button variant="outline">Secondary</Button>}
  *     media={<img src="..." alt="Feature" />}
  *   />
  * </div>
@@ -107,9 +107,7 @@ const River = React.forwardRef<HTMLElement, RiverProps>(
 			>
 				{/* Text content with 16px gap - uses primitive spacing tokens */}
 				<div className="flex flex-col gap-spacing-16">
-					<h2 className="typography-headline-small text-gray-900">
-						{headline}
-					</h2>
+					<h2 className="typography-h4 text-gray-900">{headline}</h2>
 					<p className="typography-body-small text-gray-800">{body}</p>
 				</div>
 

package/src/components/sections/tout/tout.test.tsx

@@ -220,7 +220,7 @@ describe("Tout", () => {
 			);
 
 			const headline = page.getByRole("heading", { level: 2 });
-			await expect.element(headline).toHaveClass(/typography-headline-small/);
+			await expect.element(headline).toHaveClass(/typography-h4/);
 			await expect.element(headline).toHaveClass(/text-gray-900/);
 		});
 

package/src/components/sections/tout/tout.tsx

@@ -103,7 +103,7 @@ export interface ToutProps
  *   headline="Feature Headline"
  *   body="Description of the feature..."
  *   primaryAction={<Button>Primary</Button>}
- *   secondaryAction={<Button variant="charcoalOutline">Secondary</Button>}
+ *   secondaryAction={<Button variant="outline" colorScheme="light">Secondary</Button>}
  *   backgroundMedia={
  *     <img
  *       src="/background.jpg"
@@ -209,7 +209,7 @@ const Tout = React.forwardRef<HTMLElement, ToutProps>(
 						>
 							<h2
 								className={cn(
-									"typography-headline-small",
+									"typography-h4",
 									isDark ? "text-gray-100" : "text-gray-900",
 								)}
 								style={{

package/src/index.ts

@@ -35,6 +35,27 @@ export {
 	IconButton,
 	iconButtonVariants,
 } from "./components/atoms/button";
+export type {
+	InputGroupAddonProps,
+	InputGroupButtonProps,
+	InputGroupInputProps,
+	InputGroupProps,
+	InputGroupTextareaProps,
+	InputGroupTextProps,
+	InputProps,
+} from "./components/atoms/input";
+export {
+	Input,
+	InputGroup,
+	InputGroupAddon,
+	InputGroupButton,
+	InputGroupInput,
+	InputGroupText,
+	InputGroupTextarea,
+	inputGroupAddonVariants,
+	inputGroupVariants,
+	inputVariants,
+} from "./components/atoms/input";
 export type { NdstudioFooterProps } from "./components/atoms/ndstudio-footer";
 export { NdstudioFooter } from "./components/atoms/ndstudio-footer";
 export type { PagerControlProps } from "./components/atoms/pager-control";
@@ -42,6 +63,26 @@ export {
 	PagerControl,
 	pagerControlVariants,
 } from "./components/atoms/pager-control";
+export type {
+	SelectGroupLabelProps,
+	SelectGroupProps,
+	SelectOptionProps,
+	SelectPopupProps,
+	SelectProps,
+	SelectTriggerProps,
+} from "./components/atoms/select";
+export {
+	Select,
+	SelectGroup,
+	SelectGroupLabel,
+	SelectOption,
+	SelectPopup,
+	SelectRoot,
+	SelectTrigger,
+	selectOptionVariants,
+	selectPopupVariants,
+	selectTriggerVariants,
+} from "./components/atoms/select";
 // =============================================================================
 // Dev Tools
 // =============================================================================

package/src/lib/form-control.ts

@@ -0,0 +1,69 @@
+import { tv } from "tailwind-variants";
+
+/**
+ * Shared form control styles for Input, Select, and similar components.
+ *
+ * These base styles ensure consistent appearance across all form controls:
+ * - Consistent height and padding
+ * - Unified focus ring and border treatment
+ * - Shared hover/disabled states
+ *
+ * Based on Figma BaseKit / Interface / Input & Dropdown designs.
+ */
+
+/**
+ * Base styles shared by all form controls (input, select, etc.)
+ */
+export const formControlBase = [
+	// Layout
+	"flex w-full items-center",
+	// Typography
+	"text-16 font-medium leading-14",
+	// Border and radius
+	"border border-solid border-ui-color-border rounded-radius-6",
+	// Background
+	"bg-ui-control-background",
+	// Transitions
+	"transition-[background-color,border-color,box-shadow] duration-150",
+	// Focus state
+	"outline-none focus-visible:border-ui-accent-base focus-visible:ring-4 focus-visible:ring-ui-color-focus",
+	// Hover state (when not focused or disabled)
+	"hover:bg-ui-control-background-hover hover:focus-visible:bg-ui-control-background",
+	// Disabled state
+	"disabled:bg-ui-control-background-disabled disabled:cursor-not-allowed disabled:opacity-50",
+];
+
+/**
+ * Size variants shared by form controls
+ */
+export const formControlSizes = {
+	sm: "h-36 px-12 py-8 text-14",
+	default: "h-48 px-16 py-10",
+	lg: "h-56 px-20 py-12 text-18",
+} as const;
+
+/**
+ * Error state styles shared by form controls
+ */
+export const formControlError = {
+	true: "border-ui-error-color focus-visible:border-ui-error-color focus-visible:ring-ui-error-color/20 text-ui-error-color",
+	false: "",
+} as const;
+
+/**
+ * Form control variants using tailwind-variants
+ * Can be composed with other variants for specific components
+ */
+export const formControlVariants = tv({
+	base: formControlBase,
+	variants: {
+		size: formControlSizes,
+		error: formControlError,
+	},
+	defaultVariants: {
+		size: "default",
+		error: false,
+	},
+});
+
+export type FormControlSize = keyof typeof formControlSizes;

package/src/stories/Introduction.mdx

@@ -40,33 +40,47 @@ function App() {
 
 The design system provides pre-built typography classes for consistent text styling. Typography utilities use the `typography-` prefix to avoid conflicts with Tailwind's `text-*` color utilities.
 
-### Product Typography
+### Headings
 
-For app UIs, dashboards, and interfaces:
+For headlines and titles:
 
 ```html
-<h1 class="typography-product-title-large">Page Title</h1>
-<h2 class="typography-product-headline-medium">Section Header</h2>
-<p class="typography-product-body-medium">Body text content...</p>
-<span class="typography-product-caption-small">Caption text</span>
-<button class="typography-product-button-medium">Click me</button>
+<h1 class="typography-h1-display">Display Title</h1>
+<h1 class="typography-h1">Page Title</h1>
+<h2 class="typography-h2">Section Header</h2>
+<h3 class="typography-h3">Subsection Header</h3>
+<h4 class="typography-h4">Smaller Header</h4>
+<h5 class="typography-h5">Smallest Header</h5>
 ```
 
-Available styles: `typography-product-{category}-{size}` where category is: `title`, `headline`, `body`, `label`, `caption`, `button`, `input`, `link`, `navigation`, `overline`, `tabbar`
+### Body Text
 
-### Brand Typography
+For body content:
 
-For landing pages and promotional content:
+```html
+<p class="typography-body-large">Large body text...</p>
+<p class="typography-body-medium">Standard body text...</p>
+<p class="typography-body-small">Small body text...</p>
+```
+
+### Supporting Text
+
+For captions and labels:
 
 ```html
-<h1 class="typography-brand-medium-display-hero">Hero</h1>
-<h2 class="typography-brand-medium-headline-large">Big Headline</h2>
-<p class="typography-brand-medium-body-large">Marketing copy...</p>
+<span class="typography-caption">Caption text</span>
+<span class="typography-overline">OVERLINE TEXT</span>
 ```
 
-Available namespaces: `brand-large` (desktop), `brand-medium` (tablet), `brand-small` (mobile)
+### UI Typography
 
-Available styles: `typography-brand-{breakpoint}-{category}-{size}` where category is: `display`, `headline`, `subheading`, `body`, `label`, `caption`, `button`, `link`
+For buttons and interactive elements:
+
+```html
+<button class="typography-ui-button-large">Large Button</button>
+<button class="typography-ui-button-medium">Medium Button</button>
+<button class="typography-ui-button-small">Small Button</button>
+```
 
 ## Color Tokens
 

package/src/stories/ThemeProvider.stories.tsx

@@ -21,9 +21,7 @@ function ThemeDemo({ title }: { title?: string }) {
 		<div style={cssVars} className="p-6">
 			<div className="bg-bg-page p-6 rounded-lg min-h-[300px]">
 				{title && (
-					<h2 className="typography-subheading-small text-text-primary mb-4">
-						{title}
-					</h2>
+					<h2 className="typography-h5 text-text-primary mb-4">{title}</h2>
 				)}
 
 				{/* Typography showcase */}

package/src/stories/TokenShowcase.stories.tsx

@@ -3,7 +3,6 @@ import type { ComponentProps } from "react";
 import {
 	ColorTokens,
 	ResponsiveTypography,
-	SemanticSpacingTokens,
 	SpacingTokens,
 	TokenShowcase,
 	TypographyTokens,
@@ -57,24 +56,6 @@ export const Typography: Story = {
 	),
 };
 
-export const SemanticSpacing: Story = {
-	render: () => (
-		<div className="p-8 min-h-screen">
-			<div className="max-w-4xl mx-auto">
-				<SemanticSpacingTokens />
-			</div>
-		</div>
-	),
-	parameters: {
-		docs: {
-			description: {
-				story:
-					"Purpose-driven spacing tokens for components (buttons, cards, forms), layouts (hero, sections, containers, grids), and content stacks (vertical rhythm between elements).",
-			},
-		},
-	},
-};
-
 export const Breakpoints: Story = {
 	render: () => (
 		<div className="p-8">