Improve Empty component responsiveness

.changeset/empty-responsive-content.md

@@ -0,0 +1,10 @@
+---
+"@cloudflare/kumo": patch
+---
+
+Improve `Empty` responsiveness:
+
+- Adjust spacing and typography across viewport sizes
+- Balance titles and improve description wrapping
+- Stack and center example actions on mobile
+- Allow React nodes in `title` and `description`

packages/kumo-docs-astro/src/components/demos/EmptyDemo.tsx

@@ -16,7 +16,7 @@ export function EmptyDemo() {
       description="Get started by installing your first package."
       commandLine="npm install @cloudflare/kumo"
       contents={
-        <div className="flex items-center gap-2">
+        <div className="flex flex-col items-center gap-3 sm:flex-row sm:gap-2">
           <Button icon={<CodeIcon />}>See examples</Button>
           <Button icon={<GlobeIcon />} variant="primary">
             View documentation
@@ -79,7 +79,7 @@ export function EmptyWithActionsDemo() {
       title="No connection"
       description="Unable to connect to the server. Please check your connection and try again."
       contents={
-        <div className="flex gap-2">
+        <div className="flex flex-col items-center gap-3 sm:flex-row sm:gap-2">
           <Button variant="primary">Retry</Button>
           <Button variant="secondary">Go Back</Button>
         </div>

packages/kumo/src/components/empty/empty.tsx

@@ -1,5 +1,5 @@
 import { CheckIcon, CopyIcon } from "@phosphor-icons/react";
-import { useState } from "react";
+import { type ReactNode, useState } from "react";
 import { Button } from "../../components/button";
 import { cn } from "../../utils/cn";
 import { resolveVariant } from "../../utils/resolve-variant";
@@ -12,11 +12,11 @@ export const KUMO_EMPTY_VARIANTS = {
       description: "Compact empty state for smaller containers",
     },
     base: {
-      classes: "px-10 py-16 gap-6",
+      classes: "px-6 py-8 gap-4 md:px-10 md:py-16 md:gap-6",
       description: "Default empty state size",
     },
     lg: {
-      classes: "px-12 py-20 gap-8",
+      classes: "px-6 py-8 gap-4 md:px-12 md:py-20 md:gap-8",
       description: "Large empty state for prominent placement",
     },
   },
@@ -68,10 +68,10 @@ export function emptyVariants({
 export interface EmptyProps extends KumoEmptyVariantsProps {
   /** Decorative icon displayed above the title (e.g. from `@phosphor-icons/react`). */
   icon?: React.ReactNode;
-  /** Primary heading text for the empty state. */
-  title: string;
-  /** Secondary description text displayed below the title. */
-  description?: string;
+  /** Primary heading content for the empty state. */
+  title: ReactNode;
+  /** Secondary description content displayed below the title. */
+  description?: ReactNode;
   /** Shell command displayed in a copyable code block. */
   commandLine?: string;
   /** Additional content (buttons, links) rendered below the description. */
@@ -102,11 +102,17 @@ export function Empty({
   return (
     <div className={cn(emptyVariants({ size }), className)}>
       {icon}
-      <h2 className="text-2xl font-semibold">{title}</h2>
+      <div className="flex flex-col items-center gap-2">
+        <h2 className="text-xl font-semibold text-balance sm:text-2xl">
+          {title}
+        </h2>
 
-      {description && (
-        <p className="max-w-140 text-center text-kumo-subtle">{description}</p>
-      )}
+        {description && (
+          <p className="max-w-140 text-center text-base text-pretty text-kumo-subtle sm:text-lg">
+            {description}
+          </p>
+        )}
+      </div>
 
       {commandLine && (
         <div