@nationaldesignstudio/react 0.3.0 → 0.5.0

package/src/components/atoms/button/icon-button.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { IconButton } from ".";
 
-// Simple placeholder icons for stories
 const SearchIcon = () => (
 	<svg
 		width="16"
@@ -66,7 +65,7 @@ Playground.argTypes = {
 		control: {
 			type: "radio",
 		},
-		options: ["sm", "default", "lg"],
+		options: ["sm", "md", "lg"],
 	},
 	disabled: {
 		control: {
@@ -77,42 +76,38 @@ Playground.argTypes = {
 		control: {
 			type: "radio",
 		},
-		options: ["solid", "outline", "ghost", "subtle"],
-	},
-	colorScheme: {
-		control: {
-			type: "radio",
-		},
-		options: ["dark", "light"],
+		options: [
+			"primary",
+			"primary-outline",
+			"secondary",
+			"secondary-outline",
+			"ghost",
+			"ghost-inverse",
+		],
 	},
 	rounded: {
 		control: {
 			type: "radio",
 		},
-		options: ["default", "sm", "full"],
+		options: ["default", "full"],
 	},
 };
 Playground.args = {
-	size: "default",
+	size: "md",
 	disabled: false,
-	variant: "solid",
-	colorScheme: "dark",
+	variant: "primary",
 	rounded: "default",
 	"aria-label": "Search",
 };
 
-// =============================================================================
-// Variants (Dark Color Scheme - for light backgrounds)
-// =============================================================================
-
-export const Solid = () => (
-	<IconButton variant="solid" aria-label="Search">
+export const Primary = () => (
+	<IconButton variant="primary" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const Outline = () => (
-	<IconButton variant="outline" aria-label="Search">
+export const PrimaryOutline = () => (
+	<IconButton variant="primary-outline" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
@@ -123,92 +118,64 @@ export const Ghost = () => (
 	</IconButton>
 );
 
-export const Subtle = () => (
-	<IconButton variant="subtle" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
-// =============================================================================
-// Variants (Light Color Scheme - for dark backgrounds)
-// =============================================================================
-
 const DarkBackground = ({ children }: { children: React.ReactNode }) => (
-	<div className="rounded-radius-12 bg-gray-1200 p-spacing-32">{children}</div>
-);
-
-export const SolidLight = () => (
-	<DarkBackground>
-		<IconButton variant="solid" colorScheme="light" aria-label="Navigate">
-			<ArrowRightIcon />
-		</IconButton>
-	</DarkBackground>
+	<div className="rounded-radius-12 bg-gray-1200 p-32">{children}</div>
 );
 
-export const OutlineLight = () => (
+export const Secondary = () => (
 	<DarkBackground>
-		<IconButton variant="outline" colorScheme="light" aria-label="Navigate">
+		<IconButton variant="secondary" aria-label="Navigate">
 			<ArrowRightIcon />
 		</IconButton>
 	</DarkBackground>
 );
 
-export const GhostLight = () => (
+export const SecondaryOutline = () => (
 	<DarkBackground>
-		<IconButton variant="ghost" colorScheme="light" aria-label="Navigate">
+		<IconButton variant="secondary-outline" aria-label="Navigate">
 			<ArrowRightIcon />
 		</IconButton>
 	</DarkBackground>
 );
 
-export const SubtleLight = () => (
+export const GhostInverse = () => (
 	<DarkBackground>
-		<IconButton variant="subtle" colorScheme="light" aria-label="Navigate">
+		<IconButton variant="ghost-inverse" aria-label="Navigate">
 			<ArrowRightIcon />
 		</IconButton>
 	</DarkBackground>
 );
 
-// =============================================================================
-// All Variants Comparison
-// =============================================================================
-
 export const AllVariants = () => (
-	<div className="flex flex-col gap-spacing-32">
+	<div className="flex flex-col gap-32">
 		<div>
-			<h3 className="mb-spacing-16 text-14 font-medium text-text-secondary">
-				Dark Color Scheme (for light backgrounds)
+			<h3 className="mb-16 text-14 font-medium text-text-secondary">
+				For Light Backgrounds
 			</h3>
-			<div className="flex gap-spacing-16">
-				<IconButton variant="solid" aria-label="Solid">
+			<div className="flex gap-16">
+				<IconButton variant="primary" aria-label="Primary">
 					<SearchIcon />
 				</IconButton>
-				<IconButton variant="outline" aria-label="Outline">
+				<IconButton variant="primary-outline" aria-label="Primary Outline">
 					<SearchIcon />
 				</IconButton>
 				<IconButton variant="ghost" aria-label="Ghost">
 					<SearchIcon />
 				</IconButton>
-				<IconButton variant="subtle" aria-label="Subtle">
-					<SearchIcon />
-				</IconButton>
 			</div>
 		</div>
 		<DarkBackground>
-			<h3 className="mb-spacing-16 text-14 font-medium text-gray-400">
-				Light Color Scheme (for dark backgrounds)
+			<h3 className="mb-16 text-14 font-medium text-gray-400">
+				For Dark Backgrounds
 			</h3>
-			<div className="flex gap-spacing-16">
-				<IconButton variant="solid" colorScheme="light" aria-label="Solid">
-					<ArrowRightIcon />
-				</IconButton>
-				<IconButton variant="outline" colorScheme="light" aria-label="Outline">
+			<div className="flex gap-16">
+				<IconButton variant="secondary" aria-label="Secondary">
 					<ArrowRightIcon />
 				</IconButton>
-				<IconButton variant="ghost" colorScheme="light" aria-label="Ghost">
+				<IconButton variant="secondary-outline" aria-label="Secondary Outline">
 					<ArrowRightIcon />
 				</IconButton>
-				<IconButton variant="subtle" colorScheme="light" aria-label="Subtle">
+				<IconButton variant="ghost-inverse" aria-label="Ghost Inverse">
 					<ArrowRightIcon />
 				</IconButton>
 			</div>
@@ -216,22 +183,12 @@ export const AllVariants = () => (
 	</div>
 );
 
-// =============================================================================
-// Rounded Variants
-// =============================================================================
-
 export const RoundedDefault = () => (
 	<IconButton rounded="default" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const RoundedSm = () => (
-	<IconButton rounded="sm" aria-label="Search">
-		<SearchIcon />
-	</IconButton>
-);
-
 export const RoundedFull = () => (
 	<IconButton rounded="full" aria-label="Search">
 		<SearchIcon />
@@ -239,32 +196,22 @@ export const RoundedFull = () => (
 );
 
 export const AllRounded = () => (
-	<div className="flex gap-spacing-16">
+	<div className="flex gap-16">
 		<div className="text-center">
 			<IconButton rounded="default" aria-label="Default rounded">
 				<SearchIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">default</p>
-		</div>
-		<div className="text-center">
-			<IconButton rounded="sm" aria-label="Small rounded">
-				<SearchIcon />
-			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">sm</p>
+			<p className="mt-8 text-12 text-text-muted">default</p>
 		</div>
 		<div className="text-center">
 			<IconButton rounded="full" aria-label="Full rounded">
 				<SearchIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">full</p>
+			<p className="mt-8 text-12 text-text-muted">full</p>
 		</div>
 	</div>
 );
 
-// =============================================================================
-// Sizes
-// =============================================================================
-
 export const Small = () => (
 	<IconButton size="sm" aria-label="Search">
 		<ArrowRightIcon />
@@ -272,7 +219,7 @@ export const Small = () => (
 );
 
 export const Medium = () => (
-	<IconButton size="default" aria-label="Search">
+	<IconButton size="md" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
@@ -284,32 +231,28 @@ export const Large = () => (
 );
 
 export const AllSizes = () => (
-	<div className="flex items-center gap-spacing-16">
+	<div className="flex items-center gap-16">
 		<div className="text-center">
 			<IconButton size="sm" aria-label="Small">
 				<ArrowRightIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">sm (32px)</p>
+			<p className="mt-8 text-12 text-text-muted">sm (28px)</p>
 		</div>
 		<div className="text-center">
-			<IconButton size="default" aria-label="Default">
+			<IconButton size="md" aria-label="Default">
 				<SearchIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">default (40px)</p>
+			<p className="mt-8 text-12 text-text-muted">md (40px)</p>
 		</div>
 		<div className="text-center">
 			<IconButton size="lg" aria-label="Large">
 				<SearchIcon />
 			</IconButton>
-			<p className="mt-spacing-8 text-12 text-text-muted">lg (48px)</p>
+			<p className="mt-8 text-12 text-text-muted">lg (56px)</p>
 		</div>
 	</div>
 );
 
-// =============================================================================
-// States
-// =============================================================================
-
 export const Disabled = () => (
 	<IconButton disabled aria-label="Search">
 		<SearchIcon />

package/src/components/atoms/button/icon-button.test.tsx

@@ -3,7 +3,6 @@ import { page, userEvent } from "vitest/browser";
 import { render } from "vitest-browser-react";
 import { IconButton } from "./icon-button";
 
-// Simple icon for testing
 const TestIcon = () => (
 	// biome-ignore lint/a11y/noSvgWithoutTitle: Test component doesn't need accessibility title
 	<svg data-testid="test-icon" width="24" height="24" viewBox="0 0 24 24">
@@ -139,116 +138,49 @@ describe("IconButton", () => {
 		});
 	});
 
-	describe("Data attributes", () => {
-		test("includes data-variant attribute", async () => {
-			render(
-				<IconButton variant="ghost" aria-label="Ghost variant">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Ghost variant" }))
-				.toHaveAttribute("data-variant", "ghost");
-		});
-
-		test("includes data-size attribute", async () => {
-			render(
-				<IconButton size="lg" aria-label="Large size">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Large size" }))
-				.toHaveAttribute("data-size", "lg");
-		});
-
-		test("includes data-color-scheme attribute", async () => {
-			render(
-				<IconButton colorScheme="light" aria-label="Light scheme">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Light scheme" }))
-				.toHaveAttribute("data-color-scheme", "light");
-		});
-
-		test("includes data-rounded attribute", async () => {
-			render(
-				<IconButton rounded="full" aria-label="Full rounded">
-					<TestIcon />
-				</IconButton>,
-			);
-			await expect
-				.element(page.getByRole("button", { name: "Full rounded" }))
-				.toHaveAttribute("data-rounded", "full");
-		});
-
-		test("has default data attributes when not specified", async () => {
-			render(
-				<IconButton aria-label="Defaults">
-					<TestIcon />
-				</IconButton>,
-			);
-			const button = page.getByRole("button", { name: "Defaults" });
-			await expect.element(button).toHaveAttribute("data-variant", "solid");
-			await expect.element(button).toHaveAttribute("data-size", "default");
-			await expect.element(button).toHaveAttribute("data-color-scheme", "dark");
-			await expect.element(button).toHaveAttribute("data-rounded", "default");
-		});
-	});
-
 	describe("Variants", () => {
-		test("applies solid variant classes by default", async () => {
+		test("primary variant has visible background color", async () => {
 			render(
 				<IconButton aria-label="Default">
 					<TestIcon />
 				</IconButton>,
 			);
 			const button = page.getByRole("button", { name: "Default" });
-			await expect.element(button).toHaveClass(/bg-gray-1200/);
-		});
+			await expect.element(button).toBeInTheDocument();
 
-		test("applies ghost variant classes", async () => {
-			render(
-				<IconButton variant="ghost" aria-label="Ghost">
-					<TestIcon />
-				</IconButton>,
-			);
-			const button = page.getByRole("button", { name: "Ghost" });
-			await expect.element(button).toHaveClass(/text-gray-700/);
+			const element = button.element();
+			const bgColor = window.getComputedStyle(element).backgroundColor;
+			expect(bgColor).not.toBe("rgba(0, 0, 0, 0)");
+			expect(bgColor).not.toBe("transparent");
 		});
 	});
 
 	describe("Sizes", () => {
-		test("applies small size classes", async () => {
+		test("different sizes have different dimensions", async () => {
 			render(
-				<IconButton size="sm" aria-label="Small">
-					<TestIcon />
-				</IconButton>,
+				<>
+					<IconButton size="sm" aria-label="Small">
+						<TestIcon />
+					</IconButton>
+					<IconButton size="lg" aria-label="Large">
+						<TestIcon />
+					</IconButton>
+				</>,
 			);
-			const button = page.getByRole("button", { name: "Small" });
-			await expect.element(button).toHaveClass(/size-32/);
-		});
 
-		test("applies default size classes", async () => {
-			render(
-				<IconButton size="default" aria-label="Default">
-					<TestIcon />
-				</IconButton>,
-			);
-			const button = page.getByRole("button", { name: "Default" });
-			await expect.element(button).toHaveClass(/size-40/);
-		});
+			const smallBtn = page.getByRole("button", { name: "Small" });
+			const largeBtn = page.getByRole("button", { name: "Large" });
+			await expect.element(smallBtn).toBeInTheDocument();
+			await expect.element(largeBtn).toBeInTheDocument();
 
-		test("applies large size classes", async () => {
-			render(
-				<IconButton size="lg" aria-label="Large">
-					<TestIcon />
-				</IconButton>,
+			const smallWidth = Number.parseFloat(
+				window.getComputedStyle(smallBtn.element()).width,
+			);
+			const largeWidth = Number.parseFloat(
+				window.getComputedStyle(largeBtn.element()).width,
 			);
-			const button = page.getByRole("button", { name: "Large" });
-			await expect.element(button).toHaveClass(/size-48/);
+
+			expect(largeWidth).toBeGreaterThan(smallWidth);
 		});
 	});
 });

package/src/components/atoms/button/icon-button.tsx

@@ -61,9 +61,9 @@ const iconButtonVariants = tv({
 				"bg-button-ghost-inverse-bg text-button-ghost-inverse-text hover:bg-button-ghost-inverse-bg-hover hover:text-button-ghost-inverse-text-hover border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
 		},
 		size: {
-			sm: "size-28 rounded-4",
-			md: "size-40 rounded-6",
-			lg: "size-56 rounded-10",
+			sm: "size-28 rounded-surface-button-small",
+			md: "size-40 rounded-surface-button-medium",
+			lg: "size-56 rounded-surface-button-large",
 		},
 		rounded: {
 			default: "",

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

@@ -279,7 +279,7 @@ export const ChatInput = () => (
 			<InputGroupText>52% used</InputGroupText>
 			<span className="ml-auto h-16 w-px bg-ui-color-border" />
 			<InputGroupButton
-				variant="solid"
+				variant="primary"
 				className="rounded-full"
 				size="icon-sm"
 				aria-label="Send"
@@ -343,7 +343,7 @@ export const PillInput = () => (
 	<InputGroup className="max-w-sm rounded-full">
 		<InputGroupAddon>
 			<InputGroupButton
-				variant="outline"
+				variant="primary-outline"
 				size="icon-xs"
 				className="rounded-full"
 			>
@@ -474,7 +474,7 @@ export const TextareaWithActions = () => (
 			className="border-t border-ui-color-border pt-8"
 		>
 			<InputGroupText>Line 1, Column 1</InputGroupText>
-			<InputGroupButton className="ml-auto" size="sm" variant="solid">
+			<InputGroupButton className="ml-auto" size="sm" variant="primary">
 				Run <SendIcon />
 			</InputGroupButton>
 		</InputGroupAddon>
@@ -552,11 +552,7 @@ export const WithLabel = () => (
 			</InputGroupAddon>
 		</InputGroup>
 		<InputGroup>
-			<InputGroupInput
-				id="email-2"
-				placeholder="shadcn@vercel.com"
-				className="!pl-12"
-			/>
+			<InputGroupInput id="email-2" placeholder="shadcn@vercel.com" />
 			<InputGroupAddon align="block-start">
 				<label
 					htmlFor="email-2"

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

@@ -151,34 +151,34 @@ describe("InputGroup", () => {
 	});
 
 	describe("Variants", () => {
-		test("applies default size classes", async () => {
+		test("renders with default size", async () => {
 			render(
 				<InputGroup>
 					<InputGroupInput placeholder="Default" />
 				</InputGroup>,
 			);
 			const group = page.getByRole("group");
-			await expect.element(group).toHaveClass(/h-36/);
+			await expect.element(group).toBeInTheDocument();
 		});
 
-		test("applies small size classes", async () => {
+		test("renders with small size", async () => {
 			render(
 				<InputGroup size="sm">
 					<InputGroupInput placeholder="Small" />
 				</InputGroup>,
 			);
 			const group = page.getByRole("group");
-			await expect.element(group).toHaveClass(/h-32/);
+			await expect.element(group).toBeInTheDocument();
 		});
 
-		test("applies large size classes", async () => {
+		test("renders with large size", async () => {
 			render(
 				<InputGroup size="lg">
 					<InputGroupInput placeholder="Large" />
 				</InputGroup>,
 			);
 			const group = page.getByRole("group");
-			await expect.element(group).toHaveClass(/h-48/);
+			await expect.element(group).toBeInTheDocument();
 		});
 
 		test("applies disabled data attribute", async () => {
@@ -191,29 +191,19 @@ describe("InputGroup", () => {
 			await expect.element(group).toHaveAttribute("data-disabled", "true");
 		});
 
-		test("applies semantic token classes for background", async () => {
+		test("has expected data-slot attribute", async () => {
 			render(
 				<InputGroup>
 					<InputGroupInput placeholder="Default" />
 				</InputGroup>,
 			);
 			const group = page.getByRole("group").first();
-			await expect.element(group).toHaveClass(/bg-ui-control-background/);
-		});
-
-		test("applies semantic token classes for border", async () => {
-			render(
-				<InputGroup>
-					<InputGroupInput placeholder="Default" />
-				</InputGroup>,
-			);
-			const group = page.getByRole("group").first();
-			await expect.element(group).toHaveClass(/border-ui-color-border/);
+			await expect.element(group).toHaveAttribute("data-slot", "input-group");
 		});
 	});
 
 	describe("Addon Positioning", () => {
-		test("inline-start addon appears first", async () => {
+		test("inline-start addon has correct data-align", async () => {
 			render(
 				<InputGroup>
 					<InputGroupAddon data-testid="start-addon">
@@ -224,10 +214,9 @@ describe("InputGroup", () => {
 			);
 			const addon = page.getByTestId("start-addon");
 			await expect.element(addon).toHaveAttribute("data-align", "inline-start");
-			await expect.element(addon).toHaveClass(/order-first/);
 		});
 
-		test("inline-end addon appears last", async () => {
+		test("inline-end addon has correct data-align", async () => {
 			render(
 				<InputGroup>
 					<InputGroupInput placeholder="Input" />
@@ -238,10 +227,9 @@ describe("InputGroup", () => {
 			);
 			const addon = page.getByTestId("end-addon");
 			await expect.element(addon).toHaveAttribute("data-align", "inline-end");
-			await expect.element(addon).toHaveClass(/order-last/);
 		});
 
-		test("block-start addon appears first with full width", async () => {
+		test("block-start addon has correct data-align", async () => {
 			render(
 				<InputGroup>
 					<InputGroupAddon align="block-start" data-testid="block-start-addon">
@@ -252,10 +240,9 @@ describe("InputGroup", () => {
 			);
 			const addon = page.getByTestId("block-start-addon");
 			await expect.element(addon).toHaveAttribute("data-align", "block-start");
-			await expect.element(addon).toHaveClass(/w-full/);
 		});
 
-		test("block-end addon appears last with full width", async () => {
+		test("block-end addon has correct data-align", async () => {
 			render(
 				<InputGroup>
 					<InputGroupInput placeholder="Input" />
@@ -266,7 +253,6 @@ describe("InputGroup", () => {
 			);
 			const addon = page.getByTestId("block-end-addon");
 			await expect.element(addon).toHaveAttribute("data-align", "block-end");
-			await expect.element(addon).toHaveClass(/w-full/);
 		});
 	});
 
@@ -327,7 +313,7 @@ describe("InputGroup", () => {
 			await expect.element(page.getByText("https://")).toBeInTheDocument();
 		});
 
-		test("applies text styling", async () => {
+		test("renders text element", async () => {
 			render(
 				<InputGroup>
 					<InputGroupAddon>
@@ -337,7 +323,7 @@ describe("InputGroup", () => {
 				</InputGroup>,
 			);
 			const text = page.getByTestId("text");
-			await expect.element(text).toHaveClass(/text-text-muted/);
+			await expect.element(text).toBeInTheDocument();
 		});
 	});