4f: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"] 50:T20f0,'use client'; import { cn } from '@/lib/utils'; import { Switch } from '@/components/systaliko-ui/shadcn/switch'; import { cva, VariantProps } from 'class-variance-authority'; import { CheckIcon, PlusIcon, XIcon } from 'lucide-react'; import React from 'react'; interface Price { amount: number; currency: string; interval?: 'month' | 'year' | 'week' | 'day' | 'one-time'; discount?: number; } interface PriceFormatOptions { locale?: string; showCurrency?: boolean; showDecimals?: boolean; compact?: boolean; notation?: 'standard' | 'compact' | 'scientific' | 'engineering'; } function formatPrice(price: Price, options: PriceFormatOptions = {}): string { const { locale = 'en-US', showCurrency = true, showDecimals = true, compact = false, notation = 'standard', } = options; const formatter = new Intl.NumberFormat(locale, { style: showCurrency ? 'currency' : 'decimal', currency: price.currency, minimumFractionDigits: showDecimals ? 2 : 0, maximumFractionDigits: showDecimals ? 2 : 0, notation: compact ? 'compact' : notation, }); return formatter.format(price.amount); } function calculateFinalPrice(price: Price): number { if (price.discount) { return price.amount * (1 - price.discount / 100); } return price.amount; } export interface PriceProps extends React.HTMLAttributes { price: Price; options?: PriceFormatOptions; animated?: boolean; } export function Price({ price, options, className, children, animated = false, ...props }: PriceProps) { const finalPrice = calculateFinalPrice(price); const [displayValue, setDisplayValue] = React.useState(finalPrice); const [isAnimating, setIsAnimating] = React.useState(false); const prevValueRef = React.useRef(finalPrice); React.useEffect(() => { if (animated && prevValueRef.current !== finalPrice) { setIsAnimating(true); const duration = 400; const steps = 20; const stepDuration = duration / steps; const diff = finalPrice - prevValueRef.current; const stepValue = diff / steps; let currentStep = 0; const timer = setInterval(() => { currentStep++; if (currentStep === steps) { setDisplayValue(finalPrice); setIsAnimating(false); clearInterval(timer); } else { setDisplayValue(prevValueRef.current + stepValue * currentStep); } }, stepDuration); prevValueRef.current = finalPrice; return () => clearInterval(timer); } else if (!animated) { setDisplayValue(finalPrice); } }, [finalPrice, animated]); const displayPrice = animated ? displayValue : finalPrice; return (

{price.discount ? (

{formatPrice(price, options)} {formatPrice({ ...price, amount: displayPrice }, options)}

) : ( {formatPrice({ ...price, amount: displayPrice }, options)} )} {children}

); } const pricingCardVariants = cva( 'group relative border-2 p-6 flex flex-col space-y-6 bg-card transition-all duration-300 hover:shadow-[0_8px_40px_-12px_rgba(0,0,0,0.1)]', { variants: { variant: { default: 'border-border/20 hover:border-border/50 ', featured: 'border-primary/50 z-2 hover:border-primary', }, }, defaultVariants: { variant: 'default', }, }, ); type PricingInterval = 'monthly' | 'yearly'; interface PricingDuration { monthly: number; yearly: number; } interface PricingContextValue { interval: PricingInterval; toggleInterval: () => void; savings?: number; } const PricingContext = React.createContext( undefined, ); function usePricingContext() { const context = React.useContext(PricingContext); if (context === undefined) { throw new Error('usePricingContext must be used within a PricingProvider'); } return context; } export function calculateYearlySavings(pricing: PricingDuration): number { const yearlyTotal = pricing.monthly * 12; const savings = yearlyTotal - pricing.yearly; return Math.round((savings / yearlyTotal) * 100); } export function Pricing({ ...props }: React.HTMLAttributes) { const [interval, setInterval] = React.useState('monthly'); const toggleInterval = () => { setInterval((prevState) => prevState === 'monthly' ? 'yearly' : 'monthly', ); }; return (

); } export function PricingCard({ className, variant, ...props }: React.ComponentProps<'div'> & VariantProps) { return (

); } export function PricingFeature({ children, className, ...props }: React.HtmlHTMLAttributes) { return (

{children}

); } export function PricingIncludesPrevious({ children, className, ...props }: React.HtmlHTMLAttributes) { return (

{children}

); } export function PricingExclude({ children, className, ...props }: React.HtmlHTMLAttributes) { return (

{children}

); } export function PricingPackage({ className, ...props }: React.HTMLAttributes) { return (

); } export function PricingIntervalSwitch({ className, ...props }: React.HTMLAttributes) { const { toggleInterval } = usePricingContext(); return ( ); } interface PricingValueProps extends React.HTMLAttributes { monthlyValue: number; yearlyValue: number; } export function PricingValue({ monthlyValue, yearlyValue, className, children, ...props }: PricingValueProps) { const { interval } = usePricingContext(); const currentPrice = interval === 'monthly' ? monthlyValue : yearlyValue; return ( /{interval === 'monthly' ? 'per month' : 'per year'} {children} ); } 4e:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[null,["$","$L4f",null,{"files":[{"path":"registry/ecommerce/pricing/index.tsx","content":"$50","type":"registry:block","target":"components/systaliko-ui/pricing.tsx"}],"className":"h-[70svh] min-h-80"}]]}]