@bearmenu/ui 0.8.46 → 0.8.48

package/dist/{chunk-QRSIJC4X.js → chunk-S5GDARLW.js}

@@ -6,6 +6,13 @@ import * as React from 'react';
 import { jsxs, Fragment, jsx } from 'react/jsx-runtime';
 
 var HEADING_CENTRE_LG = "lg:top-[30px]";
+var RULED_STACK = "gap-4 pb-2 lg:gap-0 lg:pb-0";
+function ruleFromLg(items) {
+  return items.map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
+    index > 0 && /* @__PURE__ */ jsx(Separator, { className: "hidden lg:block" }),
+    child
+  ] }, index));
+}
 function TimelineHour({
   time,
   role = "hour",
@@ -95,20 +102,14 @@ function TimelineHour({
           {
             className: cn(
               "flex min-w-0 flex-col",
-              isCards && "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3",
+              isCards ? "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3" : RULED_STACK,
               isCards && isHero && "lg:flex lg:pt-0",
               isUnscheduled && isCards && "pt-3.5"
             ),
-            children: isCards ? items : items.map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
-              index > 0 && /* @__PURE__ */ jsx(Separator, {}),
-              child
-            ] }, index))
+            children: isCards ? items : ruleFromLg(items)
           }
         ),
-        overflowItems.length > 0 && /* @__PURE__ */ jsx("div", { className: "flex flex-col gap-4 pb-2 lg:gap-0 lg:pb-0 lg:pt-2", children: overflowItems.map((child, index) => /* @__PURE__ */ jsxs("div", { children: [
-          index > 0 && /* @__PURE__ */ jsx(Separator, { className: "hidden lg:block" }),
-          child
-        ] }, index)) }),
+        overflowItems.length > 0 && /* @__PURE__ */ jsx("div", { className: cn("flex flex-col lg:pt-2", RULED_STACK), children: ruleFromLg(overflowItems) }),
         note && /* @__PURE__ */ jsx("p", { className: "pt-[9px] text-[11.5px] text-muted-foreground", children: note })
       ]
     }

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" | "default" | "success" | "warning" | "destructive" | "outline" | "glass" | "overlay" | "brown" | "code" | "onPrimary" | "confirmed" | "pending" | "completed" | "assignee" | "softSuccess" | "softWarning" | "softDestructive" | "softNeutral" | null | undefined;
+    variant?: "default" | "secondary" | "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" | "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;
+    variant?: "default" | "link" | "secondary" | "warning" | "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;
     fullWidth?: boolean | null | undefined;
 } & class_variance_authority_types.ClassProp) | undefined) => string;
 interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement>, VariantProps<typeof buttonVariants> {

package/dist/components/coach-marks.d.ts

@@ -77,6 +77,7 @@ type CoachMarksLabels = {
     next: string;
     /** The last stop's forward action, e.g. "Done". */
     done: string;
+    /** The corner X's accessible name, e.g. "Skip tour"; not drawn as text. */
     skip: string;
 };
 type CoachMarksProps = {

package/dist/components/coach-marks.js

@@ -5,7 +5,7 @@ import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-MMUBH76A.js';
 import { useState, useLayoutEffect, useCallback, useRef, useEffect } from 'react';
 import { createPortal } from 'react-dom';
-import { Lightbulb, ArrowRight } from 'lucide-react';
+import { Lightbulb, X, ArrowRight } from 'lucide-react';
 import { jsxs, jsx } from 'react/jsx-runtime';
 
 var PAD = 8;
@@ -203,14 +203,38 @@ function CoachMarks({
                     style: { left: caretLeft }
                   }
                 ),
-                /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[oklch(0.82_0.15_85)] px-2.5 py-1 text-xs font-extrabold uppercase tracking-[0.08em] text-[oklch(0.26_0.03_60)]", children: [
-                  /* @__PURE__ */ jsx(Lightbulb, { className: "h-3 w-3", "aria-hidden": true }),
-                  labels.progress(index + 1, available.length)
+                /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2", children: [
+                  /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5 rounded-full bg-[oklch(0.82_0.15_85)] px-2.5 py-1 text-xs font-extrabold uppercase tracking-[0.08em] text-[oklch(0.26_0.03_60)]", children: [
+                    /* @__PURE__ */ jsx(Lightbulb, { className: "h-3 w-3", "aria-hidden": true }),
+                    labels.progress(index + 1, available.length)
+                  ] }),
+                  /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "icon",
+                      className: "-my-2.5 -mr-2.5 shrink-0 text-muted-foreground hover:text-foreground",
+                      "aria-label": labels.skip,
+                      onClick: onClose,
+                      children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4", "aria-hidden": true })
+                    }
+                  )
                 ] }),
                 /* @__PURE__ */ jsx("p", { className: "mt-3 text-base font-semibold leading-snug", children: current.title }),
                 /* @__PURE__ */ jsx("p", { className: "mt-1.5 text-sm leading-relaxed text-muted-foreground", children: current.body }),
