@a4ui/core 0.11.1 → 0.13.0

package/src/ui/ContextMenu.tsx

@@ -0,0 +1,58 @@
+// Right-click menu on Kobalte's ContextMenu primitive. `children` is the target.
+import { ContextMenu as KContextMenu } from '@kobalte/core/context-menu'
+import type { JSX, ParentProps } from 'solid-js'
+import { For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single actionable row rendered by {@link ContextMenu}. */
+export interface ContextMenuItem {
+  label: string
+  /** Called when the item is chosen (click or keyboard activation). */
+  onSelect: () => void
+  /** Styles the label as a destructive action (e.g. "Delete"). */
+  destructive?: boolean
+  disabled?: boolean
+}
+
+interface ContextMenuProps extends ParentProps {
+  items: ContextMenuItem[]
+  class?: string
+}
+
+/**
+ * Right-click (or long-press) menu built on Kobalte's `ContextMenu`
+ * primitive. `children` is the element that acts as the trigger/target area.
+ *
+ * @example
+ * ```tsx
+ * <ContextMenu items={[{ label: 'Rename', onSelect: rename }, { label: 'Delete', onSelect: remove, destructive: true }]}>
+ *   <div class="rounded border p-4">Right-click me</div>
+ * </ContextMenu>
+ * ```
+ */
+export function ContextMenu(props: ContextMenuProps): JSX.Element {
+  return (
+    <KContextMenu>
+      <KContextMenu.Trigger class={cn('inline-flex', props.class)}>{props.children}</KContextMenu.Trigger>
+      <KContextMenu.Portal>
+        <KContextMenu.Content class="z-50 min-w-[10rem] overflow-hidden rounded-md border border-border bg-card p-1 text-card-foreground shadow-sm">
+          <For each={props.items}>
+            {(item) => (
+              <KContextMenu.Item
+                class={cn(
+                  'cursor-pointer select-none rounded-sm px-2 py-1.5 text-sm outline-none hover:bg-muted data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+                  item.destructive && 'text-destructive',
+                )}
+                disabled={item.disabled}
+                onSelect={item.onSelect}
+              >
+                {item.label}
+              </KContextMenu.Item>
+            )}
+          </For>
+        </KContextMenu.Content>
+      </KContextMenu.Portal>
+    </KContextMenu>
+  )
+}

package/src/ui/Countdown.tsx

@@ -0,0 +1,123 @@
+// Live countdown to a target Date, rendered as four Days/Hours/Mins/Secs cells.
+// A single setInterval (started in onMount, cleared in onCleanup) ticks a signal
+// once per second; remaining ms is clamped at 0 and `onComplete` fires exactly
+// once when the target is reached. Each digit is an odometer-style roller: the
+// column of 0–9 slides so the active digit sits in the viewport, so a decreasing
+// countdown rolls the new number in from the top — like an old flip clock.
+//
+// Digit/cell slots use <Index> (keyed by position, not value) so they persist
+// across ticks and the CSS transform transition actually animates instead of the
+// node being torn down and recreated each second.
+//
+// The target instant is captured once (createMemo): a parent JSX expression like
+// `to={new Date(Date.now() + X)}` compiles to a getter Solid re-evaluates on each
+// access, which would otherwise pin "remaining" at X forever. Memoizing reads it
+// a single time (and still updates if `to` is backed by a real signal).
+import { createMemo, createSignal, Index, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface CountdownProps {
+  /** Target moment the countdown runs toward. */
+  to: Date
+  /** Called once, the moment the countdown reaches zero. */
+  onComplete?: () => void
+  class?: string
+}
+
+const MS_PER_SECOND = 1000
+const MS_PER_MINUTE = 60 * MS_PER_SECOND
+const MS_PER_HOUR = 60 * MS_PER_MINUTE
+const MS_PER_DAY = 24 * MS_PER_HOUR
+const DIGITS = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]
+
+const pad = (n: number): string => String(n).padStart(2, '0')
+
+/** One odometer digit: a 0–9 column shifted so `char`'s row fills the viewport. */
+function Digit(props: { char: string }): JSX.Element {
+  const digit = () => (props.char >= '0' && props.char <= '9' ? Number(props.char) : 0)
+  return (
+    <span class="relative inline-block h-[1em] w-[0.62em] overflow-hidden align-top">
+      <span
+        class="absolute inset-x-0 top-0 flex flex-col transition-transform duration-500 ease-out"
+        style={{ transform: `translateY(${digit() * -10}%)` }}
+      >
+        <Index each={DIGITS}>
+          {(d) => <span class="block h-[1em] text-center leading-none">{d()}</span>}
+        </Index>
+      </span>
+    </span>
+  )
+}
+
+/** Render a value string as a row of rolling digits (stable slots per position). */
+function Rollers(props: { value: string }): JSX.Element {
+  const chars = () => props.value.split('')
+  return (
+    <span class="flex text-2xl font-bold tabular-nums text-foreground">
+      <Index each={chars()}>{(char) => <Digit char={char()} />}</Index>
+    </span>
+  )
+}
+
+/**
+ * Live countdown to `props.to`, shown as four cells (Days / Hours / Mins /
+ * Secs). Updates every second and calls `props.onComplete` once when it hits
+ * zero. Each digit rolls like an old flip clock as it changes. Hours, minutes,
+ * and seconds are zero-padded to two digits.
+ *
+ * @example
+ * ```tsx
+ * <Countdown to={new Date(Date.now() + 86_400_000)} onComplete={() => launch()} />
+ * ```
+ */
+export function Countdown(props: CountdownProps): JSX.Element {
+  // Read the target instant once (see file header on why this must be memoized).
+  const target = createMemo(() => props.to.getTime())
+  const remainingOf = () => Math.max(0, target() - Date.now())
+  const [remaining, setRemaining] = createSignal(remainingOf())
+
+  let completed = false
+  const notifyIfDone = (ms: number) => {
+    if (ms <= 0 && !completed) {
+      completed = true
+      props.onComplete?.()
+    }
+  }
+  // eslint-disable-next-line solid/reactivity -- one-time check at setup for an already-elapsed target
+  notifyIfDone(remaining())
+
+  onMount(() => {
+    const id = setInterval(() => {
+      const ms = remainingOf()
+      setRemaining(ms)
+      notifyIfDone(ms)
+    }, MS_PER_SECOND)
+    onCleanup(() => clearInterval(id))
+  })
+
+  const days = () => Math.floor(remaining() / MS_PER_DAY)
+  const hours = () => Math.floor((remaining() % MS_PER_DAY) / MS_PER_HOUR)
+  const minutes = () => Math.floor((remaining() % MS_PER_HOUR) / MS_PER_MINUTE)
+  const seconds = () => Math.floor((remaining() % MS_PER_MINUTE) / MS_PER_SECOND)
+
+  const cells = (): { label: string; value: string }[] => [
+    { label: 'Days', value: String(days()) },
+    { label: 'Hours', value: pad(hours()) },
+    { label: 'Mins', value: pad(minutes()) },
+    { label: 'Secs', value: pad(seconds()) },
+  ]
+
+  return (
+    <div class={cn('flex gap-4', props.class)}>
+      <Index each={cells()}>
+        {(cell) => (
+          <div class="flex flex-col items-center">
+            <Rollers value={cell().value} />
+            <span class="text-[10px] uppercase tracking-wide text-muted-foreground">{cell().label}</span>
+          </div>
+        )}
+      </Index>
+    </div>
+  )
+}

package/src/ui/Curtain.tsx

@@ -0,0 +1,348 @@
+// Curtain — a controlled, full-screen cover→uncover transition primitive for
+// page/route transitions. It collapses motion.dev's "curtains" example family
+// (fade, sliding doors, blinds, shutter, iris, clip-wipe, pixels) into one component driven by a
+// single `show` boolean: `true` plays the "cover" animation (the curtain
+// closes over the screen), `false` plays "uncover" (the curtain opens,
+// revealing whatever's behind it). Swap your route content while covered —
+// `onCovered` fires the instant the screen is fully masked, `onRevealed`
+// once it's fully open again.
+import { createEffect, createSignal, For, Index, on, onCleanup, onMount, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced, stagger } from '../lib/motion'
+
+export type CurtainVariant = 'fade' | 'doors' | 'blinds' | 'iris' | 'shutter' | 'clip' | 'pixels'
+
+export interface CurtainProps {
+  /** true = cover the screen; false = uncover (reveal content). */
+  show: boolean
+  /** Which wipe style. @default 'fade' */
+  variant?: CurtainVariant
+  /** Overlay color (CSS color / var). @default 'hsl(var(--background))' */
+  color?: string
+  /** Seconds for one direction. @default 0.6 */
+  duration?: number
+  /** Called once the screen is fully covered (show went true→covered). */
+  onCovered?: () => void
+  /** Called once fully uncovered (show went false→revealed). */
+  onRevealed?: () => void
+  class?: string
+}
+
+interface CurtainControls {
+  finished: Promise<unknown>
+  stop: () => void
+}
+
+type CurtainPhase = 'covered' | 'uncovered' | 'covering' | 'uncovering'
+
+const STRIP_COUNT = 8
+const STRIP_INDICES = Array.from({ length: STRIP_COUNT }, (_, i) => i)
+
+// `pixels` variant: a grid of tiles that pop in/out in a diagonal cascade.
+const PIXEL_COLS = 10
+const PIXEL_ROWS = 6
+const PIXEL_COUNT = PIXEL_COLS * PIXEL_ROWS
+const PIXEL_INDICES = Array.from({ length: PIXEL_COUNT }, (_, i) => i)
+
+function combine(controls: CurtainControls[]): CurtainControls {
+  return {
+    finished: Promise.all(controls.map((c) => c.finished)),
+    stop: () => {
+      for (const c of controls) c.stop()
+    },
+  }
+}
+
+/**
+ * A controlled full-screen curtain for page/route transitions. Set `show` to
+ * `true` to cover the viewport, `false` to uncover it, and swap your route
+ * content while covered. `variant` picks the wipe style — fade, sliding
+ * doors, blinds, shutter (vertical blinds), iris/circle wipe, a left-to-right
+ * clip wipe, or a pixel-grid cascade —
+ * `onCovered` / `onRevealed` fire once each transition finishes so you can
+ * swap content at exactly the right moment. Skips the animation (and still
+ * fires the callback on the next microtask) under reduced motion.
+ *
+ * @example
+ * ```tsx
+ * const [covered, setCovered] = createSignal(false)
+ * const goTo = (path: string) => setCovered(true)
+ * return (
+ *   <>
+ *     <Curtain
+ *       show={covered()}
+ *       variant="iris"
+ *       onCovered={() => { loadRoute(); setCovered(false) }}
+ *     />
+ *     <Router />
+ *   </>
+ * )
+ * ```
+ */
+export function Curtain(props: CurtainProps): JSX.Element {
+  // eslint-disable-next-line solid/reactivity -- initial seed only; reactivity handled in the createEffect below
+  const [phase, setPhase] = createSignal<CurtainPhase>(props.show ? 'covered' : 'uncovered')
+
+  let controls: CurtainControls | undefined
+  let panelA: HTMLDivElement | undefined
+  let panelB: HTMLDivElement | undefined
+  const strips: (HTMLDivElement | undefined)[] = []
+
+  const color = () => props.color ?? 'hsl(var(--background))'
+
+  function applyFinalState(variant: CurtainVariant, show: boolean): void {
+    switch (variant) {
+      case 'fade':
+        if (panelA) panelA.style.opacity = show ? '1' : '0'
+        break
+      case 'doors':
+        if (panelA) panelA.style.transform = show ? 'translateX(0%)' : 'translateX(-100%)'
+        if (panelB) panelB.style.transform = show ? 'translateX(0%)' : 'translateX(100%)'
+        break
+      case 'blinds':
+        for (const el of strips.slice(0, STRIP_COUNT))
+          if (el) el.style.transform = show ? 'scaleY(1)' : 'scaleY(0)'
+        break
+      case 'shutter':
+        for (const el of strips.slice(0, STRIP_COUNT))
+          if (el) el.style.transform = show ? 'scaleX(1)' : 'scaleX(0)'
+        break
+      case 'iris':
+        if (panelA) panelA.style.clipPath = show ? 'circle(150% at 50% 50%)' : 'circle(0% at 50% 50%)'
+        break
+      case 'clip':
+        if (panelA) panelA.style.clipPath = show ? 'inset(0 0 0 0)' : 'inset(0 100% 0 0)'
+        break
+      case 'pixels':
+        for (const el of strips.slice(0, PIXEL_COUNT)) if (el) el.style.opacity = show ? '1' : '0'
+        break
+    }
+  }
+
+  function play(variant: CurtainVariant, show: boolean, duration: number): CurtainControls | undefined {
+    const ease = 'easeInOut' as const
+
+    switch (variant) {
+      case 'fade': {
+        if (!panelA) return undefined
+        return animate(panelA, { opacity: show ? [0, 1] : [1, 0] }, { duration, ease })
+      }
+      case 'doors': {
+        if (!panelA || !panelB) return undefined
+        const left = animate(panelA, { x: show ? ['-100%', '0%'] : ['0%', '-100%'] }, { duration, ease })
+        const right = animate(panelB, { x: show ? ['100%', '0%'] : ['0%', '100%'] }, { duration, ease })
+        return combine([left, right])
+      }
+      case 'blinds': {
+        const els = strips.slice(0, STRIP_COUNT).filter((el): el is HTMLDivElement => el !== undefined)
+        if (els.length === 0) return undefined
+        return animate(els, { scaleY: show ? [0, 1] : [1, 0] }, { duration, delay: stagger(0.05), ease })
+      }
+      case 'shutter': {
+        const els = strips.slice(0, STRIP_COUNT).filter((el): el is HTMLDivElement => el !== undefined)
+        if (els.length === 0) return undefined
+        return animate(els, { scaleX: show ? [0, 1] : [1, 0] }, { duration, delay: stagger(0.05), ease })
+      }
+      case 'iris': {
+        if (!panelA) return undefined
+        return animate(
+          panelA,
+          {
+            clipPath: show
+              ? ['circle(0% at 50% 50%)', 'circle(150% at 50% 50%)']
+              : ['circle(150% at 50% 50%)', 'circle(0% at 50% 50%)'],
+          },
+          { duration, ease },
+        )
+      }
+      case 'clip': {
+        if (!panelA) return undefined
+        return animate(
+          panelA,
+          {
+            clipPath: show
+              ? ['inset(0 100% 0 0)', 'inset(0 0 0 0)']
+              : ['inset(0 0 0 0)', 'inset(0 100% 0 0)'],
+          },
+          { duration, ease },
+        )
+      }
+      case 'pixels': {
+        const els = strips.slice(0, PIXEL_COUNT).filter((el): el is HTMLDivElement => el !== undefined)
+        if (els.length === 0) return undefined
+        return animate(
+          els,
+          { opacity: show ? [0, 1] : [1, 0] },
+          { duration: duration * 0.5, delay: stagger(0.01, { from: 'first' }), ease },
+        )
+      }
+      default:
+        return undefined
+    }
+  }
+
+  // Initial paint: the panels' inline styles already sit in the "uncovered"
+  // pose, so we only need to snap them to "covered" when show starts true. No
+  // animation on mount — that would flash the curtain in from its covered pose.
+  onMount(() => {
+    if (props.show) applyFinalState(props.variant ?? 'fade', true)
+  })
+
+  // Animate ONLY when `show` actually toggles (defer skips the mount run; variant
+  // and duration are read untracked so switching variant while idle never plays).
+  createEffect(
+    on(
+      () => props.show,
+      (show) => {
+        const variant = props.variant ?? 'fade'
+        const duration = props.duration ?? 0.6
+
+        controls?.stop()
+        controls = undefined
+        setPhase(show ? 'covering' : 'uncovering')
+
+        const settle = () => {
+          setPhase(show ? 'covered' : 'uncovered')
+          if (show) props.onCovered?.()
+          else props.onRevealed?.()
+        }
+
+        if (motionReduced()) {
+          applyFinalState(variant, show)
+          queueMicrotask(settle)
+          return
+        }
+
+        const played = play(variant, show, duration)
+        if (!played) {
+          queueMicrotask(settle)
+          return
+        }
+
+        controls = played
+        played.finished.then(settle).catch(() => {})
+      },
+      { defer: true },
+    ),
+  )
+
+  onCleanup(() => controls?.stop())
+
+  return (
+    <div
+      class={cn('pointer-events-none fixed inset-0 z-[9999]', props.class)}
+      aria-hidden="true"
+      data-curtain-variant={props.variant ?? 'fade'}
+      data-curtain-state={phase()}
+    >
+      {(props.variant ?? 'fade') === 'fade' && (
+        <div
+          class="absolute inset-0"
+          style={{ position: 'absolute', opacity: 0, background: color() }}
+          ref={(el) => {
+            panelA = el
+          }}
+        />
+      )}
+
+      {(props.variant ?? 'fade') === 'doors' && (
+        <>
+          <div
+            class="absolute inset-y-0 left-0 w-1/2"
+            style={{ position: 'absolute', transform: 'translateX(-100%)', background: color() }}
+            ref={(el) => {
+              panelA = el
+            }}
+          />
+          <div
+            class="absolute inset-y-0 right-0 w-1/2"
+            style={{ position: 'absolute', transform: 'translateX(100%)', background: color() }}
+            ref={(el) => {
+              panelB = el
+            }}
+          />
+        </>
+      )}
+
+      {(props.variant ?? 'fade') === 'blinds' && (
+        <Index each={STRIP_INDICES}>
+          {(_, index) => (
+            <div
+              class="absolute left-0 h-[12.5%] w-full origin-top"
+              style={{
+                position: 'absolute',
+                top: `${index * 12.5}%`,
+                transform: 'scaleY(0)',
+                background: color(),
+              }}
+              ref={(el) => {
+                strips[index] = el
+              }}
+            />
+          )}
+        </Index>
+      )}
+
+      {(props.variant ?? 'fade') === 'shutter' && (
+        <For each={STRIP_INDICES}>
+          {(_, index) => (
+            <div
+              class="absolute top-0 h-full w-[12.5%] origin-left"
+              style={{
+                position: 'absolute',
+                left: `${index() * 12.5}%`,
+                transform: 'scaleX(0)',
+                background: color(),
+              }}
+              ref={(el) => {
+                strips[index()] = el
+              }}
+            />
+          )}
+        </For>
+      )}
+
+      {(props.variant ?? 'fade') === 'iris' && (
+        <div
+          class="absolute inset-0"
+          style={{ position: 'absolute', 'clip-path': 'circle(0% at 50% 50%)', background: color() }}
+          ref={(el) => {
+            panelA = el
+          }}
+        />
+      )}
+
+      {(props.variant ?? 'fade') === 'clip' && (
+        <div
+          class="absolute inset-0"
+          style={{ position: 'absolute', 'clip-path': 'inset(0 100% 0 0)', background: color() }}
+          ref={(el) => {
+            panelA = el
+          }}
+        />
+      )}
+
+      {(props.variant ?? 'fade') === 'pixels' && (
+        <div
+          class="absolute inset-0 grid"
+          style={{
+            'grid-template-columns': `repeat(${PIXEL_COLS}, 1fr)`,
+            'grid-template-rows': `repeat(${PIXEL_ROWS}, 1fr)`,
+          }}
+        >
+          <Index each={PIXEL_INDICES}>
+            {(_, index) => (
+              <div
+                style={{ opacity: 0, background: color() }}
+                ref={(el) => {
+                  strips[index] = el
+                }}
+              />
+            )}
+          </Index>
+        </div>
+      )}
+    </div>
+  )
+}