@a4ui/core 0.22.0 → 0.24.0

package/src/ui/AnnouncementBar.tsx

@@ -0,0 +1,124 @@
+// Full-bleed promo bar. Optionally dismissible (local signal, closes for the
+// session only — no persistence) and optionally carries a copyable coupon
+// code pill. Kept dependency-free: clipboard access is feature-detected, not
+// polyfilled, so it degrades to "show the code, copy button is a no-op" on
+// browsers/contexts without `navigator.clipboard`.
+import type { JSX } from 'solid-js'
+import { createSignal, Show } from 'solid-js'
+import { Check, Copy, X } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+
+/** Background tone of an {@link AnnouncementBar}. */
+export type AnnouncementTone = 'primary' | 'accent' | 'neutral'
+
+const TONE: Record<AnnouncementTone, string> = {
+  primary: 'bg-primary text-primary-foreground',
+  accent: 'bg-accent text-accent-foreground',
+  neutral: 'bg-muted text-foreground',
+}
+
+export interface AnnouncementBarProps {
+  /** Message content. */
+  children: JSX.Element
+  /** Background tone. Defaults to `'primary'`. */
+  tone?: AnnouncementTone
+  /** Show a dismiss (X) button. Defaults to `false`. */
+  dismissible?: boolean
+  /** Optional coupon code rendered as a copyable pill. */
+  couponCode?: string
+  /** Make the whole message a link. */
+  href?: string
+  /** Called after the bar is dismissed. */
+  onDismiss?: () => void
+  class?: string
+}
+
+/**
+ * A full-width promo/notice bar, meant to sit above or below the page header.
+ * Supports an optional dismiss button, an optional link wrapping the message,
+ * and an optional copyable coupon-code pill.
+ *
+ * @example
+ * ```tsx
+ * <AnnouncementBar
+ *   tone="accent"
+ *   dismissible
+ *   couponCode="SAVE20"
+ *   href="/sale"
+ * >
+ *   Summer sale is live — 20% off everything
+ * </AnnouncementBar>
+ * ```
+ */
+export function AnnouncementBar(props: AnnouncementBarProps): JSX.Element {
+  const [dismissed, setDismissed] = createSignal(false)
+  const [copied, setCopied] = createSignal(false)
+
+  const copyCode = async () => {
+    const code = props.couponCode
+    if (!code || !navigator.clipboard) return
+    await navigator.clipboard.writeText(code)
+    setCopied(true)
+    setTimeout(() => setCopied(false), 1500)
+  }
+
+  const dismiss = () => {
+    setDismissed(true)
+    props.onDismiss?.()
+  }
+
+  return (
+    <Show when={!dismissed()}>
+      <div
+        role="region"
+        aria-label="Announcement"
+        class={cn(
+          'relative w-full rounded-none px-4 py-2 text-center text-sm',
+          TONE[props.tone ?? 'primary'],
+          props.dismissible && 'pr-10',
+          props.class,
+        )}
+      >
+        <Show when={props.href} fallback={<span>{props.children}</span>}>
+          <a
+            href={props.href}
+            class="underline-offset-2 transition-colors hover:underline motion-reduce:transition-none"
+          >
+            {props.children}
+          </a>
+        </Show>
+
+        <Show when={props.couponCode}>
+          {(code) => (
+            <span class="ml-2 inline-flex items-center gap-1 rounded-md bg-black/10 px-2 py-0.5 font-mono">
+              {code()}
+              <button
+                type="button"
+                aria-label={copied() ? 'Coupon code copied' : 'Copy coupon code'}
+                onClick={copyCode}
+                class="inline-flex items-center gap-1 transition-opacity hover:opacity-80 motion-reduce:transition-none"
+              >
+                <Show when={copied()} fallback={<Copy class="h-3 w-3" />}>
+                  <Check class="h-3 w-3" />
+                  Copied
+                </Show>
+              </button>
+            </span>
+          )}
+        </Show>
+
+        <Show when={props.dismissible}>
+          <button
+            type="button"
+            aria-label="Dismiss announcement"
+            onClick={dismiss}
+            class="absolute right-2 top-1/2 -translate-y-1/2 rounded-sm p-1 transition-opacity hover:opacity-80 motion-reduce:transition-none"
+          >
+            <X class="h-4 w-4" />
+          </button>
+        </Show>
+      </div>
+    </Show>
+  )
+}

package/src/ui/LogoWall.tsx

