@a4ui/core 0.11.1 → 0.12.0

package/src/ui/Marquee.tsx

@@ -0,0 +1,48 @@
+// Infinite horizontal scroller that loops its children seamlessly.
+import type { JSX, ParentProps } from 'solid-js'
+
+import { cn } from '../lib/cn'
+import { motionReduced } from '../lib/motion'
+
+interface MarqueeProps extends ParentProps {
+  /** Seconds for one full loop of the track. Lower is faster. Defaults to `20`. */
+  speed?: number
+  /** Pause the scroll while the pointer hovers the strip. Defaults to `true`. */
+  pauseOnHover?: boolean
+  class?: string
+}
+
+/**
+ * A horizontally scrolling strip that loops its children seamlessly. The
+ * children are rendered twice inside a flex track; when the first copy has
+ * scrolled fully out of view the second copy sits exactly where the first
+ * began, so the animation restarts with no visible seam. Honors reduced
+ * motion (the track sits still) and, by default, pauses on hover.
+ *
+ * @example
+ * ```tsx
+ * <Marquee speed={30}>
+ *   <span class="mx-4">A4ui</span>
+ *   <span class="mx-4">SolidJS</span>
+ *   <span class="mx-4">Tailwind</span>
+ * </Marquee>
+ * ```
+ */
+export function Marquee(props: MarqueeProps): JSX.Element {
+  const pauseOnHover = () => props.pauseOnHover ?? true
+
+  return (
+    <div class={cn('overflow-hidden', props.class)}>
+      <style>{'@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}'}</style>
+      <div
+        class={cn('flex w-max shrink-0', pauseOnHover() && 'hover:[animation-play-state:paused]')}
+        style={motionReduced() ? undefined : { animation: `marquee ${props.speed ?? 20}s linear infinite` }}
+      >
+        <div class="flex shrink-0">{props.children}</div>
+        <div class="flex shrink-0" aria-hidden="true">
+          {props.children}
+        </div>
+      </div>
+    </div>
+  )
+}

package/src/ui/Mentions.tsx

