@cellarnode/ui 0.9.2 → 0.9.3

package/dist/components/image-carousel.js

@@ -0,0 +1,77 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeftIcon, ArrowRightIcon, StarIcon, XMarkIcon, } from "@heroicons/react/20/solid";
+import { Reorder } from "motion/react";
+import * as React from "react";
+import { cn } from "../lib/utils";
+/**
+ * Image carousel with thumbnail strip, drag-reorder, lightbox preview, and
+ * primary indicator. Keyboard-navigable (←/→ on main image to cycle; Enter
+ * to open lightbox; Esc to close lightbox).
+ *
+ * The carousel is presentational: it fires callbacks for actions but does
+ * NOT own upload / delete / set-primary state. Consumers wire those to
+ * their mutation hooks.
+ *
+ * Lightbox is rendered inline (not portaled) — for full-page lightbox with
+ * focus trapping, wrap the carousel in a Radix Dialog in the consumer.
+ */
+export function ImageCarousel({ images, activeId: controlledActiveId, onActiveChange, onReorder, onAddClick, emptyState, className, }) {
+    const [internalActiveId, setInternalActiveId] = React.useState(() => controlledActiveId ?? images[0]?.id);
+    const activeId = controlledActiveId ?? internalActiveId;
+    const setActiveId = React.useCallback((id) => {
+        if (onActiveChange)
+            onActiveChange(id);
+        else
+            setInternalActiveId(id);
+    }, [onActiveChange]);
+    const [lightboxOpen, setLightboxOpen] = React.useState(false);
+    const activeIndex = images.findIndex((img) => img.id === activeId);
+    const activeImage = activeIndex >= 0 ? images[activeIndex] : images[0];
+    const goPrev = React.useCallback(() => {
+        if (images.length < 2 || activeIndex < 0)
+            return;
+        const prev = activeIndex === 0 ? images.length - 1 : activeIndex - 1;
+        setActiveId(images[prev].id);
+    }, [activeIndex, images, setActiveId]);
+    const goNext = React.useCallback(() => {
+        if (images.length < 2 || activeIndex < 0)
+            return;
+        const next = activeIndex === images.length - 1 ? 0 : activeIndex + 1;
+        setActiveId(images[next].id);
+    }, [activeIndex, images, setActiveId]);
+    React.useEffect(() => {
+        if (!lightboxOpen)
+            return;
+        const handler = (e) => {
+            if (e.key === "Escape")
+                setLightboxOpen(false);
+            if (e.key === "ArrowLeft")
+                goPrev();
+            if (e.key === "ArrowRight")
+                goNext();
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [lightboxOpen, goPrev, goNext]);
+    if (images.length === 0 || !activeImage) {
+        return _jsx("div", { className: cn("flex flex-col", className), children: emptyState });
+    }
+    return (_jsxs("div", { className: cn("flex flex-col gap-3", className), children: [_jsxs("div", { className: "group relative overflow-hidden rounded-[22px] bg-muted", children: [_jsx("div", { className: "relative aspect-[16/10]", children: _jsx("img", { src: activeImage.url, alt: activeImage.altText ?? "", width: activeImage.width ?? undefined, height: activeImage.height ?? undefined, className: "size-full cursor-zoom-in object-cover", onClick: () => setLightboxOpen(true), onKeyDown: (e) => {
+                                if (e.key === "Enter" || e.key === " ") {
+                                    e.preventDefault();
+                                    setLightboxOpen(true);
+                                }
+                            }, tabIndex: 0 }) }), images.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: goPrev, "aria-label": "Previous image", className: "absolute left-3 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-background/90 text-foreground opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100", children: _jsx(ArrowLeftIcon, { className: "size-4", "aria-hidden": true }) }), _jsx("button", { type: "button", onClick: goNext, "aria-label": "Next image", className: "absolute right-3 top-1/2 flex size-10 -translate-y-1/2 items-center justify-center rounded-full bg-background/90 text-foreground opacity-0 backdrop-blur-md transition-opacity group-hover:opacity-100", children: _jsx(ArrowRightIcon, { className: "size-4", "aria-hidden": true }) })] }))] }), _jsxs("div", { className: "flex items-center gap-2", children: [onReorder ? (_jsx(Reorder.Group, { axis: "x", values: images, onReorder: (newImages) => onReorder(newImages.map((i) => i.id)), className: "flex flex-1 items-center gap-2 overflow-x-auto", children: images.map((img) => (_jsxs(Reorder.Item, { value: img, className: cn("relative flex h-12 w-16 shrink-0 cursor-grab overflow-hidden rounded-lg border-2 transition-all", activeId === img.id
+                                ? "border-primary"
+                                : "border-border/40 hover:border-border"), onClick: () => setActiveId(img.id), children: [_jsx("img", { src: img.url, alt: "", className: "size-full object-cover" }), img.isPrimary && (_jsx("div", { className: "absolute left-1 top-1 rounded-full bg-primary p-0.5", children: _jsx(StarIcon, { className: "size-2.5 text-primary-foreground", "aria-hidden": true }) }))] }, img.id))) })) : (_jsx("div", { className: "flex flex-1 items-center gap-2 overflow-x-auto", children: images.map((img) => (_jsxs("button", { type: "button", onClick: () => setActiveId(img.id), className: cn("relative flex h-12 w-16 shrink-0 overflow-hidden rounded-lg border-2", activeId === img.id ? "border-primary" : "border-border/40"), children: [_jsx("img", { src: img.url, alt: "", className: "size-full object-cover" }), img.isPrimary && (_jsx("div", { className: "absolute left-1 top-1 rounded-full bg-primary p-0.5", children: _jsx(StarIcon, { className: "size-2.5 text-primary-foreground", "aria-hidden": true }) }))] }, img.id))) })), onAddClick && (_jsx("button", { type: "button", onClick: onAddClick, className: "flex h-12 w-16 shrink-0 items-center justify-center rounded-lg border-2 border-dashed border-border/60 text-muted-foreground transition-colors hover:border-primary/50 hover:text-primary", "aria-label": "Add image", children: "+" }))] }), lightboxOpen && (_jsxs("div", { className: "fixed inset-0 z-[100] flex items-center justify-center bg-background/90 p-8 backdrop-blur-xl", onClick: () => setLightboxOpen(false), role: "dialog", "aria-modal": "true", "aria-label": "Image preview", children: [_jsx("button", { type: "button", onClick: (e) => {
+                            e.stopPropagation();
+                            setLightboxOpen(false);
+                        }, className: "absolute right-6 top-6 flex size-10 items-center justify-center rounded-full bg-background text-foreground shadow-lg", "aria-label": "Close preview", children: _jsx(XMarkIcon, { className: "size-5", "aria-hidden": true }) }), _jsx("img", { src: activeImage.url, alt: activeImage.altText ?? "", className: "max-h-full max-w-full rounded-xl object-contain shadow-2xl", onClick: (e) => e.stopPropagation() }), images.length > 1 && (_jsxs(_Fragment, { children: [_jsx("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    goPrev();
+                                }, "aria-label": "Previous", className: "absolute left-6 top-1/2 flex size-12 -translate-y-1/2 items-center justify-center rounded-full bg-background text-foreground shadow-lg", children: _jsx(ArrowLeftIcon, { className: "size-5", "aria-hidden": true }) }), _jsx("button", { type: "button", onClick: (e) => {
+                                    e.stopPropagation();
+                                    goNext();
+                                }, "aria-label": "Next", className: "absolute right-6 top-1/2 flex size-12 -translate-y-1/2 items-center justify-center rounded-full bg-background text-foreground shadow-lg", children: _jsx(ArrowRightIcon, { className: "size-5", "aria-hidden": true }) })] }))] }))] }));
+}
+//# sourceMappingURL=image-carousel.js.map