-                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex items-center gap-2", children: [
-                  index > 0 && /* @__PURE__ */ jsx(Button, { type: "button", variant: "ghost", size: "pill", onClick: () => setIndex(index - 1), children: labels.back }),
+                /* @__PURE__ */ jsxs("div", { className: "mt-4 flex flex-wrap items-center justify-end gap-2", children: [
+                  index > 0 && /* @__PURE__ */ jsx(
+                    Button,
+                    {
+                      type: "button",
+                      variant: "ghost",
+                      size: "pill",
+                      className: "mr-auto",
+                      onClick: () => setIndex(index - 1),
+                      children: labels.back
+                    }
+                  ),
                   /* @__PURE__ */ jsxs(
                     Button,
                     {
@@ -222,17 +246,6 @@ function CoachMarks({
                         !last && /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true })
                       ]
                     }
-                  ),
-                  /* @__PURE__ */ jsx(
-                    Button,
-                    {
-                      type: "button",
-                      variant: "link",
-                      size: "sm",
-                      className: "ml-auto min-h-11",
-                      onClick: onClose,
-                      children: labels.skip
-                    }
                   )
                 ] })
               ]

package/dist/components/command.d.ts

@@ -28,7 +28,7 @@ declare const CommandInput: React.ForwardRefExoticComponent<Omit<Omit<Pick<Pick<
     ref?: React.Ref<HTMLInputElement>;
 } & {
     asChild?: boolean;
-}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "onChange" | "value" | "type"> & {
+}, "asChild" | "key" | keyof React.InputHTMLAttributes<HTMLInputElement>>, "value" | "onChange" | "type"> & {
     value?: string;
     onValueChange?: (search: string) => void;
 } & React.RefAttributes<HTMLInputElement>, "ref"> & React.RefAttributes<HTMLInputElement>>;
