@a4ui/core 0.21.0 → 0.23.0

package/dist/layout/Aurora.d.ts

@@ -4,6 +4,11 @@ export interface AuroraProps {
     intensity?: number;
     /** Slowly drift/scale the blobs. Reduced-motion aware (holds still). @default false */
     animated?: boolean;
+    /**
+     * A soft glow that follows the cursor across the backdrop (plus cursor-tracking
+     * on any `.glow-edge` cards). Reduced-motion aware (off when reduced). @default true
+     */
+    pointerGlow?: boolean;
     class?: string;
 }
 /**

package/dist/ui/AnnouncementBar.d.ts

@@ -0,0 +1,36 @@
+import { JSX } from 'solid-js';
+/** Background tone of an {@link AnnouncementBar}. */
+export type AnnouncementTone = 'primary' | 'accent' | 'neutral';
+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 declare function AnnouncementBar(props: AnnouncementBarProps): JSX.Element;

package/dist/ui/LogoWall.d.ts

@@ -0,0 +1,31 @@
+import { JSX } from 'solid-js';
+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;
+}
+/**
+ * "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 declare function LogoWall(props: LogoWallProps): JSX.Element;

package/dist/ui/RatingsSummary.d.ts

@@ -0,0 +1,44 @@
+import { JSX } from 'solid-js';
+/** 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;
+}
+/**
+ * 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 declare function RatingsSummary(props: RatingsSummaryProps): JSX.Element;

package/dist/ui/SpecSheet.d.ts

@@ -0,0 +1,47 @@
+import { JSX } from 'solid-js';
+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 declare function SpecSheet(props: SpecSheetProps): JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@a4ui/core",
-  "version": "0.21.0",
+  "version": "0.23.0",
   "description": "A4ui — Spatial Glass design system & component library for SolidJS (Kobalte behavior + Tailwind glass tokens + motion).",
   "type": "module",
   "license": "MIT",

package/src/commerce/ConditionScale.tsx

@@ -0,0 +1,114 @@
+// Horizontal grading meter for a graded score (e.g. a pre-owned item's
+// condition), with a positioned marker, the resolved tier label, and
+// endpoint labels under the track.
+import type { JSX } from 'solid-js'
+import { For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface ConditionTier {
+  /** Minimum score (inclusive) at which this tier applies. */
+  min: number
+  label: string
+}
+
+export interface ConditionScaleProps {
+  /** Current score. */
+  value: number
+  /** Top of the scale. Defaults to 10. */
+  max?: number
+  /** Bottom of the scale. Defaults to 1. */
+  min?: number
+  /** Tier labels, highest `min` first or any order — component sorts. Defaults to a sensible New→Poor scale. */
+  tiers?: ConditionTier[]
+  /** Show numeric value (e.g. "8.5 / 10"). Defaults to true. */
+  showValue?: boolean
+  class?: string
+}
+
+const DEFAULT_TIERS: ConditionTier[] = [
+  { min: 10, label: 'Brand New' },
+  { min: 9, label: 'Excellent' },
+  { min: 7, label: 'Very Good' },
+  { min: 5, label: 'Good' },
+  { min: 1, label: 'Fair' },
+]
+
+/**
+ * Horizontal grading meter (e.g. a pre-owned item's 1–10 condition score)
+ * with a marker at the current value, the resolved tier label, and endpoint
+ * labels under the track.
+ *
+ * @example
+ * ```tsx
+ * <ConditionScale value={8} />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <ConditionScale
+ *   value={62}
+ *   min={0}
+ *   max={100}
+ *   tiers={[
+ *     { min: 90, label: 'Like New' },
+ *     { min: 70, label: 'Lightly Used' },
+ *     { min: 40, label: 'Worn' },
+ *     { min: 0, label: 'Heavily Worn' },
+ *   ]}
+ * />
+ * ```
+ */
+export function ConditionScale(props: ConditionScaleProps): JSX.Element {
+  const min = () => props.min ?? 1
+  const max = () => props.max ?? 10
+  const tiers = () => (props.tiers ?? DEFAULT_TIERS).slice().sort((a, b) => a.min - b.min)
+
+  const percent = () => {
+    const range = max() - min()
+    if (range <= 0) return 0
+    return Math.max(0, Math.min(100, ((props.value - min()) / range) * 100))
+  }
+
+  const resolvedTier = () => {
+    const sorted = tiers()
+    let current = sorted[0]
+    for (const tier of sorted) {
+      if (tier.min <= props.value) current = tier
+    }
+    return current
+  }
+
+  return (
+    <div class={cn('flex flex-col gap-2', props.class)}>
+      <div class="flex items-end justify-between gap-2">
+        <span class="font-semibold text-foreground">{resolvedTier()?.label}</span>
+        <Show when={props.showValue ?? true}>
+          <span class="text-sm text-muted-foreground">
+            {props.value} / {max()}
+          </span>
+        </Show>
+      </div>
+      <div
+        class="relative mt-2 h-2 w-full rounded-full bg-muted"
+        role="meter"
+        aria-valuemin={min()}
+        aria-valuemax={max()}
+        aria-valuenow={props.value}
+        aria-label={resolvedTier()?.label ?? 'Condition'}
+      >
+        <div
+          class="absolute h-2 rounded-full bg-gradient-to-r from-primary/40 to-primary"
+          style={{ width: `${percent()}%` }}
+        />
+        <div
+          class="absolute -top-1 h-4 w-4 -translate-x-1/2 rounded-full border-2 border-background bg-primary shadow"
+          style={{ left: `${percent()}%` }}
+        />
+      </div>
+      <div class="flex items-center justify-between text-xs text-muted-foreground">
+        <For each={[tiers()[0], tiers()[tiers().length - 1]]}>{(tier) => <span>{tier?.label}</span>}</For>
+      </div>
+    </div>
+  )
+}

