@bearmenu/ui 0.8.24 → 0.8.26

package/src/components/poster-tape.tsx

@@ -3,7 +3,7 @@
 import { useState } from "react";
 import type { ReactNode } from "react";
 import { cn } from "../lib/utils";
-import { DriftRail, type DriftRailLabels } from "./drift-rail";
+import { DriftRail } from "./drift-rail";
 import { EventPosterFallback } from "./event-poster-fallback";
 
 /**
@@ -17,18 +17,8 @@ import { EventPosterFallback } from "./event-poster-fallback";
 export type PosterTapeItem = {
   id: string;
   title: string;
-  /**
-   * Caller-composed, e.g. "Sat 5" — or "Sat 5 · 20:00" when `time` is not
-   * given. Rendered as mono, small, and truncated at the tape's width.
-   */
+  /** Caller-composed, e.g. "Sat 5 · 20:00". Rendered as mono, small. */
   meta: string;
-  /**
-   * The time, e.g. "20:00", rendered after `meta` and never truncated. The
-   * tape is 132px wide and a long localised date ("sâm., 5 sept. · 17:00")
-   * used to clip to "17:…" — the one figure the reader came for. Split it out
-   * and the date is what gives way.
-   */
-  time?: string;
   posterUrl?: string;
   href?: string;
   /** Rendered instead of the poster when it's absent or failed to load. Defaults to `<EventPosterFallback />`. */
@@ -50,8 +40,6 @@ export type PosterTapeProps = {
   /** Defaults to a plain `<a>`. Pass `next/link` in a Next app. */
   linkComponent?: React.ComponentType<PosterTapeLinkProps>;
   durationSeconds?: number;
-  /** Forwarded to `<DriftRail>`: names for its pause/play toggle, which renders only when given. */
-  labels?: DriftRailLabels;
   className?: string;
 };
 
@@ -93,11 +81,8 @@ function PosterTapeItemCard({
       <div className="mt-1.5 text-[11px] font-semibold leading-[1.3] sm:mt-[7px] sm:text-[11.5px]">
         {item.title}
       </div>
-      {/* The date truncates; the time is `shrink-0` outside the truncating
-          span, so it is always whole. */}
-      <div className="mt-0.5 flex gap-1 font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
-        <span className="min-w-0 truncate">{item.meta}</span>
-        {item.time && <span className="shrink-0">· {item.time}</span>}
+      <div className="mt-0.5 truncate font-mono text-[10px] text-muted-foreground sm:text-[10.5px]">
+        {item.meta}
       </div>
     </>
   );
@@ -125,11 +110,10 @@ export function PosterTape({
   items,
   linkComponent: LinkComponent = DefaultLink,
   durationSeconds = POSTER_TAPE_DEFAULT_DURATION_SECONDS,
-  labels,
   className,
 }: PosterTapeProps) {
   return (
-    <DriftRail durationSeconds={durationSeconds} labels={labels} className={className}>
+    <DriftRail durationSeconds={durationSeconds} className={className}>
       {items.map((item) => (
         <PosterTapeItemCard key={item.id} item={item} LinkComponent={LinkComponent} />
       ))}

package/src/components/textarea.tsx

@@ -1,17 +1,35 @@
 import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "../lib/utils";
 
-export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement>;
+const 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.
+       */
+      appearance: {
+        default: "",
+        booking:
+          "min-h-[66px] 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" },
+  }
+);
+
+export type TextareaProps = React.TextareaHTMLAttributes<HTMLTextAreaElement> &
+  VariantProps<typeof textareaVariants>;
 
 const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
-  ({ className, ...props }, ref) => {
+  ({ className, appearance, ...props }, ref) => {
     return (
       <textarea
         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={ref}
         {...props}
       />
@@ -20,4 +38,4 @@ const Textarea = React.forwardRef<HTMLTextAreaElement, TextareaProps>(
 );
 Textarea.displayName = "Textarea";
 
-export { Textarea };
+export { Textarea, textareaVariants };

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 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.
+                "flex-none rounded-full"
+              : "rounded-none first:rounded-l-md last:rounded-r-md",
         className
       )}
       {...props}

package/src/components/toggle.tsx

@@ -22,6 +22,22 @@ const toggleVariants = cva(
          */
         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)]",
+        /**
+         * A choice among a few named options that sit in a wrapping row —
+         * the booking flow's seating preference ("No preference", "Terrace",
+         * "By the window"). Off: a card pill with a hairline. On: the accent
+         * hairline over an 8% accent wash and accent type — a selection, not
+         * a button, so it never fills.
+         */
+        chip: "h-auto min-w-0 rounded-full border border-border bg-card px-[13px] py-[7px] text-[12.5px] leading-[1.2] font-normal text-foreground hover:border-accent/40 hover:bg-card hover:text-foreground data-[state=on]:border-accent data-[state=on]:bg-accent/[0.08] data-[state=on]:font-semibold data-[state=on]:text-accent",
+        /**
+         * One tab of a two-or-three-way switch that shares the width — My
+         * bookings' Upcoming / Past. The group (`ToggleGroup variant="tab"`)
+         * supplies the muted capsule; the ON tab is a raised card. The type
+         * does not change colour between on and off — as drawn, the raised
+         * card alone says which tab is current.
+         */
+        tab: "h-auto min-w-0 flex-1 rounded-full px-3 py-[7px] text-[12.5px] leading-[1.2] font-semibold text-ink-secondary hover:bg-transparent hover:text-foreground data-[state=on]:bg-card data-[state=on]:text-ink-secondary data-[state=on]:shadow-[0_1px_2px_oklch(0.5_0_0/0.12)] dark:data-[state=on]:bg-surface-2 dark:data-[state=on]:text-foreground",
       },
       size: {
         default: "h-9 px-2 min-w-9",
@@ -29,6 +45,14 @@ const toggleVariants = cva(
         lg: "h-10 px-2.5 min-w-10",
       },
     },
