@nationaldesignstudio/react 0.0.10 → 0.0.11

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

@@ -1,141 +0,0 @@
-import { describe, expect, test, vi } from "vitest";
-import { page, userEvent } from "vitest/browser";
-import { render } from "vitest-browser-react";
-import { Button } from "./button";
-
-describe("Button", () => {
-	describe("Accessibility", () => {
-		test("has correct button role", async () => {
-			render(<Button>Click me</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Click me" }))
-				.toBeInTheDocument();
-		});
-
-		test("is focusable via keyboard", async () => {
-			render(<Button>Focusable</Button>);
-			await userEvent.keyboard("{Tab}");
-			await expect
-				.element(page.getByRole("button", { name: "Focusable" }))
-				.toHaveFocus();
-		});
-
-		test("disabled button has disabled attribute", async () => {
-			render(<Button disabled>Disabled</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Disabled" }))
-				.toBeDisabled();
-		});
-
-		test("disabled button is not focusable", async () => {
-			render(
-				<>
-					<Button disabled>Disabled</Button>
-					<Button>After</Button>
-				</>,
-			);
-			await userEvent.keyboard("{Tab}");
-			// Focus should skip the disabled button and go to the next one
-			await expect
-				.element(page.getByRole("button", { name: "After" }))
-				.toHaveFocus();
-		});
-
-		test("button with aria-label has accessible name", async () => {
-			render(<Button aria-label="Close dialog">×</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Close dialog" }))
-				.toBeInTheDocument();
-		});
-
-		test("button type defaults to button (not submit)", async () => {
-			render(<Button>Click me</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Click me" }))
-				.toHaveAttribute("type", "button");
-		});
-
-		test("button type can be set explicitly to submit", async () => {
-			render(<Button type="submit">Submit</Button>);
-			await expect
-				.element(page.getByRole("button", { name: "Submit" }))
-				.toHaveAttribute("type", "submit");
-		});
-	});
-
-	describe("Interactions", () => {
-		test("calls onClick when clicked", async () => {
-			const handleClick = vi.fn();
-			render(<Button onClick={handleClick}>Click me</Button>);
-			await page.getByRole("button", { name: "Click me" }).click();
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		test("responds to Enter key when focused", async () => {
-			const handleClick = vi.fn();
-			render(<Button onClick={handleClick}>Enter key</Button>);
-			page.getByRole("button", { name: "Enter key" }).element().focus();
-			await userEvent.keyboard("{Enter}");
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		test("responds to Space key when focused", async () => {
-			const handleClick = vi.fn();
-			render(<Button onClick={handleClick}>Space key</Button>);
-			page.getByRole("button", { name: "Space key" }).element().focus();
-			await userEvent.keyboard(" ");
-			expect(handleClick).toHaveBeenCalledOnce();
-		});
-
-		test("does not fire onClick when disabled", async () => {
-			const handleClick = vi.fn();
-			render(
-				<Button disabled onClick={handleClick}>
-					Disabled
-				</Button>,
-			);
-			await page
-				.getByRole("button", { name: "Disabled" })
-				.click({ force: true });
-			expect(handleClick).not.toHaveBeenCalled();
-		});
-
-		test("supports multiple clicks", async () => {
-			const handleClick = vi.fn();
-			render(<Button onClick={handleClick}>Multi click</Button>);
-			const button = page.getByRole("button", { name: "Multi click" });
-			await button.click();
-			await button.click();
-			await button.click();
-			expect(handleClick).toHaveBeenCalledTimes(3);
-		});
-	});
-
-	describe("render prop", () => {
-		test("renders as anchor element with button role when render prop is used", async () => {
-			render(
-				// biome-ignore lint/a11y/useAnchorContent: Content provided via Button children
-				<Button render={<a href="/test" />}>Link Button</Button>,
-			);
-			// Base UI keeps role="button" for accessibility when rendering as another element
-			const button = page.getByRole("button", { name: "Link Button" });
-			await expect.element(button).toBeInTheDocument();
-			await expect.element(button).toHaveAttribute("href", "/test");
-		});
-	});
-
-	describe("Variants", () => {
-		test("applies charcoal variant classes by default", async () => {
-			render(<Button>Default</Button>);
-			const button = page.getByRole("button", { name: "Default" });
-			await expect.element(button).toHaveClass(/bg-gray-1200/);
-		});
-
-		test("applies size classes correctly", async () => {
-			render(<Button size="lg">Large</Button>);
-			const button = page.getByRole("button", { name: "Large" });
-			// Large buttons have h-[46px]
-			await expect.element(button).toHaveClass(/h-\[46px\]/);
-		});
-	});
-});

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

@@ -1,95 +0,0 @@
-import {
-	Button as BaseButton,
-	type ButtonProps as BaseButtonProps,
-} from "@base-ui-components/react/button";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-/**
- * Button component based on Figma BaseKit / Interface / Buttons
- *
- * Variants:
- * - charcoal: Dark filled button (for light backgrounds)
- * - charcoalOutline: Dark outlined button (for light backgrounds)
- * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
- * - ivory: Light filled button (for dark backgrounds)
- * - ivoryOutline: Light outlined button (for dark backgrounds)
- * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
- * - secondary: Gray filled button (for dark backgrounds)
- *
- * Sizes:
- * - lg: Large buttons (46px height)
- * - default: Medium buttons (38px height)
- * - sm: Small buttons (33px height)
- *
- * For icon-only buttons, use the IconButton component instead.
- */
-const buttonVariants = cva(
-	"inline-flex items-center justify-center gap-spacing-6 whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-	{
-		variants: {
-			variant: {
-				// Charcoal (dark filled) - primary dark
-				charcoal:
-					"bg-gray-1200 text-gray-100 hover:bg-gray-1100 active:bg-gray-1000 focus-visible:ring-gray-1000",
-				// Charcoal Outline - outlined dark (for light backgrounds)
-				charcoalOutline:
-					"border border-alpha-black-30 text-gray-1000 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-				// Charcoal Outline Quiet - subtle outlined dark (for light backgrounds)
-				charcoalOutlineQuiet:
-					"border border-alpha-black-20 text-alpha-black-60 hover:border-alpha-black-30 hover:text-alpha-black-80 active:bg-alpha-black-5 focus-visible:ring-gray-1000",
-				// Ivory (light filled) - primary light (for dark backgrounds)
-				ivory:
-					"bg-gray-50 text-gray-1000 hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-				// Ivory Outline - outlined light (for dark backgrounds)
-				ivoryOutline:
-					"border border-gray-50 text-gray-50 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-				// Ivory Outline Quiet - subtle light outline (for dark backgrounds)
-				ivoryOutlineQuiet:
-					"border border-alpha-white-20 text-alpha-white-60 hover:border-alpha-white-30 hover:text-alpha-white-80 active:bg-alpha-white-5 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-				// Secondary - gray filled button (for dark backgrounds)
-				gray:
-					"bg-gray-800 text-gray-100 hover:bg-gray-700 active:bg-gray-600 focus-visible:ring-gray-700 focus-visible:ring-offset-gray-1000",
-			},
-			size: {
-				// Large - uses brand-large component tokens
-				lg: "px-spacing-brand-large-component-button-padding-x-large py-spacing-brand-large-component-button-padding-y-large rounded-[var(--spacing-brand-large-component-button-radius-large)] typography-brand-large-button-large h-spacing-brand-large-component-button-height-large",
-				// Medium (default) - uses brand-medium component tokens
-				default:
-					"px-spacing-brand-medium-component-button-padding-x-medium py-spacing-brand-medium-component-button-padding-y-medium rounded-[var(--spacing-brand-medium-component-button-radius-medium)] typography-brand-medium-button-small h-spacing-brand-medium-component-button-height-medium",
-				// Small - uses brand-small component tokens
-				sm: "px-spacing-brand-small-component-button-padding-x-small py-spacing-brand-small-component-button-padding-y-small rounded-[var(--spacing-brand-small-component-button-radius-small)] typography-brand-small-button-small h-spacing-brand-small-component-button-height-small",
-			},
-		},
-		defaultVariants: {
-			variant: "charcoal",
-			size: "default",
-		},
-	},
-);
-
-export type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
-export type ButtonProps = BaseButtonProps &
-	VariantProps<typeof buttonVariants> &
-	HTMLButtonProps;
-
-const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
-	({ className, variant, size, render, nativeButton, ...props }, ref) => {
-		// When render prop is provided, default nativeButton to false to suppress warnings
-		const isNativeButton = nativeButton ?? render === undefined;
-
-		return (
-			<BaseButton
-				className={cn(buttonVariants({ variant, size, className }))}
-				ref={ref}
-				render={render}
-				nativeButton={isNativeButton}
-				{...props}
-			/>
-		);
-	},
-);
-Button.displayName = "Button";
-
-export { Button, buttonVariants };

package/src/components/atoms/button/button.visual.test.tsx

@@ -1,102 +0,0 @@
-import { render } from "@testing-library/react";
-import { describe, expect, test } from "vitest";
-import { page } from "vitest/browser";
-import { Button } from "./button";
-
-describe("Button Visual Regression", () => {
-	test("charcoal variant renders correctly", async () => {
-		render(<Button variant="charcoal">Charcoal Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Charcoal Button" }),
-		).toMatchScreenshot("button-charcoal");
-	});
-
-	test("charcoalOutline variant renders correctly", async () => {
-		render(<Button variant="charcoalOutline">Charcoal Outline Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Charcoal Outline Button" }),
-		).toMatchScreenshot("button-charcoal-outline");
-	});
-
-	test("charcoalOutlineQuiet variant renders correctly", async () => {
-		render(
-			<Button variant="charcoalOutlineQuiet">Charcoal Outline Quiet</Button>,
-		);
-
-		await expect(
-			page.getByRole("button", { name: "Charcoal Outline Quiet" }),
-		).toMatchScreenshot("button-charcoal-outline-quiet");
-	});
-
-	test("ivory variant renders correctly", async () => {
-		render(
-			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivory">Ivory Button</Button>
-			</div>,
-		);
-
-		await expect(
-			page.getByRole("button", { name: "Ivory Button" }),
-		).toMatchScreenshot("button-ivory");
-	});
-
-	test("ivoryOutline variant renders correctly", async () => {
-		render(
-			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivoryOutline">Ivory Outline Button</Button>
-			</div>,
-		);
-
-		await expect(
-			page.getByRole("button", { name: "Ivory Outline Button" }),
-		).toMatchScreenshot("button-ivory-outline");
-	});
-
-	test("ivoryOutlineQuiet variant renders correctly", async () => {
-		render(
-			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
-			</div>,
-		);
-
-		await expect(
-			page.getByRole("button", { name: "Ivory Outline Quiet" }),
-		).toMatchScreenshot("button-ivory-outline-quiet");
-	});
-
-	// Size variants
-	test("small size renders correctly", async () => {
-		render(<Button size="sm">Small Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Small Button" }),
-		).toMatchScreenshot("button-size-small");
-	});
-
-	test("medium (default) size renders correctly", async () => {
-		render(<Button size="default">Medium Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Medium Button" }),
-		).toMatchScreenshot("button-size-medium");
-	});
-
-	test("large size renders correctly", async () => {
-		render(<Button size="lg">Large Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Large Button" }),
-		).toMatchScreenshot("button-size-large");
-	});
-
-	// Disabled state
-	test("disabled state renders correctly", async () => {
-		render(<Button disabled>Disabled Button</Button>);
-
-		await expect(
-			page.getByRole("button", { name: "Disabled Button" }),
-		).toMatchScreenshot("button-disabled");
-	});
-});

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

@@ -1,166 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react-vite";
-import { IconButton } from ".";
-
-// Simple placeholder icons for stories
-const SearchIcon = () => (
-	<svg
-		width="16"
-		height="16"
-		viewBox="0 0 16 16"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-	>
-		<path
-			d="M7.33333 12.6667C10.2789 12.6667 12.6667 10.2789 12.6667 7.33333C12.6667 4.38781 10.2789 2 7.33333 2C4.38781 2 2 4.38781 2 7.33333C2 10.2789 4.38781 12.6667 7.33333 12.6667Z"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-		<path
-			d="M14 14L11.1 11.1"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-	</svg>
-);
-
-const ArrowRightIcon = () => (
-	<svg
-		width="12"
-		height="12"
-		viewBox="0 0 12 12"
-		fill="none"
-		xmlns="http://www.w3.org/2000/svg"
-		aria-hidden="true"
-	>
-		<path
-			d="M2.5 6H9.5M9.5 6L6 2.5M9.5 6L6 9.5"
-			stroke="currentColor"
-			strokeWidth="1.5"
-			strokeLinecap="round"
-			strokeLinejoin="round"
-		/>
-	</svg>
-);
-
-const meta: Meta<typeof IconButton> = {
-	title: "Atoms/IconButton",
-} as Meta<typeof IconButton>;
-
-export default meta;
-type Story = StoryObj<typeof IconButton>;
-
-export const Playground: Story = {
-	render: (args) => (
-		<IconButton {...args}>
-			<SearchIcon />
-		</IconButton>
-	),
-};
-Playground.argTypes = {
-	size: {
-		control: {
-			type: "radio",
-		},
-		options: ["sm", "default", "lg"],
-	},
-	disabled: {
-		control: {
-			type: "boolean",
-		},
-	},
-	variant: {
-		control: {
-			type: "radio",
-		},
-		options: [
-			"charcoal",
-			"charcoalOutline",
-			"charcoalOutlineQuiet",
-			"ivory",
-			"ivoryOutline",
-			"ivoryOutlineQuiet",
-		],
-	},
-};
-Playground.args = {
-	size: "default",
-	disabled: false,
-	variant: "charcoal",
-};
-
-// =============================================================================
-// Variants
-// =============================================================================
-
-export const Charcoal = () => (
-	<IconButton variant="charcoal">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const CharcoalOutline = () => (
-	<IconButton variant="charcoalOutline">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const CharcoalOutlineQuiet = () => (
-	<IconButton variant="charcoalOutlineQuiet">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const Ivory = () => (
-	<IconButton variant="ivory">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const IvoryOutline = () => (
-	<IconButton variant="ivoryOutline">
-		<ArrowRightIcon />
-	</IconButton>
-);
-
-export const IvoryOutlineQuiet = () => (
-	<IconButton variant="ivoryOutlineQuiet">
-		<ArrowRightIcon />
-	</IconButton>
-);
-
-// =============================================================================
-// Sizes
-// =============================================================================
-
-export const Small = () => (
-	<IconButton size="sm">
-		<ArrowRightIcon />
-	</IconButton>
-);
-
-export const Medium = () => (
-	<IconButton size="default">
-		<SearchIcon />
-	</IconButton>
-);
-
-export const Large = () => (
-	<IconButton size="lg">
-		<SearchIcon />
-	</IconButton>
-);
-
-// =============================================================================
-// States
-// =============================================================================
-
-export const Disabled = () => (
-	<IconButton disabled>
-		<SearchIcon />
-	</IconButton>
-);

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

@@ -1,125 +0,0 @@
-import { Slot } from "@radix-ui/react-slot";
-import { cva, type VariantProps } from "class-variance-authority";
-import * as React from "react";
-import { cn } from "@/lib/utils";
-
-/**
- * IconButton component based on Figma BaseKit / Interface / Icon Button
- *
- * **IMPORTANT: Accessibility Requirement**
- * Icon-only buttons MUST have an accessible label. Provide one of:
- * - `aria-label`: A text description of the button's action (recommended)
- * - `aria-labelledby`: Reference to an element containing the label
- * - `title`: Tooltip text (less preferred, but provides a label)
- *
- * @example
- * ```tsx
- * // Correct usage with aria-label
- * <IconButton aria-label="Close menu">
- *   <CloseIcon />
- * </IconButton>
- *
- * // Correct usage with aria-labelledby
- * <IconButton aria-labelledby="close-label">
- *   <CloseIcon />
- * </IconButton>
- * <span id="close-label" className="sr-only">Close menu</span>
- * ```
- *
- * Variants:
- * - charcoal: Dark filled button (for light backgrounds)
- * - charcoalOutline: Dark outlined button (for light backgrounds)
- * - charcoalOutlineQuiet: Subtle dark outlined button (for light backgrounds)
- * - ghost: No background/border, just icon (for light backgrounds)
- * - ghostDark: No background/border, just icon (for dark backgrounds)
- * - ivory: Light filled button (for dark backgrounds)
- * - ivoryOutline: Light outlined button (for dark backgrounds)
- * - ivoryOutlineQuiet: Subtle light outlined button (for dark backgrounds)
- *
- * Sizes:
- * - lg: Large (46x46)
- * - default: Medium (36x36)
- * - sm: Small (29x29)
- */
-const iconButtonVariants = cva(
-	"inline-flex items-center justify-center whitespace-nowrap transition-colors duration-150 cursor-pointer focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50",
-	{
-		variants: {
-			variant: {
-				// Charcoal (dark filled) - primary dark
-				charcoal:
-					"bg-gray-1200 text-gray-100 hover:bg-gray-1100 active:bg-gray-1000 focus-visible:ring-gray-1000",
-				// Charcoal Outline - outlined dark (for light backgrounds)
-				charcoalOutline:
-					"border border-alpha-black-30 text-gray-1000 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-				// Charcoal Outline Quiet - subtle outlined dark (for light backgrounds)
-				charcoalOutlineQuiet:
-					"border border-alpha-black-20 text-alpha-black-60 hover:border-alpha-black-30 hover:text-alpha-black-80 active:bg-alpha-black-5 focus-visible:ring-gray-1000",
-				// Ghost - no background/border (for light backgrounds)
-				ghost:
-					"text-gray-700 hover:text-gray-900 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-				// Ghost Dark - no background/border (for dark backgrounds)
-				ghostDark:
-					"text-gray-300 hover:text-gray-100 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-				// Ivory (light filled) - primary light (for dark backgrounds)
-				ivory:
-					"bg-gray-50 text-gray-1000 hover:bg-gray-100 active:bg-gray-200 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-				// Ivory Outline - outlined light (for dark backgrounds)
-				ivoryOutline:
-					"border border-gray-50 text-gray-50 hover:bg-alpha-white-10 active:bg-alpha-white-20 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-				// Ivory Outline Quiet - subtle light outline (for dark backgrounds)
-				ivoryOutlineQuiet:
-					"border border-alpha-white-20 text-alpha-white-60 hover:border-alpha-white-30 hover:text-alpha-white-80 active:bg-alpha-white-5 focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-			},
-			size: {
-				// Large (46x46)
-				lg: "rounded-[12px] size-[46px]",
-				// Medium (36x36) - default
-				default: "rounded-[12px] size-[36px]",
-				// Small (29x29)
-				sm: "rounded-[10px] size-[29px]",
-			},
-		},
-		defaultVariants: {
-			variant: "charcoal",
-			size: "default",
-		},
-	},
-);
-
-export interface IconButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof iconButtonVariants> {
-	asChild?: boolean;
-}
-
-const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
-		// Development warning for missing accessible label
-		React.useEffect(() => {
-			if (import.meta.env?.DEV) {
-				const hasAccessibleLabel =
-					props["aria-label"] ||
-					props["aria-labelledby"] ||
-					props.title;
-				if (!hasAccessibleLabel) {
-					console.warn(
-						"IconButton: Missing accessible label. Icon-only buttons must have an aria-label, aria-labelledby, or title attribute for screen reader users.",
-					);
-				}
-			}
-		}, [props["aria-label"], props["aria-labelledby"], props.title]);
-
-		const Comp = asChild ? Slot : "button";
-		return (
-			<Comp
-				className={cn(iconButtonVariants({ variant, size, className }))}
-				ref={ref}
-				{...props}
-			/>
-		);
-	},
-);
-IconButton.displayName = "IconButton";
-
-export { IconButton, iconButtonVariants };

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

@@ -1,6 +0,0 @@
-export { Button, type ButtonProps, buttonVariants } from "./button";
-export {
-	IconButton,
-	type IconButtonProps,
-	iconButtonVariants,
-} from "./icon-button";

package/src/components/atoms/pager-control/index.ts

@@ -1,5 +0,0 @@
-export {
-	PagerControl,
-	type PagerControlProps,
-	pagerControlVariants,
-} from "./pager-control";