@medialane/ui 0.315.0 → 0.317.0

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

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"./link.js\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { CurrencyIcon } from \"./currency-icon.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\nimport { DualPrice } from \"./dual-price.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { isLivingRenderCollection } from \"../data/living-render-collections.js\";\nimport { assetHref as buildAssetHref, type ApiOrder, type Chain } from \"@medialane/sdk\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\n\ntype OrderWithAnimation = ApiOrder & { token: (ApiOrder[\"token\"] & { animationUrl?: string | null }) | null };\n\nfunction PriceLine({\n  amountFormatted, currency, usdValue,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n}) {\n  if (!amountFormatted) return null;\n  if (!usdValue) {\n    return (\n      <p className=\"text-2xs font-bold price-value inline-flex items-center gap-1\">\n        {currency && <CurrencyIcon symbol={currency} size={11} />}\n        {formatDisplayPrice(amountFormatted)}\n      </p>\n    );\n  }\n  const stable = isStableCurrency(currency);\n  return (\n    <>\n      <p className=\"text-2xs font-bold price-value\">\n        {usdValue}\n      </p>\n      <p className=\"text-2xs text-muted-foreground/70 inline-flex items-center gap-1\">\n        {currency && <CurrencyIcon symbol={currency} size={10} />}\n        {stable ? currency : `${formatDisplayPrice(amountFormatted)} ${currency}`}\n      </p>\n    </>\n  );\n}\n\nexport interface ListingCardProps {\n  order: ApiOrder;\n  inCart?: boolean;\n  onBuy?: (order: ApiOrder) => void;\n  onCart?: (order: ApiOrder) => void;\n\n  overflowMenu?: React.ReactNode;\n\n  primaryAction?: React.ReactNode;\n  compact?: boolean;\n\n  imageUrl?: string | null;\n\n  usdValue?: string | null;\n}\n\nexport function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl, usdValue }: ListingCardProps) {\n  const resolveImage = useImageUrl();\n  const order = rawOrder as OrderWithAnimation;\n  const [imgError, setImgError] = useState(false);\n  const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n  const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n  const image = imageUrl !== undefined ? imageUrl : (order.token?.image ? resolveImage(order.token.image, { width: 480 }) : null);\n\n  const animationUrl = order.token?.animationUrl ?? null;\n  const live = !!(order.chain && order.nftContract) && isLivingRenderCollection(order.chain.toUpperCase() as Chain, order.nftContract!);\n  const assetHref = buildAssetHref(\"STARKNET\", order.nftContract ?? \"\", order.nftTokenId ?? \"\");\n\n  const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n  if (compact) {\n    return (\n      <MotionCard className=\"card-base group\">\n        <Link href={assetHref} className=\"block\">\n          <div className=\"relative aspect-square bg-muted overflow-hidden\">\n            <AnimatedTokenMedia\n              image={image}\n              animationUrl={animationUrl}\n              live={live}\n              alt={name}\n              mode=\"fill\"\n              sizes=\"(max-width: 640px) 33vw, 20vw\"\n              className=\"object-cover\"\n              imgError={imgError}\n              onImageError={() => setImgError(true)}\n              fallback={\n                <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n              }\n            />\n          </div>\n          <div className=\"p-2.5 space-y-0.5\">\n            <p className=\"text-xs font-semibold line-clamp-2 break-words\">{name}</p>\n            <PriceLine amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n            <p className=\"text-2xs text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n          </div>\n        </Link>\n      </MotionCard>\n    );\n  }\n\n  return (\n    <MotionCard className=\"card-base group\">\n      <Link href={assetHref} className=\"block\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden\">\n          <AnimatedTokenMedia\n            image={image}\n            animationUrl={animationUrl}\n            live={live}\n            alt={name}\n            mode=\"fill\"\n            sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\"\n            className=\"object-cover\"\n            imgError={imgError}\n            onImageError={() => setImgError(true)}\n            fallback={\n              <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n            }\n          />\n        </div>\n\n        <div className=\"p-3.5 space-y-3\">\n          <div className=\"min-w-0\">\n            <p className=\"text-base font-semibold tracking-tight line-clamp-2 break-words leading-snug\">{name}</p>\n          </div>\n\n          {order.price?.formatted && (\n            <DualPrice amountFormatted={order.price.formatted} currency={order.price.currency} usdValue={usdValue} scale=\"card\" />\n          )}\n\n          {showActionBar && (\n            <div className=\"flex items-center gap-1.5\">\n              {isListing ? (\n                primaryAction ? (\n                  primaryAction\n                ) : onBuy ? (\n                  <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n                    <button\n                      className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                      onClick={(e) => { e.preventDefault(); onBuy(order); }}\n                    >\n                      <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n                    </button>\n                  </div>\n                ) : (\n                  <Link\n                    href={assetHref}\n                    className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                  >\n                    <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n                  </Link>\n                )\n              ) : (\n                <Link\n                  href={assetHref}\n                  className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                >\n                  <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n                </Link>\n              )}\n              {onCart && (\n                <button\n                  className={cn(\n                    \"min-h-11 min-w-11 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n                    inCart\n                      ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n                      : \"border-border bg-background hover:bg-muted text-foreground\"\n                  )}\n                  onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n                  disabled={inCart}\n                  aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n                >\n                  {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n                </button>\n              )}\n              {overflowMenu}\n            </div>\n          )}\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function ListingCardSkeleton() {\n  return (\n    <div className=\"card-base\">\n      <div className=\"aspect-square w-full bg-muted animate-pulse\" />\n      <div className=\"p-3 space-y-2.5\">\n        <div className=\"space-y-1\">\n          <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n          <div className=\"h-3 w-1/2 bg-muted animate-pulse rounded\" />\n        </div>\n        <div className=\"h-6 w-1/2 bg-muted animate-pulse rounded\" />\n        <div className=\"h-3 w-2/3 bg-muted animate-pulse rounded\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":";AA4BM,SAQF,UAPiB,KADf;AA1BN,SAAS,gBAAgB;AACzB,OAAO,UAAU;AACjB,SAAS,cAAc,OAAO,KAAK,oBAAoB;AACvD,SAAS,kBAAkB;AAC3B,SAAS,oBAAoB;AAC7B,SAAS,0BAA0B;AACnC,SAAS,UAAU;AACnB,SAAS,oBAAoB,wBAAwB;AACrD,SAAS,iBAAiB;AAC1B,SAAS,eAAe;AACxB,SAAS,gCAAgC;AACzC,SAAS,aAAa,sBAAiD;AACvE,SAAS,mBAAmB;AAI5B,SAAS,UAAU;AAAA,EACjB;AAAA,EAAiB;AAAA,EAAU;AAC7B,GAIG;AACD,MAAI,CAAC,gBAAiB,QAAO;AAC7B,MAAI,CAAC,UAAU;AACb,WACE,qBAAC,OAAE,WAAU,iEACV;AAAA,kBAAY,oBAAC,gBAAa,QAAQ,UAAU,MAAM,IAAI;AAAA,MACtD,mBAAmB,eAAe;AAAA,OACrC;AAAA,EAEJ;AACA,QAAM,SAAS,iBAAiB,QAAQ;AACxC,SACE,iCACE;AAAA,wBAAC,OAAE,WAAU,kCACV,oBACH;AAAA,IACA,qBAAC,OAAE,WAAU,oEACV;AAAA,kBAAY,oBAAC,gBAAa,QAAQ,UAAU,MAAM,IAAI;AAAA,MACtD,SAAS,WAAW,GAAG,mBAAmB,eAAe,CAAC,IAAI,QAAQ;AAAA,OACzE;AAAA,KACF;AAEJ;AAkBO,SAAS,YAAY,EAAE,OAAO,UAAU,SAAS,OAAO,OAAO,QAAQ,cAAc,eAAe,UAAU,OAAO,UAAU,SAAS,GAAqB;AAClK,QAAM,eAAe,YAAY;AACjC,QAAM,QAAQ;AACd,QAAM,CAAC,UAAU,WAAW,IAAI,SAAS,KAAK;AAC9C,QAAM,YAAY,MAAM,MAAM,aAAa,YAAY,MAAM,MAAM,aAAa;AAChF,QAAM,OAAO,MAAM,OAAO,QAAQ,UAAU,MAAM,UAAU;AAC5D,QAAM,QAAQ,aAAa,SAAY,WAAY,MAAM,OAAO,QAAQ,aAAa,MAAM,MAAM,OAAO,EAAE,OAAO,IAAI,CAAC,IAAI;AAE1H,QAAM,eAAe,MAAM,OAAO,gBAAgB;AAClD,QAAM,OAAO,CAAC,EAAE,MAAM,SAAS,MAAM,gBAAgB,yBAAyB,MAAM,MAAM,YAAY,GAAY,MAAM,WAAY;AACpI,QAAM,YAAY,eAAe,YAAY,MAAM,eAAe,IAAI,MAAM,cAAc,EAAE;AAE5F,QAAM,gBAAgB,CAAC,EAAE,SAAS,UAAU,gBAAgB;AAE5D,MAAI,SAAS;AACX,WACE,oBAAC,cAAW,WAAU,mBACpB,+BAAC,QAAK,MAAM,WAAW,WAAU,SAC/B;AAAA,0BAAC,SAAI,WAAU,mDACb;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA;AAAA,UACA;AAAA,UACA,KAAK;AAAA,UACL,MAAK;AAAA,UACL,OAAM;AAAA,UACN,WAAU;AAAA,UACV;AAAA,UACA,cAAc,MAAM,YAAY,IAAI;AAAA,UACpC,UACE,oBAAC,SAAI,WAAU,4EAA2E;AAAA;AAAA,MAE9F,GACF;AAAA,MACA,qBAAC,SAAI,WAAU,qBACb;AAAA,4BAAC,OAAE,WAAU,kDAAkD,gBAAK;AAAA,QACpE,oBAAC,aAAU,iBAAiB,MAAM,OAAO,WAAW,UAAU,MAAM,OAAO,UAAU,UAAoB;AAAA,QACzG,oBAAC,OAAE,WAAU,kCAAkC,kBAAQ,MAAM,SAAS,GAAE;AAAA,SAC1E;AAAA,OACF,GACF;AAAA,EAEJ;AAEA,SACE,oBAAC,cAAW,WAAU,mBACpB,+BAAC,QAAK,MAAM,WAAW,WAAU,SAC/B;AAAA,wBAAC,SAAI,WAAU,mDACb;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA;AAAA,QACA;AAAA,QACA,KAAK;AAAA,QACL,MAAK;AAAA,QACL,OAAM;AAAA,QACN,WAAU;AAAA,QACV;AAAA,QACA,cAAc,MAAM,YAAY,IAAI;AAAA,QACpC,UACE,oBAAC,SAAI,WAAU,4EAA2E;AAAA;AAAA,IAE9F,GACF;AAAA,IAEA,qBAAC,SAAI,WAAU,mBACb;AAAA,0BAAC,SAAI,WAAU,WACb,8BAAC,OAAE,WAAU,gFAAgF,gBAAK,GACpG;AAAA,MAEC,MAAM,OAAO,aACZ,oBAAC,aAAU,iBAAiB,MAAM,MAAM,WAAW,UAAU,MAAM,MAAM,UAAU,UAAoB,OAAM,QAAO;AAAA,MAGrH,iBACC,qBAAC,SAAI,WAAU,6BACZ;AAAA,oBACC,gBACE,gBACE,QACF,oBAAC,SAAI,WAAU,2DACb;AAAA,UAAC;AAAA;AAAA,YACC,WAAU;AAAA,YACV,SAAS,CAAC,MAAM;AAAE,gBAAE,eAAe;AAAG,oBAAM,KAAK;AAAA,YAAG;AAAA,YAEpD;AAAA,kCAAC,OAAI,WAAU,wBAAuB;AAAA,cAAE;AAAA;AAAA;AAAA,QAC1C,GACF,IAEA;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,kCAAC,gBAAa,WAAU,wBAAuB;AAAA,cAAE;AAAA;AAAA;AAAA,QACnD,IAGF;AAAA,UAAC;AAAA;AAAA,YACC,MAAM;AAAA,YACN,WAAU;AAAA,YAEV;AAAA,kCAAC,gBAAa,WAAU,wBAAuB;AAAA,cAAE;AAAA;AAAA;AAAA,QACnD;AAAA,QAED,UACC;AAAA,UAAC;AAAA;AAAA,YACC,WAAW;AAAA,cACT;AAAA,cACA,SACI,gEACA;AAAA,YACN;AAAA,YACA,SAAS,CAAC,MAAM;AAAE,gBAAE,eAAe;AAAG,kBAAI,CAAC,OAAQ,QAAO,KAAK;AAAA,YAAG;AAAA,YAClE,UAAU;AAAA,YACV,cAAY,SAAS,kBAAkB;AAAA,YAEtC,mBAAS,oBAAC,SAAM,WAAU,eAAc,IAAK,oBAAC,gBAAa,WAAU,eAAc;AAAA;AAAA,QACtF;AAAA,QAED;AAAA,SACH;AAAA,OAEJ;AAAA,KACF,GACF;AAEJ;AAEO,SAAS,sBAAsB;AACpC,SACE,qBAAC,SAAI,WAAU,aACb;AAAA,wBAAC,SAAI,WAAU,+CAA8C;AAAA,IAC7D,qBAAC,SAAI,WAAU,mBACb;AAAA,2BAAC,SAAI,WAAU,aACb;AAAA,4BAAC,SAAI,WAAU,4CAA2C;AAAA,QAC1D,oBAAC,SAAI,WAAU,4CAA2C;AAAA,SAC5D;AAAA,MACA,oBAAC,SAAI,WAAU,4CAA2C;AAAA,MAC1D,oBAAC,SAAI,WAAU,4CAA2C;AAAA,OAC5D;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/listing-card.tsx"],"sourcesContent":["\"use client\";\n\nimport { useState } from \"react\";\nimport Link from \"./link.js\";\nimport { ShoppingCart, Check, Zap, ArrowUpRight } from \"lucide-react\";\nimport { MotionCard } from \"./motion-primitives.js\";\nimport { AnimatedTokenMedia } from \"./animated-token-media.js\";\nimport { cn } from \"../utils/cn.js\";\nimport { formatDisplayPrice, isStableCurrency } from \"../utils/format.js\";\nimport { timeAgo } from \"../utils/time.js\";\nimport { isLivingRenderCollection } from \"../data/living-render-collections.js\";\nimport { assetHref as buildAssetHref, type ApiOrder, type Chain } from \"@medialane/sdk\";\nimport { useImageUrl } from \"../utils/use-image-url.js\";\n\ntype OrderWithAnimation = ApiOrder & { token: (ApiOrder[\"token\"] & { animationUrl?: string | null }) | null };\n\nfunction CardPrice({\n  amountFormatted, currency, usdValue,\n}: {\n  amountFormatted: string | null | undefined;\n  currency: string | null | undefined;\n  usdValue?: string | null;\n}) {\n  if (!amountFormatted) return null;\n  const amount = formatDisplayPrice(amountFormatted);\n  const primary = usdValue ?? amount;\n  const secondary = !usdValue ? currency : isStableCurrency(currency) ? currency : `${amount} ${currency}`;\n  return (\n    <p className=\"flex items-baseline gap-1.5 tabular-nums\">\n      <span className=\"text-base font-bold tracking-tight\">{primary}</span>\n      {secondary && <span className=\"text-xs text-muted-foreground\">{secondary}</span>}\n    </p>\n  );\n}\n\nexport interface ListingCardProps {\n  order: ApiOrder;\n  inCart?: boolean;\n  onBuy?: (order: ApiOrder) => void;\n  onCart?: (order: ApiOrder) => void;\n\n  overflowMenu?: React.ReactNode;\n\n  primaryAction?: React.ReactNode;\n  compact?: boolean;\n\n  imageUrl?: string | null;\n\n  usdValue?: string | null;\n}\n\nexport function ListingCard({ order: rawOrder, inCart = false, onBuy, onCart, overflowMenu, primaryAction, compact = false, imageUrl, usdValue }: ListingCardProps) {\n  const resolveImage = useImageUrl();\n  const order = rawOrder as OrderWithAnimation;\n  const [imgError, setImgError] = useState(false);\n  const isListing = order.offer.itemType === \"ERC721\" || order.offer.itemType === \"ERC1155\";\n  const name = order.token?.name ?? `Token #${order.nftTokenId}`;\n  const image = imageUrl !== undefined ? imageUrl : (order.token?.image ? resolveImage(order.token.image, { width: 480 }) : null);\n\n  const animationUrl = order.token?.animationUrl ?? null;\n  const live = !!(order.chain && order.nftContract) && isLivingRenderCollection(order.chain.toUpperCase() as Chain, order.nftContract!);\n  const assetHref = buildAssetHref(\"STARKNET\", order.nftContract ?? \"\", order.nftTokenId ?? \"\");\n\n  const showActionBar = !!(onBuy || onCart || overflowMenu || primaryAction);\n\n  if (compact) {\n    return (\n      <MotionCard className=\"group\">\n        <Link href={assetHref} className=\"block\">\n          <div className=\"relative aspect-square bg-muted overflow-hidden rounded-xl\">\n            <AnimatedTokenMedia\n              image={image}\n              animationUrl={animationUrl}\n              live={live}\n              alt={name}\n              mode=\"fill\"\n              sizes=\"(max-width: 640px) 33vw, 20vw\"\n              className=\"object-cover\"\n              imgError={imgError}\n              onImageError={() => setImgError(true)}\n              fallback={\n                <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n              }\n            />\n          </div>\n          <div className=\"px-0.5 pt-2.5 space-y-0.5\">\n            <p className=\"text-xs font-medium truncate\">{name}</p>\n            <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n            <p className=\"text-2xs text-muted-foreground\">{timeAgo(order.createdAt)}</p>\n          </div>\n        </Link>\n      </MotionCard>\n    );\n  }\n\n  return (\n    <MotionCard className=\"group\">\n      <Link href={assetHref} className=\"block\">\n        <div className=\"relative aspect-square bg-muted overflow-hidden rounded-xl\">\n          <AnimatedTokenMedia\n            image={image}\n            animationUrl={animationUrl}\n            live={live}\n            alt={name}\n            mode=\"fill\"\n            sizes=\"(max-width: 640px) 50vw, (max-width: 1024px) 33vw, 25vw\"\n            className=\"object-cover\"\n            imgError={imgError}\n            onImageError={() => setImgError(true)}\n            fallback={\n              <div className=\"absolute inset-0 bg-gradient-to-br from-brand-purple/15 to-brand-blue/15\" />\n            }\n          />\n        </div>\n\n        <div className=\"px-0.5 pt-3 space-y-2.5\">\n          <div className=\"min-w-0 space-y-1\">\n            <p className=\"text-sm font-medium truncate\">{name}</p>\n            <CardPrice amountFormatted={order.price?.formatted} currency={order.price?.currency} usdValue={usdValue} />\n          </div>\n\n          {showActionBar && (\n            <div className=\"flex items-center gap-1.5\">\n              {isListing ? (\n                primaryAction ? (\n                  primaryAction\n                ) : onBuy ? (\n                  <div className=\"btn-border-animated p-[1.5px] rounded-[10px] flex-1 h-9\">\n                    <button\n                      className=\"w-full h-full rounded-[9px] bg-background flex items-center justify-center gap-1.5 text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                      onClick={(e) => { e.preventDefault(); onBuy(order); }}\n                    >\n                      <Zap className=\"h-3.5 w-3.5 shrink-0\" /> Buy\n                    </button>\n                  </div>\n                ) : (\n                  <Link\n                    href={assetHref}\n                    className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                  >\n                    <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View\n                  </Link>\n                )\n              ) : (\n                <Link\n                  href={assetHref}\n                  className=\"flex-1 h-9 inline-flex items-center justify-center gap-1.5 rounded-[9px] border border-border bg-background text-xs font-semibold text-foreground hover:bg-muted/60 transition-all active:scale-[0.98]\"\n                >\n                  <ArrowUpRight className=\"h-3.5 w-3.5 shrink-0\" /> View asset\n                </Link>\n              )}\n              {onCart && (\n                <button\n                  className={cn(\n                    \"min-h-11 min-w-11 shrink-0 rounded-[9px] border flex items-center justify-center transition-colors\",\n                    inCart\n                      ? \"border-brand-orange/50 bg-brand-orange/10 text-brand-orange\"\n                      : \"border-border bg-background hover:bg-muted text-foreground\"\n                  )}\n                  onClick={(e) => { e.preventDefault(); if (!inCart) onCart(order); }}\n                  disabled={inCart}\n                  aria-label={inCart ? \"Added to cart\" : \"Add to cart\"}\n                >\n                  {inCart ? <Check className=\"h-3.5 w-3.5\" /> : <ShoppingCart className=\"h-3.5 w-3.5\" />}\n                </button>\n              )}\n              {overflowMenu}\n            </div>\n          )}\n        </div>\n      </Link>\n    </MotionCard>\n  );\n}\n\nexport function ListingCardSkeleton() {\n  return (\n    <div>\n      <div className=\"aspect-square w-full rounded-xl bg-muted animate-pulse\" />\n      <div className=\"px-0.5 pt-3 space-y-2.5\">\n        <div className=\"space-y-1\">\n          <div className=\"h-4 w-3/4 bg-muted animate-pulse rounded\" />\n          <div className=\"h-5 w-1/2 bg-muted animate-pulse rounded\" />\n        </div>\n        <div className=\"h-9 w-full bg-muted animate-pulse rounded-[9px]\" />\n      </div>\n    </div>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/components/scroll-section.cjs

@@ -1,10 +1,8 @@
 "use strict";
 "use client";
-var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -18,14 +16,6 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var scroll_section_exports = {};
 __export(scroll_section_exports, {
@@ -33,39 +23,10 @@ __export(scroll_section_exports, {
 });
 module.exports = __toCommonJS(scroll_section_exports);
 var import_jsx_runtime = require("react/jsx-runtime");
-var import_link = __toESM(require("./link.js"), 1);
-var import_lucide_react = require("lucide-react");
-function ScrollSection({
-  icon,
-  iconBg,
-  title,
-  subtitle,
-  href,
-  linkLabel = "See all",
-  children
-}) {
+var import_section_heading = require("./section-heading.js");
+function ScrollSection({ icon, title, subtitle, href, linkLabel, children }) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("section", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: `h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`, children: icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-lg sm:text-xl font-semibold leading-none", children: title }),
-          subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "text-2xs text-muted-foreground mt-1", children: subtitle })
-        ] })
-      ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
-        import_link.default,
-        {
-          href,
-          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
-          children: [
-            linkLabel,
-            " ",
-            /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3.5 w-3.5" })
-          ]
-        }
-      )
-    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_section_heading.SectionHeading, { icon, title, subtitle, href, linkLabel }),
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "w-full overflow-x-auto scrollbar-hide", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2", style: { width: "max-content" }, children }) })
   ] });
 }