@@ -0,0 +1,170 @@
+// Multi-line text field with @mention autocomplete over a native <textarea>.
+import type { JSX } from 'solid-js'
+import { For, Show, createSignal } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface MentionOption {
+  value: string
+  label: string
+}
+
+export interface MentionsProps {
+  value: string
+  /** Called with the new string value on every input (not the raw DOM event). */
+  onChange: (value: string) => void
+  /** Options offered while typing an `@mention`. */
+  options: MentionOption[]
+  placeholder?: string
+  class?: string
+}
+
+const TEXTAREA_BASE =
+  'w-full min-h-[80px] resize-y rounded-md border border-input bg-background text-foreground placeholder:text-muted-foreground px-3 py-2 text-sm outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50'
+
+/** Match an active `@query` immediately before the caret. */
+const MENTION_RE = /@(\w*)$/
+
+/**
+ * Controlled multi-line text field that shows an autocomplete dropdown while
+ * the user types an `@mention`. On each input, the text before the caret is
+ * checked for a trailing `@query`; matching {@link MentionOption}s (by `label`
+ * or `value`, case-insensitive) are offered in a panel. Selecting one replaces
+ * the `@query` with `@{label} `. Arrow keys move the highlight, Enter accepts,
+ * Escape dismisses.
+ *
+ * @example
+ * ```tsx
+ * const [body, setBody] = createSignal('')
+ * <Mentions
+ *   value={body()}
+ *   onChange={setBody}
+ *   options={[
+ *     { value: 'ada', label: 'Ada Lovelace' },
+ *     { value: 'alan', label: 'Alan Turing' },
+ *   ]}
+ *   placeholder="Write a note, use @ to mention someone"
+ * />
+ * ```
+ */
+export function Mentions(props: MentionsProps): JSX.Element {
+  let ref: HTMLTextAreaElement | undefined
+  const [open, setOpen] = createSignal(false)
+  const [query, setQuery] = createSignal('')
+  const [caret, setCaret] = createSignal(0)
+  const [highlighted, setHighlighted] = createSignal(0)
+
+  const filtered = (): MentionOption[] => {
+    const q = query().toLowerCase()
+    return props.options.filter((o) => o.label.toLowerCase().includes(q) || o.value.toLowerCase().includes(q))
+  }
+
+  const close = () => {
+    setOpen(false)
+    setQuery('')
+  }
+
+  const sync = (el: HTMLTextAreaElement) => {
+    const pos = el.selectionStart ?? el.value.length
+    setCaret(pos)
+    const before = el.value.slice(0, pos)
+    const match = before.match(MENTION_RE)
+    if (match) {
+      setQuery(match[1])
+      setOpen(true)
+      setHighlighted(0)
+    } else {
+      close()
+    }
+  }
+
+  const select = (option: MentionOption) => {
+    const el = ref
+    const full = props.value
+    const pos = el ? (el.selectionStart ?? caret()) : caret()
+    const before = full.slice(0, pos)
+    const after = full.slice(pos)
+    const start = before.lastIndexOf('@')
+    if (start === -1) {
+      close()
+      return
+    }
+    const insert = `@${option.label} `
+    const next = full.slice(0, start) + insert + after
+    props.onChange(next)
+    close()
+    if (el) {
+      const nextCaret = start + insert.length
+      queueMicrotask(() => {
+        el.focus()
+        el.setSelectionRange(nextCaret, nextCaret)
+        setCaret(nextCaret)
+      })
+    }
+  }
+
+  const onKeyDown = (ev: KeyboardEvent) => {
+    if (!open()) return
+    const items = filtered()
+    if (items.length === 0) return
+    switch (ev.key) {
+      case 'ArrowDown':
+        ev.preventDefault()
+        setHighlighted((i) => (i + 1) % items.length)
+        break
+      case 'ArrowUp':
+        ev.preventDefault()
+        setHighlighted((i) => (i - 1 + items.length) % items.length)
+        break
+      case 'Enter':
+        ev.preventDefault()
+        select(items[Math.min(highlighted(), items.length - 1)])
+        break
+      case 'Escape':
+        ev.preventDefault()
+        close()
+        break
+    }
+  }
+
+  return (
+    <div class={cn('relative', props.class)}>
+      <textarea
+        ref={ref}
+        class={TEXTAREA_BASE}
+        value={props.value}
+        placeholder={props.placeholder}
+        onInput={(ev) => {
+          props.onChange(ev.currentTarget.value)
+          sync(ev.currentTarget)
+        }}
+        onClick={(ev) => sync(ev.currentTarget)}
+        onKeyUp={(ev) => sync(ev.currentTarget)}
+        onKeyDown={onKeyDown}
+        onBlur={() => close()}
+      />
+      <Show when={open() && filtered().length > 0}>
+        <div class="absolute z-50 mt-1 max-h-48 w-56 overflow-y-auto rounded-md border border-border bg-card p-1 shadow-md">
+          <For each={filtered()}>
+            {(option, i) => (
+              <button
+                type="button"
+                class={cn(
+                  'w-full rounded px-2 py-1.5 text-left text-sm hover:bg-muted',
+                  i() === highlighted() && 'bg-muted',
+                )}
+                onMouseDown={(ev) => {
+                  ev.preventDefault()
+                  select(option)
+                }}
+                onMouseEnter={() => setHighlighted(i())}
+              >
+                {option.label}
+              </button>
+            )}
+          </For>
+        </div>
+      </Show>
+    </div>
+  )
+}

package/src/ui/Meter.tsx

@@ -0,0 +1,57 @@
+// Static measurement gauge on Kobalte's Meter primitive (e.g. disk usage).
+import { Meter as KMeter } from '@kobalte/core/meter'
+import type { JSX } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface MeterProps {
+  value: number
+  /** @default 100 */
+  max?: number
+  /** Label shown above the track, paired with an auto-formatted value label. */
+  label?: string
+  class?: string
+}
+
+/**
+ * Static measurement gauge (e.g. disk/quota usage) on Kobalte's `Meter` primitive.
+ * Unlike a progress bar, a meter represents a fixed measurement against a range,
+ * not an in-flight operation.
+ *
+ * @example
+ * ```tsx
+ * <Meter value={72} max={100} label="Storage used" />
+ * ```
+ */
+export function Meter(props: MeterProps): JSX.Element {
+  // Kobalte's Meter.Fill has no intrinsic width — we set it ourselves from the
+  // value as a fraction of the range, clamped to 0–100%. (Without this the bar
+  // ignored `max`, so e.g. value 38 of max 50 read "76%" but filled only ~38%.)
+  const percent = () => {
+    const max = props.max ?? 100
+    if (max <= 0) return 0
+    return Math.max(0, Math.min(100, (props.value / max) * 100))
+  }
+  return (
+    <KMeter
+      value={props.value}
+      minValue={0}
+      maxValue={props.max ?? 100}
+      class={cn('flex flex-col gap-1.5', props.class)}
+    >
+      <Show when={props.label}>
+        <div class="flex items-center justify-between text-sm text-foreground">
+          <KMeter.Label>{props.label}</KMeter.Label>
+          <KMeter.ValueLabel class="text-muted-foreground" />
+        </div>
+      </Show>
+      <KMeter.Track class="h-2 overflow-hidden rounded-full bg-muted">
+        <KMeter.Fill
+          class="h-full rounded-full bg-primary transition-all duration-500"
+          style={{ width: `${percent()}%` }}
+        />
+      </KMeter.Track>
+    </KMeter>
+  )
+}