@@ -0,0 +1,94 @@
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface LogoItem {
+  src: string
+  alt: string
+  href?: string
+}
+
+export interface LogoWallProps {
+  logos: LogoItem[]
+  /** Grayscale until hover. Defaults to true. */
+  grayscale?: boolean
+  /** Columns on desktop. Defaults to a responsive auto-fit. */
+  columns?: number
+  class?: string
+}
+
+// Static Tailwind class lookups — dynamic `grid-cols-${n}` strings aren't
+// picked up by the JIT scanner, so the desktop/mobile column counts must be
+// literal class names known at build time.
+const DESKTOP_COLS: Record<number, string> = {
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+  7: 'md:grid-cols-7',
+  8: 'md:grid-cols-8',
+}
+
+const MOBILE_COLS: Record<number, string> = {
+  2: 'grid-cols-2',
+  3: 'grid-cols-3',
+  4: 'grid-cols-3',
+  5: 'grid-cols-3',
+  6: 'grid-cols-3',
+  7: 'grid-cols-3',
+  8: 'grid-cols-3',
+}
+
+/**
+ * "As seen in" grid of press/partner logos, grayscale by default with a
+ * color-on-hover reveal. Each logo can optionally link out; sits neutral
+ * on any background.
+ *
+ * @example
+ * ```tsx
+ * <LogoWall
+ *   logos={[
+ *     { src: 'https://picsum.photos/seed/techdaily/160/48', alt: 'TechDaily' },
+ *     { src: 'https://picsum.photos/seed/stylemag/160/48', alt: 'StyleMag', href: 'https://stylemag.example' },
+ *     { src: 'https://picsum.photos/seed/marketwire/160/48', alt: 'MarketWire' },
+ *   ]}
+ * />
+ * ```
+ */
+export function LogoWall(props: LogoWallProps): JSX.Element {
+  const grayscale = () => props.grayscale !== false
+  const gridCols = () =>
+    props.columns !== undefined
+      ? cn(MOBILE_COLS[props.columns] ?? 'grid-cols-2', DESKTOP_COLS[props.columns] ?? 'md:grid-cols-6')
+      : 'grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6'
+
+  return (
+    <div class={cn('grid items-center gap-6 md:gap-8', gridCols(), props.class)}>
+      <For each={props.logos}>
+        {(logo) => {
+          const img = (
+            <img
+              src={logo.src}
+              alt={logo.alt}
+              loading="lazy"
+              class={cn(
+                'mx-auto max-h-10 w-auto object-contain opacity-70 transition duration-300',
+                grayscale() && 'grayscale hover:grayscale-0 hover:opacity-100',
+                !grayscale() && 'hover:opacity-100',
+              )}
+            />
+          )
+          return (
+            <Show when={logo.href} fallback={img}>
+              <a href={logo.href} target="_blank" rel="noreferrer" aria-label={logo.alt}>
+                {img}
+              </a>
+            </Show>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

package/src/ui/RatingsSummary.tsx

@@ -0,0 +1,128 @@
+// RatingsSummary — a compact trust-band grid of aggregate ratings pulled
+// from multiple review sources, each rendered as a small glass-neutral tile.
+import { Star } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** One aggregate rating rendered as a tile by {@link RatingsSummary}. */
+export interface RatingSource {
+  /** Platform / source name, e.g. `"Google"`. */
+  name: string
+  /** Headline score, e.g. `4.9` or `"A+"`. */
+  score: string | number
+  /** Denominator, e.g. `5`. Shown as `score/outOf` when provided and `score` is numeric. */
+  outOf?: string | number
+  /** Number of reviews/feedback backing the score. */
+  count?: number
+  /** Optional logo/icon node; falls back to `name` when omitted. */
+  logo?: JSX.Element
+  /** When set, the tile renders as a link to the source. */
+  href?: string
+}
+
+export interface RatingsSummaryProps {
+  /** Rating sources to render, in order, as a responsive grid. */
+  sources: RatingSource[]
+  /** Columns on desktop. Defaults to a responsive 4-column grid. */
+  columns?: number
+  class?: string
+}
+
+const DESKTOP_COLS: Record<number, string> = {
+  2: 'md:grid-cols-2',
+  3: 'md:grid-cols-3',
+  4: 'md:grid-cols-4',
+  5: 'md:grid-cols-5',
+  6: 'md:grid-cols-6',
+}
+
+/**
+ * Compact social-proof grid of aggregate ratings across multiple sources —
+ * a trust band for landing pages and checkout flows. Each source renders as
+ * a small glass-neutral tile with its logo/name, headline score (optionally
+ * `score/outOf`), a review count, and — when the score is numeric out of 5 —
+ * a row of filled stars. Tiles with an `href` render as links that open in
+ * a new tab.
+ *
+ * @example
+ * ```tsx
+ * <RatingsSummary
+ *   sources={[
+ *     { name: 'Google', score: 4.8, outOf: 5, count: 2140, href: 'https://example.com/reviews' },
+ *     { name: 'Trustpilot', score: 4.6, outOf: 5, count: 980 },
+ *     { name: 'Verified Buyers', score: 4.9, outOf: 5, count: 512 },
+ *     { name: 'App Store', score: 'A+', count: 310 },
+ *   ]}
+ * />
+ * ```
+ */
+export function RatingsSummary(props: RatingsSummaryProps): JSX.Element {
+  const desktopCols = () => (props.columns !== undefined ? DESKTOP_COLS[props.columns] : undefined)
+
+  return (
+    <div class={cn('grid grid-cols-2 gap-3', desktopCols() ?? 'md:grid-cols-4', props.class)}>
+      <For each={props.sources}>
+        {(source) => {
+          const numericScore = () => (typeof source.score === 'number' ? source.score : undefined)
+          const tile = (
+            <>
+              <Show
+                when={source.logo}
+                fallback={<p class="text-sm font-medium text-muted-foreground">{source.name}</p>}
+              >
+                {(logo) => <div class="flex items-center justify-center text-muted-foreground">{logo()}</div>}
+              </Show>
+              <p class="mt-1 text-2xl font-bold text-foreground">
+                <Show
+                  when={numericScore() !== undefined && source.outOf !== undefined}
+                  fallback={source.score}
+                >
+                  {source.score}/{source.outOf}
+                </Show>
+              </p>
+              <Show when={numericScore() !== undefined && (numericScore() as number) <= 5}>
+                <div class="mt-1 flex items-center justify-center gap-0.5" aria-hidden="true">
+                  <For each={[0, 1, 2, 3, 4]}>
+                    {(i) => (
+                      <Star
+                        class={cn(
+                          'h-3.5 w-3.5',
+                          i < Math.round(numericScore() as number)
+                            ? 'fill-primary text-primary'
+                            : 'fill-muted text-muted',
+                        )}
+                      />
+                    )}
+                  </For>
+                </div>
+              </Show>
+              <Show when={source.count !== undefined}>
+                <p class="mt-1 text-xs text-muted-foreground">{source.count?.toLocaleString()} reviews</p>
+              </Show>
+            </>
+          )
+
+          return (
+            <Show
+              when={source.href}
+              fallback={<div class="rounded-xl border border-border bg-card/60 p-4 text-center">{tile}</div>}
+            >
+              {(href) => (
+                <a
+                  href={href()}
+                  target="_blank"
+                  rel="noreferrer"
+                  class="rounded-xl border border-border bg-card/60 p-4 text-center transition hover:border-primary/50"
+                >
+                  {tile}
+                </a>
+              )}
+            </Show>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

package/src/ui/SpecSheet.tsx

@@ -0,0 +1,89 @@
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+import { cn } from '../lib/cn'
+
+export interface SpecRow {
+  label: string
+  value: JSX.Element | string
+}
+
+export interface SpecGroup {
+  title?: string
+  rows: SpecRow[]
+}
+
+export interface SpecSheetProps {
+  groups: SpecGroup[]
+  /** 1 or 2 columns of rows per group on wider screens. Defaults to 1. */
+  columns?: 1 | 2
+  class?: string
+}
+
+/**
+ * A grouped key/value specification table, for product specs, tech sheets,
+ * or any other structured attribute list. Rows are label/value pairs with a
+ * subtle divider; groups can carry an optional uppercase title and rows can
+ * flow in one or two columns on wider screens. Designed to sit inside a
+ * `Card` with a clean, glassy-neutral look.
+ *
+ * @example
+ * ```tsx
+ * <SpecSheet
+ *   columns={2}
+ *   groups={[
+ *     {
+ *       title: 'Display',
+ *       rows: [
+ *         { label: 'Panel', value: 'AMOLED, 6.4"' },
+ *         { label: 'Resolution', value: '2340 x 1080' },
+ *         { label: 'Refresh rate', value: '120 Hz' },
+ *       ],
+ *     },
+ *     {
+ *       title: 'Battery',
+ *       rows: [
+ *         { label: 'Capacity', value: '4500 mAh' },
+ *         { label: 'Charging', value: '65 W wired' },
+ *       ],
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export function SpecSheet(props: SpecSheetProps): JSX.Element {
+  return (
+    <div class={cn('flex flex-col gap-6', props.class)}>
+      <For each={props.groups}>
+        {(group) => (
+          <div class="flex flex-col gap-2">
+            <Show when={group.title}>
+              <div class="text-sm font-semibold uppercase tracking-wide text-muted-foreground">
+                {group.title}
+              </div>
+            </Show>
+            <dl
+              class={cn(
+                'divide-y divide-border/60',
+                props.columns === 2 && 'grid grid-cols-1 gap-x-8 sm:grid-cols-2 sm:divide-y-0',
+              )}
+            >
+              <For each={group.rows}>
+                {(row) => (
+                  <div
+                    class={cn(
+                      'flex items-baseline justify-between gap-4 py-2 text-sm',
+                      props.columns === 2 && 'border-b border-border/60 sm:border-b',
+                    )}
+                  >
+                    <dt class="text-muted-foreground">{row.label}</dt>
+                    <dd class="text-right font-medium text-foreground">{row.value}</dd>
+                  </div>
+                )}
+              </For>
+            </dl>
+          </div>
+        )}
+      </For>
+    </div>
+  )
+}