@nationaldesignstudio/react 0.2.0 → 0.5.0

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

@@ -43,11 +43,7 @@ Playground.args = {
 	headline: "Brand-Large/Headline/Small",
 	body: "A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action.",
 	primaryAction: <Button>Primary</Button>,
-	secondaryAction: (
-		<Button variant="outline" colorScheme="light">
-			Secondary
-		</Button>
-	),
+	secondaryAction: <Button variant="secondary-outline">Secondary</Button>,
 	backgroundMedia: <PlaceholderBackground />,
 };
 
@@ -61,11 +57,7 @@ export const Desktop: Story = {
 			headline="Brand-Large/Headline/Small"
 			body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
 			primaryAction={<Button>Primary</Button>}
-			secondaryAction={
-				<Button variant="outline" colorScheme="light">
-					Secondary
-				</Button>
-			}
+			secondaryAction={<Button variant="secondary-outline">Secondary</Button>}
 			backgroundMedia={<PlaceholderBackground />}
 		/>
 	),
@@ -80,11 +72,7 @@ export const Tablet: Story = {
 			headline="Brand-Large/Headline/Small"
 			body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
 			primaryAction={<Button>Primary</Button>}
-			secondaryAction={
-				<Button variant="outline" colorScheme="light">
-					Secondary
-				</Button>
-			}
+			secondaryAction={<Button variant="secondary-outline">Secondary</Button>}
 			backgroundMedia={<PlaceholderBackground />}
 		/>
 	),
