@nationaldesignstudio/react 0.3.0 → 0.5.0

package/src/components/atoms/input/input-group.tsx

@@ -2,6 +2,7 @@
 
 import type * as React from "react";
 import { tv, type VariantProps } from "tailwind-variants";
+import { formControlBase } from "@/lib/form-control";
 import { cn } from "@/lib/utils";
 import { Button, type ButtonProps } from "../button";
 
@@ -11,25 +12,33 @@ import { Button, type ButtonProps } from "../button";
 
 const inputGroupVariants = tv({
 	base: [
-		"group/input-group relative flex w-full items-center",
-		"border border-solid border-ui-color-border rounded-radius-6",
-		"bg-ui-control-background shadow-xs",
-		"transition-[color,box-shadow,border-color] duration-150",
-		"h-36 min-w-0",
+		...formControlBase,
+		// InputGroup-specific: Container layout and styling
+		"group/input-group relative flex w-full items-center justify-start",
+		"shadow-xs",
+		// Override focus state to work with child focus detection
+		"focus-visible:border-ui-color-border focus-visible:ring-0",
+		// Override hover to work with InputGroup structure
+		"hover:bg-ui-control-background",
+		// Height and layout (overridden by size variants)
+		"min-w-0",
 		"has-[>textarea]:h-auto",
 		"has-[>[data-align=inline-start]]:[&>input]:pl-6",
 		"has-[>[data-align=inline-end]]:[&>input]:pr-6",
-		"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pb-10",
-		"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pt-10",
-		"has-[[data-slot=input-group-control]:focus-visible]:border-ui-accent-base has-[[data-slot=input-group-control]:focus-visible]:ring-[3px] has-[[data-slot=input-group-control]:focus-visible]:ring-ui-color-focus",
+		"has-[>[data-align=block-start]]:h-auto has-[>[data-align=block-start]]:flex-col has-[>[data-align=block-start]]:[&>input]:pt-spatial-ui-input-group-gap-block has-[>[data-align=block-start]]:[&>input]:pb-spatial-ui-input-group-padding-y-medium",
+		"has-[>[data-align=block-end]]:h-auto has-[>[data-align=block-end]]:flex-col has-[>[data-align=block-end]]:[&>input]:pb-spatial-ui-input-group-gap-block",
+		// Focus state detection on child input (overrides formControlBase focus)
+		"has-[[data-slot=input-group-control]:focus-visible]:border-ui-accent-base has-[[data-slot=input-group-control]:focus-visible]:ring-4 has-[[data-slot=input-group-control]:focus-visible]:ring-ui-color-focus",
+		// Error state detection on child elements
 		"has-[[data-slot][aria-invalid=true]]:border-ui-error-color has-[[data-slot][aria-invalid=true]]:ring-ui-error-color/20",
+		// Disabled state (overrides formControlBase disabled)
 		"data-[disabled=true]:bg-ui-control-background-disabled data-[disabled=true]:opacity-50 data-[disabled=true]:cursor-not-allowed",
 	],
 	variants: {
 		size: {
-			sm: "h-32",
-			default: "h-36",
-			lg: "h-48",
+			sm: "h-spatial-ui-input-group-height-small",
+			default: "h-spatial-ui-input-group-height-medium",
+			lg: "h-spatial-ui-input-group-height-large",
 		},
 	},
 	defaultVariants: {
@@ -44,23 +53,37 @@ const inputGroupVariants = tv({
 const inputGroupAddonVariants = tv({
 	base: [
 		"flex items-center justify-center gap-6",
-		"text-12 font-medium text-text-muted",
+		"typography-ui-text-sm text-text-muted",
 		"select-none cursor-text",
-		"[&>svg:not([class*='size-'])]:size-14",
+		"[&>svg:not([class*='size-'])]:size-16",
 		"[&_button]:text-[unset] [&_button]:cursor-pointer",
 		"group-data-[disabled=true]/input-group:opacity-50",
 	],
 	variants: {
 		align: {
-			"inline-start": ["order-first h-full pl-10", "has-[>button]:ml-[-6px]"],
-			"inline-end": ["order-last h-full pr-10", "has-[>button]:mr-[-6px]"],
+			"inline-start": [
+				"order-first h-full",
+				"pl-spatial-ui-input-group-padding-x-medium",
+				"has-[>button]:ml-[-6px]",
+			],
+			"inline-end": [
+				"order-last h-full",
+				"pr-spatial-ui-input-group-padding-x-medium",
+				"has-[>button]:mr-[-6px]",
+			],
 			"block-start": [
-				"order-first h-auto w-full justify-start px-12 pt-10",
-				"[.border-b]:pb-10",
+				"order-first h-auto w-full justify-start",
+				"px-spatial-ui-input-group-padding-x-medium pt-spatial-ui-input-group-padding-y-medium",
+				"[.border-b]:pb-spatial-ui-input-group-padding-y-medium",
+				// Use shared text style for block addons (12px, Regular weight per Figma)
+				"typography-ui-text-xs",
 			],
 			"block-end": [
-				"order-last h-auto w-full justify-start px-12 pb-10",
-				"[.border-t]:pt-10",
+				"order-last h-auto w-full justify-start",
+				"px-spatial-ui-input-group-padding-x-medium pb-spatial-ui-input-group-padding-y-medium",
+				"[.border-t]:pt-spatial-ui-input-group-padding-y-medium",
+				// Use shared text style for block addons (12px, Regular weight per Figma)
+				"typography-ui-text-xs",
 			],
 		},
 	},
@@ -119,7 +142,7 @@ function InputGroup({ className, size, disabled, ...props }: InputGroupProps) {
 			data-disabled={disabled || undefined}
 			disabled={disabled}
 			className={cn(
-				"border-0 p-0 m-0 min-w-0",
+				"p-0 m-0 min-w-0",
 				inputGroupVariants({ size, class: className }),
 			)}
 			{...props}
@@ -210,16 +233,18 @@ function InputGroupAddon({
 
 const inputGroupButtonVariants = tv({
 	base: [
-		"text-14 shadow-none flex gap-6 items-center",
+		"typography-ui-button-small shadow-none flex gap-6 items-center",
 		"focus-visible:ring-1 focus-visible:ring-offset-0 focus-visible:ring-ui-color-border",
 		"transition-opacity duration-150",
 	],
 	variants: {
 		size: {
-			xs: "!h-24 gap-4 px-8 rounded-radius-4 [&>svg:not([class*='size-'])]:size-14 has-[>svg]:px-6",
-			sm: "!h-28 px-10 gap-6 rounded-radius-6 has-[>svg]:px-8",
-			"icon-xs": "!size-24 rounded-radius-4 p-0 has-[>svg]:p-0",
-			"icon-sm": "!size-28 rounded-radius-6 p-0 has-[>svg]:p-0",
+			xs: "!h-24 gap-4 px-8 rounded-surface-ui-small [&>svg:not([class*='size-'])]:size-16 has-[>svg]:px-6",
+			sm: "!h-28 px-10 gap-6 rounded-surface-ui-medium has-[>svg]:px-8",
+			"icon-xs":
+				"!size-24 rounded-surface-ui-small p-0 [&>svg:not([class*='size-'])]:size-16 has-[>svg]:p-0",
+			"icon-sm":
+				"!size-28 rounded-surface-ui-medium p-0 [&>svg:not([class*='size-'])]:size-16 has-[>svg]:p-0",
 		},
 	},
 	defaultVariants: {
@@ -291,8 +316,8 @@ function InputGroupText({ className, ...props }: InputGroupTextProps) {
 	return (
 		<span
 			className={cn(
-				"flex items-center gap-6 text-14 text-text-muted",
-				"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-14",
+				"flex items-center gap-6 typography-ui-text-sm text-text-muted",
+				"[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-16",
 				className,
 			)}
 			{...props}
@@ -324,10 +349,10 @@ function InputGroupInput({ className, ...props }: InputGroupInputProps) {
 		<input
 			data-slot="input-group-control"
 			className={cn(
-				"flex-1 min-w-0 h-full",
+				"flex-1 min-w-0 h-full w-full",
 				"border-0 bg-transparent shadow-none outline-none",
-				"text-14 font-medium placeholder:text-text-muted",
-				"px-12",
+				"typography-ui-text-sm text-left placeholder:text-text-muted",
+				"px-spatial-ui-input-group-padding-x-medium",
 				"focus-visible:ring-0",
 				className,
 			)}
@@ -362,8 +387,8 @@ function InputGroupTextarea({ className, ...props }: InputGroupTextareaProps) {
 			className={cn(
 				"flex-1 min-w-0 w-full resize-none",
 				"border-0 bg-transparent shadow-none outline-none",
-				"text-14 font-medium placeholder:text-text-muted",
-				"px-12 py-10",
+				"typography-ui-text-sm text-left placeholder:text-text-muted",
+				"px-spatial-ui-input-group-padding-x-medium py-spatial-ui-input-group-padding-y-medium",
 				"focus-visible:ring-0",
 				className,
 			)}

package/src/components/atoms/input/input.stories.tsx

@@ -70,33 +70,29 @@ export const Disabled = () => <Input disabled placeholder="Disabled input" />;
  * All states comparison
  */
 export const AllStates = () => (
-	<div className="flex flex-col gap-spacing-16 max-w-[320px]">
+	<div className="flex flex-col gap-16 max-w-[320px]">
 		<div>
-			<p className="mb-spacing-8 text-12 text-text-muted">Default</p>
+			<p className="mb-8 text-12 text-text-muted">Default</p>
 			<Input placeholder="Enter text..." />
 		</div>
 		<div>
-			<p className="mb-spacing-8 text-12 text-text-muted">
-				Hover (hover the input)
-			</p>
+			<p className="mb-8 text-12 text-text-muted">Hover (hover the input)</p>
 			<Input placeholder="Hover me..." />
 		</div>
 		<div>
-			<p className="mb-spacing-8 text-12 text-text-muted">
-				Focus (click the input)
-			</p>
+			<p className="mb-8 text-12 text-text-muted">Focus (click the input)</p>
 			<Input placeholder="Click to focus..." />
 		</div>
 		<div>
-			<p className="mb-spacing-8 text-12 text-text-muted">Filled</p>
+			<p className="mb-8 text-12 text-text-muted">Filled</p>
 			<Input defaultValue="Filled content" />
 		</div>
 		<div>
-			<p className="mb-spacing-8 text-12 text-text-muted">Error</p>
+			<p className="mb-8 text-12 text-text-muted">Error</p>
 			<Input error placeholder="Invalid input" />
 		</div>
 		<div>
-			<p className="mb-spacing-8 text-12 text-text-muted">Disabled</p>
+			<p className="mb-8 text-12 text-text-muted">Disabled</p>
 			<Input disabled placeholder="Disabled input" />
 		</div>
 	</div>
@@ -127,17 +123,17 @@ export const Large = () => <Input size="lg" placeholder="Large input" />;
  * All sizes comparison
  */
 export const AllSizes = () => (
-	<div className="flex flex-col gap-spacing-16 max-w-[320px]">
+	<div className="flex flex-col gap-16 max-w-[320px]">
 		<div>
-			<p className="mb-spacing-8 text-12 text-text-muted">Small (36px)</p>
+			<p className="mb-8 text-12 text-text-muted">Small (36px)</p>
 			<Input size="sm" placeholder="Small input" />
 		</div>
 		<div>
-			<p className="mb-spacing-8 text-12 text-text-muted">Default (48px)</p>
+			<p className="mb-8 text-12 text-text-muted">Default (48px)</p>
 			<Input size="default" placeholder="Default input" />
 		</div>
 		<div>
-			<p className="mb-spacing-8 text-12 text-text-muted">Large (56px)</p>
+			<p className="mb-8 text-12 text-text-muted">Large (56px)</p>
 			<Input size="lg" placeholder="Large input" />
 		</div>
 	</div>
@@ -181,7 +177,7 @@ export const SearchType = () => <Input type="search" placeholder="Search..." />;
  * Form field example with label
  */
 export const WithLabel = () => (
-	<div className="flex flex-col gap-spacing-8 max-w-[320px]">
+	<div className="flex flex-col gap-8 max-w-[320px]">
 		<label
 			htmlFor="email-input"
 			className="text-14 font-medium text-text-primary"
@@ -196,7 +192,7 @@ export const WithLabel = () => (
  * Form field with error message
  */
 export const WithErrorMessage = () => (
-	<div className="flex flex-col gap-spacing-8 max-w-[320px]">
+	<div className="flex flex-col gap-8 max-w-[320px]">
 		<label
 			htmlFor="email-error"
 			className="text-14 font-medium text-text-primary"
@@ -220,7 +216,7 @@ export const WithErrorMessage = () => (
  * Required field indicator
  */
 export const RequiredField = () => (
-	<div className="flex flex-col gap-spacing-8 max-w-[320px]">
+	<div className="flex flex-col gap-8 max-w-[320px]">
 		<label
 			htmlFor="required-input"
 			className="text-14 font-medium text-text-primary"

package/src/components/atoms/input/input.test.tsx

@@ -105,44 +105,28 @@ describe("Input", () => {
 	});
 
 	describe("Variants", () => {
-		test("applies default size classes", async () => {
+		test("applies default size", async () => {
 			render(<Input placeholder="Default" />);
 			const input = page.getByRole("textbox");
 			await expect.element(input).toHaveAttribute("data-size", "default");
-			await expect.element(input).toHaveClass(/h-48/);
 		});
 
-		test("applies small size classes", async () => {
+		test("applies small size", async () => {
 			render(<Input size="sm" placeholder="Small" />);
 			const input = page.getByRole("textbox");
 			await expect.element(input).toHaveAttribute("data-size", "sm");
-			await expect.element(input).toHaveClass(/h-36/);
 		});
 
-		test("applies large size classes", async () => {
+		test("applies large size", async () => {
 			render(<Input size="lg" placeholder="Large" />);
 			const input = page.getByRole("textbox");
 			await expect.element(input).toHaveAttribute("data-size", "lg");
-			await expect.element(input).toHaveClass(/h-56/);
 		});
 
-		test("applies error state classes", async () => {
+		test("applies error state", async () => {
 			render(<Input error placeholder="Error" />);
 			const input = page.getByRole("textbox");
 			await expect.element(input).toHaveAttribute("data-error", "true");
-			await expect.element(input).toHaveClass(/border-ui-error-color/);
-		});
-
-		test("applies semantic token classes for background", async () => {
-			render(<Input placeholder="Default" />);
-			const input = page.getByRole("textbox");
-			await expect.element(input).toHaveClass(/bg-ui-control-background/);
-		});
-
-		test("applies semantic token classes for border", async () => {
-			render(<Input placeholder="Default" />);
-			const input = page.getByRole("textbox");
-			await expect.element(input).toHaveClass(/border-ui-color-border/);
 		});
 	});
 

package/src/components/atoms/input/input.tsx

@@ -2,13 +2,20 @@
 
 import * as React from "react";
 import { tv, type VariantProps } from "tailwind-variants";
-import {
-	formControlBase,
-	formControlError,
-	formControlSizes,
-} from "@/lib/form-control";
+import { formControlBase, formControlError } from "@/lib/form-control";
 import { cn } from "@/lib/utils";
 
+/**
+ * Input-specific size variants using semantic input tokens.
+ * These tokens allow input sizing to be customized independently from other controls.
+ */
+const inputSizes = {
+	sm: "h-spatial-ui-input-height-small px-spatial-ui-input-padding-x-small py-spatial-ui-input-padding-y-small typography-body-sm-md",
+	default:
+		"h-spatial-ui-input-height-medium px-spatial-ui-input-padding-x-medium py-spatial-ui-input-padding-y-medium typography-body-md-md",
+	lg: "h-spatial-ui-input-height-large px-spatial-ui-input-padding-x-large py-spatial-ui-input-padding-y-large typography-body-md-lg",
+} as const;
+
 /**
  * Input variants for styling based on Figma BaseKit / Interface / Input
  *
@@ -20,9 +27,9 @@ import { cn } from "@/lib/utils";
  * - Disabled: Disabled background (via :disabled)
  *
  * Sizes:
- * - sm: Smaller height and padding
- * - default: Standard 48px height
- * - lg: Larger height and padding
+ * - sm: Smaller height and padding (36px)
+ * - default: Standard height (48px)
+ * - lg: Larger height and padding (56px)
  */
 const inputVariants = tv({
 	base: [
@@ -31,7 +38,7 @@ const inputVariants = tv({
 		"placeholder:text-text-muted",
 	],
 	variants: {
-		size: formControlSizes,
+		size: inputSizes,
 		error: {
 			...formControlError,
 			true: `${formControlError.true} placeholder:text-ui-error-color/60`,

package/src/components/atoms/pager-control/pager-control.stories.tsx

@@ -130,28 +130,26 @@ export const Controlled = () => {
 	const [activeIndex, setActiveIndex] = React.useState(0);
 
 	return (
-		<div className="flex flex-col items-center gap-spacing-24">
+		<div className="flex flex-col items-center gap-24">
 			<PagerControl
 				count={4}
 				activeIndex={activeIndex}
 				onChange={setActiveIndex}
 				autoPlay={false}
 			/>
-			<div className="flex gap-spacing-10">
+			<div className="flex gap-10">
 				<button
 					type="button"
 					onClick={() => setActiveIndex((prev) => Math.max(0, prev - 1))}
-					className="rounded bg-gray-200 px-spacing-12 py-spacing-6"
+					className="rounded bg-gray-200 px-12 py-6"
 				>
 					Previous
 				</button>
-				<span className="px-spacing-12 py-spacing-6">
-					Page {activeIndex + 1} of 4
-				</span>
+				<span className="px-12 py-6">Page {activeIndex + 1} of 4</span>
 				<button
 					type="button"
 					onClick={() => setActiveIndex((prev) => Math.min(3, prev + 1))}
-					className="rounded bg-gray-200 px-spacing-12 py-spacing-6"
+					className="rounded bg-gray-200 px-12 py-6"
 				>
 					Next
 				</button>
@@ -174,7 +172,7 @@ export const WithCarousel = () => {
 	];
 
 	return (
-		<div className="flex w-[400px] flex-col gap-spacing-16">
+		<div className="flex w-[400px] flex-col gap-16">
 			<div className="relative h-[200px] overflow-hidden rounded-radius-12">
 				{slides.map((slide, index) => (
 					<div

package/src/components/atoms/pager-control/pager-control.tsx

@@ -9,9 +9,9 @@ const pagerControlVariants = tv({
 	variants: {
 		size: {
 			// Uses primitive spacing tokens
-			sm: "gap-spacing-2",
-			default: "gap-spacing-2",
-			lg: "gap-spacing-4",
+			sm: "gap-2",
+			default: "gap-2",
+			lg: "gap-4",
 		},
 	},
 	defaultVariants: {
@@ -24,9 +24,9 @@ const dotBaseVariants = tv({
 	variants: {
 		size: {
 			// Uses primitive spacing tokens
-			sm: "h-spacing-6",
-			default: "h-spacing-10",
-			lg: "h-spacing-16",
+			sm: "h-6",
+			default: "h-10",
+			lg: "h-16",
 		},
 		variant: {
 			charcoal: "",
@@ -245,20 +245,20 @@ const PagerControl = React.forwardRef<HTMLDivElement, PagerControlProps>(
 			if (isActive) {
 				switch (size) {
 					case "sm":
-						return "w-spacing-16";
+						return "w-16";
 					case "lg":
-						return "w-spacing-36";
+						return "w-36";
 					default:
-						return "w-spacing-28";
+						return "w-28";
 				}
 			}
 			switch (size) {
 				case "sm":
-					return "w-spacing-6";
+					return "w-6";
 				case "lg":
-					return "w-spacing-16";
+					return "w-16";
 				default:
-					return "w-spacing-10";
+					return "w-10";
 			}
 		};
 

package/src/components/atoms/popover/index.ts

@@ -0,0 +1,30 @@
+export type {
+	PopoverArrowProps,
+	PopoverBackdropProps,
+	PopoverCloseProps,
+	PopoverDescriptionProps,
+	PopoverPopupProps,
+	PopoverPortalProps,
+	PopoverPositionerProps,
+	PopoverProps,
+	PopoverRootProps,
+	PopoverTitleProps,
+	PopoverTriggerProps,
+} from "./popover";
+
+export {
+	Popover,
+	PopoverArrow,
+	PopoverBackdrop,
+	PopoverClose,
+	PopoverDescription,
+	PopoverParts,
+	PopoverPopup,
+	PopoverPortal,
+	PopoverPositioner,
+	PopoverRoot,
+	PopoverTitle,
+	PopoverTrigger,
+	popoverArrowVariants,
+	popoverPopupVariants,
+} from "./popover";