2c:I[522016,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],""] 2d:I[406394,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"BlockTabs"] 2e:I[966139,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"PreviewFrame"] 2f:I[967833,["/_next/static/immutable/chunks/0x-9rc1bm-510.js","/_next/static/immutable/chunks/0vm4r_y51lca-.js","/_next/static/immutable/chunks/1_05dnk5nlv68.js","/_next/static/immutable/chunks/22eey7bx99yf1.js","/_next/static/immutable/chunks/26w7nc1n_z-ef.js","/_next/static/immutable/chunks/0rg7f484r7pvs.js","/_next/static/immutable/chunks/08zzaq7mzunr6.js","/_next/static/immutable/chunks/2r4xab7oviwp5.js","/_next/static/immutable/chunks/3xlvx278x1e_n.js","/_next/static/immutable/chunks/2ndy6i4i4-y6n.js","/_next/static/immutable/chunks/06y00c7m-_7je.js","/_next/static/immutable/chunks/263-ujry15jpq.js","/_next/static/immutable/chunks/3p6b9_d0h8s6a.js","/_next/static/immutable/chunks/3s_tixnfkzgei.js","/_next/static/immutable/chunks/1vzkb09w9y5u9.js","/_next/static/immutable/chunks/0q5gv4ffdk-lk.js","/_next/static/immutable/chunks/37e7ynyc-_cqk.js","/_next/static/immutable/chunks/2m-qc00i-nvf7.js","/_next/static/immutable/chunks/2x3a5j5_bt12w.js","/_next/static/immutable/chunks/18rtnwgqpot3p.js","/_next/static/immutable/chunks/3kcvqkz425zel.js","/_next/static/immutable/chunks/0191lw-km_l_x.js","/_next/static/immutable/chunks/3-2tm_28na9tk.js","/_next/static/immutable/chunks/14yszr5gqr22_.js","/_next/static/immutable/chunks/29m25k6c5-ipo.js","/_next/static/immutable/chunks/2a77rt5-k4ju_.js","/_next/static/immutable/chunks/3fw7v0e9fz244.js","/_next/static/immutable/chunks/39oieppwminn9.js","/_next/static/immutable/chunks/2i0vfc8ynux_t.js","/_next/static/immutable/chunks/31pqjpqnverqb.js","/_next/static/immutable/chunks/43tk0scc5ia6a.js","/_next/static/immutable/chunks/2t0_o72h2hqpj.js","/_next/static/immutable/chunks/0hgm421bwn02n.js","/_next/static/immutable/chunks/3j6wvt_gtks8k.js","/_next/static/immutable/chunks/0xciaf081ehlj.js"],"CodeView"] 30:T24e5,"use client"; import { AnimatePresence, motion, useReducedMotion } from "motion/react"; import { useState } from "react"; import { IconMinus, IconPlus, IconShoppingBag } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Progress, ProgressLabel, ProgressValue } from "@/components/ui/progress"; import { formatMoney, cheapestVariant } from "../../../lib/commerce/select"; import type { Money, Product } from "../../../lib/commerce/types"; import { ProductPicture } from "../../ui/_kit/product-picture"; export type ShippingMethod = "standard" | "express" | "overnight"; export type ShippingOption = { id: ShippingMethod; label: string; price: Money }; export type BucketProps = { products: Product[]; /** Amount required to unlock free standard shipping. */ threshold?: Money; /** Date or short date range displayed with the delivery estimate. */ arrivesBy?: string; shippingOptions?: ShippingOption[]; }; const defaultOptions = (currency: string): ShippingOption[] => [ { id: "standard", label: "Standard", price: { amount: 4.95, currency } }, { id: "express", label: "Express", price: { amount: 8.95, currency } }, { id: "overnight", label: "Overnight", price: { amount: 19.95, currency } }, ]; /** A fixture-fed local cart with a small, interruptible arrival motion for newly added lines. */ export function Bucket({ products, threshold, arrivesBy = "Oct 8–10", shippingOptions }: BucketProps) { const reduceMotion = useReducedMotion(); const [quantities, setQuantities] = useState>(() => Object.fromEntries(products.map((product, index) => [product.id, index === 0 ? 1 : 0])), ); const [addedProductId, setAddedProductId] = useState(null); const [selectedMethod, setSelectedMethod] = useState("standard"); const currency = threshold?.currency ?? (products[0] ? cheapestVariant(products[0]).price.currency : "USD"); const options = shippingOptions?.length ? shippingOptions : defaultOptions(currency); const selectedOption = options.find((option) => option.id === selectedMethod) ?? options[0]; const items = products.map((product) => ({ product, quantity: quantities[product.id] ?? 0, variant: cheapestVariant(product) })); const subtotal = items.reduce((sum, item) => sum + item.variant.price.amount * item.quantity, 0); const thresholdAmount = Math.max(0, threshold?.amount ?? 75); const remaining = Math.max(0, thresholdAmount - subtotal); const progress = thresholdAmount === 0 ? 100 : Math.min((subtotal / thresholdAmount) * 100, 100); const shippingCost = selectedMethod === "standard" && subtotal >= thresholdAmount ? 0 : (selectedOption?.price.amount ?? 0); const total = { amount: subtotal + shippingCost, currency }; const hasItems = items.some((item) => item.quantity > 0); const changeQuantity = (productId: string, delta: number) => { setAddedProductId(delta > 0 ? productId : null); setQuantities((current) => ({ ...current, [productId]: Math.max(0, (current[productId] ?? 0) + delta) })); }; return (

Choose items

Add a product to your bag.

{product.title}

{formatMoney(variant.price)}

Your bag

{items.reduce((sum, item) => sum + item.quantity, 0)} items

{thresholdAmount === 0 || remaining === 0 ? "Free standard shipping unlocked" : `Add ${formatMoney({ amount: remaining, currency })} for free standard shipping`} {(_formatted, current) => `${Math.round(current ?? 0)}%`}

Arrives by {arrivesBy}

Shipping method

{options.map((option) => { const freeStandard = option.id === "standard" && subtotal >= thresholdAmount; const label = freeStandard ? "Free" : option.price.amount === 0 ? "Free" : formatMoney(option.price); return ( ); })}

{items.filter((item) => item.quantity > 0).map(({ product, quantity, variant }) => ( {product.title}

{quantity}

{formatMoney({ amount: variant.price.amount * quantity, currency: variant.price.currency })} ))} {!hasItems ?

Your bag is empty. Add an item to get started.

: null}

Estimated total{formatMoney(total)}

Shipping prices and delivery dates are placeholders for this store preview.

); } 31:T50a,import type { ProductImage } from "../../../lib/commerce/types"; import { cn } from "@/lib/utils"; export type ProductPictureProps = { image: ProductImage; /** `sizes` attribute. Defaults to a half-viewport guess. */ sizes?: string; loading?: "eager" | "lazy"; /** Use for the one above-the-fold LCP image. */ priority?: boolean; className?: string; }; /** * Plain for a product mockup. Uses the 600px twin as the small source when one exists, * always carries width/height so the box is reserved before the image arrives. */ export function ProductPicture({ image, sizes = "(min-width: 768px) 50vw, 100vw", loading = "lazy", priority = false, className, }: ProductPictureProps) { const width = image.width ?? 1200; const height = image.height ?? 1200; return ( // eslint-disable-next-line @next/next/no-img-element {image.alt}

); } 32:Ta9c,import type { Money, Product, ProductImage, Variant } from "./types"; /** Price range of a variant list. Empty list gives a zero range in `currency`. */ export function priceRangeOf( variants: Variant[], currency = "USD", ): { min: Money; max: Money } { if (variants.length === 0) { const zero = { amount: 0, currency }; return { min: zero, max: zero }; } const sorted = [...variants].sort((a, b) => a.price.amount - b.price.amount); return { min: sorted[0].price, max: sorted[sorted.length - 1].price }; } /** Lowest priced variant, preferring available ones. Undefined when the product has no variants. */ export function findCheapestVariant(product: Product): Variant | undefined { if (product.variants.length === 0) return undefined; const pool = product.variants.some((v) => v.available) ? product.variants.filter((v) => v.available) : product.variants; return pool.reduce((a, b) => (b.price.amount < a.price.amount ? b : a)); } /** * Same as `findCheapestVariant` but typed non-optional so existing call sites keep compiling. * Adapters never emit a product without variants, so the throw is unreachable for adapter * output; hand-built products should use `findCheapestVariant`. */ export function cheapestVariant(product: Product): Variant { const v = findCheapestVariant(product); if (!v) throw new Error(`cheapestVariant: product "${product.handle}" has no variants (use findCheapestVariant)`); return v; } /** First variant whose options contain every given key/value. */ export function variantFor( product: Product, options: Record, ): Variant | undefined { return product.variants.find((v) => Object.entries(options).every(([k, val]) => v.options[k] === val), ); } export function optionValues(product: Product, name: string): string[] { return product.options.find((o) => o.name === name)?.values ?? []; } /** Images to show for a variant: its own image first, then the rest of the product. */ export function imagesFor(product: Product, variant?: Variant): ProductImage[] { if (!variant?.image) return product.images; const own = variant.image; return [own, ...product.images.filter((i) => i.src !== own.src)]; } export function formatMoney(money: Money, locale = "en-US"): string { const whole = Number.isInteger(money.amount); return new Intl.NumberFormat(locale, { style: "currency", currency: money.currency, minimumFractionDigits: whole ? 0 : 2, maximumFractionDigits: 2, }).format(money.amount); } /** True when at least one variant can be bought somewhere. */ export function isBuyable(product: Product): boolean { return product.variants.some((v) => v.available && v.storeUrl); } 33:T84e,export type Brand = { slug: string; name: string; tagline: string; canonical: string; storeOrigin: string; /** Theme name; equals the value of `data-brand` on the wrapping element. */ theme: string; voice: { caps: boolean }; }; export type Money = { amount: number; currency: string }; export type ProductImage = { src: string; alt: string; width?: number; height?: number; view?: "front" | "back" | "detail" | "lifestyle" | "left" | "right" | "person" | "folded"; /** * False when the view is known to carry no artwork (noteam cap `back` is a blank cap). * Undefined means true. Hover-swap and "next image" UI should only use views with art. */ hasArt?: boolean; /** Smaller twin of `src` (600px for brand-factory mockups) when one exists. */ thumb?: string; }; export type ProductOption = { name: "Color" | "Size" | "Garment" | (string & {}); values: string[]; }; export type Variant = { id: string; title: string; options: Record; price: Money; compareAt?: Money; /** Can be bought if a storeUrl exists. `false` only for sold out (Shopify/Printify). */ available: boolean; image?: ProductImage; /** Where the buy button goes. `null` means "coming soon". */ storeUrl: string | null; sku?: string; }; export type ProductSource = { kind: "brand-factory" | "shopify" | "printify" | "mrch" | "noteam"; ref?: string; }; export type Product = { id: string; handle: string; title: string; line?: string; description: string; collection: string; tags: string[]; images: ProductImage[]; options: ProductOption[]; variants: Variant[]; featuredImage: ProductImage; priceRange: { min: Money; max: Money }; source: ProductSource; /** Source-specific extras (noteam colorway, Printify blueprint/provider ids). Optional, never required by blocks. */ extras?: Record; }; export type Collection = { handle: string; title: string; blurb: string; /** Product handles. */ products: string[]; }; export type Catalog = { brand: Brand; products: Product[]; collections: Collection[]; }; 34:T4e3,import type { BlockMeta } from "../../../lib/block-meta"; export const bucketMeta: BlockMeta = { slug: "bucket", title: "Cart bucket", description: "A fixture-fed local cart with animated item arrivals, threshold-based free standard shipping progress, an arrival estimate, and delivery speed choices.", group: "interactions", kobraDeps: ["button", "progress"], files: [ "blocks/interactions/bucket/bucket.tsx", "blocks/ui/_kit/product-picture.tsx", "lib/commerce/select.ts", "lib/commerce/types.ts", ], props: [ { name: "products", type: "Product[]", description: "Fixture or catalog items available to add to the local bag." }, { name: "threshold", type: "Money", default: "75 USD", description: "Subtotal required to unlock free standard shipping." }, { name: "arrivesBy", type: "string", default: "Oct 8–10", description: "Date or short range shown in the delivery estimate." }, { name: "shippingOptions", type: "ShippingOption[]", description: "Optional Standard, Express, and Overnight placeholder prices." }, ], tags: ["cart", "shipping", "progress", "products"], status: "ready", origin: { name: "uselayouts", url: "https://uselayouts.com/docs/components/bucket", license: "MIT" }, }; 23:["$","article",null,{"className":"grid gap-6","children":[["$","header",null,{"className":"grid gap-3","children":[["$","nav",null,{"aria-label":"breadcrumb","data-slot":"breadcrumb","className":"","children":["$","ol",null,{"data-slot":"breadcrumb-list","className":"flex flex-wrap items-center gap-1.5 text-sm wrap-break-word text-muted-foreground","children":[["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Kobra Commerce"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","$L2c",null,{"href":"/#interactions","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Interactions"}]}],["$","li",null,{"data-slot":"breadcrumb-separator","role":"presentation","aria-hidden":"true","className":"[&>svg]:size-3.5","children":["$","svg",null,{"ref":"$undefined","xmlns":"http://www.w3.org/2000/svg","width":24,"height":24,"viewBox":"0 0 24 24","fill":"none","stroke":"currentColor","strokeWidth":2,"strokeLinecap":"round","strokeLinejoin":"round","className":"tabler-icon tabler-icon-chevron-right rtl:-scale-x-100","children":["$undefined",["$","path","svg-0",{"d":"M9 6l6 6l-6 6"}],"$undefined"]}]}],["$","li",null,{"data-slot":"breadcrumb-item","className":"inline-flex items-center gap-1","children":["$","span",null,{"data-slot":"breadcrumb-page","role":"link","aria-disabled":"true","aria-current":"page","className":"font-normal text-foreground","children":"Cart bucket"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Cart bucket"}],["$","span",null,{"data-slot":"badge","data-variant":"green","className":"group/badge t-label relative isolate inline-flex w-fit shrink-0 items-center justify-center gap-1 rounded-full border border-transparent py-0.5 font-medium [--surface-calm:0.5] whitespace-nowrap transition-ring before:pointer-events-none before:absolute before:inset-0 before:-z-10 before:rounded-[inherit] before:border before:border-transparent before:transition-[scale,background-color,border-color] before:duration-150 before:ease-out focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 motion-reduce:before:transition-none has-data-[icon=inline-end]:pe-1.5 has-data-[icon=inline-start]:ps-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [a,button]:active:before:scale-[0.97] motion-reduce:[a,button]:active:before:scale-100 [&>svg]:pointer-events-none [&>svg]:size-3! t-surface t-surface-success text-[var(--badge-green-fg)] h-5 px-1.5 text-xs","children":"Ready"}]]}],["$","p",null,{"className":"max-w-[65ch] text-sm text-muted-foreground","children":"A fixture-fed local cart with animated item arrivals, threshold-based free standard shipping progress, an arrival estimate, and delivery speed choices."}]]}],["$","$L2d",null,{"preview":["$","$L2e",null,{"slug":"bucket","group":"interactions","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L2f",null,{"files":[{"path":"blocks/interactions/bucket/bucket.tsx","code":"$30"},{"path":"blocks/ui/_kit/product-picture.tsx","code":"$31"},{"path":"lib/commerce/select.ts","code":"$32"},{"path":"lib/commerce/types.ts","code":"$33"},{"path":"blocks/interactions/bucket/demo.tsx","code":"import { DemoPage, DemoSection } from \"../../_shared/variant-frame\";\nimport { demoProducts } from \"../../../lib/commerce/fixtures\";\nimport { Bucket } from \"./bucket\";\n\nexport function BucketDemo() {\n return (\n \n \n \n \n \n \n \n \n );\n}\n"},{"path":"blocks/interactions/bucket/meta.ts","code":"$34"}]}],"props":"$L35"}],"$L36"]}]