@bearmenu/ui 0.6.0 → 0.7.0

package/src/components/place-schedule-week.tsx

@@ -0,0 +1,128 @@
+"use client";
+
+import { useEffect, useRef } from "react";
+import { cn } from "../lib/utils";
+import { Text } from "./text";
+import type {
+  PlaceSchedule,
+  PlaceScheduleWeekLabels,
+  WeekdayKey,
+} from "./place-types";
+
+const WEEKDAY_KEYS: readonly WeekdayKey[] = [
+  "monday",
+  "tuesday",
+  "wednesday",
+  "thursday",
+  "friday",
+  "saturday",
+  "sunday",
+] as const;
+
+function formatHour(h: number): string {
+  return `${h.toString().padStart(2, "0")}:00`;
+}
+
+/** JS Date.getDay(): Sunday=0 ... Saturday=6 → WEEKDAY_KEYS index where Monday=0 */
+function todayWeekdayIndex(): number {
+  const d = new Date().getDay();
+  return (d + 6) % 7;
+}
+
+export interface PlaceScheduleWeekProps {
+  schedule?: PlaceSchedule;
+  labels: PlaceScheduleWeekLabels;
+  /**
+   * When true, scrolls the today row into view on mount. Use inside a drawer/dialog
+   * where the schedule is the only content — auto-scrolling avoids weekend rows
+   * being clipped at the bottom of small viewports. Default false: do not auto-scroll
+   * when the schedule sits inline on a longer page, where the behaviour disorients
+   * the reader.
+   */
+  autoScrollToToday?: boolean;
+  className?: string;
+}
+
+export function PlaceScheduleWeek({
+  schedule,
+  labels,
+  autoScrollToToday = false,
+  className,
+}: PlaceScheduleWeekProps) {
+  const todayIdx = todayWeekdayIndex();
+  const todayRowRef = useRef<HTMLDivElement | null>(null);
+
+  useEffect(() => {
+    if (autoScrollToToday) {
+      todayRowRef.current?.scrollIntoView({ block: "nearest" });
+    }
+  }, [autoScrollToToday]);
+
+  if (!schedule) {
+    return (
+      <Text as="p" variant="body-sm" color="muted">
+        {labels.noHoursAvailable}
+      </Text>
+    );
+  }
+
+  return (
+    <div className={cn(className)}>
+      {WEEKDAY_KEYS.map((dayKey, idx) => {
+        const slots = schedule[dayKey] ?? [];
+        const isToday = idx === todayIdx;
+        const isClosed = slots.length === 0;
+        return (
+          <div
+            key={dayKey}
+            ref={isToday ? todayRowRef : null}
+            className={cn(
+              "relative flex items-start justify-between gap-3 rounded-lg px-3 py-1.5 overflow-hidden",
+              isToday && "bg-primary/8"
+            )}
+          >
+            {isToday && (
+              <span
+                aria-hidden
+                className="absolute left-0 top-0 bottom-0 w-1 bg-primary"
+              />
+            )}
+            <Text
+              as="span"
+              variant="body-sm"
+              weight={isToday ? "semibold" : "medium"}
+              className={isToday ? "text-foreground" : "text-muted-foreground"}
+            >
+              {labels.days[dayKey]}
+            </Text>
+            <div className="flex flex-col items-end gap-0.5">
+              {isClosed ? (
+                <Text
+                  as="span"
+                  variant="body-sm"
+                  className="line-through text-muted-foreground/50"
+                >
+                  {labels.closed}
+                </Text>
+              ) : (
+                slots.map((slot, i) => (
+                  <Text
+                    key={i}
+                    as="span"
+                    variant="body-sm"
+                    className={cn(
+                      "tabular-nums",
+                      isToday ? "text-foreground" : "text-muted-foreground"
+                    )}
+                  >
+                    {formatHour(slot.opens_at)} – {formatHour(slot.closes_at)}
+                  </Text>
+                ))
+              )}
+            </div>
+          </div>
+        );
+      })}
+    </div>
+  );
+}

package/src/components/place-types.ts

