@a4ui/core 0.17.0 → 0.18.0

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/PricingTable.tsx

@@ -0,0 +1,196 @@
+// PricingTable — a responsive grid of pricing tiers, each a Card with a
+// feature checklist and a CTA Button. When any tier carries an annual price,
+// a monthly/annual toggle renders above the grid (controlled or uncontrolled).
+import { Check } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show, createSignal, splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { Badge } from './Badge'
+import { Button } from './Button'
+import { Card, CardContent, CardHeader, CardTitle } from './Card'
+import { spawnRipple } from './Ripple'
+
+// Mirrors Button's `primary`/`outline` classes for the `href` case, where the
+// CTA must render as an `<a>` — Button itself only renders a `<button>`.
+const CTA_LINK_BASE =
+  'relative inline-flex w-full items-center justify-center overflow-hidden rounded-md px-3 py-2 text-sm font-medium transition-[color,background-color,transform] duration-150 active:scale-[0.97] focus:outline-none focus:ring-2 focus:ring-ring'
+const CTA_LINK_VARIANT = {
+  primary: 'bg-primary text-primary-foreground hover:bg-primary/90',
+  outline: 'border border-border bg-transparent text-foreground hover:bg-muted',
+}
+
+/** 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 function PricingTable(props: PricingTableProps): JSX.Element {
+  const [local] = splitProps(props, ['tiers', 'period', 'onPeriodChange', 'class'])
+
+  const [internalPeriod, setInternalPeriod] = createSignal<PricingPeriod>('monthly')
+  const period = () => local.period ?? internalPeriod()
+  const setPeriod = (next: PricingPeriod) => {
+    if (local.period === undefined) setInternalPeriod(next)
+    local.onPeriodChange?.(next)
+  }
+
+  const showToggle = () => local.tiers.some((tier) => tier.priceAnnual !== undefined)
+  const priceFor = (tier: PricingTier) =>
+    period() === 'annual' ? (tier.priceAnnual ?? tier.price) : tier.price
+
+  return (
+    <div class={cn('flex flex-col items-center gap-8', local.class)}>
+      <Show when={showToggle()}>
+        <div class="inline-flex items-center gap-1 rounded-full border border-border bg-muted/40 p-1 text-sm">
+          <button
+            type="button"
+            class={cn(
+              'rounded-full px-3 py-1.5 font-medium transition-colors',
+              period() === 'monthly'
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+            aria-pressed={period() === 'monthly'}
+            onClick={() => setPeriod('monthly')}
+          >
+            Monthly
+          </button>
+          <button
+            type="button"
+            class={cn(
+              'rounded-full px-3 py-1.5 font-medium transition-colors',
+              period() === 'annual'
+                ? 'bg-primary text-primary-foreground'
+                : 'text-muted-foreground hover:text-foreground',
+            )}
+            aria-pressed={period() === 'annual'}
+            onClick={() => setPeriod('annual')}
+          >
+            Annual
+          </button>
+        </div>
+      </Show>
+
+      <div class="grid w-full gap-6 sm:grid-cols-2 lg:grid-cols-3">
+        <For each={local.tiers}>
+          {(tier) => (
+            <Card
+              glass={tier.highlighted}
+              class={cn('relative flex flex-col', tier.highlighted && 'ring-2 ring-primary')}
+            >
+              <Show when={tier.highlighted}>
+                <Badge tone="info" class="absolute -top-3 right-6">
+                  Popular
+                </Badge>
+              </Show>
+              <CardHeader>
+                <CardTitle>{tier.name}</CardTitle>
+                <Show when={tier.description}>
+                  <p class="text-sm text-muted-foreground">{tier.description}</p>
+                </Show>
+                <p class="pt-2 text-3xl font-bold text-foreground">{priceFor(tier)}</p>
+              </CardHeader>
+              <CardContent class="flex flex-1 flex-col gap-6">
+                <ul class="flex flex-1 flex-col gap-2">
+                  <For each={tier.features}>
+                    {(feature) => (
+                      <li class="flex items-start gap-2 text-sm text-foreground">
+                        <Check class="mt-0.5 h-4 w-4 shrink-0 text-primary" aria-hidden="true" />
+                        {feature}
+                      </li>
+                    )}
+                  </For>
+                </ul>
+                <Show when={tier.cta}>
+                  {(cta) => (
+                    <Show
+                      when={cta().href}
+                      fallback={
+                        <Button
+                          ripple
+                          onClick={cta().onClick}
+                          variant={tier.highlighted ? 'primary' : 'outline'}
+                          class="w-full"
+                        >
+                          {cta().label}
+                        </Button>
+                      }
+                    >
+                      {(href) => (
+                        <a
+                          href={href()}
+                          onClick={cta().onClick}
+                          onPointerDown={(event) =>
+                            spawnRipple(event.currentTarget, event, { opacity: 0.35 })
+                          }
+                          class={cn(
+                            CTA_LINK_BASE,
+                            CTA_LINK_VARIANT[tier.highlighted ? 'primary' : 'outline'],
+                          )}
+                        >
+                          {cta().label}
+                        </a>
+                      )}
+                    </Show>
+                  )}
+                </Show>
+              </CardContent>
+            </Card>
+          )}
+        </For>
+      </div>
+    </div>
+  )
+}