@nationaldesignstudio/react 0.1.0 → 0.3.0

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

@@ -9,22 +9,20 @@ import { tv, type VariantProps } from "tailwind-variants";
 import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
 
 /**
- * Button component based on Figma BaseKit / Interface / Buttons
+ * Button component based on Figma Button component
  *
- * Variants:
- * - solid: Filled button
- * - outline: Outlined button
- * - ghost: No background/border, just text
- * - subtle: Light background with subtle styling
- *
- * Color Schemes:
- * - dark: Dark colors for use on light backgrounds (default)
- * - light: Light colors for use on dark backgrounds
+ * Variants (matches Figma):
+ * - primary: Filled brand button (indigo background)
+ * - primary-outline: Outlined brand button (indigo border/text)
+ * - secondary: Filled neutral button (white background, for dark backgrounds)
+ * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)
+ * - ghost: Transparent button with subtle hover (for light backgrounds)
+ * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)
  *
  * Sizes:
- * - lg: Large buttons
- * - default: Medium buttons
- * - sm: Small buttons
+ * - lg: Large buttons (56px height)
+ * - md: Medium buttons (40px height) - default
+ * - sm: Small buttons (28px height)
  *
  * For icon-only buttons, use the IconButton component instead.
  *
@@ -32,90 +30,40 @@ import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
  * Pass a `theme` prop to override default colors via CSS custom properties.
  */
 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",
+	base: "inline-flex items-center justify-center gap-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 border-solid",
 	variants: {
 		variant: {
-			solid: "",
-			outline: "bg-transparent border",
-			ghost: "bg-transparent border-transparent",
-			subtle: "border",
+			// Primary - filled brand button
+			primary:
+				"bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover hover:text-button-primary-text-hover border-transparent focus-visible:ring-button-primary-bg",
+			// Primary Outline - outlined brand button
+			"primary-outline":
+				"bg-button-primary-outline-bg text-button-primary-outline-text border border-button-primary-outline-border hover:bg-button-primary-outline-bg-hover hover:text-button-primary-outline-text-hover hover:border-button-primary-outline-border-hover focus-visible:ring-button-primary-outline-border",
+			// Secondary - filled neutral button (for dark backgrounds)
+			secondary:
+				"bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover hover:text-button-secondary-text-hover border-transparent focus-visible:ring-button-secondary-bg focus-visible:ring-offset-gray-1000",
+			// Secondary Outline - outlined neutral button (for dark backgrounds)
+			"secondary-outline":
+				"bg-button-secondary-outline-bg text-button-secondary-outline-text border border-button-secondary-outline-border hover:bg-button-secondary-outline-bg-hover hover:text-button-secondary-outline-text-hover hover:border-button-secondary-outline-border-hover focus-visible:ring-button-secondary-outline-border focus-visible:ring-offset-gray-1000",
+			// Ghost - transparent button (for light backgrounds)
+			ghost:
+				"bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover hover:text-button-ghost-text-hover border-transparent focus-visible:ring-gray-1000",
+			// Ghost Inverse - transparent button (for dark backgrounds)
+			"ghost-inverse":
+				"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",
 			// 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)))]",
 		},
-		colorScheme: {
-			dark: "",
-			light: "",
-		},
 		size: {
-			lg: "px-spacing-24 py-spacing-12 typography-large-button-large h-spacing-48",
-			default:
-				"px-spacing-20 py-spacing-10 typography-medium-button-medium h-spacing-40",
-			sm: "px-spacing-16 py-spacing-8 typography-small-button-small h-spacing-32",
+			lg: "px-32 py-20 h-56 rounded-10 typography-large-button-large",
+			md: "px-20 py-12 h-40 rounded-6 typography-medium-button-medium",
+			sm: "px-12 py-8 h-28 rounded-4 typography-small-button-small",
 		},
 	},
