[{"_1":2,"_306":-5,"_307":-5},"loaderData",{"_3":4,"_216":217,"_282":283},"root",{"_5":6},"items",[7,26,182,210],{"_8":9,"_10":9,"_5":11},"value","Prologue","label",[12,17,20,23],{"_8":13,"_10":14,"_15":16},"/docs/introduction","Introduction","meta","Documentation",{"_8":18,"_10":19,"_15":16},"/docs/installation","Installation",{"_8":21,"_10":22,"_15":16},"/docs/design-approach","Design Approach",{"_8":24,"_10":25,"_15":16},"/docs/customization","Customization",{"_8":27,"_10":27,"_5":28},"Components",[29,32,35,38,41,44,47,50,53,56,59,62,65,68,71,74,77,80,83,86,89,92,95,98,101,104,107,110,113,116,119,122,125,128,131,134,137,140,143,146,149,152,155,158,161,164,167,170,173,176,179],{"_8":30,"_10":31,"_15":16},"/docs/accordion","Accordion",{"_8":33,"_10":34,"_15":16},"/docs/alert","Alert",{"_8":36,"_10":37,"_15":16},"/docs/alert-dialog","Alert dialog",{"_8":39,"_10":40,"_15":16},"/docs/autocomplete","Autocomplete",{"_8":42,"_10":43,"_15":16},"/docs/avatar","Avatar",{"_8":45,"_10":46,"_15":16},"/docs/badge","Badge",{"_8":48,"_10":49,"_15":16},"/docs/button","Button",{"_8":51,"_10":52,"_15":16},"/docs/card","Card",{"_8":54,"_10":55,"_15":16},"/docs/checkbox","Checkbox",{"_8":57,"_10":58,"_15":16},"/docs/chip","Chip",{"_8":60,"_10":61,"_15":16},"/docs/collapsible","Collapsible",{"_8":63,"_10":64,"_15":16},"/docs/combobox","Combobox",{"_8":66,"_10":67,"_15":16},"/docs/command","Command",{"_8":69,"_10":70,"_15":16},"/docs/dialog","Dialog",{"_8":72,"_10":73,"_15":16},"/docs/divider","Divider",{"_8":75,"_10":76,"_15":16},"/docs/field","Field",{"_8":78,"_10":79,"_15":16},"/docs/fieldset","Fieldset",{"_8":81,"_10":82,"_15":16},"/docs/form","Form",{"_8":84,"_10":85,"_15":16},"/docs/heading","Heading",{"_8":87,"_10":88,"_15":16},"/docs/icon-box","Icon box",{"_8":90,"_10":91,"_15":16},"/docs/input","Input",{"_8":93,"_10":94,"_15":16},"/docs/input-group","Input group",{"_8":96,"_10":97,"_15":16},"/docs/item","Item",{"_8":99,"_10":100,"_15":16},"/docs/kbd","Kbd",{"_8":102,"_10":103,"_15":16},"/docs/label","Label",{"_8":105,"_10":106,"_15":16},"/docs/menu","Menu",{"_8":108,"_10":109,"_15":16},"/docs/menubar","Menubar",{"_8":111,"_10":112,"_15":16},"/docs/meter","Meter",{"_8":114,"_10":115,"_15":16},"/docs/number-field","Number field",{"_8":117,"_10":118,"_15":16},"/docs/pagination","Pagination",{"_8":120,"_10":121,"_15":16},"/docs/popover","Popover",{"_8":123,"_10":124,"_15":16},"/docs/preview-card","Preview card",{"_8":126,"_10":127,"_15":16},"/docs/progress","Progress",{"_8":129,"_10":130,"_15":16},"/docs/radio","Radio",{"_8":132,"_10":133,"_15":16},"/docs/scroll-area","Scroll area",{"_8":135,"_10":136,"_15":16},"/docs/select","Select",{"_8":138,"_10":139,"_15":16},"/docs/separator","Separator",{"_8":141,"_10":142,"_15":16},"/docs/sidebar","Sidebar",{"_8":144,"_10":145,"_15":16},"/docs/slider","Slider",{"_8":147,"_10":148,"_15":16},"/docs/spinner","Spinner",{"_8":150,"_10":151,"_15":16},"/docs/stack","Stack",{"_8":153,"_10":154,"_15":16},"/docs/switch","Switch",{"_8":156,"_10":157,"_15":16},"/docs/table","Table",{"_8":159,"_10":160,"_15":16},"/docs/tabs","Tabs",{"_8":162,"_10":163,"_15":16},"/docs/text","Text",{"_8":165,"_10":166,"_15":16},"/docs/textarea","Textarea",{"_8":168,"_10":169,"_15":16},"/docs/toast","Toast",{"_8":171,"_10":172,"_15":16},"/docs/toggle","Toggle",{"_8":174,"_10":175,"_15":16},"/docs/toggle-group","Toggle group",{"_8":177,"_10":178,"_15":16},"/docs/toolbar","Toolbar",{"_8":180,"_10":181,"_15":16},"/docs/tooltip","Tooltip",{"_8":183,"_10":183,"_5":184},"Blocks",[185,189,192,195,198,201,204,207],{"_8":186,"_10":187,"_15":188},"/blocks#sidebarMail","Sidebar Mail","Block",{"_8":190,"_10":191,"_15":188},"/blocks#sidebarStorage","Sidebar Storage",{"_8":193,"_10":194,"_15":188},"/blocks#sidebarGit","Sidebar Git",{"_8":196,"_10":197,"_15":188},"/blocks#sidebarChat","Sidebar Chat",{"_8":199,"_10":200,"_15":188},"/blocks#sidebarCode","Sidebar Code",{"_8":202,"_10":203,"_15":188},"/blocks#profile","Profile",{"_8":205,"_10":206,"_15":188},"/blocks#login","Login",{"_8":208,"_10":209,"_15":188},"/blocks#dashboard","Dashboard",{"_8":211,"_10":211,"_5":212},"Pages",[213],{"_8":214,"_10":183,"_15":215},"/blocks","Page","routes/docs",{"_218":219},"sidebarMenu",[220,229],{"_221":9,"_5":222},"title",[223,226,227,228],{"_224":14,"_225":13},"name","path",{"_224":19,"_225":18},{"_224":22,"_225":21},{"_224":25,"_225":24},{"_221":27,"_5":230},[231,232,233,234,235,236,237,238,239,240,241,242,243,244,245,246,247,248,249,250,251,252,253,254,255,256,257,258,259,260,261,262,263,264,265,266,267,268,269,270,271,272,273,274,275,276,277,278,279,280,281],{"_224":31,"_225":30},{"_224":34,"_225":33},{"_224":37,"_225":36},{"_224":40,"_225":39},{"_224":43,"_225":42},{"_224":46,"_225":45},{"_224":49,"_225":48},{"_224":52,"_225":51},{"_224":55,"_225":54},{"_224":58,"_225":57},{"_224":61,"_225":60},{"_224":64,"_225":63},{"_224":67,"_225":66},{"_224":70,"_225":69},{"_224":73,"_225":72},{"_224":76,"_225":75},{"_224":79,"_225":78},{"_224":82,"_225":81},{"_224":85,"_225":84},{"_224":88,"_225":87},{"_224":91,"_225":90},{"_224":94,"_225":93},{"_224":97,"_225":96},{"_224":100,"_225":99},{"_224":103,"_225":102},{"_224":106,"_225":105},{"_224":109,"_225":108},{"_224":112,"_225":111},{"_224":115,"_225":114},{"_224":118,"_225":117},{"_224":121,"_225":120},{"_224":124,"_225":123},{"_224":127,"_225":126},{"_224":130,"_225":129},{"_224":133,"_225":132},{"_224":136,"_225":135},{"_224":139,"_225":138},{"_224":142,"_225":141},{"_224":145,"_225":144},{"_224":148,"_225":147},{"_224":151,"_225":150},{"_224":154,"_225":153},{"_224":157,"_225":156},{"_224":160,"_225":159},{"_224":163,"_225":162},{"_224":166,"_225":165},{"_224":169,"_225":168},{"_224":172,"_225":171},{"_224":175,"_225":174},{"_224":178,"_225":177},{"_224":181,"_225":180},"routes/docs.view",{"_221":154,"_284":285,"_292":293,"_294":295,"_298":299,"_224":154,"_304":305},"mdxCode",{"_286":287,"_288":289,"_290":291},"compiledSource","\"use strict\";\nconst {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];\nconst {useMDXComponents: _provideComponents} = arguments[0];\nfunction _createMdxContent(props) {\n const _components = {\n a: \"a\",\n code: \"code\",\n h1: \"h1\",\n h2: \"h2\",\n h3: \"h3\",\n li: \"li\",\n nav: \"nav\",\n ol: \"ol\",\n p: \"p\",\n pre: \"pre\",\n span: \"span\",\n ..._provideComponents(),\n ...props.components\n }, {DocsButtons, Installation, Preview} = _components;\n if (!DocsButtons) _missingMdxReference(\"DocsButtons\", true);\n if (!Installation) _missingMdxReference(\"Installation\", true);\n if (!Preview) _missingMdxReference(\"Preview\", true);\n return _jsxs(_Fragment, {\n children: [_jsx(_components.h1, {\n id: \"switch\",\n children: _jsx(_components.a, {\n className: \"anchor\",\n href: \"#switch\",\n children: \"Switch\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Toggle control for binary on/off states and settings.\"\n }), \"\\n\", _jsx(DocsButtons, {\n externalDoc: \"https://base-ui.com/react/components/switch\"\n }), \"\\n\", _jsx(Preview, {\n name: \"basic\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"installation\",\n children: _jsx(_components.a, {\n className: \"anchor\",\n href: \"#installation\",\n children: \"Installation\"\n })\n }), \"\\n\", _jsx(Installation, {\n name: \"switch\"\n }), \"\\n\", _jsx(_components.h2, {\n id: \"usage\",\n children: _jsx(_components.a, {\n className: \"anchor\",\n href: \"#usage\",\n children: \"Usage\"\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"import\",\n children: _jsx(_components.a, {\n className: \"anchor\",\n href: \"#import\",\n children: \"Import\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"Import the component and its related parts.\"\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki shiki-themes github-light github-dark\",\n style: {\n backgroundColor: \"#fff\",\n \"--shiki-dark-bg\": \"#24292e\",\n color: \"#24292e\",\n \"--shiki-dark\": \"#e1e4e8\"\n },\n tabIndex: \"0\",\n filename: \"Switch Parts\",\n children: _jsx(_components.code, {\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"import\"\n }), _jsx(_components.span, {\n style: {\n color: \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" { Switch } \"\n }), _jsx(_components.span, {\n style: {\n color: \"#D73A49\",\n \"--shiki-dark\": \"#F97583\"\n },\n children: \"from\"\n }), _jsx(_components.span, {\n style: {\n color: \"#032F62\",\n \"--shiki-dark\": \"#9ECBFF\"\n },\n children: \" \\\"components/selia/switch\\\"\"\n }), _jsx(_components.span, {\n style: {\n color: \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \";\"\n })]\n })\n })\n })\n }), \"\\n\", _jsx(_components.h3, {\n id: \"structure\",\n children: _jsx(_components.a, {\n className: \"anchor\",\n href: \"#structure\",\n children: \"Structure\"\n })\n }), \"\\n\", _jsx(_components.p, {\n children: \"The expected structure and composition of the component.\"\n }), \"\\n\", _jsx(_Fragment, {\n children: _jsx(_components.pre, {\n className: \"shiki shiki-themes github-light github-dark\",\n style: {\n backgroundColor: \"#fff\",\n \"--shiki-dark-bg\": \"#24292e\",\n color: \"#24292e\",\n \"--shiki-dark\": \"#e1e4e8\"\n },\n tabIndex: \"0\",\n filename: \"Anatomy\",\n children: _jsx(_components.code, {\n children: _jsxs(_components.span, {\n className: \"line\",\n children: [_jsx(_components.span, {\n style: {\n color: \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \"<\"\n }), _jsx(_components.span, {\n style: {\n color: \"#005CC5\",\n \"--shiki-dark\": \"#79B8FF\"\n },\n children: \"Switch\"\n }), _jsx(_components.span, {\n style: {\n color: \"#24292E\",\n \"--shiki-dark\": \"#E1E4E8\"\n },\n children: \" />\"\n })]\n })\n })\n })\n }), _jsx(_components.nav, {\n className: \"hidden\",\n children: _jsx(_components.ol, {\n className: \"toc-level toc-level-1\",\n children: _jsxs(_components.li, {\n className: \"toc-item toc-item-h1\",\n children: [_jsx(_components.a, {\n className: \"toc-link toc-link-h1\",\n href: \"#switch\",\n children: \"Switch\"\n }), _jsxs(_components.ol, {\n className: \"toc-level toc-level-2\",\n children: [_jsx(_components.li, {\n className: \"toc-item toc-item-h2\",\n children: _jsx(_components.a, {\n className: \"toc-link toc-link-h2\",\n href: \"#installation\",\n children: \"Installation\"\n })\n }), _jsxs(_components.li, {\n className: \"toc-item toc-item-h2\",\n children: [_jsx(_components.a, {\n className: \"toc-link toc-link-h2\",\n href: \"#usage\",\n children: \"Usage\"\n }), _jsxs(_components.ol, {\n className: \"toc-level toc-level-3\",\n children: [_jsx(_components.li, {\n className: \"toc-item toc-item-h3\",\n children: _jsx(_components.a, {\n className: \"toc-link toc-link-h3\",\n href: \"#import\",\n children: \"Import\"\n })\n }), _jsx(_components.li, {\n className: \"toc-item toc-item-h3\",\n children: _jsx(_components.a, {\n className: \"toc-link toc-link-h3\",\n href: \"#structure\",\n children: \"Structure\"\n })\n })]\n })]\n })]\n })]\n })\n })\n })]\n });\n}\nfunction MDXContent(props = {}) {\n const {wrapper: MDXLayout} = {\n ..._provideComponents(),\n ...props.components\n };\n return MDXLayout ? _jsx(MDXLayout, {\n ...props,\n children: _jsx(_createMdxContent, {\n ...props\n })\n }) : _createMdxContent(props);\n}\nreturn {\n default: MDXContent\n};\nfunction _missingMdxReference(id, component) {\n throw new Error(\"Expected \" + (component ? \"component\" : \"object\") + \" `\" + id + \"` to be defined: you likely forgot to import, pass, or provide it.\");\n}\n","frontmatter",{},"scope",{},"pageRaw","\n# Switch\n\nToggle control for binary on/off states and settings.\n\n\n\n\n\n## Installation\n\n\n## Usage\n\n### Import\n\nImport the component and its related parts.\n\n```ts filename=\"Switch Parts\"\nimport { Switch } from \"components/selia/switch\";\n```\n\n### Structure\n\nThe expected structure and composition of the component.\n\n```tsx filename=\"Anatomy\"\n\n```","sources",{"_296":297},"basic","import { Label } from 'components/selia/label';\nimport { Switch } from 'components/selia/switch';\n\nexport default function SwitchBasicExample() {\n return (\n \n \n Turn on notifications\n \n );\n}\n","menuNextPrev",{"_300":301,"_302":303},"next",{"_224":157,"_225":156},"prev",{"_224":151,"_225":150},"componentSource","'use client';\n\nimport { Switch as BaseSwitch } from '@base-ui/react/switch';\nimport { cn } from '#utils';\n\nexport function Switch({\n className,\n ...props\n}: React.ComponentProps) {\n return (\n \n \n \n );\n}\n","actionData","errors"]