@bearmenu/ui 0.8.46 → 0.8.47

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/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.47",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {

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>}