4e:I[707087,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"RegistryDependencies"] 4f:I[512940,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"Installation"] 50:I[314491,["/_next/static/immutable/chunks/2985g-hklwiee.js","/_next/static/immutable/chunks/0qkc3dps_9x_i.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3thksmxn95rly.js","/_next/static/immutable/chunks/15bpbjna9-vr3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/0agonoz1szsjm.js","/_next/static/immutable/chunks/1ynd3dcge2kn1.js","/_next/static/immutable/chunks/0krdn-21gkgjt.js","/_next/static/immutable/chunks/0n9w9riw96l80.js","/_next/static/immutable/chunks/0w75qangey2ys.js","/_next/static/immutable/chunks/1tge7vcvsb70s.js","/_next/static/immutable/chunks/35ju_ac0ysz07.js"],"FilesView"] 51:T2e00,'use client' import { Button } from '@/components/ui/button' import { cn } from '@/lib/utils' import { Minus, Plus, Info } from 'lucide-react' import { useState } from 'react' import { demoTicketTiers } from './demo/events' /** * Formats a currency amount. * @param {number} amount - Amount to format * @param {string} currency - Currency code * @returns {string} Formatted currency string */ function formatCurrency(amount: number, currency: string = 'USD'): string { return new Intl.NumberFormat('en-US', { style: 'currency', currency, minimumFractionDigits: 2 }).format(amount) } /** * Represents a ticket tier option. * @interface TicketTier * @property {string} [name] - Tier name (e.g., "General Admission", "VIP") * @property {number} [price] - Base price * @property {number} [fee] - Service fee * @property {number} [available] - Number available * @property {string} [salesEndDate] - When sales end * @property {string} [description] - Tier description * @property {number} [maxPerOrder] - Maximum tickets per order */ export interface TicketTier { name?: string price?: number fee?: number available?: number salesEndDate?: string description?: string maxPerOrder?: number } /** * Represents a selected ticket with quantity. * @interface TicketSelection * @property {string} tierName - Tier name for display * @property {number} quantity - Number of tickets * @property {number} price - Base price per ticket * @property {number} fee - Fee per ticket */ export interface TicketSelection { tierName?: string quantity: number price?: number fee?: number } export interface TicketTierEvent { title?: string date?: string image?: string currency?: string } /** * ═══════════════════════════════════════════════════════════════════════════ * TicketTierSelectProps * ═══════════════════════════════════════════════════════════════════════════ * * Props for the TicketTierSelect component. Allows selection of multiple * ticket tiers with quantity pickers and displays an order summary. */ export interface TicketTierSelectProps { data?: { /** Event information including title, date, and currency. */ event?: TicketTierEvent /** Available ticket tiers with pricing and availability. */ tiers?: TicketTier[] } actions?: { /** Called when checkout button is clicked with selections and total. */ onCheckout?: (selections: TicketSelection[], total: number) => void } appearance?: { /** * Whether to show the order summary sidebar. * @default true */ showOrderSummary?: boolean } control?: { /** Initial ticket selections as a map of tier index to quantity. */ selections?: Record } } /** * A ticket tier selection component with quantity pickers and order summary. * Allows users to select quantities for multiple ticket tiers. * * Features: * - Multiple tier selection with quantities * - Price and fee breakdown * - Sales end date display * - Tier descriptions * - Order summary sidebar * - Checkout button * * @component * @example * ```tsx * console.log("Checkout:", total), * onSelectionChange: (selections) => console.log("Selections:", selections) * }} * appearance={{ showOrderSummary: true }} * /> * ``` */ export function TicketTierSelect({ data, actions, appearance, control }: TicketTierSelectProps) { const resolved: NonNullable = data ?? { tiers: demoTicketTiers } const event = resolved.event const tiers = resolved.tiers ?? [] const currency = event?.currency ?? 'USD' const { onCheckout } = actions ?? {} const { showOrderSummary = true } = appearance ?? {} const [selections, setSelections] = useState>( control?.selections ?? {} ) const updateQuantity = (tierIndex: number, delta: number) => { const tier = tiers[tierIndex] if (!tier) return const currentQty = selections[tierIndex] || 0 const newQty = Math.max(0, Math.min(currentQty + delta, tier.maxPerOrder ?? 10, tier.available ?? 100)) const newSelections = { ...selections, [tierIndex]: newQty } if (newQty === 0) { delete newSelections[tierIndex] } setSelections(newSelections) } const getSelectionsList = (sels: Record = selections): TicketSelection[] => { return Object.entries(sels) .filter(([_, qty]) => qty > 0) .map(([indexStr, qty]) => { const tierIndex = parseInt(indexStr, 10) const tier = tiers[tierIndex] return { tierName: tier?.name, quantity: qty, price: tier?.price, fee: tier?.fee ?? 0 } }) } const selectionsList = getSelectionsList() const hasSelections = selectionsList.length > 0 const subtotal = selectionsList.reduce((sum, s) => sum + (s.price ?? 0) * s.quantity, 0) const totalFees = selectionsList.reduce((sum, s) => sum + (s.fee ?? 0) * s.quantity, 0) const total = subtotal + totalFees const handleCheckout = () => { onCheckout?.(selectionsList, total) } return (

{/* Left side - Tier selection */}

{/* Header */} {(event?.title || event?.date) && (

{event?.title &&

{event.title}

} {event?.date &&

{event.date}

}

)} {/* Tiers */}

{tiers.map((tier, index) => { const qty = selections[index] || 0 const isSelected = qty > 0 const totalPrice = (tier.price ?? 0) + (tier.fee ?? 0) return (

{/* Tier header */}

{tier.name &&

{tier.name}

}

{qty}

{/* Price info */} {tier.price !== undefined && (

{formatCurrency(totalPrice, currency)} {(tier.fee ?? 0) > 0 && ( incl. {formatCurrency(tier.fee ?? 0, currency)} Fee )}

{tier.salesEndDate && (

Sales end on {tier.salesEndDate}

)}

)} {/* Description */} {tier.description && (

{tier.description}

)}

) })}

{/* Checkout button */}

{/* Right side - Order summary */} {showOrderSummary && (

{/* Event image */} {event?.image && ( {event?.title

)}

Order summary

{hasSelections ? ( <> {/* Line items */}

{selectionsList.map((selection, index) => (

{selection.quantity} x {selection.tierName ?? 'Ticket'} {formatCurrency((selection.price ?? 0) * selection.quantity, currency)}

))}

{/* Totals */}

Subtotal {formatCurrency(subtotal, currency)}

Fees {formatCurrency(totalFees, currency)}

Total {formatCurrency(total, currency)}

) : (

No tickets selected

)}

) } 52:T2f14,// Demo data for Events category components // This file contains sample data used for component previews and documentation import type { Event, EventDetails } from '../types' // Helper to generate dates relative to today function getDateAt(daysFromNow: number, hour: number): string { const date = new Date() date.setDate(date.getDate() + daysFromNow) date.setHours(hour, 0, 0, 0) return date.toISOString() } // Single event for EventCard default export const demoEvent: Event = { title: 'NEON Vol. 9', category: 'Music', venue: 'Echoplex', neighborhood: 'Echo Park', city: 'Los Angeles', dateTime: 'Tonight 9:00 PM - 3:00 AM', priceRange: '$45 - $150', image: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800', vibeTags: ['High energy', 'Late night', 'Dressy'], vibeDescription: 'Immersive electronic experience with world-class DJs and stunning visuals.', aiSummary: "Immersive electronic night with world-class DJs and stunning visuals at LA's top-rated venue.", lineup: ['DJ Shadow', 'Bonobo', 'Four Tet', 'Caribou'], ticketTiers: [ 'General Admission $45', 'VIP Access $120', 'Backstage Pass $150' ], eventSignal: 'going-fast', organizerRating: 4.8, reviewCount: 12453, venueRating: 4.8, ageRestriction: '21+', hasMultipleDates: true } // 15 events for EventList default export const demoEvents: Event[] = [ { title: 'NEON Vol. 9', category: 'Music', venue: 'Echoplex', neighborhood: 'Echo Park', city: 'Los Angeles', dateTime: 'Tonight 9:00 PM - 3:00 AM', priceRange: '$45 - $150', image: 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800', coordinates: { lat: 34.0781, lng: -118.2606 }, vibeTags: ['High energy', 'Late night'], eventSignal: 'going-fast', organizerRating: 4.8, reviewCount: 12453, ageRestriction: '21+' }, { title: 'The Midnight Show', category: 'Comedy', venue: 'The Comedy Underground', neighborhood: 'Santa Monica', city: 'Los Angeles', dateTime: 'Tonight 10:00 PM - 12:00 AM', priceRange: '$15 - $35', image: 'https://images.unsplash.com/photo-1585699324551-f6c309eedeca?w=800', coordinates: { lat: 34.0195, lng: -118.4912 }, vibeTags: ['Social', 'Late night'], eventSignal: 'popular', organizerRating: 4.7, reviewCount: 3241, discount: 'TONIGHT ONLY - 40% OFF' }, { title: 'Salsa Sundays @ Echo Park', category: 'Classes', venue: 'Echo Park Lake', neighborhood: 'Echo Park', city: 'Los Angeles', dateTime: 'Saturday 6:00 PM - 10:00 PM', priceRange: 'Free', image: 'https://images.unsplash.com/photo-1504609813442-a8924e83f76e?w=800', coordinates: { lat: 34.0731, lng: -118.2608 }, vibeTags: ['High energy', 'Social'], eventSignal: 'just-added', organizerRating: 4.9, reviewCount: 8764 }, { title: 'Dawn Flow: Griffith Park', category: 'Classes', venue: 'Griffith Park', neighborhood: 'Los Feliz', city: 'Los Angeles', dateTime: 'Tomorrow 6:00 AM - 8:00 AM', priceRange: 'Free', image: 'https://images.unsplash.com/photo-1545205597-3d9d02c29597?w=800', coordinates: { lat: 34.1365, lng: -118.2943 }, vibeTags: ['Chill', 'Wellness', 'Outdoor'], organizerRating: 4.9, reviewCount: 8764, discount: 'FREE - First 50 Only' }, { title: 'Lakers vs Celtics', category: 'Sports', venue: 'Crypto.com Arena', neighborhood: 'Downtown', city: 'Los Angeles', dateTime: 'Friday 7:30 PM - 10:30 PM', priceRange: '$125 - $850', image: 'https://images.unsplash.com/photo-1546519638-68e109498ffc?w=800', coordinates: { lat: 34.0430, lng: -118.2673 }, vibeTags: ['High energy', 'Social', 'Premium'], eventSignal: 'sales-end-soon', organizerRating: 4.5, reviewCount: 2341 }, { title: 'Smorgasburg LA: Sunday Market', category: 'Food & Drink', venue: 'ROW DTLA', neighborhood: 'Arts District', city: 'Los Angeles', dateTime: 'Sunday 10:00 AM - 4:00 PM', priceRange: 'Free', image: 'https://images.unsplash.com/photo-1555939594-58d7cb561ad1?w=800', coordinates: { lat: 34.0341, lng: -118.2324 }, vibeTags: ['Family-friendly', 'Outdoor', 'Social'], organizerRating: 4.8, reviewCount: 5632 }, { title: 'LACMA After Hours', category: 'Arts', venue: 'LACMA', neighborhood: 'Miracle Mile', city: 'Los Angeles', dateTime: 'Friday 7:00 PM - 11:00 PM', priceRange: '$35 - $75', image: 'https://images.unsplash.com/photo-1531243269054-5ebf6f34081e?w=800', coordinates: { lat: 34.0639, lng: -118.3592 }, vibeTags: ['Chill', 'Date night', 'Sophisticated'], organizerRating: 4.7, reviewCount: 1234, ageRestriction: '21+', discount: 'MEMBER PRICE' }, { title: 'Blue Note Under Stars', category: 'Music', venue: 'Hollywood Bowl', neighborhood: 'Hollywood Hills', city: 'Los Angeles', dateTime: 'Saturday 8:00 PM - 11:00 PM', priceRange: '$45 - $200', image: 'https://images.unsplash.com/photo-1514320291840-2e0a9bf2a9ae?w=800', coordinates: { lat: 34.1122, lng: -118.3391 }, vibeTags: ['Chill', 'Date night', 'Outdoor'], lineup: ['Kamasi Washington', 'Thundercat', 'Terrace Martin'], organizerRating: 4.8, reviewCount: 12453 }, { title: 'Meraki: Seth Troxler', category: 'Nightlife', venue: 'Sound Nightclub', neighborhood: 'Hollywood', city: 'Los Angeles', dateTime: 'Saturday 10:00 PM - 4:00 AM', priceRange: '$35 - $65', image: 'https://images.unsplash.com/photo-1571266028243-e4733b0f0bb0?w=800', coordinates: { lat: 34.0928, lng: -118.3287 }, vibeTags: ['High energy', 'Late night', 'Underground'], lineup: ['Amelie Lens', 'I Hate Models', 'FJAAK'], organizerRating: 4.6, reviewCount: 1876, ageRestriction: '21+' }, { title: 'Whitney Cummings + Friends', category: 'Comedy', venue: 'The Laugh Factory', neighborhood: 'Hollywood', city: 'Los Angeles', dateTime: 'In 2 days 8:00 PM - 11:00 PM', priceRange: '$25 - $55', image: 'https://images.unsplash.com/photo-1527224538127-2104bb71c51b?w=800', coordinates: { lat: 34.0901, lng: -118.3615 }, vibeTags: ['Chill', 'Social', 'Date night'], organizerRating: 4.7, reviewCount: 3241, ageRestriction: '18+' }, { title: 'Venice Beach Drum Circle', category: 'Music', venue: 'Venice Beach Boardwalk', neighborhood: 'Venice', city: 'Los Angeles', dateTime: 'Sunday 4:00 PM - 8:00 PM', priceRange: 'Free', image: 'https://images.unsplash.com/photo-1506157786151-b8491531f063?w=800', coordinates: { lat: 33.9850, lng: -118.4695 }, vibeTags: ['Outdoor', 'Social', 'Chill'], eventSignal: 'popular', organizerRating: 4.6, reviewCount: 2145 }, { title: 'Rooftop Cinema: Blade Runner', category: 'Film', venue: 'Rooftop Cinema Club', neighborhood: 'DTLA', city: 'Los Angeles', dateTime: 'Friday 8:30 PM - 11:00 PM', priceRange: '$25 - $45', image: 'https://images.unsplash.com/photo-1489599849927-2ee91cede3ba?w=800', coordinates: { lat: 34.0407, lng: -118.2468 }, vibeTags: ['Date night', 'Views', 'Chill'], organizerRating: 4.8, reviewCount: 892 }, { title: 'Dodgers vs Giants', category: 'Sports', venue: 'Dodger Stadium', neighborhood: 'Elysian Park', city: 'Los Angeles', dateTime: 'Saturday 1:10 PM - 4:30 PM', priceRange: '$35 - $350', image: 'https://images.unsplash.com/photo-1566577739112-5180d4bf9390?w=800', coordinates: { lat: 34.0739, lng: -118.2400 }, vibeTags: ['Family-friendly', 'Social', 'High energy'], eventSignal: 'few-tickets-left', organizerRating: 4.7, reviewCount: 15678 }, { title: 'Natural Wine Fair', category: 'Food & Drink', venue: 'Grand Central Market', neighborhood: 'Downtown', city: 'Los Angeles', dateTime: 'Sunday 12:00 PM - 6:00 PM', priceRange: '$45 - $85', image: 'https://images.unsplash.com/photo-1510812431401-41d2bd2722f3?w=800', coordinates: { lat: 34.0508, lng: -118.2490 }, vibeTags: ['Tasting', 'Social', 'Sophisticated'], eventSignal: 'just-added', organizerRating: 4.5, reviewCount: 567, ageRestriction: '21+' }, { title: 'Meditation in the Gardens', category: 'Wellness', venue: 'The Getty Center', neighborhood: 'Brentwood', city: 'Los Angeles', dateTime: 'Sunday 7:00 AM - 9:00 AM', priceRange: 'Free', image: 'https://images.unsplash.com/photo-1506126613408-eca07ce68773?w=800', coordinates: { lat: 34.0780, lng: -118.4741 }, vibeTags: ['Wellness', 'Outdoor', 'Chill'], organizerRating: 4.9, reviewCount: 1234 } ] // Detailed event for EventDetail default export const demoEventDetails: EventDetails = { title: 'Sunglasses at Night: Underground Techno', category: 'Nightlife', venue: 'The White Rabbit', neighborhood: 'The Woodlands', city: 'Houston, TX', startDateTime: getDateAt(2, 22), endDateTime: getDateAt(3, 4), priceRange: '$15 - $30', images: [ 'https://images.unsplash.com/photo-1470225620780-dba8ba36b745?w=800', 'https://images.unsplash.com/photo-1514525253161-7a46d19cd819?w=800', 'https://images.unsplash.com/photo-1533174072545-7a4b6ad7a6c3?w=800' ], vibeTags: ['High energy', 'Late night', 'Underground'], eventSignal: 'going-fast', aiSummary: 'Raw, unfiltered techno in an authentic warehouse setting.', description: 'Experience the raw energy of underground techno. Industrial beats, immersive visuals, and a crowd that lives for the music.', lineup: ['Amelie Lens', 'I Hate Models', 'FJAAK'], attendeesCount: 537, friendsGoing: [ { name: 'Alex', avatar: 'https://i.pravatar.cc/40?u=alex' }, { name: 'Sam', avatar: 'https://i.pravatar.cc/40?u=sam' } ], organizer: { name: 'Midnight Lovers', image: 'https://i.pravatar.cc/80?u=midnight', rating: 4.5, reviewCount: 1067, verified: true, followers: 1200, eventsCount: 154, hostingYears: 8, trackRecord: 'great', responseRate: 'very responsive' }, venue_details: { name: 'The White Rabbit', address: '8827 Nasher Ave', city: 'Houston TX', coordinates: { lat: 29.7604, lng: -95.3698 } }, tiers: [ { name: 'General Admission', price: 15, available: 50 }, { name: 'VIP Access', price: 30, available: 20, benefits: ['Skip the line', 'Exclusive lounge'] } ], goodToKnow: { duration: '2 hours', doorsOpen: '7:00 PM', showtime: '7:30 PM', ageRestriction: '21+', dressCode: 'Casual', parking: 'Limited, leave early to avoid long queues' }, policies: { refund: 'No refunds. Tickets are transferable.', entry: 'Open 2 hours before event', idRequired: true, securityOnSite: true }, faq: [ { question: 'What is the refund policy?', answer: 'No refunds. Tickets are transferable.' }, { question: 'When do doors open?', answer: 'Open 2 hours before event.' }, { question: 'Is there parking?', answer: 'Limited, leave early to avoid long queues.' } ], relatedTags: ['Houston Events', 'Texas Nightlife', 'Techno Parties'] } // Ticket tiers for TicketTierSelect export const demoTicketTiers = [ { id: '1', name: 'General Admission', price: 45, fee: 5, available: 100, maxPerOrder: 10, }, { id: '2', name: 'VIP', price: 150, fee: 15, available: 20, maxPerOrder: 4, description: 'Includes backstage access', }, ] // Event confirmation data export const demoEventConfirmation = { orderNumber: 'EVT-12345', eventTitle: 'Summer Music Festival', ticketCount: 2, recipientEmail: 'customer@example.com', eventDate: 'Jan 20, 2024', eventLocation: 'Central Park, New York', organizer: { name: 'Live Nation', }, } 4a:["$","div",null,{"className":"flex flex-col gap-12","children":[["$","div",null,{"className":"pt-10 flex flex-col gap-4","children":[["$","ul",null,{"className":"flex gap-2 flex-wrap","children":[["$","li","lucide-react",{"children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"rounded-md border p-2 text-sm flex items-center gap-1 ","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L4e",null,{"registryDependencies":["button"]}]]}],["$","$L4f",null,{"sourceUrl":"https://ui.manifest.build/r/ticket-tier-select.json","proxyUrl":"https://shadcnregistry.com/r/manifest/ticket-tier-select","itemId":"@manifest/ticket-tier-select"}],["$","section",null,{"className":"flex flex-col gap-4","id":"files","children":[["$","h2",null,{"className":"text-lg md:text-2xl font-bold font-mono","children":"Files"}],["$","$L50",null,{"files":[{"path":"registry/events/ticket-tier-select.tsx","content":"$51","type":"registry:block","target":"components/ui/ticket-tier-select.tsx"},{"path":"registry/events/demo/events.ts","content":"$52","type":"registry:lib","target":"components/ui/demo/events.ts"}]}]]}],"$L53"]}]

Ticket Tier Select

Installation

Files

components

Styles