export type PricingPlan = { id?: string; plan: string; price: string; period?: string; description?: string; features: string[]; badge?: string; ctaLabel?: string; highlighted?: boolean; }; type GlassmorphPricingCardProps = { plan?: string; price?: string; period?: string; description?: string; features?: string[]; badge?: string; ctaLabel?: string; /** Renders several plans side by side. Overrides the single-plan props. */ plans?: PricingPlan[]; onSelect?: (plan: PricingPlan) => void; className?: string; }; function CheckIcon() { return ( ); } function PlanCard({ plan, onSelect }: { plan: PricingPlan; onSelect?: (plan: PricingPlan) => void }) { const headingId = "pricing-" + (plan.id ?? plan.plan).toLowerCase().replace(/[^a-z0-9]+/g, "-"); return (

{plan.plan}

{plan.badge ? ( {plan.badge} ) : null}

{plan.description ?

{plan.description}

: null}

{plan.price} {plan.period ? {plan.period} : null}

{feature}

); } export function GlassmorphPricingCard({ plan = "Team", price = "$24", period = "per seat / month", description = "For product teams maintaining a shared component library.", features = ["Unlimited private registries", "Version history for 12 months", "SSO with SAML and SCIM provisioning", "Support replies within one business day"], badge = "Most chosen", ctaLabel = "Start 14-day trial", plans, onSelect, className = "", }: GlassmorphPricingCardProps) { if (plans && plans.length > 0) { return (

{plans.map((item) => ( ))}

); } return (

); }