@nationaldesignstudio/react 0.1.0 → 0.3.0

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

@@ -16,10 +16,8 @@ const toutVariants = tv({
 		"h-[600px] md:h-[750px] lg:h-[900px]",
 	],
 	variants: {
-		variant: {
-			// Default light content styling
+		colorScheme: {
 			light: "",
-			// Dark content styling
 			dark: "",
 		},
 		align: {
@@ -28,7 +26,7 @@ const toutVariants = tv({
 		},
 	},
 	defaultVariants: {
-		variant: "light",
+		colorScheme: "light",
 		align: "left",
 	},
 });
@@ -39,7 +37,7 @@ const toutVariants = tv({
  * A full-bleed section with a background image and overlaid content.
  * Content can be positioned on the left side or centered.
  *
- * Variants:
+ * Color schemes:
  * - light: Light text styling (default)
  * - dark: Dark text styling
  *
@@ -105,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"
@@ -121,7 +119,7 @@ const Tout = React.forwardRef<HTMLElement, ToutProps>(
 	(
 		{
 			className,
-			variant = "light",
+			colorScheme = "light",
 			align = "left",
 			headline,
 			body,
@@ -136,13 +134,13 @@ const Tout = React.forwardRef<HTMLElement, ToutProps>(
 		ref,
 	) => {
 		const isCentered = align === "center";
-		const isDark = variant === "dark";
+		const isDark = colorScheme === "dark";
 		const themeStyles = themeToStyleVars(theme);
 
 		return (
 			<section
 				ref={ref}
-				className={toutVariants({ variant, align, class: className })}
+				className={toutVariants({ colorScheme, align, class: className })}
 				style={{ ...themeStyles, ...style }}
 				{...props}
 			>
@@ -211,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/components/sections/two-column-section/two-column-section.stories.tsx

@@ -8,10 +8,10 @@ const meta: Meta<typeof TwoColumnSection> = {
 		layout: "fullscreen",
 	},
 	argTypes: {
-		variant: {
+		colorScheme: {
 			control: "select",
 			options: ["dark", "light"],
-			description: "Color variant",
+			description: "Color scheme",
 		},
 		title: {
 			control: "text",
@@ -35,7 +35,7 @@ export const Playground: Story = {
 	render: (args) => <TwoColumnSection {...args} />,
 };
 Playground.args = {
-	variant: "dark",
+	colorScheme: "dark",
 	title: "US Tech Force",
 	lead: "The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era – from administering critical financial infrastructure at the Treasury Department to advancing cutting-edge programs at the Department of War – and everything in between.",
 	children: (
@@ -73,7 +73,7 @@ Playground.args = {
 export const DarkVariant: Story = {
 	render: () => (
 		<TwoColumnSection
-			variant="dark"
+			colorScheme="dark"
 			title="US Tech Force"
 			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology."
 		>
@@ -95,7 +95,7 @@ export const DarkVariant: Story = {
 export const LightVariant: Story = {
 	render: () => (
 		<TwoColumnSection
-			variant="light"
+			colorScheme="light"
 			title="US Tech Force"
 			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology."
 		>
@@ -118,7 +118,7 @@ export const LightVariant: Story = {
 export const Desktop: Story = {
 	render: () => (
 		<TwoColumnSection
-			variant="dark"
+			colorScheme="dark"
 			title="US Tech Force"
 			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
 		>
@@ -151,7 +151,7 @@ export const Desktop: Story = {
 export const Tablet: Story = {
 	render: () => (
 		<TwoColumnSection
-			variant="dark"
+			colorScheme="dark"
 			title="US Tech Force"
 			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
 		>
@@ -184,7 +184,7 @@ export const Tablet: Story = {
 export const Mobile: Story = {
 	render: () => (
 		<TwoColumnSection
-			variant="dark"
+			colorScheme="dark"
 			title="US Tech Force"
 			lead="The US Tech Force is recruiting an elite corps of engineers to build the next generation of government technology. Backed by the White House, Tech Force will tackle the most complex and large-scale civic and defense challenges of our era."
 		>
@@ -223,7 +223,7 @@ export const Mobile: Story = {
  */
 export const WithoutLead: Story = {
 	render: () => (
-		<TwoColumnSection variant="dark" title="About the Program">
+		<TwoColumnSection colorScheme="dark" title="About the Program">
 			<p>
 				Through a two-year program, participants will work in teams reporting
 				directly to agency leadership. In collaboration with leading technology
@@ -245,7 +245,7 @@ export const WithoutLead: Story = {
 export const RichLeadContent: Story = {
 	render: () => (
 		<TwoColumnSection
-			variant="dark"
+			colorScheme="dark"
 			title="Our Mission"
 			lead={
 				<>
@@ -275,7 +275,7 @@ export const RichLeadContent: Story = {
 export const ShortContent: Story = {
 	render: () => (
 		<TwoColumnSection
-			variant="dark"
+			colorScheme="dark"
 			title="Join Us"
 			lead="Build the future of American government technology."
 		>

package/src/components/sections/two-column-section/two-column-section.tsx

@@ -23,19 +23,17 @@ const twoColumnSectionVariants = tv({
 		"lg:px-spacing-72 lg:pt-spacing-72 lg:pb-spacing-112",
 	],
 	variants: {
-		variant: {
+		colorScheme: {
 			dark: "bg-gray-1200",
 			light: "bg-white",
 		},
 		layout: {
-			/** Default 24-column grid with asymmetric split (title: 9, content: 15) */
 			asymmetric: "",
-			/** Equal 2-column layout at md+ breakpoints */
 			equal: "",
 		},
 	},
 	defaultVariants: {
-		variant: "dark",
+		colorScheme: "dark",
 		layout: "asymmetric",
 	},
 });
@@ -86,14 +84,22 @@ export interface TwoColumnSectionProps
  */
 const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 	(
-		{ className, variant = "dark", layout, title, lead, children, ...props },
+		{
+			className,
+			colorScheme = "dark",
+			layout,
+			title,
+			lead,
+			children,
+			...props
+		},
 		ref,
 	) => {
 		return (
 			<section
 				ref={ref}
 				className={twoColumnSectionVariants({
-					variant,
+					colorScheme,
 					layout,
 					class: className,
 				})}
@@ -103,7 +109,7 @@ const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 				<div
 					className={cn(
 						"border-t pt-spacing-36",
-						variant === "dark" ? "border-gray-700" : "border-gray-300",
+						colorScheme === "dark" ? "border-gray-700" : "border-gray-300",
 						// Grid layout - uses primitive spacing tokens
 						"grid grid-cols-1 gap-spacing-56",
 						layout === "equal"
@@ -115,7 +121,7 @@ const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 					<h2
 						className={cn(
 							"typography-subheading-medium",
-							variant === "dark" ? "text-gray-100" : "text-gray-900",
+							colorScheme === "dark" ? "text-gray-100" : "text-gray-900",
 							// Column span based on layout
 							layout !== "equal" && "lg:col-span-9",
 						)}
@@ -135,7 +141,7 @@ const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 							<div
 								className={cn(
 									"typography-body-large",
-									variant === "dark" ? "text-gray-100" : "text-gray-900",
+									colorScheme === "dark" ? "text-gray-100" : "text-gray-900",
 								)}
 							>
 								{typeof lead === "string" ? <p>{lead}</p> : lead}
@@ -146,7 +152,7 @@ const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 						<div
 							className={cn(
 								"typography-body-medium flex flex-col gap-[1em]",
-								variant === "dark" ? "text-gray-400" : "text-gray-600",
+								colorScheme === "dark" ? "text-gray-400" : "text-gray-600",
 							)}
 						>
 							{children}

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">