@@ -100,7 +88,7 @@ export const Mobile: Story = {
 			body="A river pattern stacks content in a simple vertical flow: one clear heading, a short block of copy, then the next step. It's ideal for guiding citizens through a process or story, keeping focus moving straight down the page with minimal choices and well-timed calls to action."
 			primaryAction={<Button size="sm">Primary</Button>}
 			secondaryAction={
-				<Button size="sm" variant="outline" colorScheme="light">
+				<Button size="sm" variant="secondary-outline">
 					Secondary
 				</Button>
 			}
@@ -125,11 +113,7 @@ export const WithImage: Story = {
 			headline="Work with Purpose"
 			body="Join a team that's building the future of government services. We're looking for passionate individuals who want to make a difference."
 			primaryAction={<Button>View Careers</Button>}
-			secondaryAction={
-				<Button variant="outline" colorScheme="light">
-					Learn More
-				</Button>
-			}
+			secondaryAction={<Button variant="secondary-outline">Learn More</Button>}
 			backgroundMedia={<ImageBackground />}
 		/>
 	),
@@ -158,11 +142,7 @@ export const WithVideoPlaceholder: Story = {
 			headline="Experience Innovation"
 			body="See how modern technology is transforming the way government serves its citizens."
 			primaryAction={<Button>Watch Video</Button>}
-			secondaryAction={
-				<Button variant="outline" colorScheme="light">
-					Learn More
-				</Button>
-			}
+			secondaryAction={<Button variant="secondary-outline">Learn More</Button>}
 			backgroundMedia={
 				<div className="absolute inset-0 bg-gray-800 flex items-center justify-center">
 					<span className="text-gray-400 typography-body-small">
@@ -183,11 +163,7 @@ export const WithNdstudioFooter: Story = {
 			headline="Work with Purpose"
 			body="Join a team that's building the future of government services. We're looking for passionate individuals who want to make a difference."
 			primaryAction={<Button>View Careers</Button>}
-			secondaryAction={
-				<Button variant="outline" colorScheme="light">
-					Learn More
-				</Button>
-			}
+			secondaryAction={<Button variant="secondary-outline">Learn More</Button>}
 			backgroundMedia={<ImageBackground />}
 			footer={<NdstudioFooter />}
 		/>

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

@@ -93,9 +93,9 @@ export interface ToutProps
  *
  * This component is self-contained with its own grid.
  * Grid setup:
- * - Desktop (lg): 24 columns, gap-spacing-20, content spans 9 cols
- * - Tablet (md): 12 columns, gap-spacing-20, content spans 9 cols
- * - Mobile: 4 columns, gap-spacing-20, content spans all 4 cols
+ * - Desktop (lg): 24 columns, gap-20, content spans 9 cols
+ * - Tablet (md): 12 columns, gap-20, content spans 9 cols
+ * - Mobile: 4 columns, gap-20, content spans all 4 cols
  *
  * @example
  * ```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"
@@ -163,7 +163,7 @@ const Tout = React.forwardRef<HTMLElement, ToutProps>(
 						// Grid setup with responsive columns
 						"grid w-full h-full",
 						// Mobile: 4 columns with gap-20
-						"grid-cols-4 gap-spacing-20",
+						"grid-cols-4 gap-20",
 						// Tablet (md): 12 columns
 						"md:grid-cols-12",
 						// Desktop (lg): 24 columns
@@ -171,9 +171,9 @@ const Tout = React.forwardRef<HTMLElement, ToutProps>(
 						// Max width and centering like grid-container
 						"max-w-[var(--breakpoint-lg)] mx-auto",
 						// Responsive margins matching grid-container - uses primitive spacing tokens
-						"px-spacing-20 md:px-spacing-56 lg:px-spacing-72",
+						"px-20 md:px-56 lg:px-72",
 						// Vertical padding to position content at bottom - uses primitive spacing tokens
-						"py-spacing-36 md:py-spacing-56 lg:py-spacing-72",
+						"py-36 md:py-56 lg:py-72",
 					)}
 					style={{
 						// Grid spacing theme overrides
@@ -193,7 +193,7 @@ const Tout = React.forwardRef<HTMLElement, ToutProps>(
 							"flex flex-col",
 							isCentered ? "justify-start items-center" : "justify-end",
 							// Responsive gap between text and buttons - uses primitive spacing tokens
-							"gap-spacing-28 md:gap-spacing-36",
+							"gap-28 md:gap-36",
 							// Mobile: all 4 cols
 							"col-span-4",
 							// Tablet & Desktop: 9 cols left-aligned, full width centered
@@ -203,13 +203,13 @@ const Tout = React.forwardRef<HTMLElement, ToutProps>(
 						{/* Text content stack - uses primitive spacing tokens */}
 						<div
 							className={cn(
-								"flex flex-col gap-spacing-16",
+								"flex flex-col gap-16",
 								isCentered && "items-center text-center",
 							)}
 						>
 							<h2
 								className={cn(
-									"typography-headline-small",
+									"typography-h4",
 									isDark ? "text-gray-100" : "text-gray-900",
 								)}
 								style={{
@@ -243,7 +243,7 @@ const Tout = React.forwardRef<HTMLElement, ToutProps>(
 								"flex flex-row",
 								isCentered ? "justify-center" : "items-start",
 								// Responsive gap between buttons
-								"gap-spacing-8 md:gap-spacing-12",
+								"gap-8 md:gap-12",
 								"[&>*]:flex-shrink-0",
 							)}
 						>

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

@@ -16,11 +16,11 @@ const twoColumnSectionVariants = tv({
 	base: [
 		"w-full",
 		// Small (mobile): 20px x, 56px top, 20px bottom
-		"px-spacing-20 pt-spacing-56 pb-spacing-20",
+		"px-20 pt-56 pb-20",
 		// Medium (tablet): 56px x, 56px y
-		"md:px-spacing-56 md:py-spacing-56",
+		"md:px-56 md:py-56",
 		// Large (desktop): 72px x, 72px top, 112px bottom
-		"lg:px-spacing-72 lg:pt-spacing-72 lg:pb-spacing-112",
+		"lg:px-72 lg:pt-72 lg:pb-112",
 	],
 	variants: {
 		colorScheme: {
@@ -108,13 +108,11 @@ const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 				{/* Inner container with border-top - uses primitive spacing tokens */}
 				<div
 					className={cn(
-						"border-t pt-spacing-36",
+						"border-t pt-36",
 						colorScheme === "dark" ? "border-gray-700" : "border-gray-300",
 						// Grid layout - uses primitive spacing tokens
-						"grid grid-cols-1 gap-spacing-56",
-						layout === "equal"
-							? "md:grid-cols-2"
-							: "lg:grid-cols-24 lg:gap-spacing-56",
+						"grid grid-cols-1 gap-56",
+						layout === "equal" ? "md:grid-cols-2" : "lg:grid-cols-24 lg:gap-56",
 					)}
 				>
 					{/* Title column */}
@@ -132,7 +130,7 @@ const TwoColumnSection = React.forwardRef<HTMLElement, TwoColumnSectionProps>(
 					{/* Content column - uses primitive spacing tokens */}
 					<div
 						className={cn(
-							"flex flex-col gap-spacing-56",
+							"flex flex-col gap-56",
 							layout !== "equal" && "lg:col-span-15",
 						)}
 					>

package/src/components/shared/floating-arrow.tsx

@@ -0,0 +1,78 @@
+import { tv } from "tailwind-variants";
+import { cn } from "@/lib/utils";
+
+/**
+ * Shared arrow variants for floating UI components
+ *
+ * Used by Tooltip, Popover, and other floating components.
+ * Handles positioning based on the side attribute.
+ */
+export const floatingArrowVariants = tv({
+	base: [
+		// Display flex to properly size the arrow container
+		"flex",
+		// Positioning based on floating side (uses spacing tokens since --spacing: 1px)
+		"data-[side=bottom]:-top-7",
+		"data-[side=left]:-right-12 data-[side=left]:rotate-90",
+		"data-[side=right]:-left-12 data-[side=right]:-rotate-90",
+		"data-[side=top]:-bottom-7 data-[side=top]:rotate-180",
+		// Animation - follows popup
+		"data-[starting-style]:opacity-0",
+		"data-[ending-style]:opacity-0",
+	],
+});
+
+export interface FloatingArrowSvgProps {
+	/** CSS class for the main fill color (e.g., "fill-tooltip-bg" or "fill-overlay-background") */
+	fillClassName: string;
+	/** CSS class for the border color using fill-* (e.g., "fill-overlay-border") - renders as outline behind main fill */
+	borderClassName?: string;
+	/** Additional className for the SVG element */
+	className?: string;
+}
+
+/**
+ * FloatingArrowSvg
+ *
+ * A shared arrow SVG component for floating UI elements.
+ * Use with Tooltip, Popover, Dropdown, and other floating components.
+ *
+ * @example
+ * ```tsx
+ * // For dark tooltip (no border)
+ * <FloatingArrowSvg fillClassName="fill-tooltip-bg" />
+ *
+ * // For light popover with border
+ * <FloatingArrowSvg
+ *   fillClassName="fill-overlay-background"
+ *   borderClassName="fill-overlay-border"
+ * />
+ * ```
+ */
+export const FloatingArrowSvg = ({
+	fillClassName,
+	borderClassName,
+	className,
+}: FloatingArrowSvgProps) => (
+	<svg
+		width="20"
+		height="10"
+		viewBox="0 0 20 10"
+		fill="none"
+		className={cn("block", className)}
+		aria-hidden="true"
+	>
+		{/* Main fill shape */}
+		<path
+			d="M9.66437 2.60207L4.80758 6.97318C4.07308 7.63423 3.11989 8 2.13172 8H0V10H20V8H18.5349C17.5468 8 16.5936 7.63423 15.8591 6.97318L11.0023 2.60207C10.622 2.2598 10.0447 2.25979 9.66437 2.60207Z"
+			className={fillClassName}
+		/>
+		{/* Border stroke (rendered on top for outline effect) */}
+		{borderClassName && (
+			<path
+				d="M8.99542 1.85876C9.75604 1.17425 10.9106 1.17422 11.6713 1.85878L16.5281 6.22989C17.0789 6.72568 17.7938 7.00001 18.5349 7.00001L15.89 7L11.0023 2.60207C10.622 2.2598 10.0447 2.2598 9.66436 2.60207L4.77734 7L2.13171 7.00001C2.87284 7.00001 3.58774 6.72568 4.13861 6.22989L8.99542 1.85876Z"
+				className={borderClassName}
+			/>
+		)}
+	</svg>
+);

package/src/components/shared/index.ts

@@ -0,0 +1,5 @@
+export {
+	FloatingArrowSvg,
+	type FloatingArrowSvgProps,
+	floatingArrowVariants,
+} from "./floating-arrow";

package/src/index.ts

@@ -1,3 +1,8 @@
+/**
+ * @nationaldesignstudio/react
+ * Design system components for React applications
+ */
+
 // =============================================================================
 // Atoms
 // =============================================================================
@@ -35,6 +40,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 +68,78 @@ export {
 	PagerControl,
 	pagerControlVariants,
 } from "./components/atoms/pager-control";
+export type {
+	PopoverArrowProps,
+	PopoverBackdropProps,
+	PopoverCloseProps,
+	PopoverDescriptionProps,
+	PopoverPopupProps,
+	PopoverPortalProps,
+	PopoverPositionerProps,
+	PopoverProps,
+	PopoverRootProps,
+	PopoverTitleProps,
+	PopoverTriggerProps,
+} from "./components/atoms/popover";
+export {
+	Popover,
+	PopoverArrow,
+	PopoverBackdrop,
+	PopoverClose,
+	PopoverDescription,
+	PopoverParts,
+	PopoverPopup,
+	PopoverPortal,
+	PopoverPositioner,
+	PopoverRoot,
+	PopoverTitle,
+	PopoverTrigger,
+	popoverArrowVariants,
+	popoverPopupVariants,
+} from "./components/atoms/popover";
+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";
+export type {
+	TooltipArrowProps,
+	TooltipPopupProps,
+	TooltipPortalProps,
+	TooltipPositionerProps,
+	TooltipProps,
+	TooltipProviderProps,
+	TooltipRootProps,
+	TooltipTriggerProps,
+} from "./components/atoms/tooltip";
+export {
+	Tooltip,
+	TooltipArrow,
+	TooltipParts,
+	TooltipPopup,
+	TooltipPortal,
+	TooltipPositioner,
+	TooltipProvider,
+	TooltipRoot,
+	TooltipTrigger,
+	tooltipArrowVariants,
+	tooltipPopupVariants,
+} from "./components/atoms/tooltip";
 // =============================================================================
 // Dev Tools
 // =============================================================================

package/src/lib/form-control.ts

@@ -0,0 +1,71 @@
+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 - uses surface ui radius for theming support
+	"border border-solid border-ui-color-border rounded-surface-ui-medium",
+	// Background
+	"bg-ui-control-background",
+	// Transitions
+	"transition-[background-color,border-color,box-shadow] duration-150",
+	// Focus state
+	"outline-none focus-visible:border-border-focus 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
+ * Uses spatial tokens for consistent sizing across form controls
+ */
+export const formControlSizes = {
+	sm: "h-spatial-ui-control-height-small px-spatial-ui-control-padding-x-small py-spatial-ui-control-padding-y-small text-14",
+	default:
+		"h-spatial-ui-control-height-medium px-spatial-ui-control-padding-x-medium py-spatial-ui-control-padding-y-medium",
+	lg: "h-spatial-ui-control-height-large px-spatial-ui-control-padding-x-large py-spatial-ui-control-padding-y-large 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;