npm - @a4ui/core - Versions diffs - 0.11.1 → 0.12.0 - Mend

@a4ui/core 0.11.1 → 0.12.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (126) hide show

package/README.md +36 -26
package/dist/full.css +3042 -0
package/dist/index.d.ts +1 -1
package/dist/index.js +1 -1
package/package.json +8 -1
package/src/charts/BarChart.tsx +55 -0
package/src/charts/DonutChart.tsx +127 -0
package/src/charts/Sparkline.tsx +101 -0
package/src/charts/index.ts +5 -0
package/src/commerce/CartLine.tsx +84 -0
package/src/commerce/CartSummary.tsx +70 -0
package/src/commerce/FilterGroup.tsx +70 -0
package/src/commerce/PriceTag.tsx +62 -0
package/src/commerce/ProductCard.tsx +121 -0
package/src/commerce/ProductGrid.tsx +27 -0
package/src/commerce/QuantityStepper.tsx +59 -0
package/src/commerce/index.ts +10 -0
package/src/elements.tsx +167 -0
package/src/index.ts +166 -0
package/src/layout/AppShell.tsx +102 -0
package/src/layout/ChristmasBackground.tsx +177 -0
package/src/layout/EffectsToggle.tsx +41 -0
package/src/layout/NavGroup.tsx +45 -0
package/src/layout/SnowScenery.tsx +76 -0
package/src/layout/SpaceBackground.tsx +459 -0
package/src/layout/ThemeToggle.tsx +40 -0
package/src/layout/ThemedScenery.tsx +179 -0
package/src/layout/sceneEffects.ts +49 -0
package/src/lib/cn.ts +17 -0
package/src/lib/effects.ts +71 -0
package/src/lib/media.ts +27 -0
package/src/lib/motion.ts +191 -0
package/src/lib/theme.ts +113 -0
package/src/lib/virtual.ts +33 -0
package/src/styles/space.css +510 -0
package/src/styles/tokens.css +213 -0
package/src/themes/index.ts +102 -0
package/src/themes/palettes.ts +368 -0
package/src/ui/Accordion.tsx +65 -0
package/src/ui/Affix.tsx +72 -0
package/src/ui/Alert.tsx +55 -0
package/src/ui/AlertDialog.tsx +58 -0
package/src/ui/Anchor.tsx +100 -0
package/src/ui/Avatar.tsx +34 -0
package/src/ui/AvatarGroup.tsx +55 -0
package/src/ui/BackToTop.tsx +51 -0
package/src/ui/Badge.tsx +46 -0
package/src/ui/BottomNavigation.tsx +65 -0
package/src/ui/Breadcrumb.tsx +64 -0
package/src/ui/Button.tsx +49 -0
package/src/ui/Calendar.tsx +40 -0
package/src/ui/CalendarHeatmap.tsx +180 -0
package/src/ui/Card.tsx +84 -0
package/src/ui/Carousel.tsx +121 -0
package/src/ui/Cascader.tsx +158 -0
package/src/ui/Checkbox.tsx +35 -0
package/src/ui/Clock.tsx +221 -0
package/src/ui/Collapse.tsx +48 -0
package/src/ui/ColorPicker.tsx +89 -0
package/src/ui/Combobox.tsx +67 -0
package/src/ui/Command.tsx +158 -0
package/src/ui/Comment.tsx +91 -0
package/src/ui/ContextMenu.tsx +58 -0
package/src/ui/Countdown.tsx +123 -0
package/src/ui/DataGrid.tsx +177 -0
package/src/ui/DateField.tsx +177 -0
package/src/ui/DateRangePicker.tsx +204 -0
package/src/ui/DateTimeField.tsx +68 -0
package/src/ui/Descriptions.tsx +56 -0
package/src/ui/Drawer.tsx +72 -0
package/src/ui/Dropdown.tsx +71 -0
package/src/ui/Dropzone.tsx +88 -0
package/src/ui/Empty.tsx +53 -0
package/src/ui/FileUpload.tsx +198 -0
package/src/ui/FloatingActionButton.tsx +48 -0
package/src/ui/Form.tsx +108 -0
package/src/ui/Highlight.tsx +53 -0
package/src/ui/HoverCard.tsx +42 -0
package/src/ui/Image.tsx +66 -0
package/src/ui/Input.tsx +38 -0
package/src/ui/Kbd.tsx +25 -0
package/src/ui/List.tsx +71 -0
package/src/ui/Marquee.tsx +48 -0
package/src/ui/Mentions.tsx +170 -0
package/src/ui/Meter.tsx +57 -0
package/src/ui/Modal.tsx +106 -0
package/src/ui/MultiSelect.tsx +236 -0
package/src/ui/NotificationCenter.tsx +103 -0
package/src/ui/NumberInput.tsx +48 -0
package/src/ui/PageHeader.tsx +60 -0
package/src/ui/Pagination.tsx +62 -0
package/src/ui/Popover.tsx +42 -0
package/src/ui/Portal.tsx +34 -0
package/src/ui/Progress.tsx +55 -0
package/src/ui/RadioGroup.tsx +65 -0
package/src/ui/Rating.tsx +98 -0
package/src/ui/Result.tsx +75 -0
package/src/ui/RingProgress.tsx +75 -0
package/src/ui/SegmentedControl.tsx +61 -0
package/src/ui/Select.tsx +55 -0
package/src/ui/Separator.tsx +39 -0
package/src/ui/Skeleton.tsx +23 -0
package/src/ui/Slider.tsx +57 -0
package/src/ui/Sortable.tsx +174 -0
package/src/ui/SpeedDial.tsx +75 -0
package/src/ui/Spinner.tsx +33 -0
package/src/ui/Splitter.tsx +115 -0
package/src/ui/Stat.tsx +74 -0
package/src/ui/Stepper.tsx +134 -0
package/src/ui/Switch.tsx +44 -0
package/src/ui/Table.tsx +128 -0
package/src/ui/Tabs.tsx +72 -0
package/src/ui/TagInput.tsx +85 -0
package/src/ui/Textarea.tsx +38 -0
package/src/ui/TimeField.tsx +298 -0
package/src/ui/Timeline.tsx +89 -0
package/src/ui/Toast.tsx +68 -0
package/src/ui/Toggle.tsx +41 -0
package/src/ui/ToggleGroup.tsx +59 -0
package/src/ui/Tooltip.tsx +42 -0
package/src/ui/Tour.tsx +197 -0
package/src/ui/Transfer.tsx +112 -0
package/src/ui/Tree.tsx +100 -0
package/src/ui/TreeSelect.tsx +151 -0
package/src/ui/VirtualList.tsx +81 -0
package/src/ui/internal/CalendarCore.tsx +276 -0

