@a4ui/core 0.16.0 → 0.18.0

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>
+  )
+}

package/src/ui/Accordion.tsx

@@ -56,7 +56,9 @@ export function Accordion(props: AccordionProps): JSX.Element {
                 </svg>
               </KAccordion.Trigger>
             </KAccordion.Header>
-            <KAccordion.Content class="pb-3 text-sm text-muted-foreground">{item.content}</KAccordion.Content>
+            <KAccordion.Content class="accordion-content text-sm text-muted-foreground">
+              <div class="pb-3">{item.content}</div>
+            </KAccordion.Content>
           </KAccordion.Item>
         )}
       </For>

package/src/ui/Badge.tsx

@@ -2,7 +2,7 @@
 // (flowBadgeProps, statusBadgeTone, priorityBadgeTone, …) stay in the consuming
 // app: they encode business vocabulary (income/expense, project priority, user
 // roles), not design-system concerns.
-import { type JSX, type ParentProps, splitProps } from 'solid-js'
+import { type JSX, type ParentProps, Show, splitProps } from 'solid-js'
 
 import { cn } from '../lib/cn'
 
@@ -23,6 +23,12 @@ const BADGE_BASE =
 interface BadgeProps extends ParentProps {
   /** Visual/semantic tone. Defaults to `'neutral'`. */
   tone?: BadgeTone
+  /**
+   * Show a pinging dot before the label for "live"/"recording"/"online"
+   * states. Tinted with the tone's color (`currentColor`); pure CSS
+   * (`animate-ping`), reduced-motion aware.
+   */
+  pulse?: boolean
   class?: string
 }
 
