var Component=(()=>{var D=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var N=Object.getOwnPropertyNames;var f=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var _=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),T=(n,e)=>{for(var s in e)i(n,s,{get:e[s],enumerable:!0})},F=(n,e,s,r)=>{if(e&&typeof e=="object"||typeof e=="function")for(let a of N(e))!B.call(n,a)&&a!==s&&i(n,a,{get:()=>e[a],enumerable:!(r=u(e,a))||r.enumerable});return n};var x=(n,e,s)=>(s=n!=null?D(f(n)):{},F(e||!n||!n.__esModule?i(s,"default",{value:n,enumerable:!0}):s,n)),v=n=>F(i({},"__esModule",{value:!0}),n);var g=_((C,y)=>{y.exports=_jsx_runtime});var A={};T(A,{default:()=>E,frontmatter:()=>b});var l=x(g()),b={title:"\u5207\u6362",description:"\u4E00\u4E2A\u53EF\u4EE5\u5904\u4E8E\u5F00\u6216\u5173\u4E24\u79CD\u72B6\u6001\u7684\u6309\u94AE\u3002",component:!0,links:{doc:"https://www.radix-ui.com/docs/primitives/components/toggle",api:"https://www.radix-ui.com/docs/primitives/components/toggle#api-reference"}};function m(n){let e={a:"a",code:"code",div:"div",h2:"h2",h3:"h3",pre:"pre",span:"span",...n.components},{CodeTabs:s,ComponentPreview:r,ComponentSource:a,Step:o,Steps:p,TabsContent:t,TabsList:h,TabsTrigger:d}=e;return s||c("CodeTabs",!0),r||c("ComponentPreview",!0),a||c("ComponentSource",!0),o||c("Step",!0),p||c("Steps",!0),t||c("TabsContent",!0),h||c("TabsList",!0),d||c("TabsTrigger",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(r,{name:"toggle-demo",description:"\u4E00\u4E2A\u5207\u6362\u7EC4\u4EF6\u3002",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Bold } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleDemo() { return ( ) } `,__src__:"registry/new-york/examples/toggle-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Bold } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleDemo"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Bold } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleDemo() { return ( ) } `,__src__:"registry/default/examples/toggle-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Bold } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleDemo"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle bold"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h2,{id:"\u5B89\u88C5",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5B89\u88C5",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u5B89\u88C5"]}),` `,(0,l.jsxs)(s,{children:[(0,l.jsxs)(h,{children:[(0,l.jsx)(d,{value:"cli",children:"\u547D\u4EE4\u884C"}),(0,l.jsx)(d,{value:"manual",children:"\u624B\u52A8"})]}),(0,l.jsx)(t,{value:"cli",children:(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npx shadcn@latest add toggle `,__npmCommand__:`npx shadcn@latest add toggle `,__yarnCommand__:`npx shadcn@latest add toggle `,__pnpmCommand__:`pnpm dlx shadcn@latest add toggle `,__bunCommand__:`bunx --bun shadcn@latest add toggle `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" shadcn@latest"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" toggle"})]})})})})}),(0,l.jsx)(t,{value:"manual",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(o,{children:"\u5B89\u88C5\u4EE5\u4E0B\u4F9D\u8D56\uFF1A"}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:`npm install @radix-ui/react-toggle `,__npmCommand__:`npm install @radix-ui/react-toggle `,__yarnCommand__:`yarn add @radix-ui/react-toggle `,__pnpmCommand__:`pnpm add @radix-ui/react-toggle `,__bunCommand__:`bun add @radix-ui/react-toggle `,children:(0,l.jsx)(e.code,{"data-language":"bash","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"npm"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" install"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:" @radix-ui/react-toggle"})]})})})}),(0,l.jsx)(o,{children:"\u5C06\u4EE5\u4E0B\u4EE3\u7801\u590D\u5236\u5E76\u7C98\u8D34\u5230\u4F60\u7684\u9879\u76EE\u4E2D\u3002"}),(0,l.jsxs)(a,{name:"toggle",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as TogglePrimitive from "@radix-ui/react-toggle" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const toggleVariants = cva( "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", { variants: { variant: { default: "bg-transparent", outline: "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground", }, size: { default: "h-9 px-2 min-w-9", sm: "h-8 px-1.5 min-w-8", lg: "h-10 px-2.5 min-w-10", }, }, defaultVariants: { variant: "default", size: "default", }, } ) const Toggle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, size, ...props }, ref) => ( )) Toggle.displayName = TogglePrimitive.Root.displayName export { Toggle, toggleVariants } `,__src__:"registry/new-york/ui/toggle.tsx",__style__:"new-york",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TogglePrimitive "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@radix-ui/react-toggle"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { cva, "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" VariantProps } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "class-variance-authority"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" cva"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "inline-flex items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" variants: {"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" variant: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" default: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"bg-transparent"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" outline:"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" size: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" default: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-9 px-2 min-w-9"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" sm: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-8 px-1.5 min-w-8"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" lg: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-10 px-2.5 min-w-10"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" defaultVariants: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" variant: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"default"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" size: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"default"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:")"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" Toggle"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TogglePrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"({ variant, size, className }))"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"Toggle.displayName "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TogglePrimitive.Root.displayName"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle, toggleVariants }"})]})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`"use client" import * as React from "react" import * as TogglePrimitive from "@radix-ui/react-toggle" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" const toggleVariants = cva( "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2", { variants: { variant: { default: "bg-transparent", outline: "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground", }, size: { default: "h-10 px-3 min-w-10", sm: "h-9 px-2.5 min-w-9", lg: "h-11 px-5 min-w-11", }, }, defaultVariants: { variant: "default", size: "default", }, } ) const Toggle = React.forwardRef< React.ElementRef, React.ComponentPropsWithoutRef & VariantProps >(({ className, variant, size, ...props }, ref) => ( )) Toggle.displayName = TogglePrimitive.Root.displayName export { Toggle, toggleVariants } `,__src__:"registry/default/ui/toggle.tsx",__style__:"default",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"use client"'})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "react"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TogglePrimitive "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@radix-ui/react-toggle"'})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { cva, "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" VariantProps } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "class-variance-authority"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/lib/utils"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" cva"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" {"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" variants: {"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" variant: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" default: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"bg-transparent"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" outline:"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "border border-input bg-transparent hover:bg-accent hover:text-accent-foreground"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" size: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" default: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-10 px-3 min-w-10"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" sm: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-9 px-2.5 min-w-9"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" lg: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-11 px-5 min-w-11"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" defaultVariants: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" variant: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"default"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" size: "}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"default"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:")"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" Toggle"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" ="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFA657"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"TogglePrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"={"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:"toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"({ variant, size, className }))"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" {..."}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"))"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"Toggle.displayName "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" TogglePrimitive.Root.displayName"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle, toggleVariants }"})]})]})})})]}),(0,l.jsx)(o,{children:"\u6839\u636E\u4F60\u7684\u9879\u76EE\u8BBE\u7F6E\u66F4\u65B0\u5BFC\u5165\u8DEF\u5F84\u3002"})]})})]}),` `,(0,l.jsxs)(e.h2,{id:"\u7528\u6CD5",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u7528\u6CD5",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u7528\u6CD5"]}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Toggle } from "@/components/ui/toggle" `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]})})})}),` `,(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`\u5207\u6362 `,children:(0,l.jsx)(e.code,{"data-language":"tsx","data-theme":"default",children:(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">\u5207\u6362"})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"\u793A\u4F8B",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u793A\u4F8B",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u793A\u4F8B"]}),` `,(0,l.jsxs)(e.h3,{id:"\u9ED8\u8BA4",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u9ED8\u8BA4",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u9ED8\u8BA4"]}),` `,(0,l.jsxs)(r,{name:"toggle-demo",description:"\u4E00\u4E2A\u5207\u6362\u7EC4\u4EF6\u3002",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Bold } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleDemo() { return ( ) } `,__src__:"registry/new-york/examples/toggle-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Bold } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleDemo"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Bold } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleDemo() { return ( ) } `,__src__:"registry/default/examples/toggle-demo.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Bold } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleDemo"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle bold"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"\u8FB9\u6846",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u8FB9\u6846",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u8FB9\u6846"]}),` `,(0,l.jsxs)(r,{name:"toggle-outline",description:"\u4E00\u4E2A\u4F7F\u7528\u8F6E\u5ED3\u53D8\u4F53\u7684\u5207\u6362\u7EC4\u4EF6.",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Italic } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleOutline() { return ( ) } `,__src__:"registry/new-york/examples/toggle-outline.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleOutline"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Italic } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleOutline() { return ( ) } `,__src__:"registry/default/examples/toggle-outline.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleOutline"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"outline"'}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"\u5E26\u6587\u672C",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5E26\u6587\u672C",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u5E26\u6587\u672C"]}),` `,(0,l.jsxs)(r,{name:"toggle-with-text",description:"\u4E00\u4E2A\u5E26\u6587\u672C\u7684\u5207\u6362\u7EC4\u4EF6.",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Italic } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleWithText() { return ( Italic ) } `,__src__:"registry/new-york/examples/toggle-with-text.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleWithText"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" Italic"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Italic } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleWithText() { return ( Italic ) } `,__src__:"registry/default/examples/toggle-with-text.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleWithText"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" Italic"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"\u5C0F\u578B",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5C0F\u578B",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u5C0F\u578B"]}),` `,(0,l.jsxs)(r,{name:"toggle-sm",description:"\u4E00\u4E2A\u5C0F\u578B\u5207\u6362\u7EC4\u4EF6\u3002",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Italic } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleSm() { return ( ) } `,__src__:"registry/new-york/examples/toggle-sm.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleSm"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Italic } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleSm() { return ( ) } `,__src__:"registry/default/examples/toggle-sm.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleSm"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"\u5927\u578B",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u5927\u578B",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u5927\u578B"]}),` `,(0,l.jsxs)(r,{name:"toggle-lg",description:"\u4E00\u4E2A\u5927\u578B\u5207\u6362\u7EC4\u4EF6\u3002",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Italic } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleLg() { return ( ) } `,__src__:"registry/new-york/examples/toggle-lg.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleLg"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"lg"'}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Italic } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleLg() { return ( ) } `,__src__:"registry/default/examples/toggle-lg.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleLg"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"lg"'}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"\u7981\u7528",children:[(0,l.jsx)(e.a,{className:"subheading-anchor","aria-label":"Link to section",href:"#\u7981\u7528",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"\u7981\u7528"]}),` `,(0,l.jsxs)(r,{name:"toggle-disabled",description:"\u4E00\u4E2A\u7981\u7528\u7684\u5207\u6362\u7EC4\u4EF6.",children:[(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Underline } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleDisabled() { return ( ) } `,__src__:"registry/new-york/examples/toggle-disabled.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Underline } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleDisabled"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" disabled"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Underline"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"tsx","data-theme":"default",__rawString__:`import { Underline } from "lucide-react" import { Toggle } from "@/components/ui/toggle" export function ToggleDisabled() { return ( ) } `,__src__:"registry/default/examples/toggle-disabled.tsx",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"default",children:[(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Underline } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "lucide-react"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:' "@/components/ui/toggle"'})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#D2A8FF"},children:" ToggleDisabled"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" aria-label"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"Toggle underline"'}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" disabled"}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#7EE787"},children:"Underline"}),(0,l.jsx)(e.span,{style:{color:"#79C0FF"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#FF7B72"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#A5D6FF"},children:'"h-4 w-4"'}),(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E6EDF3"},children:"}"})})]})})})]})]})}function E(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,{...n,children:(0,l.jsx)(m,{...n})}):m(n)}function c(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return v(A);})(); ;return Component;

切换

安装

用法

示例

默认

边框

带文本

小型

大型

禁用