2d: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/0cxdppusfso3e.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"],""] 2e: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/0cxdppusfso3e.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"] 2f: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/0cxdppusfso3e.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"] 30: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/0cxdppusfso3e.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"] 31:T2c8d,"use client"; import { useEffect, useRef, useState } from "react"; import { IconCheck } from "@tabler/icons-react"; import { Button } from "@/components/ui/button"; import { Input } from "@/components/ui/input"; import { cn } from "@/lib/utils"; import type { Product } from "../../../lib/commerce/types"; import { Price } from "../../ui/price/price"; import { PendingButton } from "../_shared/pending-button"; import { imageSize, imageSrcSet, primaryImage, productHref as defaultProductHref } from "../_shared/product-utils"; export type DropCountdownVariant = "bar" | "hero-card" | "inline"; export type DropCountdownProps = { /** When the drop opens. Absent or invalid: the module renders nothing (never an invented date). */ dropsAt?: string | Date; title: string; variant?: DropCountdownVariant; /** Optional teaser product (hero-card). */ product?: Product; /** Teaser link builder. Defaults to `/products/`. */ productHref?: (product: Product) => string; /** Where "live now" goes. */ liveHref?: string; liveLabel?: string; /** Notify-me submit. Omit to hide the form. Throw/reject to show the error state. */ onNotify?: (email: string) => Promise | void; /** Overrides the notify visibility default (hero-card and inline show it, bar does not). */ showNotify?: boolean; className?: string; }; type Parts = { days: number; hours: number; minutes: number; seconds: number; done: boolean }; function partsAt(target: number, now: number): Parts { const ms = Math.max(0, target - now); const total = Math.floor(ms / 1000); return { days: Math.floor(total / 86400), hours: Math.floor((total % 86400) / 3600), minutes: Math.floor((total % 3600) / 60), seconds: total % 60, done: ms === 0, }; } /** Ticks once a second after mount; `null` before, so server and first client render match. */ function useNow(): number | null { const [now, setNow] = useState(null); useEffect(() => { const tick = () => setNow(Date.now()); const first = window.setTimeout(tick, 0); const id = window.setInterval(tick, 1000); return () => { window.clearTimeout(first); window.clearInterval(id); }; }, []); return now; } const pad = (n: number) => String(n).padStart(2, "0"); function Digits({ parts, size, className }: { parts: Parts | null; size: "bar" | "hero" | "inline"; className?: string }) { const cells: [string, string | null][] = [ ["days", parts ? pad(parts.days) : null], ["hours", parts ? pad(parts.hours) : null], ["min", parts ? pad(parts.minutes) : null], ["sec", parts ? pad(parts.seconds) : null], ]; const digit = size === "hero" ? "display-m min-w-[2ch]" : size === "bar" ? "font-display text-2xl leading-none min-w-[2ch] sm:text-3xl" : "font-micro text-sm min-w-[2ch]"; return (

{cells.map(([label, value], i) => (

{value ?? "--"} {label}

{i < cells.length - 1 && size !== "inline" ? ( : ) : null}

))}

); } type NotifyState = "idle" | "pending" | "success" | "error"; function NotifyForm({ onNotify, inline, className }: { onNotify: (email: string) => Promise | void; inline?: boolean; className?: string }) { const [state, setState] = useState("idle"); const field = useRef(null); const shake = () => { if (window.matchMedia("(prefers-reduced-motion: reduce)").matches) return; field.current?.animate( [{ translate: "0" }, { translate: "-4px" }, { translate: "4px" }, { translate: "-2px" }, { translate: "0" }], { duration: 240, easing: "cubic-bezier(0.23, 1, 0.32, 1)" }, ); }; if (state === "success") { return (

You are on the list.

); } return (

{ event.preventDefault(); if (state === "pending") return; const email = new FormData(event.currentTarget).get("email"); if (typeof email !== "string" || !/^\S+@\S+\.\S+$/.test(email.trim())) { setState("error"); shake(); return; } setState("pending"); try { await onNotify(email.trim()); setState("success"); } catch { setState("error"); shake(); } }} >

state === "error" && setState("idle")} className="h-9 min-w-0 flex-1 text-ink sm:w-56 sm:flex-none" /> Notify me

