@adea-ai/ui 0.61.0 → 0.62.0

package/dist/r/src/components/ui/tooltip/tooltip.tsx

@@ -0,0 +1,102 @@
+import { Tooltip as KobalteTooltip } from '@kobalte/core/tooltip'
+import type { ComponentProps } from 'solid-js'
+import { createContext, splitProps, useContext } from 'solid-js'
+import { cn } from '../../../lib/utils'
+
+/**
+ * The provider sets the *timing* defaults for every tooltip below it.
+ *
+ * Timing is the part of a tooltip that has to agree across an app: one that
+ * opens in 200ms in a toolbar and 700ms in a sidebar reads as a bug. The
+ * provider is where that agreement lives. It is optional — a tooltip outside a
+ * provider falls back to the same defaults — so a consumer can drop it in
+ * without restructuring anything.
+ */
+type TooltipTiming = {
+  openDelay: number
+  closeDelay: number
+  skipDelayDuration: number
+}
+
+const tooltipDefaults: TooltipTiming = {
+  /** Long enough that a pointer crossing a toolbar does not strobe tooltips. */
+  openDelay: 400,
+  /** Short, because the pointer has already left the control. */
+  closeDelay: 80,
+  /**
+   * After a tooltip has been seen, the next one opens immediately for this
+   * long. This is what makes moving along a row of icons feel like one
+   * gesture instead of four separate waits.
+   */
+  skipDelayDuration: 500,
+}
+
+const TooltipTimingContext = createContext<TooltipTiming>(tooltipDefaults)
+
+export type TooltipProviderProps = {
+  children?: ComponentProps<'div'>['children']
+  openDelay?: number
+  closeDelay?: number
+  skipDelayDuration?: number
+}
+
+export function TooltipProvider(props: TooltipProviderProps) {
+  return (
+    <TooltipTimingContext.Provider
+      value={{
+        openDelay: props.openDelay ?? tooltipDefaults.openDelay,
+        closeDelay: props.closeDelay ?? tooltipDefaults.closeDelay,
+        skipDelayDuration: props.skipDelayDuration ?? tooltipDefaults.skipDelayDuration,
+      }}
+    >
+      {props.children}
+    </TooltipTimingContext.Provider>
+  )
+}
+
+export type TooltipRootProps = ComponentProps<typeof KobalteTooltip>
+
+export function Tooltip(props: TooltipRootProps) {
+  const timing = useContext(TooltipTimingContext)
+
+  return (
+    <KobalteTooltip
+      openDelay={props.openDelay ?? timing.openDelay}
+      closeDelay={props.closeDelay ?? timing.closeDelay}
+      skipDelayDuration={props.skipDelayDuration ?? timing.skipDelayDuration}
+      {...props}
+    />
+  )
+}
+
+export function TooltipTrigger(props: ComponentProps<typeof KobalteTooltip.Trigger>) {
+  return <KobalteTooltip.Trigger {...props} />
+}
+
+export type TooltipContentProps = ComponentProps<typeof KobalteTooltip.Content> & {
+  /** Hide the caret pointing at the trigger. */
+  hideArrow?: boolean
+}
+
+export function TooltipContent(props: TooltipContentProps) {
+  const [local, rest] = splitProps(props, ['class', 'hideArrow', 'children'])
+
+  return (
+    <KobalteTooltip.Portal>
+      <KobalteTooltip.Content
+        class={cn(
+          'bg-scrim text-scrim-foreground z-(--z-tooltip) w-fit max-w-64 rounded-md px-2 py-1 text-xs',
+          'origin-(--kb-tooltip-content-transform-origin) text-balance',
+          'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
+          'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+          'data-expanded:duration-150 data-closed:duration-100',
+          local.class
+        )}
+        {...rest}
+      >
+        {local.children}
+        <KobalteTooltip.Arrow aria-hidden="true" />
+      </KobalteTooltip.Content>
+    </KobalteTooltip.Portal>
+  )
+}

package/dist/r/src/lib/keyed-rows.ts