package/src/commerce/FacetSidebar.tsx

@@ -0,0 +1,222 @@
+// Full faceted-filter panel: collapsible checkbox sections (via FilterGroup),
+// a min/max price range, active-filter chips, a result count, and clear-all.
+// Fully controlled — the caller owns `selected` and `price`; the only local
+// state is each section's collapsed/expanded flag.
+import { X } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createSignal, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from '../ui/Button'
+import { Collapse } from '../ui/Collapse'
+import { NumberInput } from '../ui/NumberInput'
+import type { FacetOption } from './FilterGroup'
+import { FilterGroup } from './FilterGroup'
+
+export interface FacetSection {
+  key: string
+  title: string
+  options: FacetOption[]
+  /** Collapsible section. Defaults to true. */
+  collapsible?: boolean
+  /** Open by default. Defaults to true. */
+  defaultOpen?: boolean
+}
+
+export interface FacetPrice {
+  min: number
+  max: number
+  value: [number, number]
+}
+
+export interface FacetSidebarProps {
+  sections: FacetSection[]
+  /** Selected values per section key. */
+  selected: Record<string, string[]>
+  onChange: (key: string, values: string[]) => void
+  /** Optional price range facet. */
+  price?: FacetPrice
+  onPriceChange?: (range: [number, number]) => void
+  /** Result count shown in the header. */
+  resultCount?: number
+  onClearAll?: () => void
+  class?: string
+}
+
+interface ActiveChip {
+  sectionKey: string
+  value: string
+  label: string
+}
+
+/** One section's title row, collapsible or plain depending on `section.collapsible`. */
+function FacetSectionPanel(props: {
+  section: FacetSection
+  selected: string[]
+  onChange: (values: string[]) => void
+}): JSX.Element {
+  // eslint-disable-next-line solid/reactivity -- seed the open state once from defaultOpen; the user toggles from here
+  const [open, setOpen] = createSignal(props.section.defaultOpen ?? true)
+
+  return (
+    <Show
+      when={props.section.collapsible ?? true}
+      fallback={
+        <div class="space-y-2">
+          <p class="text-sm font-semibold text-foreground">{props.section.title}</p>
+          <FilterGroup
+            title=""
+            options={props.section.options}
+            selected={props.selected}
+            onChange={props.onChange}
+          />
+        </div>
+      }
+    >
+      <Collapse open={open()} onOpenChange={setOpen} title={props.section.title}>
+        <FilterGroup
+          title=""
+          options={props.section.options}
+          selected={props.selected}
+          onChange={props.onChange}
+        />
+      </Collapse>
+    </Show>
+  )
+}
+
+/**
+ * Full faceted-filter sidebar panel: composes {@link FilterGroup} checkbox
+ * sections (each optionally collapsible) with a min/max price range, a row of
+ * removable active-filter chips, a result count, and a clear-all action.
+ * Fully controlled — the caller owns `selected` and `price` state.
+ *
+ * @example
+ * ```tsx
+ * const [selected, setSelected] = createSignal<Record<string, string[]>>({ type: ['mug'] })
+ * const [price, setPrice] = createSignal<[number, number]>([0, 100])
+ * <FacetSidebar
+ *   class="w-64"
+ *   sections={[
+ *     { key: 'type', title: 'Type', options: [{ value: 'mug', label: 'Mug', count: 4 }, { value: 'plate', label: 'Plate', count: 2 }] },
+ *     { key: 'color', title: 'Color', options: [{ value: 'blue', label: 'Blue', count: 3 }, { value: 'green', label: 'Green', count: 1 }] },
+ *   ]}
+ *   selected={selected()}
+ *   onChange={(key, values) => setSelected({ ...selected(), [key]: values })}
+ *   price={{ min: 0, max: 100, value: price() }}
+ *   onPriceChange={setPrice}
+ *   resultCount={6}
+ *   onClearAll={() => { setSelected({}); setPrice([0, 100]) }}
+ * />
+ * ```
+ */
+export function FacetSidebar(props: FacetSidebarProps): JSX.Element {
+  const activeChips = (): ActiveChip[] => {
+    const chips: ActiveChip[] = []
+    for (const section of props.sections) {
+      const values = props.selected[section.key] ?? []
+      for (const value of values) {
+        const option = section.options.find((candidate) => candidate.value === value)
+        chips.push({ sectionKey: section.key, value, label: option?.label ?? value })
+      }
+    }
+    return chips
+  }
+
+  const removeChip = (chip: ActiveChip): void => {
+    const values = props.selected[chip.sectionKey] ?? []
+    props.onChange(
+      chip.sectionKey,
+      values.filter((value) => value !== chip.value),
+    )
+  }
+
+  const setMin = (raw: number): void => {
+    if (!props.price || !props.onPriceChange) return
+    const min = Math.min(raw, props.price.value[1])
+    props.onPriceChange([min, props.price.value[1]])
+  }
+
+  const setMax = (raw: number): void => {
+    if (!props.price || !props.onPriceChange) return
+    const max = Math.max(raw, props.price.value[0])
+    props.onPriceChange([props.price.value[0], max])
+  }
+
+  return (
+    <div class={cn('space-y-5', props.class)}>
+      <div class="flex items-center justify-between gap-2">
+        <Show when={props.resultCount != null}>
+          <p class="text-sm text-muted-foreground">{props.resultCount} results</p>
+        </Show>
+        <Show when={props.onClearAll}>
+          <Button
+            variant="ghost"
+            class="ml-auto h-auto px-2 py-1 text-xs"
+            onClick={() => props.onClearAll?.()}
+          >
+            Clear all
+          </Button>
+        </Show>
+      </div>
+
+      <Show when={activeChips().length > 0}>
+        <div class="flex flex-wrap gap-2">
+          <For each={activeChips()}>
+            {(chip) => (
+              <span class="inline-flex items-center gap-1 rounded-full border border-border bg-muted px-2 py-0.5 text-xs">
+                {chip.label}
+                <button
+                  type="button"
+                  onClick={() => removeChip(chip)}
+                  aria-label={`Remove ${chip.label}`}
+                  class="text-muted-foreground hover:text-foreground"
+                >
+                  <X class="h-3 w-3" />
+                </button>
+              </span>
+            )}
+          </For>
+        </div>
+      </Show>
+
+      <Show when={props.price}>
+        {(price) => (
+          <div class="space-y-2">
+            <div class="flex items-center justify-between">
+              <p class="text-sm font-semibold text-foreground">Price</p>
+              <p class="text-xs text-muted-foreground">
+                ${price().value[0]} – ${price().value[1]}
+              </p>
+            </div>
+            <div class="flex items-center gap-2">
+              <NumberInput
+                value={price().value[0]}
+                onChange={setMin}
+                min={price().min}
+                max={price().value[1]}
+              />
+              <span class="text-sm text-muted-foreground">–</span>
+              <NumberInput
+                value={price().value[1]}
+                onChange={setMax}
+                min={price().value[0]}
+                max={price().max}
+              />
+            </div>
+          </div>
+        )}
+      </Show>
+
+      <For each={props.sections}>
+        {(section) => (
+          <FacetSectionPanel
+            section={section}
+            selected={props.selected[section.key] ?? []}
+            onChange={(values) => props.onChange(section.key, values)}
+          />
+        )}
+      </For>
+    </div>
+  )
+}