package/dist/components/scroll-section.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/scroll-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport interface ScrollSectionProps {\n\n  icon: React.ReactNode;\n\n  iconBg: string;\n  title: string;\n\n  subtitle?: React.ReactNode;\n\n  href: string;\n\n  linkLabel?: string;\n\n  children: React.ReactNode;\n}\n\nexport function ScrollSection({\n  icon,\n  iconBg,\n  title,\n  subtitle,\n  href,\n  linkLabel = \"See all\",\n  children,\n}: ScrollSectionProps) {\n  return (\n    <section className=\"space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className={`h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`}>\n            {icon}\n          </div>\n          <div>\n            <h2 className=\"text-lg sm:text-xl font-semibold leading-none\">{title}</h2>\n            {subtitle && <p className=\"text-2xs text-muted-foreground mt-1\">{subtitle}</p>}\n          </div>\n        </div>\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n        >\n          {linkLabel} <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      <div className=\"w-full overflow-x-auto scrollbar-hide\">\n        <div className=\"flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2\" style={{ width: \"max-content\" }}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAkCU;AAhCV,kBAAiB;AACjB,0BAA2B;AAkBpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAuB;AACrB,SACE,6CAAC,aAAQ,WAAU,aACjB;AAAA,iDAAC,SAAI,WAAU,qCACb;AAAA,mDAAC,SAAI,WAAU,6BACb;AAAA,oDAAC,SAAI,WAAW,uDAAuD,MAAM,IAC1E,gBACH;AAAA,QACA,6CAAC,SACC;AAAA,sDAAC,QAAG,WAAU,iDAAiD,iBAAM;AAAA,UACpE,YAAY,4CAAC,OAAE,WAAU,uCAAuC,oBAAS;AAAA,WAC5E;AAAA,SACF;AAAA,MACA;AAAA,QAAC,YAAAA;AAAA,QAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,YAAU;AAAA,YAAC,4CAAC,kCAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAClD;AAAA,OACF;AAAA,IAEA,4CAAC,SAAI,WAAU,yCACb,sDAAC,SAAI,WAAU,kDAAiD,OAAO,EAAE,OAAO,cAAc,GAC3F,UACH,GACF;AAAA,KACF;AAEJ;","names":["Link"]}
+{"version":3,"sources":["../../src/components/scroll-section.tsx"],"sourcesContent":["\"use client\";\n\nimport { SectionHeading } from \"./section-heading.js\";\n\nexport interface ScrollSectionProps {\n  icon: React.ReactNode;\n  title: string;\n  subtitle?: React.ReactNode;\n  href: string;\n  linkLabel?: string;\n  children: React.ReactNode;\n}\n\nexport function ScrollSection({ icon, title, subtitle, href, linkLabel, children }: ScrollSectionProps) {\n  return (\n    <section className=\"space-y-4\">\n      <SectionHeading icon={icon} title={title} subtitle={subtitle} href={href} linkLabel={linkLabel} />\n\n      <div className=\"w-full overflow-x-auto scrollbar-hide\">\n        <div className=\"flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2\" style={{ width: \"max-content\" }}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAeI;AAbJ,6BAA+B;AAWxB,SAAS,cAAc,EAAE,MAAM,OAAO,UAAU,MAAM,WAAW,SAAS,GAAuB;AACtG,SACE,6CAAC,aAAQ,WAAU,aACjB;AAAA,gDAAC,yCAAe,MAAY,OAAc,UAAoB,MAAY,WAAsB;AAAA,IAEhG,4CAAC,SAAI,WAAU,yCACb,sDAAC,SAAI,WAAU,kDAAiD,OAAO,EAAE,OAAO,cAAc,GAC3F,UACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/scroll-section.d.cts

@@ -2,13 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ScrollSectionProps {
     icon: React.ReactNode;
-    iconBg: string;
     title: string;
     subtitle?: React.ReactNode;
     href: string;
     linkLabel?: string;
     children: React.ReactNode;
 }
-declare function ScrollSection({ icon, iconBg, title, subtitle, href, linkLabel, children, }: ScrollSectionProps): react_jsx_runtime.JSX.Element;
+declare function ScrollSection({ icon, title, subtitle, href, linkLabel, children }: ScrollSectionProps): react_jsx_runtime.JSX.Element;
 
 export { ScrollSection, type ScrollSectionProps };

package/dist/components/scroll-section.d.ts

@@ -2,13 +2,12 @@ import * as react_jsx_runtime from 'react/jsx-runtime';
 
 interface ScrollSectionProps {
     icon: React.ReactNode;
-    iconBg: string;
     title: string;
     subtitle?: React.ReactNode;
     href: string;
     linkLabel?: string;
     children: React.ReactNode;
 }
-declare function ScrollSection({ icon, iconBg, title, subtitle, href, linkLabel, children, }: ScrollSectionProps): react_jsx_runtime.JSX.Element;
+declare function ScrollSection({ icon, title, subtitle, href, linkLabel, children }: ScrollSectionProps): react_jsx_runtime.JSX.Element;
 
 export { ScrollSection, type ScrollSectionProps };

package/dist/components/scroll-section.js

@@ -1,38 +1,9 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import Link from "./link.js";
-import { ArrowRight } from "lucide-react";
-function ScrollSection({
-  icon,
-  iconBg,
-  title,
-  subtitle,
-  href,
-  linkLabel = "See all",
-  children
-}) {
+import { SectionHeading } from "./section-heading.js";
+function ScrollSection({ icon, title, subtitle, href, linkLabel, children }) {
   return /* @__PURE__ */ jsxs("section", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between", children: [
-      /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2.5", children: [
-        /* @__PURE__ */ jsx("div", { className: `h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`, children: icon }),
-        /* @__PURE__ */ jsxs("div", { children: [
-          /* @__PURE__ */ jsx("h2", { className: "text-lg sm:text-xl font-semibold leading-none", children: title }),
-          subtitle && /* @__PURE__ */ jsx("p", { className: "text-2xs text-muted-foreground mt-1", children: subtitle })
-        ] })
-      ] }),
-      /* @__PURE__ */ jsxs(
-        Link,
-        {
-          href,
-          className: "inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors",
-          children: [
-            linkLabel,
-            " ",
-            /* @__PURE__ */ jsx(ArrowRight, { className: "h-3.5 w-3.5" })
-          ]
-        }
-      )
-    ] }),
+    /* @__PURE__ */ jsx(SectionHeading, { icon, title, subtitle, href, linkLabel }),
     /* @__PURE__ */ jsx("div", { className: "w-full overflow-x-auto scrollbar-hide", children: /* @__PURE__ */ jsx("div", { className: "flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2", style: { width: "max-content" }, children }) })
   ] });
 }