package/dist/components/image-carousel.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-carousel.js","sourceRoot":"","sources":["../../src/components/image-carousel.tsx"],"names":[],"mappings":"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"}

package/dist/components/image-carousel.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { ImageCarousel } from "./image-carousel";
+declare const meta: {
+    title: string;
+    component: typeof ImageCarousel;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const SingleImage: Story;
+export declare const Empty: Story;
+//# sourceMappingURL=image-carousel.stories.d.ts.map

package/dist/components/image-carousel.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-carousel.stories.d.ts","sourceRoot":"","sources":["../../src/components/image-carousel.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,aAAa,EAAsB,MAAM,kBAAkB,CAAC;AAErE,QAAA,MAAM,IAAI;;;;;;;;;;;CAY4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AA4CnC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAOzB,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAgBnB,CAAC"}

package/dist/components/image-carousel.stories.js

@@ -0,0 +1,62 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { ImageCarousel } from "./image-carousel";
+const meta = {
+    title: "Components/ImageCarousel",
+    component: ImageCarousel,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "Image carousel with thumbnail strip, drag-reorder, lightbox preview, and primary indicator. Keyboard-navigable. Consumers wire upload/delete/set-primary to their mutation hooks — the carousel is presentational only.",
+            },
+        },
+    },
+};
+export default meta;
+const seedImages = [
+    {
+        id: "1",
+        url: "https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?w=1200&q=80",
+        altText: "Sourdough boule",
+        isPrimary: true,
+        kindLabel: "Front",
+    },
+    {
+        id: "2",
+        url: "https://images.unsplash.com/photo-1509440159596-0249088772ff?w=1200&q=80",
+        altText: "Bakery interior",
+        kindLabel: "Lifestyle",
+    },
+    {
+        id: "3",
+        url: "https://images.unsplash.com/photo-1555507036-ab1f4038808a?w=1200&q=80",
+        altText: "Rising dough",
+        kindLabel: "Back",
+    },
+];
+function DefaultExample() {
+    const [images, setImages] = useState(seedImages);
+    return (_jsx("div", { className: "max-w-xl", children: _jsx(ImageCarousel, { images: images, onReorder: (ids) => {
+                const map = new Map(images.map((i) => [i.id, i]));
+                setImages(ids.map((id) => map.get(id)).filter(Boolean));
+            }, onAddClick: () => window.alert("open upload"), onSetPrimary: (id) => setImages(images.map((i) => ({ ...i, isPrimary: i.id === id }))), onDelete: (id) => setImages(images.filter((i) => i.id !== id)) }) }));
+}
+export const Default = {
+    args: { images: seedImages },
+    render: () => _jsx(DefaultExample, {}),
+};
+export const SingleImage = {
+    args: { images: [seedImages[0]] },
+    render: () => (_jsx("div", { className: "max-w-xl", children: _jsx(ImageCarousel, { images: [seedImages[0]], onAddClick: () => { } }) })),
+};
+export const Empty = {
+    args: {
+        images: [],
+        emptyState: (_jsx("div", { className: "flex aspect-[16/10] items-center justify-center rounded-[22px] border-2 border-dashed border-border/60 bg-muted/20", children: _jsx("p", { className: "text-sm text-muted-foreground", children: "No images yet" }) })),
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "max-w-xl", children: _jsx(Story, {}) })),
+    ],
+};
+//# sourceMappingURL=image-carousel.stories.js.map

package/dist/components/image-carousel.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image-carousel.stories.js","sourceRoot":"","sources":["../../src/components/image-carousel.stories.tsx"],"names":[],"mappings":"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"}

package/dist/components/product-card.d.ts

