@bearmenu/ui 0.8.25 → 0.8.27

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

package/dist/components/textarea.d.ts

@@ -1,6 +1,13 @@
+import * as class_variance_authority_types from 'class-variance-authority/types';
 import * as React from 'react';
+import { VariantProps } from 'class-variance-authority';
 
-type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
-declare const Textarea: React.ForwardRefExoticComponent<TextareaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const textareaVariants: (props?: ({
+    appearance?: "default" | "booking" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string;
+type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps<typeof textareaVariants>;
+declare const Textarea: React.ForwardRefExoticComponent<React.TextareaHTMLAttributes<HTMLTextAreaElement> & VariantProps<(props?: ({
+    appearance?: "default" | "booking" | null | undefined;
+} & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLTextAreaElement>>;
 
-export { Textarea, type TextareaProps };
+export { Textarea, type TextareaProps, textareaVariants };

package/dist/components/textarea.js

@@ -1,19 +1,34 @@
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
+import { cva } from 'class-variance-authority';
 import { jsx } from 'react/jsx-runtime';
 
+var textareaVariants = cva(
+  "flex min-h-20 w-full rounded-xl border border-border bg-input/50 px-4 py-3 text-base transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 resize-y aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      /**
+       * The booking flow's note field (booking flow.html, `.in.ta`): the
+       * `Input` booking appearance's ground, radius and type, 66px tall with
+       * a 12px × 13px inset, and no drag handle — the design draws none.
+       */
+      appearance: {
+        default: "",
+        booking: "min-h-[66px] resize-none rounded-[11px] bg-card px-[13px] py-3 text-[14px] leading-[1.4] focus-visible:bg-card aria-invalid:border-[oklch(0.52_0.16_25)] dark:aria-invalid:border-destructive"
+      }
+    },
+    defaultVariants: { appearance: "default" }
+  }
+);
 var Textarea = React.forwardRef(
   (_a, ref) => {
-    var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
+    var _b = _a, { className, appearance } = _b, props = __objRest(_b, ["className", "appearance"]);
     return /* @__PURE__ */ jsx(
       "textarea",
       __spreadValues({
         "data-slot": "textarea",
-        className: cn(
-          "flex min-h-20 w-full rounded-xl border border-border bg-input/50 px-4 py-3 text-base transition-colors placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background focus-visible:bg-input disabled:cursor-not-allowed disabled:opacity-50 resize-y aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
-          className
-        ),
+        className: cn(textareaVariants({ appearance }), className),
         ref
       }, props)
     );
@@ -21,4 +36,4 @@ var Textarea = React.forwardRef(
 );
 Textarea.displayName = "Textarea";
 
-export { Textarea };
+export { Textarea, textareaVariants };

package/dist/components/toggle-group.js

@@ -1,4 +1,4 @@
-import { toggleVariants } from '../chunk-VEGFQSZA.js';
+import { toggleVariants } from '../chunk-F3XK34DV.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-MMUBH76A.js';
 import * as React from 'react';
@@ -72,11 +72,11 @@ function ToggleGroupItem(_a) {
         }),
         "min-w-0 flex-1 shrink-0 shadow-none focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
         resolved === "segmented" ? "rounded-full px-0 data-[state=on]:shadow-[var(--shadow-card)]" : (
-          // Tabs and chips size to their type: the size variant's fixed
-          // height and min-width would otherwise win the merge.
-          resolved === "tab" ? "h-auto min-w-0 rounded-full px-3" : resolved === "chip" ? (
+          // Tabs and chips size themselves (`toggleVariants`' compounds);
+          // the item's own rounding must not square them off.
+          resolved === "tab" ? "rounded-full" : resolved === "chip" ? (
             // A chip keeps its own width, so the row can wrap.
-            "h-auto min-w-0 flex-none rounded-full px-[13px]"
+            "flex-none rounded-full"
           ) : "rounded-none first:rounded-l-md last:rounded-r-md"
         ),
         className

package/dist/components/toggle.d.ts

@@ -5,7 +5,7 @@ import * as TogglePrimitive from '@radix-ui/react-toggle';
 import { VariantProps } from 'class-variance-authority';
 
 declare const toggleVariants: (props?: ({
-    variant?: "tab" | "default" | "outline" | "chip" | "segmented" | null | undefined;
+    variant?: "default" | "tab" | "outline" | "chip" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare function Toggle({ className, variant, size, ...props }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>): react_jsx_runtime.JSX.Element;

package/dist/components/toggle.js

@@ -1,3 +1,3 @@
-export { Toggle, toggleVariants } from '../chunk-VEGFQSZA.js';
+export { Toggle, toggleVariants } from '../chunk-F3XK34DV.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.25",
+  "version": "0.8.27",
+  "packageManager": "pnpm@10.28.1",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -16,20 +17,213 @@
     "src"
   ],
   "exports": {
+    "./components/accordion": "./src/components/accordion.tsx",
+    "./components/alert": "./src/components/alert.tsx",
+    "./components/alert-dialog": "./src/components/alert-dialog.tsx",
+    "./components/aspect-ratio": "./src/components/aspect-ratio.tsx",
+    "./components/avatar": "./src/components/avatar.tsx",
+    "./components/badge": "./src/components/badge.tsx",
+    "./components/banner": "./src/components/banner.tsx",
+    "./components/booking-row": "./src/components/booking-row.tsx",
+    "./components/booking-summary-card": "./src/components/booking-summary-card.tsx",
+    "./components/breadcrumb": "./src/components/breadcrumb.tsx",
+    "./components/button": "./src/components/button.tsx",
+    "./components/button-group": "./src/components/button-group.tsx",
+    "./components/calendar": "./src/components/calendar.tsx",
+    "./components/card": "./src/components/card.tsx",
+    "./components/carousel": "./src/components/carousel.tsx",
+    "./components/category-deck": "./src/components/category-deck.tsx",
+    "./components/checkbox": "./src/components/checkbox.tsx",
+    "./components/circular-progress": "./src/components/circular-progress.tsx",
+    "./components/coach-marks": "./src/components/coach-marks.tsx",
+    "./components/collapsible": "./src/components/collapsible.tsx",
+    "./components/combobox": "./src/components/combobox.tsx",
+    "./components/command": "./src/components/command.tsx",
+    "./components/concept-card": "./src/components/concept-card.tsx",
+    "./components/concept-compare": "./src/components/concept-compare.tsx",
+    "./components/concept-compare-rail": "./src/components/concept-compare-rail.tsx",
+    "./components/concept-convergence": "./src/components/concept-convergence.tsx",
+    "./components/convergence": "./src/components/convergence.tsx",
+    "./components/coverflow": "./src/components/coverflow.tsx",
+    "./components/currency-input": "./src/components/currency-input.tsx",
+    "./components/date-input": "./src/components/date-input.tsx",
+    "./components/day-rail-chip": "./src/components/day-rail-chip.tsx",
+    "./components/description-list": "./src/components/description-list.tsx",
+    "./components/dialog": "./src/components/dialog.tsx",
+    "./components/doorway-tiles": "./src/components/doorway-tiles.tsx",
+    "./components/drawer": "./src/components/drawer.tsx",
+    "./components/drift-rail": "./src/components/drift-rail.tsx",
+    "./components/dropdown-menu": "./src/components/dropdown-menu.tsx",
+    "./components/empty-state": "./src/components/empty-state.tsx",
+    "./components/event-card": "./src/components/event-card.tsx",
+    "./components/event-compact-row": "./src/components/event-compact-row.tsx",
+    "./components/event-day-header": "./src/components/event-day-header.tsx",
+    "./components/event-day-separator": "./src/components/event-day-separator.tsx",
+    "./components/event-detail-panel": "./src/components/event-detail-panel.tsx",
+    "./components/event-hub-hero": "./src/components/event-hub-hero.tsx",
+    "./components/event-index-row": "./src/components/event-index-row.tsx",
+    "./components/event-list-row": "./src/components/event-list-row.tsx",
+    "./components/event-list-row-wide": "./src/components/event-list-row-wide.tsx",
+    "./components/event-poster-fallback": "./src/components/event-poster-fallback.tsx",
+    "./components/event-tonight-strip": "./src/components/event-tonight-strip.tsx",
+    "./components/event-types": "./src/components/event-types.ts",
+    "./components/events-empty-state": "./src/components/events-empty-state.tsx",
+    "./components/explainer-steps": "./src/components/explainer-steps.tsx",
+    "./components/facet-group": "./src/components/facet-group.tsx",
+    "./components/featured-rail-item": "./src/components/featured-rail-item.tsx",
+    "./components/field": "./src/components/field.tsx",
+    "./components/filter-category-row": "./src/components/filter-category-row.tsx",
+    "./components/form": "./src/components/form.tsx",
+    "./components/glass-ground": "./src/components/glass-ground.tsx",
+    "./components/grade-atom": "./src/components/grade-atom.tsx",
+    "./components/haptic-switch": "./src/components/haptic-switch.tsx",
+    "./components/hold-countdown": "./src/components/hold-countdown.tsx",
+    "./components/hub-surface": "./src/components/hub-surface.tsx",
+    "./components/hue-chip": "./src/components/hue-chip.tsx",
+    "./components/icon": "./src/components/icon.tsx",
+    "./components/input": "./src/components/input.tsx",
+    "./components/input-group": "./src/components/input-group.tsx",
+    "./components/input-otp": "./src/components/input-otp.tsx",
+    "./components/item": "./src/components/item.tsx",
+    "./components/kbd": "./src/components/kbd.tsx",
+    "./components/label": "./src/components/label.tsx",
+    "./components/kitchen-dossier": "./src/components/kitchen-dossier.tsx",
+    "./components/lazy-markdown": "./src/components/lazy-markdown.tsx",
+    "./components/link-button": "./src/components/link-button.tsx",
+    "./components/markdown-renderer": "./src/components/markdown-renderer.tsx",
+    "./components/menu-dead-end": "./src/components/menu-dead-end.tsx",
+    "./components/menu-family-block": "./src/components/menu-family-block.tsx",
+    "./components/menu-family-card": "./src/components/menu-family-card.tsx",
+    "./components/menu-field": "./src/components/menu-field.tsx",
+    "./components/menu-filter-chips": "./src/components/menu-filter-chips.tsx",
+    "./components/menu-group-rows": "./src/components/menu-group-rows.tsx",
+    "./components/menu-hub-hero": "./src/components/menu-hub-hero.tsx",
+    "./components/menu-index-header": "./src/components/menu-index-header.tsx",
+    "./components/menu-index-list": "./src/components/menu-index-list.tsx",
+    "./components/menu-intent-hero": "./src/components/menu-intent-hero.tsx",
+    "./components/menu-item": "./src/components/menu-item.tsx",
+    "./components/menu-kitchen-list": "./src/components/menu-kitchen-list.tsx",
+    "./components/menu-mocks": "./src/components/menu-mocks.ts",
+    "./components/menu-types": "./src/components/menu-types.ts",
+    "./components/motion-icon": "./src/components/motion-icon.tsx",
+    "./components/motion-icon-actions": "./src/components/motion-icon-actions.tsx",
+    "./components/motion-icon-controls": "./src/components/motion-icon-controls.tsx",
+    "./components/motion-icon-set": "./src/components/motion-icon-set.tsx",
+    "./components/multi-select-combobox": "./src/components/multi-select-combobox.tsx",
+    "./components/multi-select-menu": "./src/components/multi-select-menu.tsx",
+    "./components/native-select": "./src/components/native-select.tsx",
+    "./components/open-now-list": "./src/components/open-now-list.tsx",
+    "./components/pagination": "./src/components/pagination.tsx",
+    "./components/party-counter": "./src/components/party-counter.tsx",
+    "./components/phone-frame": "./src/components/phone-frame.tsx",
+    "./components/photo-ground": "./src/components/photo-ground.tsx",
+    "./components/place-about-tab": "./src/components/place-about-tab.tsx",
+    "./components/place-card": "./src/components/place-card.tsx",
+    "./components/place-details-mobile": "./src/components/place-details-mobile.tsx",
+    "./components/place-schedule-week": "./src/components/place-schedule-week.tsx",
+    "./components/place-types": "./src/components/place-types.ts",
+    "./components/popover": "./src/components/popover.tsx",
+    "./components/poster-stack": "./src/components/poster-stack.tsx",
+    "./components/poster-tape": "./src/components/poster-tape.tsx",
+    "./components/poster-wall": "./src/components/poster-wall.tsx",
+    "./components/progress": "./src/components/progress.tsx",
+    "./components/qa-block": "./src/components/qa-block.tsx",
+    "./components/quiet-stretch": "./src/components/quiet-stretch.tsx",
+    "./components/radio-group": "./src/components/radio-group.tsx",
+    "./components/rating": "./src/components/rating.tsx",
+    "./components/scroll-area": "./src/components/scroll-area.tsx",
+    "./components/scroll-fade": "./src/components/scroll-fade.tsx",
+    "./components/search-bar": "./src/components/search-bar.tsx",
+    "./components/searchable-select": "./src/components/searchable-select.tsx",
+    "./components/section-header": "./src/components/section-header.tsx",
+    "./components/segmented-nav": "./src/components/segmented-nav.tsx",
+    "./components/select": "./src/components/select.tsx",
+    "./components/selection-bar": "./src/components/selection-bar.tsx",
+    "./components/separator": "./src/components/separator.tsx",
+    "./components/sheet": "./src/components/sheet.tsx",
+    "./components/signature-chip": "./src/components/signature-chip.tsx",
+    "./components/skeleton": "./src/components/skeleton.tsx",
+    "./components/skeleton-card": "./src/components/skeleton-card.tsx",
+    "./components/slider": "./src/components/slider.tsx",
+    "./components/sliding-panels": "./src/components/sliding-panels.tsx",
+    "./components/sonner": "./src/components/sonner.tsx",
+    "./components/sort-option-list": "./src/components/sort-option-list.tsx",
+    "./components/spinner": "./src/components/spinner.tsx",
+    "./components/stat-banner": "./src/components/stat-banner.tsx",
+    "./components/stepper": "./src/components/stepper.tsx",
+    "./components/sticky-container": "./src/components/sticky-container.tsx",
+    "./components/story": "./src/components/story.tsx",
+    "./components/switch": "./src/components/switch.tsx",
+    "./components/table": "./src/components/table.tsx",
+    "./components/tabs": "./src/components/tabs.tsx",
+    "./components/tag": "./src/components/tag.tsx",
+    "./components/tag-group": "./src/components/tag-group.tsx",
+    "./components/text": "./src/components/text.tsx",
+    "./components/textarea": "./src/components/textarea.tsx",
+    "./components/time-slot": "./src/components/time-slot.tsx",
+    "./components/timeline-day": "./src/components/timeline-day.tsx",
+    "./components/timeline-hour": "./src/components/timeline-hour.tsx",
+    "./components/timeline-hour-puck": "./src/components/timeline-hour-puck.tsx",
+    "./components/toggle": "./src/components/toggle.tsx",
+    "./components/toggle-group": "./src/components/toggle-group.tsx",
+    "./components/tooltip": "./src/components/tooltip.tsx",
+    "./components/top-comparison": "./src/components/top-comparison.tsx",
+    "./components/top-cross-link": "./src/components/top-cross-link.tsx",
+    "./components/top-ranking-entry": "./src/components/top-ranking-entry.tsx",
+    "./components/top-ranking-hero": "./src/components/top-ranking-hero.tsx",
+    "./components/top-ranking-legend": "./src/components/top-ranking-legend.tsx",
+    "./components/top-types": "./src/components/top-types.ts",
+    "./components/use-mobile": "./src/components/use-mobile.tsx",
+    "./components/venue-events-block": "./src/components/venue-events-block.tsx",
+    "./components/venue-grade-dimensions": "./src/components/venue-grade-dimensions.tsx",
+    "./components/venue-quotes": "./src/components/venue-quotes.tsx",
+    "./components/venue-wall": "./src/components/venue-wall.tsx",
+    "./components/weekday-chip": "./src/components/weekday-chip.tsx",
+    "./components/weekday-theme-banner": "./src/components/weekday-theme-banner.tsx",
+    "./components/weekend-panel": "./src/components/weekend-panel.tsx",
     "./globals.css": "./src/globals.css",
-    "./components/*": {
-      "types": "./dist/components/*.d.ts",
-      "import": "./dist/components/*.js"
-    },
-    "./hooks/*": {
-      "types": "./dist/hooks/*.d.ts",
-      "import": "./dist/hooks/*.js"
-    },
-    "./lib/*": {
-      "types": "./dist/lib/*.d.ts",
-      "import": "./dist/lib/*.js"
+    "./hooks/use-drag-swipe": "./src/hooks/use-drag-swipe.ts",
+    "./hooks/use-haptic": "./src/hooks/use-haptic.ts",
+    "./hooks/use-media-query": "./src/hooks/use-media-query.ts",
+    "./hooks/use-mobile": "./src/hooks/use-mobile.ts",
+    "./hooks/use-mounted-theme": "./src/hooks/use-mounted-theme.ts",
+    "./hooks/use-sticky": "./src/hooks/use-sticky.ts",
+    "./lib/card-hover": "./src/lib/card-hover.ts",
+    "./lib/grade": "./src/lib/grade.ts",
+    "./lib/icon-depth": "./src/lib/icon-depth.ts",
+    "./lib/icon-registry": "./src/lib/icon-registry.ts",
+    "./lib/motion": "./src/lib/motion.ts",
+    "./lib/overlay-pill": "./src/lib/overlay-pill.ts",
+    "./lib/utils": "./src/lib/utils.ts"
+  },
+  "publishConfig": {
+    "exports": {
+      "./globals.css": "./src/globals.css",
+      "./components/*": {
+        "types": "./dist/components/*.d.ts",
+        "import": "./dist/components/*.js"
+      },
+      "./hooks/*": {
+        "types": "./dist/hooks/*.d.ts",
+        "import": "./dist/hooks/*.js"
+      },
+      "./lib/*": {
+        "types": "./dist/lib/*.d.ts",
+        "import": "./dist/lib/*.js"
+      }
     }
   },
+  "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "build": "tsup",
+    "dev": "tsup --watch",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "clean": "rm -rf dist",
+    "prepublishOnly": "pnpm run build"
+  },
   "peerDependencies": {
     "@hookform/resolvers": "^3.0.0 || ^5.0.0",
     "@radix-ui/react-accordion": "*",
@@ -138,15 +332,5 @@
     "vaul": "^1.1.2",
     "vitest": "^4.1.5",
     "zod": "^3.25.67"
-  },
-  "scripts": {
-    "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
-    "build": "tsup",
-    "dev": "tsup --watch",
-    "typecheck": "tsc --noEmit",
-    "test": "vitest run",
-    "test:watch": "vitest",
-    "clean": "rm -rf dist"
   }
-}
+}

package/src/components/banner.stories.tsx

@@ -0,0 +1,36 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { TriangleAlert } from "lucide-react";
+import { Banner } from "./banner";
+
+const meta: Meta<typeof Banner> = {
+  title: "Booking/Banner",
+  component: Banner,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A short inline note inside a flow: the booking flow's 'time just went', 'no table was booked', 'this venue does not take bookings'. Borderless, unlike Alert.",
+      },
+    },
+  },
+  decorators: [(Story) => <div className="w-[335px]">{Story()}</div>],
+};
+
+export default meta;
+type Story = StoryObj<typeof Banner>;
+
+/** S5: the time went while the guest was typing. */
+export const Warning: Story = {
+  args: {
+    tone: "warning",
+    icon: <TriangleAlert aria-hidden />,
+    title: "19:30 just went",
+    children: "Someone booked it while you were filling this in. Your details are kept — pick another time.",
+  },
+};
+
+/** B0c: a venue that takes no bookings. */
+export const Info: Story = {
+  args: { tone: "info", children: "This venue does not take bookings. Walk-ins only." },
+};

package/src/components/banner.tsx

@@ -0,0 +1,58 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../lib/utils";
+
+/**
+ * Banner — a short inline note inside a flow, not a page-level alert: the
+ * booking flow's "19:30 just went" when a time is taken mid-form, "No table
+ * was booked" when a confirm fails, "This venue does not take bookings"
+ * (booking flow.html, `.bnr`).
+ *
+ * Not `Alert`: that one is a bordered card for page-level status with a
+ * pinned icon column. This is borderless, sits in the flow of a form, and
+ * reads as part of the screen — a soft ground, an optional 16px icon, an
+ * optional bold title over the body.
+ *
+ * Measured from the design: 12px radius, 12px × 14px inset, 10px between
+ * icon and text; the title at 13px bold, the body at 12.5px (90% in the
+ * warning tone), both at 1.5 leading.
+ * - `info`: the soft surface and the secondary ink.
+ * - `warning`: a 16% amber wash with the design's amber ink — darker than
+ *   the solid `--warning`, which falls short of AA on its own wash at this
+ *   size; dark mode uses the lifted token.
+ */
+const bannerVariants = cva(
+  "flex gap-2.5 rounded-xl px-3.5 py-3 text-[12.5px] leading-normal [&>svg]:mt-0.5 [&>svg]:size-4 [&>svg]:shrink-0",
+  {
+    variants: {
+      tone: {
+        info: "bg-surface-2 text-ink-secondary",
+        warning:
+          "bg-[oklch(0.62_0.15_70/0.16)] text-[oklch(0.42_0.1_70)] dark:bg-warning/15 dark:text-warning",
+      },
+    },
+    defaultVariants: { tone: "info" },
+  }
+);
+
+export type BannerProps = Omit<React.HTMLAttributes<HTMLDivElement>, "title"> &
+  VariantProps<typeof bannerVariants> & {
+    /** A lucide icon, drawn at 16px beside the text. */
+    icon?: React.ReactNode;
+    /** The bold first line — "19:30 just went". */
+    title?: React.ReactNode;
+  };
+
+function Banner({ tone, icon, title, className, children, ...props }: BannerProps) {
+  return (
+    <div data-slot="banner" className={cn(bannerVariants({ tone }), className)} {...props}>
+      {icon}
+      <div className="min-w-0">
+        {title ? <b className="mb-[3px] block text-[13px] font-bold">{title}</b> : null}
+        <div className={cn(tone === "warning" && title ? "opacity-90" : undefined)}>{children}</div>
+      </div>
+    </div>
+  );
+}
+
+export { Banner, bannerVariants };

package/src/components/booking-details-primitives.test.tsx

@@ -0,0 +1,75 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { TriangleAlert } from "lucide-react";
+import { cn } from "../lib/utils";
+import { Banner } from "./banner";
+import { Checkbox } from "./checkbox";
+import { Field, FieldControl, FieldError, FieldLabel, FieldOptional } from "./field";
+import { Input } from "./input";
+import { Textarea } from "./textarea";
+import { toggleVariants } from "./toggle";
+
+describe("toggleVariants chip and tab", () => {
+  it("keeps the chip's own sizing when called bare, with the default size", () => {
+    const classes = cn(toggleVariants({ variant: "chip" })).split(" ");
+    expect(classes).toContain("h-auto");
+    expect(classes).toContain("px-[13px]");
+    expect(classes).not.toContain("h-9");
+    expect(classes).not.toContain("px-2");
+  });
+
+  it("keeps the tab's own sizing too", () => {
+    const classes = cn(toggleVariants({ variant: "tab", size: "lg" })).split(" ");
+    expect(classes).toContain("h-auto");
+    expect(classes).toContain("px-3");
+    expect(classes).not.toContain("h-10");
+  });
+});
+
+describe("booking field", () => {
+  it("labels its control, marks it invalid and describes it by the error", () => {
+    render(
+      <Field appearance="booking" invalid>
+        <FieldLabel>
+          Phone <FieldOptional>(optional)</FieldOptional>
+        </FieldLabel>
+        <FieldControl>
+          <Input appearance="booking" defaultValue="0712 34" />
+        </FieldControl>
+        <FieldError>That number looks too short.</FieldError>
+      </Field>
+    );
+    const input = screen.getByLabelText(/Phone/);
+    expect(input).toHaveAttribute("aria-invalid", "true");
+    expect(input).toHaveAccessibleDescription(/That number looks too short\./);
+    expect(input.className).toContain("h-[46px]");
+    // The booking label stays muted when the field is invalid.
+    expect(screen.getByText(/Phone/).className).not.toContain("text-destructive");
+  });
+
+  it("gives the note field and the opt-in their booking shapes", () => {
+    render(
+      <>
+        <Textarea appearance="booking" aria-label="Anything we should know" />
+        <Checkbox appearance="booking" aria-label="Save these details" defaultChecked />
+      </>
+    );
+    expect(screen.getByRole("textbox").className).toContain("min-h-[66px]");
+    const box = screen.getByRole("checkbox");
+    expect(box).toHaveAttribute("data-state", "checked");
+    expect(box.className).toContain("size-[17px]");
+  });
+});
+
+describe("Banner", () => {
+  it("reads as its title over its body, with the icon beside", () => {
+    render(
+      <Banner tone="warning" icon={<TriangleAlert aria-hidden />} title="19:30 just went">
+        Someone booked it while you were filling this in.
+      </Banner>
+    );
+    const banner = screen.getByText("19:30 just went").closest("[data-slot=banner]");
+    expect(banner).toHaveTextContent("19:30 just wentSomeone booked it");
+    expect(banner?.querySelector("svg")).not.toBeNull();
+  });
+});