@a4ui/core 0.11.1 → 0.13.0

package/src/ui/Drawer.tsx

@@ -0,0 +1,72 @@
+// Right-anchored slide-over on Kobalte's Dialog primitive (focus trap +
+// presence for free, like Modal). The drawer-content class drives the
+// slide-in/out keyframes in styles.css off Kobalte's data-expanded/data-closed.
+// Pass a `title` for the sticky glass header, or omit it and render your own
+// inside `children`.
+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 DrawerProps extends ParentProps {
+  open: boolean
+  onOpenChange: (open: boolean) => void
+  /** Sticky glass header title. Omit to render fully custom header content in `children`. */
+  title?: string
+  /** Small muted line under `title`; only shown when `title` is also set. */
+  subtitle?: string
+  class?: string
+  /** Accessible label for the close button. @default 'Close' */
+  closeLabel?: string
+}
+
+/**
+ * Right-anchored slide-over panel built on Kobalte's `Dialog` (focus trap, portal,
+ * and open/close presence handled for you). Use for create/edit forms or detail
+ * panels that need more room than a centered `Modal`.
+ *
+ * @example
+ * ```tsx
+ * const [open, setOpen] = createSignal(false)
+ * <Drawer open={open()} onOpenChange={setOpen} title="Edit invoice">
+ *   <p>Drawer content…</p>
+ * </Drawer>
+ * ```
+ */
+export function Drawer(props: DrawerProps): JSX.Element {
+  return (
+    <Dialog open={props.open} onOpenChange={props.onOpenChange}>
+      <Dialog.Portal>
+        <Dialog.Overlay class="modal-overlay fixed inset-0 z-40 bg-black/50 backdrop-blur-[2px]" />
+        <div class="fixed inset-0 z-50 flex justify-end">
+          <Dialog.Content
+            class={cn(
+              'drawer-content flex h-full w-full max-w-[520px] flex-col overflow-y-auto border-l border-border bg-glass 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/90 px-5 py-4 backdrop-blur">
+                <div>
+                  <Dialog.Title class="text-[16px] font-bold leading-tight">{props.title}</Dialog.Title>
+                  <Show when={props.subtitle}>
+                    <p class="text-[12px] text-muted-foreground">{props.subtitle}</p>
+                  </Show>
+                </div>
+                <Dialog.CloseButton
+                  class="grid h-9 w-9 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>
+            {props.children}
+          </Dialog.Content>
+        </div>
+      </Dialog.Portal>
+    </Dialog>
+  )
+}

package/src/ui/Dropdown.tsx

@@ -0,0 +1,71 @@
+// Accessible dropdown menu on Kobalte's DropdownMenu primitive.
+import { DropdownMenu } from '@kobalte/core/dropdown-menu'
+import type { JSX, ParentProps } from 'solid-js'
+import { For } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+/** A single selectable row in a {@link Dropdown} menu. */
+export interface DropdownItem {
+  label: string
+  onSelect: () => void
+  /** Styles the label in the destructive color (e.g. "Delete"). */
+  destructive?: boolean
+  disabled?: boolean
+}
+
+interface DropdownProps extends ParentProps {
+  items: DropdownItem[]
+  class?: string
+  /** Accessible name for the trigger. Pass this instead of nesting a `<button>`
+      inside — the Trigger IS the button, so its children must be non-interactive. */
+  label?: string
+}
+
+/**
+ * Accessible dropdown/context menu on Kobalte's `DropdownMenu` primitive.
+ * `props.children` is the trigger's (non-interactive) content — the Trigger
+ * itself renders as the button, so don't nest another `<button>` inside it.
+ * Unlike a Dialog, it does not lock page scroll while open.
+ *
+ * @example
+ * ```tsx
+ * <Dropdown label="Row actions" items={[
+ *   { label: 'Edit', onSelect: () => edit(row) },
+ *   { label: 'Delete', destructive: true, onSelect: () => remove(row) },
+ * ]}>
+ *   <MoreVertical class="h-4 w-4" />
+ * </Dropdown>
+ * ```
+ */
+export function Dropdown(props: DropdownProps): JSX.Element {
+  return (
+    // preventScroll defaults to true in Kobalte's menu — that locks page scroll
+    // (body overflow:hidden + scrollbar-width compensation) while the menu is
+    // open, which is wrong for a small contextual menu (it closes on scroll
+    // anyway). Dialogs (Modal/Drawer) keep the lock; a dropdown shouldn't.
+    <DropdownMenu preventScroll={false}>
+      <DropdownMenu.Trigger class={cn('inline-flex', props.class)} aria-label={props.label}>
+        {props.children}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Portal>
+        <DropdownMenu.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) => (
+              <DropdownMenu.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}
+              </DropdownMenu.Item>
+            )}
+          </For>
+        </DropdownMenu.Content>
+      </DropdownMenu.Portal>
+    </DropdownMenu>
+  )
+}

