import{a as e,n as t}from"./chunk-BneVvdWh.js";import{t as n}from"./react-C7IZe2D1.js";import{t as r}from"./jsx-runtime-C2wGStra.js";import{a as i,i as a,n as o,r as s,t as c}from"./SwitchThumb-BYdJwzo1.js";var l,u,d,f,p,m=t((()=>{l=`wideTrack__IYCEo`,u=`wideThumb__FMdWJ`,d=`customTrack__RVThi`,f=`customThumb__jM-sL`,p={wideTrack:l,wideThumb:u,customTrack:d,customThumb:f}})),h,g,_,v,y,b;t((()=>{e(n(),1),a(),o(),m(),h=r(),g=()=>{let{checked:e}=i();return(0,h.jsx)(c,{className:p.customThumb,children:e?`on`:`off`})},_={title:`Components/Switch/Primitives`,component:s,subcomponents:{SwitchThumb:c},parameters:{layout:`padded`},args:{"aria-label":`Switch`}},v={render:function(e){return(0,h.jsxs)(`div`,{style:{display:`flex`,gap:16},children:[(0,h.jsx)(s,{...e,className:p.wideTrack,children:(0,h.jsx)(c,{className:p.wideThumb})}),(0,h.jsx)(s,{...e,defaultChecked:!0,className:p.wideTrack,children:(0,h.jsx)(c,{className:p.wideThumb})})]})}},y={render:function(e){return(0,h.jsxs)(`div`,{style:{display:`flex`,gap:16},children:[(0,h.jsx)(s,{...e,className:p.customTrack,children:(0,h.jsx)(g,{})}),(0,h.jsx)(s,{...e,defaultChecked:!0,className:p.customTrack,children:(0,h.jsx)(g,{})})]})}},v.parameters={...v.parameters,docs:{...v.parameters?.docs,source:{originalSource:`{
  render: function Story(props) {
    return <div style={{
      display: 'flex',
      gap: 16
    }}>
                <SwitchRoot {...props} className={styles.wideTrack}>
                    <SwitchThumb className={styles.wideThumb} />
                </SwitchRoot>
                <SwitchRoot {...props} defaultChecked className={styles.wideTrack}>
                    <SwitchThumb className={styles.wideThumb} />
                </SwitchRoot>
            </div>;
  }
}`,...v.parameters?.docs?.source},description:{story:"Override `SwitchRoot` and `SwitchThumb` with custom `className` props to\nrestyle the component entirely. Here the thumb is a wider frosted-glass pill\nthat overhangs the track edges, and the track turns green when checked —\nsimilar to the iOS 26 toggle style.",...v.parameters?.docs?.description}}},y.parameters={...y.parameters,docs:{...y.parameters?.docs,source:{originalSource:`{
  render: function Story(props) {
    return <div style={{
      display: 'flex',
      gap: 16
    }}>
                <SwitchRoot {...props} className={styles.customTrack}>
                    <TextThumb />
                </SwitchRoot>
                <SwitchRoot {...props} defaultChecked className={styles.customTrack}>
                    <TextThumb />
                </SwitchRoot>
            </div>;
  }
}`,...y.parameters?.docs?.source},description:{story:"A custom thumb using `children` — demonstrates passing arbitrary content\ninto `SwitchThumb`. The background and label update when the switch is checked.",...y.parameters?.docs?.description}}},b=[`WideThumb`,`CustomThumb`]}))();export{y as CustomThumb,v as WideThumb,b as __namedExportsOrder,_ as default};