{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "pricing-table",
  "type": "registry:ui",
  "title": "Pricing Table",
  "description": "A pricing table component with support for monthly/yearly pricing.",
  "dependencies": [
    "@number-flow/react",
    "@radix-ui/react-use-controllable-state",
    "card",
    "badge",
    "button",
    "switch",
    "toggle-group",
    "@radix-ui/react-slot",
    "class-variance-authority",
    "@radix-ui/react-switch",
    "@radix-ui/react-toggle-group",
    "@radix-ui/react-toggle"
  ],
  "registryDependencies": ["@alexcarpenter/info-list"],
  "files": [
    {
      "path": "registry/default/ui/pricing-table.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cn } from \"@/lib/utils\"\nimport { Badge } from \"@/registry/default/ui/badge\"\nimport { Button } from \"@/registry/default/ui/button\"\nimport {\n  Card,\n  CardAction,\n  CardContent,\n  CardDescription,\n  CardFooter,\n  CardHeader,\n  CardTitle,\n} from \"@/registry/default/ui/card\"\nimport {\n  InfoList,\n  InfoListIcon,\n  InfoListItem,\n  InfoListText,\n} from \"@/registry/default/ui/info-list\"\nimport { Switch } from \"@/registry/default/ui/switch\"\nimport {\n  ToggleGroup,\n  ToggleGroupItem,\n} from \"@/registry/default/ui/toggle-group\"\nimport NumberFlow from \"@number-flow/react\"\nimport { useControllableState } from \"@radix-ui/react-use-controllable-state\"\n\ntype BillingPeriod = \"monthly\" | \"yearly\"\nexport type { BillingPeriod as PricingTableBillingPeriod }\n\ntype PriceFormatterOptions = {\n  style: \"currency\"\n  currency: string\n  trailingZeroDisplay?: \"stripIfInteger\" | \"auto\"\n  minimumFractionDigits?: number\n  maximumFractionDigits?: number\n}\n\ntype PricingTableContextValue = {\n  billingPeriod: BillingPeriod\n  setBillingPeriod: (period: BillingPeriod) => void\n  priceFormatter: Intl.NumberFormat\n  priceFormatterOptions: PriceFormatterOptions\n  locale: Intl.LocalesArgument\n}\n\nconst defaultPriceFormatterOptions: PriceFormatterOptions = {\n  style: \"currency\",\n  currency: \"USD\",\n  trailingZeroDisplay: \"stripIfInteger\",\n} as const\n\nconst PricingTableContext = React.createContext<PricingTableContextValue>({\n  billingPeriod: \"monthly\",\n  setBillingPeriod: () => {},\n  priceFormatter: new Intl.NumberFormat(\"en-US\", defaultPriceFormatterOptions),\n  priceFormatterOptions: defaultPriceFormatterOptions,\n  locale: \"en-US\",\n})\n\nexport const usePricingTableContext = () =>\n  React.useContext(PricingTableContext)\n\nexport function PricingTable({\n  billingPeriod: billingPeriodProp,\n  setBillingPeriod: setBillingPeriodProp,\n  defaultBillingPeriod = \"monthly\",\n  priceFormatterOptions = defaultPriceFormatterOptions,\n  locale = \"en-US\",\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  billingPeriod?: BillingPeriod\n  setBillingPeriod?: (period: BillingPeriod) => void\n  defaultBillingPeriod?: BillingPeriod\n  priceFormatterOptions?: PriceFormatterOptions\n  locale?: string\n}) {\n  const [billingPeriod, setBillingPeriod] = useControllableState({\n    prop: billingPeriodProp,\n    defaultProp: defaultBillingPeriod,\n    onChange: setBillingPeriodProp,\n    caller: \"pricing-table\",\n  })\n\n  const priceFormatter = React.useMemo(\n    () => new Intl.NumberFormat(locale, priceFormatterOptions),\n    [locale, priceFormatterOptions]\n  )\n\n  const contextValue = React.useMemo(\n    () => ({\n      billingPeriod,\n      setBillingPeriod,\n      priceFormatter,\n      priceFormatterOptions,\n      locale,\n    }),\n    [\n      billingPeriod,\n      setBillingPeriod,\n      priceFormatter,\n      priceFormatterOptions,\n      locale,\n    ]\n  )\n\n  return (\n    <PricingTableContext.Provider value={contextValue}>\n      <div\n        className={cn(\"@container/pricing-table w-full\", className)}\n        {...props}\n      >\n        {children}\n      </div>\n    </PricingTableContext.Provider>\n  )\n}\n\nexport function PricingTableSwitchGroup({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      className={cn(\n        \"mb-16 grid grid-cols-[1fr_theme(spacing.8)_1fr] gap-2\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\nexport function PricingTableSwitchItem({\n  value,\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"span\"> & {\n  value: BillingPeriod\n}) {\n  const { billingPeriod } = usePricingTableContext()\n  return (\n    <span\n      className={cn(\n        \"truncate text-sm font-semibold first:text-right\",\n        {\n          \"text-primary\": billingPeriod === value,\n        },\n        className\n      )}\n      data-active={billingPeriod === value}\n      {...props}\n    >\n      {children}\n    </span>\n  )\n}\n\nexport function PricingTableSwitch({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof Switch>) {\n  const { billingPeriod, setBillingPeriod } = usePricingTableContext()\n  return (\n    <Switch\n      className={cn(className)}\n      checked={billingPeriod === \"yearly\"}\n      onCheckedChange={(checked) => {\n        setBillingPeriod(checked ? \"yearly\" : \"monthly\")\n      }}\n      {...props}\n    />\n  )\n}\n\nexport function PricingTableToggleGroup({\n  children,\n  className,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof ToggleGroup>,\n  \"type\" | \"value\" | \"onValueChange\" | \"defaultValue\"\n>) {\n  const { billingPeriod, setBillingPeriod } = usePricingTableContext()\n\n  return (\n    <ToggleGroup\n      type=\"single\"\n      value={billingPeriod}\n      onValueChange={(value: string) => {\n        if (value === \"monthly\" || value === \"yearly\") {\n          setBillingPeriod(value as BillingPeriod)\n        }\n      }}\n      variant=\"outline\"\n      className={cn(\"mx-auto mb-16\", className)}\n      {...props}\n    >\n      {children}\n    </ToggleGroup>\n  )\n}\n\nexport function PricingTableToggleItem({\n  children,\n  value,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupItem> & {\n  value: BillingPeriod\n}) {\n  return (\n    <ToggleGroupItem value={value} {...props}>\n      {children}\n    </ToggleGroupItem>\n  )\n}\n\nexport function PricingTableGrid({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  const count = React.Children.count(children)\n  return (\n    <div\n      className={cn(\n        \"group/pricing-table-grid\",\n        \"grid grid-rows-[auto_auto_auto] gap-x-4 gap-y-12\",\n        \"data-[count=1]:grid-cols-1\",\n        \"data-[count=2]:@xl/pricing-table:grid-cols-2\",\n        \"data-[count=3]:@3xl/pricing-table:grid-cols-3\",\n        \"data-[count=4]:@4xl/pricing-table:grid-cols-4\",\n        className\n      )}\n      data-count={count}\n      {...props}\n    >\n      {children}\n    </div>\n  )\n}\n\ntype PricingTableCardContextValue = {\n  highlight?: boolean\n}\n\nconst PricingTableCardContext =\n  React.createContext<PricingTableCardContextValue>({\n    highlight: false,\n  })\n\nexport const usePricingTableCardContext = () =>\n  React.useContext(PricingTableCardContext)\n\nexport function PricingTableCard({\n  highlight,\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof Card> & { highlight?: boolean }) {\n  return (\n    <PricingTableCardContext.Provider value={{ highlight }}>\n      <Card\n        className={cn(\n          \"group/pricing-table-card relative row-span-3 grid grid-rows-subgrid\",\n          highlight && [\n            \"ring-primary border-primary -my-4 py-10 ring\",\n            \"group-data-[count=1]/pricing-table-grid:my-0\",\n            \"group-data-[count=2]/pricing-table-grid:@xl/pricing-table:-my-4 group-data-[count=2]/pricing-table-grid:@xl/pricing-table:py-10\",\n            \"group-data-[count=3]/pricing-table-grid:@3xl/pricing-table:-my-4 group-data-[count=3]/pricing-table-grid:@3xl/pricing-table:py-10\",\n            \"group-data-[count=4]/pricing-table-grid:@4xl/pricing-table:-my-4 group-data-[count=4]/pricing-table-grid:@4xl/pricing-table:py-10\",\n          ],\n          className\n        )}\n        data-highlight={highlight}\n        {...props}\n      >\n        {children}\n      </Card>\n    </PricingTableCardContext.Provider>\n  )\n}\n\nexport function PricingTableCardHeader({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardHeader>) {\n  return (\n    <CardHeader className={cn(\"grid-rows-[auto_1fr]\", className)} {...props} />\n  )\n}\n\nexport function PricingTableCardBadge({\n  children,\n  className,\n  ...props\n}: React.ComponentProps<typeof Badge>) {\n  const { highlight } = usePricingTableCardContext()\n  if (!highlight) return null\n  return (\n    <Badge\n      className={cn(\n        \"absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </Badge>\n  )\n}\n\nexport function PricingTableCardTitle({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardTitle>) {\n  return <CardTitle className={cn(\"text-lg\", className)} {...props} />\n}\n\nexport function PricingTableCardDescription({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardDescription>) {\n  return (\n    <CardDescription\n      className={cn(\n        \"text-muted-foreground col-span-full row-start-2 line-clamp-2 text-sm\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nexport function PricingTableCardSlot(\n  props: React.ComponentProps<typeof CardAction>\n) {\n  return <CardAction {...props} data-slot=\"card-action testing\" />\n}\n\nexport function PricingTableCardPrice({\n  monthly,\n  yearly,\n  className,\n  suffix,\n  ...props\n}: Omit<\n  React.ComponentProps<typeof NumberFlow>,\n  \"value\" | \"format\" | \"suffix\"\n> & {\n  monthly: number\n  yearly?: number\n  suffix?: string | ((billingPeriod: BillingPeriod) => string)\n}) {\n  const { billingPeriod, priceFormatterOptions, locale } =\n    usePricingTableContext()\n\n  if (!monthly) {\n    return null\n  }\n\n  const currentPrice = billingPeriod === \"monthly\" ? monthly : yearly || monthly\n\n  return (\n    <NumberFlow\n      className={cn(\n        \"[&::part(suffix)]:text-muted-foreground text-lg font-semibold\",\n        className\n      )}\n      locales={locale}\n      format={priceFormatterOptions}\n      value={currentPrice}\n      suffix={typeof suffix === \"function\" ? suffix(billingPeriod) : suffix}\n      {...props}\n    />\n  )\n}\n\nexport function PricingTableCardContent({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardContent>) {\n  return (\n    <CardContent\n      className={cn(\"row-start-2 flex flex-col gap-2\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function PricingTableCardList(\n  props: React.ComponentProps<typeof InfoList>\n) {\n  return <InfoList {...props} />\n}\n\nexport function PricingTableCardListItem({\n  className,\n  ...props\n}: React.ComponentProps<typeof InfoListItem>) {\n  return <InfoListItem className={cn(\"gap-2 text-sm\", className)} {...props} />\n}\n\nexport function PricingTableCardListIcon({\n  className,\n  ...props\n}: React.ComponentProps<typeof InfoListIcon>) {\n  return (\n    <InfoListIcon\n      className={cn(\"text-muted-foreground\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function PricingTableCardListText(\n  props: React.ComponentProps<typeof InfoListText>\n) {\n  return <InfoListText {...props} />\n}\n\nexport function PricingTableCardFooter({\n  className,\n  ...props\n}: React.ComponentProps<typeof CardFooter>) {\n  return (\n    <CardFooter\n      className={cn(\"row-start-3 [&>[data-slot=button]]:w-full\", className)}\n      {...props}\n    />\n  )\n}\n\nexport function PricingTableCardButton({\n  className,\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  const { highlight } = usePricingTableCardContext()\n  return (\n    <Button\n      className={cn(\"w-full\", className)}\n      variant={highlight ? \"default\" : \"outline\"}\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui"
    },
    {
      "path": "registry/default/ui/badge.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst badgeVariants = cva(\n  \"inline-flex items-center justify-center rounded-md border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90\",\n        secondary:\n          \"border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90\",\n        destructive:\n          \"border-transparent bg-destructive text-white [a&]:hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  }\n)\n\nfunction Badge({\n  className,\n  variant,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"span\"> &\n  VariantProps<typeof badgeVariants> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"span\"\n\n  return (\n    <Comp\n      data-slot=\"badge\"\n      className={cn(badgeVariants({ variant }), className)}\n      {...props}\n    />\n  )\n}\n\nexport { Badge, badgeVariants }\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "registry/default/ui/button.tsx",
      "content": "import * as React from \"react\"\nimport { Slot } from \"@radix-ui/react-slot\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst buttonVariants = cva(\n  \"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive\",\n  {\n    variants: {\n      variant: {\n        default:\n          \"bg-primary text-primary-foreground shadow-xs hover:bg-primary/90\",\n        destructive:\n          \"bg-destructive text-white shadow-xs hover:bg-destructive/90 focus-visible:ring-destructive/20 dark:focus-visible:ring-destructive/40 dark:bg-destructive/60\",\n        outline:\n          \"border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50\",\n        secondary:\n          \"bg-secondary text-secondary-foreground shadow-xs hover:bg-secondary/80\",\n        ghost:\n          \"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50\",\n        link: \"text-primary underline-offset-4 hover:underline\",\n      },\n      size: {\n        default: \"h-9 px-4 py-2 has-[>svg]:px-3\",\n        sm: \"h-8 rounded-md gap-1.5 px-3 has-[>svg]:px-2.5\",\n        lg: \"h-10 rounded-md px-6 has-[>svg]:px-4\",\n        icon: \"size-9\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Button({\n  className,\n  variant,\n  size,\n  asChild = false,\n  ...props\n}: React.ComponentProps<\"button\"> &\n  VariantProps<typeof buttonVariants> & {\n    asChild?: boolean\n  }) {\n  const Comp = asChild ? Slot : \"button\"\n\n  return (\n    <Comp\n      data-slot=\"button\"\n      className={cn(buttonVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Button, buttonVariants }\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "registry/default/ui/card.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Card({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"card\"\n      className={cn(\n        \"bg-card text-card-foreground flex flex-col gap-6 rounded-xl border py-6 shadow-sm\",\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        \"@container/card-header grid auto-rows-min grid-rows-[auto_auto] items-start gap-1.5 px-6 has-data-[slot~=card-action]:grid-cols-[1fr_auto] [.border-b]:pb-6\",\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(\"leading-none font-semibold\", className)}\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-muted-foreground text-sm\", 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\", 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(\"flex items-center px-6 [.border-t]:pt-6\", className)}\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": ""
    },
    {
      "path": "registry/default/ui/info-list.tsx",
      "content": "import { cn } from \"@/lib/utils\"\nimport { Slot } from \"@radix-ui/react-slot\"\n\nexport function InfoList({ className, ...props }: React.ComponentProps<\"ul\">) {\n  return (\n    <ul\n      className={cn(\"flex flex-col gap-2\", className)}\n      data-slot=\"info-list\"\n      {...props}\n    />\n  )\n}\n\nexport function InfoListItem({\n  className,\n  ...props\n}: React.ComponentProps<\"li\">) {\n  return (\n    <li\n      className={cn(\n        \"flex gap-4 has-[*[data-slot='header']]:flex-col\",\n        className\n      )}\n      data-slot=\"info-list-item\"\n      {...props}\n    />\n  )\n}\n\nexport function InfoListHeader({\n  className,\n  ...props\n}: React.ComponentProps<\"header\">) {\n  return (\n    <header\n      className={cn(\"flex gap-4\", className)}\n      data-slot=\"info-list-header\"\n      {...props}\n    />\n  )\n}\n\nexport function InfoListIcon({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      className={cn(\n        \"flex h-[1lh] flex-none items-center [&>svg]:size-[1em]\",\n        className\n      )}\n      data-slot=\"info-list-icon\"\n      {...props}\n    />\n  )\n}\n\nexport function InfoListText({\n  className,\n  asChild,\n  ...props\n}: React.ComponentProps<\"p\"> & { asChild?: boolean }) {\n  const Comp = asChild ? Slot : \"p\"\n  return (\n    <Comp\n      className={cn(\"text-pretty\", className)}\n      data-slot=\"info-list-text\"\n      {...props}\n    />\n  )\n}\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "registry/default/ui/switch.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as SwitchPrimitive from \"@radix-ui/react-switch\"\n\nimport { cn } from \"@/lib/utils\"\n\nfunction Switch({\n  className,\n  ...props\n}: React.ComponentProps<typeof SwitchPrimitive.Root>) {\n  return (\n    <SwitchPrimitive.Root\n      data-slot=\"switch\"\n      className={cn(\n        \"peer data-[state=checked]:bg-primary data-[state=unchecked]:bg-input focus-visible:border-ring focus-visible:ring-ring/50 dark:data-[state=unchecked]:bg-input/80 inline-flex h-[1.15rem] w-8 shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:ring-[3px] disabled:cursor-not-allowed disabled:opacity-50\",\n        className\n      )}\n      {...props}\n    >\n      <SwitchPrimitive.Thumb\n        data-slot=\"switch-thumb\"\n        className={cn(\n          \"bg-background dark:data-[state=unchecked]:bg-foreground dark:data-[state=checked]:bg-primary-foreground pointer-events-none block size-4 rounded-full ring-0 transition-transform data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0\"\n        )}\n      />\n    </SwitchPrimitive.Root>\n  )\n}\n\nexport { Switch }\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "registry/default/ui/toggle-group.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as ToggleGroupPrimitive from \"@radix-ui/react-toggle-group\"\nimport { type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { toggleVariants } from \"@/registry/default/ui/toggle\"\n\nconst ToggleGroupContext = React.createContext<\n  VariantProps<typeof toggleVariants>\n>({\n  size: \"default\",\n  variant: \"default\",\n})\n\nfunction ToggleGroup({\n  className,\n  variant,\n  size,\n  children,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <ToggleGroupPrimitive.Root\n      data-slot=\"toggle-group\"\n      data-variant={variant}\n      data-size={size}\n      className={cn(\n        \"group/toggle-group flex w-fit items-center rounded-md data-[variant=outline]:shadow-xs\",\n        className\n      )}\n      {...props}\n    >\n      <ToggleGroupContext.Provider value={{ variant, size }}>\n        {children}\n      </ToggleGroupContext.Provider>\n    </ToggleGroupPrimitive.Root>\n  )\n}\n\nfunction ToggleGroupItem({\n  className,\n  children,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof ToggleGroupPrimitive.Item> &\n  VariantProps<typeof toggleVariants>) {\n  const context = React.useContext(ToggleGroupContext)\n\n  return (\n    <ToggleGroupPrimitive.Item\n      data-slot=\"toggle-group-item\"\n      data-variant={context.variant || variant}\n      data-size={context.size || size}\n      className={cn(\n        toggleVariants({\n          variant: context.variant || variant,\n          size: context.size || size,\n        }),\n        \"min-w-0 flex-1 shrink-0 rounded-none shadow-none first:rounded-l-md last:rounded-r-md focus:z-10 focus-visible:z-10 data-[variant=outline]:border-l-0 data-[variant=outline]:first:border-l\",\n        className\n      )}\n      {...props}\n    >\n      {children}\n    </ToggleGroupPrimitive.Item>\n  )\n}\n\nexport { ToggleGroup, ToggleGroupItem }\n",
      "type": "registry:ui",
      "target": ""
    },
    {
      "path": "registry/default/ui/toggle.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport * as TogglePrimitive from \"@radix-ui/react-toggle\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst toggleVariants = cva(\n  \"inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium hover:bg-muted hover:text-muted-foreground disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 [&_svg]:shrink-0 focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] outline-none transition-[color,box-shadow] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive whitespace-nowrap\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        outline:\n          \"border border-input bg-transparent shadow-xs hover:bg-accent hover:text-accent-foreground\",\n      },\n      size: {\n        default: \"h-9 px-2 min-w-9\",\n        sm: \"h-8 px-1.5 min-w-8\",\n        lg: \"h-10 px-2.5 min-w-10\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n      size: \"default\",\n    },\n  }\n)\n\nfunction Toggle({\n  className,\n  variant,\n  size,\n  ...props\n}: React.ComponentProps<typeof TogglePrimitive.Root> &\n  VariantProps<typeof toggleVariants>) {\n  return (\n    <TogglePrimitive.Root\n      data-slot=\"toggle\"\n      className={cn(toggleVariants({ variant, size, className }))}\n      {...props}\n    />\n  )\n}\n\nexport { Toggle, toggleVariants }\n",
      "type": "registry:ui",
      "target": ""
    }
  ]
}