package/src/ui/Dropzone.tsx

@@ -0,0 +1,88 @@
+// Drag-and-drop (or click-to-browse) file dropzone. Purely presentational: it
+// collects File[] and hands them to `onFiles` — the caller owns upload/mutation.
+import { UploadCloud } from 'lucide-solid'
+import { type JSX, Show, createSignal } from 'solid-js'
+
+interface DropzoneProps {
+  /** Called with the dropped or browsed files; the caller owns upload/validation. */
+  onFiles: (files: File[]) => void
+  /** `accept` attribute for the hidden input, e.g. ".xml,.zip". */
+  accept?: string
+  multiple?: boolean
+  disabled?: boolean
+  /** Optional hint line under the primary label. */
+  hint?: string
+  label?: string
+}
+
+/**
+ * Presentational drag-and-drop (or click-to-browse) file dropzone. Not a Kobalte
+ * wrapper — just a styled `role="button"` region plus a hidden `<input type="file">`.
+ * It only collects `File[]` via `onFiles`; it does not upload or store anything.
+ *
+ * @example
+ * ```tsx
+ * <Dropzone accept=".xml,.zip" multiple onFiles={(files) => upload(files)} />
+ * ```
+ */
+export function Dropzone(props: DropzoneProps): JSX.Element {
+  const [dragOver, setDragOver] = createSignal(false)
+  let input: HTMLInputElement | undefined
+
+  const emit = (list: FileList | null | undefined) => {
+    if (props.disabled || !list) return
+    const files = Array.from(list)
+    if (files.length) props.onFiles(files)
+  }
+
+  return (
+    <div
+      role="button"
+      tabindex={props.disabled ? -1 : 0}
+      aria-disabled={props.disabled}
+      onClick={() => !props.disabled && input?.click()}
+      onKeyDown={(e) => {
+        if (props.disabled) return
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          input?.click()
+        }
+      }}
+      onDragOver={(e) => {
+        if (props.disabled) return
+        e.preventDefault()
+        setDragOver(true)
+      }}
+      onDragLeave={() => setDragOver(false)}
+      onDrop={(e) => {
+        e.preventDefault()
+        setDragOver(false)
+        emit(e.dataTransfer?.files)
+      }}
+      class="flex cursor-pointer flex-col items-center justify-center gap-2 rounded-xl border-2 border-dashed px-6 py-10 text-center transition"
+      classList={{
+        'border-ring bg-primary/5': dragOver(),
+        'border-border bg-glass hover:border-ring/60': !dragOver() && !props.disabled,
+        'cursor-not-allowed opacity-60': props.disabled,
+      }}
+    >
+      <UploadCloud class="h-8 w-8 text-muted-foreground" />
+      <p class="text-sm font-medium text-foreground">{props.label ?? 'Drag files here or click to browse'}</p>
+      <Show when={props.hint}>
+        <p class="text-xs text-muted-foreground">{props.hint}</p>
+      </Show>
+      <input
+        ref={input}
+        type="file"
+        class="hidden"
+        accept={props.accept}
+        multiple={props.multiple}
+        disabled={props.disabled}
+        onChange={(e) => {
+          emit(e.currentTarget.files)
+          e.currentTarget.value = '' // allow re-selecting the same file
+        }}
+      />
+    </div>
+  )
+}

package/src/ui/Empty.tsx