+    // Chips and tabs size to their type. Restated here, after the size
+    // variants, so the default size's `h-9 px-2 min-w-9` never wins the
+    // merge — for a `Toggle`, a `ToggleGroupItem` or a bare `toggleVariants`
+    // call on another element alike.
+    compoundVariants: [
+      { variant: "chip", class: "h-auto min-w-0 px-[13px]" },
+      { variant: "tab", class: "h-auto min-w-0 px-3" },
+    ],
     defaultVariants: {
       variant: "default",
       size: "default",

package/src/components/weekday-chip.stories.tsx

@@ -0,0 +1,54 @@
+import * as React from "react";
+import type { Meta, StoryObj } from "@storybook/react";
+import { WeekdayChip } from "./weekday-chip";
+
+const meta: Meta<typeof WeekdayChip> = {
+  title: "Booking/WeekdayChip",
+  component: WeekdayChip,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "One day in the booking flow's week rail on mobile. Weekday over date, sharing the rail's width equally. Not DayRailChip, which is the events timeline's day with a count.",
+      },
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof WeekdayChip>;
+
+export const Default: Story = { args: { weekday: "Mon", day: "10" } };
+export const Selected: Story = { args: { weekday: "Fri", day: "14", selected: true } };
+export const Unavailable: Story = { args: { weekday: "Tue", day: "11", unavailable: true } };
+
+const WEEK = [
+  ["Mon", "10"],
+  ["Tue", "11"],
+  ["Wed", "12"],
+  ["Thu", "13"],
+  ["Fri", "14"],
+  ["Sat", "15"],
+  ["Sun", "16"],
+] as const;
+
+/** B1 mobile: the week, Friday chosen. */
+export const Week: Story = {
+  render: () => {
+    const [selected, setSelected] = React.useState("14");
+    return (
+      <div className="flex w-[335px] gap-1.5">
+        {WEEK.map(([weekday, day]) => (
+          <WeekdayChip
+            key={day}
+            weekday={weekday}
+            day={day}
+            selected={selected === day}
+            onSelect={() => setSelected(day)}
+          />
+        ))}
+      </div>
+    );
+  },
+};

package/src/components/weekday-chip.tsx

@@ -0,0 +1,75 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+/**
+ * WeekdayChip — one day in the booking flow's week rail on mobile
+ * ("MON 10 · TUE 11 · … · SUN 16" in "When are you coming?").
+ *
+ * Not `DayRailChip`: that one is the events timeline's day, with a single-line
+ * label and an event count. This one is a date picker's day — weekday stacked
+ * over the date, no count — and the rail shares the width equally.
+ *
+ * Measured from the booking design (`.dchip`): flexes to an equal share, 1px
+ * hairline, 11px radius, 7px vertical inset, centred. The weekday at 10px
+ * uppercase, 0.05em tracking, muted; the date at 15px bold, tabular, 2px
+ * below. Selected fills with `--gradient-primary`, white type, the weekday at
+ * 75%. A day that cannot be booked (closed, past the window) fades to 40% and
+ * is disabled.
+ */
+
+export type WeekdayChipProps = {
+  /** "Mon", "Tue" — already localised; rendered uppercase. */
+  weekday: string;
+  /** Day of month as displayed — "14". */
+  day: string;
+  selected?: boolean;
+  /** Closed that day or outside the booking window. */
+  unavailable?: boolean;
+  onSelect?: () => void;
+  /** The full date for assistive tech — "Friday 14 August". */
+  "aria-label"?: string;
+  className?: string;
+};
+
+export function WeekdayChip({
+  weekday,
+  day,
+  selected,
+  unavailable,
+  onSelect,
+  "aria-label": ariaLabel,
+  className,
+}: WeekdayChipProps) {
+  return (
+    <button
+      type="button"
+      data-slot="weekday-chip"
+      aria-pressed={selected ? true : false}
+      aria-label={ariaLabel}
+      disabled={unavailable}
+      onClick={onSelect}
+      className={cn(
+        "min-w-0 flex-1 cursor-pointer rounded-[11px] border py-[7px] 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"
+          : "border-border bg-card text-foreground hover:border-accent/50",
+        unavailable && "cursor-not-allowed opacity-40 hover:border-border",
+        className
+      )}
+    >
+      <span
+        className={cn(
+          "block text-[10px] tracking-[0.05em] uppercase",
+          selected ? "text-white/75" : "text-muted-foreground"
+        )}
+      >
+        {weekday}
+      </span>
+      <span className="mt-0.5 block text-[15px] font-bold tabular-nums">{day}</span>
+    </button>
+  );
+}

package/dist/chunk-NMEVJT5Q.js

@@ -1,26 +0,0 @@
-import { cn } from './chunk-FEK5XGZW.js';
-import { __objRest, __spreadProps, __spreadValues } from './chunk-MMUBH76A.js';
-import * as React from 'react';
-import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
-import { Minus, Check } from 'lucide-react';
-import { jsx } from 'react/jsx-runtime';
-
-var Checkbox = React.forwardRef((_a, ref) => {
-  var _b = _a, { className } = _b, props = __objRest(_b, ["className"]);
-  return /* @__PURE__ */ jsx(
-    CheckboxPrimitive.Root,
-    __spreadProps(__spreadValues({
-      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), {
-      children: /* @__PURE__ */ jsx(CheckboxPrimitive.Indicator, { className: cn("flex items-center justify-center text-current"), children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx(Minus, { className: "size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out", strokeWidth: 3 }) : /* @__PURE__ */ jsx(Check, { className: "size-3.5 animate-in fade-in-0 zoom-in-50 duration-200 ease-out", strokeWidth: 3 }) })
-    })
-  );
-});
-Checkbox.displayName = CheckboxPrimitive.Root.displayName;
-
-export { Checkbox };