@bearmenu/ui 0.8.25 → 0.8.26

package/package.json

@@ -1,6 +1,7 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.25",
+  "version": "0.8.26",
+  "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="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();
+  });
+});

package/src/components/checkbox.tsx

@@ -2,31 +2,57 @@
 
 import * as React from "react";
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import { cva, type VariantProps } from "class-variance-authority";
 import { Check, Minus } from "lucide-react";
 import { cn } from "../lib/utils";
 
-const Checkbox = React.forwardRef<
-  React.ElementRef<typeof CheckboxPrimitive.Root>,
-  React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root>
->(({ className, ...props }, ref) => (
-  <CheckboxPrimitive.Root
-    ref={ref}
-    data-slot="checkbox"
-    className={cn(
-      "peer size-5 shrink-0 rounded-md border border-border bg-background transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary hover:border-primary/50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
-      className
-    )}
-    {...props}
-  >
-    <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
-      {props.checked === "indeterminate" ? (
-        <Minus className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out" strokeWidth={3} />
-      ) : (
-        <Check className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out" strokeWidth={3} />
-      )}
-    </CheckboxPrimitive.Indicator>
-  </CheckboxPrimitive.Root>
-));
+const checkboxVariants = cva(
+  "peer size-5 shrink-0 rounded-md border border-border bg-background transition-all duration-150 ease-out focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=checked]:border-primary data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground data-[state=indeterminate]:border-primary hover:border-primary/50 aria-invalid:border-destructive aria-invalid:focus-visible:ring-destructive/40",
+  {
+    variants: {
+      /**
+       * The booking flow's opt-in ("Save these details for next time",
+       * booking flow.html): a 17px box with a 5px radius, a hairline on the
+       * soft ground when off, the brand gradient with an 11px white check
+       * when on.
+       */
+      appearance: {
+        default: "",
+        booking:
+          "size-[17px] rounded-[5px] bg-surface-2 data-[state=checked]:border-transparent data-[state=checked]:bg-[image:var(--gradient-primary)] data-[state=checked]:text-white [&_svg]:size-[11px]",
+      },
+    },
+    defaultVariants: { appearance: "default" },
+  }
+);
+
+type CheckboxProps = React.ComponentPropsWithoutRef<typeof CheckboxPrimitive.Root> &
+  VariantProps<typeof checkboxVariants>;
+
+const Checkbox = React.forwardRef<React.ElementRef<typeof CheckboxPrimitive.Root>, CheckboxProps>(
+  ({ className, appearance, ...props }, ref) => (
+    <CheckboxPrimitive.Root
+      ref={ref}
+      data-slot="checkbox"
+      className={cn(checkboxVariants({ appearance }), className)}
+      {...props}
+    >
+      <CheckboxPrimitive.Indicator className={cn("flex items-center justify-center text-current")}>
+        {props.checked === "indeterminate" ? (
+          <Minus
+            className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out"
+            strokeWidth={3}
+          />
+        ) : (
+          <Check
+            className="size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out"
+            strokeWidth={3}
+          />
+        )}
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  )
+);
 Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
-export { Checkbox };
+export { Checkbox, checkboxVariants };

package/src/components/field.stories.tsx

@@ -1,6 +1,15 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import { Field, FieldControl, FieldDescription, FieldError, FieldLabel } from "./field";
+import { Checkbox } from "./checkbox";
+import {
+  Field,
+  FieldControl,
+  FieldDescription,
+  FieldError,
+  FieldLabel,
+  FieldOptional,
+} from "./field";
 import { Input } from "./input";
+import { Textarea } from "./textarea";
 
 const meta = {
   title: "Components/Field",
@@ -34,3 +43,44 @@ export const Invalid: Story = {
     </Field>
   ),
 };
+
+/** The booking flow's "Your details" fields (B2, S6): caption labels, 46px fields, the opt-in. */
+export const Booking: Story = {
+  render: () => (
+    <div className="flex w-[335px] flex-col gap-3">
+      <Field appearance="booking">
+        <FieldLabel>Name</FieldLabel>
+        <FieldControl>
+          <Input appearance="booking" defaultValue="Adrian Pop" />
+        </FieldControl>
+      </Field>
+      <Field appearance="booking" invalid>
+        <FieldLabel>Phone</FieldLabel>
+        <FieldControl>
+          <Input appearance="booking" defaultValue="0712 34" />
+        </FieldControl>
+        <FieldError>That number looks too short.</FieldError>
+      </Field>
+      <Field appearance="booking">
+        <FieldLabel>
+          Email <FieldOptional>(optional)</FieldOptional>
+        </FieldLabel>
+        <FieldControl>
+          <Input appearance="booking" type="email" placeholder="you@example.com" />
+        </FieldControl>
+      </Field>
+      <Field appearance="booking">
+        <FieldLabel>
+          Anything we should know <FieldOptional>(optional)</FieldOptional>
+        </FieldLabel>
+        <FieldControl>
+          <Textarea appearance="booking" defaultValue="Birthday — a quieter corner if possible." />
+        </FieldControl>
+      </Field>
+      <label className="flex items-center gap-[9px] text-[12.5px] text-ink-secondary">
+        <Checkbox appearance="booking" defaultChecked />
+        Save these details for next time
+      </label>
+    </div>
+  ),
+};