@nationaldesignstudio/react 0.0.15 → 0.0.16

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

@@ -0,0 +1,135 @@
+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 primary variant classes by default", async () => {
+			render(<Button>Default</Button>);
+			const button = page.getByRole("button", { name: "Default" });
+			// Button uses semantic token classes
+			await expect.element(button).toHaveClass(/bg-button-primary-bg/);
+		});
+	});
+});

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

@@ -0,0 +1,139 @@
+import {
+	Button as BaseButton,
+	type ButtonProps as BaseButtonProps,
+} from "@base-ui-components/react/button";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
+
+/**
+ * Button component based on Figma BaseKit / Interface / Buttons
+ *
+ * Variants:
+ * - primary: Primary filled button using semantic color tokens
+ * - primaryOutline: Outlined primary button (for light backgrounds)
+ * - secondary: Secondary button using semantic color tokens
+ * - charcoal: Dark filled button (for light backgrounds) - legacy
+ * - 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)
+ * - gray: Gray filled button (for dark backgrounds)
+ *
+ * Sizes:
+ * - lg: Large buttons
+ * - default: Medium buttons
+ * - sm: Small buttons
+ *
+ * For icon-only buttons, use the IconButton component instead.
+ *
+ * Theme Support:
+ * Pass a `theme` prop to override default colors via CSS custom properties.
+ * Surface tokens (--radius-surface-button, --surface-button-stroke) control
+ * border radius and stroke width across all variants.
+ */
+const buttonVariants = tv({
+	base: "inline-flex items-center justify-center gap-spacing-8 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 rounded-surface-button stroke-surface-button border-solid",
+	variants: {
+		variant: {
+			// Primary - uses semantic color tokens
+			primary:
+				"bg-button-primary-bg text-text-inverted hover:bg-button-primary-bg-hover border-transparent focus-visible:ring-button-primary-bg",
+			// Primary Outline - outlined primary (for light backgrounds)
+			primaryOutline:
+				"bg-transparent text-text-primary border-border-strong hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-button-primary-bg",
+			// Secondary - uses semantic color tokens
+			secondary:
+				"bg-button-secondary-bg text-text-primary border-border-subtle hover:bg-button-secondary-bg-hover focus-visible:ring-button-primary-bg",
+			// Charcoal (dark filled) - primary dark (legacy)
+			charcoal:
+				"bg-gray-1200 text-gray-100 hover:bg-gray-1100 active:bg-gray-1000 border-transparent focus-visible:ring-gray-1000",
+			// Charcoal Outline - outlined dark (for light backgrounds)
+			charcoalOutline:
+				"border-border-strong 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-subtle text-alpha-black-60 hover:border-border-strong 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 border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
+			// Ivory Outline - outlined light (for dark backgrounds)
+			ivoryOutline:
+				"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-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",
+			// Gray - gray filled button (for dark backgrounds)
+			gray: "bg-gray-800 text-gray-100 hover:bg-gray-700 active:bg-gray-600 border-transparent focus-visible:ring-gray-700 focus-visible:ring-offset-gray-1000",
+			// Themed - uses CSS custom properties for styling
+			themed:
+				"[background:var(--btn-bg)] [color:var(--btn-text)] [border-color:var(--btn-border-color,transparent)] hover:[background:var(--btn-bg-hover,var(--btn-bg))] active:[background:var(--btn-bg-active,var(--btn-bg-hover,var(--btn-bg)))]",
+		},
+		size: {
+			// Large button - uses primitive spacing tokens
+			lg: "px-spacing-24 py-spacing-12 typography-brand-large-button-large h-spacing-48",
+			// Medium button (default) - uses primitive spacing tokens
+			default:
+				"px-spacing-20 py-spacing-10 typography-brand-medium-button-medium h-spacing-40",
+			// Small button - uses primitive spacing tokens
+			sm: "px-spacing-16 py-spacing-8 typography-brand-small-button-small h-spacing-32",
+		},
+	},
+	defaultVariants: {
+		variant: "primary",
+		size: "default",
+	},
+});
+
+export type HTMLButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement>;
+export type ButtonProps = BaseButtonProps &
+	VariantProps<typeof buttonVariants> &
+	HTMLButtonProps & {
+		/**
+		 * Theme overrides for button styling via CSS custom properties
+		 */
+		theme?: ButtonTheme;
+	};
+
+/**
+ * Check if a ButtonTheme has any actual values set
+ */
+function hasThemeValues(theme: ButtonTheme | undefined): boolean {
+	if (!theme) return false;
+	return Object.values(theme).some((v) => v !== undefined && v !== null);
+}
+
+const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
+	(
+		{ className, variant, size, render, nativeButton, theme, style, ...props },
+		ref,
+	) => {
+		// When render prop is provided, default nativeButton to false to suppress warnings
+		const isNativeButton = nativeButton ?? render === undefined;
+
+		// If theme has actual values, use "themed" variant to enable CSS custom property styling
+		const hasTheme = hasThemeValues(theme);
+		const effectiveVariant = hasTheme ? "themed" : variant;
+		const themeStyles = buttonThemeToStyleVars(theme);
+		const combinedStyles = hasTheme ? { ...themeStyles, ...style } : style;
+
+		return (
+			<BaseButton
+				className={buttonVariants({
+					variant: effectiveVariant,
+					size,
+					class: className,
+				})}
+				ref={ref}
+				render={render}
+				nativeButton={isNativeButton}
+				style={combinedStyles}
+				{...props}
+			/>
+		);
+	},
+);
+Button.displayName = "Button";
+
+export { Button, buttonVariants };

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

@@ -0,0 +1,102 @@
+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

@@ -0,0 +1,166 @@
+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

@@ -0,0 +1,120 @@
+import { Slot } from "@radix-ui/react-slot";
+import * as React from "react";
+import { tv, type VariantProps } from "tailwind-variants";
+
+/**
+ * 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 = tv({
+	base: "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 (48x48) - uses primitive spacing tokens
+			lg: "rounded-radius-12 size-spacing-48",
+			// Medium (40x40) - default - uses primitive spacing tokens
+			default: "rounded-radius-12 size-spacing-40",
+			// Small (32x32) - uses primitive spacing tokens
+			sm: "rounded-radius-10 size-spacing-32",
+		},
+	},
+	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={iconButtonVariants({ variant, size, class: className })}
+				ref={ref}
+				{...props}
+			/>
+		);
+	},
+);
+IconButton.displayName = "IconButton";
+
+export { IconButton, iconButtonVariants };

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

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

package/src/components/atoms/ndstudio-footer/index.ts

@@ -0,0 +1 @@
+export { NdstudioFooter, type NdstudioFooterProps } from "./ndstudio-footer";