@bearmenu/ui 0.8.57 → 0.8.58

package/dist/components/alert.d.ts

@@ -3,10 +3,10 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const alertVariants: (props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
+    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Alert: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLDivElement> & VariantProps<(props?: ({
-    variant?: "success" | "warning" | "default" | "destructive" | null | undefined;
+    variant?: "default" | "success" | "warning" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & React.RefAttributes<HTMLDivElement>>;
 declare const AlertTitle: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLHeadingElement> & React.RefAttributes<HTMLParagraphElement>>;
 declare const AlertDescription: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLParagraphElement> & React.RefAttributes<HTMLParagraphElement>>;

package/dist/components/badge.d.ts

@@ -4,7 +4,7 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const badgeVariants: (props?: ({
-    variant?: "secondary" | "success" | "warning" | "default" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
+    variant?: "secondary" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
     size?: "status" | "chip" | null | undefined;
     live?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;

package/dist/components/button.d.ts

@@ -3,8 +3,8 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const buttonVariants: (props?: ({
-    variant?: "secondary" | "link" | "warning" | "default" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
-    size?: "icon" | "default" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
+    variant?: "secondary" | "default" | "link" | "warning" | "destructive" | "outline" | "ghost" | "glass" | "overlay" | "ink" | "brown" | "cta" | null | undefined;
+    size?: "default" | "icon" | "cta" | "xs" | "sm" | "lg" | "pill" | "cta-sm" | "icon-xs" | "icon-sm" | "icon-lg" | null | undefined;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/spinner.d.ts

@@ -4,11 +4,11 @@ import { VariantProps } from 'class-variance-authority';
 
 declare const spinnerVariants: (props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "primary" | "inherit" | "default" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Spinner: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
     size?: "default" | "xs" | "sm" | "lg" | "xl" | null | undefined;
-    tone?: "primary" | "inherit" | "default" | "destructive" | null | undefined;
+    tone?: "primary" | "default" | "inherit" | "destructive" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     /** Visually-hidden label for screen readers. Defaults to "Loading". */
     label?: string;

package/dist/components/tag.d.ts

@@ -3,11 +3,11 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const tagVariants: (props?: ({
-    variant?: "primary" | "success" | "warning" | "default" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 declare const Tag: React.ForwardRefExoticComponent<React.HTMLAttributes<HTMLSpanElement> & VariantProps<(props?: ({
-    variant?: "primary" | "success" | "warning" | "default" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "primary" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string> & {
     onRemove?: () => void;

package/dist/components/text.d.ts

@@ -23,7 +23,7 @@ import { VariantProps } from 'class-variance-authority';
  */
 declare const textVariants: (props?: ({
     variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "primary" | "inherit" | "default" | "destructive" | "muted" | "primary-foreground" | null | undefined;
+    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
     weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;

package/dist/components/time-slot-rail.d.ts

@@ -0,0 +1,21 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as React from 'react';
+
+type TimeSlotRailScrollLabels = {
+    /** "Earlier times" — the chevron at the start edge. */
+    previous: string;
+    /** "Later times" — the chevron at the end edge. */
+    next: string;
+};
+type TimeSlotRailProps = {
+    /** Names the group for assistive tech — "Start time on Wed 18 Nov". */
+    "aria-label": string;
+    /** Labels for the fine-pointer chevrons. Omit to render none. */
+    scrollLabels?: TimeSlotRailScrollLabels;
+    /** `TimeSlot`s, optionally wrapped in period groups and separators. */
+    children: React.ReactNode;
+    className?: string;
+};
+declare function TimeSlotRail({ "aria-label": ariaLabel, scrollLabels, children, className, }: TimeSlotRailProps): react_jsx_runtime.JSX.Element;
+
+export { TimeSlotRail, type TimeSlotRailProps, type TimeSlotRailScrollLabels };

package/dist/components/time-slot-rail.js

@@ -0,0 +1,168 @@
+import { ScrollFade } from '../chunk-GNCWJWFE.js';
+import { Button } from '../chunk-GHKTVHQG.js';
+import '../chunk-RIH2IS7X.js';
+import '../chunk-5YNIQ2BL.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-MMUBH76A.js';
+import * as React from 'react';
+import { ChevronLeft, ChevronRight } from 'lucide-react';
+import { jsxs, jsx } from 'react/jsx-runtime';
+
+var CHIP = '[data-slot="time-slot"]';
+function chipsOf(scroller) {
+  return Array.from(scroller.querySelectorAll(CHIP)).filter((chip) => !chip.disabled);
+}
+function prefersReducedMotion() {
+  return typeof window.matchMedia === "function" && window.matchMedia("(prefers-reduced-motion: reduce)").matches;
+}
+function centreChip(scroller, chip, behavior) {
+  if (typeof scroller.scrollTo !== "function") return;
+  const s = scroller.getBoundingClientRect();
+  const c = chip.getBoundingClientRect();
+  const left = scroller.scrollLeft + (c.left - s.left) - (scroller.clientWidth - c.width) / 2;
+  scroller.scrollTo({ left: Math.max(0, left), behavior });
+}
+function TimeSlotRail({
+  "aria-label": ariaLabel,
+  scrollLabels,
+  children,
+  className
+}) {
+  const scrollerRef = React.useRef(null);
+  const centredRef = React.useRef(null);
+  const [canScrollBack, setCanScrollBack] = React.useState(false);
+  const [canScrollForward, setCanScrollForward] = React.useState(false);
+  const syncTabStops = React.useCallback(() => {
+    var _a;
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const chips = chipsOf(scroller);
+    const stop = (_a = chips.find((chip) => chip.getAttribute("aria-pressed") === "true")) != null ? _a : chips[0];
+    for (const chip of chips) chip.tabIndex = chip === stop ? 0 : -1;
+  }, []);
+  const syncEdges = React.useCallback(() => {
+    const el = scrollerRef.current;
+    if (!el) return;
+    const overflow = el.scrollWidth - el.clientWidth;
+    setCanScrollBack(el.scrollLeft > 1);
+    setCanScrollForward(overflow > 1 && el.scrollLeft < overflow - 1);
+  }, []);
+  React.useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    syncTabStops();
+    syncEdges();
+    scroller.addEventListener("scroll", syncEdges, { passive: true });
+    const resize = new ResizeObserver(syncEdges);
+    resize.observe(scroller);
+    const mutation = new MutationObserver(() => {
+      syncTabStops();
+      syncEdges();
+    });
+    mutation.observe(scroller, { childList: true, subtree: true, attributes: true, attributeFilter: ["aria-pressed", "disabled"] });
+    return () => {
+      scroller.removeEventListener("scroll", syncEdges);
+      resize.disconnect();
+      mutation.disconnect();
+    };
+  }, [syncTabStops, syncEdges]);
+  React.useEffect(() => {
+    const scroller = scrollerRef.current;
+    if (!scroller) return;
+    const selected = scroller.querySelector(`${CHIP}[aria-pressed="true"]`);
+    if (!selected || selected === centredRef.current) return;
+    const first = centredRef.current === null;
+    centredRef.current = selected;
+    if (!(selected instanceof HTMLElement)) return;
+    centreChip(scroller, selected, first || prefersReducedMotion() ? "auto" : "smooth");
+  });
+  const onKeyDown = (event) => {
+    const scroller = scrollerRef.current;
+    const target = event.target;
+    if (!scroller || !(target instanceof HTMLButtonElement) || !target.matches(CHIP)) return;
+    const chips = chipsOf(scroller);
+    const index = chips.indexOf(target);
+    if (index === -1) return;
+    const rtl = getComputedStyle(scroller).direction === "rtl";
+    let next;
+    switch (event.key) {
+      case "ArrowRight":
+        next = index + (rtl ? -1 : 1);
+        break;
+      case "ArrowLeft":
+        next = index + (rtl ? 1 : -1);
+        break;
+      case "Home":
+        next = 0;
+        break;
+      case "End":
+        next = chips.length - 1;
+        break;
+      default:
+        return;
+    }
+    event.preventDefault();
+    const chip = chips[Math.min(Math.max(next, 0), chips.length - 1)];
+    if (!chip) return;
+    for (const other of chips) other.tabIndex = other === chip ? 0 : -1;
+    chip.focus();
+    if (typeof chip.scrollIntoView === "function") chip.scrollIntoView({ inline: "nearest", block: "nearest" });
+  };
+  const onFocus = (event) => {
+    const scroller = scrollerRef.current;
+    const target = event.target;
+    if (!scroller || !(target instanceof HTMLButtonElement) || !target.matches(CHIP)) return;
+    for (const chip of chipsOf(scroller)) chip.tabIndex = chip === target ? 0 : -1;
+  };
+  const page = (direction) => {
+    const el = scrollerRef.current;
+    if (!el || typeof el.scrollBy !== "function") return;
+    el.scrollBy({ left: direction * el.clientWidth * 0.8, behavior: prefersReducedMotion() ? "auto" : "smooth" });
+  };
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "time-slot-rail", className: "relative", children: [
+    /* @__PURE__ */ jsx(
+      ScrollFade,
+      {
+        ref: scrollerRef,
+        orientation: "horizontal",
+        fadeColor: "background",
+        size: "sm",
+        role: "group",
+        "aria-label": ariaLabel,
+        onKeyDown,
+        onFocus,
+        className,
+        scrollClassName: "flex snap-x snap-proximity scroll-px-10 gap-1.5 px-1.5 py-1.5 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_[data-slot=time-slot]]:shrink-0",
+        children
+      }
+    ),
+    scrollLabels && canScrollBack && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        tabIndex: -1,
+        "aria-label": scrollLabels.previous,
+        onClick: () => page(-1),
+        className: cn("absolute top-1/2 left-0 z-20 hidden -translate-y-1/2 bg-background/90 [@media(pointer:fine)]:inline-flex"),
+        children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": true })
+      }
+    ),
+    scrollLabels && canScrollForward && /* @__PURE__ */ jsx(
+      Button,
+      {
+        type: "button",
+        variant: "ghost",
+        size: "icon-sm",
+        tabIndex: -1,
+        "aria-label": scrollLabels.next,
+        onClick: () => page(1),
+        className: cn("absolute top-1/2 right-0 z-20 hidden -translate-y-1/2 bg-background/90 [@media(pointer:fine)]:inline-flex"),
+        children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": true })
+      }
+    )
+  ] });
+}
+
+export { TimeSlotRail };

package/dist/components/time-slot.d.ts

@@ -18,24 +18,63 @@ import * as React from 'react';
  *     7px gaps.
  *
  * A slot is a button with `aria-pressed`: one of many times, picked once.
+ *
+ * ── size="touch" ──────────────────────────────────────────────────────────
+ * The default slot is 35px tall with a 9.5px meta line: under both the 44px
+ * touch floor and the 12px type floor, so a staff tool on a phone cannot use
+ * it. `touch` is `min-h-11`, 16px mono time, 12px meta, 12px radius. Selected
+ * is a FILL of `--accent` with `accent-foreground` type (the reasoning is
+ * DayRailChip's: the gradient's primary-foreground flips dark-on-gradient in
+ * dark mode), and the meta stays at full opacity.
+ *
+ * `fit` (touch only) says how well the slot suits the party, in words AND a
+ * dot, so nothing hangs on colour: `fits` (success), `tight` (warning, a join
+ * or a squeeze), `none` (dashed, muted — still tappable, the manager can
+ * override, so no strike-through and no fading).
+ *
+ * `disabled` means LOCKED, not taken: half opacity, not-allowed, no strike.
+ * It uses `aria-disabled` rather than the `disabled` attribute so a locked
+ * rail keeps focus where it was. `unavailable` is still the taken/past state.
  */
 type TimeSlotTone = "default" | "waitlist";
-type TimeSlotProps = {
-    /** The time as displayed, already formatted in the venue's timezone — "19:30". */
-    time: string;
+type TimeSlotSize = "default" | "touch";
+type TimeSlotFit = "fits" | "tight" | "none";
+/**
+ * `fit` needs a `meta`: the meta text says the fit in words, and the dot is
+ * aria-hidden, so a fit without one would hang on colour alone.
+ */
+type TimeSlotFitProps = {
     /** "Popular", "2 left", "Waitlist" — already localised. */
     meta?: string;
+    fit?: undefined;
+} | {
+    /** Says the fit in words — "R1+R2", "Join R3+R4", "Full". */
+    meta: string;
+    /** Touch only. How well the slot suits the party. Requires `meta`. */
+    fit: TimeSlotFit;
+};
+type TimeSlotProps = TimeSlotFitProps & {
+    /** The time as displayed, already formatted in the venue's timezone — "19:30". */
+    time: 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;
+    /** `default` is the booking flow's 35px slot; `touch` meets the 44px / 12px floors. */
+    size?: TimeSlotSize;
+    /** Locked, not taken: dimmed, not-allowed, no strike-through, still focusable. */
+    disabled?: boolean;
     onSelect?: () => void;
-    /** Full accessible name, when the visible text is not enough ("19:30, popular"). */
+    /**
+     * Full accessible name, when the visible text is not enough ("19:30, popular").
+     * It REPLACES the visible text, so with `fit` it must say the fit in words
+     * ("19:30, fits at R1 and R2"): the dot is aria-hidden.
+     */
     "aria-label"?: string;
     className?: string;
 };
-declare function TimeSlot({ time, meta, tone, selected, unavailable, onSelect, "aria-label": ariaLabel, className, }: TimeSlotProps): react_jsx_runtime.JSX.Element;
+declare function TimeSlot({ time, meta, tone, selected, unavailable, size, fit, disabled, onSelect, "aria-label": ariaLabel, className, }: TimeSlotProps): react_jsx_runtime.JSX.Element;
 type TimeSlotGroup = {
     /** Stable key — "early", "evening", "late". */
     key: string;
@@ -70,4 +109,4 @@ type TimeSlotGroupsSkeletonProps = {
  */
 declare function TimeSlotGroupsSkeleton({ label, rows, columns, className, }: TimeSlotGroupsSkeletonProps): react_jsx_runtime.JSX.Element;
 
-export { TimeSlot, type TimeSlotGroup, TimeSlotGroupLabel, TimeSlotGroups, type TimeSlotGroupsProps, TimeSlotGroupsSkeleton, type TimeSlotGroupsSkeletonProps, type TimeSlotProps, type TimeSlotTone };
+export { TimeSlot, type TimeSlotFit, type TimeSlotFitProps, type TimeSlotGroup, TimeSlotGroupLabel, TimeSlotGroups, type TimeSlotGroupsProps, TimeSlotGroupsSkeleton, type TimeSlotGroupsSkeletonProps, type TimeSlotProps, type TimeSlotSize, type TimeSlotTone };

package/dist/components/time-slot.js

@@ -1,58 +1,102 @@
 import { Skeleton } from '../chunk-XBBEX4SF.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadValues } from '../chunk-MMUBH76A.js';
-import { jsxs, jsx } from 'react/jsx-runtime';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
+var FIT_DOT = {
+  fits: "bg-success",
+  tight: "bg-warning-deep"
+};
+var FIT_META = {
+  fits: "text-success-ink",
+  tight: "text-warning-ink",
+  none: "text-muted-foreground"
+};
 function TimeSlot({
   time,
   meta,
   tone = "default",
   selected,
   unavailable,
+  size = "default",
+  fit,
+  disabled,
   onSelect,
   "aria-label": ariaLabel,
   className
 }) {
+  const touch = size === "touch";
+  const activeFit = touch ? fit : void 0;
+  const locked = disabled && !unavailable;
+  const interactive = !unavailable && !locked;
+  const dashed = activeFit === "none" && !selected;
+  const fitDot = activeFit && activeFit !== "none" ? /* @__PURE__ */ jsx(
+    "span",
+    {
+      "aria-hidden": true,
+      "data-slot": "time-slot-fit-dot",
+      className: cn(
+        "size-1.5 shrink-0 rounded-full",
+        selected ? "bg-accent-foreground" : FIT_DOT[activeFit]
+      )
+    }
+  ) : null;
   return /* @__PURE__ */ jsxs(
     "button",
     {
       type: "button",
       "data-slot": "time-slot",
+      "data-size": size,
+      "data-fit": activeFit,
       "aria-pressed": selected ? true : false,
       "aria-label": ariaLabel,
+      "aria-disabled": locked ? true : void 0,
       disabled: unavailable,
-      onClick: onSelect,
+      onClick: locked ? void 0 : onSelect,
       className: cn(
+        "flex w-full flex-col items-center border text-center",
         // 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]",
+        touch ? "min-h-11 justify-center gap-1 rounded-xl px-2 py-2 leading-[1.2]" : "justify-start rounded-[11px] px-1 py-2 leading-[1.2]",
+        interactive ? "cursor-pointer" : "cursor-not-allowed",
         // A press state, not just hover: this is the most-tapped control in
         // the flow and the primary device has no hover at all, so without it
         // a tap gives nothing back until the fill repaints.
-        "transition-[border-color,filter,transform] duration-150 not-disabled:active:scale-[0.98] motion-reduce:transition-none",
+        touch ? "transition-[background-color,border-color,color,transform] duration-150 motion-reduce:transition-none" : "transition-[border-color,filter,transform] duration-150 motion-reduce:transition-none",
+        interactive && "active:scale-[0.98]",
         "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-primary-foreground hover:brightness-[0.94]" : "border-border bg-card text-foreground hover:border-accent/50",
-        unavailable && "cursor-not-allowed opacity-[0.32] hover:border-border"
+        selected ? touch ? "border-accent bg-accent text-accent-foreground" : cn(
+          "border-transparent bg-[image:var(--gradient-primary)] text-primary-foreground",
+          interactive && "hover:brightness-[0.94]"
+        ) : dashed ? "border-dashed border-border bg-transparent text-muted-foreground" : "border-border bg-card text-foreground",
+        !selected && interactive && "hover:border-accent/50",
+        unavailable && "opacity-[0.32]",
+        locked && "opacity-50",
+        className
       ),
       children: [
         /* @__PURE__ */ jsx(
           "b",
           {
             className: cn(
-              "block font-mono text-[14.5px] leading-none font-bold tabular-nums",
+              "block font-mono leading-none font-bold tabular-nums",
+              touch ? "text-base" : "text-[14.5px]",
               unavailable && "line-through"
             ),
             children: time
           }
         ),
-        meta && /* @__PURE__ */ jsx(
+        meta && /* @__PURE__ */ jsxs(
           "span",
           {
             className: cn(
-              "mt-[3px] block text-[9.5px] leading-[1.2]",
-              selected ? "text-primary-foreground/80" : tone === "waitlist" ? "text-muted-foreground" : "text-accent"
+              touch ? "flex max-w-full items-center justify-center gap-1 text-xs leading-4" : "mt-[3px] block text-[9.5px] leading-[1.2]",
+              selected ? touch ? "text-accent-foreground" : "text-primary-foreground/80" : activeFit ? FIT_META[activeFit] : tone === "waitlist" ? "text-muted-foreground" : "text-accent"
             ),
-            children: meta
+            children: [
+              fitDot,
+              touch ? /* @__PURE__ */ jsx("span", { className: "line-clamp-2 break-words", children: meta }) : meta
+            ]
           }
         )
       ]

package/dist/components/toggle.d.ts

@@ -11,7 +11,7 @@ import { VariantProps } from 'class-variance-authority';
  * `data-[state=on]:` utilities sort after `hover:` and still win while on.
  */
 declare const toggleVariants: (props?: ({
-    variant?: "tab" | "default" | "outline" | "chip" | "segmented" | null | undefined;
+    variant?: "default" | "tab" | "outline" | "chip" | "segmented" | null | undefined;
     size?: "default" | "sm" | "lg" | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 /**