@bearmenu/ui 0.8.23 → 0.8.25

package/src/components/hold-countdown.tsx

@@ -0,0 +1,140 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * HoldCountdown — "HELD FOR YOU 09:41": how long a table offered from the
+ * waitlist stays reserved for this guest (the booking flow's "A table opened
+ * up").
+ *
+ * Measured from the booking design: a card with a warning-colour hairline,
+ * 14px radius, 15px inset.
+ *   - `stacked` (mobile): centred. The label at 10.5px uppercase with 0.06em
+ *     tracking, muted; the remaining time in mono at 34px bold; a muted
+ *     11.5px line under it ("then it goes to the next person").
+ *   - `inline` (desktop): one row, 18px gaps. The label over the time at
+ *     30px, then the explanation at 12.5px muted taking the free width, then
+ *     the action.
+ *
+ * Counts down from `expiresAt` once a second and calls `onExpire` once, at
+ * zero. It never shows a negative time.
+ */
+
+export type HoldCountdownLabels = {
+  /** "Held for you" */
+  held: string;
+  /** Stacked: "then it goes to the next person". Inline: "After the countdown the table goes to the next person on the list." */
+  explanation: string;
+  /** Spoken form for assistive tech — "9 minutes 41 seconds left". */
+  remaining: (minutes: number, seconds: number) => string;
+};
+
+export type HoldCountdownProps = {
+  /** When the hold ends — ISO string or epoch milliseconds. */
+  expiresAt: string | number;
+  labels: HoldCountdownLabels;
+  layout?: "stacked" | "inline";
+  /** The inline layout's action, typically a `Button variant="cta" size="cta-sm"`. */
+  action?: React.ReactNode;
+  onExpire?: () => void;
+  /** Clock override for stories and tests. */
+  now?: () => number;
+  className?: string;
+};
+
+/**
+ * The design's hold amber (`--warnc`, oklch 0.62 0.15 70), deeper than the
+ * `--warning` token (0.72): on white the token reads as a yellow alert, the
+ * design's as a timer. Dark mode takes the lifted token, which already has
+ * the contrast against the dark card.
+ */
+const HOLD_BORDER = "border-[oklch(0.62_0.15_70)] dark:border-warning";
+
+function remainingSeconds(expiresAt: string | number, now: number): number {
+  const end = typeof expiresAt === "number" ? expiresAt : Date.parse(expiresAt);
+  return Math.max(0, Math.ceil((end - now) / 1000));
+}
+
+export function HoldCountdown({
+  expiresAt,
+  labels,
+  layout = "stacked",
+  action,
+  onExpire,
+  now = Date.now,
+  className,
+}: HoldCountdownProps) {
+  const [left, setLeft] = React.useState(() => remainingSeconds(expiresAt, now()));
+  const expired = React.useRef(false);
+  const onExpireRef = React.useRef(onExpire);
+  onExpireRef.current = onExpire;
+
+  React.useEffect(() => {
+    expired.current = false;
+    const tick = () => {
+      const next = remainingSeconds(expiresAt, now());
+      setLeft(next);
+      if (next === 0 && !expired.current) {
+        expired.current = true;
+        onExpireRef.current?.();
+      }
+    };
+    tick();
+    const id = window.setInterval(tick, 1000);
+    return () => window.clearInterval(id);
+  }, [expiresAt, now]);
+
+  const minutes = Math.floor(left / 60);
+  const seconds = left % 60;
+  const display = `${String(minutes).padStart(2, "0")}:${String(seconds).padStart(2, "0")}`;
+
+  const label = (
+    <div className="text-[10.5px] leading-[13px] tracking-[0.06em] text-muted-foreground uppercase">
+      {labels.held}
+    </div>
+  );
+  const time = (
+    <div
+      role="timer"
+      aria-label={labels.remaining(minutes, seconds)}
+      className={cn(
+        "font-mono font-bold tabular-nums text-foreground",
+        layout === "stacked" ? "mt-[5px] text-[34px] leading-[40px]" : "text-[30px] leading-[35px]"
+      )}
+    >
+      {display}
+    </div>
+  );
+
+  if (layout === "inline") {
+    return (
+      <div
+        data-slot="hold-countdown"
+        className={cn(
+          "flex items-center gap-[18px] rounded-[14px] border bg-card p-[15px] text-left",
+          HOLD_BORDER,
+          className
+        )}
+      >
+        <div className="shrink-0">
+          {label}
+          {time}
+        </div>
+        <p className="flex-1 text-[12.5px] leading-[15px] text-muted-foreground">{labels.explanation}</p>
+        {action}
+      </div>
+    );
+  }
+
+  return (
+    <div
+      data-slot="hold-countdown"
+      className={cn("rounded-[14px] border bg-card p-[15px] text-center", HOLD_BORDER, className)}
+    >
+      {label}
+      {time}
+      <p className="mt-1 text-[11.5px] leading-[14px] text-muted-foreground">{labels.explanation}</p>
+    </div>
+  );
+}

package/src/components/motion-icon-set.stories.tsx

@@ -4,6 +4,7 @@ import type { Meta, StoryObj } from "@storybook/react";
 import {
   MotionHouse,
   MotionUtensils,
+  MotionCompass,
   MotionMapPin,
   MotionCalendar,
   MotionLayoutGrid,
@@ -62,6 +63,7 @@ type Glyph = { name: string; Icon: React.ComponentType<MotionIconProps>; gesture
 const OBJECTS: Glyph[] = [
   { name: "House", Icon: MotionHouse, gesture: "roof jumps, walls take the impact" },
   { name: "Utensils", Icon: MotionUtensils, gesture: "uncrosses into a place setting · holds" },
+  { name: "Compass", Icon: MotionCompass, gesture: "needle spins a turn, overshoots, hunts, settles · fills held" },
   { name: "MapPin", Icon: MotionMapPin, gesture: "jumps, fills on the descent · holds" },
   { name: "Calendar", Icon: MotionCalendar, gesture: "rolls four pages" },
   { name: "LayoutGrid", Icon: MotionLayoutGrid, gesture: "tiles shuffle one slot round the board" },

package/src/components/motion-icon-set.tsx

@@ -149,6 +149,48 @@ export function MotionUtensils(props: MotionIconProps) {
   );
 }
 
+// ─── Compass — the needle spins hard, overshoots, wobbles, settles (cycle content)
+
+const COMPASS_TIMES = [0, 0.14, 0.58, 0.76, 0.9, 1];
+
+/**
+ * The dial holds still; the needle is the content that moves through it.
+ * It pulls back against the spin first (anticipation), goes round once and
+ * 20° past its bearing, swings back short of it, and settles — the way a
+ * real needle hunts for north. One full turn is what changes the silhouette
+ * at 22px: the diamond reads reversed at the half-way frame. Pivot at the
+ * dial's centre.
+ *
+ * The held poses sit at 360°, not 0°: the performance ends a full turn on
+ * from where it started, and a held pose at 0° would make the settle spin
+ * the needle backwards. 360° and 0° draw the same needle.
+ */
+const compassNeedle: Variants = {
+  rest: { rotate: 360, fillOpacity: 0, transition: returnTransition },
+  active: { rotate: 360, fillOpacity: 1, transition: returnTransition },
+  play: {
+    rotate: [0, -24, 380, 352, 364, 360],
+    // The fill lands with the needle: it takes as the swing dies.
+    fillOpacity: [0, 0, 0, 0.6, 1, 1],
+    transition: beats(COMPASS_TIMES, 0.7),
+  },
+};
+
+export function MotionCompass(props: MotionIconProps) {
+  return (
+    <MotionIcon {...props}>
+      <circle cx="12" cy="12" r="10" />
+      <motion.path
+        variants={compassNeedle}
+        style={pivot(12, 12)}
+        fill="currentColor"
+        fillOpacity={0}
+        d="m16.24 7.76-1.804 5.411a2 2 0 0 1-1.265 1.265L7.76 16.24l1.804-5.411a2 2 0 0 1 1.265-1.265z"
+      />
+    </MotionIcon>
+  );
+}
+
 // ─── Map pin — jumps, and fills on the way down (fall and land) ───────────────
 
 const PIN_TIMES = [0, 0.16, 0.44, 0.72, 1];

package/src/components/party-counter.stories.tsx

@@ -0,0 +1,57 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { PartyCounter, type PartyCounterLabels } from "./party-counter";
+
+const labels: PartyCounterLabels = {
+  decrease: "Fewer people",
+  increase: "More people",
+  unit: (count) => (count === 1 ? "person" : "people"),
+};
+
+const meta: Meta<typeof PartyCounter> = {
+  title: "Booking/PartyCounter",
+  component: PartyCounter,
+  tags: ["autodocs"],
+  args: { labels, min: 1, max: 8 },
+  decorators: [
+    (Story) => (
+      <div className="w-[335px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "How many people, in \"When are you coming?\" and \"Change party size\". The plus is filled: it is the direction the screen is asking about. At an end the button disables rather than hides, so the value never moves.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PartyCounter>;
+
+function Controlled(args: React.ComponentProps<typeof PartyCounter>) {
+  const [value, setValue] = React.useState(args.value);
+  return <PartyCounter {...args} value={value} onValueChange={setValue} />;
+}
+
+/** B1: "2 people". */
+export const Default: Story = {
+  args: { value: 2 },
+  render: (args) => <Controlled {...args} />,
+};
+
+/** At the minimum the minus disables; the value stays put. */
+export const AtMinimum: Story = {
+  args: { value: 1 },
+  render: (args) => <Controlled {...args} />,
+};
+
+/** B9: "4 people". */
+export const FourPeople: Story = {
+  args: { value: 4 },
+  render: (args) => <Controlled {...args} />,
+};

package/src/components/party-counter.tsx

@@ -0,0 +1,93 @@
+"use client";
+
+import * as React from "react";
+import { Minus, Plus } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * PartyCounter — how many people, in the booking flow's "When are you
+ * coming?" and "Change party size" screens.
+ *
+ * Measured from the booking design (`.stepper`): a 52px bordered field on the
+ * card ground, 12px radius, 8px side inset. A round 36px minus on the muted
+ * surface at the left, a round 36px plus filled with `--gradient-primary` at
+ * the right — the plus is the direction the screen is asking about — and the
+ * count between them at 19px bold with its unit at 12px muted.
+ *
+ * At an end the button is disabled, not hidden, so the value never shifts.
+ * The value is announced politely on change; the buttons carry their own
+ * localised names, because a lone "−" reads as nothing to a screen reader.
+ */
+
+export type PartyCounterLabels = {
+  /** "Fewer people" */
+  decrease: string;
+  /** "More people" */
+  increase: string;
+  /** The unit after the number: "people" / "person" — already pluralised by the caller. */
+  unit: (count: number) => string;
+};
+
+export type PartyCounterProps = {
+  value: number;
+  onValueChange: (value: number) => void;
+  min?: number;
+  max?: number;
+  labels: PartyCounterLabels;
+  disabled?: boolean;
+  className?: string;
+};
+
+export function PartyCounter({
+  value,
+  onValueChange,
+  min = 1,
+  max = 20,
+  labels,
+  disabled,
+  className,
+}: PartyCounterProps) {
+  const atMin = value <= min;
+  const atMax = value >= max;
+
+  const roundButton =
+    "grid size-9 shrink-0 cursor-pointer place-items-center rounded-full transition-[filter,background-color,opacity] duration-150 motion-reduce:transition-none focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card disabled:cursor-not-allowed disabled:opacity-40 [&_svg]:size-4";
+
+  return (
+    <div
+      data-slot="party-counter"
+      className={cn(
+        "flex h-[52px] items-center justify-between gap-2.5 rounded-xl border border-border bg-card px-2",
+        className
+      )}
+    >
+      <button
+        type="button"
+        aria-label={labels.decrease}
+        disabled={disabled || atMin}
+        onClick={() => onValueChange(Math.max(min, value - 1))}
+        className={cn(roundButton, "bg-surface-2 text-foreground hover:bg-muted")}
+      >
+        <Minus aria-hidden />
+      </button>
+
+      <output aria-live="polite" className="flex-1 text-center">
+        <b className="text-[19px] font-bold tabular-nums text-foreground">{value}</b>
+        <span className="ml-1 text-xs text-muted-foreground">{labels.unit(value)}</span>
+      </output>
+
+      <button
+        type="button"
+        aria-label={labels.increase}
+        disabled={disabled || atMax}
+        onClick={() => onValueChange(Math.min(max, value + 1))}
+        className={cn(
+          roundButton,
+          "bg-[image:var(--gradient-primary)] text-white hover:brightness-[0.94]"
+        )}
+      >
+        <Plus aria-hidden />
+      </button>
+    </div>
+  );
+}

package/src/components/time-slot.stories.tsx

@@ -0,0 +1,85 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { TimeSlot, TimeSlotGroups, TimeSlotGroupsSkeleton, type TimeSlotGroup } from "./time-slot";
+
+const meta: Meta<typeof TimeSlot> = {
+  title: "Booking/TimeSlot",
+  component: TimeSlot,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => (
+      <div className="w-[107px]">
+        <Story />
+      </div>
+    ),
+  ],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "A bookable time. Mono, tabular, with an optional meta line — Popular and \"2 left\" in accent, Waitlist muted. Selected fills with the brand gradient; unavailable fades and strikes through.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof TimeSlot>;
+
+export const Plain: Story = { args: { time: "17:00" } };
+export const Popular: Story = { args: { time: "19:30", meta: "Popular" } };
+export const FewLeft: Story = { args: { time: "20:00", meta: "2 left" } };
+export const Waitlist: Story = { args: { time: "22:00", meta: "Waitlist", tone: "waitlist" } };
+export const Selected: Story = { args: { time: "19:30", meta: "Popular", selected: true } };
+export const SelectedPlain: Story = { args: { time: "20:30", selected: true } };
+export const Unavailable: Story = { args: { time: "18:00", unavailable: true } };
+
+function groupsFor(selected: string, onSelect: (time: string) => void): TimeSlotGroup[] {
+  const slot = (time: string, meta?: string, tone?: "waitlist") => ({
+    key: time,
+    time,
+    ...(meta ? { meta } : {}),
+    ...(tone ? { tone } : {}),
+    selected: selected === time,
+    onSelect: () => onSelect(time),
+  });
+  return [
+    { key: "early", label: "Early", slots: [slot("17:00"), slot("17:30"), slot("18:00")] },
+    {
+      key: "evening",
+      label: "Evening",
+      slots: [
+        slot("18:30"),
+        slot("19:00"),
+        slot("19:30", "Popular"),
+        slot("20:00", "2 left"),
+        slot("20:30"),
+        slot("21:00"),
+      ],
+    },
+    { key: "late", label: "Late", slots: [slot("21:30"), slot("22:00", "Waitlist", "waitlist")] },
+  ];
+}
+
+/** B1: the three groups, 19:30 chosen. */
+export const Groups: StoryObj<typeof TimeSlotGroups> = {
+  render: () => {
+    const [selected, setSelected] = React.useState("19:30");
+    return (
+      <div className="w-[335px]">
+        <TimeSlotGroups groups={groupsFor(selected, setSelected)} />
+      </div>
+    );
+  },
+  decorators: [(Story) => <Story />],
+};
+
+/** S1: checking availability — the grid keeps its shape. */
+export const Loading: StoryObj<typeof TimeSlotGroupsSkeleton> = {
+  render: () => (
+    <div className="w-[335px]">
+      <TimeSlotGroupsSkeleton label="Checking availability for 4…" />
+    </div>
+  ),
+  decorators: [(Story) => <Story />],
+};

package/src/components/time-slot.tsx

@@ -0,0 +1,186 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+
+/**
+ * TimeSlot and TimeSlotGroups — the bookable times in the booking flow's
+ * "When are you coming?" screen, the reserve panel on the venue page, and
+ * "Change party size".
+ *
+ * Measured from the booking design (`.tsl`, `.tgrid`, `.grouplbl`):
+ *   - A slot is a card with a 1px hairline, 11px radius, 8px × 4px inset,
+ *     centred. The time in mono at 14.5px bold, line-height 1. An optional
+ *     meta line under it at 9.5px, 3px apart — "Popular", "2 left" in accent,
+ *     "Waitlist" muted.
+ *   - Selected fills with `--gradient-primary`, white type, the meta at 80%.
+ *   - Unavailable fades to 32% with the time struck through.
+ *   - Groups are "Early / Evening / Late": a mono 10px small-caps label
+ *     (0.08em tracking, 14px above, 7px below) over a three-column grid with
+ *     7px gaps.
+ *
+ * A slot is a button with `aria-pressed`: one of many times, picked once.
+ */
+
+export type TimeSlotTone = "default" | "waitlist";
+
+export type TimeSlotProps = {
+  /** The time as displayed, already formatted in the venue's timezone — "19:30". */
+  time: string;
+  /** "Popular", "2 left", "Waitlist" — already localised. */
+  meta?: string;
+  /** `waitlist` renders the meta muted: the slot books onto the list, not a table. */
+  tone?: TimeSlotTone;
+  selected?: boolean;
+  /** Taken or past: faded and struck through, not clickable. */
+  unavailable?: boolean;
+  onSelect?: () => void;
+  /** Full accessible name, when the visible text is not enough ("19:30, popular"). */
+  "aria-label"?: string;
+  className?: string;
+};
+
+export function TimeSlot({
+  time,
+  meta,
+  tone = "default",
+  selected,
+  unavailable,
+  onSelect,
+  "aria-label": ariaLabel,
+  className,
+}: TimeSlotProps) {
+  return (
+    <button
+      type="button"
+      data-slot="time-slot"
+      aria-pressed={selected ? true : false}
+      aria-label={ariaLabel}
+      disabled={unavailable}
+      onClick={onSelect}
+      className={cn(
+        // Content sits at the top: a slot without a meta line in a row with
+        // one is stretched by the grid, and the time must not drop to the middle.
+        "flex w-full cursor-pointer flex-col items-center justify-start rounded-[11px] border px-1 py-2 text-center leading-[1.2]",
+        "transition-[border-color,filter] duration-150 motion-reduce:transition-none",
+        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+        selected
+          ? "border-transparent bg-[image:var(--gradient-primary)] text-white hover:brightness-[0.94]"
+          : "border-border bg-card text-foreground hover:border-accent/50",
+        unavailable && "cursor-not-allowed opacity-[0.32] hover:border-border"
+      )}
+    >
+      <b
+        className={cn(
+          "block font-mono text-[14.5px] leading-none font-bold tabular-nums",
+          unavailable && "line-through"
+        )}
+      >
+        {time}
+      </b>
+      {meta && (
+        <span
+          className={cn(
+            "mt-[3px] block text-[9.5px] leading-[1.2]",
+            selected ? "text-white/80" : tone === "waitlist" ? "text-muted-foreground" : "text-accent"
+          )}
+        >
+          {meta}
+        </span>
+      )}
+    </button>
+  );
+}
+
+export type TimeSlotGroup = {
+  /** Stable key — "early", "evening", "late". */
+  key: string;
+  /** "Early", "Evening", "Late" — already localised; rendered small-caps. */
+  label: string;
+  slots: (TimeSlotProps & { key: string })[];
+};
+
+export type TimeSlotGroupsProps = {
+  groups: TimeSlotGroup[];
+  /** Columns in each group's grid. The design uses 3 everywhere; 2 only in very narrow panels. */
+  columns?: 2 | 3;
+  className?: string;
+};
+
+const GRID_COLUMNS = { 2: "grid-cols-2", 3: "grid-cols-3" } as const;
+
+export function TimeSlotGroupLabel({
+  children,
+  className,
+}: {
+  children: React.ReactNode;
+  className?: string;
+}) {
+  return (
+    <div
+      className={cn(
+        "mb-[7px] font-mono text-[10px] leading-none font-semibold tracking-[0.08em] text-muted-foreground uppercase",
+        className
+      )}
+    >
+      {children}
+    </div>
+  );
+}
+
+export function TimeSlotGroups({ groups, columns = 3, className }: TimeSlotGroupsProps) {
+  return (
+    <div data-slot="time-slot-groups" className={className}>
+      {groups.map((group) => (
+        // 14px between groups; the first sits flush with whatever is above.
+        <section key={group.key} aria-label={group.label} className="[&+&]:mt-3.5">
+          <TimeSlotGroupLabel>{group.label}</TimeSlotGroupLabel>
+          <div className={cn("grid gap-[7px]", GRID_COLUMNS[columns])}>
+            {group.slots.map(({ key, ...slot }) => (
+              <TimeSlot key={key} {...slot} />
+            ))}
+          </div>
+        </section>
+      ))}
+    </div>
+  );
+}
+
+export type TimeSlotGroupsSkeletonProps = {
+  /** The label above the grid while times load — "Checking availability for 4…". */
+  label: string;
+  rows?: number;
+  columns?: 2 | 3;
+  className?: string;
+};
+
+/**
+ * The grid while times load (S1). Same cells, same gaps, so nothing jumps when
+ * the real times land: a slot's footprint with a dashed hairline at 60%, a
+ * soft bar in place of the time. The label says what is being checked.
+ */
+export function TimeSlotGroupsSkeleton({
+  label,
+  rows = 3,
+  columns = 3,
+  className,
+}: TimeSlotGroupsSkeletonProps) {
+  return (
+    <div data-slot="time-slot-groups-skeleton" role="status" aria-live="polite" className={className}>
+      <TimeSlotGroupLabel>{label}</TimeSlotGroupLabel>
+      <div className={cn("grid gap-[7px]", GRID_COLUMNS[columns])} aria-hidden>
+        {Array.from({ length: rows * columns }, (_, index) => (
+          <span
+            key={index}
+            // Full opacity in dark: at 60% the dashed hairline disappears there.
+            className="block rounded-[11px] border border-dashed border-border bg-card px-1 py-2 opacity-60 dark:opacity-100"
+          >
+            {/* 17px: a plain slot's time line, so the cell is exactly a slot's 35px. */}
+            <Skeleton className="mx-auto h-[17px] w-[90%] rounded-md" />
+          </span>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/toggle-group.stories.tsx

@@ -94,3 +94,30 @@ export const Segmented: Story = {
     </div>
   ),
 };
+
+/** Choice chips that wrap: the booking flow's seating preference (B2). */
+export const Chips: Story = {
+  render: () => (
+    <div className="w-[335px]">
+      <ToggleGroup type="single" variant="chip" defaultValue="terrace" aria-label="Seating preference">
+        <ToggleGroupItem value="none">No preference</ToggleGroupItem>
+        <ToggleGroupItem value="inside">Inside</ToggleGroupItem>
+        <ToggleGroupItem value="terrace">Terrace</ToggleGroupItem>
+        <ToggleGroupItem value="window">By the window</ToggleGroupItem>
+        <ToggleGroupItem value="quiet">Quiet corner</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};
+
+/** Tabs that share the width: My bookings' Upcoming / Past (B6). */
+export const Tabs: Story = {
+  render: () => (
+    <div className="w-[343px]">
+      <ToggleGroup type="single" variant="tab" defaultValue="upcoming" aria-label="Bookings">
+        <ToggleGroupItem value="upcoming">Upcoming</ToggleGroupItem>
+        <ToggleGroupItem value="past">Past</ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};

package/src/components/toggle-group.tsx

@@ -29,6 +29,12 @@ function ToggleGroup({
         // The segmented control's capsule: muted ground, the on cell a raised
         // card inside it (see `toggleVariants.segmented`). 44px tall.
         "data-[variant=segmented]:gap-0.5 data-[variant=segmented]:rounded-full data-[variant=segmented]:bg-muted data-[variant=segmented]:p-0.5",
+        // Chips wrap onto as many rows as they need, 7px apart.
+        "data-[variant=chip]:flex-wrap data-[variant=chip]:gap-[7px] data-[variant=chip]:rounded-none",
+        // The tab bar spans its container: a muted capsule, 4px inset.
+        // Dark swaps the steps: the track takes the card, the ON tab the
+        // lighter `surface-2`, so the tab still reads as raised.
+        "data-[variant=tab]:w-full data-[variant=tab]:gap-1 data-[variant=tab]:rounded-full data-[variant=tab]:bg-surface-2 data-[variant=tab]:p-1 dark:data-[variant=tab]:bg-card",
         className
       )}
       {...props}
@@ -61,7 +67,14 @@ function ToggleGroupItem({
         "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)]"
-          : "rounded-none first:rounded-l-md last:rounded-r-md",
+          : // 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"
+              ? // A chip keeps its own width, so the row can wrap.
+                "h-auto min-w-0 flex-none rounded-full px-[13px]"
+              : "rounded-none first:rounded-l-md last:rounded-r-md",
         className
       )}
       {...props}