var Component=(()=>{var h=Object.create;var t=Object.defineProperty;var F=Object.getOwnPropertyDescriptor;var y=Object.getOwnPropertyNames;var E=Object.getPrototypeOf,g=Object.prototype.hasOwnProperty;var u=(n,e)=>()=>(e||n((e={exports:{}}).exports,e),e.exports),f=(n,e)=>{for(var r in e)t(n,r,{get:e[r],enumerable:!0})},a=(n,e,r,o)=>{if(e&&typeof e=="object"||typeof e=="function")for(let c of y(e))!g.call(n,c)&&c!==r&&t(n,c,{get:()=>e[c],enumerable:!(o=F(e,c))||o.enumerable});return n};var m=(n,e,r)=>(r=n!=null?h(E(n)):{},a(e||!n||!n.__esModule?t(r,"default",{value:n,enumerable:!0}):r,n)),C=n=>a(t({},"__esModule",{value:!0}),n);var d=u((v,i)=>{i.exports=_jsx_runtime});var G={};f(G,{default:()=>T,frontmatter:()=>D});var l=m(d()),D={title:"Toggle Group",description:"Group of toggling buttons...\u{1F919}",lastUpdated:"08 Apr, 2025"};function p(n){let e=Object.assign({figure:"figure",pre:"pre",code:"code",span:"span",h4:"h4",h2:"h2",h3:"h3"},n.components),{ComponentShowcase:r,ComponentInstall:o,ComponentSource:c}=e;return o||s("ComponentInstall",!0),o.Cli||s("ComponentInstall.Cli",!0),o.Manual||s("ComponentInstall.Manual",!0),r||s("ComponentShowcase",!0),c||s("ComponentSource",!0),(0,l.jsxs)(l.Fragment,{children:[(0,l.jsx)(r,{name:"toggle-group-style-default",children:(0,l.jsx)(e.figure,{__src__:"preview/components/toggle-group-style-default.tsx",__rawString__:`"use client"; import { ToggleGroup, ToggleGroupItem } from "@/components/retroui"; import { Bold, Italic, Underline } from "lucide-react"; export default function ToggleGroupStyleDefault() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { ToggleGroup, ToggleGroupItem } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Bold, Italic, Underline } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" ToggleGroupStyleDefault"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroup"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"multiple"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"bold"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"italic"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"underline"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Underline"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsxs)(o,{children:[(0,l.jsx)(o.Cli,{children:(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,l.jsx)(e.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"npx"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:" shadcn@latest"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:" add"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"https://retroui.dev/r/toggle-group.json"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'})]})})})})}),(0,l.jsxs)(o.Manual,{children:[(0,l.jsx)(e.h4,{id:"1-install-dependencies",children:"1. Install dependencies:"}),(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"sh","data-theme":"dracula-soft",children:(0,l.jsx)(e.code,{"data-language":"sh","data-theme":"dracula-soft",style:{display:"grid"},children:(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"npm"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:" install"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-toggle-group"}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:" @radix-ui/react-toggle"})]})})})}),(0,l.jsx)("br",{}),(0,l.jsxs)(e.h4,{id:"2-copy-the-code--into-your-project-toggletsx",children:["2. Copy the code \u{1F447} into your project ",(0,l.jsx)(e.code,{children:"toggle.tsx"}),":"]}),(0,l.jsx)(c,{name:"toggle",children:(0,l.jsx)(e.figure,{__src__:"/retroui/components/retroui/Toggle.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" TogglePrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-toggle"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { cva, "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" VariantProps } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"class-variance-authority"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" toggleVariants "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" cva"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"inline-flex items-center justify-center 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 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 gap-2"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" variants"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"bg-transparent hover:bg-muted/70 hover:text-muted-foreground data-[state=on]:bg-muted"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" outlined"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"border-2 border-input bg-transparent hover:bg-accent hover:text-accent-foreground/80 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" solid"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"border-2 border-input bg-transparent hover:bg-black hover:text-white/90 hover:border-black data-[state=on]:bg-black data-[state=on]:text-white data-[state=on]:border-black"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"outline-muted"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"border-2 border-input bg-transparent hover:hover:bg-muted/70 hover:hover:text-muted-foreground data-[state=on]:bg-muted"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-10 px-3 min-w-10"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" sm"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-9 px-2.5 min-w-9"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" lg"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-11 px-5 min-w-11"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" defaultVariants"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" },"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:");"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" Toggle "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"TogglePrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"({ variant, size, className }))}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"));"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"Toggle.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" TogglePrimitive.Root.displayName;"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Toggle, toggleVariants };"})]})]})})})}),(0,l.jsx)("br",{}),(0,l.jsxs)(e.h4,{id:"3-copy-the-code--into-your-project-toggle-grouptsx",children:["3. Copy the code \u{1F447} into your project ",(0,l.jsx)(e.code,{children:"toggle-group.tsx"}),":"]}),(0,l.jsx)(c,{name:"toggle-group",children:(0,l.jsx)(e.figure,{__src__:"/retroui/components/retroui/ToggleGroup.tsx","data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#BF9EEE"},children:" *"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" as"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ToggleGroupPrimitive "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@radix-ui/react-toggle-group"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"type"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" VariantProps } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"class-variance-authority"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { cn } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/lib/utils"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { toggleVariants } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"./Toggle"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ToggleGroupContext "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.createContext"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ToggleGroup "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"children"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupPrimitive.Root"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"("}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"flex items-center justify-center gap-1"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", className)}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupContext.Provider"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{{ variant, size }}>"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"));"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"ToggleGroup.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ToggleGroupPrimitive.Root.displayName;"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ToggleGroupItem "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.forwardRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"<"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.ElementRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:","})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React.ComponentPropsWithoutRef"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" &"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" VariantProps"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:""})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:">"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(({ "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"className"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"children"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"variant"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"size"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:", "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"props"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" }, "}),(0,l.jsx)(e.span,{style:{color:"#FFB86C",fontStyle:"italic"},children:"ref"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:") "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"=>"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" const"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" context "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" React."}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"useContext"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"(ToggleGroupContext);"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupPrimitive.Item"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" ref"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{ref}"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"{"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:"cn"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" toggleVariants"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"({"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" context.variant "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"||"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" variant,"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" size"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:":"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" context.size "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"||"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" size,"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" }),"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" className,"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" )}"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"..."}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"props}"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" >"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {children}"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"});"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"ToggleGroupItem.displayName "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ToggleGroupPrimitive.Item.displayName;"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { ToggleGroup, ToggleGroupItem };"})]})]})})})})]})]}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(e.h2,{id:"usage",children:"Usage"}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" {"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ToggleGroup,"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ToggleGroupItem,"})}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"} "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui/toggle-group"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]})]})})}),` `,(0,l.jsx)(e.figure,{"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"<"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroup"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"single"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"a"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">A"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"b"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">B"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"c"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">C"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:""})]})]})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(e.h2,{id:"examples",children:"Examples"}),` `,(0,l.jsx)(e.h3,{id:"default",children:"Default"}),` `,(0,l.jsx)(r,{name:"toggle-group-style-default",children:(0,l.jsx)(e.figure,{__src__:"preview/components/toggle-group-style-default.tsx",__rawString__:`"use client"; import { ToggleGroup, ToggleGroupItem } from "@/components/retroui"; import { Bold, Italic, Underline } from "lucide-react"; export default function ToggleGroupStyleDefault() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { ToggleGroup, ToggleGroupItem } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Bold, Italic, Underline } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" ToggleGroupStyleDefault"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroup"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"multiple"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"default"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"bold"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"italic"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"underline"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Underline"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(e.h3,{id:"outlined",children:"Outlined"}),` `,(0,l.jsx)(r,{name:"toggle-group-style-outlined",children:(0,l.jsx)(e.figure,{__src__:"preview/components/toggle-group-style-outlined.tsx",__rawString__:`"use client"; import { ToggleGroup, ToggleGroupItem } from "@/components/retroui"; import { Bold, Italic, Underline } from "lucide-react"; export default function ToggleGroupStyleOutlined() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { ToggleGroup, ToggleGroupItem } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Bold, Italic, Underline } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" ToggleGroupStyleOutlined"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroup"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"multiple"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"outlined"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"bold"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"italic"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"underline"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Underline"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(e.h3,{id:"solid",children:"Solid"}),` `,(0,l.jsx)(r,{name:"toggle-group-style-solid",children:(0,l.jsx)(e.figure,{__src__:"preview/components/toggle-group-style-solid.tsx",__rawString__:`"use client"; import { ToggleGroup, ToggleGroupItem } from "@/components/retroui"; import { Bold, Italic, Underline } from "lucide-react"; export default function ToggleGroupStyleSolid() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { ToggleGroup, ToggleGroupItem } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Bold, Italic, Underline } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" ToggleGroupStyleSolid"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroup"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"multiple"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"solid"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"bold"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"italic"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"underline"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Underline"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)("br",{}),` `,(0,l.jsx)(e.h3,{id:"outline-muted",children:"Outline Muted"}),` `,(0,l.jsx)(r,{name:"toggle-group-style-outline-muted",children:(0,l.jsx)(e.figure,{__src__:"preview/components/toggle-group-style-outline-muted.tsx",__rawString__:`"use client"; import { ToggleGroup, ToggleGroupItem } from "@/components/retroui"; import { Bold, Italic, Underline } from "lucide-react"; export default function ToggleGroupStyleOutlineMuted() { return ( ); } `,"data-rehype-pretty-code-figure":"",children:(0,l.jsx)(e.pre,{style:{backgroundColor:"#282A36",color:"#f6f6f4"},tabIndex:"0","data-language":"tsx","data-theme":"dracula-soft",children:(0,l.jsxs)(e.code,{"data-language":"tsx","data-theme":"dracula-soft",style:{display:"grid"},children:[(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"use client"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { ToggleGroup, ToggleGroupItem } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"@/components/retroui"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"import"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" { Bold, Italic, Underline } "}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"from"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:' "'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"lucide-react"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:";"})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"export"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" default"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" function"}),(0,l.jsx)(e.span,{style:{color:"#62E884"},children:" ToggleGroupStyleOutlineMuted"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"() {"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:" return"}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" ("})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroup"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" type"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"multiple"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" variant"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"outline-muted"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"bold"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Bold"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"italic"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Italic"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:" "}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"ToggleGroupItem"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" value"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"underline"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:">"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" <"}),(0,l.jsx)(e.span,{style:{color:"#97E1F1",fontStyle:"italic"},children:"Underline"}),(0,l.jsx)(e.span,{style:{color:"#62E884",fontStyle:"italic"},children:" className"}),(0,l.jsx)(e.span,{style:{color:"#F286C4"},children:"="}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#E7EE98"},children:"h-4 w-4"}),(0,l.jsx)(e.span,{style:{color:"#DEE492"},children:'"'}),(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" />"})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsxs)(e.span,{"data-line":"",children:[(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" "})]}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:" );"})}),` `,(0,l.jsx)(e.span,{"data-line":"",children:(0,l.jsx)(e.span,{style:{color:"#F6F6F4"},children:"}"})})]})})})})]})}function S(n={}){let{wrapper:e}=n.components||{};return e?(0,l.jsx)(e,Object.assign({},n,{children:(0,l.jsx)(p,n)})):p(n)}var T=S;function s(n,e){throw new Error("Expected "+(e?"component":"object")+" `"+n+"` to be defined: you likely forgot to import, pass, or provide it.")}return C(G);})(); ;return Component;