@bearmenu/ui 0.1.0

package/src/components/skeleton-card.tsx

@@ -0,0 +1,282 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "../lib/utils";
+import { Skeleton } from "./skeleton";
+import { AspectRatio } from "./aspect-ratio";
+
+interface SkeletonCardProps {
+  variant?: "experience" | "restaurant" | "generic" | "place" | "dish" | "drink" | "event";
+  showImage?: boolean;
+  showRating?: boolean;
+  showPrice?: boolean;
+  lines?: number; // for description lines
+  className?: string;
+}
+
+const SkeletonCard = React.forwardRef<HTMLDivElement, SkeletonCardProps>(
+  (
+    {
+      variant = "experience",
+      showImage = true,
+      showRating = true,
+      showPrice = true,
+      lines = 2,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    const renderPlaceCardSkeleton = () => (
+      <div className="glass transition-all duration-300 ease-in-out h-full flex flex-col w-full rounded-3xl border border-transparent">
+        <div className="p-4 flex-1 flex flex-col">
+          {/* SECTION 1 - PLACE HEADER */}
+          <div className="flex items-start gap-3 mb-3">
+            {/* Place Photo or Icon - 48x48px */}
+            <Skeleton className="w-12 h-12 rounded-lg flex-shrink-0" />
+
+            {/* Place Name & Rating */}
+            <div className="flex-1 min-w-0">
+              {/* Title - matches font-bold text-lg leading-tight (lh ~22.5px) */}
+              <Skeleton className="h-5 w-3/4 mb-2" />
+              {/* Rating row - matches text-sm */}
+              <div className="flex items-center gap-2">
+                <Skeleton className="h-4 w-16" />
+                <Skeleton className="h-3 w-1" />
+                <Skeleton className="h-4 w-12" />
+              </div>
+            </div>
+          </div>
+
+          {/* SECTION 2 - PRICE RANGES */}
+          <div className="mb-3">
+            <div className="flex items-center gap-4 text-xs">
+              <Skeleton className="h-3 w-20" />
+              <Skeleton className="h-3 w-20" />
+            </div>
+          </div>
+
+          {/* SECTION 3 - LOCATION & STATUS */}
+          <div className="mb-3">
+            <div className="flex items-center gap-2">
+              <Skeleton className="h-3.5 w-16" />
+              <Skeleton className="h-3.5 w-1" />
+              <Skeleton className="h-3.5 w-20" />
+            </div>
+          </div>
+
+          {/* SECTION 4 - DESCRIPTION PREVIEW */}
+          <div className="mb-4">
+            <Skeleton className="h-3 w-full mb-1" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+        </div>
+      </div>
+    );
+
+    const renderDishCardSkeleton = () => (
+      <div className="glass transition-all duration-300 ease-in-out h-full flex flex-col w-full border rounded-lg">
+        <div className="p-3 h-full flex flex-col">
+          {/* SECTION 1 - DISH HEADER (icon + name + heart button) */}
+          <div className="flex items-start gap-3 mb-3">
+            {/* Dish Icon - 48x48px */}
+            <Skeleton className="w-12 h-12 rounded-lg flex-shrink-0" />
+
+            {/* Dish Name */}
+            <div className="flex-1 min-w-0">
+              {/* Title - matches font-bold text-lg leading-tight line-clamp-2 */}
+              <Skeleton className="h-5 w-3/4 mb-1" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+
+            {/* Heart button placeholder - matches h-8 w-8 min-h-[44px] min-w-[44px] */}
+            <Skeleton className="h-8 w-8 rounded-md flex-shrink-0" />
+          </div>
+
+          {/* SECTION 2 - LOCATION BADGE */}
+          <div className="mb-3 flex items-center gap-2">
+            <Skeleton className="h-5 w-24 rounded-full" />
+          </div>
+
+          {/* SECTION 3 - BADGES ROW (For You / Rare / Qty) */}
+          <div className="flex items-center gap-2 mb-2">
+            <Skeleton className="h-5 w-16 rounded-full" />
+            <Skeleton className="h-5 w-12 rounded-full" />
+          </div>
+
+          {/* SECTION 4 - INGREDIENTS PREVIEW */}
+          <div className="mb-3">
+            <Skeleton className="h-3 w-full mb-1" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+
+          {/* SECTION 5 - FOOTER (PRICE AND BUTTON) */}
+          <div className="flex items-center justify-between mt-auto">
+            <Skeleton className="h-6 w-16" />
+            <Skeleton className="h-8 w-24 rounded-md" />
+          </div>
+        </div>
+      </div>
+    );
+
+    const renderDrinkCardSkeleton = () => (
+      <div className="glass transition-all duration-300 ease-in-out w-full h-full border rounded-lg">
+        <div className="p-3 h-full flex flex-col">
+          {/* HEADER (icon + name + heart button) */}
+          <div className="flex items-start gap-3 mb-3">
+            {/* Drink Icon - 48x48px */}
+            <Skeleton className="w-12 h-12 rounded-lg flex-shrink-0" />
+
+            {/* Drink Name */}
+            <div className="flex-1 min-w-0">
+              {/* Title - matches font-bold text-lg leading-tight */}
+              <Skeleton className="h-5 w-3/4 mb-1" />
+              <Skeleton className="h-4 w-1/2" />
+            </div>
+
+            {/* Heart button placeholder - matches h-8 w-8 min-h-[44px] min-w-[44px] */}
+            <Skeleton className="h-8 w-8 rounded-md flex-shrink-0" />
+          </div>
+
+          {/* LOCATION BADGE */}
+          <div className="mb-3 flex items-center gap-2">
+            <Skeleton className="h-5 w-24 rounded-full" />
+          </div>
+
+          {/* BADGES ROW */}
+          <div className="flex items-center gap-2 mb-2">
+            <Skeleton className="h-5 w-16 rounded-full" />
+            <Skeleton className="h-5 w-12 rounded-full" />
+          </div>
+
+          {/* INGREDIENTS PREVIEW */}
+          <div className="mb-3">
+            <Skeleton className="h-3 w-full mb-1" />
+            <Skeleton className="h-3 w-2/3" />
+          </div>
+
+          {/* FOOTER WITH PRICE AND BUTTON */}
+          <div className="flex items-center justify-between mt-auto">
+            <Skeleton className="h-6 w-16" />
+            <Skeleton className="h-8 w-24 rounded-md" />
+          </div>
+        </div>
+      </div>
+    );
+
+    const renderEventCardSkeleton = () => (
+      <div className="glass transition-all duration-300 ease-in-out w-full overflow-hidden rounded-xl">
+        {/* Image area - matches aspect-[16/10] of EventCarouselCard */}
+        <div className="relative aspect-[16/10] overflow-hidden bg-white/[0.06]">
+          <Skeleton className="absolute inset-0 w-full h-full" />
+        </div>
+        {/* Content area - matches flex flex-col gap-1 p-3 */}
+        <div className="flex flex-col gap-1 p-3">
+          <Skeleton className="h-4 w-3/4" />
+          <Skeleton className="h-3 w-1/2" />
+        </div>
+      </div>
+    );
+
+    const renderExperienceSkeleton = () => (
+      <div className="glass rounded-xl overflow-hidden transition-all duration-300">
+        {/* Image skeleton - 16:9 aspect ratio */}
+        {showImage && (
+          <AspectRatio ratio={16 / 9}>
+            <Skeleton className="w-full h-full" />
+          </AspectRatio>
+        )}
+
+        {/* Content skeleton */}
+        <div className="p-6 space-y-4">
+          {/* Restaurant name */}
+          <Skeleton className="h-6 w-3/4" />
+
+          {/* Description lines */}
+          <div className="space-y-2">
+            {Array.from({ length: lines }).map((_, i) => (
+              <Skeleton key={i} className={cn("h-4", i === lines - 1 ? "w-1/2" : "w-full")} />
+            ))}
+          </div>
+
+          {/* Price and rating row */}
+          <div className="flex items-center justify-between">
+            {showPrice && <Skeleton className="h-5 w-20" />}
+            {showRating && <Skeleton className="h-4 w-16" />}
+          </div>
+
+          {/* Quick details */}
+          <div className="flex items-center justify-between text-sm">
+            <Skeleton className="h-4 w-24" />
+            <Skeleton className="h-4 w-16" />
+          </div>
+        </div>
+      </div>
+    );
+
+    const renderRestaurantSkeleton = () => (
+      <div className="glass rounded-xl overflow-hidden transition-all duration-300">
+        {/* Image skeleton */}
+        {showImage && (
+          <AspectRatio ratio={16 / 9}>
+            <Skeleton className="w-full h-full" />
+          </AspectRatio>
+        )}
+
+        {/* Content skeleton */}
+        <div className="p-6 space-y-4">
+          {/* Restaurant name */}
+          <Skeleton className="h-6 w-2/3" />
+
+          {/* Description */}
+          <div className="space-y-2">
+            <Skeleton className="h-4 w-full" />
+            <Skeleton className="h-4 w-3/4" />
+          </div>
+
+          {/* Rating and price */}
+          <div className="flex items-center justify-between">
+            {showRating && <Skeleton className="h-4 w-20" />}
+            {showPrice && <Skeleton className="h-5 w-16" />}
+          </div>
+        </div>
+      </div>
+    );
+
+    const renderGenericSkeleton = () => (
+      <div className="glass rounded-xl p-6 space-y-4">
+        {/* Title */}
+        <Skeleton className="h-6 w-1/2" />
+
+        {/* Content lines */}
+        <div className="space-y-2">
+          {Array.from({ length: lines }).map((_, i) => (
+            <Skeleton key={i} className={cn("h-4", i === lines - 1 ? "w-1/3" : "w-full")} />
+          ))}
+        </div>
+
+        {/* Footer content */}
+        <div className="flex items-center justify-between">
+          <Skeleton className="h-4 w-20" />
+          <Skeleton className="h-4 w-16" />
+        </div>
+      </div>
+    );
+
+    return (
+      <div ref={ref} className={cn("w-full", className)} {...props}>
+        {variant === "place" && renderPlaceCardSkeleton()}
+        {variant === "dish" && renderDishCardSkeleton()}
+        {variant === "drink" && renderDrinkCardSkeleton()}
+        {variant === "event" && renderEventCardSkeleton()}
+        {variant === "experience" && renderExperienceSkeleton()}
+        {variant === "restaurant" && renderRestaurantSkeleton()}
+        {variant === "generic" && renderGenericSkeleton()}
+      </div>
+    );
+  }
+);
+
+SkeletonCard.displayName = "SkeletonCard";
+
+export { SkeletonCard };

package/src/components/skeleton.tsx

@@ -0,0 +1,17 @@
+import type React from "react";
+import { cn } from "../lib/utils";
+
+function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn(
+        "animate-pulse rounded-xl glass border border-border/30 relative overflow-hidden",
+        "before:absolute before:inset-0 before:-translate-x-full before:animate-[shimmer_2s_infinite] before:bg-gradient-to-r before:from-transparent before:via-white/10 before:to-transparent",
+        className
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Skeleton };

package/src/components/slider.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import * as React from "react";
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import { cn } from "../lib/utils";
+
+const Slider = React.forwardRef<
+  React.ElementRef<typeof SliderPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SliderPrimitive.Root
+    ref={ref}
+    className={cn("relative flex w-full touch-none select-none items-center", className)}
+    {...props}
+  >
+    <SliderPrimitive.Track className="relative h-2 w-full grow overflow-hidden rounded-full glass border border-border/50">
+      <SliderPrimitive.Range className="absolute h-full bg-white shadow-lg" />
+    </SliderPrimitive.Track>
+    <SliderPrimitive.Thumb className="block h-5 w-5 rounded-full border-2 border-primary bg-primary ring-offset-background transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 hover:shadow-lg hover:shadow-primary/20 hover:scale-110" />
+  </SliderPrimitive.Root>
+));
+Slider.displayName = SliderPrimitive.Root.displayName;
+
+export { Slider };