{state === "error" ? (

Enter a valid email address and try again.

) : null}

); } /** Countdown to a drop. Fixed-width digits so nothing shifts, a designed live state, and a notify form with pending states. */ export function DropCountdown({ dropsAt, title, variant = "bar", product, productHref = defaultProductHref, liveHref, liveLabel = "Shop the drop", onNotify, showNotify, className, }: DropCountdownProps) { const now = useNow(); const target = dropsAt ? new Date(dropsAt).getTime() : NaN; if (Number.isNaN(target)) return null; const parts = now === null ? null : partsAt(target, now); const live = parts?.done === true; const notify = (showNotify ?? variant !== "bar") && onNotify && !live; const spoken = parts && !live ? `${parts.days} days, ${parts.hours} hours, ${parts.minutes} minutes` : undefined; const dateText = new Intl.DateTimeFormat("en-US", { month: "long", day: "numeric", year: "numeric", timeZone: "UTC" }).format(target); const liveCue = ( Live now ); const liveLink = liveHref ? ( ) : null; const timer = (size: "bar" | "hero" | "inline") => live ? (

{liveCue} {liveLink}

) : (

); if (variant === "bar") { return (

{live ? title : `Next drop: ${title}`}

{timer("bar")} {notify ? : null}

); } if (variant === "inline") { return (

{title}

{timer("inline")} {notify ? : null}

); } const image = product ? primaryImage(product) : undefined; return (

{product && image ? (

{product.title} ) : null}

{live ? "Live now" : `Drops ${dateText}`}

{title}

{timer("hero")} {notify ? : null}

); } export default DropCountdown; 32:T669,"use client"; import type { ComponentProps } from "react"; import { Button } from "@/components/ui/button"; import { Spinner } from "@/components/ui/spinner"; import { cn } from "@/lib/utils"; /** * A busy button keeps its word: the label turns out of view and a spinner turns in, * through one shared flip. `aria-busy`, never `disabled`, and repeat presses are dropped. */ export function PendingButton({ pending = false, children, onClick, className, ...props }: ComponentProps & { pending?: boolean }) { return ( ); } 33:Tb33,import type { Collection, Product, ProductImage } from "../../../lib/commerce/types"; import type { ProductBadgeKind } from "../../ui/product-badge/product-badge"; /** Kobra house curves, written out so Tailwind sees the full class names. */ export const EASE_OUT = "ease-[cubic-bezier(0.23,1,0.32,1)]"; export const EASE_EXIT = "ease-[cubic-bezier(0.4,0,0.6,1)]"; export const FOCUS_RING = "outline-none focus-visible:ring-3 focus-visible:ring-ring/50"; export const productHref = (product: Product) => `/products/${product.handle}`; export const collectionHref = (collection: Collection) => `/collections/${collection.handle}`; export function isSoldOut(product: Product): boolean { return product.variants.length > 0 && product.variants.every((v) => !v.available); } const BLANK = "data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='1200'/%3E"; /** Featured image, else the first image, else a transparent placeholder so a product with no art still lays out (the well shows). */ export function primaryImage(product: Product): ProductImage { return product.featuredImage ?? product.images?.[0] ?? { src: BLANK, alt: product.title, width: 1200, height: 1200, hasArt: false }; } /** Second image for hover swaps and gallery insets: skips blank (hasArt === false) and same-view images. */ export function secondaryImage(product: Product, images: ProductImage[] = product.images): ProductImage | undefined { const first = images[0] ?? primaryImage(product); const pool = images.filter((i) => i.src !== first.src && i.hasArt !== false && (i.view ?? "front") !== (first.view ?? "front")); return ( pool.find((i) => i.view === "back") ?? pool.find((i) => i.view === "lifestyle") ?? pool[0] ); } /** Image shown on hover: the first art-bearing image of another view, else no swap. */ export function hoverImage(product: Product): ProductImage | undefined { return secondaryImage(product, [primaryImage(product), ...product.images]); } export function imageSize(image: ProductImage): { width: number; height: number } { return { width: image.width ?? 1200, height: image.height ?? 1200 }; } /** 600w twin + full size when both exist. */ export function imageSrcSet(image: ProductImage): string | undefined { return image.thumb && image.thumb !== image.src ? `${image.thumb} 600w, ${image.src} 1200w` : undefined; } export function hasBackPrint(product: Product): boolean { return product.images.some((i) => i.view === "back"); } export function badgeKindFor(product: Product): ProductBadgeKind | undefined { if (isSoldOut(product)) return "sold-out"; if (product.tags.includes("new")) return "new"; if (hasBackPrint(product)) return "back-print"; return undefined; } export const hasPriceRange = (product: Product) => product.priceRange.min.amount !== product.priceRange.max.amount; 34:T6df,import { cva, type VariantProps } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { formatMoney } from "../../../lib/commerce/select"; import type { Money } from "../../../lib/commerce/types"; const price = cva("tabular inline-flex items-baseline gap-2 text-ink", { variants: { variant: { default: "text-base", large: "display-m", "strike-compare": "text-base", "from-range": "text-base", }, }, defaultVariants: { variant: "default" }, }); export type PriceProps = VariantProps & { money: Money; /** Original price, shown struck through with the `strike-compare` variant. */ compareAt?: Money; /** Upper bound; with `from-range` renders "From $min" or "$min to $max". */ max?: Money; locale?: string; className?: string; }; export function Price({ variant = "default", money, compareAt, max, locale, className, }: PriceProps) { const now = formatMoney(money, locale); if (variant === "strike-compare" && compareAt) { return ( {now} ~~{formatMoney(compareAt, locale)}~~ ); } if (variant === "from-range") { const range = max && max.amount !== money.amount; return ( {range ? ( <> From {now} ) : ( {now} )} ); } return {now}; } 35:T700,"use client"; import { DropCountdown } from "./drop-countdown"; import { DemoPage, DemoSection } from "../_shared/demo-frame"; import { DEMO_DROP_AT, DEMO_LIVE_DROP_AT, productFixture } from "../../../lib/commerce/fixtures/product"; // Demo handler: resolves after a beat so the pending flip is visible. Nothing is stored or sent. const fakeNotify = () => new Promise((resolve) => setTimeout(resolve, 900)); export function DropCountdownDemo({ brand }: { brand?: string }) { const fx = productFixture(brand); const names = fx.collections.map((c) => c.title); const [barTitle, heroTitle] = [names[0] ?? fx.brand.name, names[1] ?? names[0] ?? fx.brand.name]; const teaser = fx.products[3] ?? fx.products[0]; return (

); } export default DropCountdownDemo; 36:T630,import type { BlockMeta } from "../../../lib/block-meta"; export const dropCountdownMeta: BlockMeta = { slug: "drop-countdown", title: "Drop countdown", description: "Countdown to a drop with fixed-width tabular digits, a designed live-now state, an optional product teaser and a notify-me form with the Kobra pending flip. Bar, hero card and inline.", group: "product", kobraDeps: ["button", "input", "spinner"], files: [ "blocks/product/drop-countdown/drop-countdown.tsx", "blocks/product/_shared/pending-button.tsx", "blocks/product/_shared/product-utils.ts", "blocks/ui/price/price.tsx", ], props: [ { name: "dropsAt", type: "string | Date", description: "Drop time. Absent or invalid: renders nothing." }, { name: "title", type: "string", description: "Drop name." }, { name: "variant", type: "'bar' | 'hero-card' | 'inline'", default: "'bar'", description: "Layout." }, { name: "product", type: "Product", description: "Teaser product (hero-card)." }, { name: "productHref", type: "(product: Product) => string", default: "`/products/${handle}`", description: "Teaser link builder (hero-card)." }, { name: "liveHref", type: "string", description: "Target of the live-now button." }, { name: "onNotify", type: "(email: string) => Promise | void", description: "Notify submit; omit to hide the form. Rejecting shows the error state." }, { name: "showNotify", type: "boolean", description: "Override the per-variant default." }, ], tags: ["drop", "countdown", "email", "client"], status: "ready", }; 24:["$","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":["$","$L2d",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":["$","$L2d",null,{"href":"/#product","data-slot":"breadcrumb-link","className":"transition-colors hover:text-foreground","children":"Product"}]}],["$","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":"Drop countdown"}]}]]}]}],["$","div",null,{"className":"flex flex-wrap items-center gap-3","children":[["$","h1",null,{"className":"text-2xl font-bold","children":"Drop countdown"}],["$","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":"Countdown to a drop with fixed-width tabular digits, a designed live-now state, an optional product teaser and a notify-me form with the Kobra pending flip. Bar, hero card and inline."}]]}],["$","$L2e",null,{"preview":["$","$L2f",null,{"slug":"drop-countdown","group":"product","minHeight":480,"fixedHeight":"$undefined"}],"code":["$","$L30",null,{"files":[{"path":"blocks/product/drop-countdown/drop-countdown.tsx","code":"$31"},{"path":"blocks/product/_shared/pending-button.tsx","code":"$32"},{"path":"blocks/product/_shared/product-utils.ts","code":"$33"},{"path":"blocks/ui/price/price.tsx","code":"$34"},{"path":"blocks/product/drop-countdown/demo.tsx","code":"$35"},{"path":"blocks/product/drop-countdown/meta.ts","code":"$36"}]}],"props":"$L37"}],"$L38"]}]