@a4ui/core 0.19.0 → 0.21.0

package/dist/layout/Aurora.d.ts

@@ -0,0 +1,25 @@
+import { JSX } from 'solid-js';
+export interface AuroraProps {
+    /** Blob opacity multiplier, 0..1 — higher = more visible color. @default 0.45 */
+    intensity?: number;
+    /** Slowly drift/scale the blobs. Reduced-motion aware (holds still). @default false */
+    animated?: boolean;
+    class?: string;
+}
+/**
+ * Ambient, theme-tinted blurred-blob backdrop that makes glass surfaces read as
+ * glass. Fixed behind the page (paints its own base background); keep the page
+ * root transparent. Reduced-motion aware when `animated`.
+ *
+ * @example
+ * ```tsx
+ * // at the top of your app/layout (root must NOT set its own bg):
+ * <div class="relative min-h-screen text-foreground">
+ *   <Aurora />
+ *   <YourPage />
+ * </div>
+ *
+ * <Aurora intensity={0.6} animated />
+ * ```
+ */
+export declare function Aurora(props: AuroraProps): JSX.Element;

package/dist/styles.css

@@ -228,6 +228,21 @@ body {
   animation: list-row-in 0.35s both ease-out;
 }
 
+/* Aurora — slow ambient drift for the blurred backdrop blobs (opt-in via
+   <Aurora animated>). Held still under reduced motion by the global rule below. */
+@keyframes aurora-drift {
+  0%,
+  100% {
+    transform: translate3d(0, 0, 0) scale(1);
+  }
+  50% {
+    transform: translate3d(3%, -3%, 0) scale(1.08);
+  }
+}
+.aurora-drift {
+  animation: aurora-drift 18s ease-in-out infinite;
+}
+
 /* Table row enter/exit fade. */
 .row-enter-active,
 .row-exit-active {

package/dist/ui/Configurator.d.ts

@@ -0,0 +1,76 @@
+import { JSX } from 'solid-js';
+/** A selectable option in a `'select'` group. */
+export interface ConfiguratorOption {
+    value: string;
+    label: string;
+    /** Added to the running total when selected. */
+    price?: number;
+}
+/** A countable item in a `'counter'` group (each with a +/- stepper). */
+export interface ConfiguratorItem {
+    id: string;
+    label: string;
+    /** Added to the total as `price * qty`. */
+    price?: number;
+}
+/** One group of controls. `select` = single choice, `counter` = quantities, `text` = free text. */
+export type ConfiguratorGroup = {
+    type: 'select';
+    name: string;
+    label: string;
+    options: ConfiguratorOption[];
+} | {
+    type: 'counter';
+    name: string;
+    label: string;
+    items: ConfiguratorItem[];
+} | {
+    type: 'text';
+    name: string;
+    label: string;
+    placeholder?: string;
+    maxLength?: number;
+};
+/** The configurator's state: keyed by group `name`. select/text -> string, counter -> `{ [id]: qty }`. */
+export type ConfiguratorState = Record<string, string | Record<string, number>>;
+export interface ConfiguratorProps {
+    groups: ConfiguratorGroup[];
+    value: ConfiguratorState;
+    onChange: (next: ConfiguratorState) => void;
+    /** Format the running total. @default `n => $${n}` */
+    formatTotal?: (total: number) => string;
+    /** Live preview, rendered beside the controls; receives the state and running total. */
+    preview?: (state: ConfiguratorState, total: number) => JSX.Element;
+    /** CTA under the summary (e.g. "add to cart" / "request quote"). */
+    action?: {
+        label: string;
+        onClick?: () => void;
+        href?: string;
+    };
+    class?: string;
+}
+/**
+ * Data-driven product configurator: declare `groups` (select / counter / text),
+ * hold the `value` state in the parent, and get option pickers, quantity
+ * steppers, a live summary with a running total, and an optional `preview`.
+ * Engine-free, fully typed.
+ *
+ * @example
+ * ```tsx
+ * const [cfg, setCfg] = createSignal<ConfiguratorState>({ size: 'm', extras: {} })
+ * <Configurator
+ *   value={cfg()}
+ *   onChange={setCfg}
+ *   groups={[
+ *     { type: 'select', name: 'size', label: 'Tamaño', options: [
+ *       { value: 's', label: 'Chico', price: 320 }, { value: 'm', label: 'Mediano', price: 620 } ] },
+ *     { type: 'counter', name: 'extras', label: 'Extras', items: [
+ *       { id: 'jamon', label: 'Jamón serrano', price: 90 } ] },
+ *     { type: 'text', name: 'nota', label: 'Nota', placeholder: 'Para grabar…' },
+ *   ]}
+ *   preview={(state, total) => <MyPreview state={state} total={total} />}
+ *   action={{ label: 'Solicitar', onClick: submit }}
+ * />
+ * ```
+ */
+export declare function Configurator(props: ConfiguratorProps): JSX.Element;

package/package.json

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

package/preset.js

@@ -35,7 +35,9 @@ const glass = plugin(({ addComponents }) => {
       transition: 'transform .25s cubic-bezier(.16,1,.3,1), box-shadow .25s ease, border-color .2s ease',
     },
     "[data-theme='light'] .card": {
-      background: 'hsl(var(--card) / 0.72)',
+      // A touch more transparent than fully opaque so the frosted blur reads on
+      // light themes (over an Aurora/scenery backdrop) — text stays legible.
+      background: 'hsl(var(--card) / 0.6)',
       border: '1px solid hsl(var(--border))',
     },
 

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.19.0'
+export const A4UI_VERSION = '0.21.0'
 
 // Helpers (src/lib) — generic, framework-level utilities.
 export { cn } from './lib/cn'
@@ -88,6 +88,14 @@ export { Timeline, type TimelineItem, type TimelineTone, type TimelineProps } fr
 export { Rating, type RatingProps } from './ui/Rating'
 export { PricingTable, type PricingTier, type PricingPeriod } from './ui/PricingTable'
 export { BeforeAfter, type BeforeAfterProps } from './ui/BeforeAfter'
+export {
+  Configurator,
+  type ConfiguratorProps,
+  type ConfiguratorGroup,
+  type ConfiguratorState,
+  type ConfiguratorOption,
+  type ConfiguratorItem,
+} from './ui/Configurator'
 export { Empty, type EmptyProps } from './ui/Empty'
 export { Calendar, type CalendarProps } from './ui/Calendar'
 export { Tree, type TreeNode, type TreeProps } from './ui/Tree'
@@ -164,6 +172,7 @@ export { flyToCart, type FlyToCartOptions } from './lib/flyToCart'
 // (Sidebar, Topbar, CompanySwitcher, DemoBanner, CommandPalette) stay in the app.
 export { AppShell } from './layout/AppShell'
 export { SpaceBackground } from './layout/SpaceBackground'
+export { Aurora, type AuroraProps } from './layout/Aurora'
 export { ThemedScenery, type ThemedSceneryProps } from './layout/ThemedScenery'
 export { SnowScenery } from './layout/SnowScenery'
 export { ChristmasBackground } from './layout/ChristmasBackground'

package/src/layout/Aurora.tsx

@@ -0,0 +1,66 @@
+// Aurora — an ambient backdrop of soft, blurred color blobs tinted with the
+// theme tokens (`--primary` / `--accent`). Fixed behind the page so glass
+// surfaces read as glass: as glassy cards scroll over the fixed blobs, their
+// backdrop-blur samples the color behind them. Every theme tints it differently
+// for free. This is the lightweight, no-starfield alternative to
+// `SpaceBackground` / `ThemedScenery`.
+//
+// Usage: render it once at the top of your layout and keep the page root's
+// background transparent (don't put `bg-background` on the root) so the Aurora
+// shows through — the component paints the base background itself.
+import { For, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface AuroraProps {
+  /** Blob opacity multiplier, 0..1 — higher = more visible color. @default 0.45 */
+  intensity?: number
+  /** Slowly drift/scale the blobs. Reduced-motion aware (holds still). @default false */
+  animated?: boolean
+  class?: string
+}
+
+// Static class strings (scanned by Tailwind). token = which theme color; a =
+// per-blob opacity weight, multiplied by `intensity`.
+const BLOBS = [
+  { pos: '-left-40 -top-32', size: 'h-[40rem] w-[40rem]', token: '--primary', a: 1 },
+  { pos: '-right-32 top-1/4', size: 'h-[38rem] w-[38rem]', token: '--accent', a: 0.9 },
+  { pos: 'bottom-[-10%] left-1/3', size: 'h-[36rem] w-[36rem]', token: '--primary', a: 0.75 },
+] as const
+
+/**
+ * Ambient, theme-tinted blurred-blob backdrop that makes glass surfaces read as
+ * glass. Fixed behind the page (paints its own base background); keep the page
+ * root transparent. Reduced-motion aware when `animated`.
+ *
+ * @example
+ * ```tsx
+ * // at the top of your app/layout (root must NOT set its own bg):
+ * <div class="relative min-h-screen text-foreground">
+ *   <Aurora />
+ *   <YourPage />
+ * </div>
+ *
+ * <Aurora intensity={0.6} animated />
+ * ```
+ */
+export function Aurora(props: AuroraProps): JSX.Element {
+  const intensity = (): number => props.intensity ?? 0.45
+  return (
+    <div
+      aria-hidden="true"
+      class={cn('pointer-events-none fixed inset-0 -z-10 overflow-hidden bg-background', props.class)}
+    >
+      <For each={BLOBS}>
+        {(b) => (
+          <div
+            class={cn('absolute rounded-full blur-3xl', b.pos, b.size, props.animated && 'aurora-drift')}
+            style={{
+              background: `radial-gradient(circle, hsl(var(${b.token}) / ${(intensity() * b.a).toFixed(2)}), transparent 70%)`,
+            }}
+          />
+        )}
+      </For>
+    </div>
+  )
+}

package/src/ui/Configurator.tsx

@@ -0,0 +1,215 @@
+// Configurator — a data-driven "pick options -> live preview + running total"
+// builder. Distilled from two templates that hand-rolled the same shape: a
+// laser-engraving customizer (text + product/style pickers) and a charcuterie
+// board builder (size + per-item counters). Controlled: the parent owns the
+// state object; the Configurator renders the group controls, a live summary
+// with a running total, and an optional preview render-prop.
+import type { JSX } from 'solid-js'
+import { createMemo, For, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Button } from './Button'
+
+/** A selectable option in a `'select'` group. */
+export interface ConfiguratorOption {
+  value: string
+  label: string
+  /** Added to the running total when selected. */
+  price?: number
+}
+/** A countable item in a `'counter'` group (each with a +/- stepper). */
+export interface ConfiguratorItem {
+  id: string
+  label: string
+  /** Added to the total as `price * qty`. */
+  price?: number
+}
+
+/** One group of controls. `select` = single choice, `counter` = quantities, `text` = free text. */
+export type ConfiguratorGroup =
+  | { type: 'select'; name: string; label: string; options: ConfiguratorOption[] }
+  | { type: 'counter'; name: string; label: string; items: ConfiguratorItem[] }
+  | { type: 'text'; name: string; label: string; placeholder?: string; maxLength?: number }
+
+/** The configurator's state: keyed by group `name`. select/text -> string, counter -> `{ [id]: qty }`. */
+export type ConfiguratorState = Record<string, string | Record<string, number>>
+
+export interface ConfiguratorProps {
+  groups: ConfiguratorGroup[]
+  value: ConfiguratorState
+  onChange: (next: ConfiguratorState) => void
+  /** Format the running total. @default `n => $${n}` */
+  formatTotal?: (total: number) => string
+  /** Live preview, rendered beside the controls; receives the state and running total. */
+  preview?: (state: ConfiguratorState, total: number) => JSX.Element
+  /** CTA under the summary (e.g. "add to cart" / "request quote"). */
+  action?: { label: string; onClick?: () => void; href?: string }
+  class?: string
+}
+
+const asString = (v: string | Record<string, number> | undefined): string => (typeof v === 'string' ? v : '')
+const asCounts = (v: string | Record<string, number> | undefined): Record<string, number> =>
+  v && typeof v === 'object' ? v : {}
+
+/**
+ * Data-driven product configurator: declare `groups` (select / counter / text),
+ * hold the `value` state in the parent, and get option pickers, quantity
+ * steppers, a live summary with a running total, and an optional `preview`.
+ * Engine-free, fully typed.
+ *
+ * @example
+ * ```tsx
+ * const [cfg, setCfg] = createSignal<ConfiguratorState>({ size: 'm', extras: {} })
+ * <Configurator
+ *   value={cfg()}
+ *   onChange={setCfg}
+ *   groups={[
+ *     { type: 'select', name: 'size', label: 'Tamaño', options: [
+ *       { value: 's', label: 'Chico', price: 320 }, { value: 'm', label: 'Mediano', price: 620 } ] },
+ *     { type: 'counter', name: 'extras', label: 'Extras', items: [
+ *       { id: 'jamon', label: 'Jamón serrano', price: 90 } ] },
+ *     { type: 'text', name: 'nota', label: 'Nota', placeholder: 'Para grabar…' },
+ *   ]}
+ *   preview={(state, total) => <MyPreview state={state} total={total} />}
+ *   action={{ label: 'Solicitar', onClick: submit }}
+ * />
+ * ```
+ */
+export function Configurator(props: ConfiguratorProps): JSX.Element {
+  const fmt = (n: number): string => (props.formatTotal ?? ((x: number) => `$${x}`))(n)
+
+  const total = createMemo(() => {
+    let sum = 0
+    for (const g of props.groups) {
+      if (g.type === 'select') {
+        const chosen = asString(props.value[g.name])
+        sum += g.options.find((o) => o.value === chosen)?.price ?? 0
+      } else if (g.type === 'counter') {
+        const counts = asCounts(props.value[g.name])
+        for (const it of g.items) sum += (it.price ?? 0) * (counts[it.id] ?? 0)
+      }
+    }
+    return sum
+  })
+
+  const setSelect = (name: string, value: string): void => props.onChange({ ...props.value, [name]: value })
+  const setCount = (name: string, id: string, qty: number): void => {
+    const counts = { ...asCounts(props.value[name]) }
+    if (qty <= 0) delete counts[id]
+    else counts[id] = qty
+    props.onChange({ ...props.value, [name]: counts })
+  }
+  const setText = (name: string, value: string): void => props.onChange({ ...props.value, [name]: value })
+
+  const controls = (
+    <div class="space-y-6">
+      <For each={props.groups}>
+        {(g) => (
+          <div>
+            <p class="mb-2 text-sm font-medium text-foreground">{g.label}</p>
+            <Show when={g.type === 'select' && g}>
+              {(sel) => (
+                <div class="flex flex-wrap gap-2">
+                  <For each={sel().options}>
+                    {(o) => (
+                      <button
+                        type="button"
+                        aria-pressed={asString(props.value[sel().name]) === o.value}
+                        onClick={() => setSelect(sel().name, o.value)}
+                        class={cn(
+                          'rounded-lg border px-3 py-1.5 text-sm transition-colors',
+                          asString(props.value[sel().name]) === o.value
+                            ? 'border-primary bg-primary/10 text-primary'
+                            : 'border-border text-muted-foreground hover:text-foreground',
+                        )}
+                      >
+                        {o.label}
+                        <Show when={o.price}>
+                          <span class="ml-1 opacity-70">· {fmt(o.price as number)}</span>
+                        </Show>
+                      </button>
+                    )}
+                  </For>
+                </div>
+              )}
+            </Show>
+            <Show when={g.type === 'counter' && g}>
+              {(cnt) => (
+                <div class="space-y-2">
+                  <For each={cnt().items}>
+                    {(it) => {
+                      const qty = (): number => asCounts(props.value[cnt().name])[it.id] ?? 0
+                      return (
+                        <div class="flex items-center justify-between gap-3">
+                          <span class="text-sm text-foreground">
+                            {it.label}
+                            <Show when={it.price}>
+                              <span class="ml-1 text-muted-foreground">· {fmt(it.price as number)}</span>
+                            </Show>
+                          </span>
+                          <div class="flex items-center gap-2">
+                            <Button
+                              variant="outline"
+                              aria-label={`Quitar ${it.label}`}
+                              onClick={() => setCount(cnt().name, it.id, qty() - 1)}
+                              class="h-8 w-8 p-0"
+                            >
+                              −
+                            </Button>
+                            <span class="w-6 text-center text-sm tabular-nums">{qty()}</span>
+                            <Button
+                              variant="outline"
+                              aria-label={`Agregar ${it.label}`}
+                              onClick={() => setCount(cnt().name, it.id, qty() + 1)}
+                              class="h-8 w-8 p-0"
+                            >
+                              +
+                            </Button>
+                          </div>
+                        </div>
+                      )
+                    }}
+                  </For>
+                </div>
+              )}
+            </Show>
+            <Show when={g.type === 'text' && g}>
+              {(txt) => (
+                <input
+                  type="text"
+                  value={asString(props.value[txt().name])}
+                  maxLength={txt().maxLength}
+                  placeholder={txt().placeholder}
+                  aria-label={txt().label}
+                  onInput={(e) => setText(txt().name, e.currentTarget.value)}
+                  class="w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:ring-2 focus:ring-ring"
+                />
+              )}
+            </Show>
+          </div>
+        )}
+      </For>
+
+      <div class="flex items-center justify-between border-t border-border pt-4">
+        <span class="text-sm text-muted-foreground">Total</span>
+        <span class="text-lg font-semibold text-foreground tabular-nums">{fmt(total())}</span>
+      </div>
+      <Show when={props.action}>
+        {(a) => (
+          <Button ripple href={a().href} onClick={() => a().onClick?.()} class="w-full justify-center">
+            {a().label}
+          </Button>
+        )}
+      </Show>
+    </div>
+  )
+
+  return (
+    <div class={cn('grid gap-6', props.preview ? 'md:grid-cols-2' : '', props.class)}>
+      {controls}
+      <Show when={props.preview}>
+        <div class="min-w-0">{props.preview?.(props.value, total())}</div>
+      </Show>
+    </div>
+  )
+}