@@ -37,9 +43,15 @@ interface BadgeProps extends ParentProps {
  * ```
  */
 export function Badge(props: BadgeProps): JSX.Element {
-  const [local, rest] = splitProps(props, ['tone', 'class', 'children'])
+  const [local, rest] = splitProps(props, ['tone', 'class', 'children', 'pulse'])
   return (
     <span class={cn(BADGE_BASE, TONE_CLASSES[local.tone ?? 'neutral'], local.class)} {...rest}>
+      <Show when={local.pulse}>
+        <span class="relative flex h-1.5 w-1.5" aria-hidden="true">
+          <span class="absolute inline-flex h-full w-full animate-ping rounded-full bg-current opacity-75" />
+          <span class="relative inline-flex h-1.5 w-1.5 rounded-full bg-current" />
+        </span>
+      </Show>
       {local.children}
     </span>
   )

package/src/ui/BeforeAfter.tsx

@@ -0,0 +1,162 @@
+// BeforeAfter — an image comparison slider: two images stacked in the same
+// box, the "after" image clipped to a draggable split so dragging the handle
+// reveals more of one and hides the other. Pure signal + CSS `clip-path`
+// (engine-free — no `motion` dependency), same spirit as TiltCard/Spotlight.
+// Dragging is instant (no transition to fight the pointer); clicking the
+// track to jump the split animates smoothly unless reduced motion is on.
+import { createSignal, Show, type JSX } from 'solid-js'
+import { ChevronsLeftRight } from 'lucide-solid'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+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
+}
+
+const clamp = (value: number): number => Math.min(100, Math.max(0, value))
+
+/**
+ * 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 function BeforeAfter(props: BeforeAfterProps): JSX.Element {
+  const [x, setX] = createSignal(clamp(props.start ?? 50))
+  const [dragging, setDragging] = createSignal(false)
+
+  let container: HTMLDivElement | undefined
+
+  const updateFromClientX = (clientX: number): void => {
+    if (!container) return
+    const rect = container.getBoundingClientRect()
+    setX(clamp(((clientX - rect.left) / rect.width) * 100))
+  }
+
+  const onHandlePointerDown = (event: PointerEvent): void => {
+    const handle = event.currentTarget as HTMLElement
+    handle.setPointerCapture(event.pointerId)
+    handle.focus()
+    setDragging(true)
+    updateFromClientX(event.clientX)
+
+    const move = (moveEvent: PointerEvent): void => updateFromClientX(moveEvent.clientX)
+    const release = (): void => {
+      setDragging(false)
+      handle.removeEventListener('pointermove', move)
+      handle.removeEventListener('pointerup', release)
+      handle.removeEventListener('lostpointercapture', release)
+    }
+    handle.addEventListener('pointermove', move)
+    handle.addEventListener('pointerup', release)
+    handle.addEventListener('lostpointercapture', release)
+    event.preventDefault()
+  }
+
+  const onTrackClick = (event: MouseEvent): void => {
+    updateFromClientX(event.clientX)
+  }
+
+  const onKeyDown = (event: KeyboardEvent): void => {
+    const step = event.shiftKey ? 10 : 2
+    if (event.key === 'ArrowLeft' || event.key === 'ArrowDown') {
+      event.preventDefault()
+      setX((value) => clamp(value - step))
+    } else if (event.key === 'ArrowRight' || event.key === 'ArrowUp') {
+      event.preventDefault()
+      setX((value) => clamp(value + step))
+    } else if (event.key === 'Home') {
+      event.preventDefault()
+      setX(0)
+    } else if (event.key === 'End') {
+      event.preventDefault()
+      setX(100)
+    }
+  }
+
+  const transitionClass = () =>
+    !dragging() && !motionReduced() ? 'transition-[clip-path] duration-200 ease-out' : ''
+
+  return (
+    <div
+      ref={container}
+      class={cn('relative aspect-video w-full select-none overflow-hidden', props.class)}
+      onClick={onTrackClick}
+    >
+      <img
+        src={props.before}
+        alt=""
+        aria-hidden="true"
+        draggable={false}
+        class="absolute inset-0 h-full w-full object-cover"
+      />
+      <img
+        src={props.after}
+        alt={props.alt}
+        draggable={false}
+        class={cn('absolute inset-0 h-full w-full object-cover', transitionClass())}
+        style={{ 'clip-path': `inset(0 ${100 - x()}% 0 0)` }}
+      />
+
+      <Show when={props.labels}>
+        {(labels) => (
+          <>
+            <span class="pointer-events-none absolute bottom-3 left-3 rounded-md border border-border bg-background/70 px-2 py-1 text-xs font-medium text-foreground backdrop-blur-sm">
+              {labels()[0]}
+            </span>
+            <span class="pointer-events-none absolute bottom-3 right-3 rounded-md border border-border bg-background/70 px-2 py-1 text-xs font-medium text-foreground backdrop-blur-sm">
+              {labels()[1]}
+            </span>
+          </>
+        )}
+      </Show>
+
+      <div
+        role="slider"
+        tabindex={0}
+        aria-label={props.alt}
+        aria-orientation="horizontal"
+        aria-valuemin={0}
+        aria-valuemax={100}
+        aria-valuenow={Math.round(x())}
+        onPointerDown={onHandlePointerDown}
+        onKeyDown={onKeyDown}
+        onClick={(event) => event.stopPropagation()}
+        class={cn(
+          'group absolute inset-y-0 flex w-8 -translate-x-1/2 cursor-ew-resize touch-none items-center justify-center',
+          "before:pointer-events-none before:absolute before:inset-y-0 before:left-1/2 before:w-px before:-translate-x-1/2 before:bg-background before:content-['']",
+          'focus-visible:outline-none',
+        )}
+        style={{ left: `${x()}%` }}
+      >
+        <span class="grid h-8 w-8 place-items-center rounded-full border border-border bg-background text-foreground shadow-md group-focus-visible:ring-2 group-focus-visible:ring-primary group-focus-visible:ring-offset-2 group-focus-visible:ring-offset-background">
+          <ChevronsLeftRight class="h-4 w-4" />
+        </span>
+      </div>
+    </div>
+  )
+}

package/src/ui/Carousel.tsx

@@ -13,6 +13,12 @@ export interface CarouselProps {
   slides: JSX.Element[]
   /** Auto-advance interval in ms. Omit to disable autoplay (also skipped under reduced motion / hover). */
   autoplayMs?: number
+  /**
+   * Drag/touch to swipe between slides (in addition to arrows, dots, and arrow
+   * keys). The track follows the pointer and snaps on release — pure CSS, no
+   * engine. @default true
+   */
+  swipe?: boolean
   class?: string
 }
 
@@ -52,6 +58,34 @@ export function Carousel(props: CarouselProps): JSX.Element {
     }
   }
 
+  // --- drag/touch swipe (engine-free; the track follows the pointer, then the
+  // CSS transition snaps to the resolved slide on release) -------------------
+  const swipeOn = (): boolean => props.swipe !== false
+  let viewport: HTMLDivElement | undefined
+  const [dragging, setDragging] = createSignal(false)
+  const [dragPx, setDragPx] = createSignal(0)
+  let startX = 0
+
+  const onPointerDown = (e: PointerEvent): void => {
+    if (!swipeOn() || count() < 2) return
+    startX = e.clientX
+    setDragging(true)
+    ;(e.currentTarget as HTMLElement).setPointerCapture(e.pointerId)
+  }
+  const onPointerMove = (e: PointerEvent): void => {
+    if (dragging()) setDragPx(e.clientX - startX)
+  }
+  const endDrag = (): void => {
+    if (!dragging()) return
+    const width = viewport?.clientWidth ?? 1
+    const dx = dragPx()
+    const threshold = Math.max(48, width * 0.2)
+    if (dx <= -threshold) next()
+    else if (dx >= threshold) prev()
+    setDragPx(0)
+    setDragging(false)
+  }
+
   // --- autoplay (paused on hover, skipped under reduced motion) --------------
   const [paused, setPaused] = createSignal(false)
   onMount(() => {
@@ -75,10 +109,21 @@ export function Carousel(props: CarouselProps): JSX.Element {
       onPointerEnter={() => setPaused(true)}
       onPointerLeave={() => setPaused(false)}
     >
-      <div class="relative overflow-hidden rounded-xl border border-border bg-card text-foreground">
+      <div
+        ref={viewport}
+        class="relative overflow-hidden rounded-xl border border-border bg-card text-foreground"
+      >
         <div
-          class="flex transition-transform duration-500 ease-out"
-          style={{ transform: `translateX(-${index() * 100}%)` }}
+          class={cn(
+            'flex',
+            swipeOn() && count() > 1 && 'touch-pan-y cursor-grab active:cursor-grabbing',
+            !dragging() && 'transition-transform duration-500 ease-out',
+          )}
+          style={{ transform: `translateX(calc(-${index() * 100}% + ${dragPx()}px))` }}
+          onPointerDown={onPointerDown}
+          onPointerMove={onPointerMove}
+          onPointerUp={endDrag}
+          onPointerCancel={endDrag}
         >
           <For each={props.slides}>{(slide) => <div class="w-full shrink-0">{slide}</div>}</For>
         </div>

package/src/ui/Collapse.tsx

@@ -1,7 +1,6 @@
 // Single controlled collapsible region with a toggle header.
 import { ChevronDown } from 'lucide-solid'
 import type { JSX, ParentProps } from 'solid-js'
-import { Show } from 'solid-js'
 import { cn } from '../lib/cn'
 
 interface CollapseProps extends ParentProps {
@@ -40,9 +39,19 @@ export function Collapse(props: CollapseProps): JSX.Element {
           class={cn('h-4 w-4 shrink-0 transition-transform duration-200', props.open && 'rotate-180')}
         />
       </button>
-      <Show when={props.open}>
-        <div class="px-3 py-2 text-sm text-muted-foreground">{props.children}</div>
-      </Show>
+      {/* grid-rows 0fr->1fr animates the panel height with pure CSS (no measuring,
+          no engine); the inner div is `overflow-hidden` so the collapsed content
+          is clipped, not just transparent. */}
+      <div
+        class={cn(
+          'grid transition-[grid-template-rows] duration-200 ease-out motion-reduce:transition-none',
+          props.open ? 'grid-rows-[1fr]' : 'grid-rows-[0fr]',
+        )}
+      >
+        <div class="overflow-hidden">
+          <div class="px-3 py-2 text-sm text-muted-foreground">{props.children}</div>
+        </div>
+      </div>
     </div>
   )
 }

package/src/ui/FloatingActionButton.tsx

@@ -1,6 +1,7 @@
 import type { JSX } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { spawnRipple } from './Ripple'
 
 /** Screen corner a {@link FloatingActionButton} anchors to. Defaults to `'bottom-right'`. */
 export type FloatingActionButtonPosition = 'bottom-right' | 'bottom-left'
@@ -23,6 +24,12 @@ export interface FloatingActionButtonProps {
   onClick?: () => void
   /** Screen corner to anchor to. Defaults to `'bottom-right'`. */
   position?: FloatingActionButtonPosition
+  /**
+   * Material-style click ripple from the press position. Engine-free (Web
+   * Animations API, shared with {@link spawnRipple}) and reduced-motion aware —
+   * costs nothing when off.
+   */
+  ripple?: boolean
   class?: string
 }
 
@@ -40,7 +47,15 @@ export function FloatingActionButton(props: FloatingActionButtonProps): JSX.Elem
       type="button"
       aria-label={props.label}
       onClick={() => props.onClick?.()}
-      class={cn(FAB_BASE, POSITION_CLASSES[props.position ?? 'bottom-right'], props.class)}
+      onPointerDown={(event) => {
+        if (props.ripple) spawnRipple(event.currentTarget, event, { opacity: 0.35 })
+      }}
+      class={cn(
+        FAB_BASE,
+        POSITION_CLASSES[props.position ?? 'bottom-right'],
+        props.ripple && 'relative overflow-hidden',
+        props.class,
+      )}
     >
       {props.icon}
     </button>

package/src/ui/Image.tsx

@@ -8,6 +8,7 @@ import type { JSX } from 'solid-js'
 import { createSignal, Show } from 'solid-js'
 
 import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
 
 export interface ImageProps {
   src: string
@@ -15,6 +16,12 @@ export interface ImageProps {
   class?: string
   /** When true, clicking the image opens a zoomable lightbox. @default true */
   preview?: boolean
+  /**
+   * Reveal the thumbnail with a blur-up: it starts blurred and slightly scaled,
+   * then eases to sharp once the image finishes loading. Pure CSS transition,
+   * no-op under reduced motion. @default false
+   */
+  blurUp?: boolean
 }
 
 /**
@@ -32,8 +39,29 @@ export function Image(props: ImageProps): JSX.Element {
   const [open, setOpen] = createSignal(false)
   const preview = () => props.preview !== false
 
+  // blur-up: hidden behind the blur until `load` fires (or immediately, if the
+  // image is already cached or reduced motion is on).
+  const [loaded, setLoaded] = createSignal(false)
+  const blurUp = () => props.blurUp === true && !motionReduced()
+  const revealed = () => !blurUp() || loaded()
+
   const img = (
-    <img src={props.src} alt={props.alt} loading="lazy" class={cn('rounded-lg object-cover', props.class)} />
+    <img
+      src={props.src}
+      alt={props.alt}
+      loading="lazy"
+      onLoad={() => setLoaded(true)}
+      ref={(el) => {
+        // A cached image can be complete before `onLoad` binds — reveal it now.
+        if (el.complete) setLoaded(true)
+      }}
+      class={cn(
+        'rounded-lg object-cover',
+        blurUp() && 'transition-[filter,transform] duration-500 ease-out',
+        blurUp() && !revealed() && 'scale-[1.03] blur-lg',
+        props.class,
+      )}
+    />
   )
 
   return (

package/src/ui/List.tsx

@@ -16,6 +16,11 @@ export interface ListItem {
 
 interface ListProps {
   items: ListItem[]
+  /**
+   * Cascade the rows in on mount — each row fades/slides up staggered by its
+   * index. Pure CSS (`list-row-stagger`), reduced-motion aware. @default false
+   */
+  stagger?: boolean
   class?: string
 }
 
@@ -46,8 +51,11 @@ export function List(props: ListProps): JSX.Element {
   return (
     <ul class={cn('divide-y divide-border rounded-lg border border-border', props.class)}>
       <For each={props.items}>
-        {(item) => (
-          <li class="flex items-center gap-3 px-4 py-3">
+        {(item, i) => (
+          <li
+            class={cn('flex items-center gap-3 px-4 py-3', props.stagger && 'list-row-stagger')}
+            style={props.stagger ? { 'animation-delay': `${i() * 60}ms` } : undefined}
+          >
             <Show when={item.avatar}>
               <div class="shrink-0">{item.avatar}</div>
             </Show>