@@ -0,0 +1,42 @@
+import * as React from "react";
+export interface ProductCardProps {
+    /**
+     * Primary image for the card. When null, `placeholder` is rendered.
+     * width/height come from the backend metadata jsonb (for layout-shift-free
+     * rendering).
+     */
+    image?: {
+        url: string;
+        altText?: string | null;
+        width?: number | null;
+        height?: number | null;
+    } | null;
+    /** Placeholder element rendered in the cover frame when `image` is null. */
+    placeholder?: React.ReactNode;
+    /** Element slot overlaid top-left of the cover (e.g. status pill). */
+    statusSlot?: React.ReactNode;
+    /** Element slot in top-right of the cover — fades in on hover. */
+    kebabSlot?: React.ReactNode;
+    /** Element slot for a stack overlay (e.g. CardStack badge). */
+    stackOverlaySlot?: React.ReactNode;
+    /** Card title. */
+    title: React.ReactNode;
+    /** Card subtitle (clamped to 2 lines). */
+    subtitle?: React.ReactNode;
+    /** Footer slot rendered below a gradient divider. */
+    footerSlot?: React.ReactNode;
+    /** Card body click handler. */
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * Generic media card with slots for image, status, kebab menu, stack overlay,
+ * title, subtitle, and footer. Used by the producer portfolio grid, importer
+ * offer cards (future), and public profile bento grid (future).
+ *
+ * Hover physics: translate-y -1, image scale 1.06, kebab fades in, border
+ * brightens with brand tint. Matches the glassmorphism aesthetic of the
+ * producer dashboard's match + partnership cards.
+ */
+export declare function ProductCard({ image, placeholder, statusSlot, kebabSlot, stackOverlaySlot, title, subtitle, footerSlot, onClick, className, }: ProductCardProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-card.d.ts.map

package/dist/components/product-card.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.d.ts","sourceRoot":"","sources":["../../src/components/product-card.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,gBAAgB;IAC/B;;;;OAIG;IACH,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACxB,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;QACtB,MAAM,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACxB,GAAG,IAAI,CAAC;IACT,4EAA4E;IAC5E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,sEAAsE;IACtE,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,kEAAkE;IAClE,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+DAA+D;IAC/D,gBAAgB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACnC,kBAAkB;IAClB,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,0CAA0C;IAC1C,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,qDAAqD;IACrD,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,+BAA+B;IAC/B,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;GAQG;AACH,wBAAgB,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,GACV,EAAE,gBAAgB,2CAgElB"}

package/dist/components/product-card.js

@@ -0,0 +1,20 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+/**
+ * Generic media card with slots for image, status, kebab menu, stack overlay,
+ * title, subtitle, and footer. Used by the producer portfolio grid, importer
+ * offer cards (future), and public profile bento grid (future).
+ *
+ * Hover physics: translate-y -1, image scale 1.06, kebab fades in, border
+ * brightens with brand tint. Matches the glassmorphism aesthetic of the
+ * producer dashboard's match + partnership cards.
+ */
+export function ProductCard({ image, placeholder, statusSlot, kebabSlot, stackOverlaySlot, title, subtitle, footerSlot, onClick, className, }) {
+    return (_jsxs("div", { onClick: onClick, onKeyDown: (e) => {
+            if (onClick && (e.key === "Enter" || e.key === " ")) {
+                e.preventDefault();
+                onClick();
+            }
+        }, role: onClick ? "button" : undefined, tabIndex: onClick ? 0 : undefined, className: cn("group relative overflow-hidden rounded-[28px] border border-border/60 bg-card backdrop-blur-md transition-all duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]", "shadow-sm hover:-translate-y-1 hover:border-primary/20 hover:shadow-xl", onClick && "cursor-pointer", className), children: [_jsxs("div", { className: "relative m-2 overflow-hidden rounded-[22px]", children: [_jsx("div", { className: "relative aspect-[16/10] bg-muted", children: image ? (_jsx("img", { src: image.url, alt: image.altText ?? "", width: image.width ?? undefined, height: image.height ?? undefined, className: "size-full object-cover transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-[1.06]", loading: "lazy" })) : (_jsx("div", { className: "size-full transition-transform duration-500 ease-[cubic-bezier(0.16,1,0.3,1)] group-hover:scale-[1.04]", children: placeholder })) }), statusSlot && _jsx("div", { className: "absolute left-3 top-3 z-10", children: statusSlot }), stackOverlaySlot && (_jsx("div", { className: "absolute right-3 top-3 z-20", children: stackOverlaySlot })), kebabSlot && (_jsx("div", { className: "absolute right-3 top-3 z-10 translate-x-1 opacity-0 transition-all duration-200 group-hover:translate-x-0 group-hover:opacity-100", children: kebabSlot }))] }), _jsxs("div", { className: "px-5 pb-5 pt-1", children: [_jsx("h3", { className: "text-lg font-bold leading-tight tracking-tight text-foreground", children: title }), subtitle && (_jsx("p", { className: "mt-1 line-clamp-2 text-sm text-muted-foreground", children: subtitle })), footerSlot && (_jsxs(_Fragment, { children: [_jsx("div", { className: "my-3 h-px bg-gradient-to-r from-transparent via-primary/15 to-transparent" }), footerSlot] }))] })] }));
+}
+//# sourceMappingURL=product-card.js.map

package/dist/components/product-card.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.js","sourceRoot":"","sources":["../../src/components/product-card.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAiClC;;;;;;;;GAQG;AACH,MAAM,UAAU,WAAW,CAAC,EAC1B,KAAK,EACL,WAAW,EACX,UAAU,EACV,SAAS,EACT,gBAAgB,EAChB,KAAK,EACL,QAAQ,EACR,UAAU,EACV,OAAO,EACP,SAAS,GACQ;IACjB,OAAO,CACL,eACE,OAAO,EAAE,OAAO,EAChB,SAAS,EAAE,CAAC,CAAC,EAAE,EAAE;YACf,IAAI,OAAO,IAAI,CAAC,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,CAAC,EAAE,CAAC;gBACpD,CAAC,CAAC,cAAc,EAAE,CAAC;gBACnB,OAAO,EAAE,CAAC;YACZ,CAAC;QACH,CAAC,EACD,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,EACpC,QAAQ,EAAE,OAAO,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACjC,SAAS,EAAE,EAAE,CACX,8JAA8J,EAC9J,wEAAwE,EACxE,OAAO,IAAI,gBAAgB,EAC3B,SAAS,CACV,aAGD,eAAK,SAAS,EAAC,6CAA6C,aAC1D,cAAK,SAAS,EAAC,kCAAkC,YAC9C,KAAK,CAAC,CAAC,CAAC,CACP,cACE,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,KAAK,CAAC,OAAO,IAAI,EAAE,EACxB,KAAK,EAAE,KAAK,CAAC,KAAK,IAAI,SAAS,EAC/B,MAAM,EAAE,KAAK,CAAC,MAAM,IAAI,SAAS,EACjC,SAAS,EAAC,qHAAqH,EAC/H,OAAO,EAAC,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,cAAK,SAAS,EAAC,wGAAwG,YACpH,WAAW,GACR,CACP,GACG,EACL,UAAU,IAAI,cAAK,SAAS,EAAC,4BAA4B,YAAE,UAAU,GAAO,EAC5E,gBAAgB,IAAI,CACnB,cAAK,SAAS,EAAC,6BAA6B,YAAE,gBAAgB,GAAO,CACtE,EACA,SAAS,IAAI,CACZ,cAAK,SAAS,EAAC,mIAAmI,YAC/I,SAAS,GACN,CACP,IACG,EAEN,eAAK,SAAS,EAAC,gBAAgB,aAC7B,aAAI,SAAS,EAAC,gEAAgE,YAC3E,KAAK,GACH,EACJ,QAAQ,IAAI,CACX,YAAG,SAAS,EAAC,iDAAiD,YAAE,QAAQ,GAAK,CAC9E,EACA,UAAU,IAAI,CACb,8BACE,cAAK,SAAS,EAAC,2EAA2E,GAAG,EAC5F,UAAU,IACV,CACJ,IACG,IACF,CACP,CAAC;AACJ,CAAC"}

package/dist/components/product-card.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { ProductCard } from "./product-card";
+declare const meta: {
+    title: string;
+    component: typeof ProductCard;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const WithPlaceholder: Story;
+export declare const Draft: Story;
+//# sourceMappingURL=product-card.stories.d.ts.map

package/dist/components/product-card.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.stories.d.ts","sourceRoot":"","sources":["../../src/components/product-card.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,QAAA,MAAM,IAAI;;;;;;;;;;;CAY0B,CAAC;AAErC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAgCrB,CAAC;AAEF,eAAO,MAAM,eAAe,EAAE,KA6B7B,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,KAuBnB,CAAC"}

package/dist/components/product-card.stories.js

@@ -0,0 +1,59 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProductCard } from "./product-card";
+const meta = {
+    title: "Components/ProductCard",
+    component: ProductCard,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "Generic media card with slots for image, status pill, kebab menu, stack overlay, title, subtitle, and footer. Used on the producer portfolio grid and other product-centric surfaces.",
+            },
+        },
+    },
+};
+export default meta;
+export const Default = {
+    args: {
+        image: {
+            url: "https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?w=800&q=80",
+            altText: "Sourdough boule",
+            width: 800,
+            height: 500,
+        },
+        title: "Sourdough Boule",
+        subtitle: "Bread · Sourdough · 1kg loaf",
+        statusSlot: (_jsx("span", { className: "rounded-full bg-green-100 px-3 py-1 text-xs font-semibold text-green-800", children: "Active" })),
+        footerSlot: (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-base font-bold", children: "$8.50" }), _jsx("span", { className: "rounded-full bg-primary/10 px-2.5 py-1 text-xs font-semibold text-primary", children: "3 matches" })] })),
+        onClick: () => window.alert("card clicked"),
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-80", children: _jsx(Story, {}) })),
+    ],
+};
+export const WithPlaceholder = {
+    args: {
+        image: null,
+        placeholder: (_jsx("div", { className: "flex size-full items-center justify-center bg-gradient-to-br from-teal-600 to-teal-800", children: _jsx("span", { className: "text-7xl font-bold text-white/80", children: "S" }) })),
+        title: "Sourdough Boule",
+        subtitle: "Bread · Sourdough",
+        statusSlot: (_jsx("span", { className: "rounded-full bg-yellow-100 px-3 py-1 text-xs font-semibold text-yellow-800", children: "Needs Review" })),
+        footerSlot: (_jsxs("div", { className: "flex items-center justify-between", children: [_jsx("span", { className: "text-base font-bold", children: "$8.50" }), _jsx("span", { className: "text-xs text-muted-foreground", children: "No matches yet" })] })),
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-80", children: _jsx(Story, {}) })),
+    ],
+};
+export const Draft = {
+    args: {
+        image: null,
+        placeholder: (_jsx("div", { className: "flex size-full items-center justify-center bg-gradient-to-br from-slate-400 to-slate-600", children: _jsx("span", { className: "text-7xl font-bold text-white/80", children: "H" }) })),
+        title: "Honey Wheat Loaf",
+        subtitle: "Bread · Whole wheat",
+        statusSlot: (_jsx("span", { className: "rounded-full bg-slate-200 px-3 py-1 text-xs font-semibold text-slate-700", children: "Draft" })),
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-80", children: _jsx(Story, {}) })),
+    ],
+};
+//# sourceMappingURL=product-card.stories.js.map

package/dist/components/product-card.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-card.stories.js","sourceRoot":"","sources":["../../src/components/product-card.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAE7C,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,wBAAwB;IAC/B,SAAS,EAAE,WAAW;IACtB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,uLAAuL;aAC1L;SACF;KACF;CACiC,CAAC;AAErC,eAAe,IAAI,CAAC;AAGpB,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE;YACL,GAAG,EAAE,yEAAyE;YAC9E,OAAO,EAAE,iBAAiB;YAC1B,KAAK,EAAE,GAAG;YACV,MAAM,EAAE,GAAG;SACZ;QACD,KAAK,EAAE,iBAAiB;QACxB,QAAQ,EAAE,8BAA8B;QACxC,UAAU,EAAE,CACV,eAAM,SAAS,EAAC,0EAA0E,uBAEnF,CACR;QACD,UAAU,EAAE,CACV,eAAK,SAAS,EAAC,mCAAmC,aAChD,eAAM,SAAS,EAAC,qBAAqB,sBAAa,EAClD,eAAM,SAAS,EAAC,2EAA2E,0BAEpF,IACH,CACP;QACD,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,cAAc,CAAC;KAC5C;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,eAAe,GAAU;IACpC,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,CACX,cAAK,SAAS,EAAC,wFAAwF,YACrG,eAAM,SAAS,EAAC,kCAAkC,kBAAS,GACvD,CACP;QACD,KAAK,EAAE,iBAAiB;QACxB,QAAQ,EAAE,mBAAmB;QAC7B,UAAU,EAAE,CACV,eAAM,SAAS,EAAC,4EAA4E,6BAErF,CACR;QACD,UAAU,EAAE,CACV,eAAK,SAAS,EAAC,mCAAmC,aAChD,eAAM,SAAS,EAAC,qBAAqB,sBAAa,EAClD,eAAM,SAAS,EAAC,+BAA+B,+BAAsB,IACjE,CACP;KACF;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,KAAK,EAAE,IAAI;QACX,WAAW,EAAE,CACX,cAAK,SAAS,EAAC,0FAA0F,YACvG,eAAM,SAAS,EAAC,kCAAkC,kBAAS,GACvD,CACP;QACD,KAAK,EAAE,kBAAkB;QACzB,QAAQ,EAAE,qBAAqB;QAC/B,UAAU,EAAE,CACV,eAAM,SAAS,EAAC,0EAA0E,sBAEnF,CACR;KACF;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,SAAS,EAAC,MAAM,YACnB,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC"}

package/dist/components/product-list-row.d.ts

@@ -0,0 +1,29 @@
+import * as React from "react";
+export interface ProductListRowProps {
+    image?: {
+        url: string;
+        altText?: string | null;
+    } | null;
+    /** Placeholder element rendered in the thumbnail when `image` is null. */
+    placeholder?: React.ReactNode;
+    /** Element slot shown before the title (e.g. status pill). */
+    statusSlot?: React.ReactNode;
+    title: React.ReactNode;
+    subtitle?: React.ReactNode;
+    /** Right-aligned trailing content (price, matches badge, etc.). */
+    trailingSlot?: React.ReactNode;
+    /** Always-visible kebab menu slot (unlike the card's fade-on-hover kebab). */
+    kebabSlot?: React.ReactNode;
+    /** When true, renders with a left indent + teal guide line. */
+    indent?: boolean;
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * List-view counterpart to `ProductCard`. Same data, horizontal row layout.
+ * When rendering sibling variants that share a parent beverage, pass
+ * `indent` to shift the row right and render a thin teal guide line
+ * connecting it to the parent.
+ */
+export declare function ProductListRow({ image, placeholder, statusSlot, title, subtitle, trailingSlot, kebabSlot, indent, onClick, className, }: ProductListRowProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=product-list-row.d.ts.map

package/dist/components/product-list-row.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-list-row.d.ts","sourceRoot":"","sources":["../../src/components/product-list-row.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,MAAM,WAAW,mBAAmB;IAClC,KAAK,CAAC,EAAE;QACN,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;KACzB,GAAG,IAAI,CAAC;IACT,0EAA0E;IAC1E,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,8DAA8D;IAC9D,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B,KAAK,EAAE,KAAK,CAAC,SAAS,CAAC;IACvB,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC3B,mEAAmE;IACnE,YAAY,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC/B,8EAA8E;IAC9E,SAAS,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC5B,+DAA+D;IAC/D,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;GAKG;AACH,wBAAgB,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,MAAc,EACd,OAAO,EACP,SAAS,GACV,EAAE,mBAAmB,2CAmCrB"}

package/dist/components/product-list-row.js

@@ -0,0 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cn } from "../lib/utils";
+/**
+ * List-view counterpart to `ProductCard`. Same data, horizontal row layout.
+ * When rendering sibling variants that share a parent beverage, pass
+ * `indent` to shift the row right and render a thin teal guide line
+ * connecting it to the parent.
+ */
+export function ProductListRow({ image, placeholder, statusSlot, title, subtitle, trailingSlot, kebabSlot, indent = false, onClick, className, }) {
+    return (_jsxs("div", { className: cn("relative flex items-center gap-4 rounded-2xl border border-border/60 bg-card p-3 transition-all hover:bg-accent/20", indent &&
+            "ml-9 before:absolute before:-left-4 before:top-0 before:h-full before:w-0.5 before:bg-primary/20", onClick && "cursor-pointer", className), onClick: onClick, children: [_jsx("div", { className: "relative size-14 shrink-0 overflow-hidden rounded-xl bg-muted", children: image ? (_jsx("img", { src: image.url, alt: image.altText ?? "", className: "size-full object-cover", loading: "lazy" })) : (placeholder) }), statusSlot && _jsx("div", { className: "shrink-0", children: statusSlot }), _jsxs("div", { className: "min-w-0 flex-1", children: [_jsx("p", { className: "truncate text-sm font-semibold text-foreground", children: title }), subtitle && (_jsx("p", { className: "truncate text-xs text-muted-foreground", children: subtitle }))] }), trailingSlot && _jsx("div", { className: "shrink-0", children: trailingSlot }), kebabSlot && _jsx("div", { className: "shrink-0", children: kebabSlot })] }));
+}
+//# sourceMappingURL=product-list-row.js.map

package/dist/components/product-list-row.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-list-row.js","sourceRoot":"","sources":["../../src/components/product-list-row.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAuBlC;;;;;GAKG;AACH,MAAM,UAAU,cAAc,CAAC,EAC7B,KAAK,EACL,WAAW,EACX,UAAU,EACV,KAAK,EACL,QAAQ,EACR,YAAY,EACZ,SAAS,EACT,MAAM,GAAG,KAAK,EACd,OAAO,EACP,SAAS,GACW;IACpB,OAAO,CACL,eACE,SAAS,EAAE,EAAE,CACX,oHAAoH,EACpH,MAAM;YACJ,kGAAkG,EACpG,OAAO,IAAI,gBAAgB,EAC3B,SAAS,CACV,EACD,OAAO,EAAE,OAAO,aAEhB,cAAK,SAAS,EAAC,+DAA+D,YAC3E,KAAK,CAAC,CAAC,CAAC,CACP,cACE,GAAG,EAAE,KAAK,CAAC,GAAG,EACd,GAAG,EAAE,KAAK,CAAC,OAAO,IAAI,EAAE,EACxB,SAAS,EAAC,wBAAwB,EAClC,OAAO,EAAC,MAAM,GACd,CACH,CAAC,CAAC,CAAC,CACF,WAAW,CACZ,GACG,EACL,UAAU,IAAI,cAAK,SAAS,EAAC,UAAU,YAAE,UAAU,GAAO,EAC3D,eAAK,SAAS,EAAC,gBAAgB,aAC7B,YAAG,SAAS,EAAC,gDAAgD,YAAE,KAAK,GAAK,EACxE,QAAQ,IAAI,CACX,YAAG,SAAS,EAAC,wCAAwC,YAAE,QAAQ,GAAK,CACrE,IACG,EACL,YAAY,IAAI,cAAK,SAAS,EAAC,UAAU,YAAE,YAAY,GAAO,EAC9D,SAAS,IAAI,cAAK,SAAS,EAAC,UAAU,YAAE,SAAS,GAAO,IACrD,CACP,CAAC;AACJ,CAAC"}

package/dist/components/product-list-row.stories.d.ts

@@ -0,0 +1,19 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { ProductListRow } from "./product-list-row";
+declare const meta: {
+    title: string;
+    component: typeof ProductListRow;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ParentAndSibling: Story;
+//# sourceMappingURL=product-list-row.stories.d.ts.map

package/dist/components/product-list-row.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-list-row.stories.d.ts","sourceRoot":"","sources":["../../src/components/product-list-row.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,QAAA,MAAM,IAAI;;;;;;;;;;;CAY6B,CAAC;AAExC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAOnC,eAAO,MAAM,OAAO,EAAE,KAoBrB,CAAC;AAEF,eAAO,MAAM,gBAAgB,EAAE,KAyC9B,CAAC"}

package/dist/components/product-list-row.stories.js

@@ -0,0 +1,37 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ProductListRow } from "./product-list-row";
+const meta = {
+    title: "Components/ProductListRow",
+    component: ProductListRow,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "List-view counterpart to ProductCard. Same data, horizontal layout. `indent` prop renders a teal guide line for sibling-variant grouping.",
+            },
+        },
+    },
+};
+export default meta;
+const sharedImage = {
+    url: "https://images.unsplash.com/photo-1506377247377-2a5b3b417ebb?w=200&q=80",
+    altText: "Sourdough",
+};
+export const Default = {
+    args: {
+        image: sharedImage,
+        title: "Sourdough Boule",
+        subtitle: "Bread · 1kg loaf · 72-hour fermented",
+        statusSlot: (_jsx("span", { className: "rounded-full bg-green-100 px-2.5 py-1 text-xs font-semibold text-green-800", children: "Active" })),
+        trailingSlot: _jsx("span", { className: "text-sm font-bold", children: "$8.50" }),
+        onClick: () => window.alert("row clicked"),
+    },
+    decorators: [
+        (Story) => (_jsx("div", { className: "w-[560px]", children: _jsx(Story, {}) })),
+    ],
+};
+export const ParentAndSibling = {
+    args: { title: "" },
+    render: () => (_jsxs("div", { className: "w-[560px] space-y-2", children: [_jsx(ProductListRow, { image: sharedImage, title: "Ch\u00E2teau Margaux 2018", subtitle: "Red Wine \u00B7 Bordeaux \u00B7 750ml", statusSlot: _jsx("span", { className: "rounded-full bg-green-100 px-2.5 py-1 text-xs font-semibold text-green-800", children: "Active" }), trailingSlot: _jsx("span", { className: "text-sm font-bold", children: "\u20AC420" }) }), _jsx(ProductListRow, { indent: true, image: sharedImage, title: "Ch\u00E2teau Margaux 2019", subtitle: "Red Wine \u00B7 Bordeaux \u00B7 750ml", statusSlot: _jsx("span", { className: "rounded-full bg-green-100 px-2.5 py-1 text-xs font-semibold text-green-800", children: "Active" }), trailingSlot: _jsx("span", { className: "text-sm font-bold", children: "\u20AC385" }) }), _jsx(ProductListRow, { indent: true, image: sharedImage, title: "Ch\u00E2teau Margaux 2020", subtitle: "Red Wine \u00B7 Bordeaux \u00B7 750ml", statusSlot: _jsx("span", { className: "rounded-full bg-yellow-100 px-2.5 py-1 text-xs font-semibold text-yellow-800", children: "Needs Review" }), trailingSlot: _jsx("span", { className: "text-sm font-bold", children: "\u20AC360" }) })] })),
+};
+//# sourceMappingURL=product-list-row.stories.js.map

