import{P as d}from"./PzText-D5PUnIjq.js";import{P as r}from"./PzLabel-avnfC9tn.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const n=e=>{const a=[e.label?`label="${e.label}"`:null,e.for?`for="${e.for}"`:null,e.required?':required="true"':null,e.disabled?':disabled="true"':null].filter(t=>!!t).join(" "),p=[e.for?`id="${e.for}"`:null,e.placeholder?`placeholder="${e.placeholder}"`:null,e.disabled?"disabled":null].filter(t=>!!t).join(" ");return`<template>
  <PzLabel ${a}>
    <input ${p} />
  </PzLabel>
</template>`},b={title:"Components/Form/PzLabel",component:r,parameters:{docs:{description:{component:"Use `PzLabel` to pair a form control with its caption. It keeps the public API intentionally small: text label via prop or named slot, a required marker, disabled tone, and a `for` attribute for explicit control association."},source:{transform:(e,a)=>n(a.args??b.args)}}},args:{label:"Назва поля",for:"pz-label-story-input",required:!0,disabled:!1,placeholder:"Введіть опис..."},argTypes:{label:{control:"text",description:"Label text shown above the form control."},for:{control:"text",description:"Matches the `id` of the associated control for explicit labeling."},required:{control:"boolean",description:"Adds the visual required indicator next to the label text."},disabled:{control:"boolean",description:"Applies disabled styling to the label. Disable the slotted control separately."},placeholder:{control:"text",description:"Story-only placeholder for the demo input.",table:{category:"Story"}}},render:e=>({components:{pzLabel:r,pzText:d},setup(){return{args:e}},template:`
      <div class="pz-label-story">
        <section class="pz-label-story-board">
          <div class="pz-label-story-header">
            <div>
              <span class="pz-label-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Field caption wrapper</pz-text>
            </div>
          </div>

          <div class="pz-label-story-preview">
            <div class="pz-label-story-field">
              <pz-label
                :label="args.label"
                :for="args.for"
                :required="args.required"
                :disabled="args.disabled"
              >
                <input
                  :id="args.for"
                  class="pz-label-story-input"
                  :placeholder="args.placeholder"
                  :disabled="args.disabled"
                />
              </pz-label>
            </div>
          </div>
        </section>

        <section class="pz-label-story-gallery">
          <div class="pz-label-story-header">
            <div>
              <span class="pz-label-story-eyebrow">Usage</span>
              <pz-text variant="h4-bold">Typical form labeling states</pz-text>
            </div>
          </div>

          <div class="pz-label-story-grid">
            <article class="pz-label-story-card">
              <pz-label
                label="Назва поля"
                for="pz-label-story-default"
              >
                <input
                  id="pz-label-story-default"
                  class="pz-label-story-input"
                  placeholder="Введіть опис..."
                />
              </pz-label>
              <span class="pz-label-story-note">Стандартний label над контролом з явним зв’язком через for/id.</span>
            </article>

            <article class="pz-label-story-card">
              <pz-label
                label="Назва поля"
                for="pz-label-story-required"
                required
              >
                <input
                  id="pz-label-story-required"
                  class="pz-label-story-input"
                  placeholder="Обов'язкове поле"
                />
              </pz-label>
              <span class="pz-label-story-note">Показує required-маркер для полів, які не можна залишити порожніми.</span>
            </article>

            <article class="pz-label-story-card">
              <pz-label
                for="pz-label-story-slot"
                required
              >
                <template #label>
                  <span class="pz-label-story-rich-label">
                    Контактна особа
                    <span class="pz-label-story-rich-label-note">через label slot</span>
                  </span>
                </template>

                <input
                  id="pz-label-story-slot"
                  class="pz-label-story-input"
                  placeholder="Ім'я та прізвище"
                />
              </pz-label>
              <span class="pz-label-story-note">Приклад label slot, коли в підпис треба додати додатковий текст або складнішу розмітку.</span>
            </article>

            <article class="pz-label-story-card">
              <pz-label
                label="Назва поля"
                for="pz-label-story-disabled"
                disabled
              >
                <input
                  id="pz-label-story-disabled"
                  class="pz-label-story-input"
                  value="Недоступне поле"
                  disabled
                />
              </pz-label>
              <span class="pz-label-story-note">Disabled-стан приглушує і підпис, і сам control, але семантика label зберігається.</span>
            </article>
          </div>
        </section>
      </div>
    `})},l={parameters:{docs:{description:{story:"Інтерактивний приклад wrapper-компонента для підпису поля. Gallery показує базовий label, required-модифікатор, slot-підпис і disabled-стан."}}}};var o,s,i;l.parameters={...l.parameters,docs:{...(o=l.parameters)==null?void 0:o.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "Інтерактивний приклад wrapper-компонента для підпису поля. Gallery показує базовий label, required-модифікатор, slot-підпис і disabled-стан."
      }
    }
  }
}`,...(i=(s=l.parameters)==null?void 0:s.docs)==null?void 0:i.source}}};const f=["Playground"];export{l as Playground,f as __namedExportsOrder,b as default};