-	compoundVariants: [
-		// Solid + Dark (for light backgrounds) - uses semantic button tokens
-		{
-			variant: "solid",
-			colorScheme: "dark",
-			class:
-				"bg-button-primary-bg text-text-inverted hover:bg-button-primary-bg-hover active:bg-button-primary-bg-hover border-transparent focus-visible:ring-button-primary-bg",
-		},
-		// Solid + Light (for dark backgrounds)
-		{
-			variant: "solid",
-			colorScheme: "light",
-			class:
-				"bg-button-secondary-bg text-text-primary hover:bg-button-secondary-bg-hover active:bg-gray-200 border-transparent focus-visible:ring-gray-50 focus-visible:ring-offset-gray-1000",
-		},
-		// Outline + Dark (for light backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "dark",
-			class:
-				"border-border-strong text-gray-1000 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Outline + Light (for dark backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "light",
-			class:
-				"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",
-		},
-		// Ghost + Dark (for light backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "dark",
-			class:
-				"text-gray-700 hover:text-gray-900 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Ghost + Light (for dark backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "light",
-			class:
-				"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",
-		},
-		// Subtle + Dark (for light backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "dark",
-			class:
-				"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",
-		},
-		// Subtle + Light (for dark backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "light",
-			class:
-				"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",
-		},
-	],
 	defaultVariants: {
-		variant: "solid",
-		colorScheme: "dark",
-		size: "default",
+		variant: "primary",
+		size: "md",
 	},
 });
 
