import{g as x,x as p}from"./iframe-CMPv_g6-.js";import{o as t}from"./if-defined-DzbkssR9.js";import{o as g}from"./style-map-968Ye5qo.js";import"./preload-helper-PPVm8Dsz.js";const{events:y,args:v,argTypes:f}=x("btu-checkbox"),S={customColorPrimary:"--checkbox-color-primary",customColorBorder:"--checkbox-color-border",customColorError:"--checkbox-color-error",customBorderRadius:"--checkbox-border-radius",customLabelSpacing:"--checkbox-label-spacing"},C=e=>Object.entries(S).reduce((r,[h,k])=>(e[h]&&(r[k]=e[h]),r),{}),P={title:"Components/Checkbox",component:"btu-checkbox",tags:["autodocs"],parameters:{docs:{subtitle:"A checkbox for selecting one or more options",description:{component:`
<h3>When to use:</h3>
<ul>
  <li>For selecting one or more options from a set</li>
  <li>In forms, filters, and settings toggles</li>
  <li>For "select all" patterns with the indeterminate state</li>
</ul>
        `}},actions:{handles:y},controls:{expanded:!0}},args:{...v,label:"Remember me",checked:!1},argTypes:{...f,"--checkbox-color-primary":{table:{disable:!0}},"--checkbox-color-border":{table:{disable:!0}},"--checkbox-color-error":{table:{disable:!0}},"--checkbox-border-radius":{table:{disable:!0}},"--checkbox-label-spacing":{table:{disable:!0}},"--checkbox-box-size":{table:{disable:!0}},"--checkbox-icon-size":{table:{disable:!0}},customColorPrimary:{name:"--checkbox-color-primary",control:{type:"color"},description:"Background and border color when checked or indeterminate, and tinted background/border on unchecked hover",table:{category:"CSS Properties"}},customColorBorder:{name:"--checkbox-color-border",control:{type:"color"},description:"Border color in the unchecked state",table:{category:"CSS Properties"}},customColorError:{name:"--checkbox-color-error",control:{type:"color"},description:"Border and text color in the error state",table:{category:"CSS Properties"}},customBorderRadius:{name:"--checkbox-border-radius",control:{type:"text"},description:"Corner rounding of the checkbox square (default: 4px)",table:{category:"CSS Properties"}},customLabelSpacing:{name:"--checkbox-label-spacing",control:{type:"text"},description:"Distance between the checkbox and the label (default: 0.75rem)",table:{category:"CSS Properties"}}},render:e=>p`
    <btu-checkbox
      size=${t(e.size)}
      label=${t(e.label)}
      description=${t(e.description)}
      error=${t(e.error)}
      name=${t(e.name)}
      value=${t(e.value)}
      .checked=${e.checked??!1}
      .indeterminate=${e.indeterminate??!1}
      ?disabled=${e.disabled}
      ?invalid=${e.invalid}
      ?required=${e.required}
      style=${g(C(e))}
    ></btu-checkbox>
  `},o={args:{}},c={args:{checked:!0,label:"Accepted terms"}},a={args:{label:"Remember me",description:"Save your login details for next time.",checked:!0}},n={args:{label:"Select all",indeterminate:!0},parameters:{docs:{description:{story:"Indeterminate state shows a minus icon. Clicking clears indeterminate and toggles the checked state."}}}},s={args:{label:"Unavailable option",disabled:!0}},l={args:{label:"Previously accepted",disabled:!0,checked:!0}},i={args:{label:"Accept terms and conditions",invalid:!0,error:"You must accept the terms to continue."}},d={render:()=>p`
    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
      <span style="font-size: 0.875rem; font-weight: 600; color: oklch(var(--btu-theme-gray-700));">Toppings</span>
      <btu-checkbox label="Pepperoni" name="toppings" checked></btu-checkbox>
      <btu-checkbox label="Mushrooms" name="toppings"></btu-checkbox>
      <btu-checkbox label="Extra cheese" name="toppings" checked></btu-checkbox>
      <btu-checkbox label="Olives" name="toppings"></btu-checkbox>
    </div>
  `},b={args:{label:"Partial selection",disabled:!0,indeterminate:!0}},u={render:()=>p`
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      <btu-checkbox size="sm" label="Small (default)" checked></btu-checkbox>
      <btu-checkbox size="md" label="Medium" checked></btu-checkbox>
    </div>
  `},m={render:()=>p`
    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
      <btu-checkbox
        label="Toggle me"
        description="Toggle the checkbox to see the change event payload below."
        @btu-checkbox-change=${e=>{const r=e.target.parentElement?.querySelector("#checkbox-event-output");r&&(r.textContent=`checked: ${e.detail.checked}`)}}
      ></btu-checkbox>
      <span
        id="checkbox-event-output"
        style="font-size: 0.75rem; font-family: monospace; color: oklch(var(--btu-theme-gray-500));"
        >—</span
      >
    </div>
  `,parameters:{docs:{description:{story:"Demonstrates the `btu-checkbox-change` event, which provides `{ checked: boolean }` in its detail."}}}};o.parameters={...o.parameters,docs:{...o.parameters?.docs,source:{originalSource:`{
  args: {}
}`,...o.parameters?.docs?.source}}};c.parameters={...c.parameters,docs:{...c.parameters?.docs,source:{originalSource:`{
  args: {
    checked: true,
    label: 'Accepted terms'
  }
}`,...c.parameters?.docs?.source}}};a.parameters={...a.parameters,docs:{...a.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Remember me',
    description: 'Save your login details for next time.',
    checked: true
  }
}`,...a.parameters?.docs?.source}}};n.parameters={...n.parameters,docs:{...n.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Select all',
    indeterminate: true
  },
  parameters: {
    docs: {
      description: {
        story: 'Indeterminate state shows a minus icon. Clicking clears indeterminate and toggles the checked state.'
      }
    }
  }
}`,...n.parameters?.docs?.source}}};s.parameters={...s.parameters,docs:{...s.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Unavailable option',
    disabled: true
  }
}`,...s.parameters?.docs?.source}}};l.parameters={...l.parameters,docs:{...l.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Previously accepted',
    disabled: true,
    checked: true
  }
}`,...l.parameters?.docs?.source}}};i.parameters={...i.parameters,docs:{...i.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Accept terms and conditions',
    invalid: true,
    error: 'You must accept the terms to continue.'
  }
}`,...i.parameters?.docs?.source}}};d.parameters={...d.parameters,docs:{...d.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
      <span style="font-size: 0.875rem; font-weight: 600; color: oklch(var(--btu-theme-gray-700));">Toppings</span>
      <btu-checkbox label="Pepperoni" name="toppings" checked></btu-checkbox>
      <btu-checkbox label="Mushrooms" name="toppings"></btu-checkbox>
      <btu-checkbox label="Extra cheese" name="toppings" checked></btu-checkbox>
      <btu-checkbox label="Olives" name="toppings"></btu-checkbox>
    </div>
  \`
}`,...d.parameters?.docs?.source}}};b.parameters={...b.parameters,docs:{...b.parameters?.docs,source:{originalSource:`{
  args: {
    label: 'Partial selection',
    disabled: true,
    indeterminate: true
  }
}`,...b.parameters?.docs?.source}}};u.parameters={...u.parameters,docs:{...u.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; flex-direction: column; gap: 1rem;">
      <btu-checkbox size="sm" label="Small (default)" checked></btu-checkbox>
      <btu-checkbox size="md" label="Medium" checked></btu-checkbox>
    </div>
  \`
}`,...u.parameters?.docs?.source}}};m.parameters={...m.parameters,docs:{...m.parameters?.docs,source:{originalSource:`{
  render: () => html\`
    <div style="display: flex; flex-direction: column; gap: 0.75rem;">
      <btu-checkbox
        label="Toggle me"
        description="Toggle the checkbox to see the change event payload below."
        @btu-checkbox-change=\${(e: CustomEvent<{
    checked: boolean;
  }>) => {
    const output = (e.target as HTMLElement).parentElement?.querySelector('#checkbox-event-output');
    if (output) output.textContent = \`checked: \${e.detail.checked}\`;
  }}
      ></btu-checkbox>
      <span
        id="checkbox-event-output"
        style="font-size: 0.75rem; font-family: monospace; color: oklch(var(--btu-theme-gray-500));"
        >—</span
      >
    </div>
  \`,
  parameters: {
    docs: {
      description: {
        story: 'Demonstrates the \`btu-checkbox-change\` event, which provides \`{ checked: boolean }\` in its detail.'
      }
    }
  }
}`,...m.parameters?.docs?.source}}};const w=["Default","Checked","WithDescription","Indeterminate","Disabled","DisabledChecked","InvalidWithError","Group","DisabledIndeterminate","Sizes","Events"];export{c as Checked,o as Default,s as Disabled,l as DisabledChecked,b as DisabledIndeterminate,m as Events,d as Group,n as Indeterminate,i as InvalidWithError,u as Sizes,a as WithDescription,w as __namedExportsOrder,P as default};
