@nationaldesignstudio/react 0.0.16 → 0.0.19

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

@@ -10,16 +10,14 @@ 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)
+ * - 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
  *
  * Sizes:
  * - lg: Large buttons
@@ -30,58 +28,91 @@ import { type ButtonTheme, buttonThemeToStyleVars } from "../../../lib/theme";
  *
  * 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",
+			solid: "",
+			outline: "bg-transparent border",
+			ghost: "bg-transparent border-transparent",
+			subtle: "border",
 			// 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: {
-			// 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
+			lg: "px-spacing-24 py-spacing-12 typography-large-button-large h-spacing-48",
 			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",
+				"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",
 		},
 	},
+	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: "primary",
+		variant: "solid",
+		colorScheme: "dark",
 		size: "default",
 	},
 });
@@ -106,7 +137,17 @@ function hasThemeValues(theme: ButtonTheme | undefined): boolean {
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 	(
-		{ className, variant, size, render, nativeButton, theme, style, ...props },
+		{
+			className,
+			variant,
+			colorScheme,
+			size,
+			render,
+			nativeButton,
+			theme,
+			style,
+			...props
+		},
 		ref,
 	) => {
 		// When render prop is provided, default nativeButton to false to suppress warnings
@@ -122,6 +163,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
 			<BaseButton
 				className={buttonVariants({
 					variant: effectiveVariant,
+					colorScheme,
 					size,
 					class: className,
 				})}

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

@@ -77,90 +77,241 @@ Playground.argTypes = {
 		control: {
 			type: "radio",
 		},
-		options: [
-			"charcoal",
-			"charcoalOutline",
-			"charcoalOutlineQuiet",
-			"ivory",
-			"ivoryOutline",
-			"ivoryOutlineQuiet",
-		],
+		options: ["solid", "outline", "ghost", "subtle"],
+	},
+	colorScheme: {
+		control: {
+			type: "radio",
+		},
+		options: ["dark", "light"],
+	},
+	rounded: {
+		control: {
+			type: "radio",
+		},
+		options: ["default", "sm", "full"],
 	},
 };
 Playground.args = {
 	size: "default",
 	disabled: false,
-	variant: "charcoal",
+	variant: "solid",
+	colorScheme: "dark",
+	rounded: "default",
+	"aria-label": "Search",
 };
 
 // =============================================================================
-// Variants
+// Variants (Dark Color Scheme - for light backgrounds)
 // =============================================================================
 
-export const Charcoal = () => (
-	<IconButton variant="charcoal">
+export const Solid = () => (
+	<IconButton variant="solid" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const CharcoalOutline = () => (
-	<IconButton variant="charcoalOutline">
+export const Outline = () => (
+	<IconButton variant="outline" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const CharcoalOutlineQuiet = () => (
-	<IconButton variant="charcoalOutlineQuiet">
+export const Ghost = () => (
+	<IconButton variant="ghost" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const Ivory = () => (
-	<IconButton variant="ivory">
+export const Subtle = () => (
+	<IconButton variant="subtle" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
-export const IvoryOutline = () => (
-	<IconButton variant="ivoryOutline">
-		<ArrowRightIcon />
+// =============================================================================
+// 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>
+);
+
+export const OutlineLight = () => (
+	<DarkBackground>
+		<IconButton variant="outline" colorScheme="light" aria-label="Navigate">
+			<ArrowRightIcon />
+		</IconButton>
+	</DarkBackground>
+);
+
+export const GhostLight = () => (
+	<DarkBackground>
+		<IconButton variant="ghost" colorScheme="light" aria-label="Navigate">
+			<ArrowRightIcon />
+		</IconButton>
+	</DarkBackground>
+);
+
+export const SubtleLight = () => (
+	<DarkBackground>
+		<IconButton variant="subtle" colorScheme="light" aria-label="Navigate">
+			<ArrowRightIcon />
+		</IconButton>
+	</DarkBackground>
+);
+
+// =============================================================================
+// All Variants Comparison
+// =============================================================================
+
+export const AllVariants = () => (
+	<div className="flex flex-col gap-spacing-32">
+		<div>
+			<h3 className="mb-spacing-16 text-14 font-medium text-text-secondary">
+				Dark Color Scheme (for light backgrounds)
+			</h3>
+			<div className="flex gap-spacing-16">
+				<IconButton variant="solid" aria-label="Solid">
+					<SearchIcon />
+				</IconButton>
+				<IconButton variant="outline" aria-label="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>
+			<div className="flex gap-spacing-16">
+				<IconButton variant="solid" colorScheme="light" aria-label="Solid">
+					<ArrowRightIcon />
+				</IconButton>
+				<IconButton variant="outline" colorScheme="light" aria-label="Outline">
+					<ArrowRightIcon />
+				</IconButton>
+				<IconButton variant="ghost" colorScheme="light" aria-label="Ghost">
+					<ArrowRightIcon />
+				</IconButton>
+				<IconButton variant="subtle" colorScheme="light" aria-label="Subtle">
+					<ArrowRightIcon />
+				</IconButton>
+			</div>
+		</DarkBackground>
+	</div>
+);
+
+// =============================================================================
+// Rounded Variants
+// =============================================================================
+
+export const RoundedDefault = () => (
+	<IconButton rounded="default" aria-label="Search">
+		<SearchIcon />
 	</IconButton>
 );
 
-export const IvoryOutlineQuiet = () => (
-	<IconButton variant="ivoryOutlineQuiet">
-		<ArrowRightIcon />
+export const RoundedSm = () => (
+	<IconButton rounded="sm" aria-label="Search">
+		<SearchIcon />
 	</IconButton>
 );
 
+export const RoundedFull = () => (
+	<IconButton rounded="full" aria-label="Search">
+		<SearchIcon />
+	</IconButton>
+);
+
+export const AllRounded = () => (
+	<div className="flex gap-spacing-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>
+		</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>
+		</div>
+	</div>
+);
+
 // =============================================================================
 // Sizes
 // =============================================================================
 
 export const Small = () => (
-	<IconButton size="sm">
+	<IconButton size="sm" aria-label="Search">
 		<ArrowRightIcon />
 	</IconButton>
 );
 
 export const Medium = () => (
-	<IconButton size="default">
+	<IconButton size="default" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
 export const Large = () => (
-	<IconButton size="lg">
+	<IconButton size="lg" aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );
 
+export const AllSizes = () => (
+	<div className="flex items-center gap-spacing-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>
+		</div>
+		<div className="text-center">
+			<IconButton size="default" aria-label="Default">
+				<SearchIcon />
+			</IconButton>
+			<p className="mt-spacing-8 text-12 text-text-muted">default (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>
+		</div>
+	</div>
+);
+
 // =============================================================================
 // States
 // =============================================================================
 
 export const Disabled = () => (
-	<IconButton disabled>
+	<IconButton disabled aria-label="Search">
 		<SearchIcon />
 	</IconButton>
 );

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

@@ -17,70 +17,115 @@ import { tv, type VariantProps } from "tailwind-variants";
  * <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)
+ * - 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
  *
  * Sizes:
- * - lg: Large (46x46)
- * - default: Medium (36x36)
- * - sm: Small (29x29)
+ * - lg: Large (48x48)
+ * - default: Medium (40x40)
+ * - sm: Small (32x32)
+ *
+ * Rounded:
+ * - default: Standard border radius
+ * - sm: Smaller border radius
+ * - 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: {
-			// Charcoal (dark filled) - primary dark
-			charcoal:
+			solid: "",
+			outline: "border",
+			ghost: "",
+			subtle: "border",
+		},
+		colorScheme: {
+			dark: "",
+			light: "",
+		},
+		size: {
+			lg: "size-48",
+			default: "size-40",
+			sm: "size-32",
+		},
+		rounded: {
+			default: "rounded-radius-12",
+			sm: "rounded-radius-10",
+			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",
-			// 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:
+		},
+		// 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 Dark - no background/border (for dark backgrounds)
-			ghostDark:
+		},
+		// 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",
-			// 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",
+		// 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: "charcoal",
+		variant: "solid",
+		colorScheme: "dark",
 		size: "default",
+		rounded: "default",
 	},
 });
 
@@ -91,7 +136,18 @@ export interface IconButtonProps
 }
 
 const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
-	({ className, variant, size, asChild = false, ...props }, ref) => {
+	(
+		{
+			className,
+			variant,
+			colorScheme,
+			size,
+			rounded,
+			asChild = false,
+			...props
+		},
+		ref,
+	) => {
 		// Development warning for missing accessible label
 		React.useEffect(() => {
 			if (import.meta.env?.DEV) {
@@ -108,7 +164,13 @@ const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
 		const Comp = asChild ? Slot : "button";
 		return (
 			<Comp
-				className={iconButtonVariants({ variant, size, class: className })}
+				className={iconButtonVariants({
+					variant,
+					colorScheme,
+					size,
+					rounded,
+					class: className,
+				})}
 				ref={ref}
 				{...props}
 			/>