package/src/components/sliding-panels.tsx

@@ -0,0 +1,99 @@
+"use client";
+
+import * as React from "react";
+import { useLayoutEffect, useRef, useState } from "react";
+import { Button } from "./button";
+import { ChevronLeft } from "lucide-react";
+import { cn } from "../lib/utils";
+
+export interface Panel {
+  id: string;
+  content: React.ReactNode;
+  showBackButton?: boolean;
+  backButtonLabel?: string;
+  onBack?: () => void;
+}
+
+export interface SlidingPanelsProps {
+  panels: Panel[];
+  currentPanel: string;
+  onPanelChange: (panelId: string) => void;
+  className?: string;
+}
+
+export const SlidingPanels = ({
+  panels,
+  currentPanel,
+  onPanelChange,
+  className,
+}: SlidingPanelsProps) => {
+  const currentIndex = panels.findIndex((p) => p.id === currentPanel);
+  const currentPanelData = panels[currentIndex];
+  const panelRefs = useRef<(HTMLDivElement | null)[]>([]);
+  const [containerHeight, setContainerHeight] = useState<number | undefined>();
+
+  // Measure active panel height on panel change and whenever content resizes
+  useLayoutEffect(() => {
+    const activeEl = panelRefs.current[currentIndex];
+    if (!activeEl) return;
+
+    const updateHeight = () => setContainerHeight(activeEl.scrollHeight);
+    updateHeight();
+
+    const ro = new ResizeObserver(updateHeight);
+    ro.observe(activeEl);
+    return () => ro.disconnect();
+  }, [currentIndex]);
+
+  const handleBack = () => {
+    if (currentIndex > 0) {
+      const previousPanel = panels[currentIndex - 1];
+      if (currentPanelData?.onBack) {
+        currentPanelData.onBack();
+      } else {
+        onPanelChange(previousPanel.id);
+      }
+    }
+  };
+
+  return (
+    <div
+      className={cn("relative overflow-hidden transition-[height] duration-300", className)}
+      style={{ height: containerHeight }}
+    >
+      {panels.map((panel, index) => {
+        const isActive = panel.id === currentPanel;
+        const isLeft = index < currentIndex;
+        const isRight = index > currentIndex;
+
+        return (
+          <div
+            key={panel.id}
+            ref={(el) => {
+              panelRefs.current[index] = el;
+            }}
+            className={cn(
+              "absolute top-0 left-0 w-full transition-transform duration-300",
+              isActive && "translate-x-0",
+              isLeft && "-translate-x-full",
+              isRight && "translate-x-full"
+            )}
+            aria-hidden={!isActive}
+          >
+            {panel.showBackButton && (
+              <div className="flex items-center gap-2 mb-4">
+                <Button variant="ghost" size="icon" onClick={handleBack}>
+                  <ChevronLeft className="h-4 w-4" />
+                </Button>
+                {panel.backButtonLabel && (
+                  <h3 className="font-semibold">{panel.backButtonLabel}</h3>
+                )}
+              </div>
+            )}
+            {panel.content}
+          </div>
+        );
+      })}
+    </div>
+  );
+};

