@bearmenu/ui 0.8.40 → 0.8.42

package/src/components/toggle.tsx

@@ -22,12 +22,18 @@ const toggleVariants = cva(
           "border border-border bg-transparent hover:bg-accent-subtle hover:text-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
+         * muted capsule when on, quiet type when off. This class owns only
+         * the cell's layout and text colour — the button itself is the full
+         * 44px hit target the accessibility floor asks for. The raised card
+         * it draws is smaller (36px, measured off the booking frames'
+         * calendar toolbar and the closures scope control), so
+         * `SegmentedToggleContent` below carries the paint in an inner span,
+         * the same split `MenuPickRow` uses for its add disc. 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)]",
+          "group/segment relative rounded-full text-muted-foreground hover:bg-transparent hover:text-foreground data-[state=on]:bg-transparent data-[state=on]:text-foreground",
         /**
          * A choice among a few named options that sit in a wrapping row —
          * the booking flow's seating preference ("No preference", "Terrace",
@@ -58,6 +64,10 @@ const toggleVariants = cva(
     compoundVariants: [
       { variant: "chip", class: "h-auto min-w-0 px-[13px]" },
       { variant: "tab", class: "h-auto min-w-0 px-3" },
+      // The segmented cell's hit target is fixed at the 44px floor
+      // regardless of `size` — restated here for the same reason as chip and
+      // tab above, so the size variants' `h-*` never wins the merge.
+      { variant: "segmented", class: "h-11 px-0" },
     ],
     defaultVariants: {
       variant: "default",
@@ -66,10 +76,25 @@ const toggleVariants = cva(
   }
 );
 
+/**
+ * The segmented variant's drawn pill — 36px tall, centred in the cell's 44px
+ * hit box. Painted here, on `group-data-[state=on]/segment:`, so the outer
+ * button (`toggleVariants({variant: "segmented"})`) can stay unpainted and
+ * full height. Shared by `Toggle` and `ToggleGroupItem`.
+ */
+function SegmentedToggleContent({ children }: { children?: React.ReactNode }) {
+  return (
+    <span className="flex h-9 w-full items-center justify-center gap-2 rounded-full text-inherit transition-[background-color,box-shadow] group-data-[state=on]/segment:bg-card group-data-[state=on]/segment:shadow-[var(--shadow-card)]">
+      {children}
+    </span>
+  );
+}
+
 function Toggle({
   className,
   variant,
   size,
+  children,
   ...props
 }: React.ComponentProps<typeof TogglePrimitive.Root> & VariantProps<typeof toggleVariants>) {
   return (
@@ -77,8 +102,14 @@ function Toggle({
       data-slot="toggle"
       className={cn(toggleVariants({ variant, size, className }))}
       {...props}
-    />
+    >
+      {variant === "segmented" ? (
+        <SegmentedToggleContent>{children}</SegmentedToggleContent>
+      ) : (
+        children
+      )}
+    </TogglePrimitive.Root>
   );
 }
 
-export { Toggle, toggleVariants };
+export { Toggle, toggleVariants, SegmentedToggleContent };

package/src/globals.css

@@ -364,7 +364,13 @@ h6 {
   --floor-error: oklch(0.56 0.2 27);
   --floor-error-foreground: oklch(0.99 0 0);
   --floor-offer: var(--primary);
-  --floor-selected: oklch(0.25 0.05 35);
+  /* L raised from 0.25 (== --primary, the offer ring's colour) to 0.35: the
+     dark hairline read as a heavy black frame around a selected table. Same
+     chroma/hue, so it stays legibly the same family, just lighter — still
+     11.2:1 on --floor-room and 11.5:1 on --card (floor 3:1), and a clear
+     lightness step (ΔL 0.10) from --floor-offer/--primary at this hue so the
+     two rings stay distinct. */
+  --floor-selected: oklch(0.35 0.05 35);
   --floor-room: oklch(0.99 0.005 75);
   --floor-wall: oklch(0.33 0.02 45);
   --floor-fixture: oklch(0.62 0.018 50);