package/dist/components/product-list-row.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"product-list-row.stories.js","sourceRoot":"","sources":["../../src/components/product-list-row.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,cAAc,EAAE,MAAM,oBAAoB,CAAC;AAEpD,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,2BAA2B;IAClC,SAAS,EAAE,cAAc;IACzB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,2IAA2I;aAC9I;SACF;KACF;CACoC,CAAC;AAExC,eAAe,IAAI,CAAC;AAGpB,MAAM,WAAW,GAAG;IAClB,GAAG,EAAE,yEAAyE;IAC9E,OAAO,EAAE,WAAW;CACrB,CAAC;AAEF,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE;QACJ,KAAK,EAAE,WAAW;QAClB,KAAK,EAAE,iBAAiB;QACxB,QAAQ,EAAE,sCAAsC;QAChD,UAAU,EAAE,CACV,eAAM,SAAS,EAAC,4EAA4E,uBAErF,CACR;QACD,YAAY,EAAE,eAAM,SAAS,EAAC,mBAAmB,sBAAa;QAC9D,OAAO,EAAE,GAAG,EAAE,CAAC,MAAM,CAAC,KAAK,CAAC,aAAa,CAAC;KAC3C;IACD,UAAU,EAAE;QACV,CAAC,KAAK,EAAE,EAAE,CAAC,CACT,cAAK,SAAS,EAAC,WAAW,YACxB,KAAC,KAAK,KAAG,GACL,CACP;KACF;CACF,CAAC;AAEF,MAAM,CAAC,MAAM,gBAAgB,GAAU;IACrC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE;IACnB,MAAM,EAAE,GAAG,EAAE,CAAC,CACZ,eAAK,SAAS,EAAC,qBAAqB,aAClC,KAAC,cAAc,IACb,KAAK,EAAE,WAAW,EAClB,KAAK,EAAC,2BAAsB,EAC5B,QAAQ,EAAC,uCAA6B,EACtC,UAAU,EACR,eAAM,SAAS,EAAC,4EAA4E,uBAErF,EAET,YAAY,EAAE,eAAM,SAAS,EAAC,mBAAmB,0BAAY,GAC7D,EACF,KAAC,cAAc,IACb,MAAM,QACN,KAAK,EAAE,WAAW,EAClB,KAAK,EAAC,2BAAsB,EAC5B,QAAQ,EAAC,uCAA6B,EACtC,UAAU,EACR,eAAM,SAAS,EAAC,4EAA4E,uBAErF,EAET,YAAY,EAAE,eAAM,SAAS,EAAC,mBAAmB,0BAAY,GAC7D,EACF,KAAC,cAAc,IACb,MAAM,QACN,KAAK,EAAE,WAAW,EAClB,KAAK,EAAC,2BAAsB,EAC5B,QAAQ,EAAC,uCAA6B,EACtC,UAAU,EACR,eAAM,SAAS,EAAC,8EAA8E,6BAEvF,EAET,YAAY,EAAE,eAAM,SAAS,EAAC,mBAAmB,0BAAY,GAC7D,IACE,CACP;CACF,CAAC"}