@@ -15,6 +15,7 @@ export type PlacePreview = {
   review_count?: number
   hours?: PlaceHourBlock[]
   today_schedule?: PlaceHourBlock[]
+  schedule?: PlaceSchedule
   location?: {
     address?: string
     geolocation?: { lat: number | string; lon: number | string }
@@ -45,6 +46,17 @@ export type PlacePreview = {
 
 export type PlaceHourBlock = { opens_at: number; closes_at: number }
 
+export type WeekdayKey =
+  | 'monday'
+  | 'tuesday'
+  | 'wednesday'
+  | 'thursday'
+  | 'friday'
+  | 'saturday'
+  | 'sunday'
+
+export type PlaceSchedule = Record<WeekdayKey, PlaceHourBlock[]>
+
 export type PlacePriceRange = {
   price_range_low?: number
   price_range_high?: number
@@ -67,15 +79,14 @@ export type PlaceCardLabels = {
  * to the raw enum value (with underscores → spaces).
  */
 export type PlaceAboutTabLabels = {
-  overview: string
+  /** Section heading for the editorial prose block (generative summary + review summary + description). */
   description: string
-  whatPeopleSay: string
   contactAndLocation: string
-  address: string
   instagram: string
   facebook: string
+  /** Section heading for the inline weekly schedule. */
   todayHours: string
-  statusOpen: string
+  /** Used by the inline schedule's closed-day line-through. */
   statusClosed: string
   typicalBusyness: string
   cuisines: string
@@ -84,10 +95,10 @@ export type PlaceAboutTabLabels = {
   accessibility: string
   parking: string
   nearbyLandmarks: string
-  neighborhood: string
-  businessInformation: string
-  type: string
-  status: string
+  /** Weekday key → translated day name, consumed by the inline `<PlaceScheduleWeek>`. */
+  scheduleDays: Record<WeekdayKey, string>
+  /** Fallback shown by `<PlaceScheduleWeek>` when no schedule data is present. */
+  noHoursAvailable: string
   amenityLabels: Record<string, string>
   paymentLabels: Record<string, string>
   accessibilityLabels: Record<string, string>
@@ -99,6 +110,14 @@ export type PlaceAboutTabLabels = {
 /** Discriminator for `<PlaceAboutTab>`'s `onLinkClick` callback. */
 export type PlaceLinkKind = 'phone' | 'website' | 'instagram' | 'facebook' | 'address'
 
+/** Labels passed to `<PlaceScheduleWeek>`. */
+export type PlaceScheduleWeekLabels = {
+  days: Record<WeekdayKey, string>
+  closed: string
+  /** Shown when the `schedule` prop is missing or empty. */
+  noHoursAvailable: string
+}
+
 /**
  * Labels passed to `<PlaceDetailsMobile>`. Extends `PlaceAboutTabLabels` with
  * the header/tab-strip strings unique to the mobile place-details surface.

package/src/components/scroll-fade.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { ScrollFade } from "./scroll-fade";
+
+const meta = {
+  title: "Components/ScrollFade",
+  component: ScrollFade,
+  tags: ["autodocs"],
+  parameters: {
+    docs: {
+      description: {
+        component:
+          "Scroll-position-aware fade overlay. Hides when at the corresponding edge, fades in when there's more content to scroll. Works vertically or horizontally and matches a chosen surface color.",
+      },
+    },
+  },
+} satisfies Meta<typeof ScrollFade>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const longList = Array.from({ length: 30 });
+const wideList = Array.from({ length: 20 });
+
+export const Vertical: Story = {
+  args: {
+    orientation: "vertical",
+    fadeColor: "background",
+    size: "md",
+  },
+  render: (args) => (
+    <ScrollFade {...args} className="h-[320px] w-[360px] rounded-lg border" scrollClassName="p-4">
+      <ul className="space-y-3">
+        {longList.map((_, i) => (
+          <li key={i} className="text-sm text-muted-foreground">
+            Item #{i + 1} — scroll to reveal the fades at the edges.
+          </li>
+        ))}
+      </ul>
+    </ScrollFade>
+  ),
+};
+
+export const Horizontal: Story = {
+  args: {
+    orientation: "horizontal",
+    fadeColor: "background",
+    size: "md",
+  },
+  render: (args) => (
+    <ScrollFade {...args} className="w-[480px] rounded-lg border" scrollClassName="flex gap-3 p-4">
+      {wideList.map((_, i) => (
+        <div
+          key={i}
+          className="flex h-24 w-32 shrink-0 items-center justify-center rounded-md bg-muted text-sm"
+        >
+          Card {i + 1}
+        </div>
+      ))}
+    </ScrollFade>
+  ),
+};
+
+export const InsideCard: Story = {
+  args: {
+    orientation: "vertical",
+    fadeColor: "card",
+    size: "md",
+  },
+  render: (args) => (
+    <div className="bg-card text-card-foreground w-[360px] rounded-2xl border shadow-md">
+      <div className="border-border border-b p-4 font-semibold">Drawer header</div>
+      <ScrollFade {...args} className="h-[280px]" scrollClassName="p-4">
+        <ul className="space-y-3">
+          {longList.map((_, i) => (
+            <li key={i} className="text-sm text-muted-foreground">
+              Row #{i + 1} — fades use <code>fadeColor=&quot;card&quot;</code> to match the surface.
+            </li>
+          ))}
+        </ul>
+      </ScrollFade>
+    </div>
+  ),
+};
+
+export const NoOverflow: Story = {
+  args: {
+    orientation: "vertical",
+    fadeColor: "background",
+    size: "md",
+  },
+  render: (args) => (
+    <ScrollFade {...args} className="h-[200px] w-[320px] rounded-lg border" scrollClassName="p-4">
+      <p className="text-sm text-muted-foreground">
+        Content fits inside the box — both fades stay hidden.
+      </p>
+    </ScrollFade>
+  ),
+};

package/src/components/scroll-fade.tsx

@@ -0,0 +1,132 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+type Orientation = "vertical" | "horizontal";
+type FadeColor = "background" | "card" | "muted";
+type Size = "sm" | "md" | "lg";
+
+interface ScrollFadeProps extends React.HTMLAttributes<HTMLDivElement> {
+  orientation?: Orientation;
+  fadeColor?: FadeColor;
+  size?: Size;
+  /** Class names applied to the inner scrollable element (where overflow lives). */
+  scrollClassName?: string;
+}
+
+// Static maps so Tailwind can statically analyze the class names.
+const fromMap: Record<FadeColor, string> = {
+  background: "from-background",
+  card: "from-card",
+  muted: "from-muted",
+};
+
+const sizeMap: Record<Orientation, Record<Size, string>> = {
+  vertical: { sm: "h-6", md: "h-12", lg: "h-20" },
+  horizontal: { sm: "w-8", md: "w-16", lg: "w-28" },
+};
+
+const ScrollFade = React.forwardRef<HTMLDivElement, ScrollFadeProps>(
+  (
+    {
+      orientation = "vertical",
+      fadeColor = "background",
+      size = "md",
+      className,
+      scrollClassName,
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    const innerRef = React.useRef<HTMLDivElement>(null);
+    React.useImperativeHandle(ref, () => innerRef.current as HTMLDivElement);
+
+    const [atStart, setAtStart] = React.useState(true);
+    const [atEnd, setAtEnd] = React.useState(true);
+
+    const update = React.useCallback(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      if (orientation === "vertical") {
+        const overflow = el.scrollHeight - el.clientHeight;
+        setAtStart(el.scrollTop <= 1);
+        setAtEnd(overflow <= 1 || el.scrollTop >= overflow - 1);
+      } else {
+        const overflow = el.scrollWidth - el.clientWidth;
+        setAtStart(el.scrollLeft <= 1);
+        setAtEnd(overflow <= 1 || el.scrollLeft >= overflow - 1);
+      }
+    }, [orientation]);
+
+    React.useEffect(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      update();
+      el.addEventListener("scroll", update, { passive: true });
+      const ro = new ResizeObserver(update);
+      ro.observe(el);
+      return () => {
+        el.removeEventListener("scroll", update);
+        ro.disconnect();
+      };
+    }, [update]);
+
+    const fromClass = fromMap[fadeColor];
+    const fadeSize = sizeMap[orientation][size];
+
+    return (
+      <div
+        className={cn(
+          "relative isolate flex",
+          orientation === "vertical" ? "flex-col" : "flex-row",
+          className
+        )}
+      >
+        <div
+          ref={innerRef}
+          className={cn(
+            "min-h-0 min-w-0 flex-1",
+            orientation === "vertical" ? "overflow-y-auto" : "overflow-x-auto",
+            scrollClassName
+          )}
+          {...props}
+        >
+          {children}
+        </div>
+        <div
+          aria-hidden
+          className={cn(
+            "pointer-events-none absolute z-10 transition-opacity duration-300",
+            // `from-30%` adds a solid plateau before the gradient starts
+            // fading — without it the gradient is a pure linear ramp and only
+            // the very top pixel reads as solid, leaving the cut edge visible.
+            // -4px inset pulls the fade past the container edge so the very
+            // edge of clipped content is covered by the solid plateau.
+            orientation === "vertical"
+              ? `inset-x-0 -top-1 ${fadeSize} bg-gradient-to-b from-30%`
+              : `inset-y-0 -left-1 ${fadeSize} bg-gradient-to-r from-30%`,
+            fromClass,
+            atStart ? "opacity-0" : "opacity-100"
+          )}
+        />
+        <div
+          aria-hidden
+          className={cn(
+            "pointer-events-none absolute z-10 transition-opacity duration-300",
+            orientation === "vertical"
+              ? `inset-x-0 -bottom-1 ${fadeSize} bg-gradient-to-t from-30%`
+              : `inset-y-0 -right-1 ${fadeSize} bg-gradient-to-l from-30%`,
+            fromClass,
+            atEnd ? "opacity-0" : "opacity-100"
+          )}
+        />
+      </div>
+    );
+  }
+);
+ScrollFade.displayName = "ScrollFade";
+
+export { ScrollFade };
+export type { ScrollFadeProps };

package/src/components/sheet.tsx

@@ -30,7 +30,7 @@ const SheetOverlay = React.forwardRef<
 SheetOverlay.displayName = SheetPrimitive.Overlay.displayName;
 
 const sheetVariants = cva(
-  "fixed z-[1000] gap-4 bg-background border-border p-6 shadow-2xl transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  "fixed z-[1000] gap-4 bg-background border-border p-6 shadow-2xl data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=open]:duration-[var(--duration-deliberate)] data-[state=closed]:duration-[var(--duration-exit-standard)] data-[state=open]:ease-[var(--ease-enter)] data-[state=closed]:ease-[var(--ease-exit)]",
   {
     variants: {
       side: {

package/src/components/sliding-panels.tsx

@@ -12,6 +12,11 @@ export interface Panel {
   showBackButton?: boolean;
   backButtonLabel?: string;
   onBack?: () => void;
+  // When set, the panel is treated as a child of `parentId`. Siblings (panels
+  // sharing the same parent) stay off-screen on the right when not active —
+  // they no longer slide through during non-adjacent transitions. The default
+  // back button navigates to `parentId` instead of the previous array index.
+  parentId?: string;
 }
 
 export interface SlidingPanelsProps {
@@ -32,6 +37,23 @@ export const SlidingPanels = ({
   const panelRefs = useRef<(HTMLDivElement | null)[]>([]);
   const [containerHeight, setContainerHeight] = useState<number | undefined>();
 
+  // Tree mode: if any panel declares parentId, position based on hierarchy
+  // (ancestors slide left, everything else stays right). Otherwise fall back
+  // to the legacy index-based stack.
+  const usesTreeModel = panels.some((p) => p.parentId);
+
+  const activeAncestors = React.useMemo(() => {
+    if (!usesTreeModel) return new Set<string>();
+    const ancestors = new Set<string>();
+    let cursor = panels.find((p) => p.id === currentPanel);
+    while (cursor?.parentId) {
+      ancestors.add(cursor.parentId);
+      const nextId: string = cursor.parentId;
+      cursor = panels.find((p) => p.id === nextId);
+    }
+    return ancestors;
+  }, [panels, currentPanel, usesTreeModel]);
+
   // Measure active panel height on panel change and whenever content resizes
   useLayoutEffect(() => {
     const activeEl = panelRefs.current[currentIndex];
@@ -46,13 +68,16 @@ export const SlidingPanels = ({
   }, [currentIndex]);
 
   const handleBack = () => {
-    const previousPanel = panels[currentIndex - 1];
-    if (!previousPanel) return;
     if (currentPanelData?.onBack) {
       currentPanelData.onBack();
-    } else {
-      onPanelChange(previousPanel.id);
+      return;
+    }
+    if (currentPanelData?.parentId) {
+      onPanelChange(currentPanelData.parentId);
+      return;
     }
+    const previousPanel = panels[currentIndex - 1];
+    if (previousPanel) onPanelChange(previousPanel.id);
   };
 
   return (
@@ -65,8 +90,10 @@ export const SlidingPanels = ({
     >
       {panels.map((panel, index) => {
         const isActive = panel.id === currentPanel;
-        const isLeft = index < currentIndex;
-        const isRight = index > currentIndex;
+        const isLeft = usesTreeModel
+          ? activeAncestors.has(panel.id)
+          : index < currentIndex;
+        const isRight = !isActive && !isLeft;
 
         return (
           <div

package/src/components/sort-option-list.tsx

@@ -0,0 +1,57 @@
+"use client";
+
+import { Check } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export type SortOptionListItem<T extends string> = {
+  value: T;
+  label: string;
+};
+
+interface SortOptionListProps<T extends string> {
+  options: SortOptionListItem<T>[];
+  value: T;
+  onChange: (value: T) => void;
+  ariaLabel: string;
+  className?: string;
+}
+
+export function SortOptionList<T extends string>({
+  options,
+  value,
+  onChange,
+  ariaLabel,
+  className,
+}: SortOptionListProps<T>) {
+  return (
+    <div
+      role="radiogroup"
+      aria-label={ariaLabel}
+      className={cn("px-2 pb-6", className)}
+    >
+      {options.map((option) => {
+        const isActive = option.value === value;
+        return (
+          <button
+            key={option.value}
+            type="button"
+            role="radio"
+            aria-checked={isActive}
+            onClick={() => onChange(option.value)}
+            className={cn(
+              "flex w-full items-center justify-between rounded-lg px-3 py-3 text-left text-sm cursor-pointer",
+              "transition-colors duration-150 motion-reduce:transition-none",
+              "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-primary/30",
+              isActive
+                ? "bg-accent/10 text-accent font-semibold"
+                : "text-foreground hover:bg-muted/50"
+            )}
+          >
+            <span>{option.label}</span>
+            {isActive && <Check className="h-4 w-4" aria-hidden />}
+          </button>
+        );
+      })}
+    </div>
+  );
+}