@bearmenu/ui 0.8.16 → 0.8.18

package/src/components/timeline-day.tsx

@@ -0,0 +1,114 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { TimelineHourSkeleton } from "./timeline-hour";
+
+/**
+ * TimelineDay — one day's programme on the timeline: a column of
+ * `TimelineHour`s that becomes, from `lg`, the three-column row
+ * lane │ spine │ content that `TimelineBand` used to draw.
+ *
+ * ONE DOM FOR BOTH VIEWPORTS. `TimelineBand` took the lane as a prop — a
+ * second parent — which forced the consumer to render two trees and pick one
+ * in JavaScript, and a server render cannot pick. Here the lane is grid
+ * column 1, and the day's hero is an ordinary child in its chronological
+ * slot that the grid PLACES in that column from `lg` (see `TimelineHour`
+ * `role="hero"`). Source order is the phone's visual order, which is the
+ * primary surface and the one a screen reader gets on both.
+ *
+ * `rows` is the number of children that are NOT the hero — the column-3
+ * items. It sets `--timeline-rows`, which both the lane and the spine span,
+ * and the explicit row track count. It has to be a number the caller
+ * supplies: the grid needs the lane to cover every row so auto-placement
+ * never drops a later hour into the lane column, and this component cannot
+ * tell a hero child from an hour child without inspecting props.
+ *
+ * `laneTop` is the lane's sticky `top` as a CSS value. `position: sticky` on
+ * a grid item is bounded by its grid area — column 1, rows 1…N, the day's
+ * full height — so the poster holds while column 3 scrolls and releases when
+ * the day runs out, with no scroll listener and no measured height.
+ *
+ * The spine is a vertical `Separator` in column 2 spanning every row, drawn
+ * here so consumers never forget it; the pucks that sit on it are
+ * `TimelineHour`'s.
+ */
+
+export type TimelineDayProps = {
+  /** The column-3 children count — every child except the hero. */
+  rows: number;
+  /** Sticky `top` for the lane, as a CSS value. Omitted, the lane scrolls. */
+  laneTop?: string;
+  /** `TimelineHour`s, in chronological order, the hero among them. */
+  children: React.ReactNode;
+  className?: string;
+};
+
+export function TimelineDay({ rows, laneTop, children, className }: TimelineDayProps) {
+  const style = {
+    "--timeline-rows": String(Math.max(rows, 1)),
+    ...(laneTop !== undefined ? { "--timeline-lane-top": laneTop } : {}),
+  } as React.CSSProperties;
+
+  return (
+    <div
+      className={cn(
+        "flex flex-col",
+        "lg:grid lg:grid-cols-[var(--timeline-lane)_var(--timeline-spine)_minmax(0,1fr)]",
+        "lg:[grid-template-rows:repeat(var(--timeline-rows),auto)]",
+        className
+      )}
+      style={style}
+    >
+      <div
+        aria-hidden
+        className={cn(
+          "hidden lg:col-start-2 lg:row-start-1 lg:flex lg:justify-center lg:self-stretch",
+          "lg:[grid-row-end:span_var(--timeline-rows)]"
+        )}
+      >
+        <Separator orientation="vertical" className="h-full" />
+      </div>
+      {children}
+    </div>
+  );
+}
+
+export type TimelineDaySkeletonProps = {
+  /** Hours to reserve space for. */
+  hourCount?: number;
+  className?: string;
+};
+
+/**
+ * Holds the day's geometry at both widths so nothing jumps when data lands:
+ * the phone's stacked hours, the desktop's lane / spine / grid.
+ */
+export function TimelineDaySkeleton({ hourCount = 2, className }: TimelineDaySkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn(
+        "flex flex-col",
+        "lg:grid lg:grid-cols-[var(--timeline-lane)_var(--timeline-spine)_minmax(0,1fr)]",
+        "lg:[grid-template-rows:repeat(var(--timeline-rows),auto)]",
+        className
+      )}
+      style={{ "--timeline-rows": String(hourCount) } as React.CSSProperties}
+    >
+      <div className="hidden lg:col-start-1 lg:row-start-1 lg:flex lg:flex-col lg:gap-3 lg:pt-3.5 lg:[grid-row-end:span_var(--timeline-rows)]">
+        <Skeleton className="aspect-[3/4] w-full rounded-xl" />
+        <Skeleton className="h-[18px] w-[70%]" />
+        <Skeleton className="h-[13px] w-[45%]" />
+      </div>
+      <div className="hidden lg:col-start-2 lg:row-start-1 lg:flex lg:justify-center lg:self-stretch lg:[grid-row-end:span_var(--timeline-rows)]">
+        <Separator orientation="vertical" className="h-full" />
+      </div>
+      {Array.from({ length: hourCount }, (_, index) => (
+        <TimelineHourSkeleton key={index} cardCount={index === 0 ? 3 : 2} />
+      ))}
+    </div>
+  );
+}

