// Generated by scripts/generate-showcase.mjs. Do not edit directly.
page DataShowcase {
  layout = "showcase"
  seo {
    title = "Data components"
    description = "3 data components from @wrnexus/ui."
  }
  view {
    <header class="showcase-hero showcase-hero--category">
      <span class="showcase-eyebrow">Component category</span>
      <h1 class="showcase-title">Data</h1>
      <p class="showcase-description">3 unique, responsive, theme-aware components. Open a component to inspect multiple live configurations and its complete props API.</p>
      <div class="category-meta"><span>3 components</span><span>Multiple use cases</span><span>9 live configurations</span></div>
    </header>
    <div class="catalog-grid">
      <article class="catalog-card" data-interactive-preview="false">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><MetricCard label="Availability" value="99.9" description="Target service availability." icon="icon-[lucide--activity]" suffix="%" trend="Stable" trendLabel="30 days" trendDirection="positive" progress="-1" progressLabel="Metric Card" href="#status" external="false" actionLabel="Open status" showArrow="true" selectable="false" disabled="false" size="default" color="success" variant="default" align="start" class="showcase-instance showcase-instance--1" /></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Data</span><h2>Metric Card</h2><p>Display one operational metric with value, suffix, description, icon, trend, progress, and optional action.</p></div>
          <div class="catalog-card-footer"><span>28 props · 2 slots</span><a href="/components/metric-card">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card" data-interactive-preview="false">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><MetricGrid items='[{"label":"Public services","value":"24","description":"Citizen-facing services available online.","icon":"icon-[lucide--hand-heart]","trend":"+4","trendLabel":"this release","trendDirection":"up","color":"primary"},{"label":"Police stations","value":"126","description":"Searchable station and jurisdiction entries.","icon":"icon-[lucide--landmark]","trend":"Updated","trendLabel":"today","color":"info"},{"label":"Availability","value":"99.9","suffix":"%","description":"Target service availability.","icon":"icon-[lucide--activity]","trend":"Stable","trendLabel":"30 days","trendDirection":"positive","color":"success"}]' columns="3" tabletColumns="2" mobileColumns="1" gap="lg" equalHeight="true" dividers="false" size="default" variant="default" maxWidth="full" class="showcase-instance showcase-instance--1" /></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Data</span><h2>Metric Grid</h2><p>Arrange operational metrics, KPIs, public statistics, or service indicators in a responsive equal-height grid.</p></div>
          <div class="catalog-card-footer"><span>13 props · 1 slots</span><a href="/components/metric-grid">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article>
      <article class="catalog-card" data-interactive-preview="false">
        <div class="catalog-card-preview">
          <div class="catalog-card-glow" aria-hidden="true"></div>
          <div class="catalog-card-stage"><StatsBar items='[{"label":"Composite components","value":"18","description":"Reusable public-page building blocks","icon":"icon-[lucide--blocks]","color":"primary"},{"label":"Rendering","value":"SSR","description":"Server-first WRNexusJS rendering","icon":"icon-[lucide--server]","color":"info"},{"label":"Responsive","value":"Yes","description":"Mobile, tablet, and desktop layouts","icon":"icon-[lucide--monitor-smartphone]","color":"success"},{"label":"Theme aware","value":"Yes","description":"Active theme and accent palettes","icon":"icon-[lucide--palette]","color":"warning"}]' columns="4" compact="true" dividers="true" icons="true" size="default" variant="raised" maxWidth="xl" class="showcase-instance showcase-instance--1" /></div>
        </div>
        <div class="catalog-card-body">
          <div><span class="catalog-card-category">Data</span><h2>Stats Bar</h2><p>Present a compact responsive strip of key facts, counts, performance indicators, or trust signals.</p></div>
          <div class="catalog-card-footer"><span>10 props · 0 slots</span><a href="/components/stats-bar">Explore component <span aria-hidden="true">→</span></a></div>
        </div>
      </article></div>
  }
}