package/dist/components/view-toggle.d.ts

@@ -0,0 +1,14 @@
+export interface ViewToggleProps {
+    value: "grid" | "list";
+    onValueChange: (value: "grid" | "list") => void;
+    className?: string;
+}
+/**
+ * Segmented grid/list view toggle. Controlled.
+ *
+ * Used to switch between card grid and list layouts on any content surface
+ * that supports both. Persists externally via localStorage or query params —
+ * the component itself is stateless.
+ */
+export declare function ViewToggle({ value, onValueChange, className }: ViewToggleProps): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=view-toggle.d.ts.map

package/dist/components/view-toggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-toggle.d.ts","sourceRoot":"","sources":["../../src/components/view-toggle.tsx"],"names":[],"mappings":"AAIA,MAAM,WAAW,eAAe;IAC9B,KAAK,EAAE,MAAM,GAAG,MAAM,CAAC;IACvB,aAAa,EAAE,CAAC,KAAK,EAAE,MAAM,GAAG,MAAM,KAAK,IAAI,CAAC;IAChD,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAE,EAAE,eAAe,2CA6C9E"}

package/dist/components/view-toggle.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ListBulletIcon, Squares2X2Icon } from "@heroicons/react/20/solid";
+import { cn } from "../lib/utils";
+/**
+ * Segmented grid/list view toggle. Controlled.
+ *
+ * Used to switch between card grid and list layouts on any content surface
+ * that supports both. Persists externally via localStorage or query params —
+ * the component itself is stateless.
+ */
+export function ViewToggle({ value, onValueChange, className }) {
+    return (_jsxs("div", { role: "tablist", "aria-label": "View mode", className: cn("relative inline-flex items-center gap-0.5 rounded-xl border border-border/60 bg-muted/40 p-0.5 backdrop-blur-md", className), children: [_jsx("div", { "aria-hidden": true, className: cn("absolute top-0.5 bottom-0.5 w-[calc(50%-0.125rem)] rounded-lg bg-background shadow-sm transition-transform duration-250 ease-[cubic-bezier(0.16,1,0.3,1)]", value === "list" && "translate-x-[calc(100%+0.125rem)]") }), _jsxs("button", { type: "button", role: "tab", "aria-selected": value === "grid", onClick: () => onValueChange("grid"), className: cn("relative z-10 flex size-8 items-center justify-center rounded-lg transition-colors", value === "grid" ? "text-primary" : "text-muted-foreground hover:text-foreground"), children: [_jsx(Squares2X2Icon, { className: "size-4", "aria-hidden": true }), _jsx("span", { className: "sr-only", children: "Grid view" })] }), _jsxs("button", { type: "button", role: "tab", "aria-selected": value === "list", onClick: () => onValueChange("list"), className: cn("relative z-10 flex size-8 items-center justify-center rounded-lg transition-colors", value === "list" ? "text-primary" : "text-muted-foreground hover:text-foreground"), children: [_jsx(ListBulletIcon, { className: "size-4", "aria-hidden": true }), _jsx("span", { className: "sr-only", children: "List view" })] })] }));
+}
+//# sourceMappingURL=view-toggle.js.map