package/src/components/timeline-hour-puck.tsx

@@ -0,0 +1,139 @@
+"use client";
+
+import * as React from "react";
+import { Radio } from "lucide-react";
+import { cn } from "../lib/utils";
+
+/**
+ * Ring pulse on the live puck — inherited from an earlier `TimelinePlayhead`,
+ * which carried this surface's only motion. Kept at its 2.4s `ease-in-out` and
+ * its reduced-motion kill switch, but BOX-SHADOW ONLY: a `transform: scale`
+ * would make the hairline visibly breathe here, because this puck sits ON the
+ * rail. (Today's `timeline-playhead.tsx` is static and sits between bands.)
+ */
+const LIVE_PUCK_PULSE_CLASS = "bm-timeline-live-puck-pulse";
+
+/**
+ * The phone axis gutter, shared by `TimelineHour` and `TimelinePlayhead` so
+ * the hour chips and the current-time label sit in one column. 58px is the
+ * width of a five-glyph 24-hour label ("20:00") in the chip's mono type plus
+ * its padding; a 12-hour locale's "09:00 AM" overflows it, which is one of the
+ * reasons the events surfaces format 24-hour everywhere.
+ */
+export const TIMELINE_MOBILE_GUTTER_CLASS = "w-[58px]";
+
+export type TimelineHourPuckProps = {
+  /** The hour, already formatted and localised — or an em dash for a quiet day. */
+  time: string;
+  /** Marks this as the hour currently in progress. */
+  isLive?: boolean;
+  /** Shown under the puck when live, e.g. "NOW ON". Required to render it. */
+  liveLabel?: string;
+  /**
+   * `station`: the bordered puck that sits ON the hairline, for the desktop
+   * spine. `chip`: a filled, fixed-width lozenge with the hairline starting
+   * BELOW it, for the phone gutter — an app's time label, not a station on a
+   * rail. `responsive` (the default): the chip below `lg`, the station from
+   * `lg` — ONE node that changes its look with the viewport, so a
+   * server-rendered timeline carries a single DOM for both widths. In the
+   * chip look the live label is visually hidden: the tinted chip plus a small
+   * on-air glyph are the visible signal (the glyph so the state never rests on
+   * colour alone once the pulse is reduced away) and the label stays for
+   * screen readers only.
+   */
+  variant?: "station" | "chip" | "responsive";
+  className?: string;
+};
+
+/**
+ * The station on the timeline's axis — ONE object, positioned by its host
+ * (`TimelineHour`): pinned to the top of the phone gutter, centred on the
+ * hour's heading rule out on the desktop spine.
+ *
+ * The `bg-background` fill punches through the hairline so the rail reads as
+ * continuous behind the label rather than butting into it.
+ *
+ * The live label is absolutely positioned rather than a flex sibling: hosts
+ * centre this puck with `-translate-y-1/2`, and a two-item column would centre
+ * the STACK, lifting the puck off the line it exists to sit on.
+ */
+export function TimelineHourPuck({
+  time,
+  isLive,
+  liveLabel,
+  variant = "responsive",
+  className,
+}: TimelineHourPuckProps) {
+  const chipClasses = cn(
+    "inline-flex h-6 min-w-[58px] items-center justify-center gap-1 rounded-[7px] border border-transparent px-1 text-[12px] font-medium",
+    isLive ? cn("bg-success/10 text-success", LIVE_PUCK_PULSE_CLASS) : "bg-muted text-foreground"
+  );
+  const stationClasses = cn(
+    "rounded-[7px] border bg-background px-[7px] py-[3px] text-[12.5px] font-medium",
+    isLive ? cn("border-success/40 text-success", LIVE_PUCK_PULSE_CLASS) : "border-border text-foreground"
+  );
+  const glyphClasses = "h-2.5 w-2.5 shrink-0";
+  const labelHiddenClasses = "sr-only";
+  const labelStationClasses = cn(
+    "absolute top-[calc(100%+6px)] whitespace-nowrap bg-background px-1",
+    "text-[9.5px] font-extrabold tracking-[0.08em] text-success"
+  );
+  // `sr-only` spelled out property by property so every one has an `lg:`
+  // twin — this project's Tailwind emits no `max-*` queries, and `lg:not-sr-only`
+  // would reset `position` under the `absolute` the station needs.
+  const labelResponsiveClasses = cn(
+    "absolute -m-px h-px w-px overflow-hidden whitespace-nowrap p-0 [clip:rect(0,0,0,0)]",
+    "lg:m-0 lg:h-auto lg:w-auto lg:overflow-visible lg:px-1 lg:[clip:auto]",
+    "lg:top-[calc(100%+6px)] lg:bg-background lg:text-[9.5px] lg:font-extrabold lg:tracking-[0.08em] lg:text-success"
+  );
+
+  return (
+    <span className={cn("relative flex justify-center", className)}>
+      {isLive && (
+        <style>{`
+          @keyframes ${LIVE_PUCK_PULSE_CLASS} {
+            0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklch, var(--success) 40%, transparent); }
+            50% { box-shadow: 0 0 0 4px color-mix(in oklch, var(--success) 0%, transparent); }
+          }
+          .${LIVE_PUCK_PULSE_CLASS} {
+            animation: ${LIVE_PUCK_PULSE_CLASS} 2.4s ease-in-out infinite;
+          }
+          @media (prefers-reduced-motion: reduce) {
+            .${LIVE_PUCK_PULSE_CLASS} { animation: none; }
+          }
+        `}</style>
+      )}
+      <span
+        className={cn(
+          "whitespace-nowrap font-mono tabular-nums",
+          variant === "chip" && chipClasses,
+          variant === "station" && stationClasses,
+          variant === "responsive" &&
+            cn(
+              chipClasses,
+              // The station look from `lg`: bordered, background-filled,
+              // no fixed width. Every chip utility above has an `lg:` twin.
+              "lg:h-auto lg:min-w-0 lg:gap-0 lg:border-border lg:bg-background lg:px-[7px] lg:py-[3px] lg:text-[12.5px] lg:text-foreground",
+              isLive && "lg:border-success/40 lg:bg-background lg:text-success"
+            )
+        )}
+      >
+        {isLive && variant !== "station" && (
+          <Radio className={cn(glyphClasses, variant === "responsive" && "lg:hidden")} aria-hidden />
+        )}
+        {time}
+      </span>
+      {isLive && !!liveLabel && (
+        <span
+          className={cn(
+            variant === "chip" && labelHiddenClasses,
+            variant === "station" && labelStationClasses,
+            variant === "responsive" && labelResponsiveClasses
+          )}
+        >
+          {liveLabel}
+        </span>
+      )}
+    </span>
+  );
+}

