import{_ as p}from"./PzIcon-cRuuou9i.js";import{P as c}from"./PzText-D5PUnIjq.js";import{p as f}from"./configs-B15JgQZ-.js";import{P as n}from"./PzBtn-Cx92sJr7.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const m=["primary","primary-outline","danger","danger-outline","alert","alert-outline","success","success-outline","pink","pink-outline","link","transparent"],b=["button","submit","reset"],d=[{variant:"primary",label:"Підтвердити",prefix:"check"},{variant:"primary-outline",label:"Редагувати",prefix:"edit"},{variant:"danger",label:"Видалити",prefix:"delete"},{variant:"danger-outline",label:"Скасувати",suffix:"close"},{variant:"alert",label:"Попередження",prefix:"warning"},{variant:"alert-outline",label:"Зверніть увагу"},{variant:"success",label:"Підтвердити",prefix:"check"},{variant:"success-outline",label:"Скасувати",suffix:"close"},{variant:"pink",label:"Відгук",prefix:"star"},{variant:"pink-outline",label:"Відгук",prefix:"star"},{variant:"link",label:"Перейти до деталей"},{variant:"transparent",label:"Показати більше"}],u=t=>{const e=[t.variant!=="primary"?`variant="${t.variant}"`:null,t.type!=="button"?`type="${t.type}"`:null,t.disabled?':disabled="true"':null].filter(i=>!!i).join(" "),l=[t.showPrefix?`    <template #prefix>
      <PzIcon name="add" size="16" />
    </template>`:null,`    ${t.label}`,t.showSuffix?`    <template #suffix>
      <PzIcon name="arrow_forward" size="16" />
    </template>`:null].filter(i=>!!i);return`<template>
  ${e?`<PzBtn ${e}>`:"<PzBtn>"}
${l.join(`
`)}
  </PzBtn>
</template>`},v={title:"Components/Actions/PzBtn",component:n,parameters:{docs:{description:{component:"Use `PzBtn` for all button actions. Supports filled, outline, link, and transparent treatments via `variant`. Compose prefix or suffix icons through named slots."},source:{transform:(t,e)=>u(e.args??v.args)}}},args:{variant:"primary",type:"button",disabled:!1,typography:void 0,label:"Підтвердити дію",showPrefix:!0,showSuffix:!1},argTypes:{variant:{control:"select",options:m,description:"Visual button treatment."},type:{control:"inline-radio",options:b,description:"Native button type attribute."},disabled:{control:"boolean",description:"Disables the button and applies reduced-opacity styling."},typography:{control:"select",options:[void 0,...f],description:"Overrides typography using a PzText variant."},label:{control:"text",description:"Slot content preview text.",table:{category:"Slots"}},showPrefix:{control:"boolean",description:"Shows a prefix icon slot in the preview.",table:{category:"Slots"}},showSuffix:{control:"boolean",description:"Shows a suffix icon slot in the preview.",table:{category:"Slots"}}},render:t=>({components:{pzBtn:n,pzIcon:p,pzText:c},setup(){return{args:t,btnReferenceItems:d}},template:`
      <div class="pz-btn-story">
        <section class="pz-btn-story-board">
          <div class="pz-btn-story-header">
            <div>
              <span class="pz-btn-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Interactive playground</pz-text>
            </div>
            <span class="pz-btn-story-chip">{{ args.variant }}</span>
          </div>

          <div class="pz-btn-story-preview">
            <pz-btn
              :variant="args.variant"
              :type="args.type"
              :disabled="args.disabled"
              :typography="args.typography"
            >
              <template v-if="args.showPrefix" #prefix>
                <pz-icon name="add" size="16" label="Button prefix icon" />
              </template>

              {{ args.label }}

              <template v-if="args.showSuffix" #suffix>
                <pz-icon name="arrow_forward" size="16" label="Button suffix icon" />
              </template>
            </pz-btn>
          </div>
        </section>

        <section class="pz-btn-story-gallery">
          <div class="pz-btn-story-header">
            <div>
              <span class="pz-btn-story-eyebrow">Variants</span>
              <pz-text variant="h4-bold">All button treatments</pz-text>
            </div>
          </div>

          <div class="pz-btn-story-grid">
            <article
              v-for="item in btnReferenceItems"
              :key="item.variant"
              class="pz-btn-story-card"
            >
              <p class="pz-btn-story-label">{{ item.variant }}</p>
              <div class="pz-btn-story-row">
                <pz-btn :variant="item.variant">
                  <template v-if="item.prefix" #prefix>
                    <pz-icon :name="item.prefix" size="16" :label="item.label + ' prefix'" />
                  </template>

                  {{ item.label }}

                  <template v-if="item.suffix" #suffix>
                    <pz-icon :name="item.suffix" size="16" :label="item.label + ' suffix'" />
                  </template>
                </pz-btn>

                <pz-btn :variant="item.variant" disabled>
                  <template v-if="item.prefix" #prefix>
                    <pz-icon :name="item.prefix" size="16" :label="item.label + ' prefix disabled'" />
                  </template>

                  {{ item.label }}

                  <template v-if="item.suffix" #suffix>
                    <pz-icon :name="item.suffix" size="16" :label="item.label + ' suffix disabled'" />
                  </template>
                </pz-btn>
              </div>
            </article>
          </div>
        </section>
      </div>
    `})},a={};var r,s,o;a.parameters={...a.parameters,docs:{...(r=a.parameters)==null?void 0:r.docs,source:{originalSource:"{}",...(o=(s=a.parameters)==null?void 0:s.docs)==null?void 0:o.source}}};const S=["Playground"];export{a as Playground,S as __namedExportsOrder,v as default};
