@prozorro/prozorro-ui 0.0.6-beta → 0.0.8-beta

package/dist/app/assets/PzTabs.stories-CEoVVF4Z.js

@@ -0,0 +1,594 @@
+import{_ as q,P as T}from"./PzText-LfRr6NF7.js";import{d as M,S as f,L as Q,U as X,M as Y,V as G,W as J,e as m,r as F,i as Z,o as u,X as K,E as tt,y as _,F as at,I as st,n as et,f as S,P as nt,g as rt,t as pt,Y as P}from"./iframe-XnrfGA2g.js";import"./preload-helper-C1FmrZbK.js";const ot=["","light"];var r=(t=>(t.INIT_TAB="init-tab",t.TABS_STATE="tabs-state",t.REMOVE_TAB="remove-tab",t))(r||{});const it={class:"pz-tab"},x=M({name:"PzTab",__name:"PzTab",props:{name:{default:"Tab"},selected:{type:Boolean,default:!1},id:{default:void 0}},setup(t){const a=t,p=K(),i=Z(!1),o=f(r.REMOVE_TAB,void 0),s=f(r.TABS_STATE,void 0),e=f(r.INIT_TAB,void 0),n={get id(){return a.id??`pz-tab-${(p==null?void 0:p.uid)??a.name}`},get name(){return a.name}};return Q(()=>s==null?void 0:s.activeTab,z=>{i.value=a.name===z}),X(()=>{e==null||e(n),i.value=a.selected}),Y(()=>o==null?void 0:o(n)),(z,mt)=>G((u(),m("div",it,[F(z.$slots,"default",{},void 0,!0)],512)),[[J,i.value]])}}),h=q(x,[["__scopeId","data-v-2cffa4a1"]]);x.__docgenInfo=Object.assign({displayName:x.name??x.__name},{name:"PzTab",exportName:"default",displayName:"PzTab",description:"",tags:{},props:[{name:"name",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'"Tab"'}},{name:"selected",required:!1,type:{name:"boolean"},defaultValue:{func:!1,value:"false"}},{name:"id",required:!1,type:{name:"string"},defaultValue:{func:!1,value:"undefined"}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzTabs/PzTab.vue"]});const lt={class:"pz-tabs__nav"},zt=["onClick"],bt={class:"pz-tabs__content"},g=M({name:"PzTabs",__name:"PzTabs",props:{skin:{default:""},maxWidth:{default:""}},setup(t){const a=nt({tabs:[],activeTab:""}),p=t,i=rt(()=>p.skin?`pz-tabs--${p.skin}`:"");P(r.TABS_STATE,a),P(r.INIT_TAB,s=>a.tabs.push(s)),P(r.REMOVE_TAB,s=>{a.tabs=a.tabs.filter(e=>e.id!==s.id),o()}),tt(()=>o());const o=()=>{var e;const[{name:s}={name:""}]=a.tabs.filter(({selected:n})=>n);a.activeTab=s||((e=a.tabs[0])==null?void 0:e.name)||""};return(s,e)=>(u(),m("div",{class:S(["pz-tabs",i.value]),style:et({maxWidth:t.maxWidth})},[_("ul",lt,[(u(!0),m(at,null,st(a.tabs,n=>(u(),m("li",{key:n.id,class:S(["pz-tabs__item",{active:a.activeTab===n.name}]),onClick:z=>a.activeTab=n.name||""},pt(n.name),11,zt))),128))]),_("div",bt,[F(s.$slots,"default",{},void 0,!0)])],6))}}),l=q(g,[["__scopeId","data-v-f64a88aa"]]);g.__docgenInfo=Object.assign({displayName:g.name??g.__name},{name:"PzTabs",exportName:"default",displayName:"PzTabs",description:"",tags:{},props:[{name:"skin",required:!1,type:{name:"PzTabsSkin"},defaultValue:{func:!1,value:'""'}},{name:"maxWidth",required:!1,type:{name:"string"},defaultValue:{func:!1,value:'""'}}],slots:[{name:"default"}],sourceFiles:["/builds/Web-Projects/client-services/prozorro-ui/src/components/PzTabs/PzTabs.vue"]});const dt=t=>[t.skin?`skin="${t.skin}"`:null,t.maxWidth?`max-width="${t.maxWidth}"`:null].filter(a=>!!a).join(" "),ct=t=>`<template>
+  <PzTabs ${dt(t)}>
+    <PzTab name="${t.currentEditionLabel}" selected>
+      Current content
+    </PzTab>
+    <PzTab name="${t.historyLabel}">
+      History content
+    </PzTab>
+  </PzTabs>
+</template>`,R=()=>`<template>
+  <PzTabs skin="light" max-width="720px">
+    <PzTab name="Огляд" selected>
+      Summary content
+    </PzTab>
+    <PzTab name="Документи">
+      Documents content
+    </PzTab>
+    <PzTab name="Питання">
+      Questions content
+    </PzTab>
+  </PzTabs>
+</template>`,U=()=>`<template>
+  <PzTabs>
+    <PzTab name="Активні" selected>
+      Active procedures
+    </PzTab>
+    <PzTab name="Архів">
+      Archive procedures
+    </PzTab>
+  </PzTabs>
+</template>`,H=()=>`<template>
+  <PzTabs skin="light" max-width="360px">
+    <PzTab name="Файли" selected>
+      Files content
+    </PzTab>
+    <PzTab name="Історія">
+      History content
+    </PzTab>
+    <PzTab name="Нотатки">
+      Notes content
+    </PzTab>
+  </PzTabs>
+</template>`,vt=()=>`<template>
+${[R(),U(),H()].join(`
+
+`)}
+</template>`,yt={title:"Components/Layouts/PzTabs",component:l,parameters:{prototype:{caption:"Tabs component",note:"Renamed from the previous app-level tabs to the shared `PzTabs` and `PzTab` components. This version only switches local panel content and keeps the original tab props and behavior."},docs:{description:{component:"Use `PzTabs` with `PzTab` children when you need to switch content inside the same view. The API keeps the original `name`, `selected`, `id`, `skin`, and `maxWidth` properties from the legacy tabs."},source:{transform:(t,a)=>ct(a.args??yt.args)}}},args:{skin:"light",maxWidth:"840px",currentEditionLabel:"Остання редакція",historyLabel:"Історія змін"},argTypes:{skin:{control:{type:"inline-radio",labels:{"":"default",light:"light"}},options:ot,description:"Surface skin for the tabs container."},maxWidth:{control:"text",description:"Optional max-width applied to the navigation and content area."}},render:t=>({components:{pzTabs:l,pzTab:h,pzText:T},setup(){return{args:t}},template:`
+      <div class="pz-tabs-story">
+        <section class="pz-tabs-story-frame">
+          <div class="pz-tabs-story-header">
+            <div>
+              <span class="pz-tabs-story-eyebrow">Content tabs</span>
+              <pz-text variant="h4-bold">Switch panel content inside the same view</pz-text>
+            </div>
+            <span class="pz-tabs-story-chip">{{ args.skin || 'default' }}</span>
+          </div>
+
+          <pz-tabs
+            :skin="args.skin"
+            :max-width="args.maxWidth"
+          >
+            <pz-tab
+              :name="args.currentEditionLabel"
+              selected
+            >
+              <div class="pz-tabs-story-panel">
+                <div class="pz-tabs-story-panel-head">
+                  <div class="pz-tabs-story-meta">
+                    <span class="pz-tabs-story-tag">Тарас Шевченко</span>
+                    <pz-text variant="small-regular">Поезія про вечір і родинний лад</pz-text>
+                    <span class="pz-tabs-story-bullet"></span>
+                    <pz-text variant="small-regular">Фрагмент</pz-text>
+                  </div>
+                </div>
+
+                <div class="pz-tabs-story-poem">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Садок вишневий коло хати,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Хрущі над вишнями гудуть,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Плугатарі з плугами йдуть,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Співають ідучи дівчата,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">А матері вечерять ждуть.</pz-text>
+                  </div>
+
+                  <pz-text variant="small-regular" class="pz-tabs-story-note">
+                    Спокійна, світла сцена добре підходить для першої вкладки й показує, як довгий текст живе всередині компонента tabs.
+                  </pz-text>
+                </div>
+              </div>
+            </pz-tab>
+
+            <pz-tab :name="args.historyLabel">
+              <div class="pz-tabs-story-panel">
+                <div class="pz-tabs-story-panel-head">
+                  <pz-text variant="h4-semibold">Реве та стогне Дніпр широкий</pz-text>
+                  <div class="pz-tabs-story-meta">
+                    <span class="pz-tabs-story-tag">Тарас Шевченко</span>
+                    <pz-text variant="small-regular">Напружений пейзаж</pz-text>
+                    <span class="pz-tabs-story-bullet"></span>
+                    <pz-text variant="small-regular">Фрагмент</pz-text>
+                  </div>
+                </div>
+
+                <div class="pz-tabs-story-poem">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Реве та стогне Дніпр широкий,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сердитий вітер завива,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Додолу верби гне високі,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Горами хвилю підійма.</pz-text>
+                  </div>
+
+                  <pz-text variant="small-regular" class="pz-tabs-story-note">
+                    Друга вкладка контрастує настроєм і показує, як історія або альтернативний текст може виглядати в тій самій структурі.
+                  </pz-text>
+                </div>
+              </div>
+            </pz-tab>
+          </pz-tabs>
+        </section>
+
+        <section class="pz-tabs-story-gallery">
+          <div class="pz-tabs-story-header">
+            <div>
+              <span class="pz-tabs-story-eyebrow">Examples</span>
+              <pz-text variant="h4-bold">Common tab layouts for product screens</pz-text>
+            </div>
+            <span class="pz-tabs-story-chip">3 patterns</span>
+          </div>
+
+          <div class="pz-tabs-story-grid">
+            <article class="pz-tabs-story-card">
+              <div class="pz-tabs-story-example-copy">
+                <pz-text variant="body-semibold">Three tabs</pz-text>
+                <pz-text variant="small-regular">
+                  One container with three moods: quiet evening, storm, and testament.
+                </pz-text>
+              </div>
+
+              <div class="pz-tabs-story-example-surface">
+                <pz-tabs
+                  skin="light"
+                  max-width="720px"
+                >
+                  <pz-tab
+                    name="Огляд"
+                    selected
+                  >
+                    <div class="pz-tabs-story-panel">
+                      <div class="pz-tabs-story-stanza">
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Зацвіла в долині</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Червона калина,</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Ніби засміялась</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Дівчина-дитина.</pz-text>
+                      </div>
+                    </div>
+                  </pz-tab>
+
+                  <pz-tab name="Документи">
+                    <div class="pz-tabs-story-panel">
+                      <div class="pz-tabs-story-stanza">
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Тече вода з-під явора</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Яром на долину.</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Пишається над водою</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Червона калина.</pz-text>
+                      </div>
+                    </div>
+                  </pz-tab>
+
+                  <pz-tab name="Питання">
+                    <div class="pz-tabs-story-panel">
+                      <div class="pz-tabs-story-stanza">
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Як умру, то поховайте</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мене на могилі,</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Серед степу широкого,</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">На Вкраїні милій.</pz-text>
+                      </div>
+                    </div>
+                  </pz-tab>
+                </pz-tabs>
+              </div>
+            </article>
+
+            <article class="pz-tabs-story-card">
+              <div class="pz-tabs-story-example-copy">
+                <pz-text variant="body-semibold">Default skin</pz-text>
+                <pz-text variant="small-regular">
+                  Same tabs, but the preview keeps the default gray component skin while the content becomes a warm manuscript block.
+                </pz-text>
+              </div>
+
+              <div class="pz-tabs-story-example-surface">
+                <pz-tabs>
+                  <pz-tab
+                    name="Активні"
+                    selected
+                  >
+                    <div class="pz-tabs-story-panel">
+                      <div class="pz-tabs-story-stanza">
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мені тринадцятий минало.</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Я пас ягнята за селом.</pz-text>
+                      </div>
+                    </div>
+                  </pz-tab>
+
+                  <pz-tab name="Архів">
+                    <div class="pz-tabs-story-panel">
+                      <div class="pz-tabs-story-stanza">
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе сонце засіяло,</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе все на світі стало</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Моє... лани, гаї, сади!</pz-text>
+                      </div>
+                    </div>
+                  </pz-tab>
+                </pz-tabs>
+              </div>
+            </article>
+
+            <article class="pz-tabs-story-card">
+              <div class="pz-tabs-story-example-copy">
+                <pz-text variant="body-semibold">Constrained width</pz-text>
+                <pz-text variant="small-regular">
+                  Narrow example for compact blocks where tab labels may need horizontal scrolling.
+                </pz-text>
+              </div>
+
+              <div class="pz-tabs-story-example-surface">
+                <div class="pz-tabs-story-card-surface pz-tabs-story-narrow">
+                <pz-tabs
+                  skin="light"
+                  max-width="360px"
+                >
+                  <pz-tab
+                    name="Файли"
+                    selected
+                  >
+                    <div class="pz-tabs-story-panel">
+                      <div class="pz-tabs-story-stanza">
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Думи мої, думи мої,</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Лихо мені з вами!</pz-text>
+                      </div>
+                    </div>
+                  </pz-tab>
+
+                  <pz-tab name="Історія">
+                    <div class="pz-tabs-story-panel">
+                      <div class="pz-tabs-story-stanza">
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Нащо стали на папері</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сумними рядами?..</pz-text>
+                      </div>
+                    </div>
+                  </pz-tab>
+
+                  <pz-tab name="Нотатки">
+                    <div class="pz-tabs-story-panel">
+                      <div class="pz-tabs-story-stanza">
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Чом вас вітер не розвіяв</pz-text>
+                        <pz-text variant="body-regular" class="pz-tabs-story-poem-line">В степу, як пилину?</pz-text>
+                      </div>
+                    </div>
+                  </pz-tab>
+                </pz-tabs>
+                </div>
+              </div>
+            </article>
+          </div>
+        </section>
+      </div>
+    `})},b={},d={parameters:{docs:{source:{code:R()}}},render:()=>({components:{pzTabs:l,pzTab:h,pzText:T},template:`
+      <div class="pz-tabs-story">
+        <section class="pz-tabs-story-frame">
+          <div class="pz-tabs-story-header">
+            <div>
+              <span class="pz-tabs-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Three tabs layout</pz-text>
+            </div>
+            <span class="pz-tabs-story-chip">Light</span>
+          </div>
+
+          <div class="pz-tabs-story-card-surface">
+            <pz-tabs
+              skin="light"
+              max-width="720px"
+            >
+              <pz-tab
+                name="Огляд"
+                selected
+              >
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Садок вишневий коло хати,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Хрущі над вишнями гудуть.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Документи">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Реве та стогне Дніпр широкий,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сердитий вітер завива.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Питання">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Як умру, то поховайте</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мене на могилі.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+            </pz-tabs>
+          </div>
+        </section>
+      </div>
+    `})},c={parameters:{docs:{source:{code:U()}}},render:()=>({components:{pzTabs:l,pzTab:h,pzText:T},template:`
+      <div class="pz-tabs-story">
+        <section class="pz-tabs-story-frame">
+          <div class="pz-tabs-story-header">
+            <div>
+              <span class="pz-tabs-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Default skin surface</pz-text>
+            </div>
+            <span class="pz-tabs-story-chip">Default</span>
+          </div>
+
+          <div class="pz-tabs-story-card-surface">
+            <pz-tabs>
+              <pz-tab
+                name="Активні"
+                selected
+              >
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мені тринадцятий минало,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Я пас ягнята за селом.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Архів">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе сонце засіяло,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе все на світі стало моє.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+            </pz-tabs>
+          </div>
+        </section>
+      </div>
+    `})},v={parameters:{docs:{source:{code:H()}}},render:()=>({components:{pzTabs:l,pzTab:h,pzText:T},template:`
+      <div class="pz-tabs-story">
+        <section class="pz-tabs-story-frame">
+          <div class="pz-tabs-story-header">
+            <div>
+              <span class="pz-tabs-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Constrained width tabs</pz-text>
+            </div>
+            <span class="pz-tabs-story-chip">360px</span>
+          </div>
+
+          <div class="pz-tabs-story-card-surface pz-tabs-story-narrow">
+            <pz-tabs
+              skin="light"
+              max-width="360px"
+            >
+              <pz-tab
+                name="Файли"
+                selected
+              >
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Думи мої, думи мої,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Лихо мені з вами!</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Історія">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Нащо стали на папері</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сумними рядами?..</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Нотатки">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Чом вас вітер не розвіяв</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">В степу, як пилину?</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+            </pz-tabs>
+          </div>
+        </section>
+      </div>
+    `})},y={parameters:{docs:{source:{code:vt()}}}};var k,w,E;b.parameters={...b.parameters,docs:{...(k=b.parameters)==null?void 0:k.docs,source:{originalSource:"{}",...(E=(w=b.parameters)==null?void 0:w.docs)==null?void 0:E.source}}};var A,B,C;d.parameters={...d.parameters,docs:{...(A=d.parameters)==null?void 0:A.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      source: {
+        code: buildThreeTabsStorySource()
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzTabs: PzTabs,
+      pzTab: PzTab,
+      pzText: PzText
+    },
+    template: \`
+      <div class="pz-tabs-story">
+        <section class="pz-tabs-story-frame">
+          <div class="pz-tabs-story-header">
+            <div>
+              <span class="pz-tabs-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Three tabs layout</pz-text>
+            </div>
+            <span class="pz-tabs-story-chip">Light</span>
+          </div>
+
+          <div class="pz-tabs-story-card-surface">
+            <pz-tabs
+              skin="light"
+              max-width="720px"
+            >
+              <pz-tab
+                name="Огляд"
+                selected
+              >
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Садок вишневий коло хати,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Хрущі над вишнями гудуть.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Документи">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Реве та стогне Дніпр широкий,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сердитий вітер завива.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Питання">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Як умру, то поховайте</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мене на могилі.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+            </pz-tabs>
+          </div>
+        </section>
+      </div>
+    \`
+  })
+}`,...(C=(B=d.parameters)==null?void 0:B.docs)==null?void 0:C.source}}};var W,N,D;c.parameters={...c.parameters,docs:{...(W=c.parameters)==null?void 0:W.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      source: {
+        code: buildDefaultSkinStorySource()
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzTabs: PzTabs,
+      pzTab: PzTab,
+      pzText: PzText
+    },
+    template: \`
+      <div class="pz-tabs-story">
+        <section class="pz-tabs-story-frame">
+          <div class="pz-tabs-story-header">
+            <div>
+              <span class="pz-tabs-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Default skin surface</pz-text>
+            </div>
+            <span class="pz-tabs-story-chip">Default</span>
+          </div>
+
+          <div class="pz-tabs-story-card-surface">
+            <pz-tabs>
+              <pz-tab
+                name="Активні"
+                selected
+              >
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Мені тринадцятий минало,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Я пас ягнята за селом.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Архів">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе сонце засіяло,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Неначе все на світі стало моє.</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+            </pz-tabs>
+          </div>
+        </section>
+      </div>
+    \`
+  })
+}`,...(D=(N=c.parameters)==null?void 0:N.docs)==null?void 0:D.source}}};var I,$,L;v.parameters={...v.parameters,docs:{...(I=v.parameters)==null?void 0:I.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      source: {
+        code: buildNarrowStorySource()
+      }
+    }
+  },
+  render: () => ({
+    components: {
+      pzTabs: PzTabs,
+      pzTab: PzTab,
+      pzText: PzText
+    },
+    template: \`
+      <div class="pz-tabs-story">
+        <section class="pz-tabs-story-frame">
+          <div class="pz-tabs-story-header">
+            <div>
+              <span class="pz-tabs-story-eyebrow">Example</span>
+              <pz-text variant="h4-bold">Constrained width tabs</pz-text>
+            </div>
+            <span class="pz-tabs-story-chip">360px</span>
+          </div>
+
+          <div class="pz-tabs-story-card-surface pz-tabs-story-narrow">
+            <pz-tabs
+              skin="light"
+              max-width="360px"
+            >
+              <pz-tab
+                name="Файли"
+                selected
+              >
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Думи мої, думи мої,</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Лихо мені з вами!</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Історія">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Нащо стали на папері</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Сумними рядами?..</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+
+              <pz-tab name="Нотатки">
+                <div class="pz-tabs-story-panel">
+                  <div class="pz-tabs-story-stanza">
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">Чом вас вітер не розвіяв</pz-text>
+                    <pz-text variant="body-regular" class="pz-tabs-story-poem-line">В степу, як пилину?</pz-text>
+                  </div>
+                </div>
+              </pz-tab>
+            </pz-tabs>
+          </div>
+        </section>
+      </div>
+    \`
+  })
+}`,...(L=($=v.parameters)==null?void 0:$.docs)==null?void 0:L.source}}};var V,O,j;y.parameters={...y.parameters,docs:{...(V=y.parameters)==null?void 0:V.docs,source:{originalSource:`{
+  parameters: {
+    docs: {
+      source: {
+        code: buildExamplesStorySource()
+      }
+    }
+  }
+}`,...(j=(O=y.parameters)==null?void 0:O.docs)==null?void 0:j.source}}};const Tt=["Playground","ThreeTabs","DefaultSkin","ConstrainedWidth","Examples"];export{v as ConstrainedWidth,c as DefaultSkin,y as Examples,b as Playground,d as ThreeTabs,Tt as __namedExportsOrder,yt as default};