package/dist/components/view-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-toggle.js","sourceRoot":"","sources":["../../src/components/view-toggle.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,2BAA2B,CAAC;AAE3E,OAAO,EAAE,EAAE,EAAE,MAAM,cAAc,CAAC;AAQlC;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAC,EAAE,KAAK,EAAE,aAAa,EAAE,SAAS,EAAmB;IAC7E,OAAO,CACL,eACE,IAAI,EAAC,SAAS,gBACH,WAAW,EACtB,SAAS,EAAE,EAAE,CACX,iHAAiH,EACjH,SAAS,CACV,aAED,mCAEE,SAAS,EAAE,EAAE,CACX,2JAA2J,EAC3J,KAAK,KAAK,MAAM,IAAI,mCAAmC,CACxD,GACD,EACF,kBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,KAAK,KAAK,MAAM,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,EACpC,SAAS,EAAE,EAAE,CACX,oFAAoF,EACpF,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,6CAA6C,CAClF,aAED,KAAC,cAAc,IAAC,SAAS,EAAC,QAAQ,wBAAe,EACjD,eAAM,SAAS,EAAC,SAAS,0BAAiB,IACnC,EACT,kBACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,KAAK,mBACK,KAAK,KAAK,MAAM,EAC/B,OAAO,EAAE,GAAG,EAAE,CAAC,aAAa,CAAC,MAAM,CAAC,EACpC,SAAS,EAAE,EAAE,CACX,oFAAoF,EACpF,KAAK,KAAK,MAAM,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,6CAA6C,CAClF,aAED,KAAC,cAAc,IAAC,SAAS,EAAC,QAAQ,wBAAe,EACjD,eAAM,SAAS,EAAC,SAAS,0BAAiB,IACnC,IACL,CACP,CAAC;AACJ,CAAC"}

