{"$schema":"https://ui.shadcn.com/schema/registry-item.json","name":"marketing-about-sections-company-values","type":"registry:block","title":"Company Values","files":[{"path":"components/blocks/marketing/about-sections/company-values.tsx","content":"import React, { useState } from 'react';\nimport { Button } from '@/components/ui/button';\nimport { Card, CardContent } from '@/components/ui/card';\nimport { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs';\nimport {\n  AreaChart,\n  ArrowUpRightIcon,\n  Globe,\n  Heart,\n  Lightbulb,\n  ShieldCheck,\n  Users,\n} from 'lucide-react';\nimport { cn } from '@/lib/utils';\n\nimport {\n  Select,\n  SelectContent,\n  SelectItem,\n  SelectTrigger,\n  SelectValue,\n} from '@/components/ui/select';\n\n// Types\ntype CompanyValue = {\n  id: string;\n  name: string;\n  description: string;\n  icon: React.ElementType;\n  color: string;\n  principles: string[];\n  testimonial?: {\n    quote: string;\n    author: string;\n    role: string;\n    image: string;\n  };\n  image?: string;\n};\n\n// Company values data\nconst companyValues: CompanyValue[] = [\n  {\n    id: 'innovation',\n    name: 'Innovation',\n    description:\n      'We constantly push boundaries and challenge the status quo, fostering a culture where creative thinking and experimentation are encouraged at all levels of the organization.',\n    icon: Lightbulb,\n    color: 'text-amber-500',\n    principles: [\n      'Embrace experimentation and calculated risk-taking',\n      'Challenge assumptions and existing processes',\n      'Dedicate time and resources to exploring new ideas',\n      'Learn from failures and iterate quickly',\n    ],\n    testimonial: {\n      quote:\n        'Working in an environment that truly values innovation isn&apos;t just about having the latest technology—it&apos;s about feeling empowered to question, experiment, and sometimes fail. This culture has allowed us to develop solutions no one else has thought of yet.',\n      author: 'Alex Chen',\n      role: 'Lead Product Engineer',\n      image:\n        'https://images.unsplash.com/photo-1568602471122-7832951cc4c5?q=80&w=400',\n    },\n    image:\n      'https://images.unsplash.com/photo-1534120247760-c44c3e4a62f1?q=80&w=800',\n  },\n  {\n    id: 'integrity',\n    name: 'Integrity',\n    description:\n      'We believe in transparency, honesty, and ethical conduct in everything we do. Trust is the foundation of our relationships with customers, partners, and each other.',\n    icon: ShieldCheck,\n    color: 'text-blue-500',\n    principles: [\n      'Be honest and transparent in all communications',\n      'Do what&apos;s right, even when it&apos;s difficult',\n      'Keep commitments and take accountability for mistakes',\n      'Protect private data and confidential information',\n    ],\n    testimonial: {\n      quote:\n        'In my ten years with the company, I&apos;ve seen us turn down lucrative opportunities that didn&apos;t align with our ethical standards. That consistent commitment to integrity isn&apos;t just good ethics—it&apos;s built an unparalleled level of trust with our customers.',\n      author: 'Sarah Johnson',\n      role: 'Senior Account Director',\n      image:\n        'https://images.unsplash.com/photo-1531123897727-8f129e1688ce?q=80&w=400',\n    },\n    image:\n      'https://images.unsplash.com/photo-1516321318423-f06f85e504b3?q=80&w=800',\n  },\n  {\n    id: 'collaboration',\n    name: 'Collaboration',\n    description:\n      'We achieve more together than alone. By combining diverse perspectives and skills, we create solutions that are stronger, more innovative, and more effective than any individual could produce.',\n    icon: Users,\n    color: 'text-indigo-500',\n    principles: [\n      'Value and seek diverse perspectives',\n      'Share knowledge openly across teams',\n      'Give credit and celebrate team achievements',\n      'Support colleagues and prioritize team success',\n    ],\n    testimonial: {\n      quote:\n        'The collaborative spirit here isn&apos;t just talk—it&apos;s built into how we work. Even as we&apos;ve grown to multiple offices globally, we&apos;ve maintained a culture where everyone&apos;s input is valued and people genuinely enjoy working together to solve challenging problems.',\n      author: 'Miguel Hernandez',\n      role: 'Global Operations Manager',\n      image:\n        'https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?q=80&w=400',\n    },\n    image:\n      'https://images.unsplash.com/photo-1522202176988-66273c2fd55f?q=80&w=800',\n  },\n  {\n    id: 'customer-focus',\n    name: 'Customer Focus',\n    description:\n      'Our customers are at the center of everything we do. We&apos;re committed to understanding their needs, exceeding their expectations, and building lasting relationships based on mutual success.',\n    icon: Heart,\n    color: 'text-red-500',\n    principles: [\n      'Deeply understand customer needs and pain points',\n      'Prioritize features that deliver true customer value',\n      'Proactively gather and implement customer feedback',\n      'Measure success through customer outcomes',\n    ],\n    testimonial: {\n      quote:\n        'I&apos;ve been amazed at how customer feedback directly shapes our product roadmap. When I joined, I expected the usual lip service to customer-centricity, but here, customer success genuinely drives every decision from product features to support policies.',\n      author: 'Avery Wilson',\n      role: 'Customer Success Lead',\n      image:\n        'https://images.unsplash.com/photo-1494790108377-be9c29b29330?q=80&w=400',\n    },\n    image:\n      'https://images.unsplash.com/photo-1519389950473-47ba0277781c?q=80&w=800',\n  },\n  {\n    id: 'excellence',\n    name: 'Excellence',\n    description:\n      'We strive for excellence in everything we do, from the quality of our products to our customer service. We set high standards and continuously work to exceed them through learning and improvement.',\n    icon: AreaChart,\n    color: 'text-emerald-500',\n    principles: [\n      'Set ambitious goals and high standards',\n      'Pursue continuous improvement through feedback',\n      'Pay attention to details without losing sight of the big picture',\n      'Take pride in delivering exceptional quality',\n    ],\n    testimonial: {\n      quote:\n        'The most inspiring thing about working here is how everyone strives for excellence while remaining humble. There&apos;s always a sense that we can do better—not from a place of dissatisfaction, but from genuine passion for creating the best possible experience for our users.',\n      author: 'Jordan Taylor',\n      role: 'Quality Assurance Director',\n      image:\n        'https://images.unsplash.com/photo-1500648767791-00dcc994a43e?q=80&w=400',\n    },\n    image:\n      'https://images.unsplash.com/photo-1515187029135-18ee286d815b?q=80&w=800',\n  },\n  {\n    id: 'sustainability',\n    name: 'Sustainability',\n    description:\n      'We are committed to creating a positive environmental and social impact. Our business decisions consider long-term sustainability and our responsibility to future generations.',\n    icon: Globe,\n    color: 'text-green-500',\n    principles: [\n      'Minimize environmental impact in operations and products',\n      'Support community initiatives and social causes',\n      'Consider long-term sustainability in all business decisions',\n      'Measure and report on environmental and social performance',\n    ],\n    testimonial: {\n      quote:\n        'When we announced our carbon-neutral initiative, I wasn&apos;t sure if it would be more than a marketing exercise. Three years later, we&apos;ve reduced emissions by 68%, switched to renewable energy, and built sustainability requirements into our entire supply chain. It&apos;s real change.',\n      author: 'Priya Patel',\n      role: 'Sustainability Program Manager',\n      image:\n        'https://images.unsplash.com/photo-1573497019940-1c28c88b4f3e?q=80&w=400',\n    },\n    image:\n      'https://images.unsplash.com/photo-1536859355448-76f92ebdc33d?q=80&w=800',\n  },\n];\n\nexport default function AboutSectionCompanyValues() {\n  const [activeValue, setActiveValue] = useState<string>(companyValues[0]!.id);\n\n  // Get active value object\n  const currentValue =\n    companyValues.find((value) => value.id === activeValue) ||\n    companyValues[0]!;\n\n  return (\n    <section className=\"py-24\">\n      <div className=\"container mx-auto px-4 md:px-6 2xl:max-w-[1400px]\">\n        <div className=\"mx-auto mb-16 max-w-3xl space-y-4 text-center\">\n          <div className=\"bg-primary/10 text-primary inline-block rounded-lg px-3 py-1 text-sm\">\n            Core Values\n          </div>\n          <h2 className=\"text-3xl font-bold tracking-tight md:text-4xl\">\n            What Guides Our Decisions\n          </h2>\n          <p className=\"text-muted-foreground\">\n            Our values aren&apos;t just words on a wall—they&apos;re the\n            principles that guide our daily actions and long-term vision,\n            shaping our culture and driving our success.\n          </p>\n        </div>\n\n        <Tabs\n          value={activeValue}\n          onValueChange={setActiveValue}\n          className=\"space-y-8\"\n        >\n          {/* Value selection - Tabs for md+ screens, Dropdown for smaller screens */}\n          <div className=\"mb-8 flex justify-center\">\n            {/* Dropdown for small screens */}\n            <div className=\"w-full md:hidden\">\n              <Select value={activeValue} onValueChange={setActiveValue}>\n                <SelectTrigger className=\"w-full\">\n                  <SelectValue placeholder=\"Select a value\" />\n                </SelectTrigger>\n                <SelectContent>\n                  {companyValues.map((value) => (\n                    <SelectItem key={value.id} value={value.id}>\n                      <div className=\"flex items-center gap-2\">\n                        <value.icon className={cn('h-4 w-4', value.color)} />\n                        <span>{value.name}</span>\n                      </div>\n                    </SelectItem>\n                  ))}\n                </SelectContent>\n              </Select>\n            </div>\n\n            {/* Tabs for medium screens and above */}\n            <TabsList className=\"hidden h-auto bg-transparent p-1 md:flex\">\n              {companyValues.map((value) => (\n                <TabsTrigger\n                  key={value.id}\n                  value={value.id}\n                  className={cn(\n                    'data-[state=active]:bg-muted gap-2',\n                    'data-[state=active]:border-border border border-transparent'\n                  )}\n                >\n                  <value.icon className={cn('h-4 w-4', value.color)} />\n                  <span>{value.name}</span>\n                </TabsTrigger>\n              ))}\n            </TabsList>\n          </div>\n\n          {/* Value content */}\n          <div className=\"grid items-center gap-8 md:grid-cols-12\">\n            {/* Left column: Value details */}\n            <div className=\"space-y-6 md:col-span-6\">\n              <div className=\"mb-4 flex items-center gap-4\">\n                <div className={cn('rounded-xl p-2.5', 'bg-muted')}>\n                  <currentValue.icon\n                    className={cn('h-7 w-7', currentValue.color)}\n                  />\n                </div>\n                <h3 className=\"text-2xl font-bold\">{currentValue.name}</h3>\n              </div>\n\n              <p className=\"text-muted-foreground text-lg\">\n                {currentValue.description}\n              </p>\n\n              <div className=\"space-y-3 pt-2\">\n                <h4 className=\"font-medium\">Key Principles:</h4>\n                <ul className=\"space-y-2\">\n                  {currentValue.principles.map((principle, i) => (\n                    <li key={i} className=\"flex items-start gap-2\">\n                      <ArrowUpRightIcon\n                        className={cn('mt-0.5 h-5 w-5', currentValue.color)}\n                      />\n                      <span>{principle}</span>\n                    </li>\n                  ))}\n                </ul>\n              </div>\n\n              {currentValue.testimonial && (\n                <Card className=\"bg-muted/30 mt-6 p-0\">\n                  <CardContent className=\"p-6\">\n                    <div className=\"mb-4 flex flex-col items-start gap-4 sm:flex-row sm:items-center\">\n                      <div className=\"relative h-12 w-12 flex-shrink-0 overflow-hidden rounded-full\">\n                        <img\n                          src={currentValue.testimonial.image}\n                          alt={currentValue.testimonial.author}\n                          className=\"object-cover\"\n                        />\n                      </div>\n                      <div>\n                        <h4 className=\"font-semibold\">\n                          {currentValue.testimonial.author}\n                        </h4>\n                        <p className=\"text-muted-foreground text-sm\">\n                          {currentValue.testimonial.role}\n                        </p>\n                      </div>\n                    </div>\n                    <p className=\"text-muted-foreground italic\">\n                      &quot;{currentValue.testimonial.quote}&quot;\n                    </p>\n                  </CardContent>\n                </Card>\n              )}\n            </div>\n\n            {/* Right column: Value image */}\n            <div className=\"md:col-span-6\">\n              {currentValue.image ? (\n                <div className=\"relative aspect-[4/3] overflow-hidden rounded-xl shadow-lg\">\n                  <img\n                    src={currentValue.image}\n                    alt={`Illustration of our ${currentValue.name} value`}\n                    className=\"object-cover\"\n                  />\n                  <div className=\"absolute inset-0 bg-gradient-to-t from-black/50 to-transparent\" />\n                  <div className=\"absolute right-0 bottom-0 left-0 p-6\">\n                    <div\n                      className={cn(\n                        'inline-block rounded-lg px-3 py-1 text-sm text-white',\n                        'bg-black/30 backdrop-blur-sm'\n                      )}\n                    >\n                      {currentValue.name}\n                    </div>\n                  </div>\n                </div>\n              ) : (\n                <div className=\"bg-muted flex aspect-[4/3] items-center justify-center rounded-xl\">\n                  <currentValue.icon\n                    className={cn(\n                      'h-24 w-24',\n                      currentValue.color,\n                      'opacity-25'\n                    )}\n                  />\n                </div>\n              )}\n            </div>\n          </div>\n        </Tabs>\n\n        {/* Call-to-action */}\n        <div className=\"mt-16 text-center\">\n          <p className=\"text-muted-foreground mx-auto mb-6 max-w-2xl\">\n            These values guide every aspect of our work. Want to be part of a\n            team that lives these values every day?\n          </p>\n          <Button asChild size=\"lg\">\n            <a href=\"#\">Join Our Team</a>\n          </Button>\n        </div>\n      </div>\n    </section>\n  );\n}\n","type":"registry:component","target":"components/blocks/marketing/about-sections/company-values.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/card.tsx","content":"import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({\n  className,\n  size = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & { size?: \"default\" | \"sm\" }) {\n  return (\n    <div\n      data-slot=\"card\"\n      data-size={size}\n      className={cn(\n        \"group/card flex flex-col gap-6 overflow-hidden rounded-xl bg-card py-6 text-sm text-card-foreground shadow-xs ring-1 ring-foreground/10 has-[>img:first-child]:pt-0 data-[size=sm]:gap-4 data-[size=sm]:py-4 *:[img:first-child]:rounded-t-xl *:[img:last-child]:rounded-b-xl\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardHeader({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-header\"\n      className={cn(\n        \"group/card-header @container/card-header grid auto-rows-min items-start gap-1 rounded-t-xl px-6 group-data-[size=sm]/card:px-4 has-data-[slot=card-action]:grid-cols-[1fr_auto] has-data-[slot=card-description]:grid-rows-[auto_auto] [.border-b]:pb-6 group-data-[size=sm]/card:[.border-b]:pb-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-title\"\n      className={cn(\n        \"font-heading text-base leading-normal font-medium group-data-[size=sm]/card:text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardDescription({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-description\"\n      className={cn(\"text-sm text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardAction({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-action\"\n      className={cn(\n        \"col-start-2 row-span-2 row-start-1 self-start justify-self-end\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction CardContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-content\"\n      className={cn(\"px-6 group-data-[size=sm]/card:px-4\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction CardFooter({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card-footer\"\n      className={cn(\n        \"flex items-center rounded-b-xl px-6 group-data-[size=sm]/card:px-4 [.border-t]:pt-6 group-data-[size=sm]/card:[.border-t]:pt-4\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Card,\n  CardHeader,\n  CardFooter,\n  CardTitle,\n  CardAction,\n  CardDescription,\n  CardContent,\n}\n","type":"registry:ui","target":"components/ui/card.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"},{"path":"components/ui/select.tsx","content":"\"use client\"\n\nimport * as React from \"react\"\nimport { Select as SelectPrimitive } from \"radix-ui\"\n\nimport { cn } from \"@/lib/utils\"\nimport { ChevronDownIcon, CheckIcon, ChevronUpIcon } from \"lucide-react\"\n\nfunction Select({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Root>) {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />\n}\n\nfunction SelectGroup({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Group>) {\n  return (\n    <SelectPrimitive.Group\n      data-slot=\"select-group\"\n      className={cn(\"scroll-my-1 p-1\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectValue({\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Value>) {\n  return <SelectPrimitive.Value data-slot=\"select-value\" {...props} />\n}\n\nfunction SelectTrigger({\n  className,\n  size = \"default\",\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Trigger> & {\n  size?: \"sm\" | \"default\"\n}) {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      data-size={size}\n      className={cn(\n        \"flex w-fit items-center justify-between gap-1.5 rounded-md border border-input bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none 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 data-placeholder:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:bg-input/30 dark:hover:bg-input/50 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        className\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon asChild>\n        <ChevronDownIcon className=\"pointer-events-none size-4 text-muted-foreground\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  )\n}\n\nfunction SelectContent({\n  className,\n  children,\n  position = \"item-aligned\",\n  align = \"center\",\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Content>) {\n  return (\n    <SelectPrimitive.Portal>\n      <SelectPrimitive.Content\n        data-slot=\"select-content\"\n        data-align-trigger={position === \"item-aligned\"}\n        className={cn(\"relative z-50 max-h-(--radix-select-content-available-height) min-w-36 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md bg-popover text-popover-foreground shadow-md ring-1 ring-foreground/10 duration-100 data-[align-trigger=true]:animate-none data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95\", position ===\"popper\"&&\"data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1\", className )}\n        position={position}\n        align={align}\n        {...props}\n      >\n        <SelectScrollUpButton />\n        <SelectPrimitive.Viewport\n          data-position={position}\n          className={cn(\n            \"data-[position=popper]:h-(--radix-select-trigger-height) data-[position=popper]:w-full data-[position=popper]:min-w-(--radix-select-trigger-width)\",\n            position === \"popper\" && \"\"\n          )}\n        >\n          {children}\n        </SelectPrimitive.Viewport>\n        <SelectScrollDownButton />\n      </SelectPrimitive.Content>\n    </SelectPrimitive.Portal>\n  )\n}\n\nfunction SelectLabel({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Label>) {\n  return (\n    <SelectPrimitive.Label\n      data-slot=\"select-label\"\n      className={cn(\"px-2 py-1.5 text-xs text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectItem({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Item>) {\n  return (\n    <SelectPrimitive.Item\n      data-slot=\"select-item\"\n      className={cn(\n        \"relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2\",\n        className\n      )}\n      {...props}\n    >\n      <span className=\"pointer-events-none absolute right-2 flex size-4 items-center justify-center\">\n        <SelectPrimitive.ItemIndicator>\n          <CheckIcon className=\"pointer-events-none\" />\n        </SelectPrimitive.ItemIndicator>\n      </span>\n      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>\n    </SelectPrimitive.Item>\n  )\n}\n\nfunction SelectSeparator({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.Separator>) {\n  return (\n    <SelectPrimitive.Separator\n      data-slot=\"select-separator\"\n      className={cn(\"pointer-events-none -mx-1 my-1 h-px bg-border\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction SelectScrollUpButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollUpButton>) {\n  return (\n    <SelectPrimitive.ScrollUpButton\n      data-slot=\"select-scroll-up-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronUpIcon\n      />\n    </SelectPrimitive.ScrollUpButton>\n  )\n}\n\nfunction SelectScrollDownButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof SelectPrimitive.ScrollDownButton>) {\n  return (\n    <SelectPrimitive.ScrollDownButton\n      data-slot=\"select-scroll-down-button\"\n      className={cn(\n        \"z-10 flex cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4\",\n        className\n      )}\n      {...props}\n    >\n      <ChevronDownIcon\n      />\n    </SelectPrimitive.ScrollDownButton>\n  )\n}\n\nexport {\n  Select,\n  SelectContent,\n  SelectGroup,\n  SelectItem,\n  SelectLabel,\n  SelectScrollDownButton,\n  SelectScrollUpButton,\n  SelectSeparator,\n  SelectTrigger,\n  SelectValue,\n}\n","type":"registry:ui","target":"components/ui/select.tsx"}],"description":"A clean grid of core values, each with an icon, title, and sentence. Use it to explain the beliefs that guide how your company operates daily.","dependencies":["class-variance-authority","lucide-react","radix-ui"]}