@@ -0,0 +1,68 @@
+import { createMemo, createSignal, type Accessor } from 'solid-js'
+
+/**
+ * A stable list entry for `<For>`. The wrapper object never changes identity
+ * once the key exists, so the control flow keeps the row's DOM; the row's
+ * bindings update through `entry.item()` instead of remounting.
+ */
+export type KeyedRow<T> = Readonly<{ item: Accessor<T> }>
+
+/**
+ * Maps a reactive list to stable, key-indexed rows.
+ *
+ * Server-backed lists — query results, and projections over them — produce fresh
+ * object identities on every fetch. Feeding them straight into `<For>` remounts
+ * every row on each refetch: open menus close, focus and hover state drop, and
+ * the whole subtree's DOM is rebuilt. On a list that refetches on a poll or a
+ * websocket tick, that is a visible flicker and a measurable cost.
+ *
+ * Keying on a stable id keeps each row's DOM alive across refetches and pushes
+ * the update through that row's own accessor, so only the bindings whose values
+ * actually changed touch the DOM. Removed keys drop their rows; reordered keys
+ * keep their rows and move the DOM nodes. Keys must be unique within the list —
+ * a duplicate reuses the first entry's row.
+ *
+ * `equals` decides whether a fresh item replaces the row's stored value. The
+ * default treats every new object as a change, which is correct for a projection
+ * whose fields are all rendered. Pass a field-level comparator — a version
+ * stamp, a revision number — to skip redundant downstream updates entirely.
+ *
+ * ```tsx
+ * const rows = keyedRows(() => tasks(), (task) => task.id, (a, b) => a.version === b.version)
+ * return <For each={rows()}>{(row) => <TaskCard task={row.item} />}</For>
+ * ```
+ */
+export function keyedRows<T, K>(
+  list: () => readonly T[],
+  key: (item: T) => K,
+  equals: false | ((previous: T, next: T) => boolean) = false
+): Accessor<readonly KeyedRow<T>[]> {
+  type Entry = { row: KeyedRow<T>; set(item: T): void }
+  let entries = new Map<K, Entry>()
+  return createMemo<readonly KeyedRow<T>[]>(() => {
+    const items = list()
+    const next = new Map<K, Entry>()
+    const rows = items.map((item) => {
+      const itemKey = key(item)
+      let entry = next.get(itemKey) ?? entries.get(itemKey)
+      if (!entry) {
+        // The tuple wrapper keeps the item out of createSignal's
+        // `Exclude<T, Function>` overload, which unconstrained generics cannot
+        // satisfy, while giving the custom equality a stable shape to compare.
+        const [holder, setHolder] = createSignal<readonly [T]>([item], {
+          equals:
+            equals === false
+              ? false
+              : (previousHolder, nextHolder) => equals(previousHolder[0], nextHolder[0]),
+        })
+        entry = { row: { item: () => holder()[0] }, set: (nextItem) => setHolder([nextItem]) }
+      } else if (!next.has(itemKey)) {
+        entry.set(item)
+      }
+      next.set(itemKey, entry)
+      return entry.row
+    })
+    entries = next
+    return rows
+  })
+}

package/dist/r/src/lib/overlay.ts

@@ -0,0 +1,70 @@
+/**
+ * Shared strings for the overlay layer: dialogs, sheets, menus, popovers,
+ * tooltips and the command palette.
+ *
+ * These live here rather than in each component because the overlay family is
+ * where consistency is most visible and least likely to survive duplication.
+ * A dialog, a sheet and a dropdown that disagree about their border, radius,
+ * motion or shadow read as three different apps — and an app that adopts this
+ * library would inherit all three. Declaring the surface once is what makes
+ * "an overlay looks like this" a fact rather than a convention.
+ */
+
+/** The panel itself: fill, hairline edge, radius, elevation. */
+export const overlaySurface =
+  'bg-popover text-popover-foreground rounded-xl border border-border shadow-lg'
+
+/** The span of the portal wrapper that centres a dialog-like overlay. */
+export const overlayPositioner = 'fixed inset-0 z-(--z-dialog) grid place-items-center p-4'
+
+/** The dimming layer behind a modal overlay. */
+export const overlayScrim =
+  'fixed inset-0 z-(--z-dialog) bg-scrim/50 supports-[backdrop-filter]:backdrop-blur-xs'
+
+/**
+ * Entrance and exit motion, expressed as data-state classes.
+ *
+ * `data-expanded` / `data-closed` are Kobalte's; `data-side-*` come from its
+ * popper positioning and let a menu slide in from the edge it is anchored to,
+ * which is what makes a dropdown feel attached to its trigger rather than
+ * dropped on the screen. Exit motion is shorter than entry, because a
+ * dismissal should feel immediate while an arrival benefits from being seen.
+ */
+export const overlayMotion = [
+  'data-expanded:animate-in data-expanded:fade-in-0 data-expanded:zoom-in-95',
+  'data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95',
+  'data-expanded:duration-200 data-closed:duration-150',
+].join(' ')
+
+/** Popover-style motion: no zoom, so a panel anchored to a control does not
+ * appear to breathe away from it. */
+export const popoverMotion = [
+  'data-expanded:animate-in data-expanded:fade-in-0 data-closed:animate-out data-closed:fade-out-0',
+  'data-expanded:duration-150 data-closed:duration-100',
+].join(' ')
+
+/** The popper arrow. Sized in the component; coloured here. */
+export const popoverArrow = 'fill-popover stroke-border'
+
+/**
+ * A menu row: the shared height, radius, hover fill and focus treatment for
+ * every item inside a menu, listbox or command list.
+ */
+export const menuItem = [
+  'relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none',
+  'transition-colors ease-out',
+  'data-[highlighted]:bg-surface-hover data-[highlighted]:text-foreground',
+  'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+  '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:size-4',
+  '[&_svg:not([class*=text-])]:text-muted-foreground',
+].join(' ')
+
+/** The label above a group of menu rows. */
+export const menuLabel =
+  'px-2 py-1.5 text-2xs font-medium tracking-wide text-muted-foreground uppercase'
+
+/** The rule between menu groups. */
+export const menuSeparator = 'bg-border -mx-1 my-1 h-px'
+
+/** Padding shared by every menu-list surface. */
+export const menuContentPadding = 'p-1'