package/dist/components/scroll-section.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/components/scroll-section.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport interface ScrollSectionProps {\n\n  icon: React.ReactNode;\n\n  iconBg: string;\n  title: string;\n\n  subtitle?: React.ReactNode;\n\n  href: string;\n\n  linkLabel?: string;\n\n  children: React.ReactNode;\n}\n\nexport function ScrollSection({\n  icon,\n  iconBg,\n  title,\n  subtitle,\n  href,\n  linkLabel = \"See all\",\n  children,\n}: ScrollSectionProps) {\n  return (\n    <section className=\"space-y-4\">\n      <div className=\"flex items-center justify-between\">\n        <div className=\"flex items-center gap-2.5\">\n          <div className={`h-7 w-7 rounded-lg flex items-center justify-center ${iconBg}`}>\n            {icon}\n          </div>\n          <div>\n            <h2 className=\"text-lg sm:text-xl font-semibold leading-none\">{title}</h2>\n            {subtitle && <p className=\"text-2xs text-muted-foreground mt-1\">{subtitle}</p>}\n          </div>\n        </div>\n        <Link\n          href={href}\n          className=\"inline-flex items-center gap-1 text-sm text-muted-foreground hover:text-foreground px-3 py-1.5 rounded-md hover:bg-accent transition-colors\"\n        >\n          {linkLabel} <ArrowRight className=\"h-3.5 w-3.5\" />\n        </Link>\n      </div>\n\n      <div className=\"w-full overflow-x-auto scrollbar-hide\">\n        <div className=\"flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2\" style={{ width: \"max-content\" }}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AAkCU,cAGA,YAHA;AAhCV,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAkBpB,SAAS,cAAc;AAAA,EAC5B;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ;AACF,GAAuB;AACrB,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,yBAAC,SAAI,WAAU,qCACb;AAAA,2BAAC,SAAI,WAAU,6BACb;AAAA,4BAAC,SAAI,WAAW,uDAAuD,MAAM,IAC1E,gBACH;AAAA,QACA,qBAAC,SACC;AAAA,8BAAC,QAAG,WAAU,iDAAiD,iBAAM;AAAA,UACpE,YAAY,oBAAC,OAAE,WAAU,uCAAuC,oBAAS;AAAA,WAC5E;AAAA,SACF;AAAA,MACA;AAAA,QAAC;AAAA;AAAA,UACC;AAAA,UACA,WAAU;AAAA,UAET;AAAA;AAAA,YAAU;AAAA,YAAC,oBAAC,cAAW,WAAU,eAAc;AAAA;AAAA;AAAA,MAClD;AAAA,OACF;AAAA,IAEA,oBAAC,SAAI,WAAU,yCACb,8BAAC,SAAI,WAAU,kDAAiD,OAAO,EAAE,OAAO,cAAc,GAC3F,UACH,GACF;AAAA,KACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/components/scroll-section.tsx"],"sourcesContent":["\"use client\";\n\nimport { SectionHeading } from \"./section-heading.js\";\n\nexport interface ScrollSectionProps {\n  icon: React.ReactNode;\n  title: string;\n  subtitle?: React.ReactNode;\n  href: string;\n  linkLabel?: string;\n  children: React.ReactNode;\n}\n\nexport function ScrollSection({ icon, title, subtitle, href, linkLabel, children }: ScrollSectionProps) {\n  return (\n    <section className=\"space-y-4\">\n      <SectionHeading icon={icon} title={title} subtitle={subtitle} href={href} linkLabel={linkLabel} />\n\n      <div className=\"w-full overflow-x-auto scrollbar-hide\">\n        <div className=\"flex gap-5 sm:gap-6 snap-x snap-mandatory pb-2\" style={{ width: \"max-content\" }}>\n          {children}\n        </div>\n      </div>\n    </section>\n  );\n}\n"],"mappings":";AAeI,SACE,KADF;AAbJ,SAAS,sBAAsB;AAWxB,SAAS,cAAc,EAAE,MAAM,OAAO,UAAU,MAAM,WAAW,SAAS,GAAuB;AACtG,SACE,qBAAC,aAAQ,WAAU,aACjB;AAAA,wBAAC,kBAAe,MAAY,OAAc,UAAoB,MAAY,WAAsB;AAAA,IAEhG,oBAAC,SAAI,WAAU,yCACb,8BAAC,SAAI,WAAU,kDAAiD,OAAO,EAAE,OAAO,cAAc,GAC3F,UACH,GACF;AAAA,KACF;AAEJ;","names":[]}

