import{P as r}from"./PzText-D5PUnIjq.js";import{P as t}from"./PzSkeleton-87dTujvi.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const h={title:"Components/Display/PzSkeleton",component:t,parameters:{prototype:{caption:"PzSkeleton",note:"Reusable loading placeholder for lines, blocks, and lightweight preview cards. Used by `PzAccordion` as the default loading surface."},docs:{description:{component:"Use `PzSkeleton` for loading placeholders. Control its dimensions through `width`, `height`, and `radius`, and disable shimmer with `animated=false` when a static placeholder is preferred."}}},args:{width:"240px",height:"24px",radius:"8px",animated:!0},argTypes:{width:{control:"text",description:"Skeleton width."},height:{control:"text",description:"Skeleton height."},radius:{control:"text",description:"Border radius."},animated:{control:"boolean",description:"Enables the shimmer animation."}},render:a=>({components:{pzSkeleton:t,pzText:r},setup(){return{args:a}},template:`
      <div class="pz-skeleton-story">
        <section class="pz-skeleton-story-board">
          <div class="pz-skeleton-story-header">
            <div>
              <span class="pz-skeleton-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Loading placeholder primitive</pz-text>
            </div>
            <span class="pz-skeleton-story-chip">{{ args.animated ? 'animated' : 'static' }}</span>
          </div>

          <div class="pz-skeleton-story-preview">
            <pz-skeleton v-bind="args" />
          </div>
        </section>

        <section class="pz-skeleton-story-board">
          <div class="pz-skeleton-story-header">
            <div>
              <span class="pz-skeleton-story-eyebrow">Usage example</span>
              <pz-text variant="h4-bold">Stacked text and card placeholders</pz-text>
            </div>
          </div>

          <div class="pz-skeleton-story-stack">
            <pz-skeleton width="180px" height="20px" />
            <pz-skeleton width="320px" height="20px" />
            <pz-skeleton width="260px" height="20px" />
          </div>

          <div class="pz-skeleton-story-card">
            <pz-skeleton width="120px" height="18px" />
            <pz-skeleton width="70%" height="16px" />
            <pz-skeleton width="100%" height="16px" />
            <pz-skeleton width="42%" height="16px" />
          </div>
        </section>
      </div>
    `})},e={};var s,o,i;e.parameters={...e.parameters,docs:{...(s=e.parameters)==null?void 0:s.docs,source:{originalSource:"{}",...(i=(o=e.parameters)==null?void 0:o.docs)==null?void 0:i.source}}};const m=["Playground"];export{e as Playground,m as __namedExportsOrder,h as default};