package/dist/components/view-toggle.stories.d.ts

@@ -0,0 +1,20 @@
+import type { StoryObj } from "@storybook/react-vite";
+import { ViewToggle } from "./view-toggle";
+declare const meta: {
+    title: string;
+    component: typeof ViewToggle;
+    tags: string[];
+    parameters: {
+        docs: {
+            description: {
+                component: string;
+            };
+        };
+    };
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const ListDefault: Story;
+export declare const WithLabel: Story;
+//# sourceMappingURL=view-toggle.stories.d.ts.map

package/dist/components/view-toggle.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-toggle.stories.d.ts","sourceRoot":"","sources":["../../src/components/view-toggle.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAQ,QAAQ,EAAE,MAAM,uBAAuB,CAAC;AAE5D,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,QAAA,MAAM,IAAI;;;;;;;;;;;CAYyB,CAAC;AAEpC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAwBnC,eAAO,MAAM,OAAO,EAAE,KAGrB,CAAC;AAEF,eAAO,MAAM,WAAW,EAAE,KAGzB,CAAC;AAEF,eAAO,MAAM,SAAS,EAAE,KAGvB,CAAC"}

package/dist/components/view-toggle.stories.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState } from "react";
+import { ViewToggle } from "./view-toggle";
+const meta = {
+    title: "Components/ViewToggle",
+    component: ViewToggle,
+    tags: ["autodocs"],
+    parameters: {
+        docs: {
+            description: {
+                component: "Segmented grid/list view toggle. Controlled — persist the `value` externally (localStorage, query params) since the component is stateless. Part of the producer portfolio redesign.",
+            },
+        },
+    },
+};
+export default meta;
+function DefaultExample() {
+    const [value, setValue] = useState("grid");
+    return _jsx(ViewToggle, { value: value, onValueChange: setValue });
+}
+function ListDefaultExample() {
+    const [value, setValue] = useState("list");
+    return _jsx(ViewToggle, { value: value, onValueChange: setValue });
+}
+function WithLabelExample() {
+    const [value, setValue] = useState("grid");
+    return (_jsxs("div", { className: "flex items-center gap-4", children: [_jsx(ViewToggle, { value: value, onValueChange: setValue }), _jsx("span", { className: "text-xs text-muted-foreground", children: "12 products \u00B7 sorted by recently updated" })] }));
+}
+export const Default = {
+    args: { value: "grid", onValueChange: () => { } },
+    render: () => _jsx(DefaultExample, {}),
+};
+export const ListDefault = {
+    args: { value: "list", onValueChange: () => { } },
+    render: () => _jsx(ListDefaultExample, {}),
+};
+export const WithLabel = {
+    args: { value: "grid", onValueChange: () => { } },
+    render: () => _jsx(WithLabelExample, {}),
+};
+//# sourceMappingURL=view-toggle.stories.js.map

