@bearmenu/ui 0.1.1 → 0.5.0

package/dist/components/place-types.d.ts

@@ -0,0 +1,145 @@
+/**
+ * Structural mirror of the openapi `Place` schema, decoupled from any one app's
+ * generated types. Both FE and admin map their domain shapes into this type
+ * before passing data to `<PlaceCard>` / `<PlaceAboutTab>`.
+ */
+type PlacePreview = {
+    id: string;
+    slug: string;
+    name: string;
+    description?: string;
+    generative_summary?: string;
+    review_summary?: string;
+    open_now?: boolean;
+    rating?: {
+        rating: number;
+        count: number;
+    };
+    review_count?: number;
+    hours?: PlaceHourBlock[];
+    today_schedule?: PlaceHourBlock[];
+    location?: {
+        address?: string;
+        geolocation?: {
+            lat: number | string;
+            lon: number | string;
+        };
+        distance?: {
+            meters?: number;
+        };
+    };
+    price_dishes?: PlacePriceRange;
+    price_drinks?: PlacePriceRange;
+    cuisines?: string[];
+    amenities?: string[];
+    payment_options?: string[];
+    accessibility_features?: string[];
+    parking_options?: string[];
+    landmarks?: Array<{
+        name: string;
+        distance_meters?: number;
+    }>;
+    areas?: Array<{
+        name: string;
+    }>;
+    busyness?: Array<{
+        hour: number;
+        score: number;
+    }>;
+    type?: string;
+    business_status?: 'operational' | 'closed_temporarily' | 'closed_permanently';
+    phone?: string;
+    website_url?: string;
+    socials?: {
+        instagram_url?: string;
+        facebook_url?: string;
+    };
+    /**
+     * Pre-resolved thumbnail URL. Callers compute this themselves
+     * (FE: `https://cdn.bear.menu/places/${slug}-thumbnail.jpg`,
+     *  admin: form's primary photo URL or blob URL).
+     */
+    thumbnail_url?: string;
+};
+type PlaceHourBlock = {
+    opens_at: number;
+    closes_at: number;
+};
+type PlacePriceRange = {
+    price_range_low?: number;
+    price_range_high?: number;
+};
+/** Labels passed to `<PlaceCard>`. All translation happens in the caller. */
+type PlaceCardLabels = {
+    open: string;
+    closed: string;
+    until: string;
+    opensAt: string;
+    currency: string;
+};
+/**
+ * Labels passed to `<PlaceAboutTab>`. All translation happens in the caller.
+ *
+ * Dynamic suffix maps (`amenityLabels`, etc.) translate API enum values like
+ * `wheelchair_accessible_entrance` into human strings. Missing keys fall back
+ * to the raw enum value (with underscores → spaces).
+ */
+type PlaceAboutTabLabels = {
+    overview: string;
+    description: string;
+    whatPeopleSay: string;
+    contactAndLocation: string;
+    address: string;
+    instagram: string;
+    facebook: string;
+    todayHours: string;
+    statusOpen: string;
+    statusClosed: string;
+    typicalBusyness: string;
+    cuisines: string;
+    amenities: string;
+    paymentOptions: string;
+    accessibility: string;
+    parking: string;
+    nearbyLandmarks: string;
+    neighborhood: string;
+    businessInformation: string;
+    type: string;
+    status: string;
+    amenityLabels: Record<string, string>;
+    paymentLabels: Record<string, string>;
+    accessibilityLabels: Record<string, string>;
+    parkingLabels: Record<string, string>;
+    typeLabels: Record<string, string>;
+    statusLabels: Record<string, string>;
+};
+/** Discriminator for `<PlaceAboutTab>`'s `onLinkClick` callback. */
+type PlaceLinkKind = 'phone' | 'website' | 'instagram' | 'facebook' | 'address';
+/**
+ * Labels passed to `<PlaceDetailsMobile>`. Extends `PlaceAboutTabLabels` with
+ * the header/tab-strip strings unique to the mobile place-details surface.
+ */
+type PlaceDetailsMobileLabels = PlaceAboutTabLabels & {
+    /** Tab strip — "About" is highlighted, the rest are visual placeholders. */
+    tabs: {
+        menu: string;
+        about: string;
+        reviews: string;
+        events: string;
+    };
+    /** Status badge over the hero image and the inline open/closed pill in the info row. */
+    statusBadge: {
+        openNow: string;
+        closed: string;
+        /** Inserted with surrounding " · " separators. e.g. "Closes at" */
+        closesAt: string;
+        opensAt: string;
+        opensTomorrow: string;
+    };
+    /** Review count formatter. Pass a translator that handles ICU pluralization. */
+    reviewCount: (count: number) => string;
+    /** "No image available" fallback shown when no thumbnail is set. */
+    noImageAvailable: string;
+};
+
+export type { PlaceAboutTabLabels, PlaceCardLabels, PlaceDetailsMobileLabels, PlaceHourBlock, PlaceLinkKind, PlacePreview, PlacePriceRange };

