import{r as n,w as l}from"./iframe-Bl-fVlm8.js";import{P as p}from"./PzText-D5PUnIjq.js";import{p as d}from"./configs-CZIaFchr.js";import{P as a}from"./PzCheckbox-cVcWZlwS.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const h=e=>`<template>
  <PzCheckbox ${[e.variant!=="checkbox"?`variant="${e.variant}"`:null,e.id?`id="${e.id}"`:null,e.name?`name="${e.name}"`:null,e.disabled?':disabled="true"':null,e.modelValue?':model-value="true"':null].filter(c=>!!c).join(" ")}>
    Text checkbox
  </PzCheckbox>
</template>`,b={title:"Components/Form/PzCheckbox",component:a,parameters:{docs:{description:{component:"Use `PzCheckbox` for single boolean choices. The component supports the standard checkbox presentation and the preserved `switch` variant while keeping the label API slot-based and lightweight."},source:{transform:(e,o)=>h(o.args??b.args)}}},args:{modelValue:!0,id:"pz-checkbox-story",name:"checkbox-story",variant:"checkbox",disabled:!1,label:"Text checkbox"},argTypes:{variant:{control:"inline-radio",options:d,description:"Selects the control presentation."},modelValue:{control:"boolean",description:"Checked state of the control."},disabled:{control:"boolean",description:"Disables the native checkbox and applies muted styling."},id:{control:"text",description:"Optional `id` for the native input."},name:{control:"text",description:"Optional `name` for the native input."},value:{control:"text",description:"Optional primitive input value, mainly useful in grouped or native form scenarios."},label:{control:"text",description:"Fallback text label when the default slot is not used.",table:{category:"Slots"}}},render:e=>({components:{pzCheckbox:a,pzText:p},setup(){const o=n(e.modelValue??!1);return l(()=>e.modelValue,c=>{o.value=c??!1}),{args:e,checked:o}},template:`
      <div class="pz-checkbox-story">
        <section class="pz-checkbox-story-board">
          <div class="pz-checkbox-story-header">
            <div>
              <span class="pz-checkbox-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Single boolean control</pz-text>
            </div>
          </div>

          <div class="pz-checkbox-story-preview">
            <pz-checkbox
              v-model="checked"
              :id="args.id"
              :name="args.name"
              :value="args.value"
              :variant="args.variant"
              :disabled="args.disabled"
            >
              {{ args.label }}
            </pz-checkbox>
          </div>
        </section>

        <section class="pz-checkbox-story-gallery">
          <div class="pz-checkbox-story-header">
            <div>
              <span class="pz-checkbox-story-eyebrow">States</span>
              <pz-text variant="h4-bold">Checkbox and switch share the same API</pz-text>
            </div>
          </div>

          <div class="pz-checkbox-story-grid">
            <article class="pz-checkbox-story-card">
              <pz-checkbox>Text checkbox</pz-checkbox>
              <pz-checkbox :model-value="true">Text checkbox</pz-checkbox>
              <pz-checkbox disabled>Disabled checkbox</pz-checkbox>
              <span class="pz-checkbox-story-note">Базовий ряд показує unchecked, checked і disabled стани стандартного чекбокса.</span>
            </article>

            <article class="pz-checkbox-story-card">
              <pz-checkbox variant="switch">Увімкнути сповіщення</pz-checkbox>
              <pz-checkbox variant="switch" :model-value="true">Увімкнути сповіщення</pz-checkbox>
              <pz-checkbox variant="switch" disabled>Disabled switch</pz-checkbox>
              <span class="pz-checkbox-story-note">Ті самі стани, але у switch-представленні з ідентичним API.</span>
            </article>
          </div>
        </section>
      </div>
    `})},t={parameters:{docs:{description:{story:"Інтерактивний приклад для перевірки основних props чекбокса. Нижче в gallery показані типові стани для checkbox і switch."}}}};var s,r,i;t.parameters={...t.parameters,docs:{...(s=t.parameters)==null?void 0:s.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "Інтерактивний приклад для перевірки основних props чекбокса. Нижче в gallery показані типові стани для checkbox і switch."
      }
    }
  }
}`,...(i=(r=t.parameters)==null?void 0:r.docs)==null?void 0:i.source}}};const y=["Playground"];export{t as Playground,y as __namedExportsOrder,b as default};