package/dist/components/section-heading.cjs

@@ -0,0 +1,65 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var section_heading_exports = {};
+__export(section_heading_exports, {
+  SectionHeading: () => SectionHeading
+});
+module.exports = __toCommonJS(section_heading_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_link = __toESM(require("./link.js"), 1);
+var import_lucide_react = require("lucide-react");
+function SectionHeading({ icon, title, subtitle, href, linkLabel = "See all" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("span", { className: "shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: icon }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsx)("h2", { className: "text-sm font-semibold leading-none tracking-tight text-foreground", children: title }),
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("p", { className: "mt-1 flex items-center gap-1 text-2xs text-muted-foreground", children: subtitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+      import_link.default,
+      {
+        href,
+        className: "inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground",
+        children: [
+          linkLabel,
+          " ",
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_lucide_react.ArrowRight, { className: "h-3 w-3" })
+        ]
+      }
+    )
+  ] });
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SectionHeading
+});
+//# sourceMappingURL=section-heading.cjs.map

package/dist/components/section-heading.cjs.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/section-heading.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport interface SectionHeadingProps {\n  icon: React.ReactNode;\n  title: string;\n  subtitle?: React.ReactNode;\n  href: string;\n  linkLabel?: string;\n}\n\nexport function SectionHeading({ icon, title, subtitle, href, linkLabel = \"See all\" }: SectionHeadingProps) {\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <span className=\"shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">{icon}</span>\n        <div className=\"min-w-0\">\n          <h2 className=\"text-sm font-semibold leading-none tracking-tight text-foreground\">{title}</h2>\n          {subtitle && <p className=\"mt-1 flex items-center gap-1 text-2xs text-muted-foreground\">{subtitle}</p>}\n        </div>\n      </div>\n      <Link\n        href={href}\n        className=\"inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground\"\n      >\n        {linkLabel} <ArrowRight className=\"h-3 w-3\" />\n      </Link>\n    </div>\n  );\n}\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBQ;AAfR,kBAAiB;AACjB,0BAA2B;AAUpB,SAAS,eAAe,EAAE,MAAM,OAAO,UAAU,MAAM,YAAY,UAAU,GAAwB;AAC1G,SACE,6CAAC,SAAI,WAAU,2CACb;AAAA,iDAAC,SAAI,WAAU,mCACb;AAAA,kDAAC,UAAK,WAAU,0DAA0D,gBAAK;AAAA,MAC/E,6CAAC,SAAI,WAAU,WACb;AAAA,oDAAC,QAAG,WAAU,qEAAqE,iBAAM;AAAA,QACxF,YAAY,4CAAC,OAAE,WAAU,+DAA+D,oBAAS;AAAA,SACpG;AAAA,OACF;AAAA,IACA;AAAA,MAAC,YAAAA;AAAA,MAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAET;AAAA;AAAA,UAAU;AAAA,UAAC,4CAAC,kCAAW,WAAU,WAAU;AAAA;AAAA;AAAA,IAC9C;AAAA,KACF;AAEJ;","names":["Link"]}

package/dist/components/section-heading.d.cts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SectionHeadingProps {
+    icon: React.ReactNode;
+    title: string;
+    subtitle?: React.ReactNode;
+    href: string;
+    linkLabel?: string;
+}
+declare function SectionHeading({ icon, title, subtitle, href, linkLabel }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
+
+export { SectionHeading, type SectionHeadingProps };

package/dist/components/section-heading.d.ts

@@ -0,0 +1,12 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+interface SectionHeadingProps {
+    icon: React.ReactNode;
+    title: string;
+    subtitle?: React.ReactNode;
+    href: string;
+    linkLabel?: string;
+}
+declare function SectionHeading({ icon, title, subtitle, href, linkLabel }: SectionHeadingProps): react_jsx_runtime.JSX.Element;
+
+export { SectionHeading, type SectionHeadingProps };

package/dist/components/section-heading.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Link from "./link.js";
+import { ArrowRight } from "lucide-react";
+function SectionHeading({ icon, title, subtitle, href, linkLabel = "See all" }) {
+  return /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-3", children: [
+    /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4", children: icon }),
+      /* @__PURE__ */ jsxs("div", { className: "min-w-0", children: [
+        /* @__PURE__ */ jsx("h2", { className: "text-sm font-semibold leading-none tracking-tight text-foreground", children: title }),
+        subtitle && /* @__PURE__ */ jsx("p", { className: "mt-1 flex items-center gap-1 text-2xs text-muted-foreground", children: subtitle })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsxs(
+      Link,
+      {
+        href,
+        className: "inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground",
+        children: [
+          linkLabel,
+          " ",
+          /* @__PURE__ */ jsx(ArrowRight, { className: "h-3 w-3" })
+        ]
+      }
+    )
+  ] });
+}
+export {
+  SectionHeading
+};
+//# sourceMappingURL=section-heading.js.map

package/dist/components/section-heading.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/components/section-heading.tsx"],"sourcesContent":["\"use client\";\n\nimport Link from \"./link.js\";\nimport { ArrowRight } from \"lucide-react\";\n\nexport interface SectionHeadingProps {\n  icon: React.ReactNode;\n  title: string;\n  subtitle?: React.ReactNode;\n  href: string;\n  linkLabel?: string;\n}\n\nexport function SectionHeading({ icon, title, subtitle, href, linkLabel = \"See all\" }: SectionHeadingProps) {\n  return (\n    <div className=\"flex items-center justify-between gap-3\">\n      <div className=\"flex min-w-0 items-center gap-2\">\n        <span className=\"shrink-0 text-muted-foreground [&>svg]:h-4 [&>svg]:w-4\">{icon}</span>\n        <div className=\"min-w-0\">\n          <h2 className=\"text-sm font-semibold leading-none tracking-tight text-foreground\">{title}</h2>\n          {subtitle && <p className=\"mt-1 flex items-center gap-1 text-2xs text-muted-foreground\">{subtitle}</p>}\n        </div>\n      </div>\n      <Link\n        href={href}\n        className=\"inline-flex shrink-0 items-center gap-1 text-xs text-muted-foreground transition-colors hover:text-foreground\"\n      >\n        {linkLabel} <ArrowRight className=\"h-3 w-3\" />\n      </Link>\n    </div>\n  );\n}\n"],"mappings":";AAiBQ,cACA,YADA;AAfR,OAAO,UAAU;AACjB,SAAS,kBAAkB;AAUpB,SAAS,eAAe,EAAE,MAAM,OAAO,UAAU,MAAM,YAAY,UAAU,GAAwB;AAC1G,SACE,qBAAC,SAAI,WAAU,2CACb;AAAA,yBAAC,SAAI,WAAU,mCACb;AAAA,0BAAC,UAAK,WAAU,0DAA0D,gBAAK;AAAA,MAC/E,qBAAC,SAAI,WAAU,WACb;AAAA,4BAAC,QAAG,WAAU,qEAAqE,iBAAM;AAAA,QACxF,YAAY,oBAAC,OAAE,WAAU,+DAA+D,oBAAS;AAAA,SACpG;AAAA,OACF;AAAA,IACA;AAAA,MAAC;AAAA;AAAA,QACC;AAAA,QACA,WAAU;AAAA,QAET;AAAA;AAAA,UAAU;AAAA,UAAC,oBAAC,cAAW,WAAU,WAAU;AAAA;AAAA;AAAA,IAC9C;AAAA,KACF;AAEJ;","names":[]}

package/dist/utils/media-wallet/use-erc20-balance.d.cts

@@ -7,7 +7,7 @@ declare function useTokenBalance(symbol: string | null, holderAddress: string |
     rawBalance: bigint | null;
     isLoading: boolean;
     error: any;
-    decimals: 8 | 6 | 18;
+    decimals: 6 | 8 | 18;
 };
 declare function hasSufficientBalance(rawBalance: bigint | null, requiredHuman: string, decimals: number): boolean | null;
 

package/dist/utils/media-wallet/use-erc20-balance.d.ts

@@ -7,7 +7,7 @@ declare function useTokenBalance(symbol: string | null, holderAddress: string |
     rawBalance: bigint | null;
     isLoading: boolean;
     error: any;
-    decimals: 8 | 6 | 18;
+    decimals: 6 | 8 | 18;
 };
 declare function hasSufficientBalance(rawBalance: bigint | null, requiredHuman: string, decimals: number): boolean | null;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@medialane/ui",
-  "version": "0.315.0",
+  "version": "0.317.0",
   "description": "Shared UI components for Medialane apps",
   "type": "module",
   "sideEffects": false,