@bearmenu/ui 0.8.23 → 0.8.25

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",

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>
+  );
+}