@nationaldesignstudio/react 0.2.0 → 0.5.0

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

@@ -0,0 +1,167 @@
+import { describe, expect, test, vi } from "vitest";
+import { page, userEvent } from "vitest/browser";
+import { render } from "vitest-browser-react";
+import { Input } from "./input";
+
+describe("Input", () => {
+	describe("Accessibility", () => {
+		test("has correct textbox role", async () => {
+			render(<Input placeholder="Enter text" />);
+			await expect.element(page.getByRole("textbox")).toBeInTheDocument();
+		});
+
+		test("is focusable via keyboard", async () => {
+			render(<Input placeholder="Focusable" />);
+			await userEvent.keyboard("{Tab}");
+			await expect.element(page.getByRole("textbox")).toHaveFocus();
+		});
+
+		test("disabled input has disabled attribute", async () => {
+			render(<Input disabled placeholder="Disabled" />);
+			await expect.element(page.getByRole("textbox")).toBeDisabled();
+		});
+
+		test("disabled input is not focusable", async () => {
+			render(
+				<>
+					<Input disabled placeholder="Disabled" />
+					<Input placeholder="After" />
+				</>,
+			);
+			await userEvent.keyboard("{Tab}");
+			// Focus should skip the disabled input and go to the next one
+			await expect.element(page.getByPlaceholder("After")).toHaveFocus();
+		});
+
+		test("input with aria-label has accessible name", async () => {
+			render(<Input aria-label="Search query" />);
+			await expect
+				.element(page.getByRole("textbox", { name: "Search query" }))
+				.toBeInTheDocument();
+		});
+
+		test("error state sets aria-invalid", async () => {
+			render(<Input error placeholder="Error input" />);
+			await expect
+				.element(page.getByRole("textbox"))
+				.toHaveAttribute("aria-invalid", "true");
+		});
+
+		test("non-error state does not have aria-invalid", async () => {
+			render(<Input placeholder="Normal input" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).not.toHaveAttribute("aria-invalid");
+		});
+	});
+
+	describe("Interactions", () => {
+		test("accepts text input", async () => {
+			render(<Input placeholder="Type here" />);
+			const input = page.getByRole("textbox");
+			await input.fill("Hello World");
+			await expect.element(input).toHaveValue("Hello World");
+		});
+
+		test("calls onChange when text is entered", async () => {
+			const handleChange = vi.fn();
+			render(<Input onChange={handleChange} placeholder="Type here" />);
+			await page.getByRole("textbox").fill("Test");
+			expect(handleChange).toHaveBeenCalled();
+		});
+
+		test("calls onFocus when focused", async () => {
+			const handleFocus = vi.fn();
+			render(<Input onFocus={handleFocus} placeholder="Focus me" />);
+			await page.getByRole("textbox").click();
+			expect(handleFocus).toHaveBeenCalledOnce();
+		});
+
+		test("calls onBlur when focus is lost", async () => {
+			const handleBlur = vi.fn();
+			render(
+				<>
+					<Input onBlur={handleBlur} placeholder="Blur me" />
+					<button type="button">Other</button>
+				</>,
+			);
+			await page.getByRole("textbox").click();
+			await page.getByRole("button").click();
+			expect(handleBlur).toHaveBeenCalledOnce();
+		});
+
+		test("respects maxLength attribute", async () => {
+			render(<Input maxLength={5} placeholder="Max 5 chars" />);
+			const input = page.getByRole("textbox");
+			await input.fill("1234567890");
+			await expect.element(input).toHaveValue("12345");
+		});
+
+		test("respects readonly attribute", async () => {
+			render(<Input readOnly defaultValue="Read only" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("readonly", "");
+			await expect.element(input).toHaveValue("Read only");
+		});
+	});
+
+	describe("Variants", () => {
+		test("applies default size", async () => {
+			render(<Input placeholder="Default" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("data-size", "default");
+		});
+
+		test("applies small size", async () => {
+			render(<Input size="sm" placeholder="Small" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("data-size", "sm");
+		});
+
+		test("applies large size", async () => {
+			render(<Input size="lg" placeholder="Large" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("data-size", "lg");
+		});
+
+		test("applies error state", async () => {
+			render(<Input error placeholder="Error" />);
+			const input = page.getByRole("textbox");
+			await expect.element(input).toHaveAttribute("data-error", "true");
+		});
+	});
+
+	describe("Input Types", () => {
+		test("renders email type", async () => {
+			render(<Input type="email" placeholder="Email" />);
+			await expect
+				.element(page.getByRole("textbox"))
+				.toHaveAttribute("type", "email");
+		});
+
+		test("renders password type", async () => {
+			render(<Input type="password" placeholder="Password" />);
+			// Password inputs don't have textbox role
+			const input = page.getByPlaceholder("Password");
+			await expect.element(input).toHaveAttribute("type", "password");
+		});
+
+		test("renders number type", async () => {
+			render(<Input type="number" placeholder="Number" />);
+			const input = page.getByRole("spinbutton");
+			await expect.element(input).toHaveAttribute("type", "number");
+		});
+
+		test("renders search type", async () => {
+			render(<Input type="search" placeholder="Search" />);
+			const input = page.getByRole("searchbox");
+			await expect.element(input).toHaveAttribute("type", "search");
+		});
+
+		test("defaults to text type", async () => {
+			render(<Input placeholder="Default type" />);
+			await expect
+				.element(page.getByRole("textbox"))
+				.toHaveAttribute("type", "text");
+		});
+	});
+});

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

@@ -0,0 +1,104 @@
+"use client";
+
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+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
+ *
+ * States (handled via CSS pseudo-classes and props):
+ * - Default: White background, subtle border
+ * - Hover: Light gray background (via :hover)
+ * - Focus: Accent border with focus ring (via :focus-visible)
+ * - Error: Error border color (via error prop)
+ * - Disabled: Disabled background (via :disabled)
+ *
+ * Sizes:
+ * - sm: Smaller height and padding (36px)
+ * - default: Standard height (48px)
+ * - lg: Larger height and padding (56px)
+ */
+const inputVariants = tv({
+	base: [
+		...formControlBase,
+		// Input-specific: Placeholder styling
+		"placeholder:text-text-muted",
+	],
+	variants: {
+		size: inputSizes,
+		error: {
+			...formControlError,
+			true: `${formControlError.true} placeholder:text-ui-error-color/60`,
+		},
+	},
+	defaultVariants: {
+		size: "default",
+		error: false,
+	},
+});
+
+export interface InputProps
+	extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size">,
+		VariantProps<typeof inputVariants> {
+	/**
+	 * Whether the input is in an error state
+	 */
+	error?: boolean;
+}
+
+/**
+ * Input component based on Figma BaseKit / Interface / Input
+ *
+ * A styled text input with support for various states:
+ * - Default, hover, focus, error, and disabled states
+ * - Three size variants: sm, default, lg
+ *
+ * Uses semantic UI tokens for theming support.
+ *
+ * @example
+ * ```tsx
+ * // Basic usage
+ * <Input placeholder="Enter your email" />
+ *
+ * // With error state
+ * <Input error placeholder="Invalid input" />
+ *
+ * // Different sizes
+ * <Input size="sm" placeholder="Small" />
+ * <Input size="lg" placeholder="Large" />
+ *
+ * // Disabled
+ * <Input disabled placeholder="Disabled input" />
+ * ```
+ */
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+	({ className, size, error, type = "text", ...props }, ref) => {
+		return (
+			<input
+				ref={ref}
+				type={type}
+				aria-invalid={error || undefined}
+				className={cn(inputVariants({ size, error, class: className }))}
+				data-size={size ?? "default"}
+				data-error={error ?? false}
+				{...props}
+			/>
+		);
+	},
+);
+Input.displayName = "Input";
+
+export { Input, inputVariants };

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