31:I[393222,["/_next/static/immutable/chunks/1ghzvo2v3e9it.js","/_next/static/immutable/chunks/2z12yfji59qij.js","/_next/static/immutable/chunks/2kz55mtt4gg9-.js","/_next/static/immutable/chunks/2wh1of756ayx2.js","/_next/static/immutable/chunks/1hrni9oh_1ydl.js","/_next/static/immutable/chunks/0c8a4jz2glq2z.js","/_next/static/immutable/chunks/2_pnkmjnqn60o.js","/_next/static/immutable/chunks/2go1j71-0poyv.js","/_next/static/immutable/chunks/0-5r2xowg15yg.js","/_next/static/immutable/chunks/1t7ajpe315x-6.js","/_next/static/immutable/chunks/14k-28a04j7wc.js","/_next/static/immutable/chunks/0v6d2j1fs6vdq.js","/_next/static/immutable/chunks/16plp8w2vixfe.js","/_next/static/immutable/chunks/135kivfvlqp26.js","/_next/static/immutable/chunks/3ovl2hhpccn0u.js","/_next/static/immutable/chunks/0r21vgnmwirm_.js","/_next/static/immutable/chunks/3egckb77v2ujh.js"],"CopyButton"] 32:Ta17,"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 relative 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", // Inside a segmented ToggleGroup: the chosen option is raised out of the sunken track. segmented: "border border-transparent bg-transparent text-muted-foreground hover:bg-transparent aria-pressed:bg-background data-pressed:bg-background data-pressed:shadow-sm data-pressed:inset-shadow-surface data-pressed:surface-sheen dark:data-pressed:border-input dark:data-pressed:bg-input/30", }, size: { default: "h-8 min-w-8 px-2.5 pointer-coarse:h-11 pointer-coarse:min-w-11 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2", sm: "h-7 min-w-7 pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 pointer-coarse:after:-translate-1/2 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 pointer-coarse:h-11 pointer-coarse:min-w-11 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 }33:T3aa3,

"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 relative 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",
        // Inside a segmented ToggleGroup: the chosen option is raised out of the sunken track.
        segmented:
          "border border-transparent bg-transparent text-muted-foreground hover:bg-transparent aria-pressed:bg-background data-pressed:bg-background data-pressed:shadow-sm data-pressed:inset-shadow-surface data-pressed:surface-sheen dark:data-pressed:border-input dark:data-pressed:bg-input/30",
      },
      size: {
        default: "h-8 min-w-8 px-2.5 pointer-coarse:h-11 pointer-coarse:min-w-11 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
        sm: "h-7 min-w-7 pointer-coarse:after:absolute pointer-coarse:after:top-1/2 pointer-coarse:after:left-1/2 pointer-coarse:after:size-full pointer-coarse:after:min-h-11 pointer-coarse:after:min-w-11 pointer-coarse:after:-translate-1/2 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 pointer-coarse:h-11 pointer-coarse:min-w-11 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 }

2f:["$","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"}],["$","$L31",null,{"value":"$32","className":"absolute top-2 right-2 z-10"}],["$","div",null,{"className":"docs-code max-h-112 overflow-auto text-[13px]","dangerouslySetInnerHTML":{"__html":"$33"}}]]}]

Toggle

Installation