{ "$schema": "https://uipkge.dev/schema/registry-item.json", "name": "pricing-01", "title": "Seat Pricing Matrix", "type": "registry:block", "description": "Comprehensive enterprise pricing workbench with monthly/annual billing cycle toggle, currency selector (USD/EUR/GBP), team seat simulator slider, dynamic add-on calculators, and an expandable side-by-side feature comparison matrix.", "categories": [ "marketing" ], "deprecated": true, "replacedBy": "pricing", "files": [ { "path": "packages/elements-lit/src/blocks/pricing-01/pricing-01.ts", "content": "import { LitElement, css, html } from 'lit'\nimport { ArrowRight, Check, ChevronDown, ChevronUp, ShieldCheck, Users, Zap } from 'lucide'\nimport { cn } from '../../lib/utils'\nimport { tailwind } from '../../lib/styles'\nimport { ThemeController } from '../../lib/theme'\nimport { icon } from '../../lib/icon'\n// Side-effect imports: register the composed elements for standalone use\n// (consumers who install only this block still get working primitives).\nimport '../../components/badge/badge'\nimport '../../components/button/button'\nimport '../../components/card/card'\nimport '../../components/separator/separator'\nimport '../../components/slider/slider'\nimport '../../components/switch/switch'\nimport '../../components/toggle-group/toggle-group'\nimport type { UipToggleGroup } from '../../components/toggle-group/toggle-group'\n\ntype BillingCycle = 'monthly' | 'yearly'\ntype Currency = 'USD' | 'EUR' | 'GBP'\n\nconst currencySymbols: Record = {\n USD: '$',\n EUR: '€',\n GBP: '£',\n}\n\nconst currencyRates: Record = {\n USD: 1.0,\n EUR: 0.92,\n GBP: 0.79,\n}\n\nconst comparisonMatrix = [\n {\n category: 'Platform & Compute Core',\n features: [\n { name: 'Active Team Members', starter: 'Up to 10', team: 'Unlimited', enterprise: 'Unlimited + Org Units' },\n { name: 'Monthly API Requests', starter: '100,000 / mo', team: '2,500,000 / mo', enterprise: 'Custom Unlimited' },\n { name: 'Workflow Automations', starter: '10 active', team: '100 active', enterprise: 'Unlimited real-time' },\n { name: 'Data Retention History', starter: '30 days', team: '365 days', enterprise: '7 years immutable' },\n ],\n },\n {\n category: 'Security & Enterprise Governance',\n features: [\n {\n name: 'SOC 2 Type II & ISO 27001',\n starter: 'Standard',\n team: 'Included',\n enterprise: 'Included + Auditor Portal',\n },\n { name: 'SAML SSO & SCIM Provisioning', starter: '—', team: 'Google / Okta', enterprise: 'Custom IdP + SCIM v2' },\n {\n name: 'Role-Based Access (RBAC)',\n starter: '3 predefined roles',\n team: 'Granular permissions',\n enterprise: 'Custom policy engine',\n },\n {\n name: 'Immutable Audit Trail Logs',\n starter: '—',\n team: '90 days exportable',\n enterprise: 'Real-time SIEM streaming',\n },\n ],\n },\n {\n category: 'Support & Success SLAs',\n features: [\n {\n name: 'Support Channel',\n starter: 'Community & Email',\n team: 'Priority Email + Chat',\n enterprise: 'Dedicated Private Slack',\n },\n {\n name: 'First-Response SLA',\n starter: '24 business hours',\n team: '4 business hours',\n enterprise: '< 15 mins (24/7/365)',\n },\n { name: 'Uptime SLA Guarantee', starter: '99.9%', team: '99.95%', enterprise: '99.99% financially backed' },\n { name: 'Dedicated Solutions Architect', starter: '—', team: '—', enterprise: 'Assigned Principal Engineer' },\n ],\n },\n]\n\n// Rendered class strings of the registry Table primitives verbatim\n// (packages/registry-react/components/table/table.tsx), composed with cn()\n// exactly like the React block does.\nconst rowBase = 'hover:bg-muted/50 data-[state=selected]:bg-muted border-b transition-colors duration-150'\nconst headBase =\n \"text-foreground h-10 px-3 text-left align-middle text-sm font-medium whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\"\nconst cellBase =\n \"px-3 py-2 align-middle text-sm whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]\"\n\n/**\n * — the registry Pricing01 block as a web component.\n *\n * Class strings are React's Pricing01 verbatim. React state (useState) becomes\n * @state fields; the billing/currency switchers become \n * (value + value-change, with React's `v && set` guard), the seat simulator\n * becomes (value + value-change), the add-ons become\n * (.checked + checked-change), and the comparison matrix is a\n * native table carrying the registry Table's rendered classes verbatim.\n */\nexport class UipPricing01 extends LitElement {\n static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true }\n // :host display can't be a utility class (the host has no template of its own).\n static styles = [tailwind, css`:host { display: block; }`]\n\n static properties = {\n billingCycle: { state: true },\n currency: { state: true },\n teamSeats: { state: true },\n addDedicatedSla: { state: true },\n addAuditVault: { state: true },\n showComparisonTable: { state: true },\n }\n\n private billingCycle: BillingCycle = 'yearly'\n private currency: Currency = 'USD'\n private teamSeats: number[] = [12]\n private addDedicatedSla = false\n private addAuditVault = false\n private showComparisonTable = false\n\n constructor() {\n super()\n new ThemeController(this)\n }\n\n connectedCallback() {\n super.connectedCallback()\n this.setAttribute('data-uipkge', '')\n this.setAttribute('data-slot', 'pricing-01')\n }\n\n // React guards onValueChange with `v && setBillingCycle(v)`: clicking the\n // pressed item must keep the old value. The group clears itself internally\n // first, so push the kept value back to stay in sync.\n private onSingleToggle(id: string, value: string | string[], apply: (v: string) => void) {\n if (typeof value === 'string' && value) {\n apply(value)\n return\n }\n const el = this.renderRoot.querySelector(id) as UipToggleGroup | null\n if (el) el.value = (el.value || value) as string\n this.requestUpdate()\n }\n\n render() {\n const rates = currencyRates[this.currency]\n const sym = currencySymbols[this.currency]\n\n const starterBase = this.billingCycle === 'yearly' ? 12 : 15\n const teamBase = this.billingCycle === 'yearly' ? 28 : 35\n const enterpriseBase = this.billingCycle === 'yearly' ? 68 : 85\n\n const slaCost = this.addDedicatedSla ? 99 : 0\n const vaultCost = this.addAuditVault ? 49 : 0\n\n const currentSeats = this.teamSeats[0] || 1\n\n const starterMonthlyTotal = Math.round((starterBase * currentSeats + (this.addAuditVault ? 29 : 0)) * rates)\n const teamMonthlyTotal = Math.round((teamBase * currentSeats + slaCost + vaultCost) * rates)\n\n const annualSavingsTeam = Math.round((35 * currentSeats * 12 - 28 * currentSeats * 12) * rates)\n\n return html`\n
\n
\n
\n \n ${icon(ShieldCheck, 'shield-check', 'size-3.5')}\n Predictable Enterprise Pricing\n
\n

\n Scale effortlessly without seat tax surprises\n

\n

\n Zero setup fees, transparent volume discounts, and instant self-serve provisioning. Switch or cancel\n plans anytime.\n

\n\n
\n
\n ) => {\n this.onSingleToggle('#billing-toggle', e.detail.value, (v) => {\n this.billingCycle = v as BillingCycle\n })\n }}\n >\n \n Monthly\n \n \n Annual\n \n Save 20%\n \n \n \n
\n\n
\n ) => {\n this.onSingleToggle('#currency-toggle', e.detail.value, (v) => {\n this.currency = v as Currency\n })\n }}\n >\n \n USD ($)\n \n \n EUR (€)\n \n \n GBP (£)\n \n \n
\n
\n\n
\n
\n
\n ${icon(Users, 'users', 'text-primary size-4')}\n Simulate Team Size:\n
\n
\n \n ${currentSeats} ${currentSeats === 1 ? 'seat' : 'seats'}\n \n ${this.billingCycle === 'yearly' && annualSavingsTeam > 0\n ? html`\n (Saves ~${sym}${annualSavingsTeam.toLocaleString()}/yr on Team plan)\n `\n : ''}\n
\n
\n
\n ) => {\n this.teamSeats = e.detail\n }}\n >\n
\n
\n 1 seat\n 25 seats\n 50+ seats\n
\n
\n
\n\n
\n \n
\n \n
\n Bootstrap & Indie\n
\n \n Starter Studio\n \n \n For agile squads and early-stage product teams validating core workflows.\n \n\n
\n
\n \n ${sym}${Math.round(starterBase * rates)}\n \n / seat / month\n
\n
\n Est. ${sym}${starterMonthlyTotal.toLocaleString()}/mo for ${currentSeats}\n ${currentSeats === 1 ? 'seat' : 'seats'}\n
\n
\n \n\n \n \n
\n

\n Included features\n

\n
    \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Up to 10 team seats & unlimited guests\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 100,000 monthly API event calls\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 30-day continuous audit & revision history\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Standard Community & Email support (24h)\n
    • \n
  • \n ${icon(Check, 'check', 'text-muted-foreground/50 mt-0.5 size-4 shrink-0')}\n Community Discord access & quickstarts\n
    • \n
\n
\n \n
\n\n \n \n Start Free 14-Day Trial\n ${icon(ArrowRight, 'arrow-right', 'size-3.5')}\n \n \n \n\n \n \n \n ${icon(Zap, 'zap', 'size-3 fill-current')}\n Most Popular Choice\n \n
\n\n
\n \n
\n \n Scale & High-Growth\n \n
\n Team Scale\n \n For fast-scaling engineering and product organizations requiring deep automation.\n \n\n
\n
\n \n ${sym}${Math.round(teamBase * rates)}\n \n / seat / month\n
\n
\n Est. ${sym}${teamMonthlyTotal.toLocaleString()}/mo for ${currentSeats}\n ${currentSeats === 1 ? 'seat' : 'seats'}\n
\n
\n \n\n \n \n
\n

\n Everything in Starter, plus\n

\n
    \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Unlimited team seats & custom workspace roles\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 2.5M monthly API calls & priority queue\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Google & Okta SAML SSO integration\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 365-day immutable compliance logs\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Priority ticketing with 4h guaranteed SLA\n
    • \n
\n
\n\n
\n

Optional Power Add-ons

\n
\n \n ) => {\n this.addDedicatedSla = e.detail\n }}\n >\n
\n
\n \n ) => {\n this.addAuditVault = e.detail\n }}\n >\n
\n
\n \n
\n\n \n \n Deploy Team Workspace\n ${icon(ArrowRight, 'arrow-right', 'size-3.5')}\n \n \n \n\n \n
\n \n
\n Enterprise & Security\n
\n \n Enterprise Suite\n \n \n Dedicated infrastructure, custom security controls, and bespoke compliance SLAs.\n \n\n
\n
\n \n ${sym}${Math.round(enterpriseBase * rates)}\n \n / seat / month\n
\n
\n Custom volume licensing available for 100+ seats\n
\n
\n \n\n \n \n
\n

\n Everything in Team, plus\n

\n
    \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Custom SCIM v2 user provisioning & directory sync\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Dedicated VPC peering & custom data residency\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n 99.99% uptime SLA with financial penalty backing\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Assigned Principal Solutions Engineer & private Slack\n
    • \n
  • \n ${icon(Check, 'check', 'text-success mt-0.5 size-4 shrink-0')}\n Custom Master Service Agreement (MSA) & DPA\n
    • \n
\n
\n \n
\n\n \n \n ${icon(ShieldCheck, 'shield-check', 'text-primary size-3.5')}\n Contact Solutions Team\n \n \n \n \n\n
\n {\n this.showComparisonTable = !this.showComparisonTable\n }}\n >\n \n ${this.showComparisonTable ? 'Hide Detailed Feature Comparison' : 'Compare All Features & Enterprise Limits'}\n \n ${this.showComparisonTable\n ? icon(ChevronUp, 'chevron-up', 'size-4')\n : icon(ChevronDown, 'chevron-down', 'size-4')}\n \n
\n\n ${this.showComparisonTable\n ? html`\n
\n
\n
\n

Detailed Specification & Limits

\n

\n Comprehensive side-by-side breakdown across every tier.\n

\n
\n \n All plans include SSL & automated backups\n \n
\n\n
\n
\n \n \n \n \n Capabilities\n \n \n Starter Studio\n \n \n Team Scale\n \n \n Enterprise Suite\n \n \n \n \n ${comparisonMatrix.map(\n (group) => html`\n \n \n ${group.category}\n \n \n ${group.features.map(\n (feat) => html`\n \n \n ${feat.name}\n \n \n ${feat.starter}\n \n \n ${feat.team}\n \n \n ${feat.enterprise}\n \n \n `,\n )}\n `,\n )}\n \n
\n
\n
\n
\n `\n : ''}\n \n
\n `\n }\n}\n\ncustomElements.get('uip-pricing-01') || customElements.define('uip-pricing-01', UipPricing01)\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'uip-pricing-01': UipPricing01\n }\n}\n", "type": "registry:file", "target": "src/uip/blocks/pricing-01/pricing-01.ts" } ], "dependencies": [ "lit", "lucide" ], "registryDependencies": [ "https://uipkge.dev/r/lit/badge.json", "https://uipkge.dev/r/lit/button.json", "https://uipkge.dev/r/lit/card.json", "https://uipkge.dev/r/lit/lit-core.json", "https://uipkge.dev/r/lit/separator.json", "https://uipkge.dev/r/lit/slider.json", "https://uipkge.dev/r/lit/switch.json", "https://uipkge.dev/r/lit/toggle-group.json" ] }