package/src/components/sonner.tsx

@@ -0,0 +1,25 @@
+"use client";
+
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, ToasterProps } from "sonner";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+        } as React.CSSProperties
+      }
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/src/components/sticky-container.tsx

@@ -0,0 +1,88 @@
+"use client";
+
+import { useSticky } from "../hooks/use-sticky";
+import { cn } from "../lib/utils";
+
+interface StickyContainerProps {
+  /** Content to render inside the sticky container */
+  children: React.ReactNode;
+  /** Additional className for the sticky element */
+  className?: string;
+  /** Additional className for the inner container wrapper */
+  containerClassName?: string;
+  /**
+   * Top offset when sticky.
+   * Defaults to "sticky-header-safe" which uses the global CSS class
+   * to handle safe-area-inset-top correctly on all devices.
+   */
+  topOffset?: string;
+  /** z-index when sticky (default: z-40) */
+  zIndex?: string;
+  /** Whether to show the background/border/shadow when sticky (default: true) */
+  showStickyStyles?: boolean;
+  /** Custom className for when sticky */
+  stickyClassName?: string;
+  /** Hide children until sticky state is reached */
+  hideUntilSticky?: boolean;
+  /** Optional ID for the sticky container (useful for measuring height for nested sticky elements) */
+  id?: string;
+}
+
+/**
+ * Reusable sticky container component with automatic background/shadow when stuck
+ * Uses native CSS position: sticky with IntersectionObserver to detect sticky state
+ *
+ * Supports nested sticky elements - children can use `sticky bottom-0` to stick
+ * to the bottom of this container when scrolling.
+ *
+ * Automatically handles PWA safe area insets via CSS class.
+ *
+ * @example
+ * <StickyContainer>
+ *   <SearchBar />
+ *   <div className="sticky bottom-0">Categories</div>
+ * </StickyContainer>
+ */
+export const StickyContainer = ({
+  children,
+  className,
+  containerClassName,
+  topOffset = "sticky-header-safe",
+  zIndex = "z-40",
+  showStickyStyles = true,
+  stickyClassName,
+  hideUntilSticky = false,
+  id,
+}: StickyContainerProps) => {
+  const { isSticky, ref, sentinelRef } = useSticky();
+
+  return (
+    <>
+      {/* Sentinel element - placed 1px above sticky element to detect when it becomes stuck */}
+      <div ref={sentinelRef} className="h-px w-full" aria-hidden="true" />
+
+      {/* Sticky container */}
+      <div
+        ref={ref}
+        id={id}
+        className={cn(
+          "sticky px-4 transition-all duration-200",
+          hideUntilSticky
+            ? isSticky
+              ? "py-4 opacity-100 translate-y-0"
+              : "py-0 opacity-0 -translate-y-2 pointer-events-none"
+            : "py-4",
+          topOffset,
+          zIndex,
+          showStickyStyles && isSticky
+            ? stickyClassName || "bg-background border-b border-border"
+            : "bg-transparent border-b border-transparent",
+          className
+        )}
+      >
+        {/* Inner container wrapper - allows passing custom container classes */}
+        <div className={cn(containerClassName, "lg:px-4")}>{children}</div>
+      </div>
+    </>
+  );
+};

