refactor(alert): replace action prop with Alert.Actions compound component

- Remove action prop from Alert.Root
- Add Alert.Actions subcomponent for action button area (below text, col-start-2)
- Consistent with Dialog.Footer / Sheet.Footer compound component pattern
- Update example and tests

Author: IzumiSy

examples/nextjs-app/src/modules/pages/primitives-demo.tsx

@@ -200,19 +200,15 @@ export const primitiveComponentsDemoResource = defineResource({
                       <Alert.Title>With callback</Alert.Title>
                       <Alert.Description>Dismiss fires a callback.</Alert.Description>
                     </Alert.Root>
-                    <Alert.Root
-                      variant="warning"
-                      action={
-                        <div style={{ display: "flex", gap: "0.5rem" }}>
-                          <Button size="sm" variant="outline">
-                            Dismiss
-                          </Button>
-                          <Button size="sm">Action</Button>
-                        </div>
-                      }
-                    >
+                    <Alert.Root variant="warning" dismissible>
                       <Alert.Title>Multiple actions</Alert.Title>
                       <Alert.Description>This alert has multiple action buttons.</Alert.Description>
+                      <Alert.Actions>
+                        <Button size="sm" variant="outline">
+                          Dismiss
+                        </Button>
+                        <Button size="sm">Action</Button>
+                      </Alert.Actions>
                     </Alert.Root>
                   </div>
                 </div>

packages/core/src/components/alert.test.tsx

@@ -106,10 +106,13 @@ describe("Alert", () => {
     expect(onDismiss).toHaveBeenCalledOnce();
   });
 
-  it("renders custom action", () => {
+  it("renders actions area", () => {
     render(
-      <Alert.Root action={<button type="button">Undo</button>}>
+      <Alert.Root>
         <Alert.Title>Action</Alert.Title>
+        <Alert.Actions>
+          <button type="button">Undo</button>
+        </Alert.Actions>
       </Alert.Root>,
     );
     expect(screen.getByRole("button", { name: "Undo" })).toBeDefined();

packages/core/src/components/alert.tsx

@@ -45,15 +45,13 @@ const variantIcons: Record<
 
 type RootProps = React.ComponentProps<"div"> &
   VariantProps<typeof alertVariants> & {
-    action?: React.ReactNode;
     dismissible?: boolean;
     onDismiss?: () => void;
   };
 
 function Root({
   className,
   variant = "neutral",
-  action,
   dismissible,
   onDismiss,
   children,
@@ -78,14 +76,6 @@ function Root({
     >
       <Icon />
       {children}
-      {action && (
-        <div
-          data-slot="alert-action"
-          className="astw:col-start-2 astw:flex astw:items-center astw:gap-2 astw:mt-2"
-        >
-          {action}
-        </div>
-      )}
       {dismissible && (
         <button
           data-slot="alert-dismiss"
@@ -130,6 +120,17 @@ function Description({ className, ...props }: React.ComponentProps<"div">) {
 }
 Description.displayName = "Alert.Description";
 
+function Actions({ className, ...props }: React.ComponentProps<"div">) {
+  return (
+    <div
+      data-slot="alert-actions"
+      className={cn("astw:col-start-2 astw:flex astw:items-center astw:gap-2 astw:mt-2", className)}
+      {...props}
+    />
+  );
+}
+Actions.displayName = "Alert.Actions";
+
 export type AlertProps = RootProps;
-export const Alert = { Root, Title, Description };
+export const Alert = { Root, Title, Description, Actions };
 export { alertVariants };