@a4ui/core 0.17.0 → 0.18.0

package/dist/layout/ActionBar.d.ts

@@ -0,0 +1,53 @@
+import { JSX } from 'solid-js';
+/** Edge an {@link ActionBar} pins to when `sticky`. Defaults to `'top'`. */
+export type ActionBarPosition = 'top' | 'bottom';
+export interface ActionBarProps {
+    /**
+     * The prominent CTA. Rendered as `<a href>` when `href` is set (e.g.
+     * `tel:+15551234567`), otherwise as a `<button type="button">` driven by
+     * `onClick`.
+     */
+    action: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
+    /** Optional left slot, e.g. a `<Badge pulse>24/7</Badge>`. */
+    status?: JSX.Element;
+    /** Optional short text between `status` and the action. Hidden below `sm` so the action stays reachable. */
+    message?: JSX.Element;
+    /** Pins the bar to the viewport edge (`position`) instead of scrolling with the page. Defaults to `true`. */
+    sticky?: boolean;
+    /** Edge to pin to when `sticky`. Defaults to `'top'`. */
+    position?: ActionBarPosition;
+    class?: string;
+}
+/**
+ * Sticky action / emergency bar: a full-width strip that pins a single
+ * prominent CTA to the viewport edge, with an optional status badge and
+ * short message beside it. Built for urgent-service verticals (towing, HVAC,
+ * locksmith, …) where the CTA — usually a `tel:` link — must stay reachable
+ * through the whole scroll. The action gets a click ripple like `<Button
+ * ripple>`; the message drops out on narrow viewports so the badge + action
+ * never wrap.
+ *
+ * @example
+ * ```tsx
+ * <ActionBar
+ *   status={<Badge pulse>24/7</Badge>}
+ *   message="Stuck on the road? We're on our way."
+ *   action={{ label: 'Call now', href: 'tel:+15551234567' }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Bottom-pinned, plain onClick action instead of a tel: link.
+ * <ActionBar
+ *   position="bottom"
+ *   message="Free quote in 2 minutes"
+ *   action={{ label: 'Get a quote', onClick: openQuoteForm }}
+ * />
+ * ```
+ */
+export declare function ActionBar(props: ActionBarProps): JSX.Element;

package/dist/layout/Section.d.ts

@@ -0,0 +1,31 @@
+import { JSX, ParentProps } from 'solid-js';
+/** Max content width of a {@link Section}. Defaults to `'6xl'`. */
+export type SectionWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | '7xl' | 'full';
+/** Vertical padding of a {@link Section}. Defaults to `'lg'`. */
+export type SectionPad = 'none' | 'sm' | 'md' | 'lg';
+interface SectionProps extends ParentProps, JSX.HTMLAttributes<HTMLElement> {
+    /** Max content width. Defaults to `'6xl'`. */
+    size?: SectionWidth;
+    /** Vertical padding rhythm. Defaults to `'lg'`. */
+    py?: SectionPad;
+    class?: string;
+}
+/**
+ * Centered content container with a max width and consistent vertical rhythm —
+ * the layout wrapper repeated on every marketing/company page. Pass an `id` for
+ * anchor-based in-page navigation. For a full-bleed colored band, wrap Section
+ * in a parent that carries the background.
+ *
+ * @example
+ * ```tsx
+ * <Section id="services">
+ *   <h2>Servicios</h2>
+ * </Section>
+ *
+ * <div class="bg-muted/30">
+ *   <Section size="4xl" py="md">…</Section>
+ * </div>
+ * ```
+ */
+export declare function Section(props: SectionProps): JSX.Element;
+export {};

