2d:I[393222,["/_next/static/immutable/chunks/1ghzvo2v3e9it.js","/_next/static/immutable/chunks/1ubf407bbesvn.js","/_next/static/immutable/chunks/2ru5l8aalwffo.js","/_next/static/immutable/chunks/2_pnkmjnqn60o.js","/_next/static/immutable/chunks/02zdfc_ck3rnv.js","/_next/static/immutable/chunks/3pcm9i84ehett.js","/_next/static/immutable/chunks/2kz55mtt4gg9-.js","/_next/static/immutable/chunks/2754p4i-zrjf8.js","/_next/static/immutable/chunks/0wc_90o59fis_.js","/_next/static/immutable/chunks/0v6d2j1fs6vdq.js","/_next/static/immutable/chunks/0d0omsdo6rngz.js","/_next/static/immutable/chunks/2go1j71-0poyv.js","/_next/static/immutable/chunks/14k-28a04j7wc.js","/_next/static/immutable/chunks/052z53e2-1wpg.js","/_next/static/immutable/chunks/3ovl2hhpccn0u.js","/_next/static/immutable/chunks/0r21vgnmwirm_.js","/_next/static/immutable/chunks/2lmq6h0csgx00.js"],"CopyButton"] 2e:T743,"use client" import { Toggle as TogglePrimitive } from "@base-ui/react/toggle" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "cn" const toggleVariants = cva( "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-foreground/10 aria-pressed:text-foreground data-pressed:bg-foreground/10 data-pressed:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", { variants: { variant: { default: "bg-transparent", outline: "border border-input bg-transparent hover:bg-muted aria-pressed:border-foreground/30 data-pressed:border-foreground/30", }, size: { default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5", lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", }, }, defaultVariants: { variant: "default", size: "default", }, }, ) function Toggle({ className, variant = "default", size = "default", ...props }: TogglePrimitive.Props & VariantProps) { return } export { Toggle, toggleVariants }2f:T35bb,

"use client"

import { Toggle as TogglePrimitive } from "@base-ui/react/toggle"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

const toggleVariants = cva(
  "group/toggle inline-flex items-center justify-center gap-1 rounded-lg text-sm font-medium whitespace-nowrap transition-all outline-none hover:bg-muted hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 aria-pressed:bg-foreground/10 aria-pressed:text-foreground data-pressed:bg-foreground/10 data-pressed:text-foreground dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
  {
    variants: {
      variant: {
        default: "bg-transparent",
        outline:
          "border border-input bg-transparent hover:bg-muted aria-pressed:border-foreground/30 data-pressed:border-foreground/30",
      },
      size: {
        default: "h-8 min-w-8 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        sm: "h-7 min-w-7 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
        lg: "h-9 min-w-9 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
      },
    },
    defaultVariants: {
      variant: "default",
      size: "default",
    },
  },
)

function Toggle({
  className,
  variant = "default",
  size = "default",
  ...props
}: TogglePrimitive.Props & VariantProps<typeof toggleVariants>) {
  return <TogglePrimitive data-slot="toggle" className={cn(toggleVariants({ variant, size, className }))} {...props} />
}

export { Toggle, toggleVariants }

2b:["$","div","components/ui/toggle.tsx",{"className":"group relative overflow-hidden rounded-xl border bg-card","children":[["$","div",null,{"className":"flex h-10 items-center border-b px-4 font-mono text-xs text-muted-foreground","children":"components/ui/toggle.tsx"}],["$","$L2d",null,{"value":"$2e","className":"absolute top-2 right-2 z-10"}],["$","div",null,{"className":"docs-code max-h-112 overflow-auto text-[13px]","dangerouslySetInnerHTML":{"__html":"$2f"}}]]}]

Toggle

Installation