import{p as r}from"./configs-B15JgQZ-.js";import{P as o}from"./PzDate-BGdKm7KY.js";import"./iframe-Bl-fVlm8.js";import"./preload-helper-C1FmrZbK.js";import"./_plugin-vue_export-helper-DlAUqK2U.js";const i="2026-05-06T15:37:37.682718+03:00",p=["YYYY","MM YYYY","DD MM YYYY","DD MM YYYY HH:mm","DD MM YYYY HH:mm:ss"],d=["2026-01-15T10:00:00+02:00","2026-02-15T10:00:00+02:00","2026-03-15T10:00:00+02:00","2026-04-15T10:00:00+03:00","2026-05-15T10:00:00+03:00","2026-06-15T10:00:00+03:00","2026-07-15T10:00:00+03:00","2026-08-15T10:00:00+03:00","2026-09-15T10:00:00+03:00","2026-10-15T10:00:00+03:00","2026-11-15T10:00:00+02:00","2026-12-15T10:00:00+02:00"],x={title:"Components/Display/PzDate",component:o,parameters:{docs:{description:{component:"Renders an ISO 8601 datetime string as a localised Ukrainian date and time. Default output format: `6 травня 2026 • 15:37`. Uses `Intl.DateTimeFormat` with the `uk-UA` locale for correct genitive month names. When the format includes a time portion the date and time render as two visual blocks separated by a coloured dot."}}},args:{date:i,typography:void 0},argTypes:{typography:{control:"select",options:[void 0,...r],description:"Overrides typography using a PzText variant."}}},e={parameters:{docs:{description:{story:"Every supported usage of `PzDate` rendered on one page: each format variant against the same source datetime, plus a gallery of all 12 Ukrainian genitive month names."}}},render:s=>({components:{pzDate:o},setup(){return{args:s,sampleDate:i,formats:p,monthDates:d}},template:`
      <div style="display: flex; flex-direction: column; gap: 32px; font-family: inherit;">
        <section>
          <h3 style="margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #242638;">Format variants</h3>
          <p style="margin: 0 0 16px; font-size: 12px; color: #666;">
            Same datetime ({{ sampleDate }}) rendered with each available <code>format</code> value.
          </p>
          <div style="display: flex; flex-direction: column; gap: 8px;">
            <div
              v-for="f in formats"
              :key="f"
              style="display: flex; align-items: center; gap: 16px;"
            >
              <code style="min-width: 220px; font-size: 12px; color: #666;">format="{{ f }}"</code>
              <pz-date :date="sampleDate" :format="f" :typography="args.typography" />
            </div>
          </div>
        </section>

        <section>
          <h3 style="margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #242638;">Month gallery</h3>
          <p style="margin: 0 0 16px; font-size: 12px; color: #666;">
            All 12 months in Ukrainian genitive form (default format <code>DD MM YYYY HH:mm</code>).
          </p>
          <div style="display: flex; flex-direction: column; gap: 8px;">
            <pz-date v-for="d in monthDates" :key="d" :date="d" />
          </div>
        </section>

        <section>
          <h3 style="margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #242638;">Edge cases</h3>
          <div style="display: flex; flex-direction: column; gap: 8px;">
            <div style="display: flex; align-items: center; gap: 16px;">
              <code style="min-width: 220px; font-size: 12px; color: #666;">empty string</code>
              <pz-date date="" />
            </div>
            <div style="display: flex; align-items: center; gap: 16px;">
              <code style="min-width: 220px; font-size: 12px; color: #666;">invalid string</code>
              <pz-date date="not-a-date" />
            </div>
            <div style="display: flex; align-items: center; gap: 16px;">
              <code style="min-width: 220px; font-size: 12px; color: #666;">space separator</code>
              <pz-date date="2026-05-06 15:37:37" />
            </div>
          </div>
        </section>
      </div>
    `})};var t,n,a;e.parameters={...e.parameters,docs:{...(t=e.parameters)==null?void 0:t.docs,source:{originalSource:`{
  parameters: {
    docs: {
      description: {
        story: "Every supported usage of \`PzDate\` rendered on one page: each format variant against the same source datetime, plus a gallery of all 12 Ukrainian genitive month names."
      }
    }
  },
  render: (args: PzDateProps) => ({
    components: {
      pzDate: PzDate
    },
    setup() {
      return {
        args,
        sampleDate: SAMPLE_DATE,
        formats: FORMAT_OPTIONS,
        monthDates: MONTH_DATES
      };
    },
    template: \`
      <div style="display: flex; flex-direction: column; gap: 32px; font-family: inherit;">
        <section>
          <h3 style="margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #242638;">Format variants</h3>
          <p style="margin: 0 0 16px; font-size: 12px; color: #666;">
            Same datetime ({{ sampleDate }}) rendered with each available <code>format</code> value.
          </p>
          <div style="display: flex; flex-direction: column; gap: 8px;">
            <div
              v-for="f in formats"
              :key="f"
              style="display: flex; align-items: center; gap: 16px;"
            >
              <code style="min-width: 220px; font-size: 12px; color: #666;">format="{{ f }}"</code>
              <pz-date :date="sampleDate" :format="f" :typography="args.typography" />
            </div>
          </div>
        </section>

        <section>
          <h3 style="margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #242638;">Month gallery</h3>
          <p style="margin: 0 0 16px; font-size: 12px; color: #666;">
            All 12 months in Ukrainian genitive form (default format <code>DD MM YYYY HH:mm</code>).
          </p>
          <div style="display: flex; flex-direction: column; gap: 8px;">
            <pz-date v-for="d in monthDates" :key="d" :date="d" />
          </div>
        </section>

        <section>
          <h3 style="margin: 0 0 12px; font-size: 14px; font-weight: 600; color: #242638;">Edge cases</h3>
          <div style="display: flex; flex-direction: column; gap: 8px;">
            <div style="display: flex; align-items: center; gap: 16px;">
              <code style="min-width: 220px; font-size: 12px; color: #666;">empty string</code>
              <pz-date date="" />
            </div>
            <div style="display: flex; align-items: center; gap: 16px;">
              <code style="min-width: 220px; font-size: 12px; color: #666;">invalid string</code>
              <pz-date date="not-a-date" />
            </div>
            <div style="display: flex; align-items: center; gap: 16px;">
              <code style="min-width: 220px; font-size: 12px; color: #666;">space separator</code>
              <pz-date date="2026-05-06 15:37:37" />
            </div>
          </div>
        </section>
      </div>
    \`
  })
}`,...(a=(n=e.parameters)==null?void 0:n.docs)==null?void 0:a.source}}};const g=["Playground"];export{e as Playground,g as __namedExportsOrder,x as default};