@@ -0,0 +1,53 @@
+// Empty-state placeholder: a centered vertical stack for "nothing here yet"
+// surfaces (empty lists, no search results, first-run views). The icon sits in a
+// muted circle; everything uses semantic tokens so it stays theme-agnostic in
+// both dark and light themes.
+import { Inbox } from 'lucide-solid'
+import { Show, type JSX } from 'solid-js'
+
+import { cn } from '../lib/cn'
+
+export interface EmptyProps {
+  /** Bold headline describing the empty state. */
+  title: string
+  /** Optional supporting line under the title. */
+  description?: string
+  /** Optional custom icon; falls back to a lucide-solid `Inbox`. */
+  icon?: JSX.Element
+  /** Optional action slot (e.g. a Button) rendered below the text. */
+  action?: JSX.Element
+  class?: string
+}
+
+/**
+ * Empty-state placeholder — a centered icon, title, optional description, and an
+ * optional action slot — for lists, search results, or first-run views that have
+ * nothing to show yet. Falls back to an `Inbox` icon when none is provided.
+ *
+ * @example
+ * ```tsx
+ * <Empty
+ *   title="No projects yet"
+ *   description="Create your first project to get started."
+ *   action={<Button>New project</Button>}
+ * />
+ * ```
+ */
+export function Empty(props: EmptyProps): JSX.Element {
+  return (
+    <div class={cn('flex flex-col items-center py-12 text-center', props.class)}>
+      <div class="grid h-12 w-12 place-items-center rounded-full bg-muted text-muted-foreground">
+        <Show when={props.icon} fallback={<Inbox class="h-6 w-6" />}>
+          {props.icon}
+        </Show>
+      </div>
+      <p class="mt-4 font-semibold text-foreground">{props.title}</p>
+      <Show when={props.description}>
+        <p class="mt-1 max-w-sm text-sm text-muted-foreground">{props.description}</p>
+      </Show>
+      <Show when={props.action}>
+        <div class="mt-4">{props.action}</div>
+      </Show>
+    </div>
+  )
+}

package/src/ui/Expandable.tsx

