astro-component-kit 0.3.1 → 0.4.1

package/src/components/lib/ecommerce/ProductToolbar.astro

@@ -0,0 +1,93 @@
+---
+/**
+ * ProductToolbar — Catalog heading bar: title, live result count and a sort select
+ * (built on ModernSelect) that drives FilterSidebar's sorting.
+ *
+ * @param {string} title - Page heading. Default 'All products'.
+ * @param {string} description - Optional supporting copy.
+ * @param {number} total - Initial product count. Default 0.
+ * @param {string} target - ProductGrid id. Default 'product-grid'.
+ * @param {string} filtersId - FilterSidebar form id (sort select becomes `${filtersId}-sort`). Default 'catalog-filters'.
+ * @param {Array<{label: string, value: string}>} sortOptions - Sort choices (values: featured|price-asc|price-desc|rating|name).
+ * @param {string} countLabel - Text after the count. Default 'products'.
+ * @param {string} headingLevel - Title element (h1|h2). Default 'h1'.
+ * @param {string} variant - Layout (split|stacked). Default 'split'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: the count lives in a polite live region so filter changes are announced.
+ */
+import ModernSelect from '../forms/ModernSelect.astro';
+
+interface Props {
+  title?: string;
+  description?: string;
+  total?: number;
+  target?: string;
+  filtersId?: string;
+  sortOptions?: Array<{ label: string; value: string }>;
+  countLabel?: string;
+  headingLevel?: 'h1' | 'h2';
+  variant?: 'split' | 'stacked';
+  className?: string;
+}
+
+const {
+  title = 'All products',
+  description,
+  total = 0,
+  target = 'product-grid',
+  filtersId = 'catalog-filters',
+  sortOptions = [
+    { label: 'Featured', value: 'featured' },
+    { label: 'Price: low to high', value: 'price-asc' },
+    { label: 'Price: high to low', value: 'price-desc' },
+    { label: 'Top rated', value: 'rating' },
+    { label: 'Name A–Z', value: 'name' },
+  ],
+  countLabel = 'products',
+  headingLevel = 'h1',
+  variant = 'split',
+  className = '',
+} = Astro.props;
+
+const Heading = headingLevel;
+---
+
+<div class="p-toolbar-cq">
+<div class:list={['p-toolbar', `p-toolbar--${variant}`, className]}>
+  <div class="p-toolbar__text">
+    <Heading class="p-toolbar__title">{title}</Heading>
+    {description && <p class="p-toolbar__desc">{description}</p>}
+    <p class="p-toolbar__count" aria-live="polite">
+      <span data-result-count={target}>{total}</span> {countLabel}
+    </p>
+  </div>
+  <div class="p-toolbar__sort">
+    <ModernSelect label="Sort by" id={`${filtersId}-sort`} name="sort" options={sortOptions} />
+  </div>
+</div>
+</div>
+
+<style>
+  .p-toolbar-cq { container-type: inline-size; }
+  .p-toolbar {
+    display: flex;
+    align-items: flex-end;
+    justify-content: space-between;
+    gap: var(--sp-6, 1.5rem);
+    padding-bottom: var(--sp-5, 1.25rem);
+    margin-bottom: var(--sp-6, 1.5rem);
+    border-bottom: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05));
+  }
+  .p-toolbar--stacked { flex-direction: column; align-items: stretch; }
+  .p-toolbar__title { margin: 0; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -0.035em; color: var(--c-text-1, #fff); }
+  .p-toolbar__desc { max-width: 40rem; margin: var(--sp-2, 0.5rem) 0 0; color: var(--c-text-2, #a3a3a3); }
+  .p-toolbar__count { margin: var(--sp-2, 0.5rem) 0 0; font-size: 0.85rem; color: var(--c-text-2, #a3a3a3); }
+  .p-toolbar__count span { color: var(--c-text-1, #fff); font-weight: 700; }
+  .p-toolbar__sort { width: 220px; flex-shrink: 0; }
+
+  @container (max-width: 640px) {
+    .p-toolbar { flex-direction: column; align-items: stretch; }
+    .p-toolbar__sort { width: 100%; }
+  }
+</style>

package/src/components/lib/ecommerce/PromoBar.astro

@@ -0,0 +1,145 @@
+---
+/**
+ * PromoBar — Slim announcement bar for shipping offers, sales or codes,
+ * with rotating messages and an optional dismiss button.
+ *
+ * @param {string[]} messages - One or more messages; several rotate every `interval` ms.
+ * @param {string} href - Optional link for the whole bar.
+ * @param {number} interval - Rotation interval in ms. Default 4500.
+ * @param {boolean} dismissible - Show a close button (remembered per session). Default true.
+ * @param {string} variant - Style (gold|glass|dark). Default 'gold'.
+ * @param {string} size - Height (sm|md). Default 'sm'.
+ * @param {string} storageKey - sessionStorage key for the dismissed state. Default 'ack-promo-closed'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: rotation pauses on hover/focus and is disabled with reduced motion;
+ * messages live in a polite live region only after the user interacts, never on load.
+ */
+interface Props {
+  messages?: string[];
+  href?: string;
+  interval?: number;
+  dismissible?: boolean;
+  variant?: 'gold' | 'glass' | 'dark';
+  size?: 'sm' | 'md';
+  storageKey?: string;
+  className?: string;
+}
+
+const {
+  messages = ['Free shipping on orders over $75', 'Use code ASTRO10 for 10% off your first order', '30-day free returns'],
+  href,
+  interval = 4500,
+  dismissible = true,
+  variant = 'gold',
+  size = 'sm',
+  storageKey = 'ack-promo-closed',
+  className = '',
+} = Astro.props;
+
+const Tag = href ? 'a' : 'div';
+---
+
+<div class:list={['promo-bar', `promo-bar--${variant}`, `promo-bar--${size}`, className]} data-promo-bar data-interval={interval} data-key={storageKey}>
+  <Tag class="promo-bar__track" href={href}>
+    {messages.map((m, i) => (
+      <span class:list={['promo-bar__msg', { 'is-active': i === 0 }]} aria-hidden={i === 0 ? undefined : 'true'}>{m}</span>
+    ))}
+  </Tag>
+  {dismissible && (
+    <button class="promo-bar__close" type="button" aria-label="Dismiss announcement" data-promo-close>
+      <svg width="14" height="14" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" aria-hidden="true"><path d="M18 6 6 18M6 6l12 12"/></svg>
+    </button>
+  )}
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-promo-bar]').forEach((bar) => {
+    const key = bar.dataset.key || 'ack-promo-closed';
+    try {
+      if (window.sessionStorage.getItem(key)) { bar.hidden = true; return; }
+    } catch { /* storage blocked */ }
+
+    bar.querySelector('[data-promo-close]')?.addEventListener('click', () => {
+      bar.hidden = true;
+      try { window.sessionStorage.setItem(key, '1'); } catch { /* ignore */ }
+    });
+
+    const msgs = Array.from(bar.querySelectorAll<HTMLElement>('.promo-bar__msg'));
+    if (msgs.length < 2 || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    let index = 0;
+    let paused = false;
+    bar.addEventListener('mouseenter', () => { paused = true; });
+    bar.addEventListener('mouseleave', () => { paused = false; });
+    bar.addEventListener('focusin', () => { paused = true; });
+    bar.addEventListener('focusout', () => { paused = false; });
+    window.setInterval(() => {
+      if (paused || document.hidden) return;
+      msgs[index].classList.remove('is-active');
+      msgs[index].setAttribute('aria-hidden', 'true');
+      index = (index + 1) % msgs.length;
+      msgs[index].classList.add('is-active');
+      msgs[index].removeAttribute('aria-hidden');
+    }, Number(bar.dataset.interval) || 4500);
+  });
+</script>
+
+<style>
+  .promo-bar {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    min-height: 36px;
+    padding: 0 48px;
+    font-size: 0.8rem;
+    font-weight: 600;
+    letter-spacing: 0.01em;
+  }
+  .promo-bar[hidden] { display: none; }
+  .promo-bar--md { min-height: 44px; font-size: 0.875rem; }
+  .promo-bar--gold { background: linear-gradient(90deg, #b8860b, #d4a017, #b8860b); color: #140f00; }
+  .promo-bar--glass { background: rgb(var(--ink-rgb, 255 255 255) / 0.04); border-bottom: 1px solid var(--c-border, rgb(var(--ink-rgb, 255 255 255) / 0.05)); color: var(--c-text-1, #fff); }
+  .promo-bar--dark { background: var(--c-bg-2, #111); color: var(--c-text-1, #fff); }
+
+  .promo-bar__track {
+    display: grid;
+    place-items: center;
+    width: 100%;
+    color: inherit;
+    text-decoration: none;
+  }
+  a.promo-bar__track:hover { text-decoration: underline; color: inherit; }
+  .promo-bar__msg {
+    grid-area: 1 / 1;
+    text-align: center;
+    opacity: 0;
+    transform: translateY(6px);
+    transition: opacity 0.4s ease, transform 0.4s ease;
+    pointer-events: none;
+  }
+  .promo-bar__msg.is-active { opacity: 1; transform: none; pointer-events: auto; }
+
+  .promo-bar__close {
+    position: absolute;
+    right: 4px;
+    top: 50%;
+    transform: translateY(-50%);
+    display: grid;
+    place-items: center;
+    width: 36px;
+    height: 36px;
+    border: 0;
+    border-radius: var(--r-full, 9999px);
+    background: transparent;
+    color: inherit;
+    cursor: pointer;
+    opacity: 0.75;
+  }
+  .promo-bar__close:hover { opacity: 1; background: rgba(0, 0, 0, 0.1); }
+  .promo-bar__close:focus-visible { outline: 2px solid currentColor; outline-offset: -2px; }
+
+  @media (prefers-reduced-motion: reduce) {
+    .promo-bar__msg { transition: none; }
+  }
+</style>

package/src/components/lib/ecommerce/StockIndicator.astro

@@ -0,0 +1,127 @@
+---
+/**
+ * StockIndicator — Urgency notice for product pages: low-stock bar ("Only 3 left") and a
+ * live "N people are viewing this" counter that drifts gently.
+ *
+ * @param {number} stock - Units left. Default 3.
+ * @param {number} threshold - At or below this value the low-stock style is used. Default 5.
+ * @param {number} capacity - Value that fills the bar completely. Default 20.
+ * @param {number} viewers - Starting number of viewers (0 hides the line). Default 14.
+ * @param {boolean} live - Let the viewers count move every few seconds. Default true.
+ * @param {string} variant - Style (card|inline). Default 'card'.
+ * @param {string} size - Density (sm|md). Default 'md'.
+ * @param {string} className - Extra class.
+ *
+ * Accessibility: stock text is real text (not colour alone); the moving viewers number is not
+ * announced (aria-live off) to avoid noise; animation stops with prefers-reduced-motion.
+ */
+interface Props {
+  stock?: number;
+  threshold?: number;
+  capacity?: number;
+  viewers?: number;
+  live?: boolean;
+  variant?: 'card' | 'inline';
+  size?: 'sm' | 'md';
+  className?: string;
+}
+
+const {
+  stock = 3,
+  threshold = 5,
+  capacity = 20,
+  viewers = 14,
+  live = true,
+  variant = 'card',
+  size = 'md',
+  className = '',
+} = Astro.props;
+
+const low = stock > 0 && stock <= threshold;
+const state = stock <= 0 ? 'out' : low ? 'low' : 'ok';
+const pct = Math.max(4, Math.min(100, (stock / capacity) * 100));
+const message = state === 'out' ? 'Sold out — join the waitlist' : low ? `Only ${stock} left — order soon` : 'In stock and ready to ship';
+---
+
+<div class:list={['stock', `stock--${state}`, `stock--${variant}`, `stock--${size}`, className]} data-stock-indicator data-viewers={viewers} data-live={live ? '' : undefined}>
+  <p class="stock__msg">
+    <span class="stock__icon" aria-hidden="true">
+      {state === 'ok'
+        ? <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.6" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg>
+        : <svg viewBox="0 0 24 24" width="16" height="16" fill="none" stroke="currentColor" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M13 2 3 14h9l-1 8 10-12h-9z"/></svg>}
+    </span>
+    <strong>{message}</strong>
+  </p>
+  {state !== 'out' && (
+    <div class="stock__bar" aria-hidden="true"><span style={`width: ${pct}%`}></span></div>
+  )}
+  {viewers > 0 && (
+    <p class="stock__viewers" aria-live="off">
+      <span class="stock__eye" aria-hidden="true">
+        <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7S2 12 2 12z"/><circle cx="12" cy="12" r="3"/></svg>
+      </span>
+      <span><strong data-viewers-count>{viewers}</strong> people are viewing this right now</span>
+    </p>
+  )}
+</div>
+
+<script>
+  document.querySelectorAll<HTMLElement>('[data-stock-indicator][data-live]:not([data-bound])').forEach((el) => {
+    el.dataset.bound = '';
+    const out = el.querySelector<HTMLElement>('[data-viewers-count]');
+    if (!out || window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
+    const base = Number(el.dataset.viewers) || 0;
+    let value = base;
+    window.setInterval(() => {
+      if (document.hidden) return;
+      const step = Math.random() < 0.5 ? -1 : 1;
+      value = Math.max(Math.max(1, base - 4), Math.min(base + 6, value + step));
+      out.textContent = String(value);
+      out.classList.remove('is-bump');
+      void out.offsetWidth;
+      out.classList.add('is-bump');
+    }, 6500);
+  });
+</script>
+
+<style>
+  .stock {
+    --stock-tone: var(--c-success, #34d399);
+    display: grid;
+    gap: var(--sp-2, 0.5rem);
+  }
+  .stock--low { --stock-tone: var(--c-warning, #fbbf24); }
+  .stock--out { --stock-tone: var(--c-danger, #f87171); }
+  .stock--card {
+    padding: var(--sp-4, 1rem);
+    border-radius: var(--r-md, 12px);
+    border: 1px solid color-mix(in srgb, var(--stock-tone) 30%, transparent);
+    background: color-mix(in srgb, var(--stock-tone) 7%, transparent);
+  }
+  .stock--sm.stock--card { padding: var(--sp-3, 0.75rem); }
+
+  .stock__msg { display: flex; align-items: center; gap: var(--sp-2, 0.5rem); margin: 0; font-size: 0.9rem; color: var(--c-text-1, #fff); }
+  .stock__icon {
+    display: grid;
+    place-items: center;
+    width: 26px;
+    height: 26px;
+    border-radius: 50%;
+    color: var(--stock-tone);
+    background: color-mix(in srgb, var(--stock-tone) 16%, transparent);
+  }
+  .stock--low .stock__icon { animation: stock-pulse 1.8s ease-in-out infinite; }
+  .stock__bar { height: 6px; border-radius: 999px; background: rgb(var(--ink-rgb, 255 255 255) / 0.08); overflow: hidden; }
+  .stock__bar span { display: block; height: 100%; border-radius: inherit; background: var(--stock-tone); }
+  .stock__viewers { display: flex; align-items: center; gap: var(--sp-2, 0.5rem); margin: 0; font-size: 0.8rem; color: var(--c-text-2, #a3a3a3); }
+  .stock__viewers strong { color: var(--c-text-1, #fff); display: inline-block; min-width: 1.2em; }
+  .stock__viewers strong.is-bump { animation: stock-bump 0.4s ease-out; }
+  .stock__eye { display: grid; place-items: center; color: var(--c-text-2, #a3a3a3); }
+
+  @keyframes stock-pulse { 50% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--stock-tone) 12%, transparent); } }
+  @keyframes stock-bump { from { transform: translateY(-3px); opacity: 0.4; } }
+
+  @media (prefers-reduced-motion: reduce) {
+    .stock--low .stock__icon { animation: none; }
+  }
+</style>