package/src/ui/DateRangePicker.tsx ADDED Viewed

@@ -0,0 +1,204 @@
+// Two-click range variant of DateField: same hand-rolled popover mechanism
+// (portaled, fixed-positioned at the trigger's viewport rect, closing on
+// outside click / Escape / scroll / resize), but driving `<CalendarCore>`'s
+// `rangeStart`/`rangeEnd` highlight instead of a single `selected` day. Value/
+// onChange speak plain `YYYY-MM-DD` strings (local, never `toISOString` which
+// shifts by timezone).
+import { CalendarDays } from 'lucide-solid'
+import type { JSX } from 'solid-js'
+import { createEffect, createMemo, createSignal, onCleanup, Show } from 'solid-js'
+import { Portal } from 'solid-js/web'
+import { cn } from '../lib/cn'
+import { CalendarCore } from './internal/CalendarCore'
+const WEEKDAYS = ['Mo', 'Tu', 'We', 'Th', 'Fr', 'Sa', 'Su']
+const MONTHS = [
+  'January',
+  'February',
+  'March',
+  'April',
+  'May',
+  'June',
+  'July',
+  'August',
+  'September',
+  'October',
+  'November',
+  'December',
+]
+/** Format a local Date as `YYYY-MM-DD` (zero-padded, no timezone shift). */
+function fmt(d: Date): string {
+  const y = d.getFullYear()
+  const m = `${d.getMonth() + 1}`.padStart(2, '0')
+  const day = `${d.getDate()}`.padStart(2, '0')
+  return `${y}-${m}-${day}`
+}
+/** Parse `YYYY-MM-DD` into a local-midnight Date; null if malformed. */
+function parse(value: string): Date | null {
+  const m = /^(\d{4})-(\d{2})-(\d{2})$/.exec(value)
+  if (!m) return null
+  return new Date(Number(m[1]), Number(m[2]) - 1, Number(m[3]))
+}
+/** Human-readable endpoint label, e.g. `15 Mar 2026`. */
+function formatDay(d: Date, months: string[]): string {
+  return `${d.getDate()} ${months[d.getMonth()].slice(0, 3)} ${d.getFullYear()}`
+}
+export interface DateRange {
+  /** 'YYYY-MM-DD' (local) or '' if unset. */
+  start: string
+  end: string
+}
+export interface DateRangePickerProps {
+  value: DateRange
+  onChange: (value: DateRange) => void
+  /** Placeholder shown when nothing is selected. */
+  label?: string
+  disabled?: boolean
+  months?: string[]
+  weekdays?: string[]
+  class?: string
+}
+/**
+ * Compact hand-rolled range picker built on the same popover mechanism as
+ * `DateField`, but tracking a start/end pair instead of a single day. The
+ * first click begins a range, the second completes it (closing the popover);
+ * clicking again once complete starts a fresh range.
+ *
+ * @example
+ * ```tsx
+ * const [range, setRange] = createSignal<DateRange>({ start: '2026-03-15', end: '' })
+ * <DateRangePicker value={range()} onChange={setRange} label="Stay dates" />
+ * ```
+ */
+export function DateRangePicker(props: DateRangePickerProps): JSX.Element {
+  const [open, setOpen] = createSignal(false)
+  let rootRef: HTMLDivElement | undefined
+  let btnRef: HTMLButtonElement | undefined
+  let popRef: HTMLDivElement | undefined
+  // The calendar is rendered in a <Portal> (so it escapes the glass card's
+  // backdrop-filter stacking context, which otherwise traps it behind later
+  // content). Being at <body>, it can't use `absolute` positioning relative to
+  // the trigger — position it with `fixed` at the trigger's viewport rect.
+  const [pos, setPos] = createSignal({ top: 0, left: 0 })
+  const POP_W = 288 // w-72
+  const place = () => {
+    if (!btnRef) return
+    const r = btnRef.getBoundingClientRect()
+    const left = Math.max(8, Math.min(r.left, window.innerWidth - POP_W - 8))
+    setPos({ top: r.bottom + 4, left })
+  }
+  const openPopover = () => {
+    if (props.disabled) return
+    place()
+    setOpen(true)
+  }
+  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))
+  const startDate = createMemo(() => parse(props.value.start))
+  const endDate = createMemo(() => parse(props.value.end))
+  const triggerLabel = createMemo(() => {
+    const months = props.months ?? MONTHS
+    const s = startDate()
+    const e = endDate()
+    if (s && e) return `${formatDay(s, months)} – ${formatDay(e, months)}`
+    if (s) return `${formatDay(s, months)} – …`
+    return null
+  })
+  const handlePick = (d: Date) => {
+    const { start, end } = props.value
+    const startD = start ? parse(start) : null
+    // Both endpoints set, or neither set: begin a fresh range and stay open.
+    if ((start && end) || (!start && !end) || !startD) {
+      props.onChange({ start: fmt(d), end: '' })
+      return
+    }
+    // Start set, end empty: complete the range if picking on/after start,
+    // otherwise restart from the newly picked (earlier) day.
+    if (d >= startD) {
+      props.onChange({ start, end: fmt(d) })
+      close()
+    } else {
+      props.onChange({ start: fmt(d), end: '' })
+    }
+  }
+  return (
+    <div ref={rootRef} class={cn('relative', props.class)}>
+      <button
+        ref={btnRef}
+        type="button"
+        disabled={props.disabled}
+        onClick={() => (open() ? close() : openPopover())}
+        class="flex w-full 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={triggerLabel() ? '' : 'text-muted-foreground'}>
+          {triggerLabel() ?? props.label ?? 'Select range'}
+        </span>
+        <CalendarDays 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` }}
+            class="z-50 w-72 rounded-lg border border-border bg-card p-3 text-card-foreground shadow-lg"
+          >
+            <CalendarCore
+              rangeStart={startDate() ?? undefined}
+              rangeEnd={endDate() ?? undefined}
+              initialView={startDate() ?? undefined}
+              onPick={handlePick}
+              weekStart={1}
+              months={props.months}
+              weekdays={props.weekdays ?? WEEKDAYS}
+            />
+          </div>
+        </Portal>
+      </Show>
+    </div>
+  )
+}

package/src/ui/DateTimeField.tsx ADDED Viewed

@@ -0,0 +1,68 @@
+// Combined date + time picker: a DateField and a TimeField side by side that
+// read/write a single "YYYY-MM-DD HH:MM" string (local, no timezone shift). Each
+// half keeps its own popover; this just splits the value on the way in and joins
+// it on the way out, so either part can be filled independently.
+import type { JSX } from 'solid-js'
+import { createMemo } from 'solid-js'
+import { cn } from '../lib/cn'
+import { DateField } from './DateField'
+import { TimeField } from './TimeField'
+export interface DateTimeFieldProps {
+  /** Selected moment as `YYYY-MM-DD HH:MM` (local), or `''` for none. */
+  value: string
+  /** Called with the combined `YYYY-MM-DD HH:MM` (either part may be missing). */
+  onChange: (value: string) => void
+  /** 12-hour time display with AM/PM. @default false */
+  hour12?: boolean
+  /** Minute increment for the time options. @default 5 */
+  minuteStep?: number
+  /** Placeholder for the date half. */
+  dateLabel?: string
+  /** Placeholder for the time half. */
+  timeLabel?: string
+  disabled?: boolean
+  class?: string
+}
+const DATE_RE = /\d{4}-\d{2}-\d{2}/
+const TIME_RE = /\d{2}:\d{2}/
+const join = (date: string, time: string): string => [date, time].filter(Boolean).join(' ')
+/**
+ * Date + time picker built from {@link DateField} and {@link TimeField}. Speaks a
+ * single `YYYY-MM-DD HH:MM` string; the two halves fill in independently.
+ *
+ * @example
+ * ```tsx
+ * const [when, setWhen] = createSignal('2026-07-15 09:30')
+ * <DateTimeField value={when()} onChange={setWhen} hour12 />
+ * ```
+ */
+export function DateTimeField(props: DateTimeFieldProps): JSX.Element {
+  const datePart = createMemo(() => DATE_RE.exec(props.value)?.[0] ?? '')
+  const timePart = createMemo(() => TIME_RE.exec(props.value)?.[0] ?? '')
+  return (
+    <div class={cn('flex flex-wrap items-start gap-2', props.class)}>
+      <DateField
+        value={datePart()}
+        onChange={(d) => props.onChange(join(d, timePart()))}
+        label={props.dateLabel ?? 'Select date'}
+        disabled={props.disabled}
+        class="min-w-40 flex-1"
+      />
+      <TimeField
+        value={timePart()}
+        onChange={(t) => props.onChange(join(datePart(), t))}
+        hour12={props.hour12}
+        minuteStep={props.minuteStep}
+        label={props.timeLabel ?? 'Select time'}
+        disabled={props.disabled}
+        class="min-w-32"
+      />
+    </div>
+  )
+}

package/src/ui/Descriptions.tsx ADDED Viewed

@@ -0,0 +1,56 @@
+// Semantic key/value detail list — a <dl> laid out as a responsive grid. For
+// showing an entity's attributes (a "properties" / "details" panel). Values are
+// JSX so they can carry badges, links, or formatted content; all colors come
+// from semantic theme tokens so it stays theme-agnostic.
+import { For, type JSX } from 'solid-js'
+import { cn } from '../lib/cn'
+/** A single label/value row in a {@link Descriptions} list. */
+export interface DescriptionItem {
+  label: string
+  value: JSX.Element
+}
+export interface DescriptionsProps {
+  items: DescriptionItem[]
+  /** Number of columns on `sm`+ screens (1, 2, or 3). Default: 1. */
+  columns?: number
+  class?: string
+}
+const COLUMN_CLASSES: Record<number, string> = {
+  1: 'grid-cols-1',
+  2: 'sm:grid-cols-2',
+  3: 'sm:grid-cols-3',
+}
+/**
+ * Renders a set of label/value pairs as a semantic `<dl>` in a responsive grid.
+ * Use `columns` to fan the pairs out into 2 or 3 columns on wider screens.
+ *
+ * @example
+ * ```tsx
+ * <Descriptions
+ *   columns={2}
+ *   items={[
+ *     { label: 'Status', value: <Badge tone="success">Active</Badge> },
+ *     { label: 'Owner', value: 'Ada Lovelace' },
+ *   ]}
+ * />
+ * ```
+ */
+export function Descriptions(props: DescriptionsProps): JSX.Element {
+  return (
+    <dl class={cn('grid gap-x-6', COLUMN_CLASSES[props.columns ?? 1] ?? COLUMN_CLASSES[1], props.class)}>
+      <For each={props.items}>
+        {(item) => (
+          <div class="border-b border-border py-2">
+            <dt class="text-xs uppercase tracking-wide text-muted-foreground">{item.label}</dt>
+            <dd class="mt-0.5 text-sm text-foreground">{item.value}</dd>
+          </div>
+        )}
+      </For>
+    </dl>
+  )
+}

package/src/ui/Drawer.tsx ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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>
+  )
+}