{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-hero-forms-newsletter-subscription","type":"registry:block","title":"Newsletter Subscription","files":[{"path":"components/blocks/marketing/hero-forms/newsletter-subscription.tsx","content":"import { useState } from 'react';\n\nimport { Button } from '@/components/ui/button';\nimport { Input } from '@/components/ui/input';\nimport { Label } from '@/components/ui/label';\nimport { Checkbox } from '@/components/ui/checkbox';\nimport { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';\nimport {\n  MailIcon,\n  CheckIcon,\n  ChevronRightIcon,\n  BellIcon,\n  SettingsIcon,\n} from 'lucide-react';\nimport { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs';\n\nexport default function HeroFormNewsletterSubscription() {\n  const [email, setEmail] = useState('');\n  const [firstName, setFirstName] = useState('');\n  const [step, setStep] = useState(1);\n  const [frequency, setFrequency] = useState('weekly');\n  const [topics, setTopics] = useState<string[]>([]);\n  const [submitted, setSubmitted] = useState(false);\n\n  const handleTopicChange = (topic: string) => {\n    setTopics(\n      topics.includes(topic)\n        ? topics.filter((t) => t !== topic)\n        : [...topics, topic]\n    );\n  };\n\n  const handleNext = () => {\n    if (step < 2) {\n      setStep(step + 1);\n    } else {\n      setSubmitted(true);\n    }\n  };\n\n  const handleBack = () => {\n    if (step > 1) {\n      setStep(step - 1);\n    }\n  };\n\n  return (\n    <>\n      {/* Hero */}\n      <div className=\"relative overflow-hidden bg-gradient-to-b from-indigo-50 to-white dark:from-indigo-950 dark:to-slate-900\">\n        {/* Background decoration */}\n        <div className=\"absolute top-0 right-0 left-0 h-1 bg-gradient-to-r from-indigo-400 via-purple-500 to-pink-500\"></div>\n        <div className=\"absolute -top-40 -right-40 h-80 w-80 rounded-full bg-purple-200 opacity-20 blur-3xl dark:bg-purple-900\"></div>\n        <div className=\"absolute -bottom-40 -left-40 h-80 w-80 rounded-full bg-indigo-200 opacity-20 blur-3xl dark:bg-indigo-900\"></div>\n\n        <div className=\"relative z-10 container mx-auto px-4 py-16 md:px-6 lg:py-24 2xl:max-w-[1400px]\">\n          <div className=\"grid items-center gap-12 lg:grid-cols-5\">\n            {/* Left Content */}\n            <div className=\"lg:col-span-3\">\n              <div className=\"mb-6 inline-flex items-center rounded-full bg-indigo-100 px-3 py-1 text-sm font-medium text-indigo-800 dark:bg-indigo-900/30 dark:text-indigo-300\">\n                <MailIcon className=\"mr-1 h-4 w-4\" />\n                Newsletter\n              </div>\n\n              <h1 className=\"mb-4 text-4xl font-bold tracking-tight lg:text-5xl\">\n                Stay ahead with our weekly insights\n              </h1>\n\n              <p className=\"text-muted-foreground mb-8 text-xl\">\n                Join our newsletter and get the latest industry trends, tech\n                news, and expert advice delivered right to your inbox.\n              </p>\n\n              <div className=\"mb-12 grid gap-6 sm:grid-cols-2\">\n                <div className=\"flex items-start\">\n                  <div className=\"flex-shrink-0 rounded-full bg-indigo-100 p-2 dark:bg-indigo-900/30\">\n                    <CheckIcon className=\"h-5 w-5 text-indigo-600 dark:text-indigo-400\" />\n                  </div>\n                  <div className=\"ml-4\">\n                    <h3 className=\"text-base font-semibold\">Curated content</h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      Handpicked articles and resources\n                    </p>\n                  </div>\n                </div>\n\n                <div className=\"flex items-start\">\n                  <div className=\"flex-shrink-0 rounded-full bg-indigo-100 p-2 dark:bg-indigo-900/30\">\n                    <CheckIcon className=\"h-5 w-5 text-indigo-600 dark:text-indigo-400\" />\n                  </div>\n                  <div className=\"ml-4\">\n                    <h3 className=\"text-base font-semibold\">\n                      Exclusive insights\n                    </h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      Analysis and perspectives from experts\n                    </p>\n                  </div>\n                </div>\n\n                <div className=\"flex items-start\">\n                  <div className=\"flex-shrink-0 rounded-full bg-indigo-100 p-2 dark:bg-indigo-900/30\">\n                    <CheckIcon className=\"h-5 w-5 text-indigo-600 dark:text-indigo-400\" />\n                  </div>\n                  <div className=\"ml-4\">\n                    <h3 className=\"text-base font-semibold\">Customizable</h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      Choose topics that matter to you\n                    </p>\n                  </div>\n                </div>\n\n                <div className=\"flex items-start\">\n                  <div className=\"flex-shrink-0 rounded-full bg-indigo-100 p-2 dark:bg-indigo-900/30\">\n                    <CheckIcon className=\"h-5 w-5 text-indigo-600 dark:text-indigo-400\" />\n                  </div>\n                  <div className=\"ml-4\">\n                    <h3 className=\"text-base font-semibold\">Zero spam</h3>\n                    <p className=\"text-muted-foreground text-sm\">\n                      Unsubscribe anytime with one click\n                    </p>\n                  </div>\n                </div>\n              </div>\n\n              <div className=\"relative rounded-lg border bg-white p-6 shadow-sm dark:bg-slate-800\">\n                <div className=\"flex items-start gap-4\">\n                  <div className=\"rounded-full bg-indigo-100 p-3 dark:bg-indigo-900/30\">\n                    <img\n                      src=\"https://images.unsplash.com/photo-1501196354995-cbb51c65aaea?w=400&h=400&auto=format&fit=crop&q=80\"\n                      alt=\"Testimonial author\"\n                      width={48}\n                      height={48}\n                      className=\"rounded-full object-cover\"\n                    />\n                  </div>\n                  <div>\n                    <p className=\"text-muted-foreground mb-2 italic\">\n                      &quot;This newsletter has become my go-to resource for\n                      staying updated on industry trends. The curated content\n                      saves me hours of research every week.&quot;\n                    </p>\n                    <p className=\"text-sm font-medium\">Alex Thompson</p>\n                    <p className=\"text-muted-foreground text-xs\">\n                      Product Manager @ Acme Inc\n                    </p>\n                  </div>\n                </div>\n              </div>\n            </div>\n\n            {/* Right Form */}\n            <div className=\"lg:col-span-2\">\n              <div className=\"rounded-xl border bg-white p-6 shadow-lg dark:bg-slate-800\">\n                {!submitted ? (\n                  <>\n                    <div className=\"mb-6 text-center\">\n                      <h2 className=\"text-2xl font-bold\">Subscribe Now</h2>\n                      <p className=\"text-muted-foreground mt-1 text-sm\">\n                        {step === 1\n                          ? 'Enter your details to get started'\n                          : 'Customize your newsletter experience'}\n                      </p>\n                    </div>\n\n                    {/* Progress indicator */}\n                    <div className=\"mb-6\">\n                      <div className=\"mb-2 flex items-center justify-between\">\n                        <span className=\"text-xs font-medium\">\n                          Step {step} of 2\n                        </span>\n                        <span className=\"text-muted-foreground text-xs\">\n                          {step === 1 ? '50%' : '100%'}\n                        </span>\n                      </div>\n                      <div className=\"bg-muted h-1.5 w-full overflow-hidden rounded-full\">\n                        <div\n                          className=\"h-full rounded-full bg-indigo-600 transition-all duration-300\"\n                          style={{ width: step === 1 ? '50%' : '100%' }}\n                        ></div>\n                      </div>\n                    </div>\n\n                    {/* Step 1: Basic Info */}\n                    {step === 1 && (\n                      <form className=\"space-y-4\">\n                        <div>\n                          <Label htmlFor=\"firstName\" className=\"mb-2\">\n                            First name\n                          </Label>\n                          <Input\n                            id=\"firstName\"\n                            placeholder=\"John\"\n                            value={firstName}\n                            onChange={(e) => setFirstName(e.target.value)}\n                          />\n                        </div>\n\n                        <div>\n                          <Label htmlFor=\"email\" className=\"mb-2\">\n                            Email address\n                          </Label>\n                          <Input\n                            id=\"email\"\n                            type=\"email\"\n                            placeholder=\"john@example.com\"\n                            value={email}\n                            onChange={(e) => setEmail(e.target.value)}\n                          />\n                        </div>\n\n                        <Button\n                          onClick={handleNext}\n                          className=\"w-full\"\n                          disabled={!email}\n                        >\n                          Continue\n                          <ChevronRightIcon className=\"ml-2 h-4 w-4\" />\n                        </Button>\n                      </form>\n                    )}\n\n                    {/* Step 2: Preferences */}\n                    {step === 2 && (\n                      <div className=\"space-y-6\">\n                        <Tabs defaultValue=\"topics\">\n                          <TabsList className=\"mb-4 grid w-full grid-cols-2\">\n                            <TabsTrigger value=\"topics\">\n                              <SettingsIcon className=\"mr-2 h-4 w-4\" />\n                              Topics\n                            </TabsTrigger>\n                            <TabsTrigger value=\"frequency\">\n                              <BellIcon className=\"mr-2 h-4 w-4\" />\n                              Frequency\n                            </TabsTrigger>\n                          </TabsList>\n\n                          <TabsContent value=\"topics\" className=\"space-y-4\">\n                            <div>\n                              <Label className=\"mb-2 block\">\n                                Choose your interests\n                              </Label>\n                              <p className=\"text-muted-foreground mb-3 text-xs\">\n                                Select topics you&apos;d like to receive content\n                                about\n                              </p>\n\n                              <div className=\"grid grid-cols-2 gap-3\">\n                                {[\n                                  { id: 'technology', label: 'Technology' },\n                                  { id: 'business', label: 'Business' },\n                                  { id: 'design', label: 'Design' },\n                                  { id: 'marketing', label: 'Marketing' },\n                                  { id: 'development', label: 'Development' },\n                                  { id: 'productivity', label: 'Productivity' },\n                                ].map((topic) => (\n                                  <div\n                                    key={topic.id}\n                                    className={`cursor-pointer rounded-lg border p-3 transition-colors ${\n                                      topics.includes(topic.id)\n                                        ? 'border-indigo-200 bg-indigo-50 dark:border-indigo-800 dark:bg-indigo-900/20'\n                                        : 'hover:bg-muted/50'\n                                    }`}\n                                    onClick={() => handleTopicChange(topic.id)}\n                                  >\n                                    <div className=\"flex items-center\">\n                                      <Checkbox\n                                        id={`topic-${topic.id}`}\n                                        checked={topics.includes(topic.id)}\n                                        className=\"mr-2\"\n                                      />\n                                      <Label\n                                        htmlFor={`topic-${topic.id}`}\n                                        className=\"cursor-pointer font-normal\"\n                                      >\n                                        {topic.label}\n                                      </Label>\n                                    </div>\n                                  </div>\n                                ))}\n                              </div>\n                            </div>\n                          </TabsContent>\n\n                          <TabsContent value=\"frequency\" className=\"space-y-4\">\n                            <div>\n                              <Label className=\"mb-2 block\">\n                                Delivery frequency\n                              </Label>\n                              <p className=\"text-muted-foreground mb-3 text-xs\">\n                                How often would you like to hear from us?\n                              </p>\n\n                              <RadioGroup\n                                value={frequency}\n                                onValueChange={setFrequency}\n                                className=\"space-y-3\"\n                              >\n                                {[\n                                  {\n                                    value: 'daily',\n                                    title: 'Daily',\n                                    description: 'Get updates every weekday',\n                                  },\n                                  {\n                                    value: 'weekly',\n                                    title: 'Weekly',\n                                    description:\n                                      'Receive a weekly digest every Monday',\n                                  },\n                                  {\n                                    value: 'monthly',\n                                    title: 'Monthly',\n                                    description: 'Get a summary once a month',\n                                  },\n                                ].map((option) => (\n                                  <div\n                                    key={option.value}\n                                    className={`rounded-lg border p-3 transition-colors ${\n                                      frequency === option.value\n                                        ? 'border-indigo-200 bg-indigo-50 dark:border-indigo-800 dark:bg-indigo-900/20'\n                                        : 'hover:bg-muted/50'\n                                    }`}\n                                  >\n                                    <div className=\"flex items-center space-x-2\">\n                                      <RadioGroupItem\n                                        value={option.value}\n                                        id={option.value}\n                                      />\n                                      <div>\n                                        <Label\n                                          htmlFor={option.value}\n                                          className=\"cursor-pointer font-medium\"\n                                        >\n                                          {option.title}\n                                        </Label>\n                                        <p className=\"text-muted-foreground text-xs\">\n                                          {option.description}\n                                        </p>\n                                      </div>\n                                    </div>\n                                  </div>\n                                ))}\n                              </RadioGroup>\n                            </div>\n                          </TabsContent>\n                        </Tabs>\n\n                        <div className=\"flex gap-3 pt-2\">\n                          <Button\n                            variant=\"outline\"\n                            onClick={handleBack}\n                            className=\"w-1/3\"\n                          >\n                            Back\n                          </Button>\n                          <Button\n                            onClick={handleNext}\n                            className=\"w-2/3\"\n                            disabled={topics.length === 0}\n                          >\n                            Subscribe Now\n                          </Button>\n                        </div>\n                      </div>\n                    )}\n\n                    <div className=\"pt-4 text-center\">\n                      <p className=\"text-muted-foreground text-xs\">\n                        By subscribing, you agree to our{' '}\n                        <a\n                          href=\"#\"\n                          className=\"text-indigo-600 hover:underline dark:text-indigo-400\"\n                        >\n                          Terms\n                        </a>{' '}\n                        and{' '}\n                        <a\n                          href=\"#\"\n                          className=\"text-indigo-600 hover:underline dark:text-indigo-400\"\n                        >\n                          Privacy Policy\n                        </a>\n                      </p>\n                    </div>\n                  </>\n                ) : (\n                  <div className=\"py-6 text-center\">\n                    <div className=\"mx-auto mb-6 flex h-16 w-16 items-center justify-center rounded-full bg-indigo-100 dark:bg-indigo-900/30\">\n                      <CheckIcon className=\"h-8 w-8 text-indigo-600 dark:text-indigo-400\" />\n                    </div>\n\n                    <h2 className=\"mb-2 text-2xl font-bold\">Thank You!</h2>\n                    <p className=\"text-muted-foreground mb-6\">\n                      Your subscription has been confirmed. You&apos;ve been\n                      added to our newsletter list and will get the next issue\n                      soon.\n                    </p>\n\n                    <div className=\"mb-6 rounded-lg bg-indigo-50 p-4 text-left dark:bg-indigo-900/20\">\n                      <h3 className=\"mb-2 text-sm font-medium\">\n                        Your preferences\n                      </h3>\n                      <div className=\"space-y-2\">\n                        <div className=\"flex justify-between text-sm\">\n                          <span className=\"text-muted-foreground\">Email:</span>\n                          <span className=\"font-medium\">{email}</span>\n                        </div>\n                        <div className=\"flex justify-between text-sm\">\n                          <span className=\"text-muted-foreground\">\n                            Frequency:\n                          </span>\n                          <span className=\"font-medium capitalize\">\n                            {frequency}\n                          </span>\n                        </div>\n                        <div className=\"flex justify-between text-sm\">\n                          <span className=\"text-muted-foreground\">Topics:</span>\n                          <span className=\"font-medium\">\n                            {topics\n                              .map(\n                                (t) => t.charAt(0).toUpperCase() + t.slice(1)\n                              )\n                              .join(', ')}\n                          </span>\n                        </div>\n                      </div>\n                    </div>\n\n                    <div className=\"space-y-3\">\n                      <p className=\"text-sm\">\n                        Want to manage your subscription preferences?\n                      </p>\n                      <Button variant=\"outline\" className=\"w-full\">\n                        Manage Preferences\n                      </Button>\n                    </div>\n                  </div>\n                )}\n              </div>\n            </div>\n          </div>\n        </div>\n      </div>\n      {/* End Hero */}\n    </>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/hero-forms/newsletter-subscription.tsx"},{"path":"components/ui/button.tsx","content":"import * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Slot } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"group/button inline-flex shrink-0 items-center justify-center rounded-md border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-primary text-primary-foreground hover:bg-primary/80\",\n        outline:\n          \"border-border bg-background shadow-xs hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground\",\n        ghost:\n          \"hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50\",\n        destructive:\n          \"bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default:\n          \"h-9 gap-1.5 px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        xs: \"h-6 gap-1 rounded-[min(var(--radius-md),8px)] px-2 text-xs in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3\",\n        sm: \"h-8 gap-1 rounded-[min(var(--radius-md),10px)] px-2.5 in-data-[slot=button-group]:rounded-md has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5\",\n        lg: \"h-10 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2\",\n        icon: \"size-9\",\n        \"icon-xs\":\n          \"size-6 rounded-[min(var(--radius-md),8px)] in-data-[slot=button-group]:rounded-md [&_svg:not([class*='size-'])]:size-3\",\n        \"icon-sm\":\n          \"size-8 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-md\",\n        \"icon-lg\": \"size-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant = \"default\",\n  size = \"default\",\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot.Root : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n","type":"registry:ui","target":"components/ui/button.tsx"},{"path":"components/ui/input.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Input({ className, type, ...props }: React.ComponentProps<\"input\">) {\n  return (\n    <input\n      type={type}\n      data-slot=\"input\"\n      className={cn(\n        \"h-9 w-full min-w-0 rounded-md border border-input bg-transparent px-2.5 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Input }\n","type":"registry:ui","target":"components/ui/input.tsx"},{"path":"components/ui/label.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Label as LabelPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Label({\n  className,\n  ...props\n}: React.ComponentProps<typeof LabelPrimitive.Root>) {\n  return (\n    <LabelPrimitive.Root\n      data-slot=\"label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport { Label }\n","type":"registry:ui","target":"components/ui/label.tsx"},{"path":"components/ui/checkbox.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Checkbox as CheckboxPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { CheckIcon } from \"lucide-react\"\n\nfunction Checkbox({\n  className,\n  ...props\n}: React.ComponentProps<typeof CheckboxPrimitive.Root>) {\n  return (\n    <CheckboxPrimitive.Root\n      data-slot=\"checkbox\"\n      className={cn(\n        \"peer relative flex size-4 shrink-0 items-center justify-center rounded-[4px] border border-input shadow-xs transition-shadow outline-none group-has-disabled/field:opacity-50 after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <CheckboxPrimitive.Indicator\n        data-slot=\"checkbox-indicator\"\n        className=\"grid place-content-center text-current transition-none [&>svg]:size-3.5\"\n      >\n        <CheckIcon\n        />\n      </CheckboxPrimitive.Indicator>\n    </CheckboxPrimitive.Root>\n  )\n}\n\nexport { Checkbox }\n","type":"registry:ui","target":"components/ui/checkbox.tsx"},{"path":"components/ui/radio-group.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { RadioGroup as RadioGroupPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction RadioGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Root>) {\n  return (\n    <RadioGroupPrimitive.Root\n      data-slot=\"radio-group\"\n      className={cn(\"grid w-full gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction RadioGroupItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof RadioGroupPrimitive.Item>) {\n  return (\n    <RadioGroupPrimitive.Item\n      data-slot=\"radio-group-item\"\n      className={cn(\n        \"group/radio-group-item peer relative flex aspect-square size-4 shrink-0 rounded-full border border-input outline-none after:absolute after:-inset-x-3 after:-inset-y-2 focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 aria-invalid:aria-checked:border-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 data-checked:border-primary data-checked:bg-primary data-checked:text-primary-foreground dark:data-checked:bg-primary\",\n        className\n      )}\n      {...props}\n    >\n      <RadioGroupPrimitive.Indicator\n        data-slot=\"radio-group-indicator\"\n        className=\"flex size-4 items-center justify-center\"\n      >\n        <span className=\"absolute top-1/2 left-1/2 size-2 -translate-x-1/2 -translate-y-1/2 rounded-full bg-primary-foreground\" />\n      </RadioGroupPrimitive.Indicator>\n    </RadioGroupPrimitive.Item>\n  )\n}\n\nexport { RadioGroup, RadioGroupItem }\n","type":"registry:ui","target":"components/ui/radio-group.tsx"},{"path":"components/ui/tabs.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport { Tabs as TabsPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Tabs({\n  className,\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Root>) {\n  return (\n    <TabsPrimitive.Root\n      data-slot=\"tabs\"\n      data-orientation={orientation}\n      className={cn(\n        \"group/tabs flex gap-2 data-horizontal:flex-col\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nconst tabsListVariants = cva(\n  \"group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-horizontal/tabs:h-9 group-data-vertical/tabs:h-fit group-data-vertical/tabs:flex-col data-[variant=line]:rounded-none\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-muted\",\n        line: \"gap-1 bg-transparent\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction TabsList({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.List> &\n  VariantProps<typeof tabsListVariants>) {\n  return (\n    <TabsPrimitive.List\n      data-slot=\"tabs-list\"\n      data-variant={variant}\n      className={cn(tabsListVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction TabsTrigger({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Trigger>) {\n  return (\n    <TabsPrimitive.Trigger\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        \"relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-vertical/tabs:w-full group-data-vertical/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 dark:text-muted-foreground dark:hover:text-foreground group-data-[variant=default]/tabs-list:data-active:shadow-sm group-data-[variant=line]/tabs-list:data-active:shadow-none [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4\",\n        \"group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-active:bg-transparent dark:group-data-[variant=line]/tabs-list:data-active:border-transparent dark:group-data-[variant=line]/tabs-list:data-active:bg-transparent\",\n        \"data-active:bg-background data-active:text-foreground dark:data-active:border-input dark:data-active:bg-input/30 dark:data-active:text-foreground\",\n        \"after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-horizontal/tabs:after:inset-x-0 group-data-horizontal/tabs:after:bottom-[-5px] group-data-horizontal/tabs:after:h-0.5 group-data-vertical/tabs:after:inset-y-0 group-data-vertical/tabs:after:-right-1 group-data-vertical/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-active:after:opacity-100\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction TabsContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof TabsPrimitive.Content>) {\n  return (\n    <TabsPrimitive.Content\n      data-slot=\"tabs-content\"\n      className={cn(\"flex-1 text-sm outline-none\", className)}\n      {...props}\n    />\n  )\n}\n\nexport { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants }\n","type":"registry:ui","target":"components/ui/tabs.tsx"}],"description":"A hero with a newsletter subscription field and a short value pitch. Turns first time visitors into subscribers with one quick email entry.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}