import{g as k,x as c}from"./iframe-CMPv_g6-.js";import{o as s}from"./if-defined-DzbkssR9.js";import{o as f}from"./style-map-968Ye5qo.js";import{L as w}from"./LucideDynamicLoader-jmdq8YDM.js";import"./preload-helper-PPVm8Dsz.js";const{events:v,args:y,argTypes:g}=k("btu-switch"),x={customColorOn:"--switch-color-track-on",customColorOff:"--switch-color-track-off",customKnobColor:"--switch-color-knob",customLabelSpacing:"--switch-label-spacing",customIconSize:"--switch-track-icon-size"},S=e=>Object.entries(x).reduce((o,[t,n])=>(e[t]&&(o[n]=e[t]),o),{}),L={title:"Components/Switch",component:"btu-switch",tags:["autodocs"],parameters:{docs:{subtitle:"A toggle switch for binary on/off states",description:{component:`
<h3>When to use:</h3>
<ul>
  <li>For toggling a setting or preference on/off</li>
  <li>When the effect of the change is immediate or near-immediate</li>
  <li>As an alternative to a single checkbox for boolean options</li>
</ul>

<p>Track icons are powered by the <a href="?path=/docs/components-icon--docs">Icon component</a>. Visit its docs for all available icon names.</p>
        `}},actions:{handles:v},controls:{expanded:!0}},args:{...y,label:"Label",checked:!1},argTypes:{...g,"--switch-color-track-on":{table:{disable:!0}},"--switch-color-track-off":{table:{disable:!0}},"--switch-color-knob":{table:{disable:!0}},"--switch-label-spacing":{table:{disable:!0}},"--switch-icon-size":{table:{disable:!0}},"--switch-track-icon-size":{table:{disable:!0}},customColorOn:{name:"--switch-color-track-on",control:{type:"color"},description:"Background color when the toggle is checked",table:{category:"css properties"}},customColorOff:{name:"--switch-color-track-off",control:{type:"color"},description:"Background color when the toggle is unchecked",table:{category:"css properties"}},customKnobColor:{name:"--switch-color-knob",control:{type:"color"},description:"Color of the sliding circular handle",table:{category:"css properties"}},customLabelSpacing:{name:"--switch-label-spacing",control:{type:"text"},description:"Distance between the switch and the text label (default: 0.75rem)",table:{category:"css properties"}},"on-icon":{...g["on-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when checked. Only icons available in Lucide v'+w+" are supported."},"off-icon":{...g["off-icon"],control:{type:"text"},description:'<a href="https://lucide.dev/icons/" target="_blank">Lucide</a> icon name shown on the track when unchecked. Only icons available in Lucide v'+w+" are supported."},customIconSize:{name:"--switch-track-icon-size",control:{type:"text"},description:"Size of the track icons (e.g., `0.5rem`, `0.75rem`, `1rem`). Defaults: sm `0.5rem`, md `0.625rem`, lg `0.75rem`.",table:{category:"css properties"}}},render:e=>c`
    <btu-switch
      size=${e.size??"sm"}
      label=${s(e.label)}
      description=${s(e.description)}
      label-position=${e["label-position"]??"end"}
      on-icon=${s(e["on-icon"])}
      off-icon=${s(e["off-icon"])}
      name=${s(e.name)}
      .checked=${e.checked??!1}
      ?disabled=${e.disabled}
      style=${f(S(e))}
    ></btu-switch>
  `},i={args:{}},a={args:{checked:!0,label:"Enabled"},parameters:{docs:{description:{story:"Switch in the checked/on state. The track uses `--switch-color-track-on` (defaults to primary-700)."}}}},r={args:{label:"Enable notifications",description:"Receive updates via email",checked:!0},parameters:{docs:{description:{story:"Switch with both a primary label and a secondary description."}}}},l={args:{label:"Unavailable option",disabled:!0},parameters:{docs:{description:{story:"Disabled state via the `disabled` attribute. The track opacity is reduced and the wrapper cursor changes to `not-allowed`."}}}},d={args:{label:"Previously enabled",disabled:!0,checked:!0},parameters:{docs:{description:{story:"Disabled switch in the checked state. Useful for showing a locked-on setting."}}}},h={args:{label:"Label on the left","label-position":"start"},parameters:{docs:{description:{story:'Place the label before the switch using `label-position="start"`.'}}}},u={args:{label:"Notifications",checked:!0,"on-icon":"check","off-icon":"x"},parameters:{docs:{description:{story:"Track icons via `on-icon` and `off-icon` attributes. Icons use Lucide names (e.g., `check`, `x`, `bell`, `bell-off`)."}}}},b={render:()=>c`
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      ${["sm","md","lg"].map(e=>c`
          <btu-switch size=${e} label="${e} with icons" on-icon="check" off-icon="x" checked></btu-switch>
        `)}
    </div>
  `,parameters:{docs:{description:{story:"Track icons scale automatically with the switch size."}}}},m={render:()=>c`
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      ${["sm","md","lg"].map(e=>c` <btu-switch size=${e} label="${e} size" checked></btu-switch> `)}
    </div>
  `,parameters:{docs:{description:{story:"The three available size variants: `sm` (default), `md`, and `lg`."}}}},p={render:()=>c`
    <div class="flex flex-col gap-6">
      <div class="flex flex-col gap-2">
        <strong>Custom colors:</strong>
        <div class="flex items-center gap-6">
          <btu-switch
            label="Success"
            checked
            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-success-600))"})}
          ></btu-switch>
          <btu-switch
            label="Warning"
            checked
            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-warning-500))"})}
          ></btu-switch>
          <btu-switch
            label="Error"
            checked
            style=${f({"--switch-color-track-on":"oklch(var(--btu-theme-error-600))"})}
          ></btu-switch>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Event handling:</strong>
        <btu-switch
          label="Toggle me"
          description="Check the Actions panel to see events"
          @btu-switch-change=${e=>{const t=e.target.querySelector(".btu-switch-description");t&&(t.textContent=e.detail.checked?"Switch is ON":"Switch is OFF")}}
        ></btu-switch>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Form participation:</strong>
        <form
          class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4"
          @submit=${e=>{e.preventDefault();const o=e.target,t=new FormData(o),n=o.querySelector(".form-output");n&&(n.textContent=JSON.stringify(Object.fromEntries(t),null,2))}}
        >
          <btu-switch label="Email notifications" name="email" checked></btu-switch>
          <btu-switch label="SMS notifications" name="sms"></btu-switch>
          <btu-switch label="Push notifications" name="push" checked></btu-switch>
          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
          <pre class="form-output text-xs text-gray-600"></pre>
        </form>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Track icons:</strong>
        <div class="flex items-center gap-6">
          <btu-switch label="Check / X" on-icon="check" off-icon="x" checked></btu-switch>
          <btu-switch label="Lock" on-icon="lock-open" off-icon="lock"></btu-switch>
          <btu-switch label="Sound" on-icon="volume-2" off-icon="volume-off" checked></btu-switch>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Programmatic control:</strong>
        <div class="flex items-center gap-4">
          <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
          <button
            class="btu-button btu-button-sm"
            @click=${()=>{const e=document.getElementById("programmatic-switch");e&&(e.checked=!e.checked)}}
          >
            Toggle externally
          </button>
        </div>
      </div>
    </div>
  `,parameters:{docs:{description:{story:"\n- **Custom colors** via CSS custom properties (`--switch-color-track-on`, `--switch-color-track-off`) using theme tokens.\n- **Event handling** with the `btu-switch-change` event, which provides `{ checked: boolean }` in its detail.\n- **Form participation** using the `name` attribute — the hidden checkbox participates in native form submission.\n- **Track icons** via `on-icon` and `off-icon` attributes using Lucide icon names (e.g., `check`, `x`, `lock`, `volume-2`).\n- **Programmatic control** by setting the `checked` property directly from JavaScript."}}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  args: {}
}`,...i.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  args: {
    checked: true,
    label: 'Enabled'
  },
  parameters: {
    docs: {
      description: {
        story: 'Switch in the checked/on state. The track uses \`--switch-color-track-on\` (defaults to primary-700).'
      }
    }
  }
}`,...a.parameters?.docs?.source}}};r.parameters={...r.parameters,docs:{...r.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Enable notifications',
    description: 'Receive updates via email',
    checked: true
  },
  parameters: {
    docs: {
      description: {
        story: 'Switch with both a primary label and a secondary description.'
      }
    }
  }
}`,...r.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Unavailable option',
    disabled: true
  },
  parameters: {
    docs: {
      description: {
        story: 'Disabled state via the \`disabled\` attribute. The track opacity is reduced and the wrapper cursor changes to \`not-allowed\`.'
      }
    }
  }
}`,...l.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Previously enabled',
    disabled: true,
    checked: true
  },
  parameters: {
    docs: {
      description: {
        story: 'Disabled switch in the checked state. Useful for showing a locked-on setting.'
      }
    }
  }
}`,...d.parameters?.docs?.source}}};h.parameters={...h.parameters,docs:{...h.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Label on the left',
    'label-position': 'start'
  },
  parameters: {
    docs: {
      description: {
        story: 'Place the label before the switch using \`label-position="start"\`.'
      }
    }
  }
}`,...h.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Notifications',
    checked: true,
    'on-icon': 'check',
    'off-icon': 'x'
  },
  parameters: {
    docs: {
      description: {
        story: 'Track icons via \`on-icon\` and \`off-icon\` attributes. Icons use Lucide names (e.g., \`check\`, \`x\`, \`bell\`, \`bell-off\`).'
      }
    }
  }
}`,...u.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      \${(['sm', 'md', 'lg'] as const).map(size => html\`
          <btu-switch size=\${size} label="\${size} with icons" on-icon="check" off-icon="x" checked></btu-switch>
        \`)}
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Track icons scale automatically with the switch size.'
      }
    }
  }
}`,...b.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      \${(['sm', 'md', 'lg'] as const).map(size => html\` <btu-switch size=\${size} label="\${size} size" checked></btu-switch> \`)}
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'The three available size variants: \`sm\` (default), \`md\`, and \`lg\`.'
      }
    }
  }
}`,...m.parameters?.docs?.source}}};p.parameters={...p.parameters,docs:{...p.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div class="flex flex-col gap-6">
      <div class="flex flex-col gap-2">
        <strong>Custom colors:</strong>
        <div class="flex items-center gap-6">
          <btu-switch
            label="Success"
            checked
            style=\${styleMap({
    '--switch-color-track-on': 'oklch(var(--btu-theme-success-600))'
  })}
          ></btu-switch>
          <btu-switch
            label="Warning"
            checked
            style=\${styleMap({
    '--switch-color-track-on': 'oklch(var(--btu-theme-warning-500))'
  })}
          ></btu-switch>
          <btu-switch
            label="Error"
            checked
            style=\${styleMap({
    '--switch-color-track-on': 'oklch(var(--btu-theme-error-600))'
  })}
          ></btu-switch>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Event handling:</strong>
        <btu-switch
          label="Toggle me"
          description="Check the Actions panel to see events"
          @btu-switch-change=\${(e: CustomEvent<{
    checked: boolean;
  }>) => {
    const el = e.target as HTMLElement;
    const label = el.querySelector('.btu-switch-description');
    if (label) label.textContent = e.detail.checked ? 'Switch is ON' : 'Switch is OFF';
  }}
        ></btu-switch>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Form participation:</strong>
        <form
          class="flex flex-col gap-3 rounded-lg border border-gray-200 bg-gray-50 p-4"
          @submit=\${(e: Event) => {
    e.preventDefault();
    const form = e.target as HTMLFormElement;
    const data = new FormData(form);
    const output = form.querySelector('.form-output');
    if (output) output.textContent = JSON.stringify(Object.fromEntries(data), null, 2);
  }}
        >
          <btu-switch label="Email notifications" name="email" checked></btu-switch>
          <btu-switch label="SMS notifications" name="sms"></btu-switch>
          <btu-switch label="Push notifications" name="push" checked></btu-switch>
          <button type="submit" class="btu-button btu-button-sm w-fit">Submit</button>
          <pre class="form-output text-xs text-gray-600"></pre>
        </form>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Track icons:</strong>
        <div class="flex items-center gap-6">
          <btu-switch label="Check / X" on-icon="check" off-icon="x" checked></btu-switch>
          <btu-switch label="Lock" on-icon="lock-open" off-icon="lock"></btu-switch>
          <btu-switch label="Sound" on-icon="volume-2" off-icon="volume-off" checked></btu-switch>
        </div>
      </div>

      <div class="flex flex-col gap-2">
        <strong>Programmatic control:</strong>
        <div class="flex items-center gap-4">
          <btu-switch id="programmatic-switch" label="Controlled switch" size="md"></btu-switch>
          <button
            class="btu-button btu-button-sm"
            @click=\${() => {
    const sw = document.getElementById('programmatic-switch') as HTMLElement & {
      checked: boolean;
    };
    if (sw) sw.checked = !sw.checked;
  }}
          >
            Toggle externally
          </button>
        </div>
      </div>
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: \`
- **Custom colors** via CSS custom properties (\\\`--switch-color-track-on\\\`, \\\`--switch-color-track-off\\\`) using theme tokens.
- **Event handling** with the \\\`btu-switch-change\\\` event, which provides \\\`{ checked: boolean }\\\` in its detail.
- **Form participation** using the \\\`name\\\` attribute — the hidden checkbox participates in native form submission.
- **Track icons** via \\\`on-icon\\\` and \\\`off-icon\\\` attributes using Lucide icon names (e.g., \\\`check\\\`, \\\`x\\\`, \\\`lock\\\`, \\\`volume-2\\\`).
- **Programmatic control** by setting the \\\`checked\\\` property directly from JavaScript.\`
      }
    }
  }
}`,...p.parameters?.docs?.source}}};const D=["Default","Checked","WithDescription","Disabled","DisabledChecked","LabelStart","WithIcons","WithIconsSizes","Sizes","AdvancedUsage"];export{p as AdvancedUsage,a as Checked,i as Default,l as Disabled,d as DisabledChecked,h as LabelStart,m as Sizes,r as WithDescription,u as WithIcons,b as WithIconsSizes,D as __namedExportsOrder,L as default};
