var Component=(()=>{var F=Object.create;var i=Object.defineProperty;var u=Object.getOwnPropertyDescriptor;var f=Object.getOwnPropertyNames;var N=Object.getPrototypeOf,B=Object.prototype.hasOwnProperty;var T=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),x=(n,e)=>{for(var s in e)i(n,s,{get:e[s],enumerable:!0})},h=(n,e,s,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let r of f(e))!B.call(n,r)&&r!==s&&i(n,r,{get:()=>e[r],enumerable:!(o=u(e,r))||o.enumerable});return n};var _=(n,e,s)=>(s=n!=null?F(N(n)):{},h(e||!n||!n.__esModule?i(s,"default",{value:n,enumerable:!0}):s,n)),b=n=>h(i({},"__esModule",{value:!0}),n);var g=T((R,y)=>{y.exports=_jsx_runtime});var w={};x(w,{default:()=>I,frontmatter:()=>v});var l=_(g()),v={title:"Toggle",description:"A two-state button that can be either on or off.",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=Object.assign({div:"div",pre:"pre",code:"code",span:"span",h2:"h2",a:"a",h3:"h3"},n.components),{ComponentPreview:s,Tabs:o,TabsList:r,TabsTrigger:t,TabsContent:d,Steps:p,Step:a,ComponentSource:E}=e;return s||c("ComponentPreview",!0),E||c("ComponentSource",!0),a||c("Step",!0),p||c("Steps",!0),o||c("Tabs",!0),d||c("TabsContent",!0),r||c("TabsList",!0),t||c("TabsTrigger",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsxs)(s,{name:"toggle-demo",description:"A toggle component.",styleSwitch:!0,button:"copy",dots:!1,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/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Bold } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle bold"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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 { FontBoldIcon } from '@radix-ui/react-icons' import { Toggle } from '~/components/ui/toggle' export function ToggleDemo() { return ( ) } `,__src__:"registry/miami/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { FontBoldIcon } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@radix-ui/react-icons'"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FontBoldIcon"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h2,{id:"installation",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#installation",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Installation"]}),` `,(0,l.jsxs)(o,{defaultValue:"cli",children:[(0,l.jsxs)(r,{children:[(0,l.jsx)(t,{value:"cli",children:"CLI"}),(0,l.jsx)(t,{value:"manual",children:"Manual"})]}),(0,l.jsx)(d,{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 nyxbui@latest add toggle `,__npmCommand__:`npx nyxbui@latest add toggle `,__yarnCommand__:`npx nyxbui@latest add toggle `,__pnpmCommand__:`pnpm dlx nyxbui@latest add toggle `,__bunCommand__:`bun x --bun nyxbui@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:"#B392F0"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"nyxbui@latest"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"add"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"toggle"})]})})})})}),(0,l.jsx)(d,{value:"manual",children:(0,l.jsxs)(p,{children:[(0,l.jsx)(a,{children:"Install the following dependencies:"}),(0,l.jsx)(e.div,{"data-rehype-pretty-code-fragment":"",children:(0,l.jsx)(e.pre,{"data-language":"bash","data-theme":"default",__rawString__:` @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:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"@radix-ui/react-toggle"})]})})})}),(0,l.jsx)(a,{children:"Copy and paste the following code into your project."}),(0,l.jsxs)(E,{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 { type VariantProps, cva } from 'class-variance-authority' import { ny } 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', { variants: { variant: { default: 'bg-transparent', outline: 'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground', }, size: { default: 'h-10 px-3', sm: 'h-9 px-2.5', lg: 'h-11 px-5', }, }, 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:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" TogglePrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@radix-ui/react-toggle'"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" VariantProps, cva } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cva"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" variants: {"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" variant: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" default: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'bg-transparent'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" outline:"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'border border-input bg-transparent hover:bg-accent hover:text-accent-foreground'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" size: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" default: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'h-10 px-3'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" sm: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'h-9 px-2.5'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" lg: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'h-11 px-5'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" defaultVariants: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" variant: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'default'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" size: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'default'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"TogglePrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ny"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ variant, size, className }))}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"))"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Toggle.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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 { type VariantProps, cva } from 'class-variance-authority' import { ny } from '~/lib/utils' const toggleVariants = cva( 'inline-flex items-center justify-center 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', { 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-3', sm: 'h-8 px-2', lg: 'h-10 px-3', }, }, 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/miami/ui/toggle.tsx",__style__:"miami",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:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'react'"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"*"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"as"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" TogglePrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@radix-ui/react-toggle'"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" VariantProps, cva } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { ny } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"cva"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'inline-flex items-center justify-center 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'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" variants: {"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" variant: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" default: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'bg-transparent'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" outline:"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" size: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" default: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'h-9 px-3'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" sm: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'h-8 px-2'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" lg: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'h-10 px-3'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" defaultVariants: {"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" variant: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'default'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" size: "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'default'"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" },"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:")"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:","})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"&"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:""})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFAB70"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"TogglePrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{ref}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ny"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"({ variant, size, className }))}"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"))"})}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"Toggle.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle, toggleVariants }"})]})]})})})]}),(0,l.jsx)(a,{children:"Update the import paths to match your project setup."})]})})]}),` `,(0,l.jsxs)(e.h2,{id:"usage",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#usage",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Usage"]}),` `,(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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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__:`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:"#E1E4E8"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">Toggle"})]})})})}),` `,(0,l.jsxs)(e.h2,{id:"examples",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#examples",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Examples"]}),` `,(0,l.jsxs)(e.h3,{id:"default",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#default",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Default"]}),` `,(0,l.jsxs)(s,{name:"toggle-demo",description:"A toggle component.",styleSwitch:!0,button:"copy",dots:!1,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/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Bold } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle bold"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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 { FontBoldIcon } from '@radix-ui/react-icons' import { Toggle } from '~/components/ui/toggle' export function ToggleDemo() { return ( ) } `,__src__:"registry/miami/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { FontBoldIcon } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@radix-ui/react-icons'"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleDemo"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FontBoldIcon"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"outline",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#outline",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Outline"]}),` `,(0,l.jsxs)(s,{name:"toggle-outline",description:"A toggle component using the outline variant.",styleSwitch:!0,button:"copy",dots:!1,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/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleOutline"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"outline"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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 { FontItalicIcon } from '@radix-ui/react-icons' import { Toggle } from '~/components/ui/toggle' export function ToggleOutline() { return ( ) } `,__src__:"registry/miami/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { FontItalicIcon } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@radix-ui/react-icons'"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleOutline"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"outline"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FontItalicIcon"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"with-text",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#with-text",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"With Text"]}),` `,(0,l.jsxs)(s,{name:"toggle-with-text",description:"A toggle component with text.",styleSwitch:!0,button:"copy",dots:!1,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/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleWithText"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"mr-2 size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Italic"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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 { FontItalicIcon } from '@radix-ui/react-icons' import { Toggle } from '~/components/ui/toggle' export function ToggleWithText() { return ( Italic ) } `,__src__:"registry/miami/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { FontItalicIcon } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@radix-ui/react-icons'"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleWithText"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FontItalicIcon"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"mr-2 size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" Italic"})}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"small",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#small",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Small"]}),` `,(0,l.jsxs)(s,{name:"toggle-sm",description:"A small toggle component.",styleSwitch:!0,button:"copy",dots:!1,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/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleSm"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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 { FontItalicIcon } from '@radix-ui/react-icons' import { Toggle } from '~/components/ui/toggle' export function ToggleSm() { return ( ) } `,__src__:"registry/miami/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { FontItalicIcon } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@radix-ui/react-icons'"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleSm"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"sm"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FontItalicIcon"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"large",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#large",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Large"]}),` `,(0,l.jsxs)(s,{name:"toggle-lg",description:"A large toggle component.",styleSwitch:!0,button:"copy",dots:!1,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/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Italic } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleLg"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"lg"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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 { FontItalicIcon } from '@radix-ui/react-icons' import { Toggle } from '~/components/ui/toggle' export function ToggleLg() { return ( ) } `,__src__:"registry/miami/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { FontItalicIcon } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@radix-ui/react-icons'"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleLg"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"lg"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"FontItalicIcon"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]}),` `,(0,l.jsxs)(e.h3,{id:"disabled",children:[(0,l.jsx)(e.a,{className:"anchor","aria-label":"Link to section",href:"#disabled",children:(0,l.jsx)(e.span,{className:"icon icon-link"})}),"Disabled"]}),` `,(0,l.jsxs)(s,{name:"toggle-disabled",description:"A disabled toggle component.",styleSwitch:!0,button:"copy",dots:!1,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/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Underline } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleDisabled"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle underline"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"disabled"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Underline"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},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 { UnderlineIcon } from '@radix-ui/react-icons' import { Toggle } from '~/components/ui/toggle' export function ToggleDisabled() { return ( ) } `,__src__:"registry/miami/example/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:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { UnderlineIcon } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:"'@radix-ui/react-icons'"})]}),` `,(0,l.jsx)(e.span,{className:"line",children:" "}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" { Toggle } "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},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:"#F97583"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"function"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"ToggleDisabled"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"return"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"Toggle"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"aria-label"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"Toggle italic"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"disabled"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:">"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#79B8FF"},children:"UnderlineIcon"}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "}),(0,l.jsx)(e.span,{style:{color:"#B392F0"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F97583"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#9ECBFF"},children:'"size-4"'}),(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{className:"line",children:[(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" "})]}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:" )"})}),` `,(0,l.jsx)(e.span,{className:"line",children:(0,l.jsx)(e.span,{style:{color:"#E1E4E8"},children:"}"})})]})})})]})]})}function C(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(m,n)})):m(n)}var I=C;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 b(w);})(); ;return Component;