package/src/commerce/PriceBlock.tsx

@@ -0,0 +1,133 @@
+// Richer price display than PriceTag: compare-at savings badge, a coupon
+// chip with the after-coupon price, and an optional financing estimate line.
+import { CreditCard } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Badge } from '../ui/Badge'
+
+/** Text size of a {@link PriceBlock}'s main amount. Defaults to `'lg'`. */
+export type PriceBlockSize = 'md' | 'lg'
+
+const SIZE_CLASSES: Record<PriceBlockSize, string> = {
+  md: 'text-xl',
+  lg: 'text-3xl',
+}
+
+export interface PriceBlockCoupon {
+  code: string
+  /** Flat amount off (currency units). If omitted, no reduction is computed. */
+  amount?: number
+  /** Optional label override. */
+  label?: string
+}
+
+export interface PriceBlockFinancing {
+  /** Number of monthly installments. */
+  months: number
+  /** Annual APR as a decimal, e.g. 0.1 for 10%. Omit/0 = interest-free split. */
+  apr?: number
+}
+
+export interface PriceBlockProps {
+  amount: number
+  /** Original price; struck through and used for the savings badge when > amount. */
+  compareAt?: number
+  /** ISO 4217 currency code. Defaults to `'USD'`. */
+  currency?: string
+  /** BCP 47 locale used for formatting. Defaults to `'en-US'`. */
+  locale?: string
+  /** Coupon; renders a chip and the after-coupon price. */
+  coupon?: PriceBlockCoupon
+  /** Financing estimate; renders "As low as $X/mo". */
+  financing?: PriceBlockFinancing
+  /** Extra note under the price (e.g. a wire-transfer discount line). */
+  note?: JSX.Element
+  /** Text size of the main price. Defaults to `'lg'`. */
+  size?: PriceBlockSize
+  class?: string
+}
+
+/**
+ * Full price display: main amount, optional struck-through compare-at price
+ * with a savings badge, a coupon chip with the after-coupon price, and an
+ * optional financing estimate ("As low as $X/mo").
+ *
+ * @example
+ * ```tsx
+ * <PriceBlock
+ *   amount={249}
+ *   compareAt={329}
+ *   coupon={{ code: 'SAVE50', amount: 50 }}
+ *   financing={{ months: 12, apr: 0.1 }}
+ * />
+ * ```
+ */
+export function PriceBlock(props: PriceBlockProps): JSX.Element {
+  const format = (value: number) =>
+    new Intl.NumberFormat(props.locale ?? 'en-US', {
+      style: 'currency',
+      currency: props.currency ?? 'USD',
+    }).format(value)
+
+  const onSale = () => (props.compareAt ?? 0) > props.amount
+
+  const savings = () => (props.compareAt as number) - props.amount
+
+  const discountPercent = () => Math.round((1 - props.amount / (props.compareAt as number)) * 100)
+
+  const afterCouponAmount = () => {
+    const couponAmount = props.coupon?.amount ?? 0
+    return Math.max(0, props.amount - couponAmount)
+  }
+
+  const monthlyPayment = () => {
+    const financing = props.financing as PriceBlockFinancing
+    const apr = financing.apr ?? 0
+    if (apr > 0) {
+      const r = apr / 12
+      const n = financing.months
+      const m = (props.amount * r) / (1 - (1 + r) ** -n)
+      return Math.round(m * 100) / 100
+    }
+    return Math.round((props.amount / financing.months) * 100) / 100
+  }
+
+  return (
+    <div class={cn('flex flex-col gap-1', props.class)}>
+      <div class="flex flex-wrap items-center gap-2">
+        <span class={cn('font-bold text-foreground', SIZE_CLASSES[props.size ?? 'lg'])}>
+          {format(props.amount)}
+        </span>
+        <Show when={onSale()}>
+          <span class="text-muted-foreground line-through">{format(props.compareAt as number)}</span>
+          <Badge tone="danger">
+            Save {format(savings())} (-{discountPercent()}%)
+          </Badge>
+        </Show>
+      </div>
+      <Show when={props.coupon}>
+        {(coupon) => (
+          <div class="flex flex-wrap items-center gap-2">
+            <span class="inline-flex items-center gap-1 rounded-md border border-dashed border-primary/50 px-2 py-0.5 text-xs font-mono text-primary">
+              {coupon().label ?? 'Coupon'} {coupon().code}
+            </span>
+            <Show when={coupon().amount !== undefined}>
+              <span class="text-sm text-muted-foreground">
+                {format(afterCouponAmount())} after code {coupon().code}
+              </span>
+            </Show>
+          </div>
+        )}
+      </Show>
+      <Show when={props.financing}>
+        <span class="inline-flex items-center gap-1 text-sm text-muted-foreground">
+          <CreditCard class="h-4 w-4" />
+          As low as {format(monthlyPayment())}/mo
+        </span>
+      </Show>
+      <Show when={props.note}>{props.note}</Show>
+    </div>
+  )
+}

package/src/commerce/index.ts

@@ -8,4 +8,13 @@ export { ProductGrid, type ProductGridProps } from './ProductGrid'
 export { CartLine, type CartLineProps } from './CartLine'
 export { CartSummary, type CartSummaryProps, type CartSummaryItem } from './CartSummary'
 export { FilterGroup, type FilterGroupProps, type FacetOption } from './FilterGroup'
+export { FacetSidebar, type FacetSidebarProps, type FacetSection, type FacetPrice } from './FacetSidebar'
+export {
+  PriceBlock,
+  type PriceBlockProps,
+  type PriceBlockCoupon,
+  type PriceBlockFinancing,
+  type PriceBlockSize,
+} from './PriceBlock'
+export { ConditionScale, type ConditionScaleProps, type ConditionTier } from './ConditionScale'
 export { createCart, type Cart, type CartProduct, type CartEntry } from './createCart'