package/dist/components/place-types.js

@@ -0,0 +1 @@
+

package/dist/components/search-bar.js

@@ -1,4 +1,4 @@
-import { Card } from '../chunk-UXAYXRFN.js';
+import { Card } from '../chunk-QJ54Z7TC.js';
 import '../chunk-4KOMHDZD.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/searchable-select.js

@@ -1,7 +1,7 @@
 import { Popover, PopoverTrigger, PopoverContent } from '../chunk-4UO73SKC.js';
 import { Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '../chunk-7H54PTVH.js';
 import '../chunk-4AVS6CV4.js';
-import { Button } from '../chunk-2CUFS5LF.js';
+import { Button } from '../chunk-2BMJRXQX.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/skeleton-card.js

@@ -1,4 +1,4 @@
-import { Skeleton } from '../chunk-X6GATUI2.js';
+import { Skeleton } from '../chunk-UISA4CIG.js';
 import { AspectRatio } from '../chunk-3VMDCCCX.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';

package/dist/components/skeleton.js

@@ -1,3 +1,3 @@
-export { Skeleton } from '../chunk-X6GATUI2.js';
+export { Skeleton } from '../chunk-UISA4CIG.js';
 import '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/sliding-panels.js

@@ -1,4 +1,4 @@
-import { Button } from '../chunk-2CUFS5LF.js';
+import { Button } from '../chunk-2BMJRXQX.js';
 import '../chunk-R47NEOSI.js';
 import { cn } from '../chunk-FEK5XGZW.js';
 import '../chunk-3GWWZKX7.js';

package/dist/components/sonner.js

@@ -1,4 +1,5 @@
 import { __objRest, __spreadValues } from '../chunk-3GWWZKX7.js';
+import { Loader2Icon, OctagonXIcon, TriangleAlertIcon, InfoIcon, CircleCheckIcon } from 'lucide-react';
 import { useTheme } from 'next-themes';
 import { Toaster as Toaster$1 } from 'sonner';
 import { jsx } from 'react/jsx-runtime';
@@ -9,12 +10,20 @@ var Toaster = (_a) => {
   return /* @__PURE__ */ jsx(
     Toaster$1,
     __spreadValues({
-      theme,
+      theme: theme != null ? theme : "system",
       className: "toaster group",
+      icons: {
+        success: /* @__PURE__ */ jsx(CircleCheckIcon, { className: "size-4" }),
+        info: /* @__PURE__ */ jsx(InfoIcon, { className: "size-4" }),
+        warning: /* @__PURE__ */ jsx(TriangleAlertIcon, { className: "size-4" }),
+        error: /* @__PURE__ */ jsx(OctagonXIcon, { className: "size-4" }),
+        loading: /* @__PURE__ */ jsx(Loader2Icon, { className: "size-4 animate-spin" })
+      },
       style: {
         "--normal-bg": "var(--popover)",
         "--normal-text": "var(--popover-foreground)",
-        "--normal-border": "var(--border)"
+        "--normal-border": "var(--border)",
+        "--border-radius": "var(--radius)"
       }
     }, props)
   );

package/dist/components/tabs.js

@@ -13,7 +13,7 @@ var TabsList = React.forwardRef((_a, ref) => {
     __spreadProps(__spreadValues({
       ref,
       className: cn(
-        variant === "pill" ? "inline-flex h-12 items-center justify-center gap-2 rounded-3xl glass p-1 text-muted-foreground border border-border/50 shadow-lg" : "inline-flex h-auto items-center gap-0 rounded-none bg-transparent border-b border-border p-0 shadow-none text-muted-foreground",
+        variant === "pill" ? "inline-flex h-12 items-center justify-center gap-2 rounded-3xl bg-sidebar p-1 text-muted-foreground border border-border/50 shadow-lg" : "inline-flex h-auto items-center gap-0 rounded-none bg-transparent border-b border-border p-0 shadow-none text-muted-foreground",
         className
       )
     }, props), {

package/dist/components/toaster.js

@@ -1,5 +1,5 @@
-import { useToast } from '../chunk-EBAMCZDW.js';
 import { ToastProvider, Toast, ToastTitle, ToastDescription, ToastClose, ToastViewport } from '../chunk-ERMIA7NP.js';
+import { useToast } from '../chunk-EBAMCZDW.js';
 import '../chunk-FEK5XGZW.js';
 import { __objRest, __spreadProps, __spreadValues } from '../chunk-3GWWZKX7.js';
 import { jsxs, jsx } from 'react/jsx-runtime';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.1.1",
+  "version": "0.5.0",
   "description": "BearMenu design system — shared UI tokens, primitives, and components",
   "license": "UNLICENSED",
   "repository": {
@@ -45,7 +45,13 @@
     "./components/link-button": "./src/components/link-button.tsx",
     "./components/markdown-renderer": "./src/components/markdown-renderer.tsx",
     "./components/multi-select-combobox": "./src/components/multi-select-combobox.tsx",
+    "./components/multi-select-menu": "./src/components/multi-select-menu.tsx",
     "./components/pagination": "./src/components/pagination.tsx",
+    "./components/phone-frame": "./src/components/phone-frame.tsx",
+    "./components/place-about-tab": "./src/components/place-about-tab.tsx",
+    "./components/place-card": "./src/components/place-card.tsx",
+    "./components/place-details-mobile": "./src/components/place-details-mobile.tsx",
+    "./components/place-types": "./src/components/place-types.ts",
     "./components/popover": "./src/components/popover.tsx",
     "./components/progress": "./src/components/progress.tsx",
     "./components/radio-group": "./src/components/radio-group.tsx",
@@ -98,6 +104,8 @@
     }
   },
   "scripts": {
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
     "build": "tsup",
     "dev": "tsup --watch",
     "typecheck": "tsc --noEmit",
@@ -105,7 +113,7 @@
     "prepublishOnly": "pnpm run build"
   },
   "peerDependencies": {
-    "@hookform/resolvers": "^3.0.0",
+    "@hookform/resolvers": "^3.0.0 || ^5.0.0",
     "@radix-ui/react-accordion": "*",
     "@radix-ui/react-alert-dialog": "*",
     "@radix-ui/react-aspect-ratio": "*",
@@ -135,7 +143,7 @@
     "embla-carousel-react": "*",
     "framer-motion": "^12.0.0",
     "input-otp": "*",
-    "lucide-react": "^0.400.0",
+    "lucide-react": ">=0.400.0",
     "next": ">=14.0.0",
     "next-themes": "^0.4.0",
     "react": "^18.0.0 || ^19.0.0",
@@ -144,10 +152,10 @@
     "react-hook-form": "^7.0.0",
     "react-markdown": "^10.0.0",
     "remark-gfm": "^4.0.0",
-    "sonner": "^1.0.0",
-    "tailwind-merge": "^2.0.0",
+    "sonner": "^1.0.0 || ^2.0.0",
+    "tailwind-merge": "^2.0.0 || ^3.0.0",
     "vaul": "^1.0.0",
-    "zod": "^3.0.0"
+    "zod": "^3.0.0 || ^4.0.0"
   },
   "devDependencies": {
     "@hookform/resolvers": "^3.10.0",
@@ -174,15 +182,24 @@
     "@radix-ui/react-toggle": "latest",
     "@radix-ui/react-toggle-group": "latest",
     "@radix-ui/react-tooltip": "latest",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@tailwindcss/postcss": "^4.2.4",
+    "@tailwindcss/vite": "^4.2.4",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/react": "^19",
     "@types/react-dom": "^19",
+    "@vitejs/plugin-react": "^6.0.1",
     "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "cmdk": "latest",
     "embla-carousel-react": "^8.6.0",
     "framer-motion": "^12.23.22",
     "input-otp": "^1.4.2",
-    "lucide-react": "^0.577.0",
+    "jsdom": "^29.1.0",
+    "lucide-react": "^1.0.1",
     "next": "^16.1.7",
     "next-themes": "^0.4.6",
     "react": "19.2.4",
@@ -191,13 +208,15 @@
     "react-hook-form": "7.72.0",
     "react-markdown": "^10.1.0",
     "remark-gfm": "^4.0.1",
-    "sonner": "^1.7.4",
-    "tailwind-merge": "^2.5.5",
+    "sonner": "^2.0.7",
+    "storybook": "^10.3.5",
+    "tailwind-merge": "^3.5.0",
     "tailwindcss": "^4.2.4",
     "tsup": "^8.5.0",
     "tw-animate-css": "^1.4.0",
     "typescript": "^5",
     "vaul": "^1.1.2",
+    "vitest": "^4.1.5",
     "zod": "^3.25.67"
   }
 }

package/src/components/accordion.stories.tsx

@@ -0,0 +1,51 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from "./accordion";
+
+const meta = {
+  title: "Components/Accordion",
+  component: Accordion,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Accordion>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Accordion type="single" collapsible className="w-[400px]">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Is it accessible?</AccordionTrigger>
+        <AccordionContent>Yes. It adheres to the WAI-ARIA design pattern.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Is it styled?</AccordionTrigger>
+        <AccordionContent>
+          Yes. It comes with default styles that match the design system.
+        </AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Is it animated?</AccordionTrigger>
+        <AccordionContent>Yes. It uses CSS animations for smooth transitions.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};
+
+export const Multiple: Story = {
+  render: () => (
+    <Accordion type="multiple" className="w-[400px]">
+      <AccordionItem value="item-1">
+        <AccordionTrigger>Section One</AccordionTrigger>
+        <AccordionContent>Content for section one.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-2">
+        <AccordionTrigger>Section Two</AccordionTrigger>
+        <AccordionContent>Content for section two.</AccordionContent>
+      </AccordionItem>
+      <AccordionItem value="item-3">
+        <AccordionTrigger>Section Three</AccordionTrigger>
+        <AccordionContent>Content for section three.</AccordionContent>
+      </AccordionItem>
+    </Accordion>
+  ),
+};

package/src/components/alert-dialog.stories.tsx

@@ -0,0 +1,45 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "./alert-dialog";
+import { Button } from "./button";
+
+const meta = {
+  title: "Components/AlertDialog",
+  component: AlertDialog,
+  tags: ["autodocs"],
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <AlertDialog>
+      <AlertDialogTrigger asChild>
+        <Button variant="destructive">Delete Account</Button>
+      </AlertDialogTrigger>
+      <AlertDialogContent>
+        <AlertDialogHeader>
+          <AlertDialogTitle>Are you absolutely sure?</AlertDialogTitle>
+          <AlertDialogDescription>
+            This action cannot be undone. This will permanently delete your account and remove your
+            data from our servers.
+          </AlertDialogDescription>
+        </AlertDialogHeader>
+        <AlertDialogFooter>
+          <AlertDialogCancel>Cancel</AlertDialogCancel>
+          <AlertDialogAction>Continue</AlertDialogAction>
+        </AlertDialogFooter>
+      </AlertDialogContent>
+    </AlertDialog>
+  ),
+};

package/src/components/alert.stories.tsx

@@ -0,0 +1,85 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Alert, AlertTitle, AlertDescription } from "./alert";
+import { AlertCircle, CheckCircle, Info, AlertTriangle } from "lucide-react";
+
+const meta = {
+  title: "Components/Alert",
+  component: Alert,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "destructive", "warning", "success"],
+    },
+  },
+} satisfies Meta<typeof Alert>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Alert>
+      <Info className="h-4 w-4" />
+      <AlertTitle>Information</AlertTitle>
+      <AlertDescription>This is a default informational alert.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Destructive: Story = {
+  render: () => (
+    <Alert variant="destructive">
+      <AlertCircle className="h-4 w-4" />
+      <AlertTitle>Error</AlertTitle>
+      <AlertDescription>Something went wrong. Please try again.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Warning: Story = {
+  render: () => (
+    <Alert variant="warning">
+      <AlertTriangle className="h-4 w-4" />
+      <AlertTitle>Warning</AlertTitle>
+      <AlertDescription>Your session is about to expire.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const Success: Story = {
+  render: () => (
+    <Alert variant="success">
+      <CheckCircle className="h-4 w-4" />
+      <AlertTitle>Success</AlertTitle>
+      <AlertDescription>Your changes have been saved.</AlertDescription>
+    </Alert>
+  ),
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-col gap-4 w-[450px]">
+      <Alert>
+        <Info className="h-4 w-4" />
+        <AlertTitle>Default</AlertTitle>
+        <AlertDescription>Informational message.</AlertDescription>
+      </Alert>
+      <Alert variant="destructive">
+        <AlertCircle className="h-4 w-4" />
+        <AlertTitle>Destructive</AlertTitle>
+        <AlertDescription>Error message.</AlertDescription>
+      </Alert>
+      <Alert variant="warning">
+        <AlertTriangle className="h-4 w-4" />
+        <AlertTitle>Warning</AlertTitle>
+        <AlertDescription>Warning message.</AlertDescription>
+      </Alert>
+      <Alert variant="success">
+        <CheckCircle className="h-4 w-4" />
+        <AlertTitle>Success</AlertTitle>
+        <AlertDescription>Success message.</AlertDescription>
+      </Alert>
+    </div>
+  ),
+};

package/src/components/aspect-ratio.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { AspectRatio } from "./aspect-ratio";
+
+const meta = {
+  title: "Components/AspectRatio",
+  component: AspectRatio,
+  tags: ["autodocs"],
+} satisfies Meta<typeof AspectRatio>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <div className="w-[450px]">
+      <AspectRatio ratio={16 / 9} className="bg-muted rounded-md overflow-hidden">
+        <div className="flex items-center justify-center h-full text-muted-foreground">
+          16:9
+        </div>
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const Square: Story = {
+  render: () => (
+    <div className="w-[300px]">
+      <AspectRatio ratio={1} className="bg-muted rounded-md overflow-hidden">
+        <div className="flex items-center justify-center h-full text-muted-foreground">
+          1:1
+        </div>
+      </AspectRatio>
+    </div>
+  ),
+};
+
+export const Portrait: Story = {
+  render: () => (
+    <div className="w-[200px]">
+      <AspectRatio ratio={3 / 4} className="bg-muted rounded-md overflow-hidden">
+        <div className="flex items-center justify-center h-full text-muted-foreground">
+          3:4
+        </div>
+      </AspectRatio>
+    </div>
+  ),
+};

package/src/components/avatar.stories.tsx

@@ -0,0 +1,66 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Avatar, AvatarFallback, AvatarImage } from "./avatar";
+
+const meta = {
+  title: "Components/Avatar",
+  component: Avatar,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const WithImage: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarImage src="https://github.com/shadcn.png" alt="User" />
+      <AvatarFallback>CN</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Fallback: Story = {
+  render: () => (
+    <Avatar>
+      <AvatarFallback>JD</AvatarFallback>
+    </Avatar>
+  ),
+};
+
+export const Sizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Avatar className="h-8 w-8">
+        <AvatarFallback className="text-xs">S</AvatarFallback>
+      </Avatar>
+      <Avatar>
+        <AvatarFallback>MD</AvatarFallback>
+      </Avatar>
+      <Avatar className="h-14 w-14">
+        <AvatarFallback className="text-lg">LG</AvatarFallback>
+      </Avatar>
+      <Avatar className="h-20 w-20">
+        <AvatarFallback className="text-xl">XL</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+};
+
+export const Group: Story = {
+  render: () => (
+    <div className="flex -space-x-3">
+      <Avatar className="border-2 border-background">
+        <AvatarFallback>A</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-2 border-background">
+        <AvatarFallback>B</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-2 border-background">
+        <AvatarFallback>C</AvatarFallback>
+      </Avatar>
+      <Avatar className="border-2 border-background">
+        <AvatarFallback className="text-xs">+3</AvatarFallback>
+      </Avatar>
+    </div>
+  ),
+};