@@ -139,17 +87,7 @@ function hasThemeValues(theme: ButtonTheme | undefined): boolean {
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	(
-		{
-			className,
-			variant,
-			colorScheme,
-			size,
-			render,
-			nativeButton,
-			theme,
-			style,
-			...props
-		},
+		{ className, variant, size, render, nativeButton, theme, style, ...props },
 		ref,
 	) => {
 		// When render prop is provided, default nativeButton to false to suppress warnings
@@ -162,15 +100,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 		const combinedStyles = hasTheme ? { ...themeStyles, ...style } : style;
 
 		// Resolve actual values for data attributes
-		const resolvedVariant = effectiveVariant ?? "solid";
-		const resolvedColorScheme = colorScheme ?? "dark";
-		const resolvedSize = size ?? "default";
+		const resolvedVariant = effectiveVariant ?? "primary";
+		const resolvedSize = size ?? "md";
 
 		return (
 			<BaseButton
 				className={buttonVariants({
 					variant: effectiveVariant,
-					colorScheme,
 					size,
 					class: className,
 				})}
@@ -179,7 +115,6 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 				nativeButton={isNativeButton}
 				style={combinedStyles}
 				data-variant={resolvedVariant}
-				data-color-scheme={resolvedColorScheme}
 				data-size={resolvedSize}
 				{...props}
 			/>

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

@@ -4,66 +4,112 @@ 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>);
+	// Solid variants
+	test("solid dark variant renders correctly", async () => {
+		render(
+			<Button variant="solid" colorScheme="dark">
+				Solid Dark Button
+			</Button>,
+		);
 
 		await expect(
-			page.getByRole("button", { name: "Charcoal Button" }),
-		).toMatchScreenshot("button-charcoal");
+			page.getByRole("button", { name: "Solid Dark Button" }),
+		).toMatchScreenshot("button-solid-dark");
 	});
 
-	test("charcoalOutline variant renders correctly", async () => {
-		render(<Button variant="charcoalOutline">Charcoal Outline Button</Button>);
+	test("solid light variant renders correctly", async () => {
+		render(
+			<div style={{ background: "#1a1a1a", padding: "20px" }}>
+				<Button variant="solid" colorScheme="light">
+					Solid Light Button
+				</Button>
+			</div>,
+		);
 
 		await expect(
-			page.getByRole("button", { name: "Charcoal Outline Button" }),
-		).toMatchScreenshot("button-charcoal-outline");
+			page.getByRole("button", { name: "Solid Light Button" }),
+		).toMatchScreenshot("button-solid-light");
 	});
 
-	test("charcoalOutlineQuiet variant renders correctly", async () => {
+	// Outline variants
+	test("outline dark variant renders correctly", async () => {
 		render(
-			<Button variant="charcoalOutlineQuiet">Charcoal Outline Quiet</Button>,
+			<Button variant="outline" colorScheme="dark">
+				Outline Dark Button
+			</Button>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Charcoal Outline Quiet" }),
-		).toMatchScreenshot("button-charcoal-outline-quiet");
+			page.getByRole("button", { name: "Outline Dark Button" }),
+		).toMatchScreenshot("button-outline-dark");
 	});
 
-	test("ivory variant renders correctly", async () => {
+	test("outline light variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivory">Ivory Button</Button>
+				<Button variant="outline" colorScheme="light">
+					Outline Light Button
+				</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Ivory Button" }),
-		).toMatchScreenshot("button-ivory");
+			page.getByRole("button", { name: "Outline Light Button" }),
+		).toMatchScreenshot("button-outline-light");
+	});
+
+	// Ghost variants
+	test("ghost dark variant renders correctly", async () => {
+		render(
+			<Button variant="ghost" colorScheme="dark">
+				Ghost Dark Button
+			</Button>,
+		);
+
+		await expect(
+			page.getByRole("button", { name: "Ghost Dark Button" }),
+		).toMatchScreenshot("button-ghost-dark");
 	});
 
-	test("ivoryOutline variant renders correctly", async () => {
+	test("ghost light variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivoryOutline">Ivory Outline Button</Button>
+				<Button variant="ghost" colorScheme="light">
+					Ghost Light Button
+				</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Ivory Outline Button" }),
-		).toMatchScreenshot("button-ivory-outline");
+			page.getByRole("button", { name: "Ghost Light Button" }),
+		).toMatchScreenshot("button-ghost-light");
+	});
+
+	// Subtle variants
+	test("subtle dark variant renders correctly", async () => {
+		render(
+			<Button variant="subtle" colorScheme="dark">
+				Subtle Dark Button
+			</Button>,
+		);
+
+		await expect(
+			page.getByRole("button", { name: "Subtle Dark Button" }),
+		).toMatchScreenshot("button-subtle-dark");
 	});
 
-	test("ivoryOutlineQuiet variant renders correctly", async () => {
+	test("subtle light variant renders correctly", async () => {
 		render(
 			<div style={{ background: "#1a1a1a", padding: "20px" }}>
-				<Button variant="ivoryOutlineQuiet">Ivory Outline Quiet</Button>
+				<Button variant="subtle" colorScheme="light">
+					Subtle Light Button
+				</Button>
 			</div>,
 		);
 
 		await expect(
-			page.getByRole("button", { name: "Ivory Outline Quiet" }),
-		).toMatchScreenshot("button-ivory-outline-quiet");
+			page.getByRole("button", { name: "Subtle Light Button" }),
+		).toMatchScreenshot("button-subtle-light");
 	});
 
 	// Size variants

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

@@ -1,11 +1,10 @@
 "use client";
 
 import { useRender } from "@base-ui-components/react/use-render";
-import * as React from "react";
 import { tv, type VariantProps } from "tailwind-variants";
 
 /**
- * IconButton component based on Figma BaseKit / Interface / Icon Button
+ * IconButton component based on Figma Button component (icon-only variant)
  *
  * **IMPORTANT: Accessibility Requirement**
  * Icon-only buttons MUST have an accessible label. Provide one of:
@@ -21,219 +20,112 @@ import { tv, type VariantProps } from "tailwind-variants";
  * </IconButton>
  * ```
  *
- * Variants:
- * - solid: Filled button
- * - outline: Outlined button
- * - ghost: No background/border, just icon
- * - subtle: Subtle outlined button
- *
- * Color Schemes:
- * - dark: Dark colors for use on light backgrounds (default)
- * - light: Light colors for use on dark backgrounds
+ * Variants (matches Figma):
+ * - primary: Filled brand button (indigo background)
+ * - primary-outline: Outlined brand button (indigo border/text)
+ * - secondary: Filled neutral button (white background, for dark backgrounds)
+ * - secondary-outline: Outlined neutral button (white border/text, for dark backgrounds)
+ * - ghost: Transparent button with subtle hover (for light backgrounds)
+ * - ghost-inverse: Transparent button with subtle hover (for dark backgrounds)
  *
  * Sizes:
- * - sm: Small (32x32)
- * - default: Medium (40x40)
- * - lg: Large (48x48)
+ * - sm: Small (28x28)
+ * - md: Medium (40x40) - default
+ * - lg: Large (56x56)
  *
  * Rounded:
- * - default: Standard border radius
- * - sm: Smaller border radius
+ * - default: Standard border radius (matches size)
  * - full: Fully circular
  */
 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: {
-			solid: "",
-			outline: "border",
-			ghost: "",
-			subtle: "border",
-		},
-		colorScheme: {
-			dark: "",
-			light: "",
+			// Primary - filled brand button
+			primary:
+				"bg-button-primary-bg text-button-primary-text hover:bg-button-primary-bg-hover hover:text-button-primary-text-hover border-transparent focus-visible:ring-button-primary-bg",
+			// Primary Outline - outlined brand button
+			"primary-outline":
+				"bg-button-primary-outline-bg text-button-primary-outline-text border border-button-primary-outline-border hover:bg-button-primary-outline-bg-hover hover:text-button-primary-outline-text-hover hover:border-button-primary-outline-border-hover focus-visible:ring-button-primary-outline-border",
+			// Secondary - filled neutral button (for dark backgrounds)
+			secondary:
+				"bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg-hover hover:text-button-secondary-text-hover border-transparent focus-visible:ring-button-secondary-bg focus-visible:ring-offset-gray-1000",
+			// Secondary Outline - outlined neutral button (for dark backgrounds)
+			"secondary-outline":
+				"bg-button-secondary-outline-bg text-button-secondary-outline-text border border-button-secondary-outline-border hover:bg-button-secondary-outline-bg-hover hover:text-button-secondary-outline-text-hover hover:border-button-secondary-outline-border-hover focus-visible:ring-button-secondary-outline-border focus-visible:ring-offset-gray-1000",
+			// Ghost - transparent button (for light backgrounds)
+			ghost:
+				"bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg-hover hover:text-button-ghost-text-hover border-transparent focus-visible:ring-gray-1000",
+			// Ghost Inverse - transparent button (for dark backgrounds)
+			"ghost-inverse":
+				"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-32",
-			default: "size-40",
-			lg: "size-48",
+			sm: "size-28 rounded-4",
+			md: "size-40 rounded-6",
+			lg: "size-56 rounded-10",
 		},
 		rounded: {
-			default: "rounded-radius-12",
-			sm: "rounded-radius-10",
+			default: "",
 			full: "rounded-full",
 		},
 	},
-	compoundVariants: [
-		// Solid + Dark (for light backgrounds)
-		{
-			variant: "solid",
-			colorScheme: "dark",
-			class:
-				"bg-gray-1200 text-gray-100 hover:bg-gray-1100 active:bg-gray-1000 focus-visible:ring-gray-1000",
-		},
-		// Solid + Light (for dark backgrounds)
-		{
-			variant: "solid",
-			colorScheme: "light",
-			class:
-				"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",
-		},
-		// Outline + Dark (for light backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "dark",
-			class:
-				"border-alpha-black-30 text-gray-1000 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Outline + Light (for dark backgrounds)
-		{
-			variant: "outline",
-			colorScheme: "light",
-			class:
-				"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",
-		},
-		// Ghost + Dark (for light backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "dark",
-			class:
-				"text-gray-700 hover:text-gray-900 hover:bg-alpha-black-5 active:bg-alpha-black-10 focus-visible:ring-gray-1000",
-		},
-		// Ghost + Light (for dark backgrounds)
-		{
-			variant: "ghost",
-			colorScheme: "light",
-			class:
-				"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",
-		},
-		// Subtle + Dark (for light backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "dark",
-			class:
-				"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",
-		},
-		// Subtle + Light (for dark backgrounds)
-		{
-			variant: "subtle",
-			colorScheme: "light",
-			class:
-				"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",
-		},
-	],
 	defaultVariants: {
-		variant: "solid",
-		colorScheme: "dark",
-		size: "default",
+		variant: "primary",
+		size: "md",
 		rounded: "default",
 	},
 });
 