package/dist/components/view-toggle.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"view-toggle.stories.js","sourceRoot":"","sources":["../../src/components/view-toggle.stories.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AACjC,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAE3C,MAAM,IAAI,GAAG;IACX,KAAK,EAAE,uBAAuB;IAC9B,SAAS,EAAE,UAAU;IACrB,IAAI,EAAE,CAAC,UAAU,CAAC;IAClB,UAAU,EAAE;QACV,IAAI,EAAE;YACJ,WAAW,EAAE;gBACX,SAAS,EACP,sLAAsL;aACzL;SACF;KACF;CACgC,CAAC;AAEpC,eAAe,IAAI,CAAC;AAGpB,SAAS,cAAc;IACrB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkB,MAAM,CAAC,CAAC;IAC5D,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,GAAI,CAAC;AAC/D,CAAC;AAED,SAAS,kBAAkB;IACzB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkB,MAAM,CAAC,CAAC;IAC5D,OAAO,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,GAAI,CAAC;AAC/D,CAAC;AAED,SAAS,gBAAgB;IACvB,MAAM,CAAC,KAAK,EAAE,QAAQ,CAAC,GAAG,QAAQ,CAAkB,MAAM,CAAC,CAAC;IAC5D,OAAO,CACL,eAAK,SAAS,EAAC,yBAAyB,aACtC,KAAC,UAAU,IAAC,KAAK,EAAE,KAAK,EAAE,aAAa,EAAE,QAAQ,GAAI,EACrD,eAAM,SAAS,EAAC,+BAA+B,8DAExC,IACH,CACP,CAAC;AACJ,CAAC;AAED,MAAM,CAAC,MAAM,OAAO,GAAU;IAC5B,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE;IAChD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,cAAc,KAAG;CACjC,CAAC;AAEF,MAAM,CAAC,MAAM,WAAW,GAAU;IAChC,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE;IAChD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,kBAAkB,KAAG;CACrC,CAAC;AAEF,MAAM,CAAC,MAAM,SAAS,GAAU;IAC9B,IAAI,EAAE,EAAE,KAAK,EAAE,MAAM,EAAE,aAAa,EAAE,GAAG,EAAE,GAAE,CAAC,EAAE;IAChD,MAAM,EAAE,GAAG,EAAE,CAAC,KAAC,gBAAgB,KAAG;CACnC,CAAC"}