@a4ui/core 0.31.1 → 0.32.0

package/src/ui/BentoGrid.tsx

@@ -0,0 +1,89 @@
+// BentoGrid + BentoCard — responsive grid of glass tiles with variable spans.
+import type { JSX } from 'solid-js'
+import { splitProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface BentoGridProps {
+  children: JSX.Element
+  class?: string
+}
+
+export interface BentoCardProps {
+  children: JSX.Element
+  /** Number of grid columns to span at `sm`+ (2) and `lg`+ (3). Defaults to 1. */
+  colSpan?: 1 | 2 | 3
+  /** Number of grid rows to span. Defaults to 1. */
+  rowSpan?: 1 | 2
+  class?: string
+}
+
+// Static lookup so Tailwind's content scanner can see the full class names
+// (dynamic `col-span-${n}` strings are invisible to it and get purged).
+const COL_SPAN_CLASSES: Record<NonNullable<BentoCardProps['colSpan']>, string> = {
+  1: '',
+  2: 'sm:col-span-2',
+  3: 'sm:col-span-2 lg:col-span-3',
+}
+
+const ROW_SPAN_CLASSES: Record<NonNullable<BentoCardProps['rowSpan']>, string> = {
+  1: '',
+  2: 'row-span-2',
+}
+
+/**
+ * Responsive CSS grid for bento-style layouts — 1 column on mobile, 2 at
+ * `sm`, 3 at `lg`. Compose with {@link BentoCard} tiles, using `colSpan`/
+ * `rowSpan` on each tile to create the varied-size bento look.
+ *
+ * @example
+ * ```tsx
+ * <BentoGrid>
+ *   <BentoCard colSpan={2} rowSpan={2}>
+ *     <h3 class="text-lg font-semibold">Overview</h3>
+ *   </BentoCard>
+ *   <BentoCard>
+ *     <h3 class="text-lg font-semibold">Uptime</h3>
+ *   </BentoCard>
+ *   <BentoCard>
+ *     <h3 class="text-lg font-semibold">Latency</h3>
+ *   </BentoCard>
+ *   <BentoCard colSpan={3}>
+ *     <h3 class="text-lg font-semibold">Recent activity</h3>
+ *   </BentoCard>
+ * </BentoGrid>
+ * ```
+ */
+export function BentoGrid(props: BentoGridProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children'])
+  return (
+    <div
+      class={cn(
+        'grid grid-cols-1 gap-4 sm:grid-cols-2 lg:grid-cols-3 auto-rows-[minmax(11rem,auto)]',
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}
+
+/** Glass tile for a {@link BentoGrid}, spanning columns/rows via `colSpan`/`rowSpan`. */
+export function BentoCard(props: BentoCardProps): JSX.Element {
+  const [local, rest] = splitProps(props, ['class', 'children', 'colSpan', 'rowSpan'])
+  return (
+    <div
+      class={cn(
+        'rounded-2xl border border-border bg-card p-5 text-card-foreground overflow-hidden',
+        'transition-transform hover:-translate-y-0.5',
+        COL_SPAN_CLASSES[local.colSpan ?? 1],
+        ROW_SPAN_CLASSES[local.rowSpan ?? 1],
+        local.class,
+      )}
+      {...rest}
+    >
+      {local.children}
+    </div>
+  )
+}

package/src/ui/BorderBeam.tsx

@@ -0,0 +1,96 @@
+// BorderBeam — a small gradient light segment that travels continuously
+// around the border of its `position: relative` parent, tracing the box's
+// own edge via CSS `offset-path: rect(...)` with `offset-distance` animated
+// 0% → 100%. Pure CSS: no JS animation engine, no ResizeObserver — the
+// browser resolves the rect()'s `auto` edges against the element's own box,
+// so the path always matches the parent's current size however it resizes.
+// The traveling element is a thin bar (not a full square) so it hugs the
+// edge by itself, without needing a border-only mask trick. Reduced motion
+// swaps the moving beam for a static, non-animated edge glow.
+import { type JSX, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface BorderBeamProps {
+  /** Length of the traveling gradient segment, in px. @default 60 */
+  size?: number
+  /** Full trip duration around the border, in seconds. @default 6 */
+  duration?: number
+  /** Animation start offset, in seconds. @default 0 */
+  delay?: number
+  class?: string
+}
+
+const KEYFRAMES_ID = 'a4ui-border-beam-keyframes'
+const KEYFRAMES = '@keyframes border-beam-travel { to { offset-distance: 100%; } }'
+
+// Injected once, lazily, the first time a <BorderBeam> renders. The repo's
+// CSS doctrine keeps shared @keyframes in src/styles/tokens.css, but this
+// component ships standalone (tree-shakeable, no required stylesheet import)
+// so it carries its own single small <style> tag instead — de-duped by id,
+// so multiple instances on a page still only inject it once.
+function ensureKeyframes(): void {
+  if (typeof document === 'undefined' || document.getElementById(KEYFRAMES_ID)) return
+  const style = document.createElement('style')
+  style.id = KEYFRAMES_ID
+  style.textContent = KEYFRAMES
+  document.head.appendChild(style)
+}
+
+/**
+ * Decorative light segment that travels continuously around the border of
+ * its parent. The parent must be `position: relative` (or similar) — this
+ * renders an absolutely-positioned, `pointer-events-none` layer (`inset-0`,
+ * `rounded-[inherit]`) tracking the parent's own box. Purely cosmetic
+ * (`aria-hidden`); under reduced motion the moving beam is replaced with a
+ * static edge glow instead of animating.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative overflow-hidden rounded-2xl border border-border p-6">
+ *   <BorderBeam />
+ *   <p>Card content</p>
+ * </div>
+ * ```
+ */
+export function BorderBeam(props: BorderBeamProps): JSX.Element {
+  const size = () => props.size ?? 60
+  const duration = () => props.duration ?? 6
+  const delay = () => props.delay ?? 0
+
+  if (!motionReduced()) ensureKeyframes()
+
+  return (
+    <Show
+      when={!motionReduced()}
+      fallback={
+        <span
+          aria-hidden="true"
+          class={cn(
+            'pointer-events-none absolute inset-0 rounded-[inherit] shadow-[inset_0_0_0_1px_hsl(var(--primary)/0.35)]',
+            props.class,
+          )}
+        />
+      }
+    >
+      <span
+        aria-hidden="true"
+        class={cn('pointer-events-none absolute inset-0 overflow-hidden rounded-[inherit]', props.class)}
+      >
+        <span
+          class="absolute top-0 left-0 h-[3px] rounded-full"
+          style={{
+            width: `${size()}px`,
+            'offset-path': `rect(0 auto auto 0 round ${size()}px)`,
+            'offset-distance': '0%',
+            background:
+              'linear-gradient(to right, transparent, hsl(var(--primary)), hsl(var(--accent)), transparent)',
+            animation: `border-beam-travel ${duration()}s linear infinite`,
+            'animation-delay': `${delay()}s`,
+          }}
+        />
+      </span>
+    </Show>
+  )
+}

package/src/ui/Dock.tsx

@@ -0,0 +1,124 @@
+// Dock — macOS-style app dock. A horizontal glass pill of icon buttons that
+// magnify toward the cursor (closest item biggest, tapering over a fixed
+// radius), driven by direct transform + CSS transition (scale only, so it
+// stays on the compositor). No-op magnify under reduced motion — icons stay
+// static but remain clickable.
+import { For, Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+/** Px radius from the cursor within which items magnify; beyond it, scale is 1×. */
+const FALLOFF_PX = 120
+/** Peak scale applied to the item directly under the cursor. */
+const PEAK_SCALE = 1.6
+
+export interface DockItem {
+  icon: JSX.Element
+  label?: string
+  onClick?: (e: MouseEvent) => void
+  href?: string
+}
+
+export interface DockProps {
+  items: DockItem[]
+  class?: string
+}
+
+/**
+ * macOS-style dock: a glass pill of icon buttons that magnify based on
+ * horizontal distance to the cursor. Scale-only transform (`transform-origin:
+ * bottom`), reset to 1× on pointerleave. Respects `prefers-reduced-motion`
+ * (renders static, still fully clickable/keyboard-focusable).
+ *
+ * @example
+ * ```tsx
+ * import { Home, Search, Settings } from 'lucide-solid'
+ *
+ * <Dock
+ *   items={[
+ *     { icon: <Home size={22} />, label: 'Home', onClick: () => {} },
+ *     { icon: <Search size={22} />, label: 'Search', onClick: () => {} },
+ *     { icon: <Settings size={22} />, label: 'Settings', href: '/settings' },
+ *   ]}
+ * />
+ * ```
+ */
+export function Dock(props: DockProps): JSX.Element {
+  const itemEls: (HTMLElement | undefined)[] = []
+
+  const handlePointerMove = (event: PointerEvent): void => {
+    if (motionReduced()) return
+
+    for (const el of itemEls) {
+      if (!el) continue
+      const rect = el.getBoundingClientRect()
+      const center = rect.left + rect.width / 2
+      const distance = Math.abs(event.clientX - center)
+      const scale = 1 + (PEAK_SCALE - 1) * Math.max(0, 1 - distance / FALLOFF_PX)
+      el.style.transform = `scale(${scale})`
+    }
+  }
+
+  const handlePointerLeave = (): void => {
+    for (const el of itemEls) {
+      if (el) el.style.transform = 'scale(1)'
+    }
+  }
+
+  return (
+    <div
+      class={cn(
+        'inline-flex items-end gap-2 rounded-2xl border border-border bg-card/70 px-3 py-2 backdrop-blur',
+        props.class,
+      )}
+      onPointerMove={handlePointerMove}
+      onPointerLeave={handlePointerLeave}
+    >
+      <For each={props.items}>
+        {(item, i) => {
+          const shared = {
+            ref: (el: HTMLElement) => {
+              itemEls[i()] = el
+            },
+            class:
+              'group relative inline-flex h-11 w-11 shrink-0 origin-bottom items-center justify-center rounded-xl text-foreground transition-transform duration-150 ease-out will-change-transform hover:bg-muted/50 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring',
+            'aria-label': item.label,
+            onClick: item.onClick,
+          }
+
+          return (
+            <Show
+              when={item.href}
+              fallback={
+                <button type="button" {...shared}>
+                  {item.icon}
+                  <Show when={item.label}>
+                    <span
+                      aria-hidden="true"
+                      class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-md border border-border bg-card px-2 py-1 text-xs whitespace-nowrap text-card-foreground opacity-0 shadow-md transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100"
+                    >
+                      {item.label}
+                    </span>
+                  </Show>
+                </button>
+              }
+            >
+              <a href={item.href} {...shared}>
+                {item.icon}
+                <Show when={item.label}>
+                  <span
+                    aria-hidden="true"
+                    class="pointer-events-none absolute -top-9 left-1/2 -translate-x-1/2 rounded-md border border-border bg-card px-2 py-1 text-xs whitespace-nowrap text-card-foreground opacity-0 shadow-md transition-opacity duration-150 group-hover:opacity-100 group-focus-visible:opacity-100"
+                  >
+                    {item.label}
+                  </span>
+                </Show>
+              </a>
+            </Show>
+          )
+        }}
+      </For>
+    </div>
+  )
+}

package/src/ui/Meteors.tsx

@@ -0,0 +1,109 @@
+// Meteors — Aceternity-style decorative meteor shower: thin diagonal streaks
+// that fall down-left and fade, looping with per-meteor stagger. Pure CSS
+// keyframes (injected once into the document head, like LoadingDots) so the
+// motion costs nothing in JS; each meteor's position/delay/duration is derived
+// deterministically from its index (no Math.random, so the layout is
+// reproducible across renders and safe under SSR).
+import { For, type JSX, Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+export interface MeteorsProps {
+  /** Number of meteor streaks to render. @default 20 */
+  count?: number
+  class?: string
+}
+
+const STYLE_ID = 'a4ui-meteors-style'
+
+function ensureStyleInjected(): void {
+  if (typeof document === 'undefined' || document.getElementById(STYLE_ID)) return
+  const style = document.createElement('style')
+  style.id = STYLE_ID
+  style.textContent = `
+@keyframes a4-meteor-fall {
+  0% { transform: rotate(215deg) translateX(0); opacity: 1; }
+  70% { opacity: 1; }
+  100% { transform: rotate(215deg) translateX(-500px); opacity: 0; }
+}
+`
+  document.head.appendChild(style)
+}
+
+/**
+ * Deterministic pseudo-random value in [0, 1) derived from an index via a
+ * sine-based hash. Used to vary each meteor's position/timing without
+ * `Math.random`, so the layout is identical across renders (and SSR-safe).
+ */
+function pseudoRandom(seed: number): number {
+  const x = Math.sin(seed * 12.9898) * 43758.5453
+  return x - Math.floor(x)
+}
+
+/**
+ * Decorative full-cover meteor shower: thin diagonal streaks that fall
+ * down-left and fade, looping with staggered delays and varied start
+ * positions/durations. Purely visual — absolute, `pointer-events-none`,
+ * `aria-hidden` — so it layers behind/inside a `relative overflow-hidden`
+ * container without affecting layout or a11y. Under {@link motionReduced} it
+ * swaps the falling streaks for a handful of static, faint dots.
+ *
+ * @example
+ * ```tsx
+ * <div class="relative overflow-hidden rounded-2xl border border-border p-8">
+ *   <Meteors count={20} />
+ *   <p class="relative">Content sits above the meteors.</p>
+ * </div>
+ * ```
+ */
+export function Meteors(props: MeteorsProps): JSX.Element {
+  ensureStyleInjected()
+
+  const count = () => props.count ?? 20
+  const meteors = () => Array.from({ length: count() })
+  const staticDots = () => Array.from({ length: Math.min(6, count()) })
+
+  return (
+    <div class={cn('pointer-events-none absolute inset-0 overflow-hidden', props.class)} aria-hidden="true">
+      <Show
+        when={!motionReduced()}
+        fallback={
+          <For each={staticDots()}>
+            {(_, i) => (
+              <span
+                class="absolute h-0.5 w-0.5 rounded-full bg-foreground/30"
+                style={{
+                  top: `${pseudoRandom(i() * 2 + 1) * 100}%`,
+                  left: `${pseudoRandom(i() * 2 + 2) * 100}%`,
+                }}
+              />
+            )}
+          </For>
+        }
+      >
+        <For each={meteors()}>
+          {(_, i) => {
+            const left = pseudoRandom(i() * 2 + 1) * 100
+            const delay = pseudoRandom(i() * 2 + 2) * 8
+            const duration = 2 + pseudoRandom(i() * 3 + 5) * 5
+
+            return (
+              <span
+                class={cn(
+                  'absolute top-0 h-0.5 w-0.5 rotate-[215deg] rounded-full bg-foreground',
+                  "before:absolute before:top-1/2 before:h-px before:w-12 before:-translate-y-1/2 before:bg-gradient-to-r before:from-foreground/60 before:to-transparent before:content-['']",
+                )}
+                style={{
+                  left: `${left}%`,
+                  animation: `a4-meteor-fall ${duration}s linear infinite`,
+                  'animation-delay': `${delay}s`,
+                }}
+              />
+            )
+          }}
+        </For>
+      </Show>
+    </div>
+  )
+}