@bearmenu/ui 0.1.0 → 0.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bearmenu/ui",
-  "version": "0.1.0",
+  "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>
+  ),
+};

package/src/components/badge.stories.tsx

@@ -0,0 +1,60 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Badge } from "./badge";
+
+const meta = {
+  title: "Components/Badge",
+  component: Badge,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: ["default", "secondary", "destructive", "outline", "overlay", "glass", "success", "warning"],
+    },
+  },
+} satisfies Meta<typeof Badge>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Badge" },
+};
+
+export const Secondary: Story = {
+  args: { children: "Secondary", variant: "secondary" },
+};
+
+export const Destructive: Story = {
+  args: { children: "Destructive", variant: "destructive" },
+};
+
+export const Outline: Story = {
+  args: { children: "Outline", variant: "outline" },
+};
+
+export const Glass: Story = {
+  args: { children: "Glass", variant: "glass" },
+};
+
+export const Success: Story = {
+  args: { children: "Success", variant: "success" },
+};
+
+export const Warning: Story = {
+  args: { children: "Warning", variant: "warning" },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-3">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outline</Badge>
+      <Badge variant="overlay">Overlay</Badge>
+      <Badge variant="glass">Glass</Badge>
+      <Badge variant="success">Success</Badge>
+      <Badge variant="warning">Warning</Badge>
+    </div>
+  ),
+};

package/src/components/breadcrumb.stories.tsx

@@ -0,0 +1,63 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import {
+  Breadcrumb,
+  BreadcrumbEllipsis,
+  BreadcrumbItem,
+  BreadcrumbLink,
+  BreadcrumbList,
+  BreadcrumbPage,
+  BreadcrumbSeparator,
+} from "./breadcrumb";
+
+const meta = {
+  title: "Components/Breadcrumb",
+  component: Breadcrumb,
+  tags: ["autodocs"],
+} satisfies Meta<typeof Breadcrumb>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Products</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Current Page</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};
+
+export const WithEllipsis: Story = {
+  render: () => (
+    <Breadcrumb>
+      <BreadcrumbList>
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Home</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbEllipsis />
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbLink href="#">Category</BreadcrumbLink>
+        </BreadcrumbItem>
+        <BreadcrumbSeparator />
+        <BreadcrumbItem>
+          <BreadcrumbPage>Product</BreadcrumbPage>
+        </BreadcrumbItem>
+      </BreadcrumbList>
+    </Breadcrumb>
+  ),
+};

package/src/components/button.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { Button } from "./button";
+import { Heart, Mail, Plus } from "lucide-react";
+
+const meta = {
+  title: "Components/Button",
+  component: Button,
+  tags: ["autodocs"],
+  argTypes: {
+    variant: {
+      control: "select",
+      options: [
+        "default",
+        "destructive",
+        "outline",
+        "secondary",
+        "ghost",
+        "link",
+        "glass",
+        "brown",
+        "antagonist",
+      ],
+    },
+    size: {
+      control: "select",
+      options: ["default", "sm", "lg", "icon"],
+    },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: { children: "Button" },
+};
+
+export const Destructive: Story = {
+  args: { children: "Delete", variant: "destructive" },
+};
+
+export const Outline: Story = {
+  args: { children: "Outline", variant: "outline" },
+};
+
+export const Secondary: Story = {
+  args: { children: "Secondary", variant: "secondary" },
+};
+
+export const Ghost: Story = {
+  args: { children: "Ghost", variant: "ghost" },
+};
+
+export const Link: Story = {
+  args: { children: "Link", variant: "link" },
+};
+
+export const Glass: Story = {
+  args: { children: "Glass", variant: "glass" },
+};
+
+export const Brown: Story = {
+  args: { children: "Brown", variant: "brown" },
+};
+
+export const Antagonist: Story = {
+  args: { children: "Antagonist", variant: "antagonist" },
+};
+
+export const Small: Story = {
+  args: { children: "Small", size: "sm" },
+};
+
+export const Large: Story = {
+  args: { children: "Large", size: "lg" },
+};
+
+export const Icon: Story = {
+  args: { size: "icon", children: <Plus className="h-4 w-4" /> },
+};
+
+export const WithIcon: Story = {
+  args: { children: <><Mail className="h-4 w-4" /> Send Email</> },
+};
+
+export const Disabled: Story = {
+  args: { children: "Disabled", disabled: true },
+};
+
+export const AllVariants: Story = {
+  render: () => (
+    <div className="flex flex-wrap items-center gap-4">
+      <Button variant="default">Default</Button>
+      <Button variant="destructive">Destructive</Button>
+      <Button variant="outline">Outline</Button>
+      <Button variant="secondary">Secondary</Button>
+      <Button variant="ghost">Ghost</Button>
+      <Button variant="link">Link</Button>
+      <Button variant="glass">Glass</Button>
+      <Button variant="brown">Brown</Button>
+      <Button variant="antagonist">Antagonist</Button>
+    </div>
+  ),
+};
+
+export const AllSizes: Story = {
+  render: () => (
+    <div className="flex items-center gap-4">
+      <Button size="sm">Small</Button>
+      <Button size="default">Default</Button>
+      <Button size="lg">Large</Button>
+      <Button size="icon"><Heart className="h-4 w-4" /></Button>
+    </div>
+  ),
+};

package/src/components/button.tsx

@@ -14,7 +14,7 @@ const buttonVariants = cva(
         destructive:
           "bg-destructive text-destructive-foreground shadow-lg hover:bg-destructive/90 hover:shadow-destructive/20 backdrop-blur-sm border border-destructive/20",
         outline:
-          "border border-border bg-card/70 backdrop-blur-md hover:bg-accent hover:text-accent-foreground hover:border-accent-foreground/20 hover:shadow-lg glass-hover",
+          "border border-border bg-sidebar backdrop-blur-md hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:border-sidebar-accent-foreground/20 hover:shadow-lg",
         secondary:
           "bg-secondary text-secondary-foreground shadow-lg hover:bg-secondary/90 hover:shadow-secondary/20 backdrop-blur-sm border border-secondary/20",
         ghost: "hover:bg-foreground/10 hover:text-foreground transition-colors duration-200",