import{P as c}from"./PzText-D5PUnIjq.js";import{_ as n}from"./PzIcon-cRuuou9i.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const l=["filled","outlined"],p=["12","16","18","20","24","32","44"],d=[{name:"info",label:"Informational state",tone:"primary"},{name:"check_circle",label:"Successful outcome",tone:"success"},{name:"warning",label:"Attention required",tone:"alert"}],m=e=>`<template>
  <PzIcon ${[`name="${e.name}"`,e.variant!=="outlined"?`variant="${e.variant}"`:null,e.size!=="16"?`size="${e.size}"`:null,e.label?`label="${e.label}"`:null].filter(r=>!!r).join(" ")} />
</template>`,z={title:"Components/Display/PzIcon",component:n,parameters:{prototype:{caption:"Icon component",note:"Material icon ligatures wrapped in a small Vue API with token-backed sizing and easy CSS overrides."},docs:{description:{component:"Use `PzIcon` for Material icons in design-system UI. The component keeps the API small, inherits custom classes and styles, and exposes CSS custom properties for size and color overrides. Find available icon names in the [Material Icons catalog](https://fonts.google.com/icons)."},source:{transform:(e,t)=>m(t.args??z.args)}}},args:{name:"account_balance",variant:"outlined",size:"24",label:"Procurement entity"},argTypes:{name:{control:"text",description:"Material icon ligature name."},variant:{control:"inline-radio",options:l,description:"Material icon font family variant."},size:{control:"select",options:p,description:"Token-backed font size for the icon."},label:{control:"text",description:"Accessible label. Leave empty for decorative icons."}},render:e=>({components:{pzIcon:n,pzText:c},setup(){return{args:e,iconReferenceItems:d}},template:`
      <div class="pz-icon-story">
        <section class="pz-icon-story-preview">
          <div class="pz-icon-story-header">
            <div>
              <span class="pz-icon-story-eyebrow">Component API</span>
              <pz-text variant="h4-bold">Token-backed Material icons</pz-text>
            </div>
            <span class="pz-icon-story-chip">{{ args.name }}</span>
          </div>

          <div class="pz-icon-story-preview-stage">
            <pz-icon
              :name="args.name"
              :variant="args.variant"
              :size="args.size"
              :label="args.label"
            />
          </div>
        </section>

        <section class="pz-icon-story-gallery">
          <div class="pz-icon-story-header">
            <div>
              <span class="pz-icon-story-eyebrow">Styling hooks</span>
              <pz-text variant="h4-bold">Class overrides still work cleanly</pz-text>
              <pz-text variant="body-regular">
                Browse icon names in
                <a
                  class="pz-text-link"
                  href="https://fonts.google.com/icons"
                  target="_blank"
                  rel="noreferrer"
                >
                  Material Icons catalog
                </a>.
              </pz-text>
            </div>
          </div>

          <div class="pz-icon-story-grid">
            <article
              v-for="item in iconReferenceItems"
              :key="item.name"
              class="pz-icon-story-card"
              :data-tone="item.tone"
            >
              <div class="pz-icon-story-card-preview">
                <pz-icon
                  :name="item.name"
                  size="24"
                  :label="item.label"
                />
                <pz-text variant="body-semibold">{{ item.label }}</pz-text>
              </div>
              <p class="pz-icon-story-code">.pz-icon { --pz-icon-color: token; --pz-icon-size: token; }</p>
            </article>
          </div>
        </section>
      </div>
    `})},o={};var a,i,s;o.parameters={...o.parameters,docs:{...(a=o.parameters)==null?void 0:a.docs,source:{originalSource:"{}",...(s=(i=o.parameters)==null?void 0:i.docs)==null?void 0:s.source}}};const g=["Playground"];export{o as Playground,g as __namedExportsOrder,z as default};
