Add screenshots package and fix card-gradient minify bug (#2793)

Co-authored-by: Bartek <xbartoszdobija@gmail.com>

shared/components/cards/AuthenticateAccount.astro

@@ -0,0 +1,72 @@
+---
+import FormFooter from '@ui/FormFooter.astro'
+import Button from '@ui/Button.astro'
+import ButtonList from '@ui/ButtonList.astro'
+import CaptureScript from '../CaptureScript.astro'
+---
+
+<form class="card card-md" action="#" method="get" autocomplete="off" novalidate>
+  <div class="card-body">
+    <h2 class="card-title card-title-lg text-center mb-4">Authenticate Your Account</h2>
+
+    <p class="my-4 text-center">
+      Please confirm your account by entering the authorization code sent to <strong>+1 856-672-8552</strong>.
+    </p>
+
+    <div class="my-5">
+      <div class="row g-4">
+        {
+          Array.from({ length: 2 }).map(() => (
+            <div class="col">
+              <div class="row g-2">
+                {Array.from({ length: 3 }).map(() => (
+                  <div class="col">
+                    <input type="text" class="form-control form-control-lg text-center px-3 py-3" maxlength="1" inputmode="numeric" pattern="[0-9]*" data-code-input />
+                  </div>
+                ))}
+              </div>
+            </div>
+          ))
+        }
+      </div>
+    </div>
+
+    <div class="my-4">
+      <label class="form-check">
+        <input type="checkbox" class="form-check-input" />
+        Don't ask for codes again on this device
+      </label>
+    </div>
+
+    <FormFooter>
+      <ButtonList class="flex-nowrap">
+        <Button text="Cancel" block href="#" />
+        <Button text="Verify" block color="primary" />
+      </ButtonList>
+    </FormFooter>
+  </div>
+</form>
+
+<CaptureScript>
+  <!-- BEGIN CODE INPUT SCRIPT -->
+  <script is:inline>
+    const inputs = document.querySelectorAll('[data-code-input]')
+
+    inputs.forEach((input, i) => {
+      input.addEventListener('input', (e) => {
+        const target = e.target
+        if (target.value.length === target.maxLength && i + 1 < inputs.length) {
+          inputs[i + 1].focus()
+        }
+      })
+
+      input.addEventListener('keydown', (e) => {
+        const target = e.target
+        if (target.value.length === 0 && e.key === 'Backspace' && i > 0) {
+          inputs[i - 1].focus()
+        }
+      })
+    })
+  </script>
+  <!-- END CODE INPUT SCRIPT -->
+</CaptureScript>

shared/components/cards/CarouselCard.astro

@@ -2,6 +2,7 @@
 // Photos filtered to horizontal=true, then sliced by offset/limit.
 import photos from '@data/photos.json'
 import CardTitle from '@ui/CardTitle.astro'
+import Carousel from '@ui/Carousel.astro'
 
 interface Props {
   id?: string

shared/components/cards/StatusMonitoring.astro

@@ -0,0 +1,72 @@
+---
+import Subheader from '@ui/Subheader.astro'
+import Trending from '@ui/Trending.astro'
+
+interface TrackingItem {
+  status?: 'success' | 'warning' | 'danger'
+  label: string
+}
+
+// Mirrors the uptime history shown in docs/pages/ui/components/tracking.mdx.
+const uptime: TrackingItem[] = [
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'danger', label: 'Downtime' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'warning', label: 'Big load' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'danger', label: 'Downtime' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { label: 'No data' },
+  { label: 'No data' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+  { status: 'success', label: 'Operational' },
+]
+---
+
+<div class="card">
+  <div class="card-body">
+    <div class="d-flex align-items-center">
+      <Subheader>Status monitoring</Subheader>
+      <div class="ms-auto lh-1">
+        <div class="dropdown">
+          <a class="dropdown-toggle text-secondary" href="#" data-bs-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Current month </a>
+          <div class="dropdown-menu dropdown-menu-end">
+            <a class="dropdown-item active" href="#">Current month</a>
+            <a class="dropdown-item" href="#">Last month</a>
+            <a class="dropdown-item" href="#">Last 3 months</a>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="d-flex align-items-baseline">
+      <div class="h1 mb-3 me-2">99.5%</div>
+      <div class="me-auto">
+        <Trending value={2} />
+      </div>
+    </div>
+    <div class="mt-2">
+      <div class="tracking">
+        {uptime.map((item) => <div class:list={['tracking-block', item.status && `bg-${item.status}`]} data-bs-toggle="tooltip" data-bs-placement="top" title={item.label} />)}
+      </div>
+    </div>
+  </div>
+</div>

shared/components/cards/charts/ConversionRate.astro

@@ -0,0 +1,24 @@
+---
+import Subheader from '@ui/Subheader.astro'
+import DropdownDays from '@ui/DropdownDays.astro'
+import Trending from '@ui/Trending.astro'
+import Progress from '@ui/Progress.astro'
+---
+
+<div class="card">
+  <div class="card-body">
+    <div class="d-flex align-items-center">
+      <Subheader>Conversion rate</Subheader>
+      <div class="ms-auto lh-1">
+        <DropdownDays id="conversion-rate" label="Select time range for conversion rate" />
+      </div>
+    </div>
+    <div class="d-flex align-items-baseline">
+      <div class="h1 mb-3 me-2">42.8%</div>
+      <div class="me-auto">
+        <Trending value={5} />
+      </div>
+    </div>
+    <Progress value={43} color="primary" size="sm" />
+  </div>
+</div>

shared/components/cards/charts/CryptoPrice.astro

@@ -0,0 +1,11 @@
+---
+import Subheader from '@ui/Subheader.astro'
+import Chart from '@ui/Chart.astro'
+---
+
+<div class="card">
+  <div class="card-body">
+    <Subheader>LTC/BTC</Subheader>
+    <Chart chartId="dashboard-crypto-candlestick" height={12} label="LTC/BTC" />
+  </div>
+</div>

shared/components/cards/charts/SalesOverview.astro

@@ -0,0 +1,26 @@
+---
+import Subheader from '@ui/Subheader.astro'
+import Chart from '@ui/Chart.astro'
+import Legend from '@ui/Legend.astro'
+---
+
+<div class="card">
+  <div class="card-body">
+    <div class="d-flex align-items-start justify-content-between gap-3 mb-2">
+      <div class="mb-3">
+        <Subheader>Sales overview</Subheader>
+        <div class="d-flex align-items-baseline gap-2 mt-1">
+          <div class="h1 mb-0">$284,300</div>
+          <div class="text-green fw-medium">+12.4%</div>
+        </div>
+      </div>
+
+      <div class="d-flex align-items-center gap-3">
+        <Legend color="primary">This year</Legend>
+        <Legend color="secondary">Last year</Legend>
+      </div>
+    </div>
+
+    <Chart chartId="sales-overview" height={15} label="Sales overview" />
+  </div>
+</div>

shared/components/cards/charts/TrafficSources.astro

@@ -0,0 +1,11 @@
+---
+import Subheader from '@ui/Subheader.astro'
+import Chart from '@ui/Chart.astro'
+---
+
+<div class="card">
+  <div class="card-body">
+    <Subheader>Traffic sources</Subheader>
+    <Chart chartId="traffic-sources-donut" height={12} label="Traffic sources" />
+  </div>
+</div>

shared/components/cards/charts/WeeklyActivity.astro

@@ -0,0 +1,11 @@
+---
+import Subheader from '@ui/Subheader.astro'
+import Chart from '@ui/Chart.astro'
+---
+
+<div class="card">
+  <div class="card-body">
+    <Subheader>Weekly activity</Subheader>
+    <Chart chartId="activity-heatmap" height={12} label="Weekly activity" />
+  </div>
+</div>