package/src/ui/Modal.tsx

@@ -0,0 +1,106 @@
+// Dialog on Kobalte's Dialog primitive. Two shapes via `variant`:
+//   - 'drawer' (default): right-anchored slide-over — create/edit forms, detail
+//     panels (more vertical room, less jarring than a centered pop).
+//   - 'center': the classic centered modal — short confirmations (destructive
+//     yes/no) where a full-height drawer would be overkill.
+// The .drawer-content / .modal-content classes drive the slide/scale keyframes
+// (styles.css) off Kobalte's data-expanded/data-closed presence tracking.
+import { Dialog } from '@kobalte/core/dialog'
+import { X } from 'lucide-solid'
+import type { JSX, ParentProps } from 'solid-js'
+import { Show } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+interface ModalProps extends ParentProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Header title; omitting it hides the whole header bar. */
+  title?: string
+  /**
+   * `'drawer'` (default): right-anchored slide-over, more room, less jarring —
+   * use for forms/detail panels. `'center'`: classic centered modal — use for
+   * short confirmations (e.g. destructive yes/no).
+   * @default 'drawer'
+   */
+  variant?: 'drawer' | 'center'
+  class?: string
+  /** Accessible label for the close button. @default 'Close' */
+  closeLabel?: string
+}
+
+/**
+ * Dialog on Kobalte's `Dialog` primitive (focus trap, portal, presence handled
+ * for you), rendered as either a slide-over drawer or a centered modal depending
+ * on `variant`.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <Modal open={open()} onOpenChange={setOpen} variant="center" title="Delete item?">
+ *   <p>This action cannot be undone.</p>
+ * </Modal>
+ * ```
+ */
+export function Modal(props: ModalProps): JSX.Element {
+  const isCenter = () => props.variant === 'center'
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay fixed inset-0 z-40 bg-background/80 backdrop-blur-sm" />
+        <Show
+          when={isCenter()}
+          fallback={
+            <div class="fixed inset-0 z-50 flex justify-end">
+              <Dialog.Content
+                class={cn(
+                  'drawer-content bg-glass flex h-full w-full max-w-[520px] flex-col overflow-y-auto border-l border-border text-card-foreground shadow-2xl',
+                  props.class,
+                )}
+              >
+                <Show when={props.title}>
+                  <div class="sticky top-0 z-10 flex items-center justify-between border-b border-border bg-background/85 px-6 py-4 backdrop-blur">
+                    <Dialog.Title class="text-lg font-semibold leading-none tracking-tight">
+                      {props.title}
+                    </Dialog.Title>
+                    <Dialog.CloseButton
+                      class="grid h-8 w-8 place-items-center rounded-lg text-muted-foreground transition hover:bg-muted hover:text-foreground"
+                      aria-label={props.closeLabel ?? 'Close'}
+                    >
+                      <X class="h-5 w-5" />
+                    </Dialog.CloseButton>
+                  </div>
+                </Show>
+                <div class="p-6 pt-4">{props.children}</div>
+              </Dialog.Content>
+            </div>
+          }
+        >
+          <div class="fixed inset-0 z-50 flex items-center justify-center p-4">
+            <Dialog.Content
+              class={cn(
+                'modal-content w-full max-w-lg rounded-xl border border-border bg-card text-card-foreground shadow-sm',
+                props.class,
+              )}
+            >
+              <Show when={props.title}>
+                <div class="flex items-center justify-between border-b border-border p-6 pb-4">
+                  <Dialog.Title class="text-lg font-semibold leading-none tracking-tight">
+                    {props.title}
+                  </Dialog.Title>
+                  <Dialog.CloseButton
+                    class="text-muted-foreground hover:text-foreground"
+                    aria-label={props.closeLabel ?? 'Close'}
+                  >
+                    ✕
+                  </Dialog.CloseButton>
+                </div>
+              </Show>
+              <div class="p-6 pt-4">{props.children}</div>
+            </Dialog.Content>
+          </div>
+        </Show>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

package/src/ui/MultiSelect.tsx

@@ -0,0 +1,236 @@
+// Multi-select dropdown — searchable options with removable chips on the
+// trigger. Popover mechanics (portaled, fixed-position, outside-click/Escape/
+// scroll/resize close) are copied verbatim from DateField.tsx: no Kobalte
+// primitive covers a chip-trigger multi-select, so this is hand-rolled in
+// plain Solid + theme tokens.
+import { Check, ChevronDown, X } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { For, Show, createEffect, createMemo, createSignal, onCleanup } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+
+/** One selectable option: a stable `value` and its display `label`. */
+export interface MultiSelectOption {
+  value: string
+  label: string
+}
+
+export interface MultiSelectProps {
+  options: MultiSelectOption[]
+  value: string[]
+  onChange: (value: string[]) => void
+  placeholder?: string
+  /** Show a search box in the dropdown. Default `true`. */
+  searchable?: boolean
+  disabled?: boolean
+  class?: string
+}
+
+/**
+ * Multi-select dropdown: the trigger shows selected options as removable
+ * chips, and the portaled popover lists (optionally search-filtered) options
+ * to toggle. Picking an option keeps the popover open so several values can
+ * be chosen in a row; the popover closes on outside click, Escape, scroll, or
+ * resize.
+ *
+ * @example
+ * ```tsx
+ * const [tags, setTags] = createSignal<string[]>([])
+ * <MultiSelect
+ *   options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]}
+ *   value={tags()}
+ *   onChange={setTags}
+ *   placeholder="Select tags…"
+ * />
+ * ```
+ */
+export function MultiSelect(props: MultiSelectProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+  const [query, setQuery] = createSignal('')
+
+  let rootRef: HTMLDivElement | undefined
+  let btnRef: HTMLButtonElement | undefined
+  let popRef: HTMLDivElement | undefined
+  let searchRef: HTMLInputElement | undefined
+
+  // Portaled popovers escape the trigger's stacking context (e.g. a glass
+  // card's backdrop-filter), so they can't be `absolute`-positioned relative
+  // to it — place them with `fixed` at the trigger's measured viewport rect,
+  // same as DateField.
+  const [pos, setPos] = createSignal({ top: 0, left: 0, width: 224 })
+  const MIN_W = 224 // min-w-56
+
+  const place = () => {
+    if (!btnRef) return
+    const r = btnRef.getBoundingClientRect()
+    const width = Math.max(r.width, MIN_W)
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - width - 8))
+    setPos({ top: r.bottom + 4, left, width })
+  }
+
+  const openPopover = () => {
+    if (props.disabled) return
+    place()
+    setOpen(true)
+    setQuery('')
+  }
+
+  const close = () => setOpen(false)
+
+  const onDocPointer = (ev: MouseEvent) => {
+    const t = ev.target as Node
+    // Ignore clicks on the trigger (rootRef) AND the portaled popover (popRef).
+    if (rootRef && !rootRef.contains(t) && popRef && !popRef.contains(t)) close()
+  }
+  const onKey = (ev: KeyboardEvent) => {
+    if (ev.key === 'Escape') close()
+  }
+
+  // Wire/tear-down the global listeners strictly around the open state. Scroll/
+  // resize close the popover (its fixed position would otherwise drift).
+  const toggleListeners = (isOpen: boolean) => {
+    if (isOpen) {
+      document.addEventListener('mousedown', onDocPointer)
+      document.addEventListener('keydown', onKey)
+      window.addEventListener('scroll', close, true)
+      window.addEventListener('resize', close)
+    } else {
+      document.removeEventListener('mousedown', onDocPointer)
+      document.removeEventListener('keydown', onKey)
+      window.removeEventListener('scroll', close, true)
+      window.removeEventListener('resize', close)
+    }
+  }
+  // Reactively attach when open flips; always clean up on unmount.
+  createEffect(() => toggleListeners(open()))
+  onCleanup(() => toggleListeners(false))
+
+  // Autofocus the search box once the popover mounts.
+  createEffect(() => {
+    if (open() && (props.searchable ?? true)) {
+      searchRef?.focus()
+    }
+  })
+
+  const selectedOptions = createMemo(() => props.options.filter((o) => props.value.includes(o.value)))
+
+  const filteredOptions = createMemo(() => {
+    const q = query().trim().toLowerCase()
+    if (!q) return props.options
+    return props.options.filter((o) => o.label.toLowerCase().includes(q))
+  })
+
+  const toggleValue = (value: string) => {
+    const next = props.value.includes(value)
+      ? props.value.filter((v) => v !== value)
+      : [...props.value, value]
+    props.onChange(next)
+  }
+
+  const removeValue = (ev: MouseEvent, value: string) => {
+    ev.stopPropagation()
+    props.onChange(props.value.filter((v) => v !== value))
+  }
+
+  return (
+    <div ref={rootRef} class={cn('relative', props.class)}>
+      <button
+        ref={btnRef}
+        type="button"
+        disabled={props.disabled}
+        aria-haspopup="listbox"
+        aria-expanded={open()}
+        onClick={() => (open() ? close() : openPopover())}
+        class="flex min-h-9 h-auto w-full flex-wrap items-center justify-between gap-2 rounded-md border border-input bg-background px-3 py-2 text-left text-sm text-foreground outline-none transition-colors a4-field disabled:cursor-not-allowed disabled:opacity-50"
+      >
+        <span class="flex flex-1 flex-wrap items-center gap-1">
+          <Show
+            when={selectedOptions().length > 0}
+            fallback={<span class="text-muted-foreground">{props.placeholder ?? 'Select…'}</span>}
+          >
+            <For each={selectedOptions()}>
+              {(opt) => (
+                <span class="inline-flex items-center gap-1 rounded bg-muted px-1.5 py-0.5 text-xs text-foreground">
+                  {opt.label}
+                  <button
+                    type="button"
+                    aria-label={`Remove ${opt.label}`}
+                    onClick={(ev) => removeValue(ev, opt.value)}
+                    class="rounded-sm text-muted-foreground outline-none transition-colors hover:text-foreground focus:ring-2 focus:ring-ring/30"
+                  >
+                    <X class="h-3 w-3" />
+                  </button>
+                </span>
+              )}
+            </For>
+          </Show>
+        </span>
+        <ChevronDown class="h-4 w-4 shrink-0 text-muted-foreground" />
+      </button>
+
+      <Show when={open()}>
+        <Portal>
+          <div
+            ref={popRef}
+            style={{
+              position: 'fixed',
+              top: `${pos().top}px`,
+              left: `${pos().left}px`,
+              width: `${pos().width}px`,
+            }}
+            class="z-50 min-w-56 rounded-lg border border-border bg-card p-1 text-card-foreground shadow-lg"
+          >
+            <Show when={props.searchable ?? true}>
+              <input
+                ref={searchRef}
+                type="text"
+                value={query()}
+                onInput={(ev) => setQuery(ev.currentTarget.value)}
+                placeholder="Search…"
+                class="mb-1 w-full rounded-md border border-input bg-background px-2 py-1.5 text-sm text-foreground outline-none a4-field"
+              />
+            </Show>
+            <ul role="listbox" aria-multiselectable="true" class="max-h-60 overflow-y-auto">
+              <For
+                each={filteredOptions()}
+                fallback={<li class="px-2 py-1.5 text-sm text-muted-foreground">No options</li>}
+              >
+                {(opt) => {
+                  const isSelected = () => props.value.includes(opt.value)
+                  return (
+                    <li role="none">
+                      <button
+                        type="button"
+                        role="option"
+                        aria-selected={isSelected()}
+                        aria-pressed={isSelected()}
+                        onClick={() => toggleValue(opt.value)}
+                        class={cn(
+                          'flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm outline-none transition-colors hover:bg-muted focus:bg-muted',
+                          isSelected() && 'bg-primary/10',
+                        )}
+                      >
+                        <span
+                          class={cn(
+                            'flex h-4 w-4 shrink-0 items-center justify-center rounded-sm border border-input',
+                            isSelected() && 'border-primary bg-primary text-primary-foreground',
+                          )}
+                        >
+                          <Show when={isSelected()}>
+                            <Check class="h-3 w-3" />
+                          </Show>
+                        </span>
+                        <span class="truncate">{opt.label}</span>
+                      </button>
+                    </li>
+                  )
+                }}
+              </For>
+            </ul>
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  )
+}