@@ -64,7 +64,7 @@ declare const CommandGroup: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "heading" | "value"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "heading"> & {
     heading?: React.ReactNode;
     value?: string;
     forceMount?: boolean;
@@ -82,7 +82,7 @@ declare const CommandItem: React.ForwardRefExoticComponent<Omit<{
     ref?: React.Ref<HTMLDivElement>;
 } & {
     asChild?: boolean;
-}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "onSelect" | "value" | "disabled"> & {
+}, keyof React.HTMLAttributes<HTMLDivElement> | "asChild" | "key">, "value" | "onSelect" | "disabled"> & {
     disabled?: boolean;
     onSelect?: (value: string) => void;
     value?: string;

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" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "default" | "inherit" | "primary" | "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" | "default" | "inherit" | "destructive" | null | undefined;
+    tone?: "default" | "inherit" | "primary" | "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" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "default" | "primary" | "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" | "default" | "success" | "warning" | "destructive" | "outline" | "quiet" | null | undefined;
+    variant?: "default" | "primary" | "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

@@ -22,8 +22,8 @@ import { VariantProps } from 'class-variance-authority';
  * Weights are 400 / 600 / 700. 500 is not in the system.
  */
 declare const textVariants: (props?: ({
-    variant?: "small" | "body" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
-    color?: "primary" | "default" | "inherit" | "destructive" | "muted" | "primary-foreground" | null | undefined;
+    variant?: "body" | "small" | "display" | "h2" | "h3" | "label" | "caption" | "h1" | "h4" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "default" | "inherit" | "primary" | "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/timeline-day.js

@@ -1,4 +1,4 @@
-import { TimelineHourSkeleton } from '../chunk-QRSIJC4X.js';
+import { TimelineHourSkeleton } from '../chunk-S5GDARLW.js';
 import '../chunk-BRXI6EDO.js';
 import { Separator } from '../chunk-NWZGSLPU.js';
 import { Skeleton } from '../chunk-XBBEX4SF.js';

package/dist/components/timeline-hour.d.ts

@@ -48,7 +48,8 @@ import * as React from 'react';
  *
  * `layout`: `cards` stacks posters with a gap (a card is its own frame, a
  * hairline between two posters reads as a third object) and from `lg` lays
- * them on a two/three-up grid; `rows` rules between children on both widths.
+ * them on a two/three-up grid; `rows` is the same gapped stack on the phone
+ * (rows are full cards there) and rules between children from `lg`.
  * Children are read with `Children.toArray`, which drops `null`/`false`, so a
  * conditional first row never inherits a rule meant for a second; pass rows
  * as siblings, not inside a fragment.

package/dist/components/timeline-hour.js

@@ -1,4 +1,4 @@
-export { TimelineHour, TimelineHourSkeleton } from '../chunk-QRSIJC4X.js';
+export { TimelineHour, TimelineHourSkeleton } from '../chunk-S5GDARLW.js';
 import '../chunk-BRXI6EDO.js';
 import '../chunk-NWZGSLPU.js';
 import '../chunk-XBBEX4SF.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.8.46",
+  "version": "0.8.48",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

package/src/components/coach-marks.test.tsx

@@ -127,7 +127,7 @@ describe("CoachMarks", () => {
   it("Skip and Escape close; the dimmed page does not", () => {
     const onClose = vi.fn();
     render(<Page onClose={onClose} />);
-    fireEvent.click(screen.getByText("Skip"));
+    fireEvent.click(screen.getByRole("button", { name: "Skip" }));
     fireEvent.keyDown(window, { key: "Escape" });
     expect(onClose).toHaveBeenCalledTimes(2);
     expect(screen.getAllByRole("button", { name: "Skip" })).toHaveLength(1);

package/src/components/coach-marks.tsx

@@ -2,7 +2,7 @@
 
 import { useCallback, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { ArrowRight, Lightbulb } from "lucide-react";
+import { ArrowRight, Lightbulb, X } from "lucide-react";
 import { cn } from "../lib/utils";
 import { Button } from "./button";
 
@@ -86,6 +86,7 @@ export type CoachMarksLabels = {
   next: string;
   /** The last stop's forward action, e.g. "Done". */
   done: string;
+  /** The corner X's accessible name, e.g. "Skip tour"; not drawn as text. */
   skip: string;
 };
 
@@ -374,15 +375,35 @@ export function CoachMarks({
             style={{ left: caretLeft }}
           />
         )}
-        <span className="inline-flex items-center gap-1.5 rounded-full bg-[oklch(0.82_0.15_85)] px-2.5 py-1 text-xs font-extrabold uppercase tracking-[0.08em] text-[oklch(0.26_0.03_60)]">
-          <Lightbulb className="h-3 w-3" aria-hidden />
-          {labels.progress(index + 1, available.length)}
-        </span>
+        {/* Skip is chrome, not a step action: the corner X keeps the footer
+            to Back and Next, which fit the callout in any locale. */}
+        <div className="flex items-center justify-between gap-2">
+          <span className="inline-flex items-center gap-1.5 rounded-full bg-[oklch(0.82_0.15_85)] px-2.5 py-1 text-xs font-extrabold uppercase tracking-[0.08em] text-[oklch(0.26_0.03_60)]">
+            <Lightbulb className="h-3 w-3" aria-hidden />
+            {labels.progress(index + 1, available.length)}
+          </span>
+          <Button
+            type="button"
+            variant="ghost"
+            size="icon"
+            className="-my-2.5 -mr-2.5 shrink-0 text-muted-foreground hover:text-foreground"
+            aria-label={labels.skip}
+            onClick={onClose}
+          >
+            <X className="h-4 w-4" aria-hidden />
+          </Button>
+        </div>
         <p className="mt-3 text-base font-semibold leading-snug">{current.title}</p>
         <p className="mt-1.5 text-sm leading-relaxed text-muted-foreground">{current.body}</p>
-        <div className="mt-4 flex items-center gap-2">
+        <div className="mt-4 flex flex-wrap items-center justify-end gap-2">
           {index > 0 && (
-            <Button type="button" variant="ghost" size="pill" onClick={() => setIndex(index - 1)}>
+            <Button
+              type="button"
+              variant="ghost"
+              size="pill"
+              className="mr-auto"
+              onClick={() => setIndex(index - 1)}
+            >
               {labels.back}
             </Button>
           )}
@@ -394,15 +415,6 @@ export function CoachMarks({
             {last ? labels.done : labels.next}
             {!last && <ArrowRight aria-hidden />}
           </Button>
-          <Button
-            type="button"
-            variant="link"
-            size="sm"
-            className="ml-auto min-h-11"
-            onClick={onClose}
-          >
-            {labels.skip}
-          </Button>
         </div>
       </div>
     </div>,

package/src/components/timeline-day.test.tsx

@@ -75,4 +75,18 @@ describe("TimelineDay", () => {
     expect(rows.querySelectorAll('[data-orientation="horizontal"]').length).toBe(2);
     expect(cards.querySelectorAll('[data-orientation="horizontal"]').length).toBe(1);
   });
+
+  it("stacks rows like cards on the phone and rules them only from lg", () => {
+    render(
+      <TimelineHour time="21:00" layout="rows">
+        <p>a</p>
+        <p>b</p>
+      </TimelineHour>
+    );
+    const stack = screen.getByText("a").parentElement?.parentElement;
+    expect(stack).toHaveClass("gap-4", "lg:gap-0");
+    const rule = screen.getByText("b").previousElementSibling;
+    expect(rule).toHaveAttribute("data-orientation", "horizontal");
+    expect(rule).toHaveClass("hidden", "lg:block");
+  });
 });

package/src/components/timeline-hour.tsx

@@ -53,7 +53,8 @@ import { TIMELINE_MOBILE_GUTTER_CLASS, TimelineHourPuck } from "./timeline-hour-
  *
  * `layout`: `cards` stacks posters with a gap (a card is its own frame, a
  * hairline between two posters reads as a third object) and from `lg` lays
- * them on a two/three-up grid; `rows` rules between children on both widths.
+ * them on a two/three-up grid; `rows` is the same gapped stack on the phone
+ * (rows are full cards there) and rules between children from `lg`.
  * Children are read with `Children.toArray`, which drops `null`/`false`, so a
  * conditional first row never inherits a rule meant for a second; pass rows
  * as siblings, not inside a fragment.
@@ -92,6 +93,19 @@ export type TimelineHourProps = {
  *  half the fixed 16px heading row. */
 const HEADING_CENTRE_LG = "lg:top-[30px]";
 
+/** A stack that is cards on the phone (gapped, unruled) and rows from `lg`
+ *  (flush, ruled). Shared by `layout="rows"` and `overflow`. */
+const RULED_STACK = "gap-4 pb-2 lg:gap-0 lg:pb-0";
+
+function ruleFromLg(items: React.ReactNode[]) {
+  return items.map((child, index) => (
+    <div key={index}>
+      {index > 0 && <Separator className="hidden lg:block" />}
+      {child}
+    </div>
+  ));
+}
+
 export function TimelineHour({
   time,
   role = "hour",
@@ -188,30 +202,18 @@ export function TimelineHour({
       <div
         className={cn(
           "flex min-w-0 flex-col",
-          isCards && "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3",
+          isCards
+            ? "gap-4 pb-2 lg:grid lg:grid-cols-2 lg:gap-5 lg:pb-0 lg:pt-3.5 xl:grid-cols-3"
+            : RULED_STACK,
           isCards && isHero && "lg:flex lg:pt-0",
           isUnscheduled && isCards && "pt-3.5"
         )}
       >
-        {isCards
-          ? items
-          : items.map((child, index) => (
-              <div key={index}>
-                {index > 0 && <Separator />}
-                {child}
-              </div>
-            ))}
+        {isCards ? items : ruleFromLg(items)}
       </div>
 
       {overflowItems.length > 0 && (
-        <div className="flex flex-col gap-4 pb-2 lg:gap-0 lg:pb-0 lg:pt-2">
-          {overflowItems.map((child, index) => (
-            <div key={index}>
-              {index > 0 && <Separator className="hidden lg:block" />}
-              {child}
-            </div>
-          ))}
-        </div>
+        <div className={cn("flex flex-col lg:pt-2", RULED_STACK)}>{ruleFromLg(overflowItems)}</div>
       )}
 
       {note && <p className="pt-[9px] text-[11.5px] text-muted-foreground">{note}</p>}