@bearmenu/ui 0.8.39 → 0.8.40

package/dist/{chunk-FVSKGCK3.js → chunk-DZHKUUYV.js}

@@ -36,7 +36,16 @@ var cardVariants = cva(
         // several-hundred-pixel slab that translates under the cursor is a
         // wobble rather than a lift. A panel that size delegates interaction to
         // its children.
-        elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]"
+        elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]",
+        // The booking frames' settings/report SECTION card (Settings Rules U0,
+        // Reports P0): a smaller, page-content-scale radius than every other
+        // variant's `rounded-3xl` — 14px on a phone, 16px from `sm` — carried
+        // entirely by `--shadow-card` with no border at all. Not a bigger
+        // `elevated`: that variant is fixed at 24px and keeps its hairline in
+        // both themes on purpose (see its note); this one is for the specific
+        // page-section shape the booking design draws, not a general
+        // border-dropping replacement for `elevated`.
+        section: "rounded-[14px] bg-card shadow-[var(--shadow-card)] sm:rounded-[16px]"
       },
       size: {
         sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
@@ -68,6 +77,11 @@ var cardVariants = cva(
         variant: "elevated",
         interactive: true,
         class: "hover:shadow-[var(--shadow-card-hover)]"
+      },
+      {
+        variant: "section",
+        interactive: true,
+        class: "hover:shadow-[var(--shadow-card-hover)]"
       }
     ],
     defaultVariants: {

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "default" | "secondary" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
+    variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
     size?: "status" | "chip" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "default" | "link" | "secondary" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
-    size?: "icon" | "default" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "secondary" | "default" | "link" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
+    size?: "default" | "icon" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/card.d.ts

@@ -3,12 +3,12 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const cardVariants: (props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "section" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Card: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "outline" | "glass" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
+    variant?: "outline" | "glass" | "section" | "muted" | "surface" | "elevated" | "elevatedPanel" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
     interactive?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;

package/dist/components/card.js

@@ -1,4 +1,4 @@
-export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from '../chunk-FVSKGCK3.js';
+export { Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, cardVariants } from '../chunk-DZHKUUYV.js';
 import '../chunk-ZLMRVBD7.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/dist/components/command.d.ts

@@ -28,7 +28,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -64,7 +64,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "heading"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -82,7 +82,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "onSelect" | "disabled"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "value" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

package/dist/components/empty-state.d.ts

@@ -3,6 +3,12 @@ import * as React from 'react';
 type EmptyStateAction = {
     label: string;
     onClick: () => void;
+    /**
+     * Rendered before the label, sized like the DS button's own icons (the
+     * `Button` base class forces every child `<svg>` to 16px) — "Try again"
+     * carries a refresh glyph, "New reservation" a plus.
+     */
+    icon?: React.ReactNode;
 };
 type EmptyStateVariant = "default" | "search" | "error";
 interface EmptyStateProps {
@@ -23,8 +29,9 @@ interface EmptyStateProps {
     size?: "sm" | "md" | "lg";
     /**
      * `card` draws the booking pages' whole-body state card (reports/02-p4,
-     * calendar/02-c2): a 16px-radius card surface with the resting card shadow.
-     * `none` (the default) leaves the surface to the container it sits in.
+     * calendar/02-c2): a 14px-radius card surface (16px from `sm`) with the
+     * resting card shadow and no border. `none` (the default) leaves the
+     * surface to the container it sits in.
      */
     surface?: "none" | "card";
     className?: string;
@@ -36,6 +43,11 @@ interface EmptyStateProps {
  * title to body, 16px from body to the action. The action is full-width on a
  * phone and hugs its label from `sm`.
  *
+ * The tile is 20px-radius (22px from `sm`); the title is 16px on a phone,
+ * 18px from `sm`. On `surface="card"` the card itself is 14px-radius (16px
+ * from `sm`), no border, with 20px side padding to the action row — measured
+ * off the frames' DOM (reports/02-p4, calendar/02-c2), not eyeballed.
+ *
  * The error variant says "error" with its glyph and its tile's wash, not by
  * painting the title and body red: red body copy is both harder to read and
  * louder than a load failure the user can retry.

package/dist/components/empty-state.js

@@ -58,7 +58,7 @@ var EmptyState = React.forwardRef(
         className: cn(
           "flex flex-col items-center justify-center text-center",
           sizeStyles[size],
-          surface === "card" && "rounded-2xl border border-border bg-card shadow-[var(--shadow-card)]",
+          surface === "card" && "rounded-[14px] bg-card px-5 shadow-[var(--shadow-card)] sm:rounded-[16px]",
           className
         )
       }, props), {
@@ -70,25 +70,31 @@ var EmptyState = React.forwardRef(
               className: cn(
                 // The glyph size is the tile's, whatever size the caller's icon
                 // node asked for — a 40px icon in a 64px tile has no margin.
-                "mb-4 flex size-16 shrink-0 items-center justify-center rounded-2xl border border-border shadow-sm sm:size-18 [&_svg]:size-7",
+                "mb-4 flex size-16 shrink-0 items-center justify-center rounded-[20px] border border-border shadow-sm sm:size-18 sm:rounded-[22px] [&_svg]:size-7",
                 variant === "error" ? "bg-destructive/5" : "bg-card"
               ),
               children: icon != null ? icon : DEFAULT_ICON[variant]
             }
           ),
-          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: "text-lg", children: title }),
+          /* @__PURE__ */ jsx(Text, { as: "h3", weight: "semibold", className: "text-base sm:text-lg", children: title }),
           description ? /* @__PURE__ */ jsx(Text, { as: "p", color: "muted", className: "mt-3 max-w-md text-sm", children: description }) : null,
           (action || secondaryAction) && /* @__PURE__ */ jsxs("div", { className: "mt-4 flex w-full flex-col gap-3 sm:w-auto sm:flex-row sm:items-center", children: [
-            action && /* @__PURE__ */ jsx(
+            action && /* @__PURE__ */ jsxs(
               Button,
               {
                 onClick: action.onClick,
                 variant: actionVariant != null ? actionVariant : DEFAULT_ACTION_VARIANT[variant],
                 className: "glass-hover",
-                children: action.label
+                children: [
+                  action.icon,
+                  action.label
+                ]
               }
             ),
-            secondaryAction && /* @__PURE__ */ jsx(Button, { onClick: secondaryAction.onClick, variant: "outline", className: "glass-hover", children: secondaryAction.label })
+            secondaryAction && /* @__PURE__ */ jsxs(Button, { onClick: secondaryAction.onClick, variant: "outline", className: "glass-hover", children: [
+              secondaryAction.icon,
+              secondaryAction.label
+            ] })
           ] })
         ]
       })

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "default" | "inherit" | "primary" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "default" | "primary" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -22,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "body" | "small" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "default" | "inherit" | "primary" | "destructive" | "muted" | "primary-foreground" | null | undefined;
+    variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/venue-events-block.js