-export interface IconButtonProps
-	extends React.ButtonHTMLAttributes<HTMLButtonElement>,
-		VariantProps<typeof iconButtonVariants> {
-	/**
-	 * Custom render prop for element composition.
-	 * Accepts a React element or render function.
-	 * @example
-	 * ```tsx
-	 * // Render as a link
-	 * <IconButton render={<a href="/contact" />} aria-label="Contact">
-	 *   <LinkIcon />
-	 * </IconButton>
-	 *
-	 * // Render with custom element
-	 * <IconButton render={(props) => <Link {...props} to="/home" />} aria-label="Home">
-	 *   <HomeIcon />
-	 * </IconButton>
-	 * ```
-	 */
-	render?:
-		| React.ReactElement
-		| ((
-				props: React.ButtonHTMLAttributes<HTMLButtonElement>,
-		  ) => React.ReactElement);
-	/**
-	 * @deprecated Use `render` prop instead for element composition.
-	 * @example
-	 * ```tsx
-	 * // Old (deprecated)
-	 * <IconButton asChild><a href="/link">...</a></IconButton>
-	 *
-	 * // New (recommended)
-	 * <IconButton render={<a href="/link" />}>...</IconButton>
-	 * ```
-	 */
-	asChild?: boolean;
+interface IconButtonState extends Record<string, unknown> {
+	variant:
+		| "primary"
+		| "primary-outline"
+		| "secondary"
+		| "secondary-outline"
+		| "ghost"
+		| "ghost-inverse";
+	size: "sm" | "md" | "lg";
+	rounded: "default" | "full";
 }
 
-const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-	(
-		{
-			className,
-			variant,
-			colorScheme,
-			size,
-			rounded,
-			render,
-			asChild,
-			...props
-		},
-		ref,
-	) => {
-		// Development warnings
-		React.useEffect(() => {
-			if (import.meta.env?.DEV) {
-				// Warn about missing accessible label
-				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.",
-					);
-				}
-				// Warn about deprecated asChild prop
-				if (asChild !== undefined) {
-					console.warn(
-						'IconButton: The "asChild" prop is deprecated. Use the "render" prop instead for element composition.\n' +
-							'Example: <IconButton render={<a href="/link" />}>...</IconButton>',
-					);
-				}
-			}
-		}, [props["aria-label"], props["aria-labelledby"], props.title, asChild]);
+export interface IconButtonProps
+	extends useRender.ComponentProps<"button", IconButtonState>,
+		VariantProps<typeof iconButtonVariants> {}
 