package/dist/ui/BeforeAfter.d.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'solid-js';
+export interface BeforeAfterProps {
+    /** Image URL shown fully, underneath. */
+    before: string;
+    /** Image URL revealed by the handle, on top, clipped to the split. */
+    after: string;
+    /** Accessible description of the comparison, used as the slider's label. */
+    alt: string;
+    /** Corner labels as `[beforeLabel, afterLabel]`, e.g. `['Antes', 'Después']`. */
+    labels?: [string, string];
+    /** Initial split position, 0..100 (percent of width revealing `after`). @default 50 */
+    start?: number;
+    class?: string;
+}
+/**
+ * A before/after image comparison slider: drag the handle (pointer or
+ * Left/Right arrow keys once focused) to reveal more of `after` versus
+ * `before`. The `after` image is clipped with `clip-path: inset(...)` driven
+ * by a `0..100` split signal — no canvas, no animation engine. Clicking
+ * anywhere on the track jumps the split there with a short transition
+ * (skipped under `prefers-reduced-motion`); dragging itself is always instant.
+ *
+ * @example
+ * ```tsx
+ * <BeforeAfter
+ *   before="/room-before.jpg"
+ *   after="/room-after.jpg"
+ *   alt="Living room before and after renovation"
+ *   labels={['Antes', 'Después']}
+ *   class="aspect-video rounded-2xl border border-border"
+ * />
+ * ```
+ */
+export declare function BeforeAfter(props: BeforeAfterProps): JSX.Element;

package/dist/ui/PricingTable.d.ts

@@ -0,0 +1,60 @@
+import { JSX } from 'solid-js';
+/** Billing period a {@link PricingTable} can show. */
+export type PricingPeriod = 'monthly' | 'annual';
+/** One plan/tier rendered by {@link PricingTable}. */
+export interface PricingTier {
+    /** Plan name, e.g. `"Pro"`. */
+    name: string;
+    /** Pre-formatted price for the monthly period, e.g. `"$0"` or `"$99/mes"`. */
+    price: string;
+    /** Pre-formatted price for the annual period. When ANY tier sets this, the toggle renders. */
+    priceAnnual?: string;
+    /** Short one-line description under the plan name. */
+    description?: string;
+    /** Bullet list of included features, each rendered with a check icon. */
+    features: string[];
+    /** Renders this tier emphasized: `glass` surface, a ring, and a "Popular" {@link Badge}. */
+    highlighted?: boolean;
+    /** Call-to-action button. Rendered as an `<a>` when `href` is set, otherwise a `<button>`. */
+    cta?: {
+        label: string;
+        href?: string;
+        onClick?: () => void;
+    };
+}
+interface PricingTableProps {
+    /** Tiers to render, in order, as a responsive grid. */
+    tiers: PricingTier[];
+    /** Controlled billing period. Omit to let the toggle manage its own state. */
+    period?: PricingPeriod;
+    /** Fired when the toggle changes period, controlled or uncontrolled. */
+    onPeriodChange?: (period: PricingPeriod) => void;
+    class?: string;
+}
+/**
+ * Responsive pricing grid: one {@link Card} per tier, a feature checklist, and
+ * a CTA {@link Button}. The highlighted tier gets a frosted glass surface, a
+ * ring, and a "Popular" {@link Badge}. When any tier sets `priceAnnual`, a
+ * monthly/annual toggle renders above the grid — pass `period` +
+ * `onPeriodChange` to control it, or omit both to let it manage its own state.
+ *
+ * @example
+ * ```tsx
+ * <PricingTable
+ *   tiers={[
+ *     { name: 'Free', price: '$0', features: ['1 project', 'Community support'], cta: { label: 'Start' } },
+ *     {
+ *       name: 'Pro',
+ *       price: '$19/mo',
+ *       priceAnnual: '$190/yr',
+ *       description: 'For growing teams',
+ *       features: ['Unlimited projects', 'Priority support'],
+ *       highlighted: true,
+ *       cta: { label: 'Upgrade', href: '/upgrade' },
+ *     },
+ *   ]}
+ * />
+ * ```
+ */
+export declare function PricingTable(props: PricingTableProps): JSX.Element;
+export {};

package/package.json

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

package/src/commerce/ProductCard.tsx

