fix: stabilize kumo ui components

components/ui/button.tsx

@@ -26,11 +26,21 @@ const sizeMap: Record<ButtonSize, KumoButtonProps["size"]> = {
   icon: "base",
 };
 
-export type ButtonProps = Omit<KumoButtonProps, "variant" | "size" | "shape"> & {
+type BaseButtonProps = Omit<KumoButtonProps, "variant" | "size" | "shape"> & {
   variant?: ButtonVariant;
-  size?: ButtonSize;
 };
 
+type TextButtonProps = BaseButtonProps & {
+  size?: Exclude<ButtonSize, "icon">;
+};
+
+type IconButtonProps = BaseButtonProps & {
+  "aria-label": string;
+  size: "icon";
+};
+
+export type ButtonProps = TextButtonProps | IconButtonProps;
+
 export type LinkButtonProps = Omit<KumoLinkButtonProps, "variant" | "size"> & {
   variant?: ButtonVariant;
   size?: Exclude<ButtonSize, "icon">;
@@ -40,17 +50,34 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(function
   { className, variant = "default", size = "default", ...props },
   ref,
 ): React.ReactElement {
-  const kumoProps = {
-    className: cn("teatea-button", `teatea-button-${variant}`, className),
-    ref,
-    shape: size === "icon" ? "square" : "base",
-    size: sizeMap[size],
-    variant: variantMap[variant],
-    ...props,
-  } as KumoButtonProps & React.RefAttributes<HTMLButtonElement>;
+  if (size === "icon") {
+    const iconAriaLabel = props["aria-label"];
+
+    if (!iconAriaLabel) {
+      throw new Error("Icon buttons require an aria-label.");
+    }
+
+    return (
+      <KumoButton
+        {...props}
+        ref={ref}
+        aria-label={iconAriaLabel}
+        className={cn("teatea-button", `teatea-button-${variant}`, className)}
+        shape="square"
+        size={sizeMap[size]}
+        variant={variantMap[variant]}
+      />
+    );
+  }
 
   return (
-    <KumoButton {...kumoProps} />
+    <KumoButton
+      ref={ref}
+      className={cn("teatea-button", `teatea-button-${variant}`, className)}
+      size={sizeMap[size]}
+      variant={variantMap[variant]}
+      {...props}
+    />
   );
 });