@@ -1,6 +1,6 @@
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';
-import { Card } from '../chunk-FVSKGCK3.js';
+import { Card } from '../chunk-DZHKUUYV.js';
 import '../chunk-ZLMRVBD7.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.39",
+  "version": "0.8.40",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/card.stories.tsx

@@ -11,7 +11,7 @@ const meta = {
   argTypes: {
     variant: {
       control: "select",
-      options: ["glass", "surface"],
+      options: ["glass", "surface", "outline", "muted", "elevated", "elevatedPanel", "section"],
     },
   },
 } satisfies Meta<typeof Card>;
@@ -47,6 +47,25 @@ export const Surface: Story = {
   ),
 };
 
+/**
+ * The booking frames' settings/report section shape (Settings Rules U0,
+ * Reports P0): 14px radius on a phone, 16px from `sm`, shadow only, no
+ * border. Distinct from `elevated`, which is a fixed 24px with a hairline.
+ */
+export const Section: Story = {
+  render: () => (
+    <Card variant="section" className="w-[350px]">
+      <CardHeader>
+        <CardTitle>Booking rules</CardTitle>
+        <CardDescription>How far ahead guests can book, and the slot length.</CardDescription>
+      </CardHeader>
+      <CardContent>
+        <p className="text-sm text-muted-foreground">Section content goes here.</p>
+      </CardContent>
+    </Card>
+  ),
+};
+
 export const WithForm: Story = {
   render: () => (
     <Card className="w-[350px]">

package/src/components/card.test.tsx

@@ -0,0 +1,27 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Card } from "./card";
+
+describe("Card", () => {
+  it("draws the section variant borderless, at the booking frames' radius", () => {
+    render(<Card variant="section">Content</Card>);
+    const card = screen.getByText("Content");
+    expect(card).toHaveClass("rounded-[14px]", "sm:rounded-[16px]", "bg-card");
+    expect(card).not.toHaveClass("border", "border-border");
+  });
+
+  it("keeps elevated's fixed radius and hairline, unaffected by the new variant", () => {
+    render(<Card variant="elevated">Content</Card>);
+    const card = screen.getByText("Content");
+    expect(card).toHaveClass("rounded-3xl", "border", "border-border");
+  });
+
+  it("steps section's shadow up on hover when interactive", () => {
+    render(
+      <Card variant="section" interactive>
+        Content
+      </Card>
+    );
+    expect(screen.getByText("Content")).toHaveClass("hover:shadow-[var(--shadow-card-hover)]");
+  });
+});

package/src/components/card.tsx

@@ -35,6 +35,15 @@ const cardVariants = cva(
         // wobble rather than a lift. A panel that size delegates interaction to
         // its children.
         elevatedPanel: "bg-card border border-border shadow-[var(--shadow-panel)]",
+        // The booking frames' settings/report SECTION card (Settings Rules U0,
+        // Reports P0): a smaller, page-content-scale radius than every other
+        // variant's `rounded-3xl` — 14px on a phone, 16px from `sm` — carried
+        // entirely by `--shadow-card` with no border at all. Not a bigger
+        // `elevated`: that variant is fixed at 24px and keeps its hairline in
+        // both themes on purpose (see its note); this one is for the specific
+        // page-section shape the booking design draws, not a general
+        // border-dropping replacement for `elevated`.
+        section: "rounded-[14px] bg-card shadow-[var(--shadow-card)] sm:rounded-[16px]",
       },
       size: {
         sm: "[&_[data-slot=card-header]]:p-4 [&_[data-slot=card-content]]:p-4 [&_[data-slot=card-content]]:pt-0 [&_[data-slot=card-footer]]:p-4 [&_[data-slot=card-footer]]:pt-0",
@@ -68,6 +77,11 @@ const cardVariants = cva(
         interactive: true,
         class: "hover:shadow-[var(--shadow-card-hover)]",
       },
+      {
+        variant: "section",
+        interactive: true,
+        class: "hover:shadow-[var(--shadow-card-hover)]",
+      },
     ],
   defaultVariants: {
     variant: "surface",

package/src/components/empty-state.stories.tsx

@@ -1,4 +1,5 @@
 import type { Meta, StoryObj } from "@storybook/react";
+import { RefreshCw, Plus } from "lucide-react";
 import { EmptyState, SearchEmptyState, ErrorEmptyState } from "./empty-state";
 
 const meta: Meta<typeof EmptyState> = {
@@ -49,7 +50,10 @@ export const Error: Story = {
   ),
 };
 
-/** The booking pages' whole-body failure (reports/02-p4, calendar/02-c2). */
+/**
+ * The booking pages' whole-body failure (reports/02-p4, calendar/02-c2): a
+ * 14px/16px-radius borderless card and the recovery action's refresh glyph.
+ */
 export const ErrorCard: Story = {
   render: () => (
     <div className="bg-background p-4">
@@ -57,7 +61,20 @@ export const ErrorCard: Story = {
         surface="card"
         title="Couldn't load this report"
         description="This is on our side, not an empty week. Try again in a moment."
-        action={{ label: "Try again", onClick: () => {} }}
+        action={{ label: "Try again", onClick: () => {}, icon: <RefreshCw /> }}
+      />
+    </div>
+  ),
+};
+
+/** The calendar day's failure, with the pinned footer's "New reservation" action alongside — both actions carry a leading glyph. */
+export const ActionWithIcon: Story = {
+  render: () => (
+    <div className="bg-background p-4">
+      <EmptyState
+        title="No reservations yet"
+        description="This day is open. Start the first booking."
+        action={{ label: "New reservation", onClick: () => {}, icon: <Plus /> }}
       />
     </div>
   ),

package/src/components/empty-state.test.tsx

@@ -1,6 +1,7 @@
 import { describe, it, expect, vi } from "vitest";
 import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
+import { RefreshCw } from "lucide-react";
 import { EmptyState, ErrorEmptyState, SearchEmptyState } from "./empty-state";
 
 const retry = { label: "Try again", onClick: () => {} };
@@ -51,10 +52,27 @@ describe("EmptyState", () => {
     expect(screen.getByRole("status").querySelector("p")).toBeNull();
   });
 
-  it("draws the card surface on request only", () => {
+  it("draws the card surface on request only, borderless with the frames' radius", () => {
     const { rerender } = render(<EmptyState title="Empty" description="Nothing." />);
     expect(screen.getByRole("status")).not.toHaveClass("bg-card");
     rerender(<EmptyState title="Empty" description="Nothing." surface="card" />);
-    expect(screen.getByRole("status")).toHaveClass("rounded-2xl", "bg-card", "border");
+    const card = screen.getByRole("status");
+    expect(card).toHaveClass("rounded-[14px]", "sm:rounded-[16px]", "bg-card", "px-5");
+    expect(card).not.toHaveClass("border", "border-border");
+  });
+
+  it("renders the action's icon before its label", () => {
+    render(
+      <ErrorEmptyState
+        title="Couldn't load this report"
+        description="On our side."
+        action={{ label: "Try again", onClick: () => {}, icon: <RefreshCw data-testid="retry-icon" /> }}
+      />
+    );
+    const button = screen.getByRole("button", { name: "Try again" });
+    const icon = screen.getByTestId("retry-icon");
+    expect(button).toContainElement(icon);
+    expect(button.firstElementChild).toBe(icon);
+    expect(button.textContent).toBe("Try again");
   });
 });

package/src/components/empty-state.tsx

@@ -9,6 +9,12 @@ import { Search, AlertCircle, FileX } from "lucide-react";
 type EmptyStateAction = {
   label: string;
   onClick: () => void;
+  /**
+   * Rendered before the label, sized like the DS button's own icons (the
+   * `Button` base class forces every child `<svg>` to 16px) — "Try again"
+   * carries a refresh glyph, "New reservation" a plus.
+   */
+  icon?: React.ReactNode;
 };
 
 type EmptyStateVariant = "default" | "search" | "error";
@@ -31,8 +37,9 @@ interface EmptyStateProps {
   size?: "sm" | "md" | "lg";
   /**
    * `card` draws the booking pages' whole-body state card (reports/02-p4,
-   * calendar/02-c2): a 16px-radius card surface with the resting card shadow.
-   * `none` (the default) leaves the surface to the container it sits in.
+   * calendar/02-c2): a 14px-radius card surface (16px from `sm`) with the
+   * resting card shadow and no border. `none` (the default) leaves the
+   * surface to the container it sits in.
    */
   surface?: "none" | "card";
   className?: string;
@@ -63,6 +70,11 @@ const DEFAULT_ICON: Record<EmptyStateVariant, React.ReactNode> = {
  * title to body, 16px from body to the action. The action is full-width on a
  * phone and hugs its label from `sm`.
  *
+ * The tile is 20px-radius (22px from `sm`); the title is 16px on a phone,
+ * 18px from `sm`. On `surface="card"` the card itself is 14px-radius (16px
+ * from `sm`), no border, with 20px side padding to the action row — measured
+ * off the frames' DOM (reports/02-p4, calendar/02-c2), not eyeballed.
+ *
  * The error variant says "error" with its glyph and its tile's wash, not by
  * painting the title and body red: red body copy is both harder to read and
  * louder than a load failure the user can retry.
@@ -93,7 +105,7 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
           "flex flex-col items-center justify-center text-center",
           sizeStyles[size],
           surface === "card" &&
-            "rounded-2xl border border-border bg-card shadow-[var(--shadow-card)]",
+            "rounded-[14px] bg-card px-5 shadow-[var(--shadow-card)] sm:rounded-[16px]",
           className
         )}
         {...props}
@@ -106,7 +118,7 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
             className={cn(
               // The glyph size is the tile's, whatever size the caller's icon
               // node asked for — a 40px icon in a 64px tile has no margin.
-              "mb-4 flex size-16 shrink-0 items-center justify-center rounded-2xl border border-border shadow-sm sm:size-18 [&_svg]:size-7",
+              "mb-4 flex size-16 shrink-0 items-center justify-center rounded-[20px] border border-border shadow-sm sm:size-18 sm:rounded-[22px] [&_svg]:size-7",
               variant === "error" ? "bg-destructive/5" : "bg-card"
             )}
           >
@@ -114,7 +126,7 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
           </span>
         )}
 
-        <Text as="h3" weight="semibold" className="text-lg">
+        <Text as="h3" weight="semibold" className="text-base sm:text-lg">
           {title}
         </Text>
 
@@ -132,11 +144,13 @@ const EmptyState = React.forwardRef<HTMLDivElement, EmptyStateProps>(
                 variant={actionVariant ?? DEFAULT_ACTION_VARIANT[variant]}
                 className="glass-hover"
               >
+                {action.icon}
                 {action.label}
               </Button>
             )}
             {secondaryAction && (
               <Button onClick={secondaryAction.onClick} variant="outline" className="glass-hover">
+                {secondaryAction.icon}
                 {secondaryAction.label}
               </Button>
             )}