package/src/components/timeline-hour.tsx

@@ -0,0 +1,266 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Separator } from "./separator";
+import { Skeleton } from "./skeleton";
+import { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from "./timeline-hour-puck";
+
+/**
+ * TimelineHour — one hour of a day's programme, ONE DOM for both viewports.
+ *
+ * Replaces `HourBand` (the phone band: a 58px gutter with a filled chip and
+ * a hairline dropping from it, the hour's cards beside) and `HourGroup` (the
+ * desktop heading: a station out on `TimelineDay`'s spine, a rule and a
+ * count). They were two components because the timeline picked one per
+ * viewport in JavaScript, and a server render cannot know the viewport — so
+ * the server rendered nothing. This is both, with CSS deciding:
+ *
+ *   below `lg`   the section carries a 70px left inset; the puck sits at the
+ *                top-left of that gutter as a chip, a hairline drops beneath
+ *                it, and the heading row is hidden — the chip IS the heading.
+ *   from `lg`    the inset goes, the heading row shows (rule + count), and the
+ *                puck moves out to the spine, centred on that rule, as a
+ *                station. Its vertical position is a constant (`--timeline-
+ *                heading` below), which is why the heading row has a fixed
+ *                height: "top-1/2 of the row" needs the puck INSIDE the row,
+ *                and inside the row it cannot also be the phone's gutter chip.
+ *
+ * The invariant `TimelineBand` used to state still holds: AN HOUR APPEARS
+ * EXACTLY ONCE, AND ALWAYS ON THE SPINE. Roles are how a day keeps it while
+ * one of its events is lifted into the desktop lane:
+ *
+ *   hour          the default — a station, the hour's events.
+ *   hero          the day's feature. Below `lg` a normal hour holding one
+ *                 card, in its chronological slot. From `lg` the node moves
+ *                 to `TimelineDay`'s lane column (grid placement, not source
+ *                 order), pins, and loses its puck and heading — the lane
+ *                 card carries its own start time, see `EventCard` `hideWhen`
+ *                 `"below-lg"`.
+ *   continuation  what is left of the hero's hour. Below `lg` its chip is
+ *                 `invisible` (the gutter and hairline stay, so the reader sees
+ *                 ONE band for that hour, hero first); from `lg` it shows its
+ *                 station, because the hero is in the lane now and the hour
+ *                 needs its puck back. When the hero was its hour's only
+ *                 event there is no continuation, and the hour simply leaves
+ *                 the desktop column — exactly what `HourGroup`'s
+ *                 `excludeEventId` used to do.
+ *   unscheduled   events the ingest dated but never timed. No station at any
+ *                 width — the axis encodes clock position and these have none
+ *                 — and no gutter inset: an inline heading (the caller's
+ *                 label, a rule, the count) at both widths, after the day's
+ *                 real programme.
+ *
+ * `layout`: `cards` stacks posters with a gap (a card is its own frame, a
+ * hairline between two posters reads as a third object) and from `lg` lays
+ * them on a two/three-up grid; `rows` rules between children on both widths.
+ * Children are read with `Children.toArray`, which drops `null`/`false`, so a
+ * conditional first row never inherits a rule meant for a second; pass rows
+ * as siblings, not inside a fragment.
+ */
+
+export type TimelineHourRole = "hour" | "hero" | "continuation" | "unscheduled";
+
+export type TimelineHourProps = {
+  /** The hour, already formatted and localised — "20:00". For `unscheduled`,
+   *  the caller's label for the group ("Time to be confirmed"). */
+  time: string;
+  role?: TimelineHourRole;
+  /** Marks this as the hour currently in progress. */
+  isLive?: boolean;
+  /** Under the station when live, e.g. "NOW ON"; screen-reader-only in the chip. */
+  liveLabel?: string;
+  /** Desktop heading count, e.g. "3 events" — mirrors `EventDayHeader`'s `meta`.
+   *  Also the phone heading for `unscheduled`. */
+  countLabel?: string;
+  /** Trailing note after the children, e.g. "No start time was published". */
+  note?: string;
+  layout?: "cards" | "rows";
+  /** The hour's events — each direct child one card or row. */
+  children: React.ReactNode;
+  /**
+   * Events past the hour's card cap, after `children`: cards on the phone
+   * (the same stack, same gap), rows from `lg` (ruled, under the grid) —
+   * pass `EventCard density="row-lg"`. The desktop's density ladder inside
+   * one hour: a few posters, then rows.
+   */
+  overflow?: React.ReactNode;
+  className?: string;
+};
+
+/** Where the desktop puck's centre sits: the section's `lg:pt-[22px]` plus
+ *  half the fixed 16px heading row. */
+const HEADING_CENTRE_LG = "lg:top-[30px]";
+
+export function TimelineHour({
+  time,
+  role = "hour",
+  isLive,
+  liveLabel,
+  countLabel,
+  note,
+  layout = "cards",
+  children,
+  overflow,
+  className,
+}: TimelineHourProps) {
+  const isHero = role === "hero";
+  const isContinuation = role === "continuation";
+  const isUnscheduled = role === "unscheduled";
+  const hasStation = !isUnscheduled;
+  const isCards = layout === "cards";
+  const items = React.Children.toArray(children);
+  const overflowItems = React.Children.toArray(overflow);
+
+  return (
+    <section
+      data-timeline-hour={role}
+      className={cn(
+        "relative flex flex-col pt-2.5",
+        // The phone gutter: the puck's column plus the 12px gap `HourBand` had.
+        hasStation && "pl-[70px] lg:pl-0",
+        "lg:pt-[22px]",
+        isHero
+          ? cn(
+              // The lane. Placed by the grid, not by source order; `self-start`
+              // is load-bearing — a stretched item would be the day's full
+              // height and never stick.
+              // Longhands, not `grid-row`: a `/` inside an arbitrary value
+              // collides with the opacity-modifier parse.
+              "lg:col-start-1 lg:row-start-1 lg:[grid-row-end:span_var(--timeline-rows)] lg:self-start",
+              "lg:sticky lg:top-[var(--timeline-lane-top)] lg:pt-3.5"
+            )
+          : "lg:col-start-3",
+        className
+      )}
+    >
+      {hasStation && (
+        <>
+          <TimelineHourPuck
+            time={time}
+            isLive={isLive}
+            liveLabel={liveLabel}
+            className={cn(
+              "absolute left-0 top-2.5",
+              TIMELINE_MOBILE_GUTTER_CLASS,
+              // Out on the spine, centred on the heading rule.
+              "lg:left-[calc(var(--timeline-spine)*-0.5)] lg:w-0 lg:-translate-y-1/2",
+              HEADING_CENTRE_LG,
+              isContinuation && "invisible lg:visible",
+              isHero && "lg:hidden"
+            )}
+          />
+          {/* The phone hairline, from under the chip to the next hour's chip;
+              the desktop spine is `TimelineDay`'s. */}
+          <Separator
+            orientation="vertical"
+            className={cn(
+              "absolute -bottom-2.5 left-[29px] top-10 h-auto -translate-x-1/2 lg:hidden",
+              isLive && "bg-success/30"
+            )}
+          />
+        </>
+      )}
+
+      {/* The heading row: hidden on the phone for a stationed hour (the chip
+          says it), the hero's goes with its station from `lg`. Fixed height
+          so the puck's centre is a constant. */}
+      <div
+        className={cn(
+          "items-center gap-2.5",
+          isUnscheduled ? "flex h-4" : "hidden lg:flex lg:h-4",
+          isHero && "lg:hidden"
+        )}
+      >
+        {isUnscheduled && (
+          <span className="font-mono text-[11.5px] text-muted-foreground tabular-nums lg:text-xs">
+            {time}
+          </span>
+        )}
+        <Separator className="flex-1" />
+        {countLabel && (
+          <span className="text-[10.5px] text-muted-foreground/70 lg:text-[11px]">
+            {countLabel}
+          </span>
+        )}
+      </div>
+
+      <div
+        className={cn(
+          "flex min-w-0 flex-col",
+          isCards && "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3",
+          isCards && isHero && "lg:flex lg:pt-0",
+          isUnscheduled && isCards && "pt-3.5"
+        )}
+      >
+        {isCards
+          ? items
+          : items.map((child, index) => (
+              <div key={index}>
+                {index > 0 && <Separator />}
+                {child}
+              </div>
+            ))}
+      </div>
+
+      {overflowItems.length > 0 && (
+        <div className="flex flex-col gap-4 pb-2 lg:gap-0 lg:pb-0 lg:pt-2">
+          {overflowItems.map((child, index) => (
+            <div key={index}>
+              {index > 0 && <Separator className="hidden lg:block" />}
+              {child}
+            </div>
+          ))}
+        </div>
+      )}
+
+      {note && <p className="pt-[9px] text-[11.5px] text-muted-foreground">{note}</p>}
+    </section>
+  );
+}
+
+export type TimelineHourSkeletonProps = {
+  /** Cards to reserve space for. */
+  cardCount?: number;
+  className?: string;
+};
+
+/**
+ * Mirrors `TimelineHour` at both widths — the phone's gutter chip and
+ * hairline, the desktop's grid of poster placeholders — so nothing jumps when
+ * data lands.
+ */
+export function TimelineHourSkeleton({ cardCount = 2, className }: TimelineHourSkeletonProps) {
+  return (
+    <div
+      aria-hidden="true"
+      className={cn("relative flex flex-col pl-[70px] pt-2.5 lg:col-start-3 lg:pl-0 lg:pt-[22px]", className)}
+    >
+      <Skeleton
+        className={cn(
+          "absolute left-0 top-2.5 h-6 rounded-[7px]",
+          TIMELINE_MOBILE_GUTTER_CLASS,
+          "lg:left-[calc(var(--timeline-spine)*-0.5)] lg:h-[26px] lg:w-14 lg:-translate-x-1/2 lg:-translate-y-1/2",
+          HEADING_CENTRE_LG
+        )}
+      />
+      <Separator
+        orientation="vertical"
+        className="absolute -bottom-2.5 left-[29px] top-10 h-auto -translate-x-1/2 lg:hidden"
+      />
+      <div className="hidden h-4 items-center gap-2.5 lg:flex">
+        <Separator className="flex-1" />
+        <Skeleton className="h-3 w-12" />
+      </div>
+      <div className="flex flex-col gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3">
+        {Array.from({ length: cardCount }, (_, index) => (
+          <div key={index} className="flex flex-col gap-2">
+            <Skeleton className="aspect-[4/3] w-full rounded-xl" />
+            <Skeleton className="h-3.5 w-4/5" />
+            <Skeleton className="h-3 w-1/2" />
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+}

package/src/components/timeline-playhead.tsx

@@ -2,7 +2,7 @@
 
 import * as React from "react";
 import { cn } from "../lib/utils";
-import { TIMELINE_MOBILE_GUTTER_CLASS } from "./timeline-band";
+import { TIMELINE_MOBILE_GUTTER_CLASS } from "./timeline-hour-puck";
 
 /**
  * TimelinePlayhead — the "you are here" mark on the mobile timeline: the

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

@@ -1,6 +1,16 @@
 import type { Meta, StoryObj } from "@storybook/react";
 import { ToggleGroup, ToggleGroupItem } from "./toggle-group";
-import { Bold, Italic, Underline, AlignLeft, AlignCenter, AlignRight } from "lucide-react";
+import {
+  Bold,
+  Italic,
+  Underline,
+  AlignLeft,
+  AlignCenter,
+  AlignRight,
+  LayoutGrid,
+  List,
+} from "lucide-react";
+import { Button } from "./button";
 
 const meta = {
   title: "Components/ToggleGroup",
@@ -58,3 +68,29 @@ export const Outline: Story = {
     </ToggleGroup>
   ),
 };
+
+/**
+ * The segmented control: one 44px muted capsule, the on cell a raised card.
+ * Sits beside pill buttons at the same height — the browse toolbar's view
+ * switch. Single, always one on.
+ */
+export const Segmented: Story = {
+  render: () => (
+    <div className="flex items-center gap-2">
+      <Button variant="outline" size="pill">
+        Filters
+      </Button>
+      <Button variant="outline" size="pill">
+        Sort
+      </Button>
+      <ToggleGroup type="single" variant="segmented" defaultValue="list" aria-label="View">
+        <ToggleGroupItem value="list" aria-label="Rows">
+          <List />
+        </ToggleGroupItem>
+        <ToggleGroupItem value="grid" aria-label="Cards">
+          <LayoutGrid />
+        </ToggleGroupItem>
+      </ToggleGroup>
+    </div>
+  ),
+};

package/src/components/toggle-group.tsx

@@ -26,13 +26,14 @@ function ToggleGroup({
       data-size={size}
       className={cn(
         "group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs",
+        // 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",
         className
       )}
       {...props}
     >
-      <ToggleGroupContext.Provider value={{ variant, size }}>
-        {children}
-      </ToggleGroupContext.Provider>
+      <ToggleGroupContext.Provider value={{ variant, size }}>{children}</ToggleGroupContext.Provider>
     </ToggleGroupPrimitive.Root>
   );
 }
@@ -45,18 +46,22 @@ function ToggleGroupItem({
   ...props
 }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>) {
   const context = React.useContext(ToggleGroupContext);
+  const resolved = context.variant || variant;
 
   return (
     <ToggleGroupPrimitive.Item
       data-slot="toggle-group-item"
-      data-variant={context.variant || variant}
+      data-variant={resolved}
       data-size={context.size || size}
       className={cn(
         toggleVariants({
-          variant: context.variant || variant,
+          variant: resolved,
           size: context.size || size,
         }),
-        "min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l",
+        "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",
         className
       )}
       {...props}

package/src/components/toggle.tsx

@@ -14,6 +14,14 @@ const toggleVariants = cva(
         default: "bg-transparent",
         outline:
           "border border-border bg-transparent hover:bg-accent/50 hover:text-accent-foreground data-[state=on]:border-primary",
+        /**
+         * One cell of a segmented control: a raised card on the group's
+         * muted capsule when on, quiet type when off. The group
+         * (`ToggleGroup variant="segmented"`) supplies the capsule; the cell
+         * never fills with the accent, which would read as a primary button.
+         */
+        segmented:
+          "h-10 w-11 rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-foreground data-[state=on]:shadow-[var(--shadow-card)]",
       },
       size: {
         default: "h-9 px-2 min-w-9",