package/src/components/switch.tsx

@@ -0,0 +1,28 @@
+"use client";
+
+import * as React from "react";
+import * as SwitchPrimitive from "@radix-ui/react-switch";
+import { cn } from "../lib/utils";
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitive.Root
+    className={cn(
+      "peer inline-flex h-6 w-11 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-all duration-300 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input glass data-[state=checked]:shadow-lg data-[state=checked]:shadow-primary/20 hover:shadow-md",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitive.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-all duration-300 data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0 data-[state=checked]:bg-primary-foreground backdrop-blur-md border border-border/50"
+      )}
+    />
+  </SwitchPrimitive.Root>
+));
+Switch.displayName = SwitchPrimitive.Root.displayName;
+
+export { Switch };

package/src/components/table.tsx

@@ -0,0 +1,90 @@
+import * as React from "react";
+import { cn } from "../lib/utils";
+
+const Table = React.forwardRef<HTMLTableElement, React.HTMLAttributes<HTMLTableElement>>(
+  ({ className, ...props }, ref) => (
+    <div className="relative w-full overflow-auto">
+      <table ref={ref} className={cn("w-full caption-bottom text-sm", className)} {...props} />
+    </div>
+  )
+);
+Table.displayName = "Table";
+
+const TableHeader = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
+));
+TableHeader.displayName = "TableHeader";
+
+const TableBody = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tbody ref={ref} className={cn("[&_tr:last-child]:border-0", className)} {...props} />
+));
+TableBody.displayName = "TableBody";
+
+const TableFooter = React.forwardRef<
+  HTMLTableSectionElement,
+  React.HTMLAttributes<HTMLTableSectionElement>
+>(({ className, ...props }, ref) => (
+  <tfoot
+    ref={ref}
+    className={cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className)}
+    {...props}
+  />
+));
+TableFooter.displayName = "TableFooter";
+
+const TableRow = React.forwardRef<HTMLTableRowElement, React.HTMLAttributes<HTMLTableRowElement>>(
+  ({ className, ...props }, ref) => (
+    <tr
+      ref={ref}
+      className={cn(
+        "border-b border-border/50 transition-all duration-300 hover:bg-muted/30 hover:backdrop-blur-sm data-[state=selected]:bg-muted/50",
+        className
+      )}
+      {...props}
+    />
+  )
+);
+TableRow.displayName = "TableRow";
+
+const TableHead = React.forwardRef<
+  HTMLTableCellElement,
+  React.ThHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <th
+    ref={ref}
+    className={cn(
+      "h-12 px-4 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0",
+      className
+    )}
+    {...props}
+  />
+));
+TableHead.displayName = "TableHead";
+
+const TableCell = React.forwardRef<
+  HTMLTableCellElement,
+  React.TdHTMLAttributes<HTMLTableCellElement>
+>(({ className, ...props }, ref) => (
+  <td
+    ref={ref}
+    className={cn("p-4 align-middle [&:has([role=checkbox])]:pr-0", className)}
+    {...props}
+  />
+));
+TableCell.displayName = "TableCell";
+
+const TableCaption = React.forwardRef<
+  HTMLTableCaptionElement,
+  React.HTMLAttributes<HTMLTableCaptionElement>
+>(({ className, ...props }, ref) => (
+  <caption ref={ref} className={cn("mt-4 text-sm text-muted-foreground", className)} {...props} />
+));
+TableCaption.displayName = "TableCaption";
+
+export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption };