import{_ as i}from"./PzIcon-cRuuou9i.js";import{P as l}from"./PzText-D5PUnIjq.js";import{P as r}from"./PzHint-DsiQRpYG.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";import"./floating-vue-C5xzxu-B.js";import"./floating-vue-ByDoVj13.js";const c=t=>`<template>
  <PzHint
    ${[t.wrapperClass?`wrapper-class="${t.wrapperClass}"`:null,t.containerWrapperClass?`container-wrapper-class="${t.containerWrapperClass}"`:null,t.theme&&t.theme!=="tooltip"?`theme="${t.theme}"`:null,t.placement&&t.placement!=="top"?`placement="${t.placement}"`:null].filter(s=>!!s).join(`
    `)}
  >
    <button type="button" class="pz-hint-story-trigger">
      ${t.triggerLabel??"Hover me"}
      <PzIcon name="help" size="16" />
    </button>

    <template #content>
      <div class="pz-hint-story-content">
        <strong>${t.title??"Tooltip title"}</strong>
        <p>${t.body??"A short explanatory hint that should stay compact and readable."}</p>
      </div>
    </template>
  </PzHint>
</template>`,d={title:"Components/Popups/PzHint",component:r,parameters:{prototype:{caption:"Hint component",note:"Hover/focus tooltip wrapper for small inline explanations. The shared theme keeps light and dark popups consistent across the system."},docs:{description:{component:"Use `PzHint` for inline helper text, hover explanations, or micro-copy that should appear near the trigger element. The `content` slot contains the popper body."},source:{transform:(t,o)=>c(o.args??d.args)}}},args:{placement:"top-start",theme:"tooltip",wrapperClass:"",containerWrapperClass:"",triggerLabel:"Hover to inspect",title:"Tender deadline",body:"The scheduled end date is displayed in local time and follows the procurement timeline."},argTypes:{theme:{control:"select",options:["tooltip","dark-tooltip"],description:"Visual theme applied to the floating popper."},placement:{control:"select",options:["top","top-start"],description:"Tooltip placement relative to the trigger."},wrapperClass:{control:"text",description:"Additional class applied to the popper wrapper."},containerWrapperClass:{control:"text",description:"Additional class applied to the outer trigger container."},triggerLabel:{control:"text",description:"Trigger label used in the preview.",table:{category:"Slots"}},title:{control:"text",description:"Popper title text used in the preview.",table:{category:"Slots"}},body:{control:"text",description:"Popper body text used in the preview.",table:{category:"Slots"}}},render:t=>({components:{pzHint:r,pzIcon:i,pzText:l},setup(){return{args:t}},template:`
      <section class="pz-hint-story">
        <div class="pz-hint-story-header">
          <div>
            <span class="pz-hint-story-eyebrow">Component API</span>
            <pz-text variant="h4-bold">Inline hover explanation</pz-text>
          </div>
          <span class="pz-hint-story-chip">{{ args.placement }}</span>
        </div>

        <div class="pz-hint-story-preview">
          <pz-hint
            :wrapper-class="args.wrapperClass"
            :container-wrapper-class="args.containerWrapperClass"
            :theme="args.theme"
            :placement="args.placement"
          >
            <button type="button" class="pz-hint-story-trigger">
              <span>{{ args.triggerLabel }}</span>
              <pz-icon name="help" size="16" />
            </button>

            <template #content>
              <div class="pz-hint-story-content">
                <strong>{{ args.title }}</strong>
                <p>{{ args.body }}</p>
              </div>
            </template>
          </pz-hint>
        </div>

        <div class="pz-hint-story-gallery">
          <div class="pz-hint-story-surface">
            <pz-text variant="body-regular">
              Use the shared tooltip theme for compact guidance, field help, or explanatory labels.
            </pz-text>
          </div>
          <div class="pz-hint-story-surface pz-hint-story-surface-dark">
            <pz-hint
              theme="dark-tooltip"
              placement="top"
            >
              <button type="button" class="pz-hint-story-trigger">
                <span>Dark tooltip</span>
                <pz-icon name="help" size="16" />
              </button>

              <template #content>
                <div class="pz-hint-story-content">
                  <strong>Dark surface</strong>
                  <p>Useful on dense or contrasting backgrounds where a lower-key popover reads better.</p>
                </div>
              </template>
            </pz-hint>
          </div>
        </div>
      </section>
    `})},e={};var p,n,a;e.parameters={...e.parameters,docs:{...(p=e.parameters)==null?void 0:p.docs,source:{originalSource:"{}",...(a=(n=e.parameters)==null?void 0:n.docs)==null?void 0:a.source}}};const x=["Playground"];export{e as Playground,x as __namedExportsOrder,d as default};
