@bearmenu/ui 0.8.38 → 0.8.40

package/src/components/responsive-overlay.tsx

@@ -164,21 +164,27 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
   ) => {
     const isWide = useMediaQuery(wideFrom === "lg" ? DESKTOP_MEDIA_QUERY : MD_MEDIA_QUERY);
     const container: "drawer" | "dialog" | "sheet" = isWide ? desktop : "drawer";
-    const titleId = React.useId();
-    const subtitleId = React.useId();
     useFocusReturn(open);
 
+    // The name and the description are Radix's own: its `Title` and
+    // `Description` register ids in the dialog context and `Content` points
+    // `aria-labelledby` / `aria-describedby` at them. Passing our own ids
+    // overrode the registered one, so Radix found no title under its id and
+    // logged "DialogContent requires a DialogTitle" in every mode. Without a subtitle, `aria-describedby={undefined}` is Radix's
+    // documented opt-out, rather than a pointer at an element that never renders.
+    const describedBy = subtitle ? {} : { "aria-describedby": undefined };
+
     const Title = CONTAINER_TITLE[container];
     const Description = CONTAINER_DESCRIPTION[container];
 
     const header = (
       <div data-slot="responsive-overlay-header" className="flex items-start gap-3 px-5 pt-5">
         <div className="min-w-0 flex-1">
-          <Title id={titleId} className="text-[19px] font-bold leading-tight">
+          <Title className="text-[19px] font-bold leading-tight">
             {title}
           </Title>
           {subtitle ? (
-            <Description id={subtitleId} className="mt-1 text-[13px] text-muted-foreground">
+            <Description className="mt-1 text-[13px] text-muted-foreground">
               {subtitle}
             </Description>
           ) : null}
@@ -226,8 +232,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             attachment="inset"
             hideClose
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
-            aria-labelledby={titleId}
-            aria-describedby={subtitle ? subtitleId : undefined}
+            {...describedBy}
             data-slot="responsive-overlay-sheet"
             data-modal={modal ? "true" : "false"}
             // A working rail must survive the page being used: a click on the
@@ -258,8 +263,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
             size={size}
             showCloseButton={false}
             overlayClassName="bg-scrim-overlay backdrop-blur-none"
-            aria-labelledby={titleId}
-            aria-describedby={subtitle ? subtitleId : undefined}
+            {...describedBy}
             className={cn(
               // The dialog's own `grid gap-4 p-6` would put air between the
               // header, the body and the band the frames draw flush.
@@ -280,8 +284,7 @@ const ResponsiveOverlay = React.forwardRef<HTMLDivElement, ResponsiveOverlayProp
         <DrawerContent
           ref={ref}
           overlayClassName="bg-scrim-overlay"
-          aria-labelledby={titleId}
-          aria-describedby={subtitle ? subtitleId : undefined}
+          {...describedBy}
           className={cn("flex max-h-[85vh] flex-col p-0", className)}
         >
           {header}

package/src/globals.css

@@ -312,6 +312,70 @@ h6 {
      than a black one before it looks dirty. */
   --icon-depth-neutral: drop-shadow(0 1px 1px oklch(0.38 0 0 / 0.29))
     drop-shadow(0 2px 4px oklch(0.38 0 0 / 0.22));
+
+  /* ─── Floor plan (5a "Jewel", contrast-corrected) ─────────────────────
+     The table map's status palette. 5a as drawn failed contrast (white on
+     booked/seated/late/blocked 2.4–4.6:1, the empty seat track 1.49:1 on the
+     card); these keep its hue, chroma and gradient direction and correct
+     lightness only. Worst point over 15–85% of each gradient: text >= 4.79:1
+     light / 6.29:1 dark, seats >= 3.03:1 / 3.11:1 against card and room.
+
+     Per status: `-from` / `-to` are the table fill, a horizontal gradient
+     inside the table's rotated group (SVG `stop-color: var(--floor-…-from)`);
+     `-seat` is the status overlay on the chair ring, drawn over the neutral
+     `--floor-seat` track; `-foreground` is the label and time on the fill.
+     Booked, seated, late and blocked share `--floor-on-fill-foreground`.
+     Halos (late, over time) pulse outside the ring; `--floor-offer` is the
+     dashed offer ring and `--floor-selected` the solid selection ring.
+     `--floor-shadow` is the flood colour of the table's three drop shadows,
+     their alphas multiplied by `--floor-shadow-strength`.
+     Tailwind: `fill-floor-*`, `stroke-floor-*`, `bg-floor-*`, `text-floor-*`. */
+  --floor-free-from: oklch(1 0 0);
+  --floor-free-to: oklch(0.955 0.012 65);
+  --floor-free-foreground: oklch(0.22 0.025 45);
+  --floor-muted-foreground: oklch(0.48 0.02 45);
+  --floor-seat: oklch(0.66 0.012 60);
+  --floor-booked-from: oklch(0.47 0.13 258);
+  --floor-booked-to: oklch(0.555 0.115 236);
+  --floor-booked-seat: oklch(0.6 0.12 248);
+  --floor-seated-from: oklch(0.45 0.095 163);
+  --floor-seated-to: oklch(0.545 0.145 150);
+  --floor-seated-seat: oklch(0.53 0.12 158);
+  --floor-over-from: oklch(0.74 0.15 62);
+  --floor-over-to: oklch(0.85 0.15 92);
+  --floor-over-seat: oklch(0.64 0.145 62);
+  --floor-over-foreground: oklch(0.22 0.025 45);
+  --floor-late-from: oklch(0.5 0.19 18);
+  --floor-late-to: oklch(0.57 0.18 32);
+  --floor-late-seat: oklch(0.56 0.19 22);
+  --floor-blocked-from: oklch(0.48 0.015 60);
+  --floor-blocked-to: oklch(0.555 0.01 70);
+  --floor-blocked-seat: oklch(0.6 0.012 60);
+  --floor-out-of-service-from: oklch(0.93 0.006 60);
+  --floor-out-of-service-to: oklch(0.96 0.004 70);
+  --floor-offline-from: oklch(0.86 0.004 60);
+  --floor-offline-to: oklch(0.9 0.004 70);
+  --floor-offline-seat: oklch(0.64 0.006 60);
+  --floor-offline-foreground: oklch(0.3 0.012 50);
+  --floor-on-fill-foreground: oklch(0.99 0.005 70);
+  --floor-late-halo: oklch(0.56 0.2 27);
+  --floor-over-halo: oklch(0.64 0.145 62);
+  --floor-busy: oklch(0.42 0.02 45);
+  --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);
+  --floor-room: oklch(0.99 0.005 75);
+  --floor-wall: oklch(0.33 0.02 45);
+  --floor-fixture: oklch(0.62 0.018 50);
+  --floor-shadow: oklch(0.222 0.036 53.5);
+  --floor-shadow-strength: 1;
+  /* Per-status foreground aliases, so a status maps to one token family. */
+  --floor-booked-foreground: var(--floor-on-fill-foreground);
+  --floor-seated-foreground: var(--floor-on-fill-foreground);
+  --floor-late-foreground: var(--floor-on-fill-foreground);
+  --floor-blocked-foreground: var(--floor-on-fill-foreground);
+  --floor-out-of-service-foreground: var(--floor-muted-foreground);
 }
 
 .dark {
@@ -424,6 +488,57 @@ h6 {
      pushed harder since the panel absorbs most of the shadow. */
   --icon-depth-neutral: drop-shadow(0 1px 1px oklch(0 0 0 / 0.47))
     drop-shadow(0 2px 4px oklch(0 0 0 / 0.34));
+
+  /* Floor plan, dark — derived from the light set (see :root). Fills sit
+     deeper, seats and halos lift off the dark card, the over-time amber keeps
+     dark type. The shadow goes black at twice the alpha: a warm shadow has
+     nothing to darken on a 0.225 room. Aliases are restated, as the sidebar's
+     are, so a `.dark` below the root does not inherit the light values. */
+  --floor-free-from: oklch(0.32 0.012 60);
+  --floor-free-to: oklch(0.285 0.01 60);
+  --floor-free-foreground: oklch(0.96 0.005 60);
+  --floor-muted-foreground: oklch(0.76 0.01 60);
+  --floor-seat: oklch(0.54 0.012 60);
+  --floor-booked-from: oklch(0.4 0.12 258);
+  --floor-booked-to: oklch(0.48 0.1 236);
+  --floor-booked-seat: oklch(0.64 0.12 245);
+  --floor-seated-from: oklch(0.39 0.082 163);
+  --floor-seated-to: oklch(0.475 0.125 150);
+  --floor-seated-seat: oklch(0.66 0.15 155);
+  --floor-over-from: oklch(0.7 0.14 62);
+  --floor-over-to: oklch(0.8 0.14 88);
+  --floor-over-seat: oklch(0.78 0.15 78);
+  --floor-over-foreground: oklch(0.2 0.03 40);
+  --floor-late-from: oklch(0.42 0.16 18);
+  --floor-late-to: oklch(0.5 0.165 30);
+  --floor-late-seat: oklch(0.64 0.19 25);
+  --floor-blocked-from: oklch(0.38 0.012 60);
+  --floor-blocked-to: oklch(0.44 0.01 70);
+  --floor-blocked-seat: oklch(0.58 0.012 60);
+  --floor-out-of-service-from: oklch(0.26 0.006 60);
+  --floor-out-of-service-to: oklch(0.24 0.005 60);
+  --floor-offline-from: oklch(0.3 0.004 60);
+  --floor-offline-to: oklch(0.27 0.004 60);
+  --floor-offline-seat: oklch(0.52 0.004 60);
+  --floor-offline-foreground: oklch(0.82 0.004 60);
+  --floor-on-fill-foreground: oklch(0.98 0.005 70);
+  --floor-late-halo: oklch(0.66 0.2 25);
+  --floor-over-halo: oklch(0.82 0.16 82);
+  --floor-busy: oklch(0.82 0.01 60);
+  --floor-error: oklch(0.58 0.19 25);
+  --floor-error-foreground: oklch(0.99 0 0);
+  --floor-offer: var(--primary);
+  --floor-selected: oklch(0.96 0.005 60);
+  --floor-room: oklch(0.225 0.012 45);
+  --floor-wall: oklch(0.78 0.01 60);
+  --floor-fixture: oklch(0.55 0.012 60);
+  --floor-shadow: oklch(0 0 0);
+  --floor-shadow-strength: 2;
+  --floor-booked-foreground: var(--floor-on-fill-foreground);
+  --floor-seated-foreground: var(--floor-on-fill-foreground);
+  --floor-late-foreground: var(--floor-on-fill-foreground);
+  --floor-blocked-foreground: var(--floor-on-fill-foreground);
+  --floor-out-of-service-foreground: var(--floor-muted-foreground);
 }
 
 /* Named 11px step (`text-2xs`) for micro-labels: overlay pills, hour
@@ -477,6 +592,52 @@ h6 {
   --color-avatar-blue: var(--avatar-blue);
   --color-avatar-violet: var(--avatar-violet);
   --color-avatar-rose: var(--avatar-rose);
+  /* `fill-floor-booked-from`, `stroke-floor-seat`, `text-floor-on-fill-foreground` … —
+     the floor plan's status palette (see `--floor-*` in :root). */
+  --color-floor-free-from: var(--floor-free-from);
+  --color-floor-free-to: var(--floor-free-to);
+  --color-floor-free-foreground: var(--floor-free-foreground);
+  --color-floor-muted-foreground: var(--floor-muted-foreground);
+  --color-floor-seat: var(--floor-seat);
+  --color-floor-booked-from: var(--floor-booked-from);
+  --color-floor-booked-to: var(--floor-booked-to);
+  --color-floor-booked-seat: var(--floor-booked-seat);
+  --color-floor-booked-foreground: var(--floor-booked-foreground);
+  --color-floor-seated-from: var(--floor-seated-from);
+  --color-floor-seated-to: var(--floor-seated-to);
+  --color-floor-seated-seat: var(--floor-seated-seat);
+  --color-floor-seated-foreground: var(--floor-seated-foreground);
+  --color-floor-over-from: var(--floor-over-from);
+  --color-floor-over-to: var(--floor-over-to);
+  --color-floor-over-seat: var(--floor-over-seat);
+  --color-floor-over-foreground: var(--floor-over-foreground);
+  --color-floor-late-from: var(--floor-late-from);
+  --color-floor-late-to: var(--floor-late-to);
+  --color-floor-late-seat: var(--floor-late-seat);
+  --color-floor-late-foreground: var(--floor-late-foreground);
+  --color-floor-blocked-from: var(--floor-blocked-from);
+  --color-floor-blocked-to: var(--floor-blocked-to);
+  --color-floor-blocked-seat: var(--floor-blocked-seat);
+  --color-floor-blocked-foreground: var(--floor-blocked-foreground);
+  --color-floor-out-of-service-from: var(--floor-out-of-service-from);
+  --color-floor-out-of-service-to: var(--floor-out-of-service-to);
+  --color-floor-out-of-service-foreground: var(--floor-out-of-service-foreground);
+  --color-floor-offline-from: var(--floor-offline-from);
+  --color-floor-offline-to: var(--floor-offline-to);
+  --color-floor-offline-seat: var(--floor-offline-seat);
+  --color-floor-offline-foreground: var(--floor-offline-foreground);
+  --color-floor-on-fill-foreground: var(--floor-on-fill-foreground);
+  --color-floor-late-halo: var(--floor-late-halo);
+  --color-floor-over-halo: var(--floor-over-halo);
+  --color-floor-busy: var(--floor-busy);
+  --color-floor-error: var(--floor-error);
+  --color-floor-error-foreground: var(--floor-error-foreground);
+  --color-floor-offer: var(--floor-offer);
+  --color-floor-selected: var(--floor-selected);
+  --color-floor-room: var(--floor-room);
+  --color-floor-wall: var(--floor-wall);
+  --color-floor-fixture: var(--floor-fixture);
+  --color-floor-shadow: var(--floor-shadow);
 
   /* Radius scale */
   --radius-sm: calc(var(--radius) - 4px);