{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "flash-sale-offer-bar",
  "title": "Flash Sale Offer Bar",
  "type": "registry:block",
  "files": [
    {
      "path": "packages/registry-react/blocks/flash-sale-offer-bar/FlashSaleOfferBar.tsx",
      "content": "'use client'\n\nimport * as React from 'react'\nimport { Flame, ShieldCheck, Tag } from 'lucide-react'\nimport { Badge } from '@/components/ui/badge'\nimport { Button } from '@/components/ui/button'\n\nexport interface TierOffer {\n  id: string\n  quantity: number\n  discountPct: number\n  label: string\n  badgeText?: string\n  popular?: boolean\n}\n\nexport interface FlashSaleProps {\n  saleTitle?: string\n  endTimeIso?: string\n  claimedPercent?: number\n  itemsLeft?: number\n  currentTier?: number\n  tiers?: TierOffer[]\n  onSelectTier?: (tier: TierOffer) => void\n  onClaimDeal?: () => void\n  className?: string\n}\n\nconst defaultTiers: TierOffer[] = [\n  { id: 't1', quantity: 1, discountPct: 15, label: 'Standard Pack', badgeText: 'Save $45' },\n  {\n    id: 't2',\n    quantity: 2,\n    discountPct: 25,\n    label: 'Duo Studio Bundle',\n    badgeText: 'Save $150 · Best Value',\n    popular: true,\n  },\n  { id: 't3', quantity: 3, discountPct: 35, label: 'Team / Lab Triad', badgeText: 'Save $315' },\n]\n\nexport function FlashSaleOfferBar({\n  saleTitle = 'Lightning Deal: Limited Quantity Batch',\n  endTimeIso,\n  claimedPercent = 78,\n  itemsLeft = 14,\n  tiers = defaultTiers,\n  onSelectTier,\n  onClaimDeal,\n  className,\n}: FlashSaleProps) {\n  const [selectedTierId, setSelectedTierId] = React.useState(tiers[1]?.id || tiers[0]?.id || '')\n\n  const defaultEnd = React.useMemo(() => {\n    return new Date(Date.now() + 6 * 3600 * 1000 + 42 * 60 * 1000 + 19 * 1000).toISOString()\n  }, [])\n\n  const targetTime = endTimeIso || defaultEnd\n\n  const [timeLeft, setTimeLeft] = React.useState({\n    hours: '06',\n    minutes: '42',\n    seconds: '19',\n  })\n\n  React.useEffect(() => {\n    function updateCountdown() {\n      const target = new Date(targetTime).getTime()\n      const now = Date.now()\n      const diff = Math.max(0, target - now)\n\n      const h = Math.floor(diff / (1000 * 60 * 60))\n      const m = Math.floor((diff % (1000 * 60 * 60)) / (1000 * 60))\n      const s = Math.floor((diff % (1000 * 60)) / 1000)\n\n      setTimeLeft({\n        hours: String(h).padStart(2, '0'),\n        minutes: String(m).padStart(2, '0'),\n        seconds: String(s).padStart(2, '0'),\n      })\n    }\n\n    updateCountdown()\n    const timer = setInterval(updateCountdown, 1000)\n    return () => clearInterval(timer)\n  }, [targetTime])\n\n  function handleSelect(tier: TierOffer) {\n    setSelectedTierId(tier.id)\n    onSelectTier?.(tier)\n  }\n\n  return (\n    <div\n      data-slot=\"flash-sale-offer-bar\"\n      className={`border-border bg-card w-full overflow-hidden rounded-xl border shadow-xs ${className ?? ''}`}\n    >\n      {/* Deal Header Banner */}\n      <div className=\"border-border bg-muted/40 flex flex-col gap-3 border-b p-4 sm:flex-row sm:items-center sm:justify-between\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className=\"border-border bg-background flex size-8 items-center justify-center rounded-lg border shadow-2xs\">\n            <Flame className=\"size-4 fill-orange-500/20 text-orange-500\" />\n          </div>\n          <div>\n            <div className=\"flex items-center gap-2\">\n              <span className=\"text-foreground text-sm font-semibold tracking-tight\">{saleTitle}</span>\n              <Badge variant=\"destructive\" className=\"h-5 gap-1 px-1.5 font-mono text-xs uppercase\">\n                <span className=\"bg-background size-1.5 animate-pulse rounded-full\" />\n                Live\n              </Badge>\n            </div>\n            <p className=\"text-muted-foreground text-xs\">Price locks automatically once added to cart.</p>\n          </div>\n        </div>\n\n        {/* Live Clock Digits */}\n        <div className=\"flex items-center gap-2 self-start sm:self-auto\">\n          <span className=\"text-muted-foreground text-xs font-medium\">Ends in:</span>\n          <div className=\"text-foreground flex items-center gap-1 font-mono text-xs font-semibold\">\n            <span className=\"border-border bg-background rounded border px-1.5 py-0.5 shadow-2xs\">\n              {timeLeft.hours}h\n            </span>\n            <span>:</span>\n            <span className=\"border-border bg-background rounded border px-1.5 py-0.5 shadow-2xs\">\n              {timeLeft.minutes}m\n            </span>\n            <span>:</span>\n            <span className=\"border-border bg-background text-destructive rounded border px-1.5 py-0.5 shadow-2xs\">\n              {timeLeft.seconds}s\n            </span>\n          </div>\n        </div>\n      </div>\n\n      <div className=\"space-y-4 p-4\">\n        {/* Claim Progress Bar */}\n        <div className=\"space-y-1.5\">\n          <div className=\"flex items-center justify-between text-xs\">\n            <span className=\"text-foreground flex items-center gap-1.5 font-medium\">\n              <Flame className=\"text-warning size-3.5\" />\n              <span>{claimedPercent}% Claimed</span>\n            </span>\n            <span className=\"text-destructive font-mono font-medium\">Only {itemsLeft} units remaining in stock</span>\n          </div>\n          <div className=\"bg-muted h-2 w-full overflow-hidden rounded-full\">\n            <div\n              className=\"h-full rounded-full bg-gradient-to-r from-orange-500 to-rose-500 transition-[width] duration-500\"\n              style={{ width: `${claimedPercent}%` }}\n            />\n          </div>\n        </div>\n\n        {/* Tier Multi-Buy Cards Grid */}\n        <div className=\"grid grid-cols-1 gap-2.5 sm:grid-cols-3\">\n          {tiers.map((tier) => (\n            <button\n              key={tier.id}\n              type=\"button\"\n              className={`relative flex flex-col justify-between rounded-lg border p-3 text-left transition-colors ${\n                selectedTierId === tier.id\n                  ? 'border-primary bg-primary/5 ring-primary ring-1'\n                  : 'border-border bg-card hover:border-muted-foreground/40 hover:bg-muted/30'\n              }`}\n              onClick={() => handleSelect(tier)}\n            >\n              {/* Popular ribbon */}\n              {tier.popular && (\n                <span className=\"border-border bg-primary text-primary-foreground absolute -top-2.5 right-3 rounded-full border px-2 py-0.5 text-xs font-semibold shadow-xs\">\n                  MOST POPULAR\n                </span>\n              )}\n\n              <div className=\"space-y-1\">\n                <div className=\"flex items-center justify-between\">\n                  <span className=\"text-foreground text-xs font-semibold\">\n                    Buy {tier.quantity} {tier.quantity > 1 ? 'Units' : 'Unit'}\n                  </span>\n                  <Badge variant=\"secondary\" className=\"text-success font-mono text-xs font-bold\">\n                    -{tier.discountPct}% OFF\n                  </Badge>\n                </div>\n                <div className=\"text-muted-foreground text-xs font-medium\">{tier.label}</div>\n              </div>\n\n              <div className=\"border-border/60 mt-3 flex items-center justify-between border-t pt-2 text-xs\">\n                <span className=\"text-muted-foreground\">{tier.badgeText}</span>\n                <div\n                  className={`flex size-4 items-center justify-center rounded-full border text-xs font-bold ${\n                    selectedTierId === tier.id\n                      ? 'border-primary bg-primary text-primary-foreground'\n                      : 'border-muted-foreground/40'\n                  }`}\n                >\n                  ✓\n                </div>\n              </div>\n            </button>\n          ))}\n        </div>\n\n        {/* Footer Guarantee & CTA Banner */}\n        <div className=\"border-border bg-muted/20 flex flex-col gap-2 rounded-lg border p-3 text-xs sm:flex-row sm:items-center sm:justify-between\">\n          <div className=\"text-muted-foreground flex items-center gap-2\">\n            <ShieldCheck className=\"text-success size-4\" />\n            <span>30-day price-match guarantee · Free express 2-day dispatch</span>\n          </div>\n          <Button size=\"sm\" className=\"gap-1.5 text-xs shadow-xs\" onClick={onClaimDeal}>\n            <Tag className=\"size-3.5\" />\n            <span>Apply Tier Discount to Cart</span>\n          </Button>\n        </div>\n      </div>\n    </div>\n  )\n}\n",
      "type": "registry:block",
      "target": "~/components/blocks/flash-sale-offer-bar/FlashSaleOfferBar.tsx"
    },
    {
      "path": "packages/registry-react/blocks/flash-sale-offer-bar/index.ts",
      "content": "export { FlashSaleOfferBar } from './FlashSaleOfferBar'\nexport type { TierOffer, FlashSaleProps } from './FlashSaleOfferBar'\n",
      "type": "registry:block",
      "target": "~/components/blocks/flash-sale-offer-bar/index.ts"
    }
  ],
  "dependencies": [
    "lucide-react"
  ],
  "devDependencies": [],
  "registryDependencies": [
    "https://uipkge.dev/r/react/badge.json",
    "https://uipkge.dev/r/react/button.json"
  ],
  "description": "Limited-time flash sale countdown deal bar with stock claim progress meter, tiered multi-buy volume discounts, and 1-click cart activation.",
  "categories": [
    "ecommerce",
    "marketing"
  ]
}