package/dist/app/assets/PzTag-rwtmuhv6.css

@@ -0,0 +1 @@
+.pz-tag-story{display:grid;gap:var(--pz-space-24)}.pz-tag-story-board,.pz-tag-story-gallery{display:grid;gap:var(--pz-space-16);padding:var(--pz-space-24);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 72%,transparent);border-radius:var(--pz-space-24);background:radial-gradient(circle at top right,color-mix(in srgb,var(--pz-color-blue-50) 8%,transparent),transparent 34%),linear-gradient(180deg,color-mix(in srgb,var(--pz-color-white) 98%,transparent),color-mix(in srgb,var(--pz-color-grey-20) 90%,var(--pz-color-white)));box-shadow:0 18px 48px color-mix(in srgb,var(--pz-color-black-90) 7%,transparent),inset 0 1px color-mix(in srgb,var(--pz-color-white) 96%,transparent)}.pz-tag-story-header{display:flex;align-items:start;justify-content:space-between;gap:var(--pz-space-16)}.pz-tag-story-eyebrow,.pz-tag-story-chip{display:inline-flex;align-items:center;width:fit-content;padding:var(--pz-space-8) var(--pz-space-16);border-radius:999px;background:color-mix(in srgb,var(--pz-color-blue-10) 92%,var(--pz-color-white));color:var(--pz-color-text-link-hover);font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase}.pz-tag-story-preview{display:grid;place-items:center;min-height:180px;padding:var(--pz-space-24);border:1px dashed color-mix(in srgb,var(--pz-color-grey-40) 70%,transparent);border-radius:var(--pz-space-20);background:linear-gradient(color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px),linear-gradient(90deg,color-mix(in srgb,var(--pz-color-blue-50) 4%,transparent) 1px,transparent 1px);background-size:28px 28px}.pz-tag-story-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--pz-space-16)}.pz-tag-story-card{display:grid;gap:var(--pz-space-12);padding:var(--pz-space-20);border:1px solid color-mix(in srgb,var(--pz-color-grey-30) 74%,transparent);border-radius:var(--pz-space-20);background:color-mix(in srgb,var(--pz-color-white) 94%,transparent);box-shadow:0 12px 32px color-mix(in srgb,var(--pz-color-black-90) 5%,transparent)}.pz-tag-story-row{display:flex;align-items:center;gap:var(--pz-space-8);flex-wrap:wrap}.pz-tag-story-code{margin:0;font-size:var(--pz-font-size-12);color:var(--pz-color-text-secondary)}@media (width <= 768px){.pz-tag-story-grid{grid-template-columns:1fr}.pz-tag-story-header{flex-direction:column}}.pz-tag[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-grey);--pz-tag-gap: var(--pz-space-4);display:inline-flex;align-items:center;gap:var(--pz-tag-gap);padding:4px 8px;border-radius:3px 12px 12px 3px;background:var(--pz-tag-background);color:var(--pz-tag-color);vertical-align:middle;font-size:var(--pz-font-size-12);font-weight:600;line-height:1.5}.pz-tag--grey[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-grey)}.pz-tag--grey-light[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-grey-light)}.pz-tag--blue[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-blue)}.pz-tag--green[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-green)}.pz-tag--red[data-v-7a827d32]{--pz-tag-background: var(--pz-color-tag-red)}.pz-tag-prefix[data-v-7a827d32],.pz-tag-suffix[data-v-7a827d32]{display:inline-flex;align-items:center;justify-content:center}.pz-tag-label[data-v-7a827d32]{min-width:0}.pz-tag-prefix[data-v-7a827d32] .pz-icon,.pz-tag-suffix[data-v-7a827d32] .pz-icon{--pz-icon-size: var(--pz-font-size-12);--pz-icon-color: currentcolor}