@@ -0,0 +1,229 @@
+// Shared-element transition: a compact `trigger` (a card) morphs into an
+// expanded overlay panel and back, using a FLIP animation. We animate the
+// panel's position and SIZE (top/left/width/height) rather than a transform
+// scale, so its content never stretches. Covers the motion.dev "family dialog"
+// (size="dialog") and "app store layout" (size="full") patterns with one API.
+import { createSignal, Show, onCleanup, onMount, type JSX } from 'solid-js'
+import { Portal } from 'solid-js/web'
+
+import { cn } from '../lib/cn'
+import { animate, motionReduced } from '../lib/motion'
+
+type Rect = { top: number; left: number; width: number; height: number }
+
+export interface ExpandableProps {
+  /** Collapsed content — the card users click to expand. */
+  trigger: JSX.Element
+  /** Expanded panel content. */
+  children: JSX.Element
+  /** `dialog` = centered panel capped at `maxWidth`; `full` = near-fullscreen. @default 'dialog' */
+  size?: 'dialog' | 'full'
+  /** Max width (px) of the expanded panel when `size='dialog'`. @default 640 */
+  maxWidth?: number
+  /** Notified when the panel opens/closes. */
+  onOpenChange?: (open: boolean) => void
+  /** Class for the inline trigger wrapper. */
+  class?: string
+  /** Class for the expanded panel surface. */
+  panelClass?: string
+}
+
+const PAD = 24
+
+/**
+ * Expands a card into an overlay panel with a shared-element (FLIP) transition —
+ * the card appears to grow into the dialog and shrink back on close. Animates
+ * position + size (never scale) so content stays crisp. Falls back to a plain
+ * show/hide under reduced motion. Close with the ✕, a backdrop click, or Escape.
+ *
+ * @example
+ * ```tsx
+ * <Expandable
+ *   trigger={<Card class="cursor-pointer">Tap to expand</Card>}
+ *   size="dialog"
+ * >
+ *   <div class="p-6">Full details here…</div>
+ * </Expandable>
+ * ```
+ */
+export function Expandable(props: ExpandableProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+  let triggerEl: HTMLDivElement | undefined
+  let panelEl: HTMLDivElement | undefined
+  let backdropEl: HTMLDivElement | undefined
+  let originRect: Rect | undefined
+  let controls: ReturnType<typeof animate> | undefined
+
+  const rectOf = (el: Element): Rect => {
+    const r = el.getBoundingClientRect()
+    return { top: r.top, left: r.left, width: r.width, height: r.height }
+  }
+
+  // The panel's resting position/size, computed (not scaled) so text stays sharp.
+  const finalRect = (el: HTMLDivElement): Rect => {
+    const vw = window.innerWidth
+    const vh = window.innerHeight
+    if (props.size === 'full') {
+      const width = vw - PAD * 2
+      const height = vh - PAD * 2
+      return { left: PAD, top: PAD, width, height }
+    }
+    const width = Math.min(props.maxWidth ?? 640, vw - PAD * 2)
+    // Measure the natural height at the target width.
+    el.style.width = `${width}px`
+    el.style.height = 'auto'
+    el.style.maxHeight = `${vh - PAD * 2}px`
+    const natH = el.getBoundingClientRect().height
+    const height = Math.min(natH, vh - PAD * 2)
+    return { left: (vw - width) / 2, top: (vh - height) / 2, width, height }
+  }
+
+  const place = (el: HTMLDivElement, r: Rect) => {
+    el.style.top = `${r.top}px`
+    el.style.left = `${r.left}px`
+    el.style.width = `${r.width}px`
+    el.style.height = `${r.height}px`
+  }
+
+  const doOpen = () => {
+    if (open() || !triggerEl) return
+    originRect = rectOf(triggerEl)
+    setOpen(true)
+    props.onOpenChange?.(true)
+  }
+
+  // Runs once the portalled panel is in the DOM: FLIP from the card to the panel.
+  const runOpenFlip = () => {
+    const el = panelEl
+    if (!el) return
+    const final = finalRect(el)
+    if (motionReduced() || !originRect) {
+      place(el, final)
+      el.style.overflow = 'auto'
+      el.style.opacity = '1'
+      return
+    }
+    place(el, originRect) // first
+    el.style.opacity = '1'
+    void el.offsetWidth // force reflow
+    controls?.stop()
+    controls = animate(
+      el,
+      {
+        top: [originRect.top, final.top],
+        left: [originRect.left, final.left],
+        width: [originRect.width, final.width],
+        height: [originRect.height, final.height],
+      },
+      { type: 'spring', stiffness: 280, damping: 32 },
+    )
+    if (backdropEl) animate(backdropEl, { opacity: [0, 1] }, { duration: 0.25, ease: 'easeOut' })
+    controls.finished
+      .then(() => {
+        el.style.overflow = 'auto'
+      })
+      .catch(() => {})
+  }
+
+  const doClose = () => {
+    if (!open()) return
+    const el = panelEl
+    const back = triggerEl ? rectOf(triggerEl) : originRect
+    if (!el || !back || motionReduced()) {
+      finishClose()
+      return
+    }
+    controls?.stop()
+    el.style.overflow = 'hidden'
+    place(el, rectOf(el)) // pin current
+    void el.offsetWidth
+    controls = animate(
+      el,
+      { top: back.top, left: back.left, width: back.width, height: back.height, opacity: [1, 0.35] },
+      { duration: 0.3, ease: 'easeInOut' },
+    )
+    if (backdropEl) animate(backdropEl, { opacity: [1, 0] }, { duration: 0.25, ease: 'easeIn' })
+    controls.finished.then(finishClose).catch(finishClose)
+  }
+
+  const finishClose = () => {
+    setOpen(false)
+    props.onOpenChange?.(false)
+  }
+
+  const onKeyDown = (e: KeyboardEvent) => {
+    if (e.key === 'Escape') doClose()
+  }
+
+  onMount(() => document.addEventListener('keydown', onKeyDown))
+  onCleanup(() => {
+    document.removeEventListener('keydown', onKeyDown)
+    controls?.stop()
+  })
+
+  return (
+    <>
+      <div
+        ref={triggerEl}
+        role="button"
+        tabindex={0}
+        class={cn('cursor-pointer', props.class)}
+        onClick={doOpen}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault()
+            doOpen()
+          }
+        }}
+      >
+        {props.trigger}
+      </div>
+
+      <Show when={open()}>
+        <Portal>
+          <div
+            ref={backdropEl}
+            aria-hidden="true"
+            onClick={doClose}
+            class="fixed inset-0 z-[9998] bg-black/50 backdrop-blur-sm"
+            style={{ opacity: motionReduced() ? '1' : '0' }}
+          />
+          <div
+            ref={(el) => {
+              panelEl = el
+              // Measure/FLIP after layout settles.
+              requestAnimationFrame(runOpenFlip)
+            }}
+            role="dialog"
+            aria-modal="true"
+            class={cn(
+              'card fixed z-[9999] overflow-hidden rounded-2xl border border-border bg-card shadow-2xl',
+              props.panelClass,
+            )}
+            style={{ opacity: '0', margin: '0' }}
+          >
+            <button
+              type="button"
+              aria-label="Close"
+              onClick={doClose}
+              class="absolute right-3 top-3 z-10 grid h-8 w-8 place-items-center rounded-full bg-muted/80 text-muted-foreground transition-colors hover:bg-muted hover:text-foreground"
+            >
+              <svg
+                viewBox="0 0 24 24"
+                class="h-4 w-4"
+                fill="none"
+                stroke="currentColor"
+                stroke-width="2.5"
+                stroke-linecap="round"
+                aria-hidden="true"
+              >
+                <path d="M6 6l12 12M18 6L6 18" />
+              </svg>
+            </button>
+            {props.children}
+          </div>
+        </Portal>
+      </Show>
+    </>
+  )
+}