50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1dd7,"use client"; import type { FC, ReactNode } from "react"; import { CheckmarkCircle02Icon, HugeiconsIcon } from "@/components/icons"; import { cn } from "@/lib/utils"; import { RaisedButton } from "@/registry/new-york/ui/raised-button"; export interface PricingFeature { text: string; icon?: ReactNode; } export interface PricingCardProps { /** Plan title (e.g., "Free", "Pro", "Enterprise") */ title: string; /** Price amount (e.g., 0, 9.99, 29) */ price: number; /** Currency symbol (default: "$") */ currency?: string; /** Original price before discount (shows strikethrough on yearly) */ originalPrice?: number; /** Plan description/subtitle — always reserves two lines for row alignment */ description?: string; /** Features included in this plan */ features?: (string | PricingFeature)[]; /** Custom label above features list (rendered uppercase, muted) */ featuresTitle?: ReactNode; /** Billing period: true for monthly, false for yearly */ isMonthly?: boolean; /** Show "Current Plan" badge */ isCurrentPlan?: boolean; /** Show "Popular" badge in header */ isPopular?: boolean; /** Marks this card as the highlighted Pro tier (tints feature icons) */ isPro?: boolean; /** Marks this card as the Enterprise tier (changes accent + suffix copy) */ isEnterprise?: boolean; /** Optional plan illustration shown above the price */ planImage?: string; /** Override the price display (e.g., "Custom") */ priceLabel?: string; /** Override the line beneath the price (defaults to "/ per month" etc.) */ priceSuffix?: ReactNode; /** Button label (default depends on plan + state) */ buttonLabel?: string; /** Small text rendered under the CTA button */ buttonFootnote?: ReactNode; /** Button click handler */ onButtonClick?: () => void; /** Whether button is disabled */ isDisabled?: boolean; /** Whether button is in loading state */ isLoading?: boolean; /** Accent color for button (CSS color value) */ accentColor?: string; /** Additional CSS classes */ className?: string; } const formatPrice = (amount: number, currency: string): string => { if (amount === 0) return `${currency}0`; return `${currency}${amount.toFixed(amount % 1 === 0 ? 0 : 2)}`; }; export const PricingCard: FC = ({ title, price, currency = "$", originalPrice, description, features, featuresTitle, isMonthly = true, isCurrentPlan = false, isPopular = false, isPro = false, isEnterprise = false, planImage, priceLabel, priceSuffix, buttonLabel, buttonFootnote, onButtonClick, isDisabled = false, isLoading = false, accentColor, className, }) => { const isFree = price === 0 && !isEnterprise; const formattedPrice = formatPrice(price, currency); const formattedOriginalPrice = originalPrice ? formatPrice(originalPrice, currency) : null; // Yearly Pro: show per-month equivalent above an "/ mo, billed $X / year" line const monthlyEquivalent = !isMonthly && isPro && price > 0 ? formatPrice(Math.round(price / 12), currency) : null; const resolvedAccent = accentColor ?? (isEnterprise ? "#fa4b00" : isFree ? "#2a2a2a" : "#00bbff"); const getButtonLabel = (): string => { if (isLoading) return "Loading..."; if (buttonLabel) return buttonLabel; if (isCurrentPlan) return "Current Plan"; if (isFree) return "Start for Free"; if (isEnterprise) return "Contact Sales"; return "Get Started"; }; const resolvedSuffix: ReactNode = (() => { if (priceSuffix !== undefined) return priceSuffix; if (isEnterprise) return "Tailored pricing"; if (price <= 0) return " "; if (monthlyEquivalent) return `/ mo, billed ${formattedPrice} / year`; return isMonthly ? "/ per month" : "/ per year"; })(); const resolvedFootnote: ReactNode = (() => { if (buttonFootnote !== undefined) return buttonFootnote; if (isEnterprise) return "Reply within 24 hours"; if (isFree) return "No credit card required"; return "Cancel anytime · Secure payment"; })(); return (

{/* Header: plan name + badges (reserves a fixed row height) */}

{title} {isCurrentPlan && ( Current Plan )}

{isPopular && !isCurrentPlan && ( Popular )}

{/* Description — always reserve two lines so cards align */}

{description ?? " "}

{planImage && (

{/* eslint-disable-next-line @next/next/no-img-element */} {`${title}

)} {/* Price */}

{formattedOriginalPrice && !isMonthly && !priceLabel && ( {formattedOriginalPrice} )} {priceLabel ?? monthlyEquivalent ?? formattedPrice}

{resolvedSuffix}

{/* CTA */}

{getButtonLabel()} {resolvedFootnote && (

{resolvedFootnote}

)}

{/* Features — flex-1 so cards in a row equalize their height */} {(featuresTitle || (features && features.length > 0)) && (

{featuresTitle && (

{featuresTitle}

)} {features?.map((feature) => { const featureText = typeof feature === "string" ? feature : feature.text; const featureIcon = typeof feature === "object" && feature.icon ? ( feature.icon ) : ( ); return (

{featureIcon} {featureText}

); })}

)}

); }; export default PricingCard; 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[null,["$","$L50",null,{"namespace":"@gaia","registryDependencies":["icons"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/new-york/ui/pricing-card.tsx","content":"$52","type":"registry:ui"}],"className":"h-[70svh] min-h-80"}]]}]