@@ -127,7 +127,15 @@ export function ProductCard(props: ProductCardProps): JSX.Element {
           locale={props.locale}
         />
         <Show when={props.onAddToCart}>
-          <Button class="mt-auto w-full" onClick={() => props.onAddToCart?.()}>
+          {/* stopPropagation so a card wrapped in a link/router-<A> adds to cart
+              without also navigating. */}
+          <Button
+            class="mt-auto w-full"
+            onClick={(e) => {
+              e.stopPropagation()
+              props.onAddToCart?.()
+            }}
+          >
             Add to cart
           </Button>
         </Show>

package/src/commerce/createCart.ts

@@ -0,0 +1,102 @@
+// A minimal signal-backed shopping cart store: add/remove/setQty/clear plus
+// derived count() and subtotal(). Generic over the product shape so it can
+// back CartLine/CartSummary (or any custom card) without re-implementing the
+// same bookkeeping in every commerce template.
+import type { Accessor } from 'solid-js'
+import { createMemo, createSignal } from 'solid-js'
+
+export interface CartProduct {
+  id: string | number
+  price: number
+}
+
+export interface CartEntry<T extends CartProduct> {
+  product: T
+  qty: number
+}
+
+export interface Cart<T extends CartProduct> {
+  /** Reactive list of cart entries. */
+  items: Accessor<CartEntry<T>[]>
+  /** Add a product, or increment its `qty` if it's already in the cart. */
+  add: (product: T, qty?: number) => void
+  /** Remove a product from the cart by id. */
+  remove: (id: T['id']) => void
+  /** Set a product's quantity. `qty <= 0` removes the entry. */
+  setQty: (id: T['id'], qty: number) => void
+  /** Empty the cart. */
+  clear: () => void
+  /** Total number of units across all entries. */
+  count: () => number
+  /** Sum of `price * qty` across all entries. */
+  subtotal: () => number
+  /** Whether a product with this id is currently in the cart. */
+  has: (id: T['id']) => boolean
+}
+
+/**
+ * Create a signal-backed shopping cart store, generic over the product type.
+ * `count()` and `subtotal()` are memoized and stay in sync with `items()`.
+ *
+ * @example
+ * ```ts
+ * interface Product extends CartProduct {
+ *   id: string
+ *   price: number
+ *   title: string
+ * }
+ *
+ * const cart = createCart<Product>()
+ *
+ * cart.add({ id: 'sku-1', price: 29.99, title: 'Wireless Mouse' })
+ * cart.add({ id: 'sku-1', price: 29.99, title: 'Wireless Mouse' }) // qty -> 2
+ * cart.setQty('sku-1', 3)
+ *
+ * cart.count()    // 3
+ * cart.subtotal() // 89.97
+ *
+ * cart.remove('sku-1')
+ * cart.has('sku-1') // false
+ * ```
+ */
+export function createCart<T extends CartProduct>(initial: CartEntry<T>[] = []): Cart<T> {
+  const [items, setItems] = createSignal<CartEntry<T>[]>(initial)
+
+  const add = (product: T, qty = 1): void => {
+    setItems((current) => {
+      const existing = current.find((entry) => entry.product.id === product.id)
+      if (existing) {
+        return current.map((entry) =>
+          entry.product.id === product.id ? { ...entry, qty: entry.qty + qty } : entry,
+        )
+      }
+      return [...current, { product, qty }]
+    })
+  }
+
+  const remove = (id: T['id']): void => {
+    setItems((current) => current.filter((entry) => entry.product.id !== id))
+  }
+
+  const setQty = (id: T['id'], qty: number): void => {
+    if (qty <= 0) {
+      remove(id)
+      return
+    }
+    setItems((current) => current.map((entry) => (entry.product.id === id ? { ...entry, qty } : entry)))
+  }
+
+  const clear = (): void => {
+    setItems([])
+  }
+
+  const count = createMemo(() => items().reduce((total, entry) => total + entry.qty, 0))
+
+  const subtotal = createMemo(() =>
+    items().reduce((total, entry) => total + entry.product.price * entry.qty, 0),
+  )
+
+  const has = (id: T['id']): boolean => items().some((entry) => entry.product.id === id)
+
+  return { items, add, remove, setQty, clear, count, subtotal, has }
+}

package/src/commerce/index.ts

@@ -8,3 +8,4 @@ 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 { createCart, type Cart, type CartProduct, type CartEntry } from './createCart'

package/src/index.ts

@@ -8,7 +8,7 @@
 //   import '@a4ui/core/styles.css'
 //   import { Button, Card, Modal } from '@a4ui/core'
 
-export const A4UI_VERSION = '0.17.0'
+export const A4UI_VERSION = '0.18.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -86,6 +86,8 @@ export { Carousel, type CarouselProps } from './ui/Carousel'
 export { Stepper, type StepItem, type StepperProps } from './ui/Stepper'
 export { Timeline, type TimelineItem, type TimelineTone, type TimelineProps } from './ui/Timeline'
 export { Rating, type RatingProps } from './ui/Rating'
+export { PricingTable, type PricingTier, type PricingPeriod } from './ui/PricingTable'
+export { BeforeAfter, type BeforeAfterProps } from './ui/BeforeAfter'
 export { Empty, type EmptyProps } from './ui/Empty'
 export { Calendar, type CalendarProps } from './ui/Calendar'
 export { Tree, type TreeNode, type TreeProps } from './ui/Tree'
@@ -168,6 +170,8 @@ export { ChristmasBackground } from './layout/ChristmasBackground'
 export { ThemeToggle } from './layout/ThemeToggle'
 export { EffectsToggle } from './layout/EffectsToggle'
 export { NavGroup } from './layout/NavGroup'
+export { Section, type SectionWidth, type SectionPad } from './layout/Section'
+export { ActionBar, type ActionBarProps, type ActionBarPosition } from './layout/ActionBar'
 
 // Themes (src/themes) — swappable color palettes (Space is the default). Pick one
 // with `selectTheme('dino')`, restore the saved one with `initTheme()`, or build

package/src/layout/ActionBar.tsx

@@ -0,0 +1,121 @@
+// ActionBar — sticky action / emergency bar: a full-width strip that pins one
+// prominent CTA to the viewport edge, with an optional status badge + short
+// message beside it. Built for urgent-service verticals (towing, HVAC,
+// locksmith, …) where the call-to-action — usually a `tel:` link — has to
+// stay reachable through the whole page scroll. On narrow viewports the
+// message drops out first so the badge + action never wrap or get pushed
+// off-screen.
+import { Show, splitProps, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { spawnRipple } from '../ui/Ripple'
+
+/** Edge an {@link ActionBar} pins to when `sticky`. Defaults to `'top'`. */
+export type ActionBarPosition = 'top' | 'bottom'
+
+export interface ActionBarProps {
+  /**
+   * The prominent CTA. Rendered as `<a href>` when `href` is set (e.g.
+   * `tel:+15551234567`), otherwise as a `<button type="button">` driven by
+   * `onClick`.
+   */
+  action: { label: string; href?: string; onClick?: () => void }
+  /** Optional left slot, e.g. a `<Badge pulse>24/7</Badge>`. */
+  status?: JSX.Element
+  /** Optional short text between `status` and the action. Hidden below `sm` so the action stays reachable. */
+  message?: JSX.Element
+  /** Pins the bar to the viewport edge (`position`) instead of scrolling with the page. Defaults to `true`. */
+  sticky?: boolean
+  /** Edge to pin to when `sticky`. Defaults to `'top'`. */
+  position?: ActionBarPosition
+  class?: string
+}
+
+const POSITION_CLASSES: Record<ActionBarPosition, string> = {
+  top: 'top-0',
+  bottom: 'bottom-0',
+}
+
+// Deliberately not the Button primitive: Button always renders a <button>,
+// and this CTA needs to be a real <a href="tel:…"> for click-to-call. The
+// classes mirror Button's shape/motion but use accent (not primary) so the
+// CTA still pops against the bar's own bg-primary surface.
+const ACTION_CLASSES =
+  'relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-md bg-accent px-4 py-2 text-sm font-semibold whitespace-nowrap text-accent-foreground transition-[background-color,transform] duration-150 hover:bg-accent/90 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring'
+
+/**
+ * Sticky action / emergency bar: a full-width strip that pins a single
+ * prominent CTA to the viewport edge, with an optional status badge and
+ * short message beside it. Built for urgent-service verticals (towing, HVAC,
+ * locksmith, …) where the CTA — usually a `tel:` link — must stay reachable
+ * through the whole scroll. The action gets a click ripple like `<Button
+ * ripple>`; the message drops out on narrow viewports so the badge + action
+ * never wrap.
+ *
+ * @example
+ * ```tsx
+ * <ActionBar
+ *   status={<Badge pulse>24/7</Badge>}
+ *   message="Stuck on the road? We're on our way."
+ *   action={{ label: 'Call now', href: 'tel:+15551234567' }}
+ * />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * // Bottom-pinned, plain onClick action instead of a tel: link.
+ * <ActionBar
+ *   position="bottom"
+ *   message="Free quote in 2 minutes"
+ *   action={{ label: 'Get a quote', onClick: openQuoteForm }}
+ * />
+ * ```
+ */
+export function ActionBar(props: ActionBarProps): JSX.Element {
+  const [local] = splitProps(props, ['action', 'status', 'message', 'sticky', 'position', 'class'])
+
+  const handlePointerDown: JSX.EventHandler<HTMLElement, PointerEvent> = (event) => {
+    spawnRipple(event.currentTarget, event, { opacity: 0.35 })
+  }
+
+  return (
+    <div
+      class={cn(
+        'z-40 flex w-full items-center justify-between gap-3 bg-primary px-4 py-3 text-primary-foreground',
+        (local.sticky ?? true) && cn('sticky', POSITION_CLASSES[local.position ?? 'top']),
+        local.class,
+      )}
+    >
+      <div class="flex min-w-0 items-center gap-2 sm:gap-3">
+        <Show when={local.status}>{local.status}</Show>
+        <Show when={local.message}>
+          <p class="hidden min-w-0 truncate text-sm sm:block sm:text-base">{local.message}</p>
+        </Show>
+      </div>
+      <Show
+        when={local.action.href}
+        fallback={
+          <button
+            type="button"
+            class={ACTION_CLASSES}
+            onPointerDown={handlePointerDown}
+            onClick={local.action.onClick}
+          >
+            {local.action.label}
+          </button>
+        }
+      >
+        {(href) => (
+          <a
+            href={href()}
+            class={ACTION_CLASSES}
+            onPointerDown={handlePointerDown}
+            onClick={local.action.onClick}
+          >
+            {local.action.label}
+          </a>
+        )}
+      </Show>
+    </div>
+  )
+}

package/src/layout/Section.tsx

@@ -0,0 +1,69 @@
+// Section — a centered content container with a max width and vertical rhythm.
+// The layout wrapper every page repeats: `mx-auto` + a max-width + horizontal
+// padding + section padding, with an optional `id` anchor for in-page nav. No
+// visuals of its own — put a full-bleed background on a parent and let Section
+// hold the centered content.
+import type { JSX, ParentProps } from 'solid-js'
+import { splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** Max content width of a {@link Section}. Defaults to `'6xl'`. */
+export type SectionWidth = 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '4xl' | '6xl' | '7xl' | 'full'
+/** Vertical padding of a {@link Section}. Defaults to `'lg'`. */
+export type SectionPad = 'none' | 'sm' | 'md' | 'lg'
+
+const WIDTH: Record<SectionWidth, string> = {
+  sm: 'max-w-sm',
+  md: 'max-w-md',
+  lg: 'max-w-lg',
+  xl: 'max-w-xl',
+  '2xl': 'max-w-2xl',
+  '4xl': 'max-w-4xl',
+  '6xl': 'max-w-6xl',
+  '7xl': 'max-w-7xl',
+  full: 'max-w-full',
+}
+const PAD: Record<SectionPad, string> = {
+  none: 'py-0',
+  sm: 'py-8',
+  md: 'py-14',
+  lg: 'py-20',
+}
+
+interface SectionProps extends ParentProps, JSX.HTMLAttributes<HTMLElement> {
+  /** Max content width. Defaults to `'6xl'`. */
+  size?: SectionWidth
+  /** Vertical padding rhythm. Defaults to `'lg'`. */
+  py?: SectionPad
+  class?: string
+}
+
+/**
+ * Centered content container with a max width and consistent vertical rhythm —
+ * the layout wrapper repeated on every marketing/company page. Pass an `id` for
+ * anchor-based in-page navigation. For a full-bleed colored band, wrap Section
+ * in a parent that carries the background.
+ *
+ * @example
+ * ```tsx
+ * <Section id="services">
+ *   <h2>Servicios</h2>
+ * </Section>
+ *
+ * <div class="bg-muted/30">
+ *   <Section size="4xl" py="md">…</Section>
+ * </div>
+ * ```
+ */
+export function Section(props: SectionProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['size', 'py', 'class', 'children'])
+  return (
+    <section
+      class={cn('mx-auto w-full px-5', WIDTH[local.size ?? '6xl'], PAD[local.py ?? 'lg'], local.class)}
+      {...rest}
+    >
+      {local.children}
+    </section>
+  )
+}