-		// Resolve actual values for data attributes
-		const resolvedVariant = variant ?? "solid";
-		const resolvedColorScheme = colorScheme ?? "dark";
-		const resolvedSize = size ?? "default";
-		const resolvedRounded = rounded ?? "default";
+function IconButton(props: IconButtonProps) {
+	const {
+		className,
+		variant = "primary",
+		size = "md",
+		rounded = "default",
+		render,
+		...otherProps
+	} = props;
 
-		const mergedProps = {
-			className: iconButtonVariants({
-				variant,
-				colorScheme,
-				size,
-				rounded,
-				class: className,
-			}),
-			"data-variant": resolvedVariant,
-			"data-color-scheme": resolvedColorScheme,
-			"data-size": resolvedSize,
-			"data-rounded": resolvedRounded,
-			...props,
-		};
+	const state: IconButtonState = {
+		variant,
+		size,
+		rounded,
+	};
 
-		const element = useRender({
-			render: render ?? <button type="button" />,
-			ref,
-			props: mergedProps,
-		});
+	const buttonClassName = iconButtonVariants({
+		variant,
+		size,
+		rounded,
+		class: className,
+	});
 
-		return element;
-	},
-);
-IconButton.displayName = "IconButton";
+	return useRender<IconButtonState, HTMLButtonElement>({
+		render,
+		state,
+		props: {
+			type: "button",
+			className: buttonClassName,
+			...otherProps,
+		},
+		defaultTagName: "button",
+	});
+}
 
 export { IconButton, iconButtonVariants };

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

@@ -0,0 +1,17 @@
+export { Input, type InputProps, inputVariants } from "./input";
+export {
+	InputGroup,
+	InputGroupAddon,
+	type InputGroupAddonProps,
+	InputGroupButton,
+	type InputGroupButtonProps,
+	InputGroupInput,
+	type InputGroupInputProps,
+	type InputGroupProps,
+	InputGroupText,
+	InputGroupTextarea,
+	type InputGroupTextareaProps,
+	type InputGroupTextProps,
+	inputGroupAddonVariants,
+	inputGroupVariants,
+} from "./input-group";