import{P as l}from"./PzText-D5PUnIjq.js";import{p as c}from"./configs-B15JgQZ-.js";import{P as s}from"./PzStatus-fGp4njnf.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const p=["inactive","hidden","active","monitoring","disabled","progress","auction-progress","auction-waiting","auction-success"],d=["span","div","li"],v=[{id:"hidden-review",variant:"hidden",label:"Очікує розгляду"},{id:"monitoring-accepted",variant:"monitoring",label:"Прийнято до розгляду"},{id:"inactive-without-review",variant:"inactive",label:"Залишено без розгляду"},{id:"inactive-stopped",variant:"inactive",label:"Розгляд припинено"},{id:"inactive-rejected",variant:"inactive",label:"Відмовлено в задоволенні"},{id:"active-satisfied",variant:"active",label:"Задоволено"},{id:"inactive-withdrawn",variant:"inactive",label:"Відкликано"},{id:"inactive-cancelled",variant:"inactive",label:"Скасовано"},{id:"active-fixed",variant:"active",label:"Порушення усунуто"}],u=[{id:"palette-hidden",variant:"hidden",label:"Текст"},{id:"palette-inactive",variant:"inactive",label:"Текст"},{id:"palette-active",variant:"active",label:"Текст"},{id:"palette-monitoring",variant:"monitoring",label:"Текст"},{id:"palette-disabled",variant:"disabled",label:"Текст"}],m=t=>`<template>
  <PzStatus ${[t.variant!=="progress"?`variant="${t.variant}"`:null,t.as!=="span"?`as="${t.as}"`:null].filter(o=>!!o).join(" ")}>${t.label}</PzStatus>
</template>`,g={title:"Components/Display/PzStatus",component:s,parameters:{prototype:{caption:"Status component",note:"Aligned with Figma node 76:1113: compact filled badges with 3px radius, white label text, optional indicator, and multiline support."},docs:{description:{component:"Use `PzStatus` for semantic state labels. The component matches the design-system badge treatment from Figma and keeps semantic color variants, including gradient auction states."},source:{transform:(t,i)=>m(i.args??g.args)}}},args:{variant:"progress",as:"span",typography:void 0,label:"Очікує розгляду"},argTypes:{variant:{control:"select",options:p,description:"Semantic status variant."},as:{control:"select",options:d,description:"HTML tag used for the wrapper."},typography:{control:"select",options:[void 0,...c],description:"Overrides typography using a PzText variant."},label:{control:"text",description:"Slot content preview text.",table:{category:"Slots"}}},render:t=>({components:{pzStatus:s,pzText:l},setup(){return{args:t,statusReferenceItems:v,statusPaletteItems:u}},template:`
      <div class="pz-status-story">
        <section class="pz-status-story-board">
          <div class="pz-status-story-header">
            <div>
              <span class="pz-status-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Compact filled status badge</pz-text>
            </div>
            <span class="pz-status-story-chip">{{ args.variant }}</span>
          </div>

          <div class="pz-status-story-preview">
            <pz-status
              :variant="args.variant"
              :as="args.as"
              :show-indicator="args.showIndicator"
              :typography="args.typography"
            >
              {{ args.label }}
            </pz-status>
          </div>
        </section>

        <section class="pz-status-story-figma">
          <div class="pz-status-story-header">
            <div>
              <span class="pz-status-story-eyebrow">Figma Reference</span>
              <pz-text variant="h4-bold">Examples from the design system node</pz-text>
            </div>
          </div>

          <div class="pz-status-story-reference">
            <div class="pz-status-story-column">
              <pz-status
                v-for="item in statusReferenceItems"
                :key="item.id"
                :variant="item.variant"
              >
                {{ item.label }}
              </pz-status>
            </div>

            <div class="pz-status-story-column pz-status-story-column-palette">
              <pz-status
                v-for="item in statusPaletteItems"
                :key="item.id"
                :variant="item.variant"
              >
                {{ item.label }}
              </pz-status>
            </div>

            <div class="pz-status-story-column">
              <p class="pz-status-story-caption">статус з перенесенням тексту</p>
              <div class="pz-status-story-wrap">
                <pz-status variant="hidden">
                  Очікує розгляду Очікує розгляду Очікує розгляду
                </pz-status>
              </div>
            </div>
          </div>
        </section>

        <section class="pz-status-story-gallery">
          <div class="pz-status-story-header">
            <div>
              <span class="pz-status-story-eyebrow">Variants</span>
              <pz-text variant="h4-bold">Semantic variants, including auction gradients</pz-text>
            </div>
          </div>

          <div class="pz-status-story-grid">
            <article
              v-for="item in [
                { id: 'variant-hidden', variant: 'hidden', label: 'Очікує розгляду' },
                { id: 'variant-inactive', variant: 'inactive', label: 'Залишено без розгляду' },
                { id: 'variant-active', variant: 'active', label: 'Задоволено' },
                { id: 'variant-monitoring', variant: 'monitoring', label: 'Прийнято до розгляду' },
                { id: 'variant-disabled', variant: 'disabled', label: 'Недоступно' },
                { id: 'variant-progress', variant: 'progress', label: 'У процесі' },
                { id: 'variant-auction-progress', variant: 'auction-progress', label: 'Auction in progress' },
                { id: 'variant-auction-waiting', variant: 'auction-waiting', label: 'Auction waiting' },
                { id: 'variant-auction-success', variant: 'auction-success', label: 'Auction successful' },
              ]"
              :key="item.id"
              class="pz-status-story-card"
            >
              <pz-status :variant="item.variant">{{ item.label }}</pz-status>
              <p class="pz-status-story-code">{{ item.variant }}</p>
            </article>
          </div>
        </section>
      </div>
    `})},a={};var e,n,r;a.parameters={...a.parameters,docs:{...(e=a.parameters)==null?void 0:e.docs,source:{originalSource:"{}",...(r=(n=a.parameters)==null?void 0:n.docs)==null?void 0:r.source}}};const x=["Playground"];export{a as Playground,x as __namedExportsOrder,g as default};
