@bearmenu/ui 0.1.1 → 0.5.1

package/dist/components/place-details-mobile.js

@@ -0,0 +1,187 @@
+import { PlaceAboutTab } from '../chunk-HLQ2IRE7.js';
+import '../chunk-QJ54Z7TC.js';
+import { Text } from '../chunk-4KOMHDZD.js';
+import { Badge } from '../chunk-NKHH23YK.js';
+import { cn } from '../chunk-FEK5XGZW.js';
+import '../chunk-3GWWZKX7.js';
+import { useState } from 'react';
+import { UtensilsCrossed, Star, DollarSign, Clock, Info, MessageSquare, CalendarDays } from 'lucide-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function formatHour(h) {
+  return `${h.toString().padStart(2, "0")}:00`;
+}
+function formatRating(rating) {
+  return (rating == null ? void 0 : rating.rating) ? rating.rating.toFixed(1) : null;
+}
+function priceLevelFromRanges(place) {
+  var _a, _b, _c, _d, _e, _f, _g, _h;
+  const dish = (_d = (_c = (_a = place.price_dishes) == null ? void 0 : _a.price_range_high) != null ? _c : (_b = place.price_dishes) == null ? void 0 : _b.price_range_low) != null ? _d : 0;
+  const drink = (_h = (_g = (_e = place.price_drinks) == null ? void 0 : _e.price_range_high) != null ? _g : (_f = place.price_drinks) == null ? void 0 : _f.price_range_low) != null ? _h : 0;
+  if (dish === 0 && drink === 0) return null;
+  const avg = dish > 0 && drink > 0 ? Math.round((dish + drink) / 2) : dish || drink;
+  return Math.max(1, Math.min(5, avg));
+}
+function getClosingHour(hours, currentHour) {
+  if (!hours.length) return null;
+  const active = hours.find((s) => s.opens_at <= currentHour && s.closes_at > currentHour);
+  if (active) return active.closes_at;
+  const last = hours[hours.length - 1];
+  return last ? last.closes_at : null;
+}
+function getNextOpeningToday(hours, currentHour) {
+  if (!hours.length) return null;
+  const later = hours.find((s) => s.opens_at > currentHour);
+  return later ? later.opens_at : null;
+}
+function PlaceDetailsMobile({
+  place,
+  labels,
+  coverImageUrl,
+  className
+}) {
+  var _a, _b, _c;
+  const [imgError, setImgError] = useState(false);
+  const ratingDisplay = formatRating(place.rating);
+  const reviewCount = (_b = place.review_count) != null ? _b : (_a = place.rating) == null ? void 0 : _a.count;
+  const priceLevel = priceLevelFromRanges(place);
+  const hours = (_c = place.hours) != null ? _c : [];
+  const currentHour = (/* @__PURE__ */ new Date()).getHours();
+  const closingHour = place.open_now ? getClosingHour(hours, currentHour) : null;
+  const nextOpening = !place.open_now ? getNextOpeningToday(hours, currentHour) : null;
+  const showCover = !!coverImageUrl && !imgError;
+  return /* @__PURE__ */ jsxs("div", { className: cn("flex flex-col bg-background", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "px-4 pt-4", children: [
+      /* @__PURE__ */ jsx("div", { className: "rounded-[22px] overflow-hidden relative", children: /* @__PURE__ */ jsxs("div", { className: "h-44 flex items-center justify-center relative overflow-hidden", children: [
+        /* @__PURE__ */ jsxs("div", { className: "absolute bottom-2 right-2 z-20 flex items-center gap-1.5 bg-surface border border-border px-2.5 h-7 rounded-[12px] text-[11px] font-medium text-foreground", children: [
+          /* @__PURE__ */ jsx(
+            "span",
+            {
+              className: cn(
+                "w-1.5 h-1.5 rounded-full flex-shrink-0",
+                place.open_now ? "bg-green-500" : "bg-muted-foreground"
+              )
+            }
+          ),
+          /* @__PURE__ */ jsxs("span", { children: [
+            place.open_now ? labels.statusBadge.openNow : labels.statusBadge.closed,
+            place.open_now && closingHour != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              " \xB7 ",
+              labels.statusBadge.closesAt,
+              " ",
+              formatHour(closingHour)
+            ] }),
+            !place.open_now && nextOpening != null && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              " \xB7 ",
+              labels.statusBadge.opensAt,
+              " ",
+              formatHour(nextOpening)
+            ] }),
+            !place.open_now && nextOpening == null && hours[0] && /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+              " \xB7 ",
+              labels.statusBadge.opensTomorrow,
+              " ",
+              formatHour(hours[0].opens_at)
+            ] })
+          ] })
+        ] }),
+        showCover ? (
+          // eslint-disable-next-line @next/next/no-img-element
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: coverImageUrl,
+              alt: place.name,
+              className: "absolute inset-0 w-full h-full object-cover",
+              onError: () => setImgError(true)
+            }
+          )
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-primary/20 via-primary/10 to-primary/5" }),
+          /* @__PURE__ */ jsxs("div", { className: "relative z-10 flex flex-col items-center justify-center gap-2 h-full", children: [
+            /* @__PURE__ */ jsx("div", { className: "w-16 h-16 rounded-full bg-primary/20 flex items-center justify-center", children: /* @__PURE__ */ jsx(
+              UtensilsCrossed,
+              {
+                className: "w-8 h-8 text-primary",
+                strokeWidth: 1.5,
+                "aria-hidden": true
+              }
+            ) }),
+            /* @__PURE__ */ jsx(Text, { as: "p", variant: "caption", color: "muted", weight: "medium", children: labels.noImageAvailable })
+          ] })
+        ] })
+      ] }) }),
+      /* @__PURE__ */ jsxs("div", { className: "pt-4 px-1", children: [
+        /* @__PURE__ */ jsx("h1", { className: "text-[26px] leading-[1.05] font-bold tracking-tight text-foreground break-words", children: place.name }),
+        /* @__PURE__ */ jsxs("div", { className: "mt-3 flex flex-wrap items-center gap-x-4 gap-y-1.5 text-[12px] text-muted-foreground", children: [
+          ratingDisplay && /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Star, { className: "w-3 h-3 text-primary fill-primary", "aria-hidden": true }),
+            /* @__PURE__ */ jsx("span", { className: "text-foreground font-semibold", children: ratingDisplay }),
+            reviewCount != null && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: labels.reviewCount(reviewCount) })
+          ] }),
+          priceLevel != null && /* @__PURE__ */ jsx("div", { className: "flex items-center -space-x-0.5", "aria-label": `Price level ${priceLevel} of 5`, children: Array.from({ length: 5 }, (_, i) => /* @__PURE__ */ jsx(
+            DollarSign,
+            {
+              className: cn(
+                "w-3 h-3",
+                i < priceLevel ? "text-foreground" : "text-muted-foreground/30"
+              ),
+              strokeWidth: 2.5,
+              "aria-hidden": true
+            },
+            i
+          )) }),
+          /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-1", children: [
+            /* @__PURE__ */ jsx(Clock, { className: "w-3.5 h-3.5", "aria-hidden": true }),
+            /* @__PURE__ */ jsx(
+              "span",
+              {
+                className: cn(
+                  place.open_now ? "text-green-600 dark:text-green-400" : "text-muted-foreground"
+                ),
+                children: place.open_now ? labels.statusBadge.openNow : labels.statusBadge.closed
+              }
+            )
+          ] })
+        ] }),
+        place.cuisines && place.cuisines.length > 0 && /* @__PURE__ */ jsx("div", { className: "mt-3 flex flex-wrap gap-1.5", children: place.cuisines.map((cuisine) => /* @__PURE__ */ jsx(Badge, { variant: "outline", className: "capitalize text-[11px]", children: cuisine.replace(/-/g, " ") }, cuisine)) })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "mt-5 px-4", children: /* @__PURE__ */ jsx("div", { className: "border-b border-border", children: /* @__PURE__ */ jsxs("div", { className: "flex w-full", children: [
+      /* @__PURE__ */ jsx(MobileTabPlaceholder, { icon: /* @__PURE__ */ jsx(UtensilsCrossed, { className: "w-3.5 h-3.5" }), label: labels.tabs.menu }),
+      /* @__PURE__ */ jsx(
+        MobileTabPlaceholder,
+        {
+          icon: /* @__PURE__ */ jsx(Info, { className: "w-3.5 h-3.5" }),
+          label: labels.tabs.about,
+          active: true
+        }
+      ),
+      /* @__PURE__ */ jsx(MobileTabPlaceholder, { icon: /* @__PURE__ */ jsx(MessageSquare, { className: "w-3.5 h-3.5" }), label: labels.tabs.reviews }),
+      /* @__PURE__ */ jsx(MobileTabPlaceholder, { icon: /* @__PURE__ */ jsx(CalendarDays, { className: "w-3.5 h-3.5" }), label: labels.tabs.events })
+    ] }) }) }),
+    /* @__PURE__ */ jsx("div", { className: "pb-6", children: /* @__PURE__ */ jsx(PlaceAboutTab, { place, labels }) })
+  ] });
+}
+function MobileTabPlaceholder({
+  icon,
+  label,
+  active
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "flex flex-1 min-w-0 items-center justify-center gap-1 px-1 py-2.5 text-[12px] font-medium border-b-2 -mb-px",
+        active ? "border-primary text-foreground" : "border-transparent text-muted-foreground"
+      ),
+      "aria-hidden": true,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "flex-shrink-0", "aria-hidden": true, children: icon }),
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: label })
+      ]
+    }
+  );
+}
+
+export { PlaceDetailsMobile };

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/text.d.ts

@@ -4,9 +4,9 @@ import * as React from 'react';
 import { VariantProps } from 'class-variance-authority';
 
 declare const textVariants: (props?: ({
-    variant?: "display" | "h1" | "h2" | "h3" | "h4" | "body-lg" | "body" | "body-sm" | "caption" | "label" | "overline" | null | undefined;
-    color?: "default" | "destructive" | "inherit" | "muted" | "primary" | "primary-foreground" | null | undefined;
-    weight?: "bold" | "normal" | "medium" | "semibold" | null | undefined;
+    variant?: "h2" | "h3" | "label" | "body" | "caption" | "h1" | "h4" | "display" | "body-lg" | "body-sm" | "overline" | null | undefined;
+    color?: "inherit" | "default" | "destructive" | "muted" | "primary" | "primary-foreground" | null | undefined;
+    weight?: "bold" | "medium" | "normal" | "semibold" | null | undefined;
     leading?: "none" | "normal" | "tight" | "snug" | "relaxed" | "loose" | null | undefined;
     tracking?: "normal" | "tight" | "wide" | "wider" | null | undefined;
     wrap?: "balance" | "pretty" | "nowrap" | null | undefined;

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.1",
   "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>
+  ),
+};