ui-lab-registry 0.3.45 → 0.3.46

package/src/sections/Pricing/variations/01-cards/index.tsx

@@ -1,153 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from 'ui-lab-components';
-import { Check } from 'lucide-react';
-
-const pricingPlans = [
-  {
-    id: 1,
-    name: 'Starter',
-    description: 'Perfect for getting started',
-    price: 29,
-    period: 'month',
-    cta: 'Get Started',
-    highlighted: false,
-    features: [
-      'Up to 1,000 requests/month',
-      'Basic analytics',
-      'Community support',
-      'API access',
-    ],
-  },
-  {
-    id: 2,
-    name: 'Professional',
-    description: 'Best for growing teams',
-    price: 99,
-    period: 'month',
-    cta: 'Start Free Trial',
-    highlighted: true,
-    features: [
-      'Up to 100,000 requests/month',
-      'Advanced analytics',
-      'Priority email support',
-      'API access',
-      'Custom integrations',
-      'Team collaboration',
-    ],
-  },
-  {
-    id: 3,
-    name: 'Enterprise',
-    description: 'For large-scale operations',
-    price: null,
-    period: 'contact',
-    cta: 'Contact Sales',
-    highlighted: false,
-    features: [
-      'Unlimited requests',
-      'Real-time analytics',
-      '24/7 dedicated support',
-      'Custom API endpoints',
-      'Advanced security',
-      'SLA guarantee',
-    ],
-  },
-];
-
-export function PricingCards() {
-  return (
-    <section className="w-full py-16 px-4 md:py-24">
-      <div className="mx-auto max-w-6xl">
-        {/* Header */}
-        <div className="mb-12 text-center md:mb-16">
-          <h2 className="mb-4 text-3xl font-bold text-foreground-400 md:text-4xl">
-            Simple, transparent pricing
-          </h2>
-          <p className="mx-auto max-w-2xl text-lg text-foreground-400">
-            Choose the perfect plan for your needs. Always flexible to scale.
-          </p>
-        </div>
-
-        {/* Pricing Cards */}
-        <div className="grid gap-8 md:grid-cols-3 items-start">
-          {pricingPlans.map((plan) => (
-            <div
-              key={plan.id}
-              className={`relative rounded-2xl p-8 transition-all ${
-                plan.highlighted
-                  ? 'border border-accent-500 bg-gradient-to-br from-accent-500/10 to-accent-600/5 ring-1 ring-accent-500/20'
-                  : 'border border-background-700 bg-background-900/50 hover:border-background-600'
-              }`}
-            >
-              {plan.highlighted && (
-                <div className="absolute -top-4 left-1/2 -translate-x-1/2">
-                  <span className="rounded-full bg-accent-500 px-4 py-1 text-sm font-semibold text-white">
-                    Most Popular
-                  </span>
-                </div>
-              )}
-
-              <h3 className="mb-2 text-2xl font-bold text-foreground-400">
-                {plan.name}
-              </h3>
-              <p className="mb-6 text-foreground-400">{plan.description}</p>
-
-              {/* Pricing */}
-              <div className="mb-8">
-                {plan.price ? (
-                  <>
-                    <div className="flex items-baseline gap-1">
-                      <span className="text-4xl font-bold text-foreground-400">
-                        ${plan.price}
-                      </span>
-                      <span className="text-foreground-400">/{plan.period}</span>
-                    </div>
-                  </>
-                ) : (
-                  <div className="text-lg font-semibold text-foreground-400">
-                    Custom pricing
-                  </div>
-                )}
-              </div>
-
-              {/* CTA */}
-              <Button
-                className="mb-8 w-full"
-                variant={plan.highlighted ? 'default' : 'outline'}
-              >
-                {plan.cta}
-              </Button>
-
-              {/* Features */}
-              <div className="border-t border-background-700 pt-8">
-                <ul className="space-y-4">
-                  {plan.features.map((feature, index) => (
-                    <li key={index} className="flex items-start gap-3">
-                      <Check className="h-5 w-5 flex-shrink-0 text-accent-500 mt-0.5" />
-                      <span className="text-foreground-400">{feature}</span>
-                    </li>
-                  ))}
-                </ul>
-              </div>
-            </div>
-          ))}
-        </div>
-
-        {/* Footer note */}
-        <div className="mt-12 text-center">
-          <p className="text-foreground-400">
-            All plans include a 14-day free trial. No credit card required.
-          </p>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Pricing Cards',
-  description: '3-column pricing tier cards with features list and highlighted popular plan',
-  demoPath: 'pricing-cards',
-};

package/src/sections/Pricing/variations/02-comparison/index.tsx

@@ -1,150 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Button } from 'ui-lab-components';
-import { Check, X } from 'lucide-react';
-
-const comparisonData = {
-  plans: [
-    { id: 1, name: 'Starter', price: 29 },
-    { id: 2, name: 'Professional', price: 99 },
-    { id: 3, name: 'Enterprise', price: null },
-  ],
-  features: [
-    {
-      category: 'Core Features',
-      items: [
-        { name: 'API Requests', starter: '1K/month', professional: '100K/month', enterprise: 'Unlimited' },
-        { name: 'Rate Limits', starter: '10 req/sec', professional: '100 req/sec', enterprise: 'Custom' },
-        { name: 'Data Retention', starter: '30 days', professional: '90 days', enterprise: 'Unlimited' },
-        { name: 'Webhook Support', starter: true, professional: true, enterprise: true },
-      ],
-    },
-    {
-      category: 'Analytics & Reporting',
-      items: [
-        { name: 'Basic Analytics', starter: true, professional: true, enterprise: true },
-        { name: 'Advanced Analytics', starter: false, professional: true, enterprise: true },
-        { name: 'Custom Reports', starter: false, professional: true, enterprise: true },
-        { name: 'Real-time Dashboards', starter: false, professional: false, enterprise: true },
-      ],
-    },
-    {
-      category: 'Support & Security',
-      items: [
-        { name: 'Email Support', starter: true, professional: true, enterprise: true },
-        { name: 'Priority Support', starter: false, professional: true, enterprise: true },
-        { name: '24/7 Phone Support', starter: false, professional: false, enterprise: true },
-        { name: 'SSO & SAML', starter: false, professional: false, enterprise: true },
-      ],
-    },
-  ],
-};
-
-export function PricingComparison() {
-  return (
-    <section className="w-full py-16 px-4 md:py-24">
-      <div className="mx-auto max-w-7xl">
-        {/* Header */}
-        <div className="mb-12 text-center">
-          <h2 className="mb-4 text-3xl font-bold text-foreground-400 md:text-4xl">
-            Compare all plans
-          </h2>
-          <p className="mx-auto max-w-2xl text-lg text-foreground-400">
-            Find the perfect plan with detailed feature comparison
-          </p>
-        </div>
-
-        {/* Comparison Table */}
-        <div className="overflow-x-auto rounded-2xl border border-background-700 bg-background-900/50">
-          <table className="w-full">
-            <thead>
-              <tr className="border-b border-background-700">
-                <th className="px-6 py-4 text-left text-sm font-semibold text-foreground-400">
-                  Features
-                </th>
-                {comparisonData.plans.map((plan) => (
-                  <th
-                    key={plan.id}
-                    className="px-6 py-4 text-center text-sm font-semibold text-foreground-400"
-                  >
-                    <div className="mb-2">{plan.name}</div>
-                    {plan.price ? (
-                      <div className="text-lg font-bold text-accent-500">
-                        ${plan.price}
-                        <span className="text-sm text-foreground-400">/mo</span>
-                      </div>
-                    ) : (
-                      <div className="text-sm text-foreground-400">Custom</div>
-                    )}
-                  </th>
-                ))}
-              </tr>
-            </thead>
-            <tbody>
-              {comparisonData.features.map((category, categoryIndex) => (
-                <React.Fragment key={categoryIndex}>
-                  <tr className="border-t border-background-700 bg-background-900/30">
-                    <td
-                      colSpan={4}
-                      className="px-6 py-4 text-sm font-semibold text-foreground-400"
-                    >
-                      {category.category}
-                    </td>
-                  </tr>
-                  {category.items.map((item, itemIndex) => (
-                    <tr key={itemIndex} className="border-t border-background-700/50">
-                      <td className="px-6 py-4 text-sm text-foreground-400">
-                        {item.name}
-                      </td>
-                      {comparisonData.plans.map((plan) => {
-                        const value =
-                          item[plan.name.toLowerCase() as keyof typeof item];
-                        return (
-                          <td key={plan.id} className="px-6 py-4 text-center">
-                            {typeof value === 'boolean' ? (
-                              value ? (
-                                <Check className="mx-auto h-5 w-5 text-accent-500" />
-                              ) : (
-                                <X className="mx-auto h-5 w-5 text-foreground-400" />
-                              )
-                            ) : (
-                              <span className="text-sm text-foreground-400">
-                                {value}
-                              </span>
-                            )}
-                          </td>
-                        );
-                      })}
-                    </tr>
-                  ))}
-                </React.Fragment>
-              ))}
-            </tbody>
-          </table>
-        </div>
-
-        {/* CTA Section */}
-        <div className="mt-12 rounded-2xl border border-background-700 bg-background-900/50 p-8 text-center">
-          <h3 className="mb-4 text-2xl font-bold text-foreground-400">
-            Ready to get started?
-          </h3>
-          <p className="mb-6 text-foreground-400">
-            Choose your plan and start building today. All plans include a 14-day free trial.
-          </p>
-          <div className="flex flex-col gap-3 sm:flex-row sm:justify-center">
-            <Button variant="outline">View Starter</Button>
-            <Button>View Professional</Button>
-            <Button variant="outline">Contact Sales</Button>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Pricing Comparison',
-  description: 'Feature comparison table showing all plans with detailed breakdown',
-  demoPath: 'pricing-comparison',
-};

package/src/sections/Pricing/variations/index.ts

@@ -1,7 +0,0 @@
-export { PricingCards } from './01-cards/index.js';
-export { PricingComparison } from './02-comparison/index.js';
-
-export const DEMO_MAP = {
-  'pricing-cards': { key: '01-cards', export: 'PricingCards' },
-  'pricing-comparison': { key: '02-comparison', export: 'PricingComparison' },
-} as const;

package/src/sections/Testimonials/variations/01-cards/index.tsx

@@ -1,93 +0,0 @@
-'use client';
-
-import React from 'react';
-import { Star } from 'lucide-react';
-
-const testimonials = [
-  {
-    id: 1,
-    quote:
-      "This tool has completely transformed how we manage our projects. The intuitive interface and powerful features save us hours every week.",
-    author: 'Sarah Johnson',
-    role: 'Product Manager',
-    company: 'TechStart Inc',
-    rating: 5,
-  },
-  {
-    id: 2,
-    quote:
-      "The best investment we made for our team. Customer support is exceptional and the product keeps improving with valuable features.",
-    author: 'Michael Chen',
-    role: 'CEO',
-    company: 'DataFlow Systems',
-    rating: 5,
-  },
-  {
-    id: 3,
-    quote:
-      "Seamless integration with our existing tools and outstanding performance. Highly recommend to anyone looking for a reliable solution.",
-    author: 'Emma Williams',
-    role: 'Engineering Lead',
-    company: 'CloudXYZ',
-    rating: 5,
-  },
-];
-
-export function CardTestimonials() {
-  return (
-    <section className="w-full py-16 px-4 md:py-24">
-      <div className="mx-auto max-w-6xl">
-        {/* Header */}
-        <div className="mb-12 text-center md:mb-16">
-          <h2 className="mb-4 text-3xl font-bold text-foreground-400 md:text-4xl">
-            Loved by teams worldwide
-          </h2>
-          <p className="mx-auto max-w-2xl text-lg text-foreground-400">
-            See what our customers have to say about their experience
-          </p>
-        </div>
-
-        {/* Testimonials Grid */}
-        <div className="grid gap-8 md:grid-cols-3">
-          {testimonials.map((testimonial) => (
-            <div
-              key={testimonial.id}
-              className="group rounded-md border border-background-700 bg-background-900/50 p-6 backdrop-blur-sm transition-all hover:border-accent-500/50 hover:bg-background-900"
-            >
-              {/* Stars */}
-              <div className="mb-4 flex gap-1">
-                {Array.from({ length: testimonial.rating }).map((_, i) => (
-                  <Star
-                    key={i}
-                    className="h-4 w-4 fill-accent-500 text-accent-500"
-                  />
-                ))}
-              </div>
-
-              {/* Quote */}
-              <blockquote className="mb-6 text-foreground-400">
-                "{testimonial.quote}"
-              </blockquote>
-
-              {/* Author */}
-              <div className="border-t border-background-700 pt-4">
-                <p className="font-semibold text-foreground-400">
-                  {testimonial.author}
-                </p>
-                <p className="text-sm text-foreground-400">
-                  {testimonial.role} at {testimonial.company}
-                </p>
-              </div>
-            </div>
-          ))}
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Card Testimonials',
-  description: '3-card grid layout showcasing customer testimonials with ratings',
-  demoPath: 'testimonials-cards',
-};

package/src/sections/Testimonials/variations/02-featured/index.tsx

@@ -1,155 +0,0 @@
-'use client';
-
-import React, { useState } from 'react';
-import { ChevronLeft, ChevronRight, Star } from 'lucide-react';
-import { Button } from 'ui-lab-components';
-
-const testimonials = [
-  {
-    id: 1,
-    quote:
-      "This platform has been a game-changer for our organization. We've seen a 40% increase in productivity and our team couldn't be happier.",
-    author: 'David Martinez',
-    role: 'Director of Operations',
-    company: 'Global Enterprise Co',
-    rating: 5,
-    initials: 'DM',
-  },
-  {
-    id: 2,
-    quote:
-      "The attention to detail and customer-centric approach is what sets this apart from competitors. Worth every penny and more.",
-    author: 'Jessica Lee',
-    role: 'Founder & CEO',
-    company: 'InnovateLabs',
-    rating: 5,
-    initials: 'JL',
-  },
-  {
-    id: 3,
-    quote:
-      "Implementation was smooth, onboarding was excellent, and ongoing support has been outstanding. Highly recommend!",
-    author: 'Robert Thompson',
-    role: 'VP of Technology',
-    company: 'NextGen Solutions',
-    rating: 5,
-    initials: 'RT',
-  },
-];
-
-export function FeaturedTestimonial() {
-  const [activeIndex, setActiveIndex] = useState(0);
-  const current = testimonials[activeIndex];
-
-  const goToPrevious = () => {
-    setActiveIndex((prev) =>
-      prev === 0 ? testimonials.length - 1 : prev - 1
-    );
-  };
-
-  const goToNext = () => {
-    setActiveIndex((prev) =>
-      prev === testimonials.length - 1 ? 0 : prev + 1
-    );
-  };
-
-  return (
-    <section className="w-full py-16 px-4 md:py-24">
-      <div className="mx-auto max-w-4xl">
-        {/* Header */}
-        <div className="mb-12 text-center">
-          <h2 className="mb-4 text-3xl font-bold text-foreground-400 md:text-4xl">
-            What our customers say
-          </h2>
-        </div>
-
-        {/* Featured Testimonial */}
-        <div className="relative">
-          {/* Decorative background */}
-          <div className="absolute inset-0 rounded-2xl bg-gradient-to-br from-accent-500/10 to-accent-600/10 blur-3xl" />
-
-          {/* Card */}
-          <div className="relative rounded-2xl border border-background-700 bg-background-900/80 p-8 md:p-12 backdrop-blur-sm">
-            {/* Stars */}
-            <div className="mb-6 flex gap-1">
-              {Array.from({ length: current.rating }).map((_, i) => (
-                <Star
-                  key={i}
-                  className="h-5 w-5 fill-accent-500 text-accent-500"
-                />
-              ))}
-            </div>
-
-            {/* Quote */}
-            <blockquote className="mb-8 text-2xl font-semibold text-foreground-400 leading-relaxed md:text-3xl">
-              "{current.quote}"
-            </blockquote>
-
-            {/* Author Info */}
-            <div className="mb-8 flex items-center gap-4">
-              <div className="flex h-12 w-12 items-center justify-center rounded-full bg-accent-500/20">
-                <span className="text-sm font-bold text-accent-500">
-                  {current.initials}
-                </span>
-              </div>
-              <div>
-                <p className="font-semibold text-foreground-400">
-                  {current.author}
-                </p>
-                <p className="text-sm text-foreground-400">
-                  {current.role} at {current.company}
-                </p>
-              </div>
-            </div>
-
-            {/* Navigation */}
-            <div className="flex items-center justify-between border-t border-background-700 pt-8">
-              <div className="flex gap-2">
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={goToPrevious}
-                  aria-label="Previous testimonial"
-                  className="border-background-700 hover:border-accent-500/50"
-                >
-                  <ChevronLeft className="h-4 w-4" />
-                </Button>
-                <Button
-                  variant="outline"
-                  size="sm"
-                  onClick={goToNext}
-                  aria-label="Next testimonial"
-                  className="border-background-700 hover:border-accent-500/50"
-                >
-                  <ChevronRight className="h-4 w-4" />
-                </Button>
-              </div>
-
-              {/* Dot indicators */}
-              <div className="flex gap-2">
-                {testimonials.map((_, index) => (
-                  <button
-                    key={index}
-                    onClick={() => setActiveIndex(index)}
-                    className={`h-2 w-2 rounded-full transition-all ${
-                      index === activeIndex
-                        ? 'bg-accent-500 w-6'
-                        : 'bg-background-700 hover:bg-background-600'
-                    }`}
-                    aria-label={`Go to testimonial ${index + 1}`}
-                  />
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
-    </section>
-  );
-}
-
-export const metadata = {
-  name: 'Featured Testimonial',
-  description: 'Featured testimonial carousel with navigation controls and dot indicators',
-  demoPath: 'testimonials-featured',
-};

package/src/sections/Testimonials/variations/index.ts

@@ -1,7 +0,0 @@
-export { CardTestimonials } from './01-cards/index.js';
-export { FeaturedTestimonial } from './02-featured/index.js';
-
-export const DEMO_MAP = {
-  'testimonials-cards': { key: '01-cards', export: 'CardTestimonials' },
-  'testimonials-featured': { key: '02-featured', export: 'FeaturedTestimonial' },
-} as const;