@nationaldesignstudio/react 0.3.0 → 0.5.0

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

@@ -143,11 +143,7 @@ export const CustomBackground: Story = {
 		<Banner
 			heading="Custom Styled Banner"
 			description="This banner has a custom background color applied via className."
-			action={
-				<Button variant="outline" colorScheme="light">
-					Action
-				</Button>
-			}
+			action={<Button variant="secondary-outline">Action</Button>}
 			className="bg-gray-1000 text-gray-50 [&_h2]:text-gray-50 [&_p]:text-gray-200"
 		/>
 	),

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

@@ -156,8 +156,8 @@ describe("Banner", () => {
 
 			const banner = page.getByTestId("banner");
 			// Mobile padding
-			await expect.element(banner).toHaveClass(/px-spacing-20/);
-			await expect.element(banner).toHaveClass(/py-spacing-32/);
+			await expect.element(banner).toHaveClass(/px-20/);
+			await expect.element(banner).toHaveClass(/py-32/);
 		});
 	});
 

package/src/components/sections/banner/banner.tsx

@@ -21,9 +21,9 @@ const bannerVariants = tv({
 		"col-full",
 		// Responsive padding: mobile -> tablet -> desktop
 		// Uses primitive spacing tokens
-		"px-spacing-20 py-spacing-32",
-		"md:p-spacing-56",
-		"lg:px-spacing-72 lg:pb-spacing-72 lg:pt-0",
+		"px-20 py-32",
+		"md:p-56",
+		"lg:px-72 lg:pb-72 lg:pt-0",
 	],
 	variants: {
 		colorScheme: {
@@ -95,12 +95,12 @@ const Banner = React.forwardRef<HTMLElement, BannerProps>(
 				<div
 					className={cn(
 						// Uses primitive spacing tokens
-						"flex flex-col md:flex-row gap-spacing-20 items-start md:items-center md:justify-between",
-						colorScheme === "dark" && "border-t border-gray-700 py-spacing-36",
+						"flex flex-col md:flex-row gap-20 items-start md:items-center md:justify-between",
+						colorScheme === "dark" && "border-t border-gray-700 py-36",
 					)}
 				>
 					{/* Copy section */}
-					<div className="flex flex-col gap-spacing-6 items-start">
+					<div className="flex flex-col gap-6 items-start">
 						<h2
 							className={cn(
 								"typography-subheading-small",

package/src/components/sections/card-grid/card-grid.tsx

@@ -16,9 +16,9 @@ const cardGridVariants = tv({
 	base: [
 		"grid-container",
 		// Small (mobile): 72px y padding
-		"py-spacing-72",
+		"py-72",
 		// Large (desktop): 128px y padding
-		"lg:py-spacing-128",
+		"lg:py-128",
 	],
 	variants: {
 		variant: {
@@ -85,7 +85,7 @@ const CardGrid = React.forwardRef<HTMLElement, CardGridProps>(
 						"col-full",
 						"typography-h4 text-gray-900",
 						// Gap after title: mobile default, md: 56px, lg: 64px
-						"mb-spacing-36 md:mb-spacing-56 lg:mb-spacing-64",
+						"mb-36 md:mb-56 lg:mb-64",
 					)}
 				>
 					{title}
@@ -96,7 +96,7 @@ const CardGrid = React.forwardRef<HTMLElement, CardGridProps>(
 					className={cn(
 						"col-full",
 						// Mobile: single column
-						"grid grid-cols-1 gap-spacing-20",
+						"grid grid-cols-1 gap-20",
 						// Tablet: 2 columns
 						"md:grid-cols-2",
 						// Desktop: 3 columns for variant A, 2 columns for variant B

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

@@ -159,7 +159,7 @@ export const WithCloudflareStream: Story = {
  * Mock banner component for story demonstration
  */
 const MockBanner = () => (
-	<div className="bg-gray-1200 px-spacing-16 py-spacing-8 text-center text-14 text-text-inverted">
+	<div className="bg-gray-1200 px-16 py-8 text-center text-14 text-text-inverted">
 		An official website of the United States government
 	</div>
 );
@@ -168,10 +168,10 @@ const MockBanner = () => (
  * Mock navigation component for story demonstration
  */
 const MockNavigation = () => (
-	<nav className="flex items-center justify-between px-spacing-56 py-spacing-16">
-		<div className="flex items-center gap-spacing-24">
+	<nav className="flex items-center justify-between px-56 py-16">
+		<div className="flex items-center gap-24">
 			<div className="size-48 rounded-full bg-gray-50" />
-			<div className="flex gap-spacing-24 text-14 text-text-inverted">
+			<div className="flex gap-24 text-14 text-text-inverted">
 				<span className="cursor-pointer hover:opacity-80">Link 1</span>
 				<span className="cursor-pointer hover:opacity-80">Link 2</span>
 			</div>
@@ -199,7 +199,7 @@ export const WithTopSlot: Story = {
  */
 export const WithRoundedCorners: Story = {
 	render: () => (
-		<div className="bg-bg-page p-spacing-32">
+		<div className="bg-bg-page p-32">
 			<Hero
 				variant="A1"
 				title="Rounded Corners"
@@ -234,7 +234,7 @@ export const WithTopAndRoundedCorners: Story = {
 					</>
 				}
 			>
-				<p className="mt-spacing-16 max-w-[560px] text-20 text-text-inverted">
+				<p className="mt-16 max-w-[560px] text-20 text-text-inverted">
 					A subtitle or description can be added as children
 				</p>
 			</Hero>
@@ -261,7 +261,7 @@ export const UsingSubComponents: Story = {
 				<h1 className="text-64 font-medium text-text-inverted lg:text-128">
 					Custom Layout
 				</h1>
-				<p className="mt-spacing-16 text-20 text-text-inverted">
+				<p className="mt-16 text-20 text-text-inverted">
 					Using HeroHeader and HeroContent sub-components
 				</p>
 			</HeroContent>

package/src/components/sections/hero/hero.tsx

@@ -18,8 +18,7 @@ export {
 	type BackgroundVideoProps as HeroBackgroundVideoProps,
 } from "@/components/atoms/background";
 
-const DEFAULT_TITLE_TYPOGRAPHY =
-	"text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192 font-medium";
+const DEFAULT_TITLE_TYPOGRAPHY = "typography-h1-display";
 
 const heroVariants = tv({
 	slots: {
@@ -27,8 +26,8 @@ const heroVariants = tv({
 		top: "relative z-10 w-full",
 		content: [
 			"relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col",
-			"p-spacing-20",
-			"md:p-spacing-56",
+			"p-20",
+			"md:p-56",
 		],
 		title: DEFAULT_TITLE_TYPOGRAPHY,
 	},
@@ -36,15 +35,15 @@ const heroVariants = tv({
 		variant: {
 			A1: {
 				root: "min-h-[80vh]",
-				content: ["justify-end", "lg:p-spacing-72"],
+				content: ["justify-end", "lg:p-72"],
 			},
 			A2: {
 				root: "min-h-[80vh]",
-				content: ["justify-start", "lg:p-spacing-64"],
+				content: ["justify-start", "lg:p-64"],
 			},
 			A3: {
 				root: "min-h-[80vh]",
-				content: ["items-center justify-center", "lg:p-spacing-64"],
+				content: ["items-center justify-center", "lg:p-64"],
 			},
 		},
 		colorScheme: {
@@ -80,9 +79,9 @@ const heroHeaderVariants = tv({
 const heroContentVariants = tv({
 	base: [
 		"relative z-10 mx-auto flex w-full max-w-screen-xl flex-1 flex-col",
-		"p-spacing-20",
-		"md:p-spacing-56",
-		"lg:p-spacing-72",
+		"p-20",
+		"md:p-56",
+		"lg:p-72",
 	],
 });
 
@@ -136,7 +135,7 @@ export interface HeroProps
 	title?: string;
 	/**
 	 * Custom typography class for the title using primitive tokens.
-	 * Default: "text-64 leading-64 tracking-64 md:text-128 md:leading-128 md:tracking-128 lg:text-192 lg:leading-192 lg:tracking-192"
+	 * Default: "typography-h1-display"
 	 */
 	titleClassName?: string;
 	/**

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

@@ -23,7 +23,7 @@ const Prose = React.forwardRef<HTMLDivElement, ProseProps>(
 				className={cn(
 					"flex w-full max-w-[700px] flex-col overflow-hidden",
 					// Responsive gap between sections
-					"gap-spacing-56 md:gap-spacing-72 xl:gap-spacing-96",
+					"gap-56 md:gap-72 xl:gap-96",
 					className,
 				)}
 				{...props}
@@ -67,7 +67,7 @@ const ProseSection = React.forwardRef<HTMLElement, ProseSectionProps>(
 				className={cn(
 					"flex w-full flex-col",
 					// Responsive gap between heading and body
-					"gap-spacing-24 md:gap-spacing-40",
+					"gap-24 md:gap-40",
 					className,
 				)}
 				{...props}

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

@@ -177,9 +177,9 @@ describe("River", () => {
 
 			const river = page.getByTestId("river");
 			// Mobile padding
-			await expect.element(river).toHaveClass(/px-spacing-20/);
-			await expect.element(river).toHaveClass(/pt-spacing-72/);
-			await expect.element(river).toHaveClass(/pb-spacing-20/);
+			await expect.element(river).toHaveClass(/px-20/);
+			await expect.element(river).toHaveClass(/pt-72/);
+			await expect.element(river).toHaveClass(/pb-20/);
 		});
 	});
 

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

@@ -16,11 +16,11 @@ const riverVariants = tv({
 	base: [
 		"col-full",
 		// Small (mobile): 20px x, 72px top, 20px bottom
-		"px-spacing-20 pt-spacing-72 pb-spacing-20",
+		"px-20 pt-72 pb-20",
 		// Medium (tablet): 56px x, 96px y
-		"md:px-spacing-56 md:py-spacing-96",
+		"md:px-56 md:py-96",
 		// Large (desktop): 72px x, 128px y
-		"lg:px-spacing-72 lg:py-spacing-128",
+		"lg:px-72 lg:py-128",
 	],
 	variants: {
 		variant: {
@@ -106,17 +106,14 @@ const River = React.forwardRef<HTMLElement, RiverProps>(
 				)}
 			>
 				{/* Text content with 16px gap - uses primitive spacing tokens */}
-				<div className="flex flex-col gap-spacing-16">
+				<div className="flex flex-col gap-16">
 					<h2 className="typography-h4 text-gray-900">{headline}</h2>
 					<p className="typography-body-small text-gray-800">{body}</p>
 				</div>
 
 				{/* Buttons with 36px gap from text, responsive sizes - uses primitive spacing tokens */}
 				<div
-					className={cn(
-						"flex flex-row gap-spacing-16 mt-spacing-36",
-						"[&>*]:flex-shrink-0",
-					)}
+					className={cn("flex flex-row gap-16 mt-36", "[&>*]:flex-shrink-0")}
 				>
 					{primaryAction}
 					{secondaryAction}
@@ -145,10 +142,7 @@ const River = React.forwardRef<HTMLElement, RiverProps>(
 			>
 				{/* Inner grid container for 24-col layout - uses primitive spacing tokens */}
 				<div
-					className={cn(
-						"grid grid-cols-1 gap-spacing-36",
-						"lg:grid-cols-24 lg:gap-spacing-36",
-					)}
+					className={cn("grid grid-cols-1 gap-36", "lg:grid-cols-24 lg:gap-36")}
 				>
 					{variant === "B" ? (
 						<>

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.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
@@ -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,7 +203,7 @@ 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",
 							)}
 						>
@@ -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
 // =============================================================================
@@ -63,6 +68,35 @@ 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,
@@ -83,6 +117,29 @@ export {
 	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

@@ -19,14 +19,14 @@ export const formControlBase = [
 	"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",
+	// 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-ui-accent-base focus-visible:ring-4 focus-visible:ring-ui-color-focus",
+	"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
@@ -35,11 +35,13 @@ export const formControlBase = [
 
 /**
  * Size variants shared by form controls
+ * Uses spatial tokens